@extends('layouts.shop')

@section('title', 'Checkout - Area 51 Booze')

@section('content')
<div class="container mx-auto px-4 py-8 max-w-4xl">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-800">Checkout</h1>
        <p class="text-gray-600">Complete your order</p>
    </div>

    <form action="{{ route('shop.checkout.process') }}" method="POST" class="grid lg:grid-cols-3 gap-8">
        @csrf
        
        <!-- Left Column - Order Details -->
        <div class="lg:col-span-2 space-y-6">
            

            <!-- Delivery Address -->
            <div class="bg-white p-6 rounded-lg shadow-md">
                <h3 class="text-lg font-semibold mb-4">Delivery Address</h3>
                
                @auth
                    @if($addresses->count() > 0)
                        <div class="space-y-3 mb-4">
                            @foreach($addresses as $address)
                                <div class="border border-gray-200 rounded-lg p-4">
                                    <label class="flex items-start space-x-3 cursor-pointer">
                                        <input 
                                            type="radio" 
                                            name="saved_address_id" 
                                            value="{{ $address->id }}" 
                                            class="mt-1 text-blue-600"
                                            {{ $loop->first ? 'checked' : '' }}
                                        >
                                        <div>
                                            <p class="font-medium">{{ $address->full_name }}</p>
                                            <p class="text-sm text-gray-600">{{ $address->address_line1 }}</p>
                                            @if($address->address_line2)
                                                <p class="text-sm text-gray-600">{{ $address->address_line2 }}</p>
                                            @endif
                                            <p class="text-sm text-gray-600">{{ $address->deliveryLocation->location_name }}, Harare</p>
                                            <p class="text-sm text-gray-500">{{ $address->phone_number }}</p>
                                            @if($address->is_default)
                                                <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded mt-1">Default</span>
                                            @endif
                                        </div>
                                    </label>
                                </div>
                            @endforeach
                        </div>
                        
                        <div class="border-t pt-4">
                            <label class="flex items-start space-x-3 cursor-pointer">
                                <input type="radio" name="saved_address_id" value="new" class="mt-1 text-blue-600">
                                <span class="text-sm text-gray-700">Use a different address</span>
                            </label>
                        </div>
                    @endif
                @endauth
                
                <div class="mt-4 new-address-fields" {{ Auth::check() && $addresses->count() > 0 ? 'style="display: none;"' : '' }}>
                    <div class="grid md:grid-cols-2 gap-4 mb-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Full Name *</label>
                            <input 
                                type="text" 
                                name="delivery_full_name" 
                                {{ !Auth::check() || $addresses->count() == 0 ? 'required' : '' }}
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                value="{{ old('delivery_full_name', Auth::user()->name ?? '') }}"
                                placeholder="Enter recipient's full name"
                            >
                            @error('delivery_full_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-2">Phone Number *</label>
                            <input 
                                type="tel" 
                                name="delivery_phone" 
                                {{ !Auth::check() || $addresses->count() == 0 ? 'required' : '' }}
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                value="{{ old('delivery_phone') }}"
                                placeholder="e.g., +263 77 123 4567"
                            >
                            @error('delivery_phone')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Email</label>
                        <input 
                            type="email" 
                            name="delivery_email" 
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                            value="{{ old('delivery_email', Auth::user()->email ?? '') }}"
                            placeholder="Optional - for order updates"
                        >
                        @error('delivery_email')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Delivery Location *</label>
                        <select 
                            name="delivery_location_id" 
                            {{ !Auth::check() || $addresses->count() == 0 ? 'required' : '' }}
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                        >
                            <option value="">Select delivery area</option>
                            @foreach($deliveryLocations as $location)
                                <option value="{{ $location->id }}" {{ old('delivery_location_id') == $location->id ? 'selected' : '' }}>
                                    {{ $location->location_name }} @if($location->price > 0) (+${{ number_format($location->price, 2) }} delivery fee) @endif
                                </option>
                            @endforeach
                        </select>
                        @error('delivery_location_id')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Street Address *</label>
                        <input 
                            type="text" 
                            name="delivery_address_line1" 
                            {{ !Auth::check() || $addresses->count() == 0 ? 'required' : '' }}
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                            value="{{ old('delivery_address_line1') }}"
                            placeholder="Street address, house number"
                        >
                        @error('delivery_address_line1')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Additional Address Info</label>
                        <input 
                            type="text" 
                            name="delivery_address_line2" 
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                            value="{{ old('delivery_address_line2') }}"
                            placeholder="Apartment, suite, building, etc. (optional)"
                        >
                        @error('delivery_address_line2')
                            <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-2">City</label>
                            <input 
                                type="text" 
                                name="delivery_city" 
                                value="Harare"
                                readonly
                                class="w-full px-3 py-2 border border-gray-200 rounded-md bg-gray-50 text-gray-500"
                            >
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Country</label>
                            <input 
                                type="text" 
                                name="delivery_country" 
                                value="Zimbabwe"
                                readonly
                                class="w-full px-3 py-2 border border-gray-200 rounded-md bg-gray-50 text-gray-500"
                            >
                        </div>
                    </div>
                </div>
            </div>

            <!-- Billing Address -->
            <div class="bg-white p-6 rounded-lg shadow-md">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold">Billing Address</h3>
                    <label class="flex items-center space-x-2">
                        <input type="checkbox" name="billing_same_as_delivery" id="billing_same_as_delivery" checked class="text-blue-600">
                        <span class="text-sm text-gray-700">Same as delivery address</span>
                    </label>
                </div>
                
                <div class="billing-address-fields" style="display: none;">
                    <div class="grid md:grid-cols-2 gap-4 mb-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Full Name *</label>
                            <input 
                                type="text" 
                                name="billing_full_name" 
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                value="{{ old('billing_full_name', Auth::user()->name ?? '') }}"
                            >
                            @error('billing_full_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-2">Phone Number *</label>
                            <input 
                                type="tel" 
                                name="billing_phone" 
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                value="{{ old('billing_phone') }}"
                            >
                            @error('billing_phone')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Location *</label>
                        <select 
                            name="billing_location_id" 
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                        >
                            <option value="">Select location</option>
                            @foreach($deliveryLocations as $location)
                                <option value="{{ $location->id }}" {{ old('billing_location_id') == $location->id ? 'selected' : '' }}>
                                    {{ $location->location_name }}
                                </option>
                            @endforeach
                        </select>
                        @error('billing_location_id')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Street Address *</label>
                        <input 
                            type="text" 
                            name="billing_address_line1" 
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                            value="{{ old('billing_address_line1') }}"
                        >
                        @error('billing_address_line1')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Additional Address Info</label>
                        <input 
                            type="text" 
                            name="billing_address_line2" 
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                            value="{{ old('billing_address_line2') }}"
                        >
                        @error('billing_address_line2')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Payment Method -->
            <div class="bg-white p-6 rounded-lg shadow-md">
                <h3 class="text-lg font-semibold mb-4">Payment Method</h3>
                
                <div class="space-y-3">
                    <div class="border border-gray-200 rounded-lg p-4">
                        <label class="flex items-center space-x-3 cursor-pointer">
                            <input type="radio" name="payment_method" value="cash" class="text-blue-600" checked>
                            <div class="flex items-center space-x-3">
                                <i class="fas fa-money-bill-wave text-green-600 text-lg"></i>
                                <div>
                                    <p class="font-medium">Cash on Delivery</p>
                                    <p class="text-sm text-gray-600">Pay when your order arrives</p>
                                </div>
                            </div>
                        </label>
                    </div>
                    
                    <div class="border border-gray-200 rounded-lg p-4">
                        <label class="flex items-center space-x-3 cursor-pointer">
                            <input type="radio" name="payment_method" value="ecocash" class="text-blue-600">
                            <div class="flex items-center space-x-3">
                                <i class="fas fa-mobile-alt text-orange-600 text-lg"></i>
                                <div>
                                    <p class="font-medium">EcoCash</p>
                                    <p class="text-sm text-gray-600">Pay with your EcoCash wallet</p>
                                </div>
                            </div>
                        </label>
                    </div>
                </div>
                
                @error('payment_method')
                    <p class="text-red-500 text-sm mt-2">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <!-- Right Column - Order Summary -->
        <div class="lg:col-span-1">
            <div class="bg-white p-6 rounded-lg shadow-md sticky top-24">
                <h3 class="text-lg font-semibold mb-4">Order Summary</h3>
                
                <!-- Cart Items -->
                <div class="space-y-3 mb-4 max-h-64 overflow-y-auto">
                    @foreach($cartItems as $item)
                        <div class="flex items-center space-x-3 pb-3 border-b border-gray-100">
                            <img 
                                src="{{ $item['image'] ?: '/placeholder.jpg' }}" 
                                alt="{{ $item['name'] }}" 
                                class="w-12 h-12 object-cover rounded"
                            >
                            <div class="flex-1">
                                <h4 class="text-sm font-medium line-clamp-1">{{ $item['name'] }}</h4>
                                <p class="text-xs text-gray-500">{{ $item['quantity'] }} {{ $item['unit'] }} × ${{ number_format($item['price'], 2) }}</p>
                                <p class="text-sm font-semibold">${{ number_format($item['price'] * $item['quantity'], 2) }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
                
                <!-- Order Totals -->
                <div class="space-y-2 border-t border-gray-200 pt-4">
                    <div class="flex justify-between text-sm">
                        <span>Subtotal:</span>
                        <span>${{ number_format($subtotal, 2) }}</span>
                    </div>
                    
                    <div class="flex justify-between text-sm">
                        <span>Tax:</span>
                        <span>${{ number_format($tax, 2) }}</span>
                    </div>
                    
                    <div class="flex justify-between text-sm">
                        <span>Delivery:</span>
                        <span id="delivery-fee" class="text-gray-600">Select location</span>
                    </div>
                    
                    <div class="flex justify-between font-semibold text-lg border-t border-gray-200 pt-2">
                        <span>Total:</span>
                        <span id="total-amount" class="text-blue-600">${{ number_format($total, 2) }}</span>
                    </div>
                </div>
                
                <!-- Place Order Button -->
                <button 
                    type="submit"
                    class="w-full mt-6 bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors"
                >
                    Place Order
                </button>
                
                <!-- Security Note -->
                <div class="mt-4 flex items-center justify-center space-x-2 text-xs text-gray-500">
                    <i class="fas fa-lock"></i>
                    <span>Your information is secure and encrypted</span>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Handle saved address vs new address toggle
        const savedAddressRadios = document.querySelectorAll('input[name="saved_address_id"]');
        const newAddressFields = document.querySelector('.new-address-fields');
        const newAddressInputs = document.querySelectorAll('.new-address-fields input[required], .new-address-fields select[required]');
        
        if (savedAddressRadios.length > 0 && newAddressFields) {
            savedAddressRadios.forEach(radio => {
                radio.addEventListener('change', function() {
                    if (this.value === 'new') {
                        newAddressFields.style.display = 'block';
                        newAddressInputs.forEach(input => input.required = true);
                    } else {
                        newAddressFields.style.display = 'none';
                        newAddressInputs.forEach(input => {
                            input.required = false;
                            if (input.type !== 'text' || !input.readonly) {
                                input.value = '';
                            }
                        });
                    }
                });
            });
        }
        
        // Handle billing address same as delivery checkbox
        const billingSameCheckbox = document.getElementById('billing_same_as_delivery');
        const billingAddressFields = document.querySelector('.billing-address-fields');
        const billingInputs = document.querySelectorAll('.billing-address-fields input, .billing-address-fields select');
        
        if (billingSameCheckbox && billingAddressFields) {
            billingSameCheckbox.addEventListener('change', function() {
                if (this.checked) {
                    billingAddressFields.style.display = 'none';
                    billingInputs.forEach(input => {
                        input.required = false;
                        input.value = '';
                    });
                } else {
                    billingAddressFields.style.display = 'block';
                    // Set required for billing fields when they're shown
                    document.querySelector('input[name="billing_full_name"]').required = true;
                    document.querySelector('input[name="billing_phone"]').required = true;
                    document.querySelector('select[name="billing_location_id"]').required = true;
                    document.querySelector('input[name="billing_address_line1"]').required = true;
                }
            });
        }
        
        // Handle delivery fee calculation
        const deliveryLocationSelect = document.querySelector('select[name="delivery_location_id"]');
        const deliveryFeeElement = document.getElementById('delivery-fee');
        const totalAmountElement = document.getElementById('total-amount');
        const subtotal = {{ $subtotal }};
        const tax = {{ $tax }};
        
        const deliveryLocations = @json($deliveryLocations->keyBy('id'));
        
        function updateDeliveryFeeAndTotal() {
            const selectedLocationId = deliveryLocationSelect ? deliveryLocationSelect.value : null;
            let deliveryFee = 0;
            
            if (selectedLocationId && deliveryLocations[selectedLocationId]) {
                deliveryFee = parseFloat(deliveryLocations[selectedLocationId].price) || 0;
            }
            
            const total = subtotal + tax + deliveryFee;
            
            if (deliveryFeeElement) {
                if (deliveryFee === 0) {
                    deliveryFeeElement.textContent = 'Free';
                    deliveryFeeElement.className = 'text-green-600';
                } else {
                    deliveryFeeElement.textContent = '$' + deliveryFee.toFixed(2);
                    deliveryFeeElement.className = 'text-gray-600';
                }
            }
            
            if (totalAmountElement) {
                totalAmountElement.textContent = '$' + total.toFixed(2);
            }
        }
        
        if (deliveryLocationSelect) {
            deliveryLocationSelect.addEventListener('change', updateDeliveryFeeAndTotal);
            updateDeliveryFeeAndTotal(); // Initial calculation
        }
    });
</script>
@endsection