{{--
    Isi popup rincian satu tanggal. Dimuat lewat fetch dari halaman Kunjungan,
    jadi berkas ini hanya potongan — tanpa layout.

    Memuat data pribadi (nama, no HP, alamat, posisi), jadi tidak pernah
    dirender di halaman utama; hanya saat admin benar-benar membukanya.
--}}
<div class="px-6 py-4 border-b border-line flex items-start justify-between gap-4">
    <div>
        <div class="font-extrabold">{{ $title }}</div>
        <div class="text-xs text-sub mt-0.5">
            {{ $subtitle }} · {{ number_format($logs->count()) }} akses tercatat
            @if ($points->isNotEmpty())
                · {{ number_format($points->count()) }} dengan titik lokasi
            @endif
        </div>
    </div>
    <button type="button" data-role="close"
            class="shrink-0 w-8 h-8 rounded-lg text-sub hover:bg-canvas text-lg leading-none" aria-label="Tutup">×</button>
</div>

<div class="overflow-y-auto" style="max-height: calc(85vh - 140px)">
    @if ($pruned)
        <div class="m-5 bg-accent-soft border border-accent/20 rounded-2xl px-5 py-4 text-sm">
            Rentang ini lebih tua dari masa simpan riwayat ({{ $logDays }} hari), jadi rinciannya sudah dihapus.
            Riwayat tersedia sejak {{ $keptFrom->translatedFormat('d M Y') }}.
            Angka di grafik tetap utuh — yang dihapus hanya rincian per aksesnya.
        </div>
    @elseif ($logs->isEmpty())
        <div class="px-6 py-10 text-center text-sub text-sm">Tidak ada akses tercatat di sini.</div>
    @else
        {{-- Peta titik akses. Ubin diambil dari openstreetmap.org, jadi peramban
             admin memang menghubungi pihak ketiga saat popup ini dibuka —
             koordinatnya sendiri tidak dikirim, tapi area yang dilihat bisa
             tersimpul dari ubin yang diminta.

             Kalau tidak ada satu pun titik, tempatnya tetap ditampilkan berisi
             alasannya. Sebelumnya peta hanya dihilangkan, dan itu terbaca
             seperti petanya yang rusak. --}}
        @if ($points->isNotEmpty())
            <div class="m-5 rounded-2xl overflow-hidden border border-line">
                <div id="day-map" style="height: 280px" class="bg-canvas"></div>
            </div>
        @else
            <div class="m-5 rounded-2xl border border-line bg-canvas px-5 py-6 text-sm text-sub">
                <div class="font-semibold text-ink">Belum ada titik lokasi untuk digambar di peta.</div>
                <div class="mt-1">
                    Lokasi hanya ikut tercatat kalau pengguna sudah mengizinkan lokasi di aplikasi.
                    Kunjungan tanpa izin tetap tercatat — hanya tanpa titik, dan tertulis
                    “tanpa lokasi” di tabel bawah.
                </div>
            </div>
        @endif

        @if ($truncated)
            <div class="mx-5 mb-3 text-xs text-sub">
                Menampilkan 500 akses pertama pada tanggal ini.
            </div>
        @endif

        <table class="w-full text-sm">
            <thead class="text-xs text-sub bg-canvas sticky top-0">
                <tr>
                    <th class="text-left font-semibold px-5 py-2">Waktu</th>
                    <th class="text-left font-semibold px-3 py-2">Halaman</th>
                    <th class="text-left font-semibold px-3 py-2">Siapa</th>
                    <th class="text-left font-semibold px-5 py-2">Posisi</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($logs as $log)
                    @php($user = $log->user)
                    @php($address = $user?->addresses->first())
                    <tr class="border-t border-line align-top">
                        <td class="px-5 py-3 whitespace-nowrap font-semibold">{{ $log->occurred_at->format('H:i') }}</td>
                        <td class="px-3 py-3">{{ $log->page }}</td>
                        <td class="px-3 py-3">
                            @if ($user)
                                <div class="font-semibold">{{ $user->name }}</div>
                                <div class="text-xs text-sub">
                                    {{ $log->role === 'mitra' ? 'Mitra' : 'Pengguna' }} · {{ $user->phone }}
                                </div>
                                @if ($address)
                                    <div class="text-xs text-sub mt-0.5">{{ $address->detail }}</div>
                                @endif
                            @else
                                {{-- Tamu memang tidak punya identitas; hanya id
                                     perangkat acak. Ditulis apa adanya. --}}
                                <div class="text-sub">Tamu · belum login</div>
                                @if ($log->device_id)
                                    <div class="text-xs text-sub/70 font-mono">{{ Str::limit($log->device_id, 14) }}</div>
                                @endif
                            @endif
                        </td>
                        <td class="px-5 py-3 whitespace-nowrap">
                            @if ($log->hasPoint())
                                <a href="https://www.google.com/maps?q={{ $log->lat }},{{ $log->lng }}"
                                   target="_blank" rel="noopener noreferrer"
                                   class="text-brand font-semibold hover:underline">
                                    {{ number_format($log->lat, 5) }}, {{ number_format($log->lng, 5) }}
                                </a>
                            @else
                                <span class="text-line">tanpa lokasi</span>
                            @endif
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    @endif
</div>

@if ($points->isNotEmpty())
    <script>
        (() => {
            const points = {!! $points->map(fn ($p) => [
                'lat' => $p->lat,
                'lng' => $p->lng,
                'time' => $p->occurred_at->format('H:i'),
                'page' => $p->page,
                'who' => $p->user?->name ?? 'Tamu',
            ])->toJson() !!};

            // Leaflet dimuat sekali saja, dan hanya saat popup yang memang
            // butuh peta dibuka — halaman Kunjungan sendiri tidak menariknya.
            const ready = window.__leafletReady ??= new Promise((resolve, reject) => {
                const css = document.createElement('link');
                css.rel = 'stylesheet';
                css.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
                document.head.appendChild(css);

                const js = document.createElement('script');
                js.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
                js.onload = resolve;
                js.onerror = reject;
                document.head.appendChild(js);
            });

            ready.then(() => {
                const el = document.getElementById('day-map');
                if (!el) return;

                const map = L.map(el).setView([points[0].lat, points[0].lng], 12);
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    maxZoom: 18,
                    attribution: '© OpenStreetMap',
                }).addTo(map);

                const markers = points.map(p =>
                    L.circleMarker([p.lat, p.lng], {
                        radius: 6, color: '#fff', weight: 2, fillColor: '#2563EB', fillOpacity: 0.9,
                    }).bindPopup(`<b>${p.who}</b><br>${p.page} · ${p.time}`).addTo(map),
                );

                // Semua titik dipaksa masuk layar; satu titik saja tidak punya
                // "batas", jadi zoom-nya ditetapkan.
                if (markers.length > 1) {
                    map.fitBounds(L.featureGroup(markers).getBounds().pad(0.2));
                }
            }).catch(() => {
                const el = document.getElementById('day-map');
                // Peta gagal dimuat (offline / CDN diblokir) bukan alasan untuk
                // menyembunyikan datanya — koordinatnya tetap ada di tabel.
                if (el) el.outerHTML = '<div class="px-5 py-6 text-sm text-sub">Peta tidak bisa dimuat. Koordinatnya tetap ada di tabel di bawah.</div>';
            });
        })();
    </script>
@endif