@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-primary"></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 class="block text-sm font-semibold text-gray-700 dark:text-gray-200">Nama Lengkap</label>
                        <input type="text" name="name" value="{{ old('name', $user->name) }}" class="input">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200">Email</label>
                        <input type="email" name="email" value="{{ old('email', $user->email) }}" class="input">
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200">Nomor KTP</label>
                        <input type="text" name="ktp" value="{{ old('ktp', $user->ktp) }}" class="input w-full">
                    </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 class="block text-sm font-semibold text-gray-700 dark:text-gray-200">No. HP</label>
                        <input type="text" name="no_hp" value="{{ old('no_hp', $user->no_hp) }}" class="input">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200">Jenis Kelamin</label>
                        <select name="gender" class="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>
                    </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>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200">
                            Foto (opsional) <span class="text-xs text-gray-500">(maksimal 2 MB)</span>
                        </label>
                        <input type="file" name="foto" accept="image/*" class="input">
                        @error('foto')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                        @if ($user->foto)
                            <img src="{{ $user->foto_url }}" alt="Foto Profil" class="mt-3 h-24 w-24 rounded-full border shadow">
                        @endif
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200">Ganti Password (opsional)</label>
                        <input type="password" name="password" class="input">
                    </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"></textarea>
                <p class="text-xs text-gray-400 mt-1">Data sebelumnya: <strong>{{ $user->alamat ?? '-' }}</strong></p>
            </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 class="block text-sm font-semibold text-gray-700 dark:text-gray-200">Negara</label>
                        <input type="text" name="negara" x-model="negara" class="input">
                        <p class="text-xs text-gray-400 mt-1">Sebelumnya: <strong>{{ $user->negara ?? '-' }}</strong></p>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200">Provinsi</label>
                        <input type="text" name="provinsi" x-model="provinsi" class="input">
                        <p class="text-xs text-gray-400 mt-1">Sebelumnya: <strong>{{ $user->provinsi ?? '-' }}</strong></p>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200">Kota</label>
                        <input type="text" name="kota" x-model="kota" class="input">
                        <p class="text-xs text-gray-400 mt-1">Sebelumnya: <strong>{{ $user->kota ?? '-' }}</strong></p>
                    </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">
                <input type="hidden" name="longitude" x-ref="lngRef">
                <div class="flex items-center gap-2 flex-wrap md:flex-nowrap">
                    <input id="searchBox" type="text" placeholder="Cari lokasi..." class="input flex-1">
                    <div class="flex gap-2">
                        <button type="button" class="btn-primary text-sm flex items-center gap-2" @click.prevent="useMyLocation">
                            📍 Posisi Sekarang
                            <svg x-show="loading" class="h-4 w-4 animate-spin" 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 text-sm flex items-center gap-1" @click.prevent="refreshMap">
                            🔁 Refresh Peta
                        </button>
                    </div>
                </div>
                <div id="map" class="rounded border h-64 w-full"></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">
            </div>

            {{-- Tombol Simpan --}}
            <div class="pt-6 flex justify-end">
                <button type="submit" class="btn-primary flex items-center gap-2">
                    <i class="fas fa-save"></i> Simpan Perubahan
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
function alamatForm() {
    return {
        negara: @js($user->negara ?? ''),
        provinsi: @js($user->provinsi ?? ''),
        kota: @js($user->kota ?? ''),
        alamat: @js($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);
                });
            } else {
                alert('Browser tidak mendukung Geolocation');
            }
        },
        refreshMap() {
            const lat = map.getCenter().lat();
            const lng = map.getCenter().lng();
            this.setMapLocation(lat, lng);
        },
        setMapLocation(lat, lng) {
            const latLng = { lat, lng };
            map.setCenter(latLng);
            map.setZoom(15);
            marker.setMap(null);
            marker = new google.maps.Marker({ position: latLng, map });
            this.reverseGeocode(lat, lng);
        },
        reverseGeocode(lat, lng) {
            geocoder.geocode({ location: { lat, lng } }, (results, status) => {
                if (status === 'OK' && results[0]) {
                    const address = results[0];
                    const comp = Object.fromEntries(address.address_components.map(c => [c.types[0], c.long_name]));
                    this.negara = comp.country || '';
                    this.provinsi = comp.administrative_area_level_1 || '';
                    this.kota = comp.locality || comp.administrative_area_level_2 || '';
                    this.alamat = address.formatted_address;
                    this.lokasiLabel = address.formatted_address;
                    this.$refs.latRef.value = lat;
                    this.$refs.lngRef.value = lng;
                }
            });
        },
        init() {
            const defaultLoc = @js(($user->latitude && $user->longitude) ? [$user->latitude, $user->longitude] : [-6.2, 106.8]);
            const center = { lat: parseFloat(defaultLoc[0]), lng: parseFloat(defaultLoc[1]) };
            map = new google.maps.Map(document.getElementById('map'), { center, zoom: 13 });
            geocoder = new google.maps.Geocoder();
            marker = new google.maps.Marker({ position: center, map });
            this.reverseGeocode(center.lat, center.lng);
            map.addListener("click", (e) => {
                const lat = e.latLng.lat(), lng = e.latLng.lng();
                this.setMapLocation(lat, lng);
            });
            const searchBox = new google.maps.places.SearchBox(document.getElementById("searchBox"));
            searchBox.addListener("places_changed", () => {
                const places = searchBox.getPlaces();
                if (!places.length) return;
                const loc = places[0].geometry.location;
                this.setMapLocation(loc.lat(), loc.lng());
            });
        }
    }
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&libraries=places" async defer></script>
@endpush