@extends('layouts.app')
@section('title', __('Checkout'))
@section('content')
@php $m = $shop->money; $v = fn ($k) => old($k, $prefill[$k] ?? ''); $selProvince = old('province_id', $prefill['province_id']); @endphp
<h1 class="mb-8 text-3xl font-extrabold tracking-tight text-primary sm:text-4xl">{{ __('Checkout') }}</h1>

<form method="POST" action="{{ route('checkout.store') }}" class="grid items-start gap-8 lg:grid-cols-[1fr_380px]" novalidate>
    @csrf
    <div class="space-y-6">
        @if ($errors->any())
            <div role="alert" class="rounded-2xl bg-error-container px-5 py-3 text-sm font-semibold text-on-error-container">{{ __('Please check the highlighted fields.') }}</div>
        @endif

        <section class="rounded-[32px] border border-surface-variant bg-white p-6 shadow-soft">
            <h2 class="mb-4 text-lg font-extrabold text-primary">{{ __('Contact') }}</h2>
            <div class="grid gap-4 sm:grid-cols-2">
                <x-field name="name" :label="__('Full name')" :value="$prefill['name']" required autocomplete="name" class="sm:col-span-2"/>
                <x-field name="email" type="email" :label="__('Email')" :value="$prefill['email']" required autocomplete="email"/>
                <x-field name="phone" type="tel" :label="__('Phone')" :value="$prefill['phone']" required autocomplete="tel"/>
            </div>
        </section>

        <section class="rounded-[32px] border border-surface-variant bg-white p-6 shadow-soft">
            <h2 class="mb-4 text-lg font-extrabold text-primary">{{ __('Delivery address') }}</h2>
            <div class="grid gap-4 sm:grid-cols-2">
                <x-field name="address1" :label="__('Address')" :value="$prefill['address1']" required autocomplete="address-line1" class="sm:col-span-2"/>
                <x-field name="address2" :label="__('Apartment, building, landmark')" :value="$prefill['address2']" autocomplete="address-line2" class="sm:col-span-2"/>
                <div>
                    <label for="province_id" class="mb-1.5 block text-sm font-semibold text-on-surface-variant">{{ __('Province') }}</label>
                    <select id="province_id" name="province_id" required class="min-h-[48px] w-full rounded-2xl border bg-white px-4 text-[15px] {{ $errors->has('province_id') ? 'border-error' : 'border-outline-variant' }}">
                        <option value="">{{ __('Select…') }}</option>
                        @foreach ($provinces as $p)<option value="{{ $p->id }}" @selected((string) $selProvince === (string) $p->id)>{{ app()->getLocale() === 'km' && $p->name_km ? $p->name_km : $p->name }}</option>@endforeach
                    </select>
                    @error('province_id')<p class="mt-1 text-sm text-error">{{ $message }}</p>@enderror
                </div>
                <x-field name="district" :label="__('District / Khan')"/>
                <x-field name="postal" :label="__('Postal code')" autocomplete="postal-code"/>
            </div>

            <div class="mt-6">
                <p class="mb-1.5 text-sm font-semibold text-on-surface-variant">{{ __('Pin your location on the map') }} <span class="font-normal text-outline">({{ __('optional') }})</span></p>
                <p class="mb-3 text-xs text-on-surface-variant">{{ __('Tap the map or drag the pin to your door. This helps the courier find you.') }}</p>
                <div class="mb-3 flex flex-col gap-2 sm:flex-row">
                    <input id="map-search" type="search" placeholder="{{ __('Search a place, street or landmark') }}" class="min-h-[48px] flex-1 rounded-2xl border border-outline-variant bg-white px-4 text-[15px] focus:border-primary focus:outline-none focus:ring-2 focus:ring-tertiary">
                    <button type="button" id="map-find" class="min-h-[48px] rounded-full bg-primary px-6 font-bold text-white">{{ __('Search') }}</button>
                    <button type="button" id="map-locate" class="min-h-[48px] rounded-full bg-surface-mid px-6 font-bold text-primary">{{ __('Use my location') }}</button>
                </div>
                <div id="map" class="relative isolate z-0 h-72 w-full overflow-hidden rounded-3xl border border-outline-variant sm:h-80" role="application" aria-label="{{ __('Map') }}"></div>
                <p id="map-status" class="mt-2 min-h-[1.25rem] text-sm text-on-surface-variant" aria-live="polite"></p>
                <input type="hidden" name="latitude" id="lat" value="{{ old('latitude') }}">
                <input type="hidden" name="longitude" id="lng" value="{{ old('longitude') }}">
                @error('latitude')<p class="mt-1 text-sm text-error">{{ $message }}</p>@enderror
            </div>
        </section>

        <div class="grid items-start gap-6 md:grid-cols-2">
            <section class="rounded-[28px] border border-surface-variant bg-white p-4 shadow-soft">
                <h2 class="mb-4 text-lg font-extrabold text-primary">{{ __('Delivery method') }}</h2>
                <div id="shipping-list" class="space-y-3" aria-live="polite"><p class="text-sm text-on-surface-variant">{{ __('Choose your province to see delivery options.') }}</p></div>
                @error('shipping_method_id')<p class="mt-2 text-sm text-error">{{ $message }}</p>@enderror
            </section>
            <section class="rounded-[28px] border border-surface-variant bg-white p-4 shadow-soft">
                <h2 class="mb-4 text-lg font-extrabold text-primary">{{ __('Payment') }}</h2>
                @php
                    $payTile = ['cod' => 'bg-accent-container text-on-accent-container', 'qr' => 'bg-tertiary-container text-on-tertiary-container', 'card' => 'bg-secondary-container text-on-secondary-container', 'bank_transfer' => 'bg-surface-low text-primary', 'wallet' => 'bg-tertiary text-on-tertiary'];
                    $paySub = ['cod' => __('Pay cash when your order arrives'), 'qr' => __('Scan with your banking app'), 'card' => __('Pay securely by card'), 'bank_transfer' => __('Transfer from your bank'), 'wallet' => __('Pay with your e-wallet')];
                @endphp
                <div class="grid gap-3">
                    @foreach ($payments as $p)
                        <label class="relative block cursor-pointer">
                            <input type="radio" name="payment" value="{{ $p->code }}" data-type="{{ $p->type }}" class="peer sr-only" @checked(old('payment') === $p->code) required>
                            <span class="flex min-h-[64px] items-center gap-3 rounded-2xl border-2 border-surface-variant bg-white p-2.5 transition hover:border-outline peer-checked:border-primary peer-checked:bg-surface-mid peer-checked:shadow-soft peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-50">
                                <span class="grid {{ $p->logo ? 'h-11 w-11 border border-surface-variant bg-white p-0.5' : 'h-11 w-11 '.($payTile[$p->type] ?? 'bg-surface-mid text-primary') }} flex-none place-items-center overflow-hidden rounded-2xl">
                                    @if ($p->logo)<img src="{{ $p->logo }}" alt="" loading="lazy" class="h-full w-full object-contain">@else @include('partials.method-icon', ['kind' => $p->type])@endif
                                </span>
                                <span class="min-w-0 flex-1"><span class="block text-sm font-extrabold text-primary">{{ __($p->name) }}</span><span class="block text-xs text-on-surface-variant">{{ $paySub[$p->type] ?? '' }}</span></span>
                            </span>
                            <span class="pointer-events-none absolute -right-2 -top-2 grid h-6 w-6 scale-0 place-items-center rounded-full bg-primary text-on-primary shadow-soft transition peer-checked:scale-100" aria-hidden="true"><svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 5 5L20 7"/></svg></span>
                        </label>
                    @endforeach
                </div>
                @error('payment')<p class="mt-2 text-sm text-error">{{ $message }}</p>@enderror
                <p id="cod-note" class="mt-3 hidden text-sm font-semibold text-error">{{ __('Cash on delivery isn\'t available for the selected delivery method.') }}</p>
                <x-field name="note" :label="__('Note for the courier')" class="mt-5"/>
            </section>
        </div>
    </div>

    <div class="lg:sticky lg:top-28 lg:max-h-[calc(100vh-8rem)] lg:self-start lg:overflow-y-auto">
            <aside class="self-start rounded-[32px] bg-surface-mid p-6">
                <h2 class="text-xl font-extrabold text-primary">{{ __('Your order') }}</h2>
                <ul class="mt-4 space-y-3">
                    @foreach ($cart['lines'] as $l)
                        <li class="flex gap-3">
                            @include('partials.line-thumb', ['image' => $l->image])
                            <div class="min-w-0 flex-1 text-sm"><p class="font-bold text-primary">{{ $l->name }}</p><p class="text-on-surface-variant">{{ collect([$l->color, $l->size])->filter()->implode(' · ') }} × {{ $l->quantity }}</p></div>
                            <p class="text-sm font-bold">{{ $m->format($l->line_total) }}</p>
                        </li>
                    @endforeach
                </ul>
                <dl class="mt-6 space-y-3 text-sm">
                    <div class="flex justify-between"><dt class="text-on-surface-variant">{{ __('Subtotal') }}</dt><dd class="font-bold">{{ $m->format($cart['subtotal']) }}</dd></div>
                    @if ($cart['discount'] > 0)<div class="flex justify-between"><dt class="text-on-surface-variant">{{ __('Discount') }} ({{ $cart['coupon'] }})</dt><dd class="font-bold text-secondary">−{{ $m->format($cart['discount']) }}</dd></div>@endif
                    <div class="flex justify-between"><dt class="text-on-surface-variant">{{ __('Delivery') }}</dt><dd id="ship-fee" class="font-bold">—</dd></div>
                    <div class="flex justify-between border-t border-outline-variant pt-3 text-base"><dt class="font-extrabold text-primary">{{ __('Total') }}</dt><dd id="grand" class="font-extrabold text-primary">{{ $m->format($cart['total']) }}</dd></div>
                </dl>
                <div class="mt-6"><x-btn type="submit" block id="place">{{ __('Place order') }}</x-btn></div>
                <p class="mt-3 text-center text-xs text-on-surface-variant"><a href="{{ route('cart') }}" class="underline">{{ __('Back to bag') }}</a></p>
            </aside>
    </div>
</form>

@push('head')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css">
@endpush
@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
<script>
(() => {
  if (!window.L) return;
  const $ = id => document.getElementById(id);
  const latEl = $('lat'), lngEl = $('lng'), status = $('map-status'), prov = $('province_id');
  const t = { got: @json(__('Pin set. You can drag it to adjust.')), none: @json(__('Nothing found. Try another search or tap the map.')), geo: @json(__('Could not get your location. Tap the map instead.')), busy: @json(__('Searching…')) };
  const start = latEl.value && lngEl.value ? [parseFloat(latEl.value), parseFloat(lngEl.value)] : [11.5564, 104.9282]; // Phnom Penh
  const map = L.map('map', { scrollWheelZoom: false }).setView(start, latEl.value ? 17 : 12);
  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '&copy; OpenStreetMap contributors' }).addTo(map);
  let marker = null;

  function setPin(lat, lng, opts = {}) {
    lat = +lat; lng = +lng;
    latEl.value = lat.toFixed(7); lngEl.value = lng.toFixed(7);
    if (!marker) {
      marker = L.marker([lat, lng], { draggable: true }).addTo(map);
      marker.on('dragend', () => { const p = marker.getLatLng(); setPin(p.lat, p.lng, { reverse: true }); });
    } else marker.setLatLng([lat, lng]);
    if (opts.zoom) map.setView([lat, lng], Math.max(map.getZoom(), 17));
    status.textContent = t.got;
    if (opts.reverse) reverse(lat, lng);
  }
  async function reverse(lat, lng) {
    try {
      const r = await fetch('https://nominatim.openstreetmap.org/reverse?format=jsonv2&addressdetails=1&zoom=18&accept-language=en&lat=' + lat + '&lon=' + lng);
      const a = (await r.json()).address || {};
      const street = [a.house_number, a.road].filter(Boolean).join(' ') || a.neighbourhood || a.suburb || '';
      const addr = $('f-address1');
      if (addr && !addr.value.trim() && street) addr.value = street;
      const dist = a.city_district || a.suburb || a.county || '';
      if ($('f-district') && !$('f-district').value.trim() && dist) $('f-district').value = dist;
      if ($('f-postal') && !$('f-postal').value.trim() && a.postcode) $('f-postal').value = a.postcode;
      const names = [a.state, a.city, a.province, a.region].filter(Boolean).map(s => s.toLowerCase().replace(/\s*(province|municipality|capital)\s*/g, '').trim());
      const opt = [...prov.options].find(o => o.value && names.some(n => o.text.toLowerCase().includes(n) || n.includes(o.text.toLowerCase())));
      if (opt && prov.value !== opt.value) { prov.value = opt.value; prov.dispatchEvent(new Event('change')); }
    } catch (e) { /* the pin is still saved */ }
  }
  map.on('click', e => setPin(e.latlng.lat, e.latlng.lng, { reverse: true }));
  if (latEl.value && lngEl.value) setPin(start[0], start[1]);

  async function search() {
    const q = $('map-search').value.trim(); if (!q) return;
    status.textContent = t.busy;
    try {
      const r = await fetch('https://nominatim.openstreetmap.org/search?format=jsonv2&limit=1&countrycodes=kh&q=' + encodeURIComponent(q));
      const d = await r.json();
      if (!d.length) { status.textContent = t.none; return; }
      setPin(d[0].lat, d[0].lon, { zoom: true, reverse: true });
    } catch (e) { status.textContent = t.none; }
  }
  $('map-find').addEventListener('click', search);
  $('map-search').addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); search(); } });
  $('map-locate').addEventListener('click', () => {
    if (!navigator.geolocation) { status.textContent = t.geo; return; }
    navigator.geolocation.getCurrentPosition(p => setPin(p.coords.latitude, p.coords.longitude, { zoom: true, reverse: true }), () => { status.textContent = t.geo; }, { enableHighAccuracy: true, timeout: 10000 });
  });
  setTimeout(() => map.invalidateSize(), 300);
})();
</script>
<script>
(() => {
  const sel = document.getElementById('province_id'), list = document.getElementById('shipping-list');
  const fee = document.getElementById('ship-fee'), grand = document.getElementById('grand'), codNote = document.getElementById('cod-note');
  const wasMethod = @json((string) old('shipping_method_id'));
  const t = { none: @json(__('No delivery options for that province yet.')), free: @json(__('Free')), days: @json(__('days')), choose: @json(__('Choose your province to see delivery options.')) };
  let options = [];
  const truck = '<svg class="h-7 w-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 6h11v10H2zM13 9h5l3 3v4h-8"/><circle cx="6" cy="17.5" r="1.8"/><circle cx="17" cy="17.5" r="1.8"/></svg>';

  const esc = s => String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
  function syncCod() {
    const m = options.find(o => String(o.id) === document.querySelector('input[name=shipping_method_id]:checked')?.value);
    const cod = document.querySelector('input[name=payment][data-type=cod]');
    const pName = (sel.options[sel.selectedIndex]?.text || '').trim().toLowerCase();
    const inPP = pName === 'phnom penh' || pName === 'ភ្នំពេញ';
    const bad = !!(m && !m.cod);
    if (cod) {
      const card = cod.closest('label');
      if (card) card.classList.toggle('hidden', !inPP);
      cod.disabled = !inPP || bad;
      if (cod.disabled && cod.checked) cod.checked = false;
    }
    codNote.classList.toggle('hidden', !(inPP && bad));
  }
  function draw() {
    if (!options.length) { list.innerHTML = `<p class="text-sm text-on-surface-variant">${t.none}</p>`; return; }
    list.innerHTML = options.map(o => `
      <label class="relative block cursor-pointer"><input type="radio" name="shipping_method_id" value="${o.id}" class="peer sr-only" ${String(o.id) === wasMethod ? 'checked' : ''}>
        <span class="flex min-h-[64px] items-center gap-3 rounded-2xl border-2 border-surface-variant bg-white p-2.5 transition hover:border-outline peer-checked:border-primary peer-checked:bg-surface-mid peer-checked:shadow-soft peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary">
          <span class="grid ${o.logo ? 'h-11 w-11 border border-surface-variant bg-white p-0.5' : 'h-11 w-11 bg-secondary-container text-on-secondary-container'} flex-none place-items-center overflow-hidden rounded-2xl">${o.logo ? `<img src="${esc(o.logo)}" alt="" loading="lazy" class="h-full w-full object-contain">` : truck}</span>
          <span class="min-w-0 flex-1"><span class="block text-sm font-extrabold text-primary">${esc(o.name)}</span>${o.days ? `<span class="block text-xs text-on-surface-variant">${esc(o.days)} ${t.days}</span>` : ''}</span>
          <span class="flex-none rounded-full ${o.fee_text === t.free ? 'bg-tertiary-container text-on-tertiary-container' : 'bg-surface-mid text-primary'} px-3 py-1.5 text-sm font-extrabold">${esc(o.fee_text)}</span></span>
        <span class="pointer-events-none absolute -right-2 -top-2 grid h-6 w-6 scale-0 place-items-center rounded-full bg-primary text-on-primary shadow-soft transition peer-checked:scale-100" aria-hidden="true"><svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 5 5L20 7"/></svg></span></label>`).join('');
    list.querySelectorAll('input').forEach(i => i.addEventListener('change', () => { pick(); }));
    if (!list.querySelector('input:checked') && options.length === 1) list.querySelector('input').checked = true;
    pick();
  }
  function pick() {
    const id = document.querySelector('input[name=shipping_method_id]:checked')?.value;
    const o = options.find(x => String(x.id) === id);
    fee.textContent = o ? o.fee_text : '—';
    if (o) grand.textContent = o.grand_text;
    syncCod();
  }
  async function load() {
    if (!sel.value) { options = []; list.innerHTML = `<p class="text-sm text-on-surface-variant">${t.choose}</p>`; return; }
    try {
      const r = await fetch(@json(route('checkout.shipping')) + '?province_id=' + encodeURIComponent(sel.value), { headers: { Accept: 'application/json' } });
      options = (await r.json()).options;
    } catch (e) { options = []; }
    draw();
  }
  sel.addEventListener('change', () => { load(); syncCod(); });
  document.querySelectorAll('input[name=payment]').forEach(i => i.addEventListener('change', syncCod));
  load();
})();
</script>
@endpush
@endsection