@extends('layouts.admin-apoteker')

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

@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">➕ Tambah Pasien Baru</h1>

    @if ($errors->any())
    <div class="p-4 mb-4 bg-red-100 text-red-800 rounded">
        <strong>Terjadi kesalahan:</strong>
        <ul class="mt-2 list-disc list-inside text-sm">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <form method="POST" action="{{ route('admin.userpatients.store') }}" enctype="multipart/form-data" class="space-y-6" autocomplete="off">
        @csrf

        {{-- Nama, Email --}}
        <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') }}" placeholder="Masukkan nama lengkap"
                    class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white p-2" required>
            </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') }}" placeholder="Masukkan email pengguna"
                    class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white p-2" required>
            </div>
        </div>

        {{-- Password --}}
        <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">Password</label>
                <input type="password" name="password" placeholder="Masukkan password awal"
                    class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white p-2" required>
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1">Konfirmasi Password</label>
                <input type="password" name="password_confirmation" placeholder="Ulangi password"
                    class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white p-2" required>
            </div>
        </div>

        {{-- No HP, KTP --}}
        <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') }}" placeholder="08xxxx"
                    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">No. KTP</label>
                <input type="text" name="ktp" value="{{ old('ktp') }}" placeholder="Nomor KTP"
                    class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white p-2">
            </div>
        </div>

        {{-- Gender & Role --}}
        <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">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') == 'Laki-laki')>Laki-laki</option>
                    <option value="Perempuan" @selected(old('gender') == 'Perempuan')>Perempuan</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1">Role</label>
                <select name="role" required
                    class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white p-2">
                    <option value="">-- Pilih Role --</option>
                    <option value="super-admin" @selected(old('role') == 'super-admin')>Super Admin</option>
                    <option value="admin" @selected(old('role') == 'admin')>Admin</option>
                    <option value="apoteker" @selected(old('role') == 'apoteker')>Apoteker</option>
                    <option value="user" @selected(old('role') == 'user')>User</option>
                    <option value="pasien" @selected(old('role') == 'pasien')>Pasien</option>
                </select>
            </div>
        </div>

        {{-- Foto --}}
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Foto</label>
            <input type="file" name="foto" accept="image/*"
                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>

        {{-- 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') }}"
                class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white p-2">
        </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') }}</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">Titik Lokasi</label>
            <input type="hidden" name="lokasi_peta" x-ref="lokasiPeta">
            <div id="map" class="rounded-lg border w-full" style="min-height: 16rem;"></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>

        <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 Pasien
            </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);
                map.invalidateSize();
                if (marker) map.removeLayer(marker);
                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;
            });
    }

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

                const defaultLatLng = [-1.5, 117];
                map = L.map('map').setView(defaultLatLng, 5);
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
                map.invalidateSize();

                L.Control.geocoder({ defaultMarkGeocode: false })
                    .on('markgeocode', 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);

                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