@php
    $mapPath = public_path('images/peta-lokasi-kubur.jpeg');
    $mapExists = file_exists($mapPath);

    $panduan = function (?int $no): string {
        return match ($no) {
            1 => 'Kawasan Barzakh 1 terletak di bahagian kanan bawah pelan, berhampiran laluan MASUK.',
            2 => 'Kawasan Barzakh 2 terletak di bahagian kanan tengah pelan, di atas kawasan Barzakh 1.',
            3 => 'Kawasan Barzakh 3 terletak di bahagian tengah bawah pelan, berhampiran label Barzakh Janin.',
            4 => 'Kawasan Barzakh 4 terletak di bahagian tengah pelan, di bawah Barzakh 5.',
            5 => 'Kawasan Barzakh 5 terletak di bahagian tengah atas pelan, berhampiran pondok.',
            6 => 'Kawasan Barzakh 6 terletak di bahagian kanan atas pelan, berhampiran pondok.',
            7 => 'Kawasan Barzakh 7 terletak di bahagian kiri tengah pelan.',
            8 => 'Kawasan Barzakh 8 terletak di bahagian kiri bawah pelan.',
            default => 'Maklumat lokasi belum lengkap. Sila hubungi pihak pengurusan.',
        };
    };

    $initialResults = ($results ?? collect())->map(function ($r) use ($panduan) {
        $barzakhNo = null;
        if ($r->barzakh?->code && preg_match('/\bB\s*0*([0-9]+)\b/i', $r->barzakh->code, $m)) {
            $barzakhNo = (int) $m[1];
        }
        $lotLabel = $r->lot?->lot_no ?: $r->lot_no;
        return [
            'id' => $r->id,
            'nama' => $r->nama,
            'barzakh' => $r->barzakh ? [
                'id' => $r->barzakh->id,
                'name' => $r->barzakh->name,
                'code' => $r->barzakh->code,
                'no' => $barzakhNo,
            ] : null,
            'lot' => $lotLabel ? [
                'no' => $lotLabel,
                'status' => $r->lot?->status,
            ] : null,
            'tarikh_kebumi' => $r->tarikh_kebumi?->format('d/m/Y'),
            'jantina' => $r->jantina,
            'panduan' => $panduan($barzakhNo),
        ];
    })->values();
@endphp

@extends('layouts.public')

@section('title', 'Carian Lokasi Kubur')
@section('description', 'Semak lokasi kubur berdasarkan nama jenazah, Barzakh dan nombor lot.')

@section('content')
    <div class="rounded-2xl border border-brand-900/10 bg-gradient-to-br from-brand-900 to-brand-950 px-6 py-8 text-white shadow-card-md sm:px-10 sm:py-10">
        <div class="mx-auto max-w-3xl text-center">
            <h1 class="text-2xl font-bold tracking-tight sm:text-3xl">Carian Lokasi Kubur</h1>
            <p class="mt-3 text-sm leading-relaxed text-emerald-100/90 sm:text-base">
                Taip nama jenazah untuk mencari lokasi dengan cepat. Klik hasil carian untuk lihat panduan berdasarkan pelan kawasan.
            </p>
            <p class="mt-4 text-xs text-emerald-200/90">
                Rekod boleh dicari: {{ number_format($searchableCount ?? 0) }}
            </p>
        </div>
    </div>

    <div class="mt-8 space-y-6" x-data="publicGraveSearch()">
        <div class="rounded-xl border border-gray-200/80 bg-white p-5 shadow-card sm:p-6">
            <form
                method="GET"
                action="{{ route('public.grave-search.search') }}"
                class="grid grid-cols-1 gap-4 md:grid-cols-7"
                @submit.prevent="submitSearch(false)"
            >
                <div class="md:col-span-4">
                    <label for="q" class="text-sm font-semibold text-gray-900">Masukkan nama jenazah</label>
                    <input
                        id="q"
                        name="q"
                        type="search"
                        class="mt-2 block w-full rounded-xl border-gray-300 px-4 py-3 text-base shadow-sm focus:border-brand-500 focus:ring-brand-500"
                        placeholder="Contoh: Ahmad bin Ali…"
                        autocomplete="off"
                        x-model="q"
                        @input="onType"
                    />
                    <p class="mt-2 text-sm text-gray-600">
                        Taip sekurang-kurangnya <span class="font-semibold">3 huruf</span> untuk membuat carian.
                    </p>
                </div>

                <div class="md:col-span-2">
                    <label for="barzakh_id" class="text-sm font-semibold text-gray-900">Barzakh (pilihan)</label>
                    <select
                        id="barzakh_id"
                        name="barzakh_id"
                        class="mt-2 block w-full rounded-xl border-gray-300 px-4 py-3 shadow-sm focus:border-brand-500 focus:ring-brand-500"
                        x-model="barzakhId"
                        @change="submitSearch(true)"
                    >
                        <option value="">Semua Barzakh</option>
                        @foreach ($barzakhs as $b)
                            <option value="{{ $b->id }}">{{ $b->code }} — {{ $b->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="md:col-span-1 flex items-end">
                    <button
                        type="submit"
                        class="inline-flex w-full items-center justify-center rounded-xl bg-brand-800 px-4 py-3 text-base font-bold text-white shadow-sm hover:bg-brand-900 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 disabled:opacity-60"
                        :disabled="loading"
                    >
                        <span x-show="!loading">Cari</span>
                        <span x-show="loading" x-cloak class="inline-flex items-center gap-2">
                            <svg class="h-5 w-5 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                            Mencari…
                        </span>
                    </button>
                </div>
            </form>

            <noscript>
                <div class="mt-4 rounded-lg border border-amber-200/80 bg-amber-50 p-3 text-sm text-amber-950">
                    JavaScript dimatikan. Tekan butang <b>Cari</b> untuk carian biasa (page reload).
                </div>
            </noscript>
        </div>

        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
            {{-- Results --}}
            <section class="space-y-4">
                <div class="flex items-center justify-between">
                    <h2 class="text-lg font-semibold text-gray-900">Hasil carian</h2>
                    <div class="text-sm text-gray-500">
                        <span x-show="!loading">Jumlah: <span class="font-semibold text-gray-800" x-text="results.length"></span></span>
                    </div>
                </div>

                <template x-if="hint">
                    <div class="rounded-lg border border-sky-200/80 bg-sky-50 p-3 text-sm text-sky-950" x-text="hint"></div>
                </template>

                <div class="space-y-3">
                    <template x-for="r in results" :key="r.id">
                        <article
                            class="rounded-xl border bg-white p-4 shadow-card transition"
                            :class="selectedId === r.id ? 'border-brand-300 ring-2 ring-brand-500/20' : 'border-gray-200/80 hover:border-brand-200'"
                        >
                            <div class="flex items-start justify-between gap-4">
                                <div class="min-w-0">
                                    <div class="text-base font-extrabold tracking-wide text-gray-900" x-text="(r.nama || '').toUpperCase()"></div>
                                    <div class="mt-2 flex flex-wrap items-center gap-2 text-sm">
                                        <span class="inline-flex items-center rounded-full bg-brand-50 px-2.5 py-0.5 text-xs font-semibold text-brand-900 ring-1 ring-brand-900/10">
                                            <span x-text="r.barzakh?.no ? ('Barzakh ' + r.barzakh.no) : 'Barzakh —'"></span>
                                        </span>
                                        <span class="inline-flex items-center rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-semibold text-slate-800 ring-1 ring-slate-600/10">
                                            <span x-text="r.lot?.no ? ('Lot ' + r.lot.no) : 'Lot —'"></span>
                                        </span>
                                        <span class="text-xs text-gray-600" x-text="r.tarikh_kebumi ? ('Tarikh kebumi: ' + r.tarikh_kebumi) : 'Tarikh kebumi: —'"></span>
                                    </div>
                                </div>
                                <button
                                    type="button"
                                    class="shrink-0 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-semibold text-brand-800 shadow-sm hover:bg-brand-50"
                                    @click="selectResult(r)"
                                >
                                    Lihat Lokasi
                                </button>
                            </div>
                        </article>
                    </template>

                    <template x-if="hasSearched && !loading && results.length === 0">
                        <div class="rounded-xl border border-dashed border-gray-300 bg-slate-50/80 px-6 py-12 text-center">
                            <div class="text-base font-semibold text-gray-900">Rekod tidak dijumpai</div>
                            <div class="mt-2 text-sm text-gray-600">
                                Sila cuba ejaan nama yang lain atau hubungi pihak pengurusan.
                            </div>
                        </div>
                    </template>

                    <noscript>
                        @if (! empty($filters['q']) && \Illuminate\Support\Str::length((string) $filters['q']) >= 3)
                            @if (($results ?? collect())->isEmpty())
                                <div class="rounded-xl border border-dashed border-gray-300 bg-slate-50/80 px-6 py-12 text-center">
                                    <div class="text-base font-semibold text-gray-900">Rekod tidak dijumpai</div>
                                    <div class="mt-2 text-sm text-gray-600">
                                        Sila cuba ejaan nama yang lain atau hubungi pihak pengurusan.
                                    </div>
                                </div>
                            @else
                                @foreach ($results as $r)
                                    @php
                                        $barzakhNo = null;
                                        if ($r->barzakh?->code && preg_match('/\\bB\\s*0*([0-9]+)\\b/i', $r->barzakh->code, $m)) {
                                            $barzakhNo = (int) $m[1];
                                        }
                                        $lotLabel = $r->lot?->lot_no ?: $r->lot_no;
                                    @endphp
                                    <article class="rounded-xl border border-gray-200/80 bg-white p-4 shadow-card">
                                        <div class="text-base font-extrabold tracking-wide text-gray-900">{{ mb_strtoupper($r->nama) }}</div>
                                        <div class="mt-2 flex flex-wrap items-center gap-2 text-sm">
                                            <span class="inline-flex items-center rounded-full bg-brand-50 px-2.5 py-0.5 text-xs font-semibold text-brand-900 ring-1 ring-brand-900/10">
                                                {{ $barzakhNo ? 'Barzakh '.$barzakhNo : 'Barzakh —' }}
                                            </span>
                                            <span class="inline-flex items-center rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-semibold text-slate-800 ring-1 ring-slate-600/10">
                                                {{ $lotLabel ? 'Lot '.$lotLabel : 'Lot —' }}
                                            </span>
                                            <span class="text-xs text-gray-600">Tarikh kebumi: {{ $r->tarikh_kebumi?->format('d/m/Y') ?? '—' }}</span>
                                        </div>
                                        <a href="#map-section" class="mt-3 inline-flex items-center rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-semibold text-brand-800 shadow-sm hover:bg-brand-50">
                                            Lihat Lokasi (manual)
                                        </a>
                                    </article>
                                @endforeach
                            @endif
                        @else
                            <div class="rounded-xl border border-dashed border-gray-300 bg-slate-50/80 px-6 py-12 text-center">
                                <div class="text-base font-semibold text-gray-900">Mulakan carian</div>
                                <div class="mt-2 text-sm text-gray-600">
                                    Taip sekurang-kurangnya 3 huruf untuk membuat carian.
                                </div>
                            </div>
                        @endif
                    </noscript>
                </div>
            </section>

            {{-- Map + detail --}}
            <section class="space-y-4" id="map-section">
                <div class="rounded-xl border border-gray-200/80 bg-white p-5 shadow-card sm:p-6">
                    <div class="flex items-center justify-between gap-4">
                        <div>
                            <h2 class="text-lg font-semibold text-gray-900">Pelan Lokasi Kubur</h2>
                            <p class="mt-1 text-sm text-gray-600">Klik kawasan Barzakh untuk highlight dan lihat panduan.</p>
                        </div>
                        <template x-if="activeBarzakhNo">
                            <span class="inline-flex items-center rounded-full bg-amber-100 px-2.5 py-1 text-xs font-bold text-amber-950 ring-1 ring-amber-500/20">
                                Barzakh <span class="ml-1" x-text="activeBarzakhNo"></span>
                            </span>
                        </template>
                    </div>

                    @if (! $mapExists)
                        <div class="mt-4 rounded-lg border border-amber-200/80 bg-amber-50 p-3 text-sm text-amber-950">
                            Imej peta belum ditemui. Sila letakkan fail di <code class="rounded bg-amber-100 px-1.5 py-0.5 text-xs">public/images/peta-lokasi-kubur.jpeg</code>.
                        </div>
                    @endif

                    <div class="mt-4">
                        <div class="grave-map relative overflow-hidden rounded-xl ring-1 ring-gray-200">
                            <img
                                src="{{ asset('images/peta-lokasi-kubur.jpeg') }}"
                                alt="Peta lokasi kubur"
                                class="block w-full select-none"
                            />

                            {{-- overlays (percent coords) --}}
                            @php
                                $zones = [
                                    1 => ['top' => 71, 'left' => 72, 'w' => 18, 'h' => 16],
                                    2 => ['top' => 39, 'left' => 72, 'w' => 18, 'h' => 22],
                                    3 => ['top' => 72, 'left' => 47, 'w' => 18, 'h' => 15],
                                    4 => ['top' => 39, 'left' => 47, 'w' => 18, 'h' => 21],
                                    5 => ['top' => 18, 'left' => 47, 'w' => 18, 'h' => 22],
                                    6 => ['top' => 7,  'left' => 72, 'w' => 18, 'h' => 33],
                                    7 => ['top' => 21, 'left' => 23, 'w' => 18, 'h' => 39],
                                    8 => ['top' => 72, 'left' => 23, 'w' => 18, 'h' => 15],
                                ];
                            @endphp
                            @foreach ($zones as $no => $z)
                                <button
                                    type="button"
                                    class="grave-zone absolute rounded-lg"
                                    style="top: {{ $z['top'] }}%; left: {{ $z['left'] }}%; width: {{ $z['w'] }}%; height: {{ $z['h'] }}%;"
                                    :class="activeBarzakhNo === {{ $no }} ? 'grave-zone-active' : 'grave-zone-idle'"
                                    @click="selectBarzakh({{ $no }})"
                                    :title="'Barzakh {{ $no }}'"
                                    aria-label="Barzakh {{ $no }}"
                                >
                                    <span class="sr-only">Barzakh {{ $no }}</span>
                                </button>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="rounded-xl border border-gray-200/80 bg-white p-5 shadow-card sm:p-6">
                    <h2 class="text-lg font-semibold text-gray-900">Maklumat Lokasi</h2>
                    <template x-if="selected">
                        <div class="mt-4 space-y-4">
                            <div class="rounded-lg bg-slate-50 p-4 ring-1 ring-gray-200">
                                <div class="text-xs font-semibold uppercase tracking-wide text-gray-500">Lokasi Kubur Dijumpai</div>
                                <div class="mt-2 text-lg font-extrabold text-gray-900" x-text="selected.nama"></div>
                                <div class="mt-3 flex flex-wrap items-center gap-2">
                                    <span class="inline-flex items-center rounded-full bg-brand-50 px-2.5 py-0.5 text-xs font-semibold text-brand-900 ring-1 ring-brand-900/10" x-text="selected.barzakh?.no ? ('Barzakh ' + selected.barzakh.no) : 'Barzakh —'"></span>
                                    <span class="inline-flex items-center rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-semibold text-slate-800 ring-1 ring-slate-600/10" x-text="selected.lot?.no ? ('Lot ' + selected.lot.no) : 'Lot —'"></span>
                                    <span class="text-xs text-gray-600" x-text="selected.tarikh_kebumi ? ('Tarikh kebumi: ' + selected.tarikh_kebumi) : 'Tarikh kebumi: —'"></span>
                                </div>
                                <div class="mt-3 text-sm text-gray-700">
                                    <span class="font-semibold text-gray-900">Panduan:</span>
                                    <span x-text="selected.panduan"></span>
                                </div>
                            </div>

                            <div class="flex flex-wrap gap-2">
                                <button type="button" class="rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50" @click="printLocation()">Cetak Lokasi</button>
                                <button type="button" class="rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50" @click="copyLocation()">Salin Maklumat</button>
                            </div>
                        </div>
                    </template>
                    <template x-if="!selected">
                        <p class="mt-3 text-sm text-gray-600">
                            Pilih salah satu hasil carian untuk memaparkan maklumat lokasi dan panduan ringkas.
                        </p>
                    </template>
                </div>
            </section>
        </div>
    </div>

    <script>
        function publicGraveSearch() {
            return {
                q: @js($filters['q'] ?? ''),
                barzakhId: @js($filters['barzakh_id'] ?? ''),
                loading: false,
                results: @js($initialResults),
                hint: @js((! empty($filters['q']) && \Illuminate\Support\Str::length((string) $filters['q']) >= 3) ? '' : 'Taip sekurang-kurangnya 3 huruf untuk mula carian.'),
                hasSearched: @js((! empty($filters['q']) && \Illuminate\Support\Str::length((string) $filters['q']) >= 3)),
                selected: null,
                selectedId: null,
                activeBarzakhNo: null,
                debounceTimer: null,

                onType() {
                    clearTimeout(this.debounceTimer);
                    this.debounceTimer = setTimeout(() => this.submitSearch(true), 400);
                },

                async submitSearch(isAuto) {
                    const q = (this.q || '').trim();
                    if (q.length < 3) {
                        this.results = [];
                        this.selected = null;
                        this.selectedId = null;
                        this.activeBarzakhNo = null;
                        this.hint = 'Taip sekurang-kurangnya 3 huruf untuk mula carian.';
                        return;
                    }

                    this.loading = true;
                    this.hasSearched = true;
                    this.hint = isAuto ? 'Mencari…' : '';
                    try {
                        const url = new URL(@js(route('public.grave-search.search')), window.location.origin);
                        url.searchParams.set('q', q);
                        if (this.barzakhId) url.searchParams.set('barzakh_id', this.barzakhId);

                        const res = await fetch(url.toString(), {
                            headers: { 'Accept': 'application/json' },
                            credentials: 'same-origin',
                        });
                        const json = await res.json();

                        this.results = (json.data || []);
                        this.hint = json.meta?.message || (this.results.length ? '' : 'Tiada rekod dijumpai.');
                    } catch (e) {
                        this.hint = 'Carian gagal. Sila cuba lagi.';
                        this.results = [];
                    } finally {
                        this.loading = false;
                    }
                },

                selectResult(r) {
                    this.selected = r;
                    this.selectedId = r.id;
                    this.activeBarzakhNo = r.barzakh?.no || null;

                    // mobile: scroll to map
                    const el = document.getElementById('map-section');
                    if (el && window.matchMedia('(max-width: 1023px)').matches) {
                        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
                    }
                },

                selectBarzakh(no) {
                    this.activeBarzakhNo = no;
                    if (!this.selected) {
                        this.hint = `Anda memilih Barzakh ${no}.`;
                    }
                },

                printLocation() {
                    if (!this.selected) return;
                    const w = window.open('', '_blank');
                    if (!w) return;
                    const s = this.selected;
                    const barzakh = s.barzakh?.no ? `Barzakh ${s.barzakh.no}` : 'Barzakh —';
                    const lot = s.lot?.no ? `Lot ${s.lot.no}` : 'Lot —';
                    const tarikh = s.tarikh_kebumi ? s.tarikh_kebumi : '—';
                    const text = `
                        <html><head><title>Cetak Lokasi</title>
                        <meta charset="utf-8">
                        <style>
                            body { font-family: Arial, sans-serif; padding: 24px; }
                            h1 { margin: 0 0 8px; }
                            .muted { color: #555; font-size: 12px; }
                            .card { border: 1px solid #ddd; border-radius: 10px; padding: 16px; }
                        </style></head><body>
                            <h1>Lokasi Kubur</h1>
                            <div class="muted">Tanah Perkuburan Islam Raudhatul Jannah, Bandar Baru Salak Tinggi</div>
                            <div class="card" style="margin-top:16px;">
                                <div><b>Nama:</b> ${escapeHtml(s.nama || '')}</div>
                                <div><b>Lokasi:</b> ${escapeHtml(barzakh)}, ${escapeHtml(lot)}</div>
                                <div><b>Tarikh kebumi:</b> ${escapeHtml(tarikh)}</div>
                                <div style="margin-top:10px;"><b>Panduan:</b> ${escapeHtml(s.panduan || '')}</div>
                            </div>
                        </body></html>
                    `;
                    w.document.open();
                    w.document.write(text);
                    w.document.close();
                    w.focus();
                    w.print();
                },

                async copyLocation() {
                    if (!this.selected) return;
                    const s = this.selected;
                    const barzakh = s.barzakh?.no ? `Barzakh ${s.barzakh.no}` : 'Barzakh —';
                    const lot = s.lot?.no ? `Lot ${s.lot.no}` : 'Lot —';
                    const text = `Lokasi kubur ${s.nama}: ${barzakh}, ${lot}. Tanah Perkuburan Islam Raudhatul Jannah, Bandar Baru Salak Tinggi.`;
                    try {
                        await navigator.clipboard.writeText(text);
                        this.hint = 'Maklumat lokasi telah disalin.';
                    } catch (e) {
                        this.hint = 'Gagal salin. Sila salin secara manual.';
                    }
                },
            };
        }

        function escapeHtml(str) {
            return String(str)
                .replaceAll('&', '&amp;')
                .replaceAll('<', '&lt;')
                .replaceAll('>', '&gt;')
                .replaceAll('"', '&quot;')
                .replaceAll("'", '&#039;');
        }
    </script>
@endsection