@extends('layouts.app')

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

@section('content')
<div class="max-w-3xl mx-auto py-12 px-6" x-data="alamatForm" x-init="init">
    <h1 class="text-3xl font-bold mb-6 text-gray-800 dark:text-white">👤 Edit Profil Pengguna</h1>

    @if (session('success'))
        <div x-data="{ show: true }" x-show="show" x-transition
             class="flex items-center justify-between bg-green-100 border border-green-300 text-green-800 px-4 py-3 rounded-lg mb-6">
            <span>{{ session('success') }}</span>
            <button @click="show = false" class="text-lg font-bold hover:text-green-900">&times;</button>
        </div>
    @endif

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

        {{-- Nama, Email, No HP, Gender --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1">Nama</label>
                <input type="text" name="name" value="{{ old('name', $user->name) }}" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white p-2">
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1">Email</label>
                <input type="email" name="email" value="{{ old('email', $user->email) }}" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white p-2">
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1">No. HP</label>
                <input type="text" name="no_hp" value="{{ old('no_hp', $user->no_hp) }}" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white p-2">
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1">Jenis Kelamin</label>
                <select name="gender" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white p-2">
                    <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>
            </div>
        </div>

        {{-- Ganti Password --}}
        <div>
            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1">Ganti Password (Opsional)</label>
            <input type="password" name="password" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white p-2" placeholder="Biarkan kosong jika tidak ingin mengganti">
        </div>

        {{-- Foto Profil --}}
        <div class="flex flex-col md:flex-row items-start md:items-center gap-4" x-data="{ previewUrl: '{{ $user->foto ? asset('storage/' . $user->foto) : asset('default-avatar.png') }}' }">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Foto Profil</label>
                <input type="file" name="foto" accept="image/*"
                       @change="previewUrl = URL.createObjectURL($event.target.files[0])"
                       class="block w-full text-sm text-gray-700 dark:text-gray-300 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-[color:var(--primary-color)] file:text-white hover:file:brightness-110 transition">
            </div>
            <img :src="previewUrl" alt="Preview" class="w-24 h-24 rounded-full object-cover border shadow">
        </div>

        {{-- Alamat --}}
        <div>
            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1">Alamat Lengkap</label>
            <textarea name="alamat" rows="3" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white p-3">{{ old('alamat', $user->alamat) }}</textarea>
        </div>

        {{-- Wilayah --}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1">Negara</label>
                <select x-model="negara" name="negara" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white p-2">
                    <option value="">-- Pilih Negara --</option>
                    <template x-for="(prov, key) in wilayah" :key="key">
                        <option :value="key" x-text="key"></option>
                    </template>
                </select>
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1">Provinsi</label>
                <select x-model="provinsi" name="provinsi" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white p-2">
                    <option value="">-- Pilih Provinsi --</option>
                    <template x-for="item in provinsiList" :key="item">
                        <option :value="item" x-text="item"></option>
                    </template>
                </select>
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1">Kota</label>
                <select x-model="kota" name="kota" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white p-2">
                    <option value="">-- Pilih Kota --</option>
                    <template x-for="item in kotaList" :key="item">
                        <option :value="item" x-text="item"></option>
                    </template>
                </select>
            </div>
        </div>

        {{-- Lokasi Peta --}}
        <div>
            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1">Klik atau Cari Lokasi</label>
            <input type="hidden" name="lokasi_peta" x-ref="lokasiPeta">
            <div id="map" class="h-64 rounded-lg border"></div>
            <div class="mt-2 text-sm text-gray-600 dark:text-gray-300 italic" x-text="lokasiLabel"></div>
            <button type="button" class="mt-2 text-sm text-blue-600 hover:underline" onclick="getMyLocation()">📍 Gunakan Lokasi Saya</button>
        </div>

        {{-- Tanggal Lahir --}}
        <div>
            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1">Tanggal Lahir</label>
            <input type="date" name="tanggal_lahir" value="{{ old('tanggal_lahir', $user->tanggal_lahir ? $user->tanggal_lahir->format('Y-m-d') : '') }}" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white p-2">
        </div>

        <div class="pt-4">
            <button type="submit" class="px-6 py-2 bg-[color:var(--primary-color)] text-white font-semibold rounded-lg hover:scale-105 transition-all duration-150">
                💾 Simpan Perubahan
            </button>
        </div>
    </form>
</div>

<!-- PETA -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />

<script>
    let map, marker;

    function getMyLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(position => {
                const latlng = [position.coords.latitude, position.coords.longitude];
                map.setView(latlng, 15);
                if (marker) map.remove();
                marker = L.marker(latlng).addTo(map);
                reverseGeocode(latlng);
            });
        }
    }

    function reverseGeocode(latlng) {
        return fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${latlng[0]}&lon=${latlng[1]}`)
            .then(res => res.json())
            .then(data => {
                const display = data.display_name || '';
                const addr = data.address || {};
                const alpine = document.querySelector('[x-data]').__x.$data;
                alpine.negara = addr.country || '';
                alpine.provinsi = addr.state || '';
                alpine.kota = addr.city || addr.town || addr.village || '';
                alpine.lokasiLabel = display;
                document.querySelector('[x-ref=lokasiPeta]').value = display;
                return display;
            });
    }

    document.addEventListener('alpine:init', () => {
        Alpine.data('alamatForm', () => ({
            negara: @js($user->negara ?? ''),
            provinsi: @js($user->provinsi ?? ''),
            kota: @js($user->kota ?? ''),
            wilayah: {},
            lokasiLabel: '',
            init() {
                fetch('/data/wilayah.json')
                    .then(res => res.json())
                    .then(data => this.wilayah = data);

                const defaultLatLng = @js($user->lokasi_peta ? explode(',', $user->lokasi_peta) : [-1.5, 117]);
                map = L.map('map').setView(defaultLatLng, 13);
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

                L.Control.geocoder({
                    defaultMarkGeocode: false,
                    placeholder: 'Cari lokasi...',
                }).on('markgeocode', function(e) {
                    const latlng = e.geocode.center;
                    map.setView(latlng, 15);
                    if (marker) map.removeLayer(marker);
                    marker = L.marker(latlng).addTo(map);
                    reverseGeocode([latlng.lat, latlng.lng]);
                }).addTo(map);

                if (defaultLatLng.length === 2) {
                    marker = L.marker(defaultLatLng).addTo(map);
                    reverseGeocode(defaultLatLng);
                }

                map.on('click', function(e) {
                    if (marker) map.removeLayer(marker);
                    marker = L.marker(e.latlng).addTo(map);
                    reverseGeocode([e.latlng.lat, e.latlng.lng]);
                });
            },
            get provinsiList() {
                return this.wilayah[this.negara] ? Object.keys(this.wilayah[this.negara]) : [];
            },
            get kotaList() {
                return this.wilayah[this.negara]?.[this.provinsi] ?? [];
            },
        }));
    });
</script>
@endsection