@extends('layouts.admin')

@section('title', 'Pengaturan Lokasi Absensi')

@section('content')
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />

<style>
    .leaflet-pane { z-index: 10 !important; }
    .leaflet-top, .leaflet-bottom { z-index: 11 !important; }
    .custom-pin-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Lokasi Geofencing GPS</h1>
            <p class="text-xs text-slate-500 mt-1">Pengaturan titik koordinat kantor dan radius toleransi jarak absensi mobile dengan peta interaktif</p>
        </div>
        <button onclick="openTambahModal()" class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-primary-600 hover:bg-primary-700 text-white text-xs font-bold shadow-sm shadow-primary-500/30 transition-all">
            <i data-lucide="plus" class="w-4 h-4"></i>
            <span>Tambah Lokasi GPS</span>
        </button>
    </div>

    <!-- Grid Cards Lokasi -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
        @forelse($lokasiList as $loc)
        <div class="p-5 rounded-2xl bg-white border border-slate-200/80 shadow-sm flex flex-col justify-between space-y-4 hover:shadow-md transition-shadow">
            <div>
                <div class="flex items-center justify-between">
                    <span class="px-2 py-0.5 rounded text-[10px] font-mono font-bold bg-primary-50 text-primary-700 border border-primary-100">
                        {{ $loc->kode_lokasi }}
                    </span>
                    <span class="inline-flex items-center gap-1 text-[11px] font-bold text-emerald-600">
                        <i data-lucide="check-circle-2" class="w-3.5 h-3.5"></i> Aktif
                    </span>
                </div>
                <h3 class="font-bold text-slate-900 text-base mt-2">{{ $loc->nama_lokasi }}</h3>
                <p class="text-xs text-slate-500 mt-1 line-clamp-2">{{ $loc->alamat }}</p>
            </div>

            <div class="p-3 rounded-xl bg-slate-50 space-y-1.5 text-xs">
                <div class="flex items-center justify-between">
                    <span class="text-slate-400">Titik Koordinat:</span>
                    <span class="font-mono font-semibold text-slate-700">{{ number_format($loc->latitude, 6) }}, {{ number_format($loc->longitude, 6) }}</span>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-slate-400">Radius Toleransi:</span>
                    <span class="font-bold text-primary-700">{{ $loc->radius_meter }} Meter</span>
                </div>
            </div>

            <div class="pt-3 border-t border-slate-100 flex items-center justify-between text-xs text-slate-500">
                <span class="text-[11px] font-medium">{{ $loc->pegawai_count }} Pegawai Ditempatkan</span>
                <div class="flex items-center gap-1">
                    <a href="https://maps.google.com/?q={{ $loc->latitude }},{{ $loc->longitude }}" target="_blank" class="p-1.5 rounded-lg text-slate-400 hover:text-primary-600 hover:bg-primary-50 transition-colors" title="Buka Google Maps">
                        <i data-lucide="map" class="w-4 h-4"></i>
                    </a>
                    <button type="button" 
                        onclick="openEditModal({{ json_encode($loc) }})" 
                        class="p-1.5 rounded-lg text-slate-400 hover:text-amber-600 hover:bg-amber-50 transition-colors" 
                        title="Edit Lokasi">
                        <i data-lucide="edit-3" class="w-4 h-4"></i>
                    </button>
                    <form action="{{ route('admin.pengaturan-absensi.lokasi.destroy', $loc->id) }}" method="POST" onsubmit="return confirm('Hapus lokasi kantor ini?');" class="inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="p-1.5 rounded-lg text-slate-400 hover:text-rose-600 hover:bg-rose-50 transition-colors" title="Hapus">
                            <i data-lucide="trash-2" class="w-4 h-4"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
        @empty
        <div class="col-span-3 py-12 text-center text-slate-400">Belum ada lokasi kantor terdaftar</div>
        @endforelse
    </div>
</div>

<!-- Modal Tambah Lokasi dengan PETA INTERAKTIF -->
<div id="modalTambahLokasi" class="fixed inset-0 z-50 bg-slate-900/50 backdrop-blur-sm hidden flex items-center justify-center p-3 sm:p-4">
    <div class="bg-white rounded-3xl max-w-4xl w-full p-5 sm:p-6 shadow-2xl space-y-4 max-h-[94vh] overflow-y-auto border border-slate-100 animate-scaleUp">
        <div class="flex items-center justify-between pb-3 border-b border-slate-100">
            <div class="flex items-center gap-2.5">
                <div class="w-9 h-9 rounded-xl bg-primary-100 text-primary-600 flex items-center justify-center font-bold">
                    <i data-lucide="map-pin" class="w-5 h-5"></i>
                </div>
                <div>
                    <h3 class="font-bold text-slate-900 text-sm sm:text-base">Tambah Lokasi Kantor GPS</h3>
                    <p class="text-xs text-slate-400">Tentukan titik kantor & radius absensi langsung di peta</p>
                </div>
            </div>
            <button onclick="closeTambahModal()" class="p-1.5 rounded-xl text-slate-400 hover:text-slate-600 hover:bg-slate-100 transition-colors">
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>
        </div>

        <form action="{{ route('admin.pengaturan-absensi.lokasi.store') }}" method="POST" class="space-y-4 text-xs">
            @csrf

            <div class="grid grid-cols-1 md:grid-cols-12 gap-5">
                <!-- Kolom Kiri: Form Input Data -->
                <div class="md:col-span-5 space-y-3.5 flex flex-col justify-between">
                    <div class="space-y-3">
                        <div>
                            <label class="block font-bold text-slate-700 mb-1">Kode Lokasi *</label>
                            <input type="text" name="kode_lokasi" placeholder="Contoh: LOC-HQ / LOC-SBY" required class="w-full px-3 py-2 rounded-xl border border-slate-200 focus:ring-2 focus:ring-primary-500 outline-none">
                        </div>
                        <div>
                            <label class="block font-bold text-slate-700 mb-1">Nama Lokasi Kantor *</label>
                            <input type="text" name="nama_lokasi" id="tambah_nama_lokasi" placeholder="Contoh: Kantor Pusat Menara Sudirman" required class="w-full px-3 py-2 rounded-xl border border-slate-200 focus:ring-2 focus:ring-primary-500 outline-none">
                        </div>
                        <div>
                            <label class="block font-bold text-slate-700 mb-1">Alamat Lengkap *</label>
                            <textarea name="alamat" id="tambah_alamat" rows="2" placeholder="Alamat jalan, gedung, lantai..." required class="w-full px-3 py-2 rounded-xl border border-slate-200 focus:ring-2 focus:ring-primary-500 outline-none"></textarea>
                        </div>
                        <div class="grid grid-cols-2 gap-2.5">
                            <div>
                                <label class="block font-bold text-slate-700 mb-1">Latitude *</label>
                                <input type="number" step="any" name="latitude" id="tambah_latitude" value="-6.225588" required class="w-full px-3 py-2 rounded-xl border border-slate-200 font-mono text-xs focus:ring-2 focus:ring-primary-500 outline-none">
                            </div>
                            <div>
                                <label class="block font-bold text-slate-700 mb-1">Longitude *</label>
                                <input type="number" step="any" name="longitude" id="tambah_longitude" value="106.809312" required class="w-full px-3 py-2 rounded-xl border border-slate-200 font-mono text-xs focus:ring-2 focus:ring-primary-500 outline-none">
                            </div>
                        </div>
                        <div>
                            <label class="block font-bold text-slate-700 mb-1">Radius Toleransi Absensi (Meter) *</label>
                            <div class="relative">
                                <input type="number" name="radius_meter" id="tambah_radius_meter" value="100" min="10" max="5000" required class="w-full px-3 py-2 rounded-xl border border-slate-200 font-bold text-primary-700 focus:ring-2 focus:ring-primary-500 outline-none">
                                <span class="absolute right-3 top-2 text-slate-400 font-semibold">Meter</span>
                            </div>
                            <span class="text-[10px] text-slate-400 mt-1 block">Jarak maksimal ponsel pegawai dari titik GPS agar absensi valid.</span>
                        </div>
                    </div>

                    <div class="pt-2 flex justify-end gap-2 border-t border-slate-100">
                        <button type="button" onclick="closeTambahModal()" class="px-4 py-2.5 rounded-xl border border-slate-200 text-slate-600 font-semibold hover:bg-slate-50">Batal</button>
                        <button type="submit" class="px-5 py-2.5 rounded-xl bg-primary-600 text-white font-bold hover:bg-primary-700 shadow-sm shadow-primary-500/20">Simpan Lokasi</button>
                    </div>
                </div>

                <!-- Kolom Kanan: PETA INTERAKTIF LIVE -->
                <div class="md:col-span-7 flex flex-col space-y-2">
                    <div class="flex items-center justify-between gap-2">
                        <!-- Search Box Tempat / Alamat -->
                        <div class="flex-1 relative flex items-center">
                            <input type="text" id="tambah_search_box" placeholder="Cari nama jalan, gedung, atau kota..." class="w-full pl-8 pr-16 py-1.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 outline-none">
                            <i data-lucide="search" class="w-3.5 h-3.5 text-slate-400 absolute left-2.5 pointer-events-none"></i>
                            <button type="button" onclick="searchLocationTambah()" class="absolute right-1 px-2.5 py-1 bg-slate-800 hover:bg-slate-900 text-white rounded-lg text-[10px] font-semibold">
                                Cari
                            </button>
                        </div>
                        <!-- Tombol GPS Saya -->
                        <button type="button" onclick="getCurrentLocationTambah()" class="px-2.5 py-1.5 rounded-xl bg-orange-50 border border-orange-200 text-primary-700 hover:bg-orange-100 transition-colors flex items-center gap-1.5 font-bold shrink-0 text-xs" title="Gunakan titik GPS saat ini">
                            <i data-lucide="crosshair" class="w-3.5 h-3.5 text-primary-600"></i>
                            <span class="hidden sm:inline">GPS Saya</span>
                        </button>
                    </div>

                    <!-- Peta Leaflet Container -->
                    <div id="mapTambah" class="w-full h-72 sm:h-80 md:h-[350px] rounded-2xl border border-slate-200/90 shadow-inner relative z-0 overflow-hidden bg-slate-100"></div>

                    <!-- Petunjuk & Visualisasi -->
                    <div class="p-2.5 rounded-xl bg-slate-50 border border-slate-100 flex items-center justify-between text-[11px] text-slate-500">
                        <span class="flex items-center gap-1">
                            <span class="w-2.5 h-2.5 rounded-full bg-primary-500 inline-block"></span>
                            Klik di peta atau geser pin untuk menentukan titik kantor.
                        </span>
                        <span class="font-mono text-slate-700 font-semibold" id="tambah_coord_preview">
                            -6.225588, 106.809312
                        </span>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Modal Edit Lokasi dengan PETA INTERAKTIF -->
<div id="modalEditLokasi" class="fixed inset-0 z-50 bg-slate-900/50 backdrop-blur-sm hidden flex items-center justify-center p-3 sm:p-4">
    <div class="bg-white rounded-3xl max-w-4xl w-full p-5 sm:p-6 shadow-2xl space-y-4 max-h-[94vh] overflow-y-auto border border-slate-100 animate-scaleUp">
        <div class="flex items-center justify-between pb-3 border-b border-slate-100">
            <div class="flex items-center gap-2.5">
                <div class="w-9 h-9 rounded-xl bg-amber-100 text-amber-600 flex items-center justify-center font-bold">
                    <i data-lucide="edit-3" class="w-5 h-5"></i>
                </div>
                <div>
                    <h3 class="font-bold text-slate-900 text-sm sm:text-base">Edit Data Lokasi Kantor GPS</h3>
                    <p class="text-xs text-slate-400">Perbarui koordinat & radius toleransi geofencing</p>
                </div>
            </div>
            <button onclick="closeEditModal()" class="p-1.5 rounded-xl text-slate-400 hover:text-slate-600 hover:bg-slate-100 transition-colors">
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>
        </div>

        <form id="formEditLokasi" action="" method="POST" class="space-y-4 text-xs">
            @csrf
            @method('PUT')

            <div class="grid grid-cols-1 md:grid-cols-12 gap-5">
                <!-- Kolom Kiri: Form Input -->
                <div class="md:col-span-5 space-y-3.5 flex flex-col justify-between">
                    <div class="space-y-3">
                        <div>
                            <label class="block font-bold text-slate-700 mb-1">Kode Lokasi *</label>
                            <input type="text" id="edit_kode_lokasi" name="kode_lokasi" required class="w-full px-3 py-2 rounded-xl border border-slate-200 focus:ring-2 focus:ring-primary-500 outline-none">
                        </div>
                        <div>
                            <label class="block font-bold text-slate-700 mb-1">Nama Lokasi Kantor *</label>
                            <input type="text" id="edit_nama_lokasi" name="nama_lokasi" required class="w-full px-3 py-2 rounded-xl border border-slate-200 focus:ring-2 focus:ring-primary-500 outline-none">
                        </div>
                        <div>
                            <label class="block font-bold text-slate-700 mb-1">Alamat Lengkap *</label>
                            <textarea id="edit_alamat" name="alamat" rows="2" required class="w-full px-3 py-2 rounded-xl border border-slate-200 focus:ring-2 focus:ring-primary-500 outline-none"></textarea>
                        </div>
                        <div class="grid grid-cols-2 gap-2.5">
                            <div>
                                <label class="block font-bold text-slate-700 mb-1">Latitude *</label>
                                <input type="number" step="any" id="edit_latitude" name="latitude" required class="w-full px-3 py-2 rounded-xl border border-slate-200 font-mono text-xs focus:ring-2 focus:ring-primary-500 outline-none">
                            </div>
                            <div>
                                <label class="block font-bold text-slate-700 mb-1">Longitude *</label>
                                <input type="number" step="any" id="edit_longitude" name="longitude" required class="w-full px-3 py-2 rounded-xl border border-slate-200 font-mono text-xs focus:ring-2 focus:ring-primary-500 outline-none">
                            </div>
                        </div>
                        <div>
                            <label class="block font-bold text-slate-700 mb-1">Radius Toleransi (Meter) *</label>
                            <div class="relative">
                                <input type="number" id="edit_radius_meter" name="radius_meter" min="10" max="5000" required class="w-full px-3 py-2 rounded-xl border border-slate-200 font-bold text-primary-700 focus:ring-2 focus:ring-primary-500 outline-none">
                                <span class="absolute right-3 top-2 text-slate-400 font-semibold">Meter</span>
                            </div>
                        </div>
                    </div>

                    <div class="pt-2 flex justify-end gap-2 border-t border-slate-100">
                        <button type="button" onclick="closeEditModal()" class="px-4 py-2.5 rounded-xl border border-slate-200 text-slate-600 font-semibold hover:bg-slate-50">Batal</button>
                        <button type="submit" class="px-5 py-2.5 rounded-xl bg-primary-600 text-white font-bold hover:bg-primary-700 shadow-sm shadow-primary-500/20">Simpan Perubahan</button>
                    </div>
                </div>

                <!-- Kolom Kanan: PETA INTERAKTIF EDIT -->
                <div class="md:col-span-7 flex flex-col space-y-2">
                    <div class="flex items-center justify-between gap-2">
                        <div class="flex-1 relative flex items-center">
                            <input type="text" id="edit_search_box" placeholder="Cari lokasi kantor..." class="w-full pl-8 pr-16 py-1.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 outline-none">
                            <i data-lucide="search" class="w-3.5 h-3.5 text-slate-400 absolute left-2.5 pointer-events-none"></i>
                            <button type="button" onclick="searchLocationEdit()" class="absolute right-1 px-2.5 py-1 bg-slate-800 hover:bg-slate-900 text-white rounded-lg text-[10px] font-semibold">
                                Cari
                            </button>
                        </div>
                        <button type="button" onclick="getCurrentLocationEdit()" class="px-2.5 py-1.5 rounded-xl bg-orange-50 border border-orange-200 text-primary-700 hover:bg-orange-100 transition-colors flex items-center gap-1.5 font-bold shrink-0 text-xs">
                            <i data-lucide="crosshair" class="w-3.5 h-3.5 text-primary-600"></i>
                            <span class="hidden sm:inline">GPS Saya</span>
                        </button>
                    </div>

                    <div id="mapEdit" class="w-full h-72 sm:h-80 md:h-[350px] rounded-2xl border border-slate-200/90 shadow-inner relative z-0 overflow-hidden bg-slate-100"></div>

                    <div class="p-2.5 rounded-xl bg-slate-50 border border-slate-100 flex items-center justify-between text-[11px] text-slate-500">
                        <span class="flex items-center gap-1">
                            <span class="w-2.5 h-2.5 rounded-full bg-amber-500 inline-block"></span>
                            Klik di peta atau geser pin untuk memindahkan posisi.
                        </span>
                        <span class="font-mono text-slate-700 font-semibold" id="edit_coord_preview">
                            -
                        </span>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<!-- Leaflet JS CDN -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

<script>
    // Objek kustom Pin Marker Elegan
    const customPinIcon = L.divIcon({
        className: 'custom-pin-wrapper',
        html: `
            <div style="transform: translate(-50%, -100%); display: flex; flex-col; align-items: center; justify-content: center;">
                <div style="background: linear-gradient(135deg, #EA580C, #F97316); width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(234,88,12,0.45); border: 2px solid white;">
                    <div style="transform: rotate(45deg); color: white; display: flex; align-items: center; justify-content: center;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
                    </div>
                </div>
            </div>
        `,
        iconSize: [0, 0],
        iconAnchor: [0, 0]
    });

    let mapTambahInstance = null;
    let markerTambah = null;
    let circleTambah = null;

    let mapEditInstance = null;
    let markerEdit = null;
    let circleEdit = null;

    // Inisialisasi Peta Tambah Lokasi
    function initMapTambah(lat = -6.225588, lng = 106.809312, radius = 100) {
        if (!mapTambahInstance) {
            mapTambahInstance = L.map('mapTambah', {
                center: [lat, lng],
                zoom: 16,
                zoomControl: true
            });

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; OpenStreetMap contributors'
            }).addTo(mapTambahInstance);

            markerTambah = L.marker([lat, lng], {
                draggable: true,
                icon: customPinIcon
            }).addTo(mapTambahInstance);

            circleTambah = L.circle([lat, lng], {
                color: '#EA580C',
                fillColor: '#F97316',
                fillOpacity: 0.2,
                radius: radius,
                weight: 2
            }).addTo(mapTambahInstance);

            // Event saat marker di-drag
            markerTambah.on('dragend', function (e) {
                const pos = markerTambah.getLatLng();
                updateTambahCoordinates(pos.lat, pos.lng);
            });

            // Event saat peta diklik
            mapTambahInstance.on('click', function (e) {
                updateTambahCoordinates(e.latlng.lat, e.latlng.lng);
            });

            // Event saat radius diganti
            document.getElementById('tambah_radius_meter').addEventListener('input', function () {
                const r = parseInt(this.value) || 100;
                if (circleTambah) circleTambah.setRadius(r);
            });

            // Event saat koordinat diinput manual
            document.getElementById('tambah_latitude').addEventListener('change', syncManualCoordsTambah);
            document.getElementById('tambah_longitude').addEventListener('change', syncManualCoordsTambah);
        } else {
            mapTambahInstance.setView([lat, lng], 16);
            markerTambah.setLatLng([lat, lng]);
            circleTambah.setLatLng([lat, lng]);
            circleTambah.setRadius(radius);
        }

        setTimeout(() => {
            mapTambahInstance.invalidateSize();
        }, 200);
    }

    function updateTambahCoordinates(lat, lng) {
        const fixedLat = parseFloat(lat).toFixed(6);
        const fixedLng = parseFloat(lng).toFixed(6);

        document.getElementById('tambah_latitude').value = fixedLat;
        document.getElementById('tambah_longitude').value = fixedLng;
        document.getElementById('tambah_coord_preview').innerText = `${fixedLat}, ${fixedLng}`;

        if (markerTambah) markerTambah.setLatLng([lat, lng]);
        if (circleTambah) circleTambah.setLatLng([lat, lng]);
    }

    function syncManualCoordsTambah() {
        const lat = parseFloat(document.getElementById('tambah_latitude').value);
        const lng = parseFloat(document.getElementById('tambah_longitude').value);
        if (!isNaN(lat) && !isNaN(lng)) {
            updateTambahCoordinates(lat, lng);
            if (mapTambahInstance) mapTambahInstance.panTo([lat, lng]);
        }
    }

    function openTambahModal() {
        document.getElementById('modalTambahLokasi').classList.remove('hidden');
        const lat = parseFloat(document.getElementById('tambah_latitude').value) || -6.225588;
        const lng = parseFloat(document.getElementById('tambah_longitude').value) || 106.809312;
        const radius = parseInt(document.getElementById('tambah_radius_meter').value) || 100;
        initMapTambah(lat, lng, radius);
        if (window.lucide) { lucide.createIcons(); }
    }

    function closeTambahModal() {
        document.getElementById('modalTambahLokasi').classList.add('hidden');
    }

    // Deteksi GPS Browser Pengguna
    function getCurrentLocationTambah() {
        if (!navigator.geolocation) {
            alert('Browser Anda tidak mendukung deteksi lokasi Geolocation.');
            return;
        }

        navigator.geolocation.getCurrentPosition(
            (pos) => {
                const lat = pos.coords.latitude;
                const lng = pos.coords.longitude;
                updateTambahCoordinates(lat, lng);
                if (mapTambahInstance) {
                    mapTambahInstance.flyTo([lat, lng], 17);
                }
            },
            (err) => {
                alert('Gagal mengambil titik GPS. Pastikan izin lokasi browser Anda telah diaktifkan.');
            },
            { enableHighAccuracy: true }
        );
    }

    // Pencarian Tempat / Geocoding via OSM Nominatim
    function searchLocationTambah() {
        const query = document.getElementById('tambah_search_box').value.trim();
        if (!query) return;

        fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}`)
            .then(res => res.json())
            .then(data => {
                if (data && data.length > 0) {
                    const first = data[0];
                    const lat = parseFloat(first.lat);
                    const lng = parseFloat(first.lon);
                    updateTambahCoordinates(lat, lng);
                    if (mapTambahInstance) {
                        mapTambahInstance.flyTo([lat, lng], 16);
                    }
                    // Otomatis sarankan nama & alamat jika masih kosong
                    const alamatEl = document.getElementById('tambah_alamat');
                    if (!alamatEl.value) {
                        alamatEl.value = first.display_name;
                    }
                } else {
                    alert('Lokasi tempat tidak ditemukan. Silakan masukkan kata kunci yang lebih spesifik.');
                }
            })
            .catch(() => {
                alert('Terjadi kesalahan saat mencari lokasi.');
            });
    }

    // Enter di search box tambah
    document.getElementById('tambah_search_box')?.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            searchLocationTambah();
        }
    });

    // ==========================================
    // PETA EDIT LOKASI
    // ==========================================
    function initMapEdit(lat, lng, radius = 100) {
        if (!mapEditInstance) {
            mapEditInstance = L.map('mapEdit', {
                center: [lat, lng],
                zoom: 16,
                zoomControl: true
            });

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; OpenStreetMap contributors'
            }).addTo(mapEditInstance);

            markerEdit = L.marker([lat, lng], {
                draggable: true,
                icon: customPinIcon
            }).addTo(mapEditInstance);

            circleEdit = L.circle([lat, lng], {
                color: '#EA580C',
                fillColor: '#F97316',
                fillOpacity: 0.2,
                radius: radius,
                weight: 2
            }).addTo(mapEditInstance);

            markerEdit.on('dragend', function (e) {
                const pos = markerEdit.getLatLng();
                updateEditCoordinates(pos.lat, pos.lng);
            });

            mapEditInstance.on('click', function (e) {
                updateEditCoordinates(e.latlng.lat, e.latlng.lng);
            });

            document.getElementById('edit_radius_meter').addEventListener('input', function () {
                const r = parseInt(this.value) || 100;
                if (circleEdit) circleEdit.setRadius(r);
            });

            document.getElementById('edit_latitude').addEventListener('change', syncManualCoordsEdit);
            document.getElementById('edit_longitude').addEventListener('change', syncManualCoordsEdit);
        } else {
            mapEditInstance.setView([lat, lng], 16);
            markerEdit.setLatLng([lat, lng]);
            circleEdit.setLatLng([lat, lng]);
            circleEdit.setRadius(radius);
        }

        setTimeout(() => {
            mapEditInstance.invalidateSize();
        }, 200);
    }

    function updateEditCoordinates(lat, lng) {
        const fixedLat = parseFloat(lat).toFixed(6);
        const fixedLng = parseFloat(lng).toFixed(6);

        document.getElementById('edit_latitude').value = fixedLat;
        document.getElementById('edit_longitude').value = fixedLng;
        document.getElementById('edit_coord_preview').innerText = `${fixedLat}, ${fixedLng}`;

        if (markerEdit) markerEdit.setLatLng([lat, lng]);
        if (circleEdit) circleEdit.setLatLng([lat, lng]);
    }

    function syncManualCoordsEdit() {
        const lat = parseFloat(document.getElementById('edit_latitude').value);
        const lng = parseFloat(document.getElementById('edit_longitude').value);
        if (!isNaN(lat) && !isNaN(lng)) {
            updateEditCoordinates(lat, lng);
            if (mapEditInstance) mapEditInstance.panTo([lat, lng]);
        }
    }

    function openEditModal(loc) {
        const form = document.getElementById('formEditLokasi');
        form.action = `/admin/pengaturan-absensi/lokasi/${loc.id}`;
        document.getElementById('edit_kode_lokasi').value = loc.kode_lokasi;
        document.getElementById('edit_nama_lokasi').value = loc.nama_lokasi;
        document.getElementById('edit_alamat').value = loc.alamat;
        document.getElementById('edit_latitude').value = loc.latitude;
        document.getElementById('edit_longitude').value = loc.longitude;
        document.getElementById('edit_radius_meter').value = loc.radius_meter;

        const lat = parseFloat(loc.latitude) || -6.225588;
        const lng = parseFloat(loc.longitude) || 106.809312;
        const radius = parseInt(loc.radius_meter) || 100;

        document.getElementById('modalEditLokasi').classList.remove('hidden');
        updateEditCoordinates(lat, lng);
        initMapEdit(lat, lng, radius);

        if (window.lucide) { lucide.createIcons(); }
    }

    function closeEditModal() {
        document.getElementById('modalEditLokasi').classList.add('hidden');
    }

    function getCurrentLocationEdit() {
        if (!navigator.geolocation) {
            alert('Browser tidak mendukung GPS Geolocation.');
            return;
        }

        navigator.geolocation.getCurrentPosition(
            (pos) => {
                const lat = pos.coords.latitude;
                const lng = pos.coords.longitude;
                updateEditCoordinates(lat, lng);
                if (mapEditInstance) {
                    mapEditInstance.flyTo([lat, lng], 17);
                }
            },
            (err) => {
                alert('Gagal mengambil titik GPS.');
            },
            { enableHighAccuracy: true }
        );
    }

    function searchLocationEdit() {
        const query = document.getElementById('edit_search_box').value.trim();
        if (!query) return;

        fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}`)
            .then(res => res.json())
            .then(data => {
                if (data && data.length > 0) {
                    const first = data[0];
                    const lat = parseFloat(first.lat);
                    const lng = parseFloat(first.lon);
                    updateEditCoordinates(lat, lng);
                    if (mapEditInstance) {
                        mapEditInstance.flyTo([lat, lng], 16);
                    }
                } else {
                    alert('Lokasi tempat tidak ditemukan.');
                }
            })
            .catch(() => {
                alert('Terjadi kesalahan saat mencari lokasi.');
            });
    }

    document.getElementById('edit_search_box')?.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            searchLocationEdit();
        }
    });
</script>
@endpush
@endsection