@extends('admin.layout')

@section('title', 'Pengaturan Cabang')
@section('subtitle', 'Konfigurasi profil dan lokasi SPPG Anda')

@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>
    #map { height: 400px; border-radius: 0.75rem; z-index: 10; }
</style>

<div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="p-6 border-b border-gray-100">
            <h2 class="text-lg font-bold text-gray-800">Koordinat Lokasi Absensi</h2>
            <p class="text-sm text-gray-500 mt-1">Tentukan titik kordinat (Latitude & Longitude) tempat SPPG ini berada. Relawan hanya bisa melakukan absen dalam radius 50 meter dari titik ini.</p>
        </div>
        
        <form action="{{ route('admin.settings.update') }}" method="POST" class="p-6 space-y-5">
            @csrf
            @method('PUT')
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-5">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Latitude</label>
                    <input type="text" id="latitude" name="latitude" value="{{ old('latitude', $sppg->latitude) }}" class="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-xl text-gray-600 focus:outline-none" readonly placeholder="Pilih dari peta...">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Longitude</label>
                    <input type="text" id="longitude" name="longitude" value="{{ old('longitude', $sppg->longitude) }}" class="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-xl text-gray-600 focus:outline-none" readonly placeholder="Pilih dari peta...">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Radius Absen (Meter)</label>
                    <input type="number" id="radius" name="radius" value="{{ old('radius', $sppg->radius ?? 50) }}" min="10" max="1000" class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-sky-500/20 focus:border-sky-500" placeholder="50">
                </div>
            </div>

            {{-- Fitur Pencarian Peta --}}
            <div class="mb-3 relative">
                <label class="block text-sm font-semibold text-gray-700 mb-1">Cari Lokasi di Peta</label>
                <div class="relative">
                    <input type="text" id="mapSearchInput" class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-sky-500/20 focus:border-sky-500" placeholder="Ketik nama tempat, jalan, atau kota..." autocomplete="off">
                    <div id="searchSpinner" class="hidden absolute right-4 top-2.5 text-gray-400">
                        <svg class="w-5 h-5 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                    </div>
                </div>
                
                {{-- Dropdown Hasil --}}
                <div id="searchResults" class="hidden absolute z-[1000] w-full mt-1 bg-white border border-gray-200 rounded-2xl shadow-xl max-h-60 overflow-y-auto">
                    <!-- Items inserted here -->
                </div>
            </div>

            <div class="mb-5 border border-sky-200 rounded-xl overflow-hidden shadow-inner">
                <div id="map"></div>
            </div>

            <div class="bg-sky-50 rounded-xl p-4 border border-sky-100 flex gap-3 text-sky-800">
                <svg class="w-6 h-6 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                <div class="text-sm">
                    <strong>Cara menentukan lokasi:</strong>
                    <ul class="list-disc list-inside mt-1 space-y-1">
                        <li>Geser peta untuk mencari lokasi SPPG Anda.</li>
                        <li>Klik (atau sentuh) pada lokasi yang tepat di peta untuk menaruh pin (penanda merah).</li>
                        <li>Angka Latitude & Longitude akan terisi otomatis.</li>
                        <li>Klik <strong>Simpan Pengaturan</strong> di bawah.</li>
                    </ul>
                </div>
            </div>

            <div class="pt-4 flex justify-end">
                <button type="submit" class="px-5 py-2.5 bg-sky-500 hover:bg-sky-600 text-white font-medium rounded-xl shadow-md transition-colors shadow-sky-500/20">
                    Simpan Pengaturan
                </button>
            </div>
        </form>
    </div>
</div>

{{-- Card Ubah Sandi --}}
<div class="max-w-4xl mx-auto mt-6">
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="p-6 border-b border-gray-100">
            <h2 class="text-lg font-bold text-gray-800">🔒 Ubah Sandi</h2>
            <p class="text-sm text-gray-500 mt-1">Ubah sandi akun admin Anda. Sandi minimal 6 karakter.</p>
        </div>

        @if (session('password_success'))
            <div class="mx-6 mt-4 px-4 py-3 bg-emerald-50 border border-emerald-200 text-emerald-700 rounded-xl text-sm font-medium">
                {{ session('password_success') }}
            </div>
        @endif

        <form action="{{ route('admin.settings.change-password') }}" method="POST" class="p-6 space-y-4">
            @csrf
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">Sandi Lama</label>
                <input type="password" name="current_password" class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-sky-500/20 focus:border-sky-500" placeholder="Masukkan sandi lama..." required>
                @error('current_password')
                    <p class="mt-1 text-xs text-rose-500">{{ $message }}</p>
                @enderror
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Sandi Baru</label>
                    <input type="password" name="new_password" class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-sky-500/20 focus:border-sky-500" placeholder="Minimal 6 karakter..." required minlength="6">
                    @error('new_password')
                        <p class="mt-1 text-xs text-rose-500">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Konfirmasi Sandi Baru</label>
                    <input type="password" name="new_password_confirmation" class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-sky-500/20 focus:border-sky-500" placeholder="Ketik ulang sandi baru..." required>
                </div>
            </div>
            <div class="pt-2 flex justify-end">
                <button type="submit" class="px-5 py-2.5 bg-amber-500 hover:bg-amber-600 text-white font-medium rounded-xl shadow-md transition-colors shadow-amber-500/20">
                    Ubah Sandi
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const latInput = document.getElementById('latitude');
        const lngInput = document.getElementById('longitude');
        
        // Default koordinat (bisa diset ke Lhokseumawe jika kosong)
        let initialLat = latInput.value ? parseFloat(latInput.value) : 5.180479;
        let initialLng = lngInput.value ? parseFloat(lngInput.value) : 97.142078;
        let zoomLevel = latInput.value ? 17 : 13; // Zoom lebih dekat jika sudah diset

        // Inisialisasi Peta
        const map = L.map('map').setView([initialLat, initialLng], zoomLevel);

        // Tambahkan Tile Layer (Peta Dasar) - Menggunakan Google Satellite Hybrid
        L.tileLayer('https://{s}.google.com/vt/lyrs=y&x={x}&y={y}&z={z}', {
            maxZoom: 20,
            subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
            attribution: '© Google Maps'
        }).addTo(map);

        // Inisialisasi Marker & Circle
        let marker = null;
        let circle = null;

        function updateCircle(lat, lng, radius) {
            if (circle) {
                circle.setLatLng([lat, lng]);
                circle.setRadius(radius);
            } else {
                circle = L.circle([lat, lng], {
                    color: '#0ea5e9',
                    fillColor: '#0ea5e9',
                    fillOpacity: 0.2,
                    radius: radius
                }).addTo(map);
            }
        }

        if (latInput.value && lngInput.value) {
            marker = L.marker([initialLat, initialLng]).addTo(map);
            updateCircle(initialLat, initialLng, parseInt(document.getElementById('radius').value) || 50);
        }

        // Event: Saat peta diklik
        map.on('click', function(e) {
            const lat = e.latlng.lat;
            const lng = e.latlng.lng;

            // Update Input
            latInput.value = lat.toFixed(8);
            lngInput.value = lng.toFixed(8);

            // Update Marker & Circle
            if (marker) {
                marker.setLatLng(e.latlng);
            } else {
                marker = L.marker(e.latlng).addTo(map);
            }
            updateCircle(lat, lng, parseInt(document.getElementById('radius').value) || 50);
        });

        // Event: Saat radius diubah
        document.getElementById('radius').addEventListener('input', function(e) {
            if (latInput.value && lngInput.value) {
                updateCircle(parseFloat(latInput.value), parseFloat(lngInput.value), parseInt(e.target.value) || 50);
            }
        });

        // Fitur Pencarian Lokasi dengan Autocomplete (Nominatim API OpenStreetMap)
        const searchInput = document.getElementById('mapSearchInput');
        const searchResults = document.getElementById('searchResults');
        const searchSpinner = document.getElementById('searchSpinner');
        let searchTimeout;

        searchInput.addEventListener('input', function(e) {
            clearTimeout(searchTimeout);
            const query = e.target.value.trim();
            
            if (query.length < 3) {
                searchResults.classList.add('hidden');
                return;
            }

            searchSpinner.classList.remove('hidden');

            searchTimeout = setTimeout(() => {
                // Membatasi pencarian di Indonesia agar lebih relevan (countrycodes=id)
                fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&limit=5&countrycodes=id`)
                    .then(response => response.json())
                    .then(data => {
                        searchResults.innerHTML = '';
                        if (data && data.length > 0) {
                            data.forEach(item => {
                                const div = document.createElement('div');
                                div.className = 'px-4 py-3 hover:bg-sky-50 cursor-pointer border-b border-gray-100 last:border-0 text-sm text-gray-700 transition-colors';
                                div.innerHTML = `<strong>${item.display_name.split(',')[0]}</strong><br><span class="text-xs text-gray-500">${item.display_name}</span>`;
                                div.addEventListener('click', () => {
                                    const lat = parseFloat(item.lat);
                                    const lon = parseFloat(item.lon);
                                    map.setView([lat, lon], 17);
                                    searchResults.classList.add('hidden');
                                    searchInput.value = item.display_name.split(',')[0];
                                });
                                searchResults.appendChild(div);
                            });
                            searchResults.classList.remove('hidden');
                        } else {
                            searchResults.innerHTML = '<div class="px-4 py-3 text-sm text-red-500">Lokasi tidak ditemukan.</div>';
                            searchResults.classList.remove('hidden');
                        }
                    })
                    .catch(err => {
                        console.error('Error searching location:', err);
                        searchResults.innerHTML = '<div class="px-4 py-3 text-sm text-red-500">Terjadi kesalahan jaringan.</div>';
                        searchResults.classList.remove('hidden');
                    })
                    .finally(() => {
                        searchSpinner.classList.add('hidden');
                    });
            }, 600); // Jeda 600ms setelah user berhenti mengetik
        });

        // Sembunyikan dropdown jika klik di luar area
        document.addEventListener('click', function(e) {
            if (!searchInput.contains(e.target) && !searchResults.contains(e.target)) {
                searchResults.classList.add('hidden');
            }
        });
        
        // Fitur: Coba dapatkan lokasi admin saat ini untuk mempermudah (opsional)
        if (!latInput.value && navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                const userLat = position.coords.latitude;
                const userLng = position.coords.longitude;
                map.setView([userLat, userLng], 17);
                // Tidak langsung ditaruh marker agar tidak salah, cukup arahkan peta
            }, function() {
                // Ignore errors
            });
        }
    });
</script>
@endsection