@extends('layouts.app')

@section('title','Form User')

@section('content')
<div class="container-fluid">

    <h4 class="fw-bold mb-3">Form User</h4>

    @if ($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0">
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <form method="POST"
        action="{{ isset($user)
            ? route('admin.users.update', $user)
            : route('admin.users.store') }}">

        @csrf
        @isset($user)
        @method('PUT')
        @endisset

        {{-- NAMA --}}
        <input name="nama" class="form-control mb-2"
            placeholder="Nama Lengkap"
            value="{{ old('nama', $user->nama ?? '') }}" required>

        {{-- NIK --}}
        <input name="nik" class="form-control mb-2"
            placeholder="NIK"
            value="{{ old('nik', $user->nik ?? '') }}" required>

        {{-- USERNAME --}}
        <input name="username" class="form-control mb-2"
            placeholder="Username"
            value="{{ old('username', $user->username ?? '') }}" required>

        {{-- EMAIL --}}
        <input type="email" name="email" class="form-control mb-2"
            placeholder="Email (Opsional)"
            value="{{ old('email', $user->email ?? '') }}">

        {{-- ROLE --}}
        <select name="role" id="role" class="form-control mb-2" required>
            <option value="">-- Pilih Role --</option>
            @foreach($roles as $role)
            <option value="{{ $role }}"
                @selected(old('role', $user->role ?? '') == $role)>
                {{ strtoupper(str_replace('_',' ', $role)) }}
            </option>
            @endforeach
        </select>

        {{-- ================== WILAYAH (KHUSUS KEPALA DESA) ================== --}}
        <div id="wilayah-desa" style="display:none">

            {{-- KECAMATAN --}}
            <select name="kecamatan_id" id="kecamatan" class="form-control mb-2">
                <option value="">-- Pilih Kecamatan --</option>
                @foreach($kecamatans as $kec)
                <option value="{{ $kec->id }}"
                    @selected(old('kecamatan_id', $user->kecamatan_id ?? '') == $kec->id)>
                    {{ $kec->nama_kecamatan }}
                </option>
                @endforeach
            </select>

            {{-- DESA --}}
            <select name="desa_id" id="desa" class="form-control mb-2">
                <option value="">-- Pilih Desa --</option>
                @isset($desas)
                @foreach($desas as $desa)
                <option value="{{ $desa->id }}"
                    @selected(old('desa_id', $user->desa_id ?? '') == $desa->id)>
                    {{ $desa->nama_desa }}
                </option>
                @endforeach
                @endisset
            </select>

        </div>

        <button class="btn btn-success">
            {{ isset($user) ? 'Update User' : 'Simpan User' }}
        </button>

        <small class="text-muted d-block mt-2">
            Jika email diisi, sistem akan mengirimkan link pengaturan password.
        </small>

    </form>
</div>

{{-- ================== SCRIPT DINAMIS ================== --}}


<script>
    document.addEventListener('DOMContentLoaded', function() {

        const role = document.getElementById('role');
        const wilayah = document.getElementById('wilayah-desa');
        const kecamatan = document.getElementById('kecamatan');
        const desa = document.getElementById('desa');

        const ROLE_KEPALA_DESA = 'kepala_desa';

        function toggleWilayah() {
            if (role.value === ROLE_KEPALA_DESA) {
                wilayah.style.display = 'block';
            } else {
                wilayah.style.display = 'none';
                if (kecamatan) kecamatan.value = '';
                if (desa) desa.innerHTML = '<option value="">-- Pilih Desa --</option>';
            }
        }

        // 🔹 tampilkan wilayah saat load
        toggleWilayah();
        role.addEventListener('change', toggleWilayah);

        // 🔥 INI BAGIAN YANG HILANG
        if (kecamatan) {
            kecamatan.addEventListener('change', function() {

                if (!this.value) {
                    desa.innerHTML = '<option value="">-- Pilih Desa --</option>';
                    return;
                }

                desa.innerHTML = '<option value="">Memuat desa...</option>';

                fetch('/admin/ajax/desa/' + this.value)
                    .then(res => res.json())
                    .then(data => {
                        desa.innerHTML = '<option value="">-- Pilih Desa --</option>';
                        data.forEach(d => {
                            desa.innerHTML +=
                                `<option value="${d.id}">${d.nama_desa}</option>`;
                        });
                    })
                    .catch(() => {
                        desa.innerHTML = '<option value="">Gagal memuat desa</option>';
                    });
            });
        }

    });
</script>





@endsection