{{-- Single popup checkout used everywhere on the site (home, product page,
     landing pages). No separate checkout route/page — this is it. --}}
@php
    $checkoutFields = \App\Models\CheckoutField::where('is_active', true)->orderBy('sort_order')->get();
    $deliveryAreas = \App\Models\DeliveryArea::where('is_active', true)->orderBy('name')->get();
@endphp
<div x-show="checkoutOpen" x-cloak
     x-data="checkoutForm()"
     class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50"
     @keydown.escape.window="checkoutOpen = false">
    <div @click.outside="checkoutOpen = false" class="bg-white rounded-2xl shadow-xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
        <div class="flex items-center justify-between p-4 border-b">
            <h2 class="font-bold text-lg">Your Order</h2>
            <button @click="checkoutOpen = false" class="text-gray-400 hover:text-gray-700 text-xl leading-none">&times;</button>
        </div>

        <template x-if="cart.length === 0">
            <p class="p-6 text-center text-gray-500">Your cart is empty.</p>
        </template>

        <div class="p-4 space-y-3" x-show="cart.length">
            <template x-for="(item, idx) in cart" :key="idx">
                <div class="flex items-center gap-3 border-b pb-3">
                    <img :src="item.image" class="w-14 h-14 rounded object-cover bg-gray-100">
                    <div class="flex-1">
                        <div class="font-medium text-sm" x-text="item.title"></div>
                        <div class="text-xs text-gray-500" x-text="item.variant_label || ''"></div>
                        <div class="text-brand font-semibold text-sm" x-text="'৳' + item.price"></div>
                    </div>
                    <div class="flex items-center gap-2">
                        <button class="w-6 h-6 border rounded" @click="updateQty(idx, item.quantity - 1)">-</button>
                        <span x-text="item.quantity"></span>
                        <button class="w-6 h-6 border rounded" @click="updateQty(idx, item.quantity + 1)">+</button>
                    </div>
                    <button class="text-red-500 text-sm" @click="removeItem(idx)">&times;</button>
                </div>
            </template>

            <form @submit.prevent="submitOrder" class="space-y-3 pt-2">
                @csrf
                <input type="text" x-model="form.customer_name" @input="saveIncomplete" placeholder="Full name" required class="w-full border rounded-lg px-3 py-2 text-sm">
                <input type="tel" x-model="form.customer_phone" @input="saveIncomplete" placeholder="Phone (11 digits)" required pattern="[0-9]{11}" class="w-full border rounded-lg px-3 py-2 text-sm">
                <textarea x-model="form.address" @input="saveIncomplete" placeholder="Full delivery address" required class="w-full border rounded-lg px-3 py-2 text-sm" rows="2"></textarea>

                @foreach($checkoutFields as $field)
                    <div>
                        @if($field->type === 'textarea')
                            <textarea x-model="form.extra.{{ $field->field_key }}" placeholder="{{ $field->label }}" {{ $field->is_required ? 'required' : '' }} class="w-full border rounded-lg px-3 py-2 text-sm"></textarea>
                        @elseif($field->type === 'select')
                            <select x-model="form.extra.{{ $field->field_key }}" {{ $field->is_required ? 'required' : '' }} class="w-full border rounded-lg px-3 py-2 text-sm">
                                <option value="">{{ $field->label }}</option>
                                @foreach(($field->options ?? []) as $opt)
                                    <option value="{{ $opt }}">{{ $opt }}</option>
                                @endforeach
                            </select>
                        @elseif($field->type === 'checkbox')
                            <label class="flex items-center gap-2 text-sm"><input type="checkbox" x-model="form.extra.{{ $field->field_key }}"> {{ $field->label }}</label>
                        @else
                            <input type="{{ $field->type }}" x-model="form.extra.{{ $field->field_key }}" placeholder="{{ $field->label }}" {{ $field->is_required ? 'required' : '' }} class="w-full border rounded-lg px-3 py-2 text-sm">
                        @endif
                    </div>
                @endforeach

                @if($deliveryAreas->count())
                <select x-model="form.delivery_area_id" @change="recalcDelivery" class="w-full border rounded-lg px-3 py-2 text-sm">
                    <option value="">Select delivery area</option>
                    @foreach($deliveryAreas as $area)
                        <option value="{{ $area->id }}" data-charge="{{ $area->charge }}">{{ $area->name }} (৳{{ $area->charge }})</option>
                    @endforeach
                </select>
                @endif

                <div class="flex gap-2">
                    <input type="text" x-model="couponCode" placeholder="Coupon code" class="flex-1 border rounded-lg px-3 py-2 text-sm">
                    <button type="button" @click="applyCoupon" class="border border-brand text-brand rounded-lg px-3 text-sm">Apply</button>
                </div>
                <p x-text="couponMessage" class="text-xs" :class="couponValid ? 'text-green-600' : 'text-red-500'"></p>

                @if(!empty($siteSettings['checkout_tick_text'] ?? null))
                <label class="flex items-start gap-2 text-sm" style="color: {{ $siteSettings['checkout_tick_color'] ?? '#111' }}; font-size: {{ $siteSettings['checkout_tick_size'] ?? '13' }}px;">
                    <input type="checkbox" x-model="form.tick_accepted" {{ ($siteSettings['checkout_tick_required'] ?? '0') === '1' ? 'required' : '' }} class="mt-1">
                    {{ $siteSettings['checkout_tick_text'] }}
                </label>
                @endif

                <div class="flex justify-between text-sm pt-2 border-t">
                    <span>Subtotal</span><span x-text="'৳' + subtotal()"></span>
                </div>
                <div class="flex justify-between text-sm">
                    <span>Delivery</span><span x-text="'৳' + deliveryCharge"></span>
                </div>
                <div class="flex justify-between font-bold text-base">
                    <span>Total</span><span x-text="'৳' + total()"></span>
                </div>

                <button type="submit" :disabled="submitting" class="w-full bg-brand text-white py-3 rounded-xl font-semibold disabled:opacity-50">
                    <span x-show="!submitting">Place Order</span>
                    <span x-show="submitting">Placing order...</span>
                </button>
            </form>
        </div>
    </div>
</div>