@extends('layouts.app')

@section('content')
<div class="bg-gray-50 min-h-screen py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-8">Checkout</h1>

        <form action="{{ route('checkout.store') }}" method="POST" class="grid lg:grid-cols-3 gap-8">
            @csrf
            
            {{-- Left Column - Shipping & Payment --}}
            <div class="lg:col-span-2 space-y-6">
                {{-- Contact Information --}}
                <div class="bg-white rounded-2xl shadow-sm p-6">
                    <h2 class="text-xl font-bold text-gray-900 mb-6 flex items-center">
                        <span class="w-8 h-8 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-sm mr-3">1</span>
                        Contact Information
                    </h2>
                    
                    <div class="grid md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Full Name *</label>
                            <input type="text" name="shipping_name" required
                                   value="{{ auth()->user()?->name }}"
                                   class="w-full px-4 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500 @error('shipping_name') border-red-500 @enderror">
                            @error('shipping_name')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                            <input type="email" name="shipping_email"
                                   value="{{ auth()->user()?->email }}"
                                   class="w-full px-4 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500 @error('shipping_email') border-red-500 @enderror">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Phone Number *</label>
                            <input type="tel" name="shipping_phone" required placeholder="01XXXXXXXXX"
                                   class="w-full px-4 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500 @error('shipping_phone') border-red-500 @enderror">
                            @error('shipping_phone')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                {{-- Shipping Address --}}
                <div class="bg-white rounded-2xl shadow-sm p-6">
                    <h2 class="text-xl font-bold text-gray-900 mb-6 flex items-center">
                        <span class="w-8 h-8 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-sm mr-3">2</span>
                        Shipping Address
                    </h2>
                    
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Street Address *</label>
                            <textarea name="shipping_address" required rows="2"
                                      class="w-full px-4 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500 @error('shipping_address') border-red-500 @enderror"
                                      placeholder="House number, street name, area"></textarea>
                            @error('shipping_address')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div class="grid md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">City *</label>
                                <select name="shipping_city" required
                                        class="w-full px-4 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500 @error('shipping_city') border-red-500 @enderror">
                                    <option value="">Select City</option>
                                    <option value="Dhaka">Dhaka (৳60 shipping)</option>
                                    <option value="Chittagong">Chittagong (৳120 shipping)</option>
                                    <option value="Sylhet">Sylhet (৳120 shipping)</option>
                                    <option value="Rajshahi">Rajshahi (৳120 shipping)</option>
                                    <option value="Khulna">Khulna (৳120 shipping)</option>
                                    <option value="Barisal">Barisal (৳120 shipping)</option>
                                    <option value="Rangpur">Rangpur (৳120 shipping)</option>
                                    <option value="Mymensingh">Mymensingh (৳120 shipping)</option>
                                </select>
                                @error('shipping_city')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">District</label>
                                <input type="text" name="shipping_district"
                                       class="w-full px-4 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500">
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Order Notes (Optional)</label>
                            <textarea name="order_notes" rows="2"
                                      class="w-full px-4 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500"
                                      placeholder="Special instructions for delivery"></textarea>
                        </div>
                    </div>
                </div>

                {{-- Payment Method --}}
                <div class="bg-white rounded-2xl shadow-sm p-6">
                    <h2 class="text-xl font-bold text-gray-900 mb-6 flex items-center">
                        <span class="w-8 h-8 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-sm mr-3">3</span>
                        Payment Method
                    </h2>
                    
                    <div class="space-y-3">
                        <label class="flex items-center p-4 border rounded-xl cursor-pointer hover:bg-gray-50 transition has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50">
                            <input type="radio" name="payment_method" value="cod" checked
                                   class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                            <div class="ml-4 flex items-center">
                                <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
                                    <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>
                                    </svg>
                                </div>
                                <div>
                                    <p class="font-medium text-gray-900">Cash on Delivery</p>
                                    <p class="text-sm text-gray-500">Pay when you receive</p>
                                </div>
                            </div>
                        </label>
                        
                        <label class="flex items-center p-4 border rounded-xl cursor-pointer hover:bg-gray-50 transition has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50">
                            <input type="radio" name="payment_method" value="bkash"
                                   class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                            <div class="ml-4 flex items-center">
                                <div class="w-10 h-10 bg-pink-100 rounded-lg flex items-center justify-center mr-3 text-pink-600 font-bold text-xs">
                                    bK
                                </div>
                                <div>
                                    <p class="font-medium text-gray-900">bKash</p>
                                    <p class="text-sm text-gray-500">Pay via bKash wallet</p>
                                </div>
                            </div>
                        </label>
                        
                        <label class="flex items-center p-4 border rounded-xl cursor-pointer hover:bg-gray-50 transition has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50">
                            <input type="radio" name="payment_method" value="nagad"
                                   class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                            <div class="ml-4 flex items-center">
                                <div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center mr-3 text-orange-600 font-bold text-xs">
                                    Ng
                                </div>
                                <div>
                                    <p class="font-medium text-gray-900">Nagad</p>
                                    <p class="text-sm text-gray-500">Pay via Nagad wallet</p>
                                </div>
                            </div>
                        </label>
                    </div>
                </div>
            </div>

            {{-- Right Column - Order Summary --}}
            <div class="lg:col-span-1">
                <div class="bg-white rounded-2xl shadow-sm p-6 sticky top-24">
                    <h2 class="text-xl font-bold text-gray-900 mb-6">Order Summary</h2>
                    
                    {{-- Items --}}
                    <div class="space-y-4 mb-6 max-h-64 overflow-y-auto">
                        @foreach($items as $item)
                        <div class="flex gap-4">
                            <img src="{{ $item['image'] }}" alt="{{ $item['name'] }}" class="w-16 h-16 rounded-lg object-cover">
                            <div class="flex-1 min-w-0">
                                <p class="text-sm font-medium text-gray-900 line-clamp-1">{{ $item['name'] }}</p>
                                <p class="text-sm text-gray-500">Qty: {{ $item['quantity'] }}</p>
                                <p class="text-sm font-medium">৳{{ number_format($item['price'] * $item['quantity'], 2) }}</p>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    
                    {{-- Totals --}}
                    <div class="border-t pt-4 space-y-3">
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600">Subtotal</span>
                            <span>৳{{ number_format($subtotal, 2) }}</span>
                        </div>
                        @if($discount > 0)
                        <div class="flex justify-between text-sm text-green-600">
                            <span>Discount</span>
                            <span>-৳{{ number_format($discount, 2) }}</span>
                        </div>
                        @endif
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600">Shipping</span>
                            <span id="shipping-display">Calculated</span>
                        </div>
                        <div class="border-t pt-3 flex justify-between text-lg font-bold">
                            <span>Total</span>
                            <span id="order-total">৳{{ number_format($subtotal - $discount, 2) }}</span>
                        </div>
                    </div>
                    
                    <button type="submit" 
                            class="w-full mt-6 bg-blue-600 text-white py-3 rounded-xl font-semibold hover:bg-blue-700 transition">
                        Place Order
                    </button>
                    
                    <p class="text-center text-sm text-gray-500 mt-4">
                        By placing your order, you agree to our Terms of Service
                    </p>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    document.querySelector('select[name="shipping_city"]').addEventListener('change', function() {
        const city = this.value;
        const shipping = city === 'Dhaka' ? 60 : (city ? 120 : 0);
        document.getElementById('shipping-display').textContent = shipping > 0 ? '৳' + shipping.toFixed(2) : 'Calculated';
        
        const subtotal = {{ $subtotal }};
        const discount = {{ $discount }};
        const total = subtotal - discount + shipping;
        document.getElementById('order-total').textContent = '৳' + total.toFixed(2);
    });
</script>
@endsection