@php
    $bagianOptions = $bagianList->map(fn ($bagian) => [
        'id' => $bagian->id,
        'nama' => $bagian->nama_bagian,
        'kantor_id' => $bagian->kantor_id,
    ]);
    $initialKantor = old('kantor_id', $userModel->kantor_id ?? null);
    $initialBagian = old('bagian_id', $userModel->bagian_id ?? null);
    $initialKategoriSurat = old('kategori_surat_id', $userModel->kategori_surat_id ?? null);
@endphp

@csrf

<div class="grid gap-6 lg:grid-cols-2">
    <div>
        <x-input-label for="name" value="Nama Lengkap" />
        <x-text-input id="name" name="name" type="text" class="mt-2 w-full"
            :value="old('name', $userModel->name ?? '')" required />
        <x-input-error :messages="$errors->get('name')" class="mt-2" />
    </div>

    <div>
        <x-input-label for="email" value="Email" />
        <x-text-input id="email" name="email" type="email" class="mt-2 w-full"
            :value="old('email', $userModel->email ?? '')" required />
        <x-input-error :messages="$errors->get('email')" class="mt-2" />
    </div>

    <div>
        <x-input-label for="password" value="Password" />
        <x-text-input id="password" name="password" type="password" class="mt-2 w-full"
            autocomplete="new-password"
            :placeholder="!empty($userModel->id) ? 'Biarkan kosong jika tidak diganti' : null"
        />
        <x-input-error :messages="$errors->get('password')" class="mt-2" />
    </div>

    <div>
        <x-input-label for="password_confirmation" value="Konfirmasi Password" />
        <x-text-input id="password_confirmation" name="password_confirmation" type="password" class="mt-2 w-full" autocomplete="new-password" />
    </div>

    <div>
        <x-input-label for="role" value="Role" />
        <select id="role" name="role" class="mt-2 w-full rounded-xl border-slate-200 dark:border-slate-700 dark:bg-slate-800" required>
            <option value="">Pilih role...</option>
            <option value="{{ \App\Models\User::ROLE_SUPERADMIN }}" @selected(old('role', $userModel->role ?? '') === \App\Models\User::ROLE_SUPERADMIN)>
                Superadmin
            </option>
            <option value="{{ \App\Models\User::ROLE_ADMIN }}" @selected(old('role', $userModel->role ?? '') === \App\Models\User::ROLE_ADMIN)>
                Admin
            </option>
        </select>
        <x-input-error :messages="$errors->get('role')" class="mt-2" />
    </div>

    <div>
        <x-input-label for="kategori_surat_id" value="Kategori Surat" />
        <select id="kategori_surat_id" name="kategori_surat_id"
            class="mt-2 w-full rounded-xl border-slate-200 dark:border-slate-700 dark:bg-slate-800">
            <option value="">Pilih kategori...</option>
            @foreach ($kategoriList as $kategori)
                <option value="{{ $kategori->id }}" @selected((string) $initialKategoriSurat === (string) $kategori->id)>
                    {{ $kategori->nama_kategori }} ({{ $kategori->kode }})
                </option>
            @endforeach
        </select>
        <x-input-error :messages="$errors->get('kategori_surat_id')" class="mt-2" />
        <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
            Wajib diisi untuk user dengan role Admin guna membatasi kategori surat.
        </p>
    </div>

    <div x-data="bagianFilter({ bagians: {{ $bagianOptions->toJson() }}, initialBagian: '{{ $initialBagian }}', initialKantor: '{{ $initialKantor }}' })" x-init="init()" class="lg:col-span-2 grid gap-6 md:grid-cols-2">
        <div>
            <x-input-label for="kantor_id" value="Kantor" />
            <select id="kantor_id" name="kantor_id"
                class="mt-2 w-full rounded-xl border-slate-200 dark:border-slate-700 dark:bg-slate-800"
                x-model="selectedKantor"
                x-on:change="handleKantorChange($event.target.value)">
                <option value="">Pilih kantor...</option>
                @foreach ($kantorList as $kantor)
                    <option value="{{ $kantor->id }}" @selected((string) $initialKantor === (string) $kantor->id)>
                        {{ $kantor->nama_kantor }}
                    </option>
                @endforeach
            </select>
            <x-input-error :messages="$errors->get('kantor_id')" class="mt-2" />
        </div>

        <div>
            <x-input-label for="bagian_id" value="Bagian" />
            <select id="bagian_id" name="bagian_id"
                class="mt-2 w-full rounded-xl border-slate-200 dark:border-slate-700 dark:bg-slate-800"
                x-model="selectedBagian">
                <option value="">Pilih bagian...</option>
                <template x-for="bagian in filteredBagians" :key="bagian.id">
                    <option :value="bagian.id" x-text="bagian.nama"></option>
                </template>
            </select>
            <x-input-error :messages="$errors->get('bagian_id')" class="mt-2" />
        </div>
    </div>
</div>

<div class="mt-8 flex items-center justify-end gap-3">
    <a href="{{ route('users.index') }}" class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-600 hover:bg-slate-100 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800">
        Batal
    </a>
    <x-primary-button class="px-6 py-2.5">
        Simpan
    </x-primary-button>
</div>