@php
    // Get table context from session (for QR code orders)
    $tableContext = Session::get('table_context');
@endphp

<x-layouts.customer title="Checkout">
    <!-- Hero Section -->
    <section class="relative bg-gradient-to-r from-green-600 to-teal-600 dark:from-green-800 dark:to-teal-800 text-white py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h1 class="text-4xl md:text-5xl font-extrabold mb-4">
                Checkout
            </h1>
            <p class="text-xl text-white/90">
                Complete your order and enjoy our delicious food
            </p>
            @if($tableContext)
                <div class="mt-4 inline-flex items-center gap-2 px-4 py-2 bg-white/20 backdrop-blur-sm rounded-lg">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21h18M3 7v1a3 3 0 003 3h12a3 3 0 003-3V7m-18 0l2-4h14l2 4M3 7h18"></path>
                    </svg>
                    <span class="font-semibold">
                        Ordering for Table {{ $tableContext['number'] }}
                        @if(isset($tableContext['area_name']))
                            • {{ $tableContext['area_name'] }}
                        @endif
                    </span>
                </div>
            @endif
        </div>
    </section>

    <!-- Checkout Form -->
    <section class="py-12 bg-slate-50 dark:bg-slate-900 min-h-screen">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <form method="POST" action="{{ route('shop.checkout.submit', ['restaurant' => request()->route('restaurant')]) }}"
                  class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                @csrf

                @if($tableContext)
                    <!-- Hidden table_id for dine-in orders from QR code -->
                    <input type="hidden" name="table_id" value="{{ $tableContext['id'] }}">
                @endif

                <!-- Checkout Details -->
                <div class="lg:col-span-2 space-y-6">
                    <!-- Customer Information -->
                    <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-lg p-6">
                        <h2 class="text-2xl font-bold text-slate-900 dark:text-white mb-6 flex items-center gap-3">
                            <svg class="w-7 h-7 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                            </svg>
                            Customer Information
                        </h2>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">
                                    Full Name <span class="text-red-500">*</span>
                                </label>
                                <input type="text"
                                       name="customer_name"
                                       required
                                       value="{{ old('customer_name') }}"
                                       class="w-full px-4 py-3 rounded-xl border-2 border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-900 dark:text-white focus:border-orange-500 focus:ring-4 focus:ring-orange-500/20 transition-all"
                                       placeholder="John Doe">
                                @error('customer_name')
                                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">
                                    Phone Number <span class="text-red-500">*</span>
                                </label>
                                <input type="tel"
                                       name="customer_phone"
                                       required
                                       value="{{ old('customer_phone') }}"
                                       class="w-full px-4 py-3 rounded-xl border-2 border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-900 dark:text-white focus:border-orange-500 focus:ring-4 focus:ring-orange-500/20 transition-all"
                                       placeholder="+234 XXX XXX XXXX">
                                @error('customer_phone')
                                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                                @enderror
                            </div>

                            <div class="md:col-span-2">
                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">
                                    Email Address (Optional)
                                </label>
                                <input type="email"
                                       name="customer_email"
                                       value="{{ old('customer_email') }}"
                                       class="w-full px-4 py-3 rounded-xl border-2 border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-900 dark:text-white focus:border-orange-500 focus:ring-4 focus:ring-orange-500/20 transition-all"
                                       placeholder="john@example.com">
                                @error('customer_email')
                                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Order Type -->
                    <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-lg p-6" x-data="{ orderType: '{{ old('order_type', $tableContext ? 'dine_in' : 'dine_in') }}' }">
                        <h2 class="text-2xl font-bold text-slate-900 dark:text-white mb-6 flex items-center gap-3">
                            <svg class="w-7 h-7 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
                            </svg>
                            Order Type
                        </h2>

                        @if($tableContext)
                            <!-- Table order - dine-in only -->
                            <div class="p-4 bg-orange-50 dark:bg-orange-900/20 rounded-xl border-2 border-orange-500 mb-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-12 h-12 rounded-lg bg-orange-100 dark:bg-orange-900/40 flex items-center justify-center">
                                        <svg class="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21h18M3 7v1a3 3 0 003 3h12a3 3 0 003-3V7m-18 0l2-4h14l2 4M3 7h18"></path>
                                        </svg>
                                    </div>
                                    <div class="flex-1">
                                        <p class="font-bold text-slate-900 dark:text-white">Dine In</p>
                                        <p class="text-sm text-slate-600 dark:text-slate-400">Table {{ $tableContext['number'] }} • {{ $tableContext['area_name'] ?? 'Main Area' }}</p>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" name="order_type" value="dine_in">
                            <input type="hidden" name="table_number" value="Table {{ $tableContext['number'] }}">
                        @else
                            <!-- Online order - show all options -->
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <!-- Dine In -->
                                <label class="relative cursor-pointer">
                                    <input type="radio"
                                           name="order_type"
                                           value="dine_in"
                                           x-model="orderType"
                                           class="peer sr-only"
                                           checked>
                                    <div class="p-6 rounded-xl border-2 border-slate-200 dark:border-slate-700 peer-checked:border-orange-500 peer-checked:bg-orange-50 dark:peer-checked:bg-orange-900/20 transition-all text-center">
                                        <svg class="w-12 h-12 mx-auto mb-3 text-slate-400 peer-checked:text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                                        </svg>
                                        <span class="font-bold text-slate-900 dark:text-white">Dine In</span>
                                    </div>
                                </label>

                                <!-- Takeout -->
                                <label class="relative cursor-pointer">
                                    <input type="radio"
                                           name="order_type"
                                           value="takeout"
                                           x-model="orderType"
                                           class="peer sr-only">
                                    <div class="p-6 rounded-xl border-2 border-slate-200 dark:border-slate-700 peer-checked:border-orange-500 peer-checked:bg-orange-50 dark:peer-checked:bg-orange-900/20 transition-all text-center">
                                        <svg class="w-12 h-12 mx-auto mb-3 text-slate-400 peer-checked:text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
                                        </svg>
                                        <span class="font-bold text-slate-900 dark:text-white">Takeout</span>
                                    </div>
                                </label>

                                <!-- Delivery -->
                                <label class="relative cursor-pointer">
                                    <input type="radio"
                                           name="order_type"
                                           value="delivery"
                                           x-model="orderType"
                                           class="peer sr-only">
                                    <div class="p-6 rounded-xl border-2 border-slate-200 dark:border-slate-700 peer-checked:border-orange-500 peer-checked:bg-orange-50 dark:peer-checked:bg-orange-900/20 transition-all text-center">
                                        <svg class="w-12 h-12 mx-auto mb-3 text-slate-400 peer-checked:text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"></path>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"></path>
                                        </svg>
                                        <span class="font-bold text-slate-900 dark:text-white">Delivery</span>
                                    </div>
                                </label>
                            </div>

                            <!-- Table Number (for dine-in) -->
                            <div x-show="orderType === 'dine_in'" class="mt-4">
                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">
                                    Table Number (Optional)
                                </label>
                                <input type="text"
                                       name="table_number"
                                       value="{{ old('table_number') }}"
                                       class="w-full px-4 py-3 rounded-xl border-2 border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-900 dark:text-white focus:border-orange-500 focus:ring-4 focus:ring-orange-500/20 transition-all"
                                       placeholder="e.g., Table 5">
                            </div>
                        @endif

                        <!-- Delivery Address -->
                        <div x-show="orderType === 'delivery'" class="mt-4">
                            <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">
                                Delivery Address <span class="text-red-500">*</span>
                            </label>
                            <textarea name="delivery_address"
                                      rows="3"
                                      class="w-full px-4 py-3 rounded-xl border-2 border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-900 dark:text-white focus:border-orange-500 focus:ring-4 focus:ring-orange-500/20 transition-all"
                                      placeholder="Enter your complete delivery address">{{ old('delivery_address') }}</textarea>
                            @error('delivery_address')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Payment Method -->
                    <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-lg p-6"
                         x-data="paymentMethods()"
                         x-init="loadGateways()">
                        <h2 class="text-2xl font-bold text-slate-900 dark:text-white mb-6 flex items-center gap-3">
                            <svg class="w-7 h-7 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
                            </svg>
                            Payment Method
                        </h2>

                        <!-- Loading State -->
                        <div x-show="loading" class="flex justify-center py-8">
                            <svg class="animate-spin h-8 w-8 text-orange-600" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                        </div>

                        <div x-show="!loading" class="space-y-6">
                            <!-- Online Payment Gateways -->
                            <template x-if="onlineGateways.length > 0">
                                <div>
                                    <h3 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-3">Pay Online</h3>
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <template x-for="gateway in onlineGateways" :key="gateway.name">
                                            <label class="relative cursor-pointer">
                                                <input type="radio"
                                                       name="payment_method"
                                                       :value="gateway.name"
                                                       x-model="paymentMethod"
                                                       class="peer sr-only">
                                                <div class="p-5 rounded-xl border-2 border-slate-200 dark:border-slate-700 peer-checked:border-green-500 peer-checked:bg-green-50 dark:peer-checked:bg-green-900/20 transition-all">
                                                    <div class="flex items-center gap-4">
                                                        <div class="w-12 h-12 rounded-lg bg-slate-100 dark:bg-slate-700 flex items-center justify-center">
                                                            <i :class="gateway.icon + ' text-2xl text-slate-600 dark:text-slate-300'"></i>
                                                        </div>
                                                        <div>
                                                            <p class="font-bold text-slate-900 dark:text-white" x-text="gateway.display_name"></p>
                                                            <p class="text-sm text-slate-600 dark:text-slate-400" x-text="gateway.description"></p>
                                                            <span x-show="gateway.is_test_mode" class="inline-block mt-1 px-2 py-0.5 text-xs bg-yellow-100 text-yellow-800 rounded-full">Test Mode</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </label>
                                        </template>
                                    </div>
                                </div>
                            </template>

                            <!-- Manual Payment Methods -->
                            <div>
                                <h3 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-3" x-show="onlineGateways.length > 0">Pay Later</h3>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <!-- Cash -->
                                    <label class="relative cursor-pointer">
                                        <input type="radio"
                                               name="payment_method"
                                               value="cash"
                                               x-model="paymentMethod"
                                               class="peer sr-only"
                                               checked>
                                        <div class="p-5 rounded-xl border-2 border-slate-200 dark:border-slate-700 peer-checked:border-green-500 peer-checked:bg-green-50 dark:peer-checked:bg-green-900/20 transition-all">
                                            <div class="flex items-center gap-4">
                                                <div class="w-12 h-12 rounded-lg bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
                                                    <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"></path>
                                                    </svg>
                                                </div>
                                                <div>
                                                    <p class="font-bold text-slate-900 dark:text-white">Cash</p>
                                                    <p class="text-sm text-slate-600 dark:text-slate-400">Pay with cash on delivery</p>
                                                </div>
                                            </div>
                                        </div>
                                    </label>

                                    <!-- Bank Transfer -->
                                    <label class="relative cursor-pointer">
                                        <input type="radio"
                                               name="payment_method"
                                               value="bank_transfer"
                                               x-model="paymentMethod"
                                               class="peer sr-only">
                                        <div class="p-5 rounded-xl border-2 border-slate-200 dark:border-slate-700 peer-checked:border-green-500 peer-checked:bg-green-50 dark:peer-checked:bg-green-900/20 transition-all">
                                            <div class="flex items-center gap-4">
                                                <div class="w-12 h-12 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
                                                    <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
                                                    </svg>
                                                </div>
                                                <div>
                                                    <p class="font-bold text-slate-900 dark:text-white">Bank Transfer</p>
                                                    <p class="text-sm text-slate-600 dark:text-slate-400">Direct bank transfer</p>
                                                </div>
                                            </div>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <script>
                        function paymentMethods() {
                            return {
                                loading: true,
                                paymentMethod: '{{ old('payment_method', 'cash') }}',
                                onlineGateways: [],

                                async loadGateways() {
                                    try {
                                        const response = await fetch('{{ route('shop.payment.gateways', ['restaurant' => request()->route('restaurant')]) }}');
                                        const data = await response.json();
                                        if (data.success) {
                                            this.onlineGateways = data.online_gateways || [];
                                        }
                                    } catch (error) {
                                        console.error('Failed to load payment gateways:', error);
                                    } finally {
                                        this.loading = false;
                                    }
                                }
                            }
                        }
                    </script>

                    <!-- Special Instructions -->
                    <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-lg p-6">
                        <h2 class="text-2xl font-bold text-slate-900 dark:text-white mb-6 flex items-center gap-3">
                            <svg class="w-7 h-7 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
                            </svg>
                            Special Instructions (Optional)
                        </h2>

                        <textarea name="special_instructions"
                                  rows="4"
                                  class="w-full px-4 py-3 rounded-xl border-2 border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-900 dark:text-white focus:border-orange-500 focus:ring-4 focus:ring-orange-500/20 transition-all"
                                  placeholder="Any special requests or dietary requirements?">{{ old('special_instructions') }}</textarea>
                    </div>
                </div>

                <!-- Order Summary (Sticky) -->
                <div class="lg:col-span-1">
                    <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-lg p-6 sticky top-24">
                        <h2 class="text-2xl font-bold text-slate-900 dark:text-white mb-6">Order Summary</h2>

                        <!-- Items -->
                        <div class="space-y-3 mb-6 max-h-64 overflow-y-auto">
                            @foreach($cartItems as $cartItem)
                            <div class="flex justify-between text-sm">
                                <div class="flex-1">
                                    <p class="font-semibold text-slate-900 dark:text-white">{{ $cartItem['menu_item']->name }}</p>
                                    <p class="text-slate-500 dark:text-slate-400">Qty: {{ $cartItem['quantity'] }}</p>
                                </div>
                                <span class="font-semibold text-slate-900 dark:text-white">₦{{ number_format($cartItem['item_total'], 2) }}</span>
                            </div>
                            @endforeach
                        </div>

                        <!-- Totals -->
                        <div class="space-y-3 border-t border-slate-200 dark:border-slate-700 pt-4">
                            <div class="flex justify-between text-slate-700 dark:text-slate-300">
                                <span>Subtotal</span>
                                <span class="font-semibold">₦{{ number_format($subtotal, 2) }}</span>
                            </div>

                            <div class="flex justify-between text-slate-700 dark:text-slate-300">
                                <span>Tax</span>
                                <span class="font-semibold">₦{{ number_format($taxAmount, 2) }}</span>
                            </div>

                            <div class="border-t border-slate-200 dark:border-slate-700 pt-3">
                                <div class="flex justify-between text-lg font-bold text-slate-900 dark:text-white">
                                    <span>Total</span>
                                    <span class="text-2xl text-orange-600 dark:text-orange-400">₦{{ number_format($total, 2) }}</span>
                                </div>
                            </div>
                        </div>

                        <!-- Submit Button -->
                        <button type="submit"
                                class="w-full mt-6 px-6 py-4 bg-gradient-to-r from-green-500 to-teal-600 hover:from-green-600 hover:to-teal-700 text-white font-bold rounded-xl transition-all transform hover:scale-105 shadow-lg">
                            Place Order
                        </button>

                        <!-- Back to Cart -->
                        <a href="{{ route('shop.cart', ['restaurant' => request()->route('restaurant')]) }}"
                           class="block w-full mt-3 px-6 py-3 bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 text-slate-900 dark:text-white font-semibold rounded-xl text-center transition-colors">
                            Back to Cart
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </section>
</x-layouts.customer>