@extends('layouts.admin-apoteker')

@section('title', 'Edit Pasien')

@section('content')
<div class="max-w-4xl mx-auto py-10" x-data="alamatForm" x-init="init">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">✏️ Edit Data Pasien</h1>

    @if(session('success'))
        <div class="mb-4 px-4 py-2 rounded bg-green-100 text-green-800 dark:bg-green-700 dark:text-white">
            {{ session('success') }}
        </div>
    @endif

    @if ($errors->any())
        <div class="mb-4 px-4 py-2 rounded bg-red-100 text-red-800 dark:bg-red-700 dark:text-white">
            <ul class="list-disc ml-5">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('admin.userpatients.update', $userpatient) }}" enctype="multipart/form-data"
        class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow space-y-6">
        @csrf
        @method('PUT')

        {{-- Nama, Email, No HP --}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label class="block text-sm font-medium dark:text-white">Nama Lengkap</label>
                <input type="text" name="name" value="{{ old('name', $userpatient->name) }}" placeholder="Masukkan nama lengkap"
                    class="input-field" required>
            </div>
            <div>
                <label class="block text-sm font-medium dark:text-white">Email</label>
                <input type="email" name="email" value="{{ old('email', $userpatient->email) }}" placeholder="email@domain.com"
                    class="input-field" required>
            </div>
            <div>
                <label class="block text-sm font-medium dark:text-white">No. HP</label>
                <input type="text" name="no_hp" value="{{ old('no_hp', $userpatient->no_hp) }}" placeholder="08xxxxxxxxxx"
                    class="input-field">
            </div>
        </div>

        {{-- KTP, Gender, Role --}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label class="block text-sm font-medium dark:text-white">No. KTP</label>
                <input type="text" name="ktp" value="{{ old('ktp', $userpatient->ktp) }}" class="input-field">
            </div>
            <div>
                <label class="block text-sm font-medium dark:text-white">Gender</label>
                <select name="gender" class="input-field">
                    <option value="">-- Pilih --</option>
                    <option value="Laki-laki" @selected(old('gender', $userpatient->gender) == 'Laki-laki')>Laki-laki</option>
                    <option value="Perempuan" @selected(old('gender', $userpatient->gender) == 'Perempuan')>Perempuan</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium dark:text-white">Role</label>
                <select name="role" required class="input-field">
                    @foreach ($roles as $role)
                        <option value="{{ $role }}" {{ $userpatient->role === $role ? 'selected' : '' }}>{{ ucfirst($role) }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- Status --}}
        <div>
            <label class="block text-sm font-medium dark:text-white">Status Akun</label>
            <select name="status" class="input-field">
                <option value="Aktif" {{ $userpatient->status === 'Aktif' ? 'selected' : '' }}>Aktif</option>
                <option value="Nonaktif" {{ $userpatient->status === 'Nonaktif' ? 'selected' : '' }}>Nonaktif</option>
            </select>
        </div>

        {{-- Password --}}
        <div>
            <label class="block text-sm font-medium dark:text-white">Password Baru (Opsional)</label>
            <input type="password" name="password" class="input-field" placeholder="Biarkan kosong jika tidak ingin diganti">
        </div>

        {{-- Tanggal Lahir dan Foto --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium dark:text-white">Tanggal Lahir</label>
                <input type="date" name="tanggal_lahir" value="{{ old('tanggal_lahir', optional($userpatient->tanggal_lahir)->format('Y-m-d')) }}" class="input-field">
            </div>
            <div x-data="{ preview: '{{ $userpatient->foto ? asset('storage/' . $userpatient->foto) : asset('default-avatar.png') }}' }">
                <label class="block text-sm font-medium dark:text-white">Foto (Opsional)</label>
                <input type="file" name="foto" @change="preview = URL.createObjectURL($event.target.files[0])" class="input-field">
                <img :src="preview" alt="Preview Foto" class="w-24 h-24 mt-2 rounded-full object-cover shadow border">
            </div>
        </div>

        {{-- Alamat --}}
        <div>
            <label class="block text-sm font-medium dark:text-white">Alamat</label>
            <textarea name="alamat" rows="3" class="input-field">{{ old('alamat', $userpatient->alamat) }}</textarea>
        </div>

        {{-- Wilayah --}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label class="block text-sm font-medium dark:text-white">Negara</label>
                <select x-model="negara" name="negara" class="input-field">
                    <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-medium dark:text-white">Provinsi</label>
                <select x-model="provinsi" name="provinsi" class="input-field">
                    <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-medium dark:text-white">Kota</label>
                <select x-model="kota" name="kota" class="input-field">
                    <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-medium dark:text-white">Titik Lokasi</label>
            <input type="hidden" name="lokasi_peta" x-ref="lokasiPeta">
            <div id="map" class="h-[300px] w-full rounded border mt-1"></div>
            <div class="text-xs text-gray-500 mt-1 italic" x-text="lokasiLabel"></div>
            <button type="button" onclick="getMyLocation()" class="mt-2 text-sm text-blue-600 dark:text-blue-400 hover:underline">📍 Gunakan Lokasi Saat Ini</button>
        </div>

        <div class="pt-4">
            <button type="submit" class="px-6 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition">💾 Simpan Perubahan</button>
            <a href="{{ route('admin.userpatients.index') }}" class="ml-4 text-gray-600 dark:text-gray-300 hover:underline">← Batal</a>
        </div>
    </form>
</div>
@endsection
@push('scripts')
    <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() {
            navigator.geolocation.getCurrentPosition(position => {
                const latlng = [position.coords.latitude, position.coords.longitude];
                map.setView(latlng, 15);
                if (marker) marker.remove();
                marker = L.marker(latlng).addTo(map);
                reverseGeocode(latlng);
            });
        }

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

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

                    const defaultLatLng = @js($userpatient->lokasi_peta ? explode(',', $userpatient->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 }).on('markgeocode', e => {
                        const latlng = e.geocode.center;
                        map.setView(latlng, 15);
                        if (marker) marker.remove();
                        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', e => {
                        if (marker) marker.remove();
                        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>

    <style>
        .input-field {
            @apply w-full px-3 py-2 rounded border border-gray-300 bg-white text-gray-800;
        }

        .dark .input-field {
            background-color: #1f2937; /* dark:bg-gray-800 */
            color: #f9fafb; /* text-white */
            border-color: #4b5563; /* border-gray-600 */
        }

        label {
            @apply text-sm font-medium;
        }

        .dark label {
            color: #e5e7eb; /* text-gray-200 */
        }

        select option {
            background-color: #ffffff;
            color: #000000;
        }

        .dark select option {
            background-color: #1f2937;
            color: #ffffff;
        }
    </style>


@endpush