@extends('layouts.app')

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

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

    <h4 class="fw-bold mb-3">
        {{ isset($user) ? 'Edit User' : 'Tambah User' }}
    </h4>

    {{-- ERROR --}}
    @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 --}}
        <div class="mb-2">
            <label class="form-label">Nama Lengkap</label>
            <input name="nama" class="form-control"
                value="{{ old('nama', $user->nama ?? '') }}" required>
        </div>

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

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

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

        {{-- ROLE --}}
        <div class="mb-2">
            <label class="form-label">Role</label>
            <select name="role" id="role" class="form-select" 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>
        </div>

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

            <div class="mb-2">
                <label class="form-label">Kecamatan</label>
                <select name="kecamatan_id" id="kecamatan" class="form-select">
                    <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>
            </div>

            <div class="mb-2">
                <label class="form-label">Desa</label>
                <select name="desa_id" id="desa" class="form-select">
                    <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>

        </div>

        <button class="btn btn-success mt-2">
            <i class="bi bi-save me-1"></i>
            {{ 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 --}}
<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>';
            }
        }

        toggleWilayah();
        role.addEventListener('change', toggleWilayah);

        if (kecamatan) {
            kecamatan.addEventListener('change', function() {

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

                desa.innerHTML = '<option>Memuat...</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>Gagal memuat</option>';
                    });
            });
        }
    });
</script>
@endsection