@extends('layouts.app')

@section('title', 'Checkout - ' . config('app.name'))

@section('content')
<script src="https://jstest.authorize.net/v1/Accept.js"></script>

<div class="bg-gray-50 min-h-screen">

    {{-- Hero --}}
    <div class="relative bg-gradient-to-br from-emerald-700 via-emerald-600 to-emerald-500 overflow-hidden">
        <div class="absolute inset-0 opacity-10">
            <div class="absolute -top-20 -right-20 w-72 h-72 bg-white rounded-full blur-3xl"></div>
            <div class="absolute -bottom-20 -left-20 w-96 h-96 bg-emerald-300 rounded-full blur-3xl"></div>
        </div>
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-12 relative">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 bg-white/15 backdrop-blur-sm rounded-xl flex items-center justify-center shrink-0">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                </div>
                <div>
                    <h1 class="text-xl sm:text-2xl lg:text-3xl font-bold text-white">Checkout</h1>
                    <p class="text-emerald-100 text-sm">Complete your order securely</p>
                </div>
            </div>
        </div>
        <div class="absolute bottom-0 left-0 right-0">
            <svg viewBox="0 0 1440 60" fill="none" class="w-full h-auto">
                <path d="M0 60V30C240 0 480 0 720 30C960 60 1200 60 1440 30V60H0Z" fill="#f9fafb"/>
            </svg>
        </div>
    </div>

    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-10">
        <div class="grid lg:grid-cols-3 gap-6 lg:gap-8 items-start">

            {{-- Form Column --}}
            <div class="lg:col-span-2 space-y-5">
                <form action="{{ route('checkout.process') }}" method="POST" id="checkoutForm">
                    @csrf

                    {{-- Steps indicator --}}
                    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 sm:p-5">
                        <div class="flex items-center justify-center gap-2 sm:gap-4">
                            <div class="flex items-center gap-1.5 sm:gap-2">
                                <span class="w-7 h-7 rounded-full bg-emerald-600 text-white text-xs font-bold flex items-center justify-center">1</span>
                                <span class="text-xs sm:text-sm font-medium text-emerald-700">Contact</span>
                            </div>
                            <svg class="w-4 h-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                            <div class="flex items-center gap-1.5 sm:gap-2">
                                <span class="w-7 h-7 rounded-full bg-gray-200 text-gray-500 text-xs font-bold flex items-center justify-center">2</span>
                                <span class="text-xs sm:text-sm font-medium text-gray-500">Delivery</span>
                            </div>
                            <svg class="w-4 h-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                            <div class="flex items-center gap-1.5 sm:gap-2">
                                <span class="w-7 h-7 rounded-full bg-gray-200 text-gray-500 text-xs font-bold flex items-center justify-center">3</span>
                                <span class="text-xs sm:text-sm font-medium text-gray-500">Payment</span>
                            </div>
                        </div>
                    </div>

                    {{-- Contact Information --}}
                    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 sm:p-6">
                        <h2 class="text-base sm:text-lg font-bold text-gray-900 flex items-center gap-2 mb-5">
                            <svg class="w-5 h-5 text-emerald-600" 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"/></svg>
                            Contact Information
                        </h2>
                        <div class="grid sm:grid-cols-2 gap-4">
                            <div>
                                <label for="firstName" class="block text-sm font-medium text-gray-700 mb-1.5">First Name <span class="text-red-400">*</span></label>
                                <input type="text" id="firstName" name="first_name" value="{{ auth()->user()->first_name }}" required
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none transition-all">
                            </div>
                            <div>
                                <label for="lastName" class="block text-sm font-medium text-gray-700 mb-1.5">Last Name <span class="text-red-400">*</span></label>
                                <input type="text" id="lastName" name="last_name" value="{{ auth()->user()->last_name }}" required
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none transition-all">
                            </div>
                            <div class="sm:col-span-2">
                                <label for="email" class="block text-sm font-medium text-gray-700 mb-1.5">Email Address</label>
                                <input type="email" id="email" name="email" value="{{ auth()->user()->email }}" readonly
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50 text-gray-500 cursor-not-allowed focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none transition-all">
                            </div>
                            <div class="sm:col-span-2">
                                <label for="phone" class="block text-sm font-medium text-gray-700 mb-1.5">Phone Number <span class="text-red-400">*</span></label>
                                <input type="tel" id="phone" name="phone" value="{{ auth()->user()->phone }}" required
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none transition-all"
                                    placeholder="+1 (555) 000-0000">
                            </div>
                        </div>
                    </div>

                    {{-- Delivery Method --}}
                    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 sm:p-6">
                        <h2 class="text-base sm:text-lg font-bold text-gray-900 flex items-center gap-2 mb-5">
                            <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"/></svg>
                            Delivery Method
                        </h2>
                        <div class="grid sm:grid-cols-2 gap-3">
                            <label class="delivery-option relative cursor-pointer">
                                <input type="radio" name="delivery_method" value="pickup" checked class="peer sr-only">
                                <div class="flex items-center gap-4 p-4 border-2 border-gray-100 rounded-xl peer-checked:border-emerald-500 peer-checked:bg-emerald-50/50 transition-all">
                                    <div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center shrink-0">
                                        <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                                    </div>
                                    <div class="flex-1">
                                        <div class="text-sm font-semibold text-gray-900">Store Pickup</div>
                                        <div class="text-xs text-gray-500">Pick up from our store</div>
                                        <div class="text-xs font-semibold text-emerald-600 mt-1">Free</div>
                                    </div>
                                    <svg class="w-5 h-5 text-emerald-500 opacity-0 peer-checked:opacity-100 transition-all shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                                </div>
                            </label>
                            <label class="delivery-option relative cursor-pointer">
                                <input type="radio" name="delivery_method" value="delivery" class="peer sr-only">
                                <div class="flex items-center gap-4 p-4 border-2 border-gray-100 rounded-xl peer-checked:border-emerald-500 peer-checked:bg-emerald-50/50 transition-all">
                                    <div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center shrink-0">
                                        <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10l2-1m6 1h8a1 1 0 001-1v-5.586a1 1 0 00-.293-.707l-2.414-2.414A1 1 0 0016.586 6H15v10m-8 3a2 2 0 100-4 2 2 0 000 4zm12 0a2 2 0 100-4 2 2 0 000 4z"/></svg>
                                    </div>
                                    <div class="flex-1">
                                        <div class="text-sm font-semibold text-gray-900">Home Delivery</div>
                                        <div class="text-xs text-gray-500">Deliver to your address</div>
                                        <div class="text-xs font-semibold text-emerald-600 mt-1">Calculated at next step</div>
                                    </div>
                                    <svg class="w-5 h-5 text-emerald-500 opacity-0 peer-checked:opacity-100 transition-all shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                                </div>
                            </label>
                        </div>
                    </div>

                    {{-- Shipping Address (hidden initially) --}}
                    <div id="shippingAddressSection" class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 sm:p-6 hidden">
                        <h2 class="text-base sm:text-lg font-bold text-gray-900 flex items-center gap-2 mb-5">
                            <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                            Shipping Address
                        </h2>
                        <div class="grid sm:grid-cols-2 gap-4">
                            <div class="sm:col-span-2">
                                <label for="address" class="block text-sm font-medium text-gray-700 mb-1.5">Street Address</label>
                                <input type="text" id="address" name="address"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none transition-all">
                            </div>
                            <div>
                                <label for="city" class="block text-sm font-medium text-gray-700 mb-1.5">City</label>
                                <input type="text" id="city" name="city"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none transition-all">
                            </div>
                            <div>
                                <label for="state" class="block text-sm font-medium text-gray-700 mb-1.5">State</label>
                                <select id="state" name="state"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-xl text-sm bg-white focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none transition-all">
                                    <option value="">Select State</option>
                                    @foreach($states as $code => $name)
                                        <option value="{{ $code }}">{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label for="zipCode" class="block text-sm font-medium text-gray-700 mb-1.5">ZIP Code</label>
                                <input type="text" id="zipCode" name="zip_code" maxlength="10"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none transition-all">
                            </div>
                            <div>
                                <label for="shipping_country" class="block text-sm font-medium text-gray-700 mb-1.5">Country</label>
                                <select id="shipping_country" name="country"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-xl text-sm bg-white focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none transition-all">
                                    <option value="US">United States</option>
                                </select>
                            </div>
                            <div class="sm:col-span-2">
                                <div id="shipping-rates" class="mt-2"></div>
                            </div>
                        </div>
                    </div>

                    {{-- Payment Method --}}
                    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 sm:p-6">
                        <h2 class="text-base sm:text-lg font-bold text-gray-900 flex items-center gap-2 mb-5">
                            <svg class="w-5 h-5 text-emerald-600" 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"/></svg>
                            Payment Method
                        </h2>
                        <div class="grid sm:grid-cols-2 gap-3">
                            <label class="payment-option relative cursor-pointer">
                                <input type="radio" name="payment_method" value="card" class="peer sr-only">
                                <div class="flex items-center gap-4 p-4 border-2 border-gray-100 rounded-xl peer-checked:border-emerald-500 peer-checked:bg-emerald-50/50 transition-all">
                                    <div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center shrink-0">
                                        <svg class="w-5 h-5 text-emerald-600" 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"/></svg>
                                    </div>
                                    <div class="flex-1">
                                        <div class="text-sm font-semibold text-gray-900">Pay Now with Card</div>
                                        <div class="text-xs text-gray-500">Secure credit card payment</div>
                                        <div class="flex gap-2 mt-1.5">
                                            <span class="text-[10px] font-bold px-1.5 py-0.5 bg-gray-100 rounded text-gray-500">VISA</span>
                                            <span class="text-[10px] font-bold px-1.5 py-0.5 bg-gray-100 rounded text-gray-500">MC</span>
                                            <span class="text-[10px] font-bold px-1.5 py-0.5 bg-gray-100 rounded text-gray-500">AMEX</span>
                                        </div>
                                    </div>
                                    <svg class="w-5 h-5 text-emerald-500 opacity-0 peer-checked:opacity-100 transition-all shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                                </div>
                            </label>
                            <label class="payment-option relative cursor-pointer">
                                <input type="radio" name="payment_method" value="cash_on_delivery" checked class="peer sr-only">
                                <div class="flex items-center gap-4 p-4 border-2 border-gray-100 rounded-xl peer-checked:border-emerald-500 peer-checked:bg-emerald-50/50 transition-all">
                                    <div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center shrink-0">
                                        <svg class="w-5 h-5 text-emerald-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 class="flex-1">
                                        <div class="text-sm font-semibold text-gray-900">Pay Later</div>
                                        <div class="text-xs text-gray-500">Cash on Delivery / Pickup</div>
                                        <span class="inline-block mt-1 text-[10px] font-semibold text-amber-700 bg-amber-50 px-2 py-0.5 rounded">Pay when you receive</span>
                                    </div>
                                    <svg class="w-5 h-5 text-emerald-500 opacity-0 peer-checked:opacity-100 transition-all shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                                </div>
                            </label>
                        </div>
                    </div>

                    {{-- Card Payment Section --}}
                    <div id="cardPaymentSection" class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 sm:p-6 hidden">
                        <h2 class="text-base sm:text-lg font-bold text-gray-900 flex items-center gap-2 mb-5">
                            <svg class="w-5 h-5 text-emerald-600" 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"/></svg>
                            Card Details
                        </h2>
                        <div class="grid grid-cols-4 gap-2 mb-4">
                            <label class="relative cursor-pointer">
                                <input type="radio" name="cardType" value="visa" class="peer sr-only">
                                <div class="p-3 border-2 border-gray-100 rounded-xl text-center peer-checked:border-emerald-500 peer-checked:bg-emerald-50/50 transition-all">
                                    <span class="text-xs font-bold text-gray-500">VISA</span>
                                </div>
                            </label>
                            <label class="relative cursor-pointer">
                                <input type="radio" name="cardType" value="mastercard" class="peer sr-only">
                                <div class="p-3 border-2 border-gray-100 rounded-xl text-center peer-checked:border-emerald-500 peer-checked:bg-emerald-50/50 transition-all">
                                    <span class="text-xs font-bold text-gray-500">MC</span>
                                </div>
                            </label>
                            <label class="relative cursor-pointer">
                                <input type="radio" name="cardType" value="amex" class="peer sr-only">
                                <div class="p-3 border-2 border-gray-100 rounded-xl text-center peer-checked:border-emerald-500 peer-checked:bg-emerald-50/50 transition-all">
                                    <span class="text-xs font-bold text-gray-500">AMEX</span>
                                </div>
                            </label>
                            <label class="relative cursor-pointer">
                                <input type="radio" name="cardType" value="discover" class="peer sr-only">
                                <div class="p-3 border-2 border-gray-100 rounded-xl text-center peer-checked:border-emerald-500 peer-checked:bg-emerald-50/50 transition-all">
                                    <span class="text-xs font-bold text-gray-500">DISC</span>
                                </div>
                            </label>
                        </div>
                        <div class="grid sm:grid-cols-2 gap-4">
                            <div class="sm:col-span-2">
                                <label for="cardNumber" class="block text-sm font-medium text-gray-700 mb-1.5">Card Number</label>
                                <input type="text" id="cardNumber" name="cardNumber" maxlength="19" placeholder="1234 5678 9012 3456"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none transition-all">
                            </div>
                            <div>
                                <label for="cardExpiry" class="block text-sm font-medium text-gray-700 mb-1.5">Expiry (MM/YY)</label>
                                <input type="text" id="cardExpiry" name="cardExpiry" maxlength="5" placeholder="MM/YY"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none transition-all">
                            </div>
                            <div>
                                <label for="cardCvv" class="block text-sm font-medium text-gray-700 mb-1.5">CVV</label>
                                <input type="text" id="cardCvv" name="cardCvv" maxlength="4" placeholder="123"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none transition-all">
                            </div>
                        </div>
                        <div id="card-errors" class="mt-3 px-4 py-3 rounded-xl bg-red-50 border border-red-200 text-red-700 text-sm hidden"></div>
                    </div>

                    {{-- Billing Address --}}
                    <div id="billingAddressSection" class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 sm:p-6">
                        <h2 class="text-base sm:text-lg font-bold text-gray-900 flex items-center gap-2 mb-5">
                            <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                            Billing Address
                        </h2>
                        <label class="flex items-center gap-2.5 mb-4 cursor-pointer">
                            <input type="checkbox" id="sameAsShipping" name="same_as_shipping" checked
                                class="w-4 h-4 rounded border-gray-300 text-emerald-600 focus:ring-emerald-500">
                            <span class="text-sm text-gray-700">Same as shipping address</span>
                        </label>
                        <div id="differentBillingAddress" class="hidden">
                            <div class="grid sm:grid-cols-2 gap-4">
                                <div class="sm:col-span-2">
                                    <label for="billing_address" class="block text-sm font-medium text-gray-700 mb-1.5">Street Address</label>
                                    <input type="text" id="billing_address" name="billing_address"
                                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none transition-all">
                                </div>
                                <div>
                                    <label for="billing_city" class="block text-sm font-medium text-gray-700 mb-1.5">City</label>
                                    <input type="text" id="billing_city" name="billing_city"
                                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none transition-all">
                                </div>
                                <div>
                                    <label for="billing_state" class="block text-sm font-medium text-gray-700 mb-1.5">State</label>
                                    <select id="billing_state" name="billing_state"
                                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-xl text-sm bg-white focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none transition-all">
                                        <option value="">Select State</option>
                                        @foreach($states as $code => $name)
                                            <option value="{{ $code }}">{{ $name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div>
                                    <label for="billing_zip_code" class="block text-sm font-medium text-gray-700 mb-1.5">ZIP Code</label>
                                    <input type="text" id="billing_zip_code" name="billing_zip_code" maxlength="10"
                                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none transition-all">
                                </div>
                                <div>
                                    <label for="billing_country" class="block text-sm font-medium text-gray-700 mb-1.5">Country</label>
                                    <select id="billing_country" name="billing_country"
                                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-xl text-sm bg-white focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none transition-all">
                                        <option value="US">United States</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Additional Information --}}
                    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 sm:p-6">
                        <h2 class="text-base sm:text-lg font-bold text-gray-900 flex items-center gap-2 mb-5">
                            <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
                            Additional Information
                        </h2>
                        <label for="notes" class="block text-sm font-medium text-gray-700 mb-1.5">Order Notes (Optional)</label>
                        <textarea id="notes" name="notes" rows="3"
                            class="w-full px-3.5 py-2.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none transition-all"
                            placeholder="Special instructions, delivery preferences, etc."></textarea>
                    </div>

                    {{-- Hidden fields --}}
                    <input type="hidden" id="selected-shipping-rate" name="shipping_method" value="">
                    <input type="hidden" id="selected-shipping-cost" name="shipping_cost" value="">

                    {{-- Submit --}}
                    <button type="submit" id="submit-button"
                        class="w-full flex items-center justify-center gap-2 px-6 py-3.5 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold rounded-xl transition-all shadow-sm hover:shadow-md active:scale-[0.98]">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                        Place Order Securely
                    </button>
                </form>
            </div>

            {{-- Order Summary --}}
            <div class="lg:col-span-1">
                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 sm:p-6 lg:sticky lg:top-24">
                    <div class="flex items-center justify-between mb-4">
                        <h2 class="text-base font-bold text-gray-900">Order Summary</h2>
                        <span class="text-xs text-gray-400 bg-gray-50 px-2 py-1 rounded-lg">{{ count($cartItems) }} items</span>
                    </div>

                    <div class="space-y-3 mb-4 max-h-60 overflow-y-auto">
                        @foreach($cartItems as $item)
                            <div class="flex items-center gap-3">
                                <div class="w-12 h-12 rounded-lg bg-gray-50 overflow-hidden shrink-0">
                                    <img src="{{ asset('storage/' . $item['image']) }}" alt="{{ $item['name'] }}" class="w-full h-full object-cover" loading="lazy">
                                </div>
                                <div class="flex-1 min-w-0">
                                    <div class="text-sm font-medium text-gray-900 truncate">{{ $item['name'] }}</div>
                                    <div class="text-xs text-gray-400">Qty: {{ $item['quantity'] }}</div>
                                </div>
                                <div class="text-sm font-semibold text-gray-900 shrink-0">${{ number_format($item['price'] * $item['quantity'], 2) }}</div>
                            </div>
                        @endforeach
                    </div>

                    <div class="border-t border-gray-100 pt-4 space-y-2.5">
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-gray-600">Subtotal</span>
                            <span class="font-medium text-gray-900">${{ number_format($subtotal, 2) }}</span>
                        </div>
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-gray-600">Shipping</span>
                            <span id="shipping-cost" class="font-medium text-gray-900">$0.00</span>
                        </div>
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-gray-600">Tax</span>
                            <span id="tax-amount" class="font-medium text-gray-900">${{ number_format($tax, 2) }}</span>
                        </div>
                    </div>

                    <div class="border-t-2 border-dashed border-gray-100 mt-4 pt-4 flex items-center justify-between">
                        <span class="text-base font-bold text-gray-900">Total</span>
                        <span class="total-amount text-lg font-bold text-emerald-600">${{ number_format($total, 2) }}</span>
                    </div>

                    <p class="text-xs text-gray-400 mt-3 flex items-center gap-1.5">
                        <svg class="w-3.5 h-3.5 text-emerald-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                        Your information is secure and encrypted
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
(function() {
    const csrfToken = '{{ csrf_token() }}';
    var shippingSection = document.getElementById('shippingAddressSection');
    var cardSection = document.getElementById('cardPaymentSection');
    var differentBilling = document.getElementById('differentBillingAddress');
    var shippingCostEl = document.getElementById('shipping-cost');
    var taxAmountEl = document.getElementById('tax-amount');
    var totalAmountEl = document.querySelector('.total-amount');
    var subtotal = {{ $subtotal }};

    function updateTotal() {
        var shipping = parseFloat(shippingCostEl.textContent.replace(/[^0-9.-]+/g, '')) || 0;
        var tax = parseFloat(taxAmountEl.textContent.replace(/[^0-9.-]+/g, '')) || 0;
        totalAmountEl.textContent = '$' + (subtotal + shipping + tax).toFixed(2);
    }

    function updateTax(state) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '{{ route("checkout.update-tax") }}');
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);
        xhr.onload = function() {
            if (xhr.status === 200) {
                var data = JSON.parse(xhr.responseText);
                taxAmountEl.textContent = '$' + data.tax;
                totalAmountEl.textContent = '$' + data.total;
            }
        };
        xhr.send(JSON.stringify({ state: state, subtotal: subtotal }));
    }

    document.querySelectorAll('input[name="delivery_method"]').forEach(function(r) {
        r.addEventListener('change', function() {
            if (this.value === 'delivery') {
                shippingSection.classList.remove('hidden');
                document.querySelectorAll('#shippingAddressSection input, #shippingAddressSection select').forEach(function(f) {
                    if (f.id !== 'shipping_country') f.setAttribute('required', 'required');
                });
                document.getElementById('sameAsShipping').parentElement.classList.remove('hidden');
                differentBilling.classList.toggle('hidden', document.getElementById('sameAsShipping').checked);
            } else {
                shippingSection.classList.add('hidden');
                document.querySelectorAll('#shippingAddressSection input, #shippingAddressSection select').forEach(function(f) {
                    f.removeAttribute('required');
                });
                document.getElementById('sameAsShipping').parentElement.classList.add('hidden');
                differentBilling.classList.remove('hidden');
                document.querySelectorAll('#differentBillingAddress input, #differentBillingAddress select').forEach(function(f) {
                    if (!f.classList.contains('optional')) f.setAttribute('required', 'required');
                });
                shippingCostEl.textContent = '$0.00';
                document.getElementById('selected-shipping-rate').value = 'pickup';
                document.getElementById('selected-shipping-cost').value = '0.00';
                updateTotal();
            }
        });
    });

    document.getElementById('sameAsShipping').addEventListener('change', function() {
        differentBilling.classList.toggle('hidden', this.checked);
        document.querySelectorAll('#differentBillingAddress input, #differentBillingAddress select').forEach(function(f) {
            if (this.checked) f.removeAttribute('required'); else f.setAttribute('required', 'required');
        }.bind(this));
    });

    document.querySelectorAll('input[name="payment_method"]').forEach(function(r) {
        r.addEventListener('change', function() {
            cardSection.classList.toggle('hidden', this.value !== 'card');
        });
    });

    document.getElementById('state').addEventListener('change', function() {
        if (this.value) updateTax(this.value);
    });
    document.getElementById('billing_state').addEventListener('change', function() {
        if (this.value) updateTax(this.value);
    });

    document.getElementById('cardNumber').addEventListener('input', function() {
        var v = this.value.replace(/\D/g, '');
        var f = '';
        for (var i = 0; i < v.length; i++) {
            if (i > 0 && i % 4 === 0) f += ' ';
            f += v[i];
        }
        this.value = f.trim();
    });

    document.getElementById('cardExpiry').addEventListener('input', function() {
        var v = this.value.replace(/\D/g, '');
        if (v.length >= 2) {
            var m = parseInt(v.substr(0, 2));
            if (m > 12) v = '12' + v.substr(2);
            if (v.length > 2) v = v.substr(0, 2) + '/' + v.substr(2, 2);
        }
        this.value = v;
    });

    document.getElementById('cardCvv').addEventListener('input', function() {
        this.value = this.value.replace(/\D/g, '').substr(0, 4);
    });

    var initialDelivery = document.querySelector('input[name="delivery_method"]:checked');
    if (initialDelivery) initialDelivery.dispatchEvent(new Event('change'));

    var initialPayment = document.querySelector('input[name="payment_method"]:checked');
    if (initialPayment) initialPayment.dispatchEvent(new Event('change'));
})();
</script>
@endsection