@extends('layouts.app')
@section('title', 'Checkout')
@section('content')
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <h1 class="text-2xl font-bold text-gray-900 mb-6">Checkout</h1>

    @if($errors->any())
        <div class="mb-4 px-4 py-3 bg-red-50 border border-red-200 text-red-800 rounded-xl text-sm">
            <ul class="list-disc list-inside space-y-1">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
        </div>
    @endif

    <form method="POST" action="{{ route('checkout.store') }}"
          x-data="checkoutForm()"
          @store-cost-updated.window="updateStoreCost($event.detail.storeId, $event.detail.cost)"
          @submit.prevent="submitForm">
        @csrf
        @if(request('product_id'))
            <input type="hidden" name="product_id" value="{{ request('product_id') }}">
            <input type="hidden" name="variant_id" value="{{ request('variant_id') }}">
            <input type="hidden" name="quantity" value="{{ request('quantity', 1) }}">
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div class="lg:col-span-2 space-y-5">

                {{-- Alamat Pengiriman --}}
                <div class="bg-white rounded-2xl border border-gray-100 p-6" x-data="addressModal()">
                    <h2 class="font-semibold text-gray-800 mb-4">Alamat Pengiriman</h2>

                    @if($addresses->isEmpty())
                        <div class="text-center py-8 bg-gray-50 rounded-xl">
                            <svg class="w-10 h-10 text-gray-300 mx-auto mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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="1.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                            <p class="text-sm text-gray-500 mb-1">Belum ada alamat tersimpan.</p>
                            <button type="button" @click="open = true" class="mt-2 px-5 py-2 bg-teal-600 text-white text-sm font-semibold rounded-xl hover:bg-teal-700 transition">+ Tambah Alamat</button>
                        </div>
                        <input type="hidden" name="address_id" value="">
                    @else
                        <div class="space-y-3">
                            @foreach($addresses as $address)
                            <label class="flex gap-3 p-4 border rounded-xl cursor-pointer hover:border-teal-300 transition {{ $address->is_primary ? 'border-teal-400 bg-teal-50/30' : 'border-gray-200' }}">
                                <input type="radio" name="address_id" value="{{ $address->id }}"
                                    data-city-id="{{ $address->city_id }}"
                                    class="mt-0.5 text-teal-600 address-radio"
                                    {{ $address->is_primary || old('address_id') == $address->id ? 'checked' : '' }}
                                    @change="onAddressChange($event.target.value, $event.target.dataset.cityId)">
                                <div class="text-sm flex-1">
                                    <div class="flex items-center gap-2">
                                        <p class="font-semibold text-gray-800">{{ $address->label }} — {{ $address->recipient_name }}</p>
                                        @if(! $address->city_id)
                                            <span class="text-xs text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full">Perlu perbarui kelurahan</span>
                                        @endif
                                    </div>
                                    <p class="text-gray-500">{{ $address->phone }}</p>
                                    <p class="text-gray-500">{{ $address->address }}, {{ $address->district }}, {{ $address->city }}, {{ $address->province }} {{ $address->postal_code }}</p>
                                </div>
                            </label>
                            @endforeach
                        </div>
                    @endif

                    {{-- Address Modal --}}
                    <div x-show="open" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4">
                        <div class="absolute inset-0 bg-black/50" @click="open = false"></div>
                        <div class="relative bg-white rounded-2xl p-6 w-full max-w-lg max-h-[90vh] overflow-y-auto shadow-2xl"
                             @city-selected.window="form.city = $event.detail.city_name; form.city_id = $event.detail.city_id; form.province = $event.detail.province; form.district = $event.detail.district; if($event.detail.zip_code && !form.postal_code) form.postal_code = $event.detail.zip_code">
                            <div class="flex items-center justify-between mb-5">
                                <h3 class="font-bold text-gray-900 text-lg">Tambah Alamat</h3>
                                <button type="button" @click="open = false" class="text-gray-400 hover:text-gray-600">
                                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                                </button>
                            </div>
                            <div class="space-y-4">
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-xs font-semibold text-gray-600 mb-1">Label Alamat <span class="text-red-500">*</span></label>
                                        <input type="text" x-model="form.label" placeholder="Rumah, Kantor..." :class="errors.label ? 'border-red-400' : 'border-gray-200'" class="w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
                                        <p x-show="errors.label" x-text="errors.label?.[0]" class="text-red-500 text-xs mt-1" x-cloak></p>
                                    </div>
                                    <div>
                                        <label class="block text-xs font-semibold text-gray-600 mb-1">Nama Penerima <span class="text-red-500">*</span></label>
                                        <input type="text" x-model="form.recipient_name" placeholder="Nama lengkap..." :class="errors.recipient_name ? 'border-red-400' : 'border-gray-200'" class="w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
                                        <p x-show="errors.recipient_name" x-text="errors.recipient_name?.[0]" class="text-red-500 text-xs mt-1" x-cloak></p>
                                    </div>
                                    <div>
                                        <label class="block text-xs font-semibold text-gray-600 mb-1">Nomor Telepon</label>
                                        <input type="text" x-model="form.phone" placeholder="08xxxxxxxxxx" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
                                    </div>
                                    <div>
                                        <label class="block text-xs font-semibold text-gray-600 mb-1">Kode Pos</label>
                                        <input type="text" x-model="form.postal_code" placeholder="12345" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-xs font-semibold text-gray-600 mb-1">Alamat Lengkap <span class="text-red-500">*</span></label>
                                    <input type="text" x-model="form.address" placeholder="Nama jalan, nomor rumah, RT/RW..." :class="errors.address ? 'border-red-400' : 'border-gray-200'" class="w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
                                    <p x-show="errors.address" x-text="errors.address?.[0]" class="text-red-500 text-xs mt-1" x-cloak></p>
                                </div>
                                <div x-data="citySearch()" class="relative">
                                    <label class="block text-xs font-semibold text-gray-600 mb-1">Kelurahan <span class="text-red-500">*</span></label>
                                    <input type="text" x-model="query" @input.debounce.400ms="search()" @focus="if(results.length) showDropdown = true"
                                        placeholder="Ketik nama kelurahan..."
                                        :class="errors.city ? 'border-red-400' : 'border-gray-200'"
                                        class="w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
                                    <p x-show="errors.city" x-text="errors.city?.[0]" class="text-red-500 text-xs mt-1" x-cloak></p>
                                    <div x-show="showDropdown && results.length" x-cloak @click.outside="showDropdown = false"
                                        class="absolute z-10 mt-1 w-full bg-white border border-gray-200 rounded-xl shadow-lg max-h-52 overflow-y-auto">
                                        <template x-for="city in results" :key="city.id">
                                            <button type="button" @click="selectCity(city)" class="w-full text-left px-4 py-2.5 text-sm hover:bg-teal-50 transition">
                                                <span x-text="city.label"></span>
                                            </button>
                                        </template>
                                    </div>
                                </div>
                                <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                                    <div>
                                        <label class="block text-xs font-semibold text-gray-600 mb-1">Kecamatan</label>
                                        <input type="text" x-model="form.district" placeholder="Terisi otomatis..." class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm bg-gray-50 focus:outline-none focus:ring-2 focus:ring-teal-500" readonly>
                                    </div>
                                    <div>
                                        <label class="block text-xs font-semibold text-gray-600 mb-1">Kota / Kabupaten <span class="text-red-500">*</span></label>
                                        <input type="text" x-model="form.city" placeholder="Terisi otomatis..." :class="errors.city ? 'border-red-400' : 'border-gray-200'" class="w-full px-3 py-2 border rounded-lg text-sm bg-gray-50 focus:outline-none focus:ring-2 focus:ring-teal-500" readonly>
                                    </div>
                                    <div>
                                        <label class="block text-xs font-semibold text-gray-600 mb-1">Provinsi <span class="text-red-500">*</span></label>
                                        <input type="text" x-model="form.province" placeholder="Terisi otomatis..." :class="errors.province ? 'border-red-400' : 'border-gray-200'" class="w-full px-3 py-2 border rounded-lg text-sm bg-gray-50 focus:outline-none focus:ring-2 focus:ring-teal-500" readonly>
                                        <p x-show="errors.province" x-text="errors.province?.[0]" class="text-red-500 text-xs mt-1" x-cloak></p>
                                    </div>
                                </div>
                                <div class="flex items-center gap-2 pt-1">
                                    <input type="checkbox" id="modal-is-primary" x-model="form.is_primary" class="rounded text-teal-600 focus:ring-teal-500">
                                    <label for="modal-is-primary" class="text-sm text-gray-600 cursor-pointer">Jadikan alamat utama</label>
                                </div>
                            </div>
                            <div x-show="generalError" x-cloak class="mt-4 p-3 bg-red-50 border border-red-200 rounded-xl text-xs text-red-600" x-text="generalError"></div>
                            <div class="flex gap-3 mt-4">
                                <button type="button" @click="open = false" class="flex-1 px-4 py-2.5 border border-gray-200 text-gray-600 text-sm font-semibold rounded-xl hover:bg-gray-50 transition">Batal</button>
                                <button type="button" @click="saveAddress()" :disabled="saving" class="flex-1 px-4 py-2.5 bg-teal-600 text-white text-sm font-semibold rounded-xl hover:bg-teal-700 transition disabled:opacity-60">
                                    <span x-text="saving ? 'Menyimpan...' : 'Simpan Alamat'">Simpan Alamat</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Per-Toko Section --}}
                @foreach($storeGroups as $group)
                @php $store = $group['store']; $storeId = $store->id; @endphp
                <div class="bg-white rounded-2xl border border-gray-100 overflow-hidden"
                     x-data="storeShipping({{ $storeId }}, {{ $group['has_physical'] ? 'true' : 'false' }})">

                    {{-- Store Header --}}
                    <div class="flex items-center gap-3 px-6 py-4 border-b border-gray-50 bg-gray-50/50">
                        <div class="w-9 h-9 rounded-lg overflow-hidden bg-gray-200 shrink-0">
                            @if($store->logo)
                                <img src="{{ Storage::url($store->logo) }}" class="w-full h-full object-cover">
                            @else
                                <div class="w-full h-full flex items-center justify-center text-gray-400">
                                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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"/></svg>
                                </div>
                            @endif
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-gray-800">{{ $store->name }}</p>
                            @if($store->city) <p class="text-xs text-gray-400">{{ $store->city }}</p> @endif
                        </div>
                    </div>

                    {{-- Items --}}
                    <div class="divide-y divide-gray-50">
                        @foreach($group['items'] as $item)
                        <div class="flex gap-3 px-6 py-3">
                            <div class="w-12 h-12 rounded-lg bg-gray-100 overflow-hidden shrink-0">
                                @if($item->product->thumbnail)
                                    <img src="{{ Storage::url($item->product->thumbnail) }}" class="w-full h-full object-cover">
                                @endif
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-sm font-medium text-gray-800 truncate">{{ $item->product->name }}</p>
                                @if($item->variant) <p class="text-xs text-gray-400">{{ $item->variant->name }}</p> @endif
                                <p class="text-xs text-gray-400">×{{ $item->quantity }}</p>
                            </div>
                            <p class="text-sm font-semibold text-gray-700 shrink-0">Rp {{ number_format($item->price * $item->quantity, 0, ',', '.') }}</p>
                        </div>
                        @endforeach
                    </div>

                    {{-- Subtotal Toko --}}
                    <div class="flex justify-between items-center px-6 py-3 border-t border-gray-50 text-sm">
                        <span class="text-gray-500">Subtotal toko</span>
                        <span class="font-semibold text-gray-700">Rp {{ number_format($group['subtotal'], 0, ',', '.') }}</span>
                    </div>

                    {{-- Shipping Section (hanya produk fisik) --}}
                    @if($group['has_physical'])
                    <div class="px-6 pb-6 pt-2 border-t border-gray-100">
                        {{-- Hidden inputs untuk store ini --}}
                        <input type="hidden" name="stores[{{ $storeId }}][shipping_type]" x-model="shippingType">
                        <input type="hidden" name="stores[{{ $storeId }}][shipping_courier]" :value="shippingType === 'pickup' ? 'pickup' : (selectedOption?.courier ?? '')">
                        <input type="hidden" name="stores[{{ $storeId }}][shipping_service]" :value="shippingType === 'pickup' ? 'Ambil di Toko' : (selectedOption?.service ?? '')">
                        <input type="hidden" name="stores[{{ $storeId }}][shipping_cost]" :value="shippingType === 'pickup' ? 0 : (selectedOption?.cost ?? 0)">
                        <input type="hidden" name="stores[{{ $storeId }}][shipping_etd]" :value="selectedOption?.etd ?? ''">

                        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3 mt-2">Pengiriman</p>

                        {{-- Tabs --}}
                        <div class="flex gap-2 mb-4">
                            <button type="button"
                                @click="setShippingType('delivery')"
                                :class="shippingType === 'delivery' ? 'bg-teal-600 text-white border-teal-600' : 'border-gray-200 text-gray-600 hover:border-teal-300'"
                                class="flex-1 py-2 border rounded-xl text-xs font-semibold transition flex items-center justify-center gap-1.5">
                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><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"/></svg>
                                Dikirim
                            </button>
                            <button type="button"
                                @click="setShippingType('pickup')"
                                :class="shippingType === 'pickup' ? 'bg-teal-600 text-white border-teal-600' : 'border-gray-200 text-gray-600 hover:border-teal-300'"
                                class="flex-1 py-2 border rounded-xl text-xs font-semibold transition flex items-center justify-center gap-1.5">
                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.828 0l-4.243-4.243a8 8 0 1111.314 0z"/></svg>
                                Ambil di Toko
                            </button>
                        </div>

                        {{-- Delivery options --}}
                        <div x-show="shippingType === 'delivery'">
                            <div x-show="!currentAddressId" class="text-center py-4 bg-gray-50 rounded-xl text-xs text-gray-400">
                                Pilih alamat untuk melihat opsi pengiriman.
                            </div>
                            <div x-show="currentAddressId && !currentCityId" x-cloak class="flex items-start gap-2 p-3 bg-amber-50 border border-amber-200 rounded-xl text-xs text-amber-700">
                                <svg class="w-4 h-4 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                Alamat belum punya data kelurahan. Tambah alamat baru dengan memilih kelurahan dari dropdown.
                            </div>
                            <div x-show="currentAddressId && currentCityId && loading" x-cloak class="flex items-center gap-2 py-4 justify-center text-xs text-gray-400">
                                <svg class="w-4 h-4 animate-spin" 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-8v8z"></path></svg>
                                Menghitung ongkos kirim...
                            </div>
                            <div x-show="currentAddressId && currentCityId && !loading && error" x-cloak class="p-3 bg-red-50 border border-red-200 rounded-xl text-xs text-red-600" x-text="error"></div>
                            <div x-show="currentAddressId && currentCityId && !loading && !error && options.length" x-cloak class="space-y-2">
                                <template x-for="opt in options" :key="opt.courier + opt.service">
                                    <label class="flex gap-3 p-3 border rounded-xl cursor-pointer hover:border-teal-300 transition"
                                        :class="selectedOption?.courier === opt.courier && selectedOption?.service === opt.service ? 'border-teal-400 bg-teal-50/30' : 'border-gray-200'">
                                        <input type="radio" class="mt-0.5 text-teal-600"
                                            :checked="selectedOption?.courier === opt.courier && selectedOption?.service === opt.service"
                                            @change="selectOption(opt)">
                                        <div class="flex-1">
                                            <div class="flex items-center justify-between">
                                                <p class="text-xs font-semibold text-gray-800" x-text="`${opt.courier} ${opt.service}`"></p>
                                                <p class="text-xs font-bold text-teal-600" x-text="`Rp ${opt.cost.toLocaleString('id-ID')}`"></p>
                                            </div>
                                            <p class="text-xs text-gray-400 mt-0.5" x-text="`${opt.description} · ${opt.etd}`"></p>
                                        </div>
                                    </label>
                                </template>
                            </div>
                            <div x-show="currentAddressId && currentCityId && !loading && !error && !options.length" x-cloak class="text-center py-4 bg-gray-50 rounded-xl text-xs text-gray-400">
                                Tidak ada opsi pengiriman untuk rute ini.
                            </div>
                        </div>

                        {{-- Pickup info --}}
                        <div x-show="shippingType === 'pickup'" x-cloak>
                            @if($store->address)
                            <div class="flex items-start gap-3 p-3 bg-teal-50 border border-teal-200 rounded-xl text-sm">
                                <svg class="w-4 h-4 text-teal-500 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.828 0l-4.243-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>
                                <div class="text-xs">
                                    <p class="font-semibold text-teal-800">{{ $store->name }}</p>
                                    <p class="text-teal-700 mt-0.5">{{ implode(', ', array_filter([$store->address, $store->city, $store->province, $store->postal_code])) }}</p>
                                    @if($store->phone) <p class="text-teal-600 mt-0.5">{{ $store->phone }}</p> @endif
                                </div>
                            </div>
                            <p class="text-xs text-gray-400 mt-2 text-center">Ongkir gratis. Koordinasikan waktu pengambilan langsung dengan toko.</p>
                            @else
                            <div class="text-center py-4 bg-gray-50 rounded-xl text-xs text-gray-400">
                                Toko belum mencantumkan alamat untuk pickup.
                            </div>
                            @endif
                        </div>
                    </div>
                    @endif
                </div>
                @endforeach

                {{-- Metode Pembayaran --}}
                <div class="bg-white rounded-2xl border border-gray-100 p-6">
                    <h2 class="font-semibold text-gray-800 mb-4">Metode Pembayaran</h2>
                    <input type="hidden" name="payment_method" value="manual_transfer">
                    <div class="flex gap-3 p-4 border border-teal-400 bg-teal-50/30 rounded-xl">
                        <svg class="w-5 h-5 text-teal-500 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><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>
                            <p class="text-sm font-semibold text-gray-800">Transfer Manual</p>
                            <p class="text-xs text-gray-400">Transfer ke rekening bank, lalu upload bukti transfer.</p>
                        </div>
                    </div>
                </div>

                {{-- Catatan --}}
                <div class="bg-white rounded-2xl border border-gray-100 p-6">
                    <h2 class="font-semibold text-gray-800 mb-3">Catatan <span class="text-gray-400 font-normal">(opsional)</span></h2>
                    <textarea name="notes" rows="2" class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 resize-none" placeholder="Catatan untuk semua penjual...">{{ old('notes') }}</textarea>
                </div>
            </div>

            {{-- Order Summary Sidebar --}}
            <div>
                <div class="bg-white rounded-2xl border border-gray-100 p-6 sticky top-24">
                    <h2 class="font-semibold text-gray-800 mb-4">Ringkasan</h2>

                    <div class="space-y-4 mb-4">
                        @foreach($storeGroups as $group)
                        <div>
                            <p class="text-xs font-semibold text-gray-500 mb-1.5">{{ $group['store']->name }}</p>
                            @foreach($group['items'] as $item)
                            <div class="flex justify-between text-xs text-gray-500 mb-1">
                                <span class="truncate mr-2">{{ $item->product->name }} ×{{ $item->quantity }}</span>
                                <span class="shrink-0">Rp {{ number_format($item->price * $item->quantity, 0, ',', '.') }}</span>
                            </div>
                            @endforeach
                            @if($group['has_physical'])
                            <div class="flex justify-between text-xs text-gray-400 mt-1" id="ongkir-{{ $group['store']->id }}">
                                <span>Ongkir</span>
                                <span x-data x-text="$store.storeCosts?.['{{ $group['store']->id }}'] !== undefined
                                    ? ($store.storeCosts['{{ $group['store']->id }}'] === 0 ? 'Gratis' : 'Rp ' + Number($store.storeCosts['{{ $group['store']->id }}']).toLocaleString('id-ID'))
                                    : 'Pilih kurir'" class="shrink-0"></span>
                            </div>
                            @endif
                        </div>
                        @if(!$loop->last)<div class="border-t border-gray-100"></div>@endif
                        @endforeach
                    </div>

                    <!-- Coupon Input Section -->
                    <div class="border-t border-gray-100 py-4" x-data="couponSection()">
                        <label class="block text-xs font-semibold text-gray-600 mb-2">Punya Kode Kupon?</label>
                        <div class="flex gap-2">
                            <input type="text" x-model="couponCode" :disabled="applied" placeholder="KODEKUPON" class="flex-1 px-3 py-2 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 uppercase">
                            <button type="button" @click="applyCoupon" :disabled="loading || !couponCode" class="px-4 py-2 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-200 text-white text-xs font-semibold rounded-xl transition">
                                <span x-text="loading ? '...' : (applied ? 'Batal' : 'Pakai')">Pakai</span>
                            </button>
                        </div>
                        <p x-show="message" :class="error ? 'text-red-500' : 'text-green-600'" class="text-xs mt-1.5" x-text="message" x-cloak></p>
                        <input type="hidden" name="coupon_code" :value="applied ? couponCode : ''">
                    </div>

                    <div class="border-t border-gray-100 pt-4 space-y-2">
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>Subtotal</span>
                            <span>Rp {{ number_format($subtotal, 0, ',', '.') }}</span>
                        </div>
                        <div class="flex justify-between text-sm text-gray-500" x-show="couponDiscount > 0" x-cloak>
                            <span>Diskon Kupon</span>
                            <span class="text-red-500" x-text="`-Rp ${couponDiscount.toLocaleString('id-ID')}`"></span>
                        </div>
                        <div class="flex justify-between font-bold text-gray-800 text-lg">
                            <span>Total</span>
                            <span x-text="`Rp ${grandTotal.toLocaleString('id-ID')}`">Rp {{ number_format($subtotal, 0, ',', '.') }}</span>
                        </div>
                    </div>

                    <button type="submit" :disabled="submitting" class="mt-5 w-full px-4 py-3 bg-teal-600 text-white font-semibold rounded-xl hover:bg-teal-700 transition text-sm disabled:opacity-60">
                        <span x-text="submitting ? 'Memproses...' : 'Buat Pesanan'">Buat Pesanan</span>
                    </button>
                    <a href="{{ route('cart.index') }}" class="mt-2 block text-center text-sm text-gray-400 hover:text-gray-600">← Kembali ke keranjang</a>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
const SUBTOTAL = {{ $subtotal }};
const STORE_GROUPS = @js($storeGroups->map(fn($g) => ['store_id' => $g['store']->id, 'subtotal' => $g['subtotal'], 'has_physical' => $g['has_physical']])->values());

// Shared store state for cross-component communication
document.addEventListener('alpine:init', () => {
    Alpine.store('storeCosts', {});
    Alpine.store('couponDiscount', 0);
});

function checkoutForm() {
    return {
        submitting: false,

        get grandTotal() {
            const shippingTotal = Object.values(Alpine.store('storeCosts')).reduce((a, b) => a + b, 0);
            const discount = Alpine.store('couponDiscount');
            return Math.max(0, SUBTOTAL + shippingTotal - discount);
        },

        get couponDiscount() {
            return Alpine.store('couponDiscount');
        },

        updateStoreCost(storeId, cost) {
            Alpine.store('storeCosts')[storeId] = cost;
            Alpine.store('storeCosts', {...Alpine.store('storeCosts')});
        },

        onAddressChange(addressId, cityId) {
            window.dispatchEvent(new CustomEvent('address-changed', {
                detail: { addressId, cityId: cityId || null }
            }));
        },

        submitForm(e) {
            const physicalStores = STORE_GROUPS.filter(s => s.has_physical);
            const costs = Alpine.store('storeCosts');
            for (const s of physicalStores) {
                if (costs[s.store_id] === undefined) {
                    alertElegant('Pilih opsi pengiriman untuk semua toko terlebih dahulu.', 'Perhatian', 'warning');
                    return;
                }
            }
            this.submitting = true;
            e.target.submit();
        },

        init() {
            const checked = document.querySelector('.address-radio:checked');
            if (checked) {
                this.onAddressChange(checked.value, checked.dataset.cityId);
            }
            
            window.addEventListener('coupon-updated', (e) => {
                Alpine.store('couponDiscount', e.detail.discount);
            });
        },
    };
}

function couponSection() {
    return {
        couponCode: '',
        applied: false,
        loading: false,
        message: '',
        error: false,

        async applyCoupon() {
            if (this.applied) {
                this.couponCode = '';
                this.applied = false;
                this.message = '';
                this.error = false;
                window.dispatchEvent(new CustomEvent('coupon-updated', { detail: { discount: 0 } }));
                return;
            }

            this.loading = true;
            this.message = '';
            this.error = false;

            try {
                const res = await fetch('{{ route("coupon.validate") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    },
                    body: JSON.stringify({
                        code: this.couponCode,
                        subtotal: SUBTOTAL,
                        store_ids: STORE_GROUPS.map(g => g.store_id),
                    })
                });

                const data = await res.json();

                if (!res.ok || !data.success) {
                    this.error = true;
                    this.message = data.message || 'Kupon tidak valid.';
                    window.dispatchEvent(new CustomEvent('coupon-updated', { detail: { discount: 0 } }));
                } else {
                    this.applied = true;
                    this.message = `Kupon berhasil digunakan! Diskon: Rp ${Number(data.discount).toLocaleString('id-ID')}`;
                    window.dispatchEvent(new CustomEvent('coupon-updated', { detail: { discount: data.discount } }));
                }
            } catch (err) {
                this.error = true;
                this.message = 'Terjadi kesalahan sistem. Coba lagi.';
            } finally {
                this.loading = false;
            }
        }
    };
}

function storeShipping(storeId, hasPhysical) {
    return {
        storeId,
        hasPhysical,
        shippingType: 'delivery',
        selectedOption: null,
        options: [],
        loading: false,
        error: null,
        currentAddressId: null,
        currentCityId: null,

        init() {
            window.addEventListener('address-changed', (e) => {
                this.currentAddressId = e.detail.addressId;
                this.currentCityId = e.detail.cityId;
                this.selectedOption = null;
                this.options = [];
                this.error = null;

                if (this.hasPhysical && this.shippingType === 'delivery' && e.detail.addressId && e.detail.cityId) {
                    this.fetchShipping(e.detail.addressId);
                }
                this.notifyParent();
            });

            const checked = document.querySelector('.address-radio:checked');
            if (checked && checked.dataset.cityId) {
                this.currentAddressId = checked.value;
                this.currentCityId = checked.dataset.cityId;
                if (this.hasPhysical) {
                    this.fetchShipping(checked.value);
                }
            }
        },

        setShippingType(type) {
            this.shippingType = type;
            this.selectedOption = null;

            if (type === 'delivery' && this.currentAddressId && this.currentCityId && !this.options.length) {
                this.fetchShipping(this.currentAddressId);
            }
            this.notifyParent();
        },

        async fetchShipping(addressId) {
            this.loading = true;
            this.error = null;
            try {
                const buyNow = {
                    product_id: document.querySelector('input[name="product_id"]')?.value || null,
                    variant_id: document.querySelector('input[name="variant_id"]')?.value || null,
                    quantity:   document.querySelector('input[name="quantity"]')?.value || null,
                };
                const res = await fetch('{{ route("shipping.calculate") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    },
                    body: JSON.stringify({ address_id: addressId, store_id: this.storeId, ...buyNow }),
                });
                const data = await res.json();
                if (!res.ok) {
                    this.error = data.error ?? 'Gagal menghitung ongkir.';
                } else {
                    this.options = data.options ?? [];
                }
            } catch {
                this.error = 'Gagal menghubungi server. Coba lagi.';
            } finally {
                this.loading = false;
            }
        },

        selectOption(opt) {
            this.selectedOption = opt;
            this.notifyParent();
        },

        notifyParent() {
            const cost = this.shippingType === 'pickup' ? 0 : (this.selectedOption?.cost ?? undefined);
            window.dispatchEvent(new CustomEvent('store-cost-updated', {
                detail: { storeId: this.storeId, cost }
            }));
        },
    };
}

function addressModal() {
    return {
        open: false,
        saving: false,
        errors: {},
        generalError: '',
        form: {
            label: '', recipient_name: '', phone: '',
            address: '', district: '', city: '', city_id: '',
            province: '', postal_code: '', is_primary: true,
        },
        async saveAddress() {
            this.saving = true;
            this.errors = {};
            this.generalError = '';
            try {
                const res = await fetch('{{ route("address.store") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    },
                    body: JSON.stringify(this.form),
                });
                const data = await res.json();
                if (data.success) {
                    window.location.reload();
                } else if (data.errors) {
                    this.errors = data.errors;
                    const firstError = Object.values(data.errors).flat()[0];
                    this.generalError = firstError ?? 'Periksa kembali isian form di atas.';
                } else {
                    this.generalError = data.message ?? 'Terjadi kesalahan. Coba lagi.';
                }
            } catch {
                this.generalError = 'Gagal menghubungi server. Periksa koneksi internet kamu.';
            } finally {
                this.saving = false;
            }
        },
    };
}

function citySearch() {
    return {
        query: '', results: [], showDropdown: false,
        async search() {
            if (this.query.length < 2) { this.results = []; this.showDropdown = false; return; }
            try {
                const res = await fetch(`{{ route("shipping.destinations") }}?search=${encodeURIComponent(this.query)}`);
                this.results = await res.json();
                this.showDropdown = this.results.length > 0;
            } catch { this.results = []; }
        },
        selectCity(city) {
            this.query = city.subdistrict_name;
            this.showDropdown = false;
            this.$dispatch('city-selected', {
                city_id: String(city.id),
                city_name: city.city_name,
                province: city.province_name,
                district: city.district_name,
                zip_code: city.zip_code,
            });
        },
    };
}
</script>
@endpush