@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" />
    <style>
        .choices__list--dropdown {
            z-index: 99 !important;
            background-color: white !important;
        }
    </style>
@endpush

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
    <script>
        const dataKabupatenKotas = @json($kabupatenKotas);
        const dataKecamatans = @json($kecamatans);
        const dataKelurahanDesas = @json($kelurahanDesas);
        const dataTps = @json($tps);

        const provinsiIdChoice = new Choices('#provinsi_id');
        const kabupatenKotaIdChoice = new Choices('#kabupaten_kota_id');
        const kecamatanIdChoice = new Choices('#kecamatan_id');
        const kelurahanDesaIdChoice = new Choices('#kelurahan_desa_id');
        const tpsIdChoice = new Choices('#tps_id');

        const valueProvinsiId = '{{ old('provinsi_id', @$data->provinsi_id) }}';
        const valueKabupatenKotaId = '{{ old('kabupaten_kota_id', @$data->kabupaten_kota_id) }}';
        const valueKecamatanId = '{{ old('kecamatan_id', @$data->kecamatan_id) }}';
        const valueKelurahanDesaId = '{{ old('kelurahan_desa_id', @$data->kelurahan_desa_id) }}';
        const valueTpsId = '{{ old('tps_id', @$data->tps_id) }}';

        function filterKabupatenKota(provinsiId) {
            return dataKabupatenKotas.filter(kabupatenKota => kabupatenKota.provinsi_id == provinsiId);
        }

        function filterKecamatan(kabupatenKotaId) {
            return dataKecamatans.filter(kecamatan => kecamatan.kabupaten_kota_id == kabupatenKotaId);
        }

        function filterKelurahanDesa(kecamatanId) {
            return dataKelurahanDesas.filter(kelurahanDesa => kelurahanDesa.kecamatan_id == kecamatanId);
        }

        function filterTps(kelurahanDesaId) {
            return dataTps.filter(tps => {
                tps.nomor = `Nomor : ${tps.nomor} | RT/RW : ${tps.rt_rw}`;
                return tps.kelurahan_desa_id == kelurahanDesaId;
            });
        }

        document.getElementById('provinsi_id').addEventListener('change', function() {
            const provinsiId = this.value;
            kabupatenKotaIdChoice.clearStore();
            kabupatenKotaIdChoice.setChoices(filterKabupatenKota(provinsiId), 'id', 'nama', false);
        });

        document.getElementById('kabupaten_kota_id').addEventListener('change', function() {
            const kabupatenKotaId = this.value;
            kecamatanIdChoice.clearStore();
            kecamatanIdChoice.setChoices(filterKecamatan(kabupatenKotaId), 'id', 'nama', false);
        });

        document.getElementById('kecamatan_id').addEventListener('change', function() {
            const kecamatanId = this.value;
            kelurahanDesaIdChoice.clearStore();
            kelurahanDesaIdChoice.setChoices(filterKelurahanDesa(kecamatanId), 'id', 'nama', false);
        });

        document.getElementById('kelurahan_desa_id').addEventListener('change', function() {
            const kelurahanDesaId = this.value;
            tpsIdChoice.clearStore();
            tpsIdChoice.setChoices(filterTps(kelurahanDesaId), 'id', 'nomor', false);
        });

        //on page load
        window.addEventListener('load', function() {
            if (valueProvinsiId) {
                provinsiIdChoice.setChoiceByValue(valueProvinsiId);
                kabupatenKotaIdChoice.setChoices(filterKabupatenKota(valueProvinsiId), 'id', 'nama', false);
            }

            if (valueKabupatenKotaId) {
                kabupatenKotaIdChoice.setChoiceByValue(parseInt(valueKabupatenKotaId));
                kecamatanIdChoice.setChoices(filterKecamatan(valueKabupatenKotaId), 'id', 'nama',
                    false);
            }

            if (valueKecamatanId) {
                kecamatanIdChoice.setChoiceByValue(parseInt(valueKecamatanId));
                kelurahanDesaIdChoice.setChoices(filterKelurahanDesa(parseInt(valueKecamatanId)), 'id', 'nama',
                    false);
            }

            if (valueKelurahanDesaId) {
                kelurahanDesaIdChoice.setChoiceByValue(parseInt(valueKelurahanDesaId));
                tpsIdChoice.setChoices(filterTps(valueKelurahanDesaId), 'id', 'nomor', false);
            }

            if (valueTpsId) {
                tpsIdChoice.setChoiceByValue(parseInt(valueTpsId));
            }
        });
    </script>
@endpush

<div class="grid grid-cols-1 md:grid-cols-2" x-data="{ role: '{{ old('role', @$data->role ?? 'admin') }}' }">
    <div class="flex flex-col gap-5.5 p-6.5">
        <div>
            <label class="mb-3 block text-sm font-medium text-black dark:text-white">
                Nama User
            </label>
            <input required type="text" name="nama" placeholder="Nama..." value="{{ old('nama', @$data->nama) }}"
                class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:text-white dark:focus:border-primary" />
            @error('nama')
                <span class="text-red-500 text-sm">{{ $message }}</span>
            @enderror
        </div>

        <div>
            <label class="mb-3 block text-sm font-medium text-black dark:text-white">
                Role
            </label>
            <select required @change="role = $event.target.value" name="role" id="role"
                class="relative z-20 w-full appearance-none rounded border border-stroke bg-transparent py-3 pl-5 pr-12 outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input">
                @foreach (['admin', 'saksi', 'koordinator-provinsi', 'koordinator-kabupaten-kota', 'koordinator-kecamatan', 'koordinator-kelurahan-desa'] as $role)
                    <option value="{{ $role }}" @if (old('role', @$data->role) == $role) selected @endif>
                        {{ $role }}
                    </option>
                @endforeach
            </select>
            @error('role')
                <span class="text-red-500 text-sm">{{ $message }}</span>
            @enderror
        </div>

        <div x-show="role !== 'admin'">
            <label class="mb-3 block text-sm font-medium text-black dark:text-white">
                Provinsi
            </label>
            <select name="provinsi_id" id="provinsi_id"
                class="relative z-20 w-full appearance-none rounded border border-stroke bg-transparent py-3 pl-5 pr-12 outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input">
                <option value="">Pilih Provinsi</option>
                @foreach ($provinsis as $provinsi)
                    <option value="{{ $provinsi->id }}" @if (old('provinsi_id', @$data->provinsi_id) == $provinsi->id) selected @endif>
                        {{ $provinsi->nama }}
                    </option>
                @endforeach
            </select>
            @error('provinsi_id')
                <span class="text-red-500 text-sm">{{ $message }}</span>
            @enderror
        </div>

        <div x-show="!['admin','koordinator-provinsi'].includes(role)">
            <label class="mb-3 block text-sm font-medium text-black dark:text-white">
                Kabupaten/Kota
            </label>
            <select name="kabupaten_kota_id" id="kabupaten_kota_id"
                class="relative z-20 w-full js-choice appearance-none rounded border border-stroke bg-transparent py-3 pl-5 pr-12 outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input">
                {{-- <option value="">Pilih Kabupaten/Kota</option>
                @foreach ($kabupatenKotas as $kabupatenKota)
                    <option value="{{ $kabupatenKota->id }}" @if (old('kabupaten_kota_id', @$data->kabupaten_kota_id) == $kabupatenKota->id) selected @endif>
                        {{ $kabupatenKota->nama }}
                    </option>
                @endforeach --}}
            </select>
            @error('kabupaten_kota_id')
                <span class="text-red-500 text-sm">{{ $message }}</span>
            @enderror
        </div>

        <div x-show="!['admin','koordinator-provinsi','koordinator-kabupaten-kota'].includes(role)">
            <label class="mb-3 block text-sm font-medium text-black dark:text-white">
                Kecamatan
            </label>
            <select name="kecamatan_id" id="kecamatan_id"
                class="relative z-20 w-full appearance-none rounded border border-stroke bg-transparent py-3 pl-5 pr-12 outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input">
                {{-- <option value="">Pilih Kecamatan</option>
                @foreach ($kecamatans as $kecamatan)
                    <option value="{{ $kecamatan->id }}" @if (old('kecamatan_id', @$data->kecamatan_id) == $kecamatan->id) selected @endif>
                        {{ $kecamatan->nama }}
                    </option>
                @endforeach --}}
            </select>
            @error('kecamatan_id')
                <span class="text-red-500 text-sm">{{ $message }}</span>
            @enderror
        </div>

        <div
            x-show="!['admin','koordinator-provinsi','koordinator-kabupaten-kota','koordinator-kecamatan'].includes(role)">
            <label class="mb-3 block text-sm font-medium text-black dark:text-white">
                Kelurahan/Desa
            </label>
            <select name="kelurahan_desa_id" id="kelurahan_desa_id"
                class="relative z-20 w-full appearance-none rounded border border-stroke bg-transparent py-3 pl-5 pr-12 outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input">

            </select>
            @error('kelurahan_desa_id')
                <span class="text-red-500 text-sm">{{ $message }}</span>
            @enderror
        </div>

        <div x-show="role == 'saksi'">
            <label class="mb-3 block text-sm font-medium text-black dark:text-white">
                TPS
            </label>
            <select name="tps_id" id="tps_id"
                class="relative z-20 w-full appearance-none rounded border border-stroke bg-transparent py-3 pl-5 pr-12 outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input">

            </select>
            @error('tps_id')
                <span class="text-red-500 text-sm">{{ $message }}</span>
            @enderror
        </div>

    </div>

    <div class="flex flex-col gap-5.5 p-6.5">
        <div>
            <label class="mb-3 block text-sm font-medium text-black dark:text-white">
                No Telp
            </label>
            <input type="number" maxlength="20" name="no_telp" placeholder="08..."
                value="{{ old('no_telp', @$data->no_telp) }}"
                class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:text-white dark:focus:border-primary" />
            @error('no_telp')
                <span class="text-red-500 text-sm">{{ $message }}</span>
            @enderror
        </div>

        <div>
            <label class="mb-3 block text-sm font-medium text-black dark:text-white">
                No Wa
            </label>
            <input type="number" maxlength="20" name="no_wa" placeholder="08..."
                value="{{ old('no_wa', @$data->no_wa) }}"
                class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:text-white dark:focus:border-primary" />
            @error('no_wa')
                <span class="text-red-500 text-sm">{{ $message }}</span>
            @enderror
        </div>
        <div>
            <label class="mb-3 block text-sm font-medium text-black dark:text-white">
                Email
            </label>
            <input required type="email" name="email" placeholder="Email..."
                value="{{ old('email', @$data->email) }}"
                class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:text-white dark:focus:border-primary" />
            @error('email')
                <span class="text-red-500 text-sm">{{ $message }}</span>
            @enderror
        </div>
        @if (isset($data))
            <div>
                <label class="mb-3 block text-sm font-medium text-black dark:text-white">
                    Password Baru
                </label>
                <input type="password" name="password_baru" placeholder="Password..." value=""
                    class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:text-white dark:focus:border-primary" />
                @error('password_baru')
                    <span class="text-red-500 text-sm">{{ $message }}</span>
                @enderror
            </div>
        @else
            <div>
                <label class="mb-3 block text-sm font-medium text-black dark:text-white">
                    Password
                </label>
                <input required type="password" name="password" placeholder="Password..." value=""
                    class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:text-white dark:focus:border-primary" />
                @error('password')
                    <span class="text-red-500 text-sm">{{ $message }}</span>
                @enderror
            </div>
        @endif

        <button
            class="inline-flex items-center justify-center rounded-md bg-primary px-10 py-4 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10 mt-6">Simpan</button>
    </div>
</div>