@extends('layouts.app')

@section('title', 'Profil Saya')

@section('content')
<div class="max-w-4xl mx-auto py-12 px-4 sm:px-6 lg:px-8" x-data="alamatForm()" x-init="init" x-cloak>
    <div class="bg-white dark:bg-gray-800 shadow rounded-xl p-6 space-y-12">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
            <i class="fas fa-user-circle text-[color:var(--primary-color)]"></i> Edit Profil Saya
        </h1>

        <form method="POST" action="{{ route('user.profil.update') }}" enctype="multipart/form-data" class="space-y-12">
            @csrf

            {{-- Identitas --}}
            <div class="space-y-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Identitas Diri</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="name" class="block text-sm font-semibold text-gray-700 dark:text-gray-200">Nama Lengkap</label>
                        <input type="text" id="name" name="name" value="{{ old('name', $user->name) }}" class="input form-input">
                        @error('name') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label for="email" class="block text-sm font-semibold text-gray-700 dark:text-gray-200">Email</label>
                        <input type="email" id="email" name="email" value="{{ old('email', $user->email) }}" class="input form-input">
                        @error('email') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div class="md:col-span-2">
                        <label for="ktp" class="block text-sm font-semibold text-gray-700 dark:text-gray-200">Nomor KTP</label>
                        <input type="text" id="ktp" name="ktp" value="{{ old('ktp', $user->ktp) }}" class="input w-full form-input">
                        @error('ktp') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
                    </div>
                </div>
            </div>

            {{-- Kontak dan Gender --}}
            <div class="space-y-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Kontak dan Gender</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="no_hp" class="block text-sm font-semibold text-gray-700 dark:text-gray-200">No. HP</label>
                        <input type="text" id="no_hp" name="no_hp" value="{{ old('no_hp', $user->no_hp) }}" class="input form-input">
                        @error('no_hp') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label for="gender" class="block text-sm font-semibold text-gray-700 dark:text-gray-200">Jenis Kelamin</label>
                        <select id="gender" name="gender" class="input form-input">
                            <option value="">-- Pilih --</option>
                            <option value="Laki-laki" @selected(old('gender', $user->gender) == 'Laki-laki')>Laki-laki</option>
                            <option value="Perempuan" @selected(old('gender', $user->gender) == 'Perempuan')>Perempuan</option>
                            <option value="Lainnya" @selected(old('gender', $user->gender) == 'Lainnya')>Lainnya</option>
                        </select>
                        <p class="text-xs text-gray-400 mt-1">Data sebelumnya: <strong>{{ $user->gender ?? '-' }}</strong></p>
                        @error('gender') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
                    </div>
                </div>
            </div>

            {{-- Foto dan Password --}}
            <div class="space-y-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Foto dan Password</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="mb-5">
                        <label for="foto" class="block text-sm font-semibold text-blue-700 dark:text-gray-200 mb-2">
                            Foto (opsional) <span class="text-xs text-blue-500">(maksimal 2 MB)</span>
                        </label>
                        <input type="file" id="foto" name="foto" accept="image/*"
                            class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-[color:var(--primary-color)] file:text-white hover:file:bg-[color:var(--primary-dark-color)]">
                        @error('foto')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                        @if ($user->foto)
                            <div class="mt-4 flex items-center gap-4">
                                <img src="{{ $user->foto_url }}" alt="Foto Profil"
                                    class="h-24 w-24 rounded-full border shadow object-cover ring-2 ring-[color:var(--primary-color)] dark:ring-blue-300">
                                <div>
                                    <p class="text-sm text-gray-600 dark:text-gray-300">Foto Profil Saat Ini</p>
                                </div>
                            </div>
                        @endif
                    </div>
                    <div>
                        <label for="password" class="block text-sm font-semibold text-gray-700 dark:text-gray-200">Ganti Password (opsional)</label>
                        <input type="password" id="password" name="password" class="input form-input">
                        @error('password') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
                    </div>
                </div>
            </div>

            {{-- Alamat --}}
            <div class="space-y-2">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Alamat Lengkap</h2>
                <textarea name="alamat" x-model="alamat" rows="4" class="input w-full form-input" placeholder="Masukkan alamat lengkap Anda"></textarea>
                <p class="text-xs text-gray-400 mt-1">Data sebelumnya: <strong>{{ $user->alamat ?? '-' }}</strong></p>
                @error('alamat') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
            </div>

            {{-- Wilayah --}}
            <div class="space-y-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Wilayah</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label for="negara" class="block text-sm font-semibold text-gray-700 dark:text-gray-200">Negara</label>
                        <input type="text" id="negara" name="negara" x-model="negara" class="input form-input">
                        <p class="text-xs text-gray-400 mt-1">Sebelumnya: <strong>{{ $user->negara ?? '-' }}</strong></p>
                        @error('negara') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label for="provinsi" class="block text-sm font-semibold text-gray-700 dark:text-gray-200">Provinsi</label>
                        <input type="text" id="provinsi" name="provinsi" x-model="provinsi" class="input form-input">
                        <p class="text-xs text-gray-400 mt-1">Sebelumnya: <strong>{{ $user->provinsi ?? '-' }}</strong></p>
                        @error('provinsi') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label for="kota" class="block text-sm font-semibold text-gray-700 dark:text-gray-200">Kota</label>
                        <input type="text" id="kota" name="kota" x-model="kota" class="input form-input">
                        <p class="text-xs text-gray-400 mt-1">Sebelumnya: <strong>{{ $user->kota ?? '-' }}</strong></p>
                        @error('kota') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
                    </div>
                </div>
            </div>

            {{-- Lokasi Peta --}}
            <div class="space-y-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Lokasi Peta</h2>
                <input type="hidden" name="latitude" x-ref="latRef" value="{{ old('latitude', $user->latitude) }}">
                <input type="hidden" name="longitude" x-ref="lngRef" value="{{ old('longitude', $user->longitude) }}">
                <div class="flex items-center gap-2 flex-wrap md:flex-nowrap">
                    {{-- DIV UNTUK KONTROL GEOCODER - SEARCH BOX AKAN DIBUAT DI SINI --}}
                    <div id="geocoder-control" class="flex-1"></div>
                    <div class="flex gap-2 mt-2 md:mt-0">
                        <button type="button" class="btn-primary flex items-center gap-2 px-5 py-3 bg-yellow-600 hover:bg-yellow-700 text-white font-semibold rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out" @click.prevent="useMyLocation">
                            📍 Posisi Sekarang
                            <svg x-show="loading" class="h-4 w-4 animate-spin text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m0 14v1m8-8h1M4 12H3" />
                            </svg>
                        </button>
                        <button type="button" class="btn-secondary flex items-center gap-2 px-5 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out" @click.prevent="refreshMap">
                            🔁 Refresh Peta
                        </button>
                    </div>
                </div>
                {{-- Container Peta dengan Crosshair --}}
                <div id="map-container" class="relative rounded border h-64 w-full overflow-hidden">
                    <div id="map" class="h-full w-full"></div>
                    {{-- Crosshair (Tanda Target) --}}
                    <div id="map-crosshair" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-6 h-6 border-2 border-red-500 rounded-full z-10 pointer-events-none flex items-center justify-center">
                        <div class="w-2 h-2 bg-red-500 rounded-full"></div>
                    </div>
                </div>

                <div class="text-sm mt-2 text-gray-600 dark:text-gray-300" x-text="lokasiLabel ?? 'Belum ada lokasi'" />
                <p class="text-xs text-gray-400 mt-1">Koordinat terakhir: <strong>{{ $user->latitude ?? '-' }}, {{ $user->longitude ?? '-' }}</strong></p>
            </div>

            {{-- Tanggal Lahir --}}
            <div class="space-y-2">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Tanggal Lahir</h2>
                <input type="date" name="tanggal_lahir" value="{{ old('tanggal_lahir', $user->tanggal_lahir ? $user->tanggal_lahir->format('Y-m-d') : '') }}" class="input form-input">
                @error('tanggal_lahir') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
            </div>

            {{-- Tombol Simpan --}}
            <div class="pt-6 flex justify-end">
                <button type="submit" class="btn-primary flex items-center gap-2 px-5 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
                    <i class="fas fa-save"></i> Simpan Perubahan
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
{{-- Leaflet Core CSS --}}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />

{{-- Leaflet Geocoder CSS --}}
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />

{{-- Leaflet Core JS --}}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

{{-- Leaflet Geocoder JS --}}
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>

<script>
function alamatForm() {
    let map, marker, geocoderControl;

    const formInputClasses = 'w-full px-4 py-2 border rounded-md dark:bg-gray-700 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:ring-[color:var(--primary-color)] focus:border-[color:var(--primary-color)]';
    document.querySelectorAll('.form-input').forEach(input => {
        input.classList.add(...formInputClasses.split(' '));
    });
    document.querySelectorAll('.input').forEach(input => {
        input.classList.add(...formInputClasses.split(' '));
    });


    return {
        negara: @js(old('negara', $user->negara ?? '')),
        provinsi: @js(old('provinsi', $user->provinsi ?? '')),
        kota: @js(old('kota', $user->kota ?? '')),
        alamat: @js(old('alamat', $user->alamat ?? '')),
        lokasiLabel: '',
        loading: false,

        useMyLocation() {
            this.loading = true;
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(position => {
                    const lat = position.coords.latitude;
                    const lng = position.coords.longitude;
                    this.loading = false;
                    this.setMapLocation(lat, lng);
                }, error => {
                    this.loading = false;
                    alert('Gagal mendapatkan lokasi: ' + error.message);
                    console.error("Geolocation Error:", error);
                }, { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 });
            } else {
                alert('Browser tidak mendukung Geolocation');
            }
        },

        // Perbaiki refreshMap untuk mengambil titik tengah peta saat ini
        refreshMap() {
            const center = map.getCenter(); // Mengambil koordinat titik tengah peta yang terlihat
            this.setMapLocation(center.lat, center.lng);
        },

        setMapLocation(lat, lng) {
            const latLng = L.latLng(lat, lng);
            map.setView(latLng, 15); // Fokus peta ke titik baru
            if (marker) {
                marker.setLatLng(latLng); // Pindahkan marker tanpa menghapusnya
            } else {
                marker = L.marker(latLng).addTo(map); // Buat marker baru jika tidak ada
            }
            this.$refs.latRef.value = lat;
            this.$refs.lngRef.value = lng;
            this.reverseGeocode(lat, lng);
        },

        async reverseGeocode(lat, lng) {
            try {
                const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lng}`);
                const data = await response.json();

                if (data && data.address) {
                    const address = data.address;
                    this.negara = address.country || '';
                    this.provinsi = address.state || address.province || '';
                    this.kota = address.city || address.town || address.village || address.county || '';
                    this.alamat = data.display_name || '';
                    this.lokasiLabel = data.display_name || 'Alamat tidak diketahui.';

                    this.$refs.latRef.value = lat;
                    this.$refs.lngRef.value = lng;

                } else {
                    this.negara = ''; this.provinsi = ''; this.kota = ''; this.alamat = '';
                    this.lokasiLabel = 'Alamat tidak diketahui.';
                }
            } catch (error) {
                console.error("Error during reverse geocoding:", error);
                this.lokasiLabel = 'Gagal mendapatkan alamat.';
            }
        },

        init() {
            this.$nextTick(() => {
                const userLat = @js($user->latitude ?? null);
                const userLng = @js($user->longitude ?? null);

                let initialLat = -6.9034; // Default: Bandung, Indonesia
                let initialLng = 107.5732;
                let initialZoom = 12;

                if (userLat !== null && userLng !== null && !isNaN(parseFloat(userLat)) && !isNaN(parseFloat(userLng))) {
                    initialLat = parseFloat(userLat);
                    initialLng = parseFloat(userLng);
                    initialZoom = 15;
                }

                map = L.map('map', {
                    zoomControl: true,
                    attributionControl: true,
                    inertia: true
                }).setView([initialLat, initialLng], initialZoom);

                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                }).addTo(map);

                // Pastikan peta render penuh setelah DOM siap
                // map.invalidateSize() harus dipanggil SETELAH div peta terlihat dan memiliki dimensi
                map.invalidateSize();

                // Tambahkan marker awal
                const initialLatLng = L.latLng(initialLat, initialLng);
                marker = L.marker(initialLatLng).addTo(map);

                // Lakukan reverse geocoding untuk lokasi awal
                this.reverseGeocode(initialLat, initialLng);

                // --- INISIALISASI SEARCH BOX ---
                const geocoderControlDiv = document.getElementById('geocoder-control');
                if (geocoderControlDiv) {
                    geocoderControl = L.Control.geocoder({
                        defaultMarkGeocode: false,
                        placeholder: 'Cari lokasi...',
                        errorMessage: 'Alamat tidak ditemukan.',
                        geocodingQueryParams: { countrycodes: 'id' }
                    })
                    .on('markgeocode', (e) => {
                        const latlng = e.geocode.center;
                        this.setMapLocation(latlng.lat, latlng.lng);
                    })
                    .addTo(geocoderControlDiv);

                    const geocoderInput = geocoderControlDiv.querySelector('input[type="text"]');
                    if (geocoderInput) {
                        geocoderInput.className = ''; // Hapus semua kelas bawaan geocoder
                        geocoderInput.classList.add(...formInputClasses.split(' ')); // Tambahkan kelas Tailwind kita
                        geocoderInput.setAttribute('placeholder', 'Cari lokasi...');
                    }
                } else {
                    console.error("Elemen 'geocoder-control' tidak ditemukan di DOM. Kontrol geocoder tidak dapat ditambahkan.");
                }
                // --- AKHIR INISIALISASI SEARCH BOX ---

                // --- TANGANI KLIK PETA UNTUK MEMINDAHKAN MARKER KE TITIK TENGAH PETA SAAT INI ---
                // Saat user menggeser peta, atau zoom, marker tidak akan bergerak otomatis
                // Ini akan memindahkan marker ke tengah peta yang terlihat saat ini.
                map.on('moveend', () => { // Event ini dipicu setelah peta berhenti bergerak (pan/zoom)
                    const center = map.getCenter();
                    if (marker) {
                        marker.setLatLng(center); // Pindahkan marker tanpa menghapusnya
                    } else {
                        marker = L.marker(center).addTo(map); // Buat marker baru jika tidak ada
                    }
                    // Juga update hidden input dan reverse geocode setiap kali peta bergerak
                    this.$refs.latRef.value = center.lat;
                    this.$refs.lngRef.value = center.lng;
                    this.reverseGeocode(center.lat, center.lng);
                });

                // Tangani klik di peta (untuk penempatan marker manual)
                map.on('click', (e) => {
                    this.setMapLocation(e.latlng.lat, e.latlng.lng);
                });
            });
        }
    }
}
</script>

<style>
    /* Styling dasar untuk input */
    .form-input {
        @apply w-full px-4 py-2 border rounded-md dark:bg-gray-700 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:ring-[color:var(--primary-color)] focus:border-[color:var(--primary-color)];
    }

    /* Styling tombol */
    .btn-primary {
        @apply bg-[color:var(--primary-color)] hover:bg-[color:var(--primary-dark-color)] text-white font-semibold rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out;
    }
    .btn-secondary {
        @apply bg-gray-500 hover:bg-gray-600 text-white font-semibold rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out;
    }

    /* Warna primer kustom jika belum ada di Tailwind config */
    :root {
        --primary-color: #4c51bf; /* Contoh: Indigo 700 */
        --primary-dark-color: #3b4097; /* Contoh: Warna Indigo yang lebih gelap */
    }

    /* Styling untuk kontrol Geocoder (penting agar terlihat bagus) */
    .leaflet-control-geocoder {
        box-shadow: none !important;
        border-radius: 0.375rem !important;
        overflow: hidden;
        width: 100% !important;
        position: relative;
        z-index: 1000;
    }

    .leaflet-control-geocoder-form input {
        box-sizing: border-box !important;
        border: 1px solid #d1d5db !important;
        border-radius: 0.375rem !important;
        padding: 0.5rem 1rem !important;
        width: 100% !important;
        font-size: 0.875rem !important;
        line-height: 1.25rem !important;
        color: #1f2937 !important;
        background-color: #f9fafb !important;
    }
    .dark .leaflet-control-geocoder-form input {
        background-color: #374151 !important;
        border-color: #4b5563 !important;
        color: #e5e7eb !important;
    }
    .leaflet-control-geocoder-form input::placeholder {
        color: #9ca3af !important;
    }
    .dark .leaflet-control-geocoder-form input::placeholder {
        color: #6b7280 !important;
    }

    .leaflet-control-geocoder-form input:focus {
        border-color: var(--primary-color) !important;
        box-shadow: 0 0 0 3px rgba(76, 81, 191, 0.25) !important;
        outline: none !important;
    }

    /* Styling untuk tombol search icon di dalam geocoder */
    .leaflet-control-geocoder-form button {
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0.5rem !important;
        line-height: 1 !important;
        opacity: 0.7;
        transition: opacity 0.2s ease;
    }
    .leaflet-control-geocoder-form button:hover {
        opacity: 1;
    }
    .leaflet-control-geocoder-icon {
        background-image: url('https://unpkg.com/leaflet-control-geocoder/images/geocoder.png') !important;
        background-size: 16px 16px !important;
        width: 16px !important;
        height: 16px !important;
        filter: invert(0);
    }
    .dark .leaflet-control-geocoder-icon {
        filter: invert(1) brightness(1.5) !important;
    }

    /* Styling untuk daftar hasil saran */
    .leaflet-control-geocoder-alternatives {
        background-color: white !important;
        border: 1px solid #d1d5db !important;
        border-radius: 0.375rem !important;
        list-style: none !important;
        padding: 0 !important;
        margin-top: 0.25rem !important;
        z-index: 1000 !important;
        max-height: 200px !important;
        overflow-y: auto !important;
        position: absolute;
        width: 100%;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .dark .leaflet-control-geocoder-alternatives {
        background-color: #1f2937 !important;
        border-color: #4b5563 !important;
    }

    .leaflet-control-geocoder-alternatives li {
        padding: 0.5rem 1rem !important;
        cursor: pointer !important;
        color: #1f2937 !important;
    }
    .dark .leaflet-control-geocoder-alternatives li {
        color: #e5e7eb !important;
    }

    .leaflet-control-geocoder-alternatives li:hover {
        background-color: #f3f4f6 !important;
    }
    .dark .leaflet-control-geocoder-alternatives li:hover {
        background-color: #374151 !important;
    }

    /* Styling untuk Crosshair (Tanda Target) */
    #map-crosshair {
        box-shadow: 0 0 0 1px rgba(255,255,255,0.7), 0 0 0 3px rgba(255,0,0,0.5); /* Outer glow/shadow for visibility */
    }
</style>
@endpush