@php
    $prefix = $mode . '-bumdes';
    $currentProvinsiId = old('provinsi_id', $pengurus?->desaKelurahan?->kecamatan?->kabupatenKota?->provinsi_id);
    $currentKabupaten = $pengurus?->desaKelurahan?->kecamatan?->kabupatenKota;
    $currentKecamatan = $pengurus?->desaKelurahan?->kecamatan;
    $currentDesa = $pengurus?->desaKelurahan;
    $currentJabatan = $pengurus?->jabatan instanceof \App\Enums\Bumdes\JabatanBumdes ? $pengurus->jabatan->value : $pengurus?->jabatan;
    $currentPendidikan = $pengurus?->pendidikan_terakhir instanceof \App\Enums\Pendidikan ? $pengurus->pendidikan_terakhir->value : $pengurus?->pendidikan_terakhir;
@endphp

<h5 class="pb-4 border-bottom mb-4">Data Pribadi</h5>
<div class="row">
    <div class="col-md-3 mb-4 form-control-validation">
        <label class="form-label" for="{{ $prefix }}-nama">Nama Pengurus BUMDes<span class="text-danger">*</span></label>
        <input type="text" class="form-control @error('nama') is-invalid @enderror" id="{{ $prefix }}-nama" name="nama" placeholder="Contoh: John Doe" value="{{ old('nama', $pengurus?->nama) }}" />
        @error('nama')<div class="error invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-3 mb-4 form-control-validation">
        <label class="form-label" for="{{ $prefix }}-jenis-kelamin">Jenis Kelamin<span class="text-danger">*</span></label>
        <select class="form-control @error('jenis_kelamin') is-invalid @enderror" id="{{ $prefix }}-jenis-kelamin" name="jenis_kelamin">
            <option value="">Pilih Jenis Kelamin</option>
            <option value="1" {{ old('jenis_kelamin', $pengurus?->jenis_kelamin) == '1' ? 'selected' : '' }}>Laki-laki</option>
            <option value="0" {{ old('jenis_kelamin', $pengurus?->jenis_kelamin) == '0' ? 'selected' : '' }}>Perempuan</option>
        </select>
        @error('jenis_kelamin')<div class="error invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-3 mb-4 form-control-validation">
        <label class="form-label" for="{{ $prefix }}-tempat-lahir">Tempat Lahir<span class="text-danger">*</span></label>
        <input type="text" class="form-control @error('tempat_lahir') is-invalid @enderror" id="{{ $prefix }}-tempat-lahir" name="tempat_lahir" placeholder="Contoh: Ngada" value="{{ old('tempat_lahir', $pengurus?->tempat_lahir) }}" />
        @error('tempat_lahir')<div class="error invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-3 mb-4 form-control-validation">
        <label class="form-label" for="{{ $prefix }}-tanggal-lahir">Tanggal Lahir<span class="text-danger">*</span></label>
        <input type="text" class="form-control @error('tanggal_lahir') is-invalid @enderror" id="{{ $prefix }}-tanggal-lahir" name="tanggal_lahir" value="{{ old('tanggal_lahir', $pengurus?->tanggal_lahir?->format('d-m-Y')) }}" />
        @error('tanggal_lahir')<div class="error invalid-feedback">{{ $message }}</div>@enderror
    </div>
</div>
<div class="row">
    <div class="col-md-3 mb-4 form-control-validation">
        <label class="form-label" for="{{ $prefix }}-pendidikan-terakhir">Pendidikan Terakhir<span class="text-danger">*</span></label>
        <select class="form-control @error('pendidikan_terakhir') is-invalid @enderror" id="{{ $prefix }}-pendidikan-terakhir" name="pendidikan_terakhir">
            <option value="">Pilih Pendidikan Terakhir</option>
            @foreach($pendidikan as $value)
                <option value="{{ $value['value'] }}" {{ old('pendidikan_terakhir', $currentPendidikan) == $value['value'] ? 'selected' : '' }}>{{ $value['label'] }}</option>
            @endforeach
        </select>
        @error('pendidikan_terakhir')<div class="error invalid-feedback">{{ $message }}</div>@enderror
    </div>
</div>

<h5 class="pb-4 border-bottom mb-4 mt-4">Peran Kepengurusan BUMDes</h5>
<div class="row">
    <div class="col-md-3 mb-4 form-control-validation">
        <label class="form-label" for="{{ $prefix }}-jabatan">Jabatan/Peran<span class="text-danger">*</span></label>
        <select class="form-control @error('jabatan') is-invalid @enderror" id="{{ $prefix }}-jabatan" name="jabatan">
            <option value="">Pilih Jabatan/Peran</option>
            @foreach($jabatan as $value)
                <option value="{{ $value['value'] }}" {{ old('jabatan', $currentJabatan) == $value['value'] ? 'selected' : '' }}>{{ $value['label'] }}</option>
            @endforeach
        </select>
        @error('jabatan')<div class="error invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-3 mb-4 form-control-validation {{ old('jabatan', $currentJabatan) === \App\Enums\Bumdes\JabatanBumdes::LAINNYA->value ? '' : 'd-none' }}" id="{{ $prefix }}-jabatan-lainnya-wrapper">
        <label class="form-label" for="{{ $prefix }}-jabatan-lainnya">Jabatan Lainnya<span class="text-danger">*</span></label>
        <input type="text" class="form-control @error('jabatan_lainnya') is-invalid @enderror" id="{{ $prefix }}-jabatan-lainnya" name="jabatan_lainnya" placeholder="Contoh: Kepala Unit Usaha" value="{{ old('jabatan_lainnya', $pengurus?->jabatan_lainnya) }}" />
        @error('jabatan_lainnya')<div class="error invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-3 mb-4 form-control-validation">
        <label class="form-label" for="{{ $prefix }}-lama-menjabat">Lama Menjabat (Tahun)<span class="text-danger">*</span></label>
        <input type="number" min="0" max="80" class="form-control @error('lama_menjabat_tahun') is-invalid @enderror" id="{{ $prefix }}-lama-menjabat" name="lama_menjabat_tahun" placeholder="Contoh: 2" value="{{ old('lama_menjabat_tahun', $pengurus?->lama_menjabat_tahun) }}" />
        @error('lama_menjabat_tahun')<div class="error invalid-feedback">{{ $message }}</div>@enderror
    </div>
</div>

<h5 class="pb-4 border-bottom mb-4 mt-4">Domisili dan Kontak</h5>
<div class="row">
    <div class="col-md-12 mb-4 form-control-validation">
        <label class="form-label" for="{{ $prefix }}-alamat">Alamat<span class="text-danger">*</span></label>
        <textarea class="form-control @error('alamat') is-invalid @enderror" id="{{ $prefix }}-alamat" name="alamat" rows="2" placeholder="Contoh: Jl. Nama Jalan, Nama Dusun">{{ old('alamat', $pengurus?->alamat) }}</textarea>
        @error('alamat')<div class="error invalid-feedback">{{ $message }}</div>@enderror
    </div>
</div>
<div class="row">
    <div class="col-md-3 mb-4 form-control-validation">
        <label class="form-label" for="{{ $prefix }}-provinsi">Provinsi<span class="text-danger">*</span></label>
        <select class="form-control @error('provinsi_id') is-invalid @enderror" id="{{ $prefix }}-provinsi" name="provinsi_id">
            <option value="">Pilih Provinsi</option>
            @foreach($provinsi as $p)
                <option value="{{ $p->id }}" {{ $currentProvinsiId == $p->id ? 'selected' : '' }}>{{ $p->nama }}</option>
            @endforeach
        </select>
        @error('provinsi_id')<div class="error invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-3 mb-4 form-control-validation">
        <label class="form-label" for="{{ $prefix }}-kabupaten">Kabupaten/Kota<span class="text-danger">*</span></label>
        <select class="form-control @error('kabupaten_id') is-invalid @enderror" id="{{ $prefix }}-kabupaten" name="kabupaten_id">
            <option value="">Pilih Kabupaten/Kota</option>
            @if($currentKabupaten)
                <option value="{{ $currentKabupaten->id }}" selected>{{ $currentKabupaten->nama }}</option>
            @endif
        </select>
        @error('kabupaten_id')<div class="error invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-3 mb-4 form-control-validation">
        <label class="form-label" for="{{ $prefix }}-kecamatan">Kecamatan<span class="text-danger">*</span></label>
        <select class="form-control @error('kecamatan_id') is-invalid @enderror" id="{{ $prefix }}-kecamatan" name="kecamatan_id">
            <option value="">Pilih Kecamatan</option>
            @if($currentKecamatan)
                <option value="{{ $currentKecamatan->id }}" selected>{{ $currentKecamatan->nama }}</option>
            @endif
        </select>
        @error('kecamatan_id')<div class="error invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-3 mb-4 form-control-validation">
        <label class="form-label" for="{{ $prefix }}-desa">Desa/Kelurahan<span class="text-danger">*</span></label>
        <select class="form-control @error('desa_kelurahan_id') is-invalid @enderror" id="{{ $prefix }}-desa" name="desa_kelurahan_id">
            <option value="">Pilih Desa/Kelurahan</option>
            @if($currentDesa)
                <option value="{{ $currentDesa->id }}" selected>{{ $currentDesa->nama }}</option>
            @endif
        </select>
        @error('desa_kelurahan_id')<div class="error invalid-feedback">{{ $message }}</div>@enderror
    </div>
</div>

<div class="row">
    <div class="col-md-3 mb-4 form-control-validation">
        <label class="form-label" for="{{ $prefix }}-nomor-telepon">No HP</label>
        <input type="text" class="form-control @error('nomor_telepon') is-invalid @enderror" id="{{ $prefix }}-nomor-telepon" name="nomor_telepon" placeholder="Contoh: 081234567890" value="{{ old('nomor_telepon', $pengurus?->nomor_telepon) }}" minlength="11" maxlength="13" />
        @error('nomor_telepon')<div class="error invalid-feedback">{{ $message }}</div>@enderror
    </div>
</div>

@push('scripts')
<script>
    'use strict';
    $(document).ready(function () {
        const prefix = '#{{ $prefix }}';
        const lainnyaValue = '{{ \App\Enums\Bumdes\JabatanBumdes::LAINNYA->value }}';

        $(`${prefix}-jenis-kelamin, ${prefix}-pendidikan-terakhir, ${prefix}-jabatan`).select2();
        $(`${prefix}-tanggal-lahir`).flatpickr({
            dateFormat: 'd-m-Y'
        });

        function toggleJabatanLainnya() {
            const isLainnya = $(`${prefix}-jabatan`).val() === lainnyaValue;
            $(`${prefix}-jabatan-lainnya-wrapper`).toggleClass('d-none', !isLainnya);

            if (!isLainnya) {
                $(`${prefix}-jabatan-lainnya`).val('');
            }
        }

        $(`${prefix}-jabatan`).on('change', toggleJabatanLainnya);
        toggleJabatanLainnya();

        $(`${prefix}-provinsi`).select2().change(function(e) {
            e.preventDefault();
            const provinsiId = $(this).val();
            $(`${prefix}-kabupaten`).prop('disabled', !provinsiId).val('').trigger('change');
            $(`${prefix}-kecamatan`).prop('disabled', true).val('').trigger('change');
            $(`${prefix}-desa`).prop('disabled', true).val('').trigger('change');

            if (provinsiId) {
                $.ajax({
                    url: '{{ route("kabupatenkota.byprovinsi", ":id") }}'.replace(':id', provinsiId) + '?all_wilayah=1',
                    method: 'GET',
                    success: function(data) {
                        $(`${prefix}-kabupaten`).empty().append('<option value="">Pilih Kabupaten/Kota</option>');
                        data.forEach(function(kabupaten) {
                            $(`${prefix}-kabupaten`).append('<option value="' + kabupaten.id + '">' + kabupaten.nama + '</option>');
                        });
                    }
                });
            }
        });

        $(`${prefix}-kabupaten`).select2().change(function(e) {
            e.preventDefault();
            const kabupatenId = $(this).val();
            $(`${prefix}-kecamatan`).prop('disabled', !kabupatenId).val('').trigger('change');
            $(`${prefix}-desa`).prop('disabled', true).val('').trigger('change');

            if (kabupatenId) {
                $.ajax({
                    url: '{{ route("kecamatan.bykabupatenkota", ":id") }}'.replace(':id', kabupatenId) + '?all_wilayah=1',
                    method: 'GET',
                    success: function(data) {
                        $(`${prefix}-kecamatan`).empty().append('<option value="">Pilih Kecamatan</option>');
                        data.forEach(function(kecamatan) {
                            $(`${prefix}-kecamatan`).append('<option value="' + kecamatan.id + '">' + kecamatan.nama + '</option>');
                        });
                    }
                });
            }
        });

        $(`${prefix}-kecamatan`).select2().change(function(e) {
            e.preventDefault();
            const kecamatanId = $(this).val();
            $(`${prefix}-desa`).prop('disabled', !kecamatanId).val('').trigger('change');

            if (kecamatanId) {
                $.ajax({
                    url: '{{ route("desakelurahan.bykecamatan", ":id") }}'.replace(':id', kecamatanId) + '?all_wilayah=1',
                    method: 'GET',
                    success: function(data) {
                        $(`${prefix}-desa`).empty().append('<option value="">Pilih Desa/Kelurahan</option>');
                        data.forEach(function(desa) {
                            $(`${prefix}-desa`).append('<option value="' + desa.id + '">' + desa.nama + '</option>');
                        });
                    }
                });
            }
        });

        $(`${prefix}-desa`).select2();

        $('#{{ $mode }}BumdesForm').validate({
            rules: {
                nama: { required: true },
                jenis_kelamin: { required: true },
                tempat_lahir: { required: true },
                tanggal_lahir: { required: true },
                pendidikan_terakhir: { required: true },
                jabatan: { required: true },
                jabatan_lainnya: {
                    required: function() {
                        return $(`${prefix}-jabatan`).val() === lainnyaValue;
                    }
                },
                lama_menjabat_tahun: { required: true, digits: true, min: 0, max: 80 },
                alamat: { required: true },
                provinsi_id: { required: true },
                kabupaten_id: { required: true },
                kecamatan_id: { required: true },
                desa_kelurahan_id: { required: true },
                nomor_telepon: { required: false, digits: true, minlength: 11, maxlength: 13 }
            },
            messages: {
                nama: { required: 'Nama pengurus BUMDes wajib diisi' },
                jenis_kelamin: { required: 'Jenis kelamin wajib dipilih' },
                tempat_lahir: { required: 'Tempat lahir wajib diisi' },
                tanggal_lahir: { required: 'Tanggal lahir wajib diisi' },
                pendidikan_terakhir: { required: 'Pendidikan terakhir wajib dipilih' },
                jabatan: { required: 'Jabatan/peran wajib dipilih' },
                jabatan_lainnya: { required: 'Jabatan lainnya wajib diisi' },
                lama_menjabat_tahun: {
                    required: 'Lama menjabat wajib diisi',
                    digits: 'Lama menjabat harus berupa angka tahun',
                    min: 'Lama menjabat tidak boleh kurang dari 0 tahun',
                    max: 'Lama menjabat tidak boleh lebih dari 80 tahun'
                },
                alamat: { required: 'Alamat wajib diisi' },
                provinsi_id: { required: 'Provinsi wajib dipilih' },
                kabupaten_id: { required: 'Kabupaten/Kota wajib dipilih' },
                kecamatan_id: { required: 'Kecamatan wajib dipilih' },
                desa_kelurahan_id: { required: 'Desa/Kelurahan wajib dipilih' },
                nomor_telepon: {
                    digits: 'Nomor telepon harus berupa angka',
                    minlength: 'Nomor telepon minimal 11 digit',
                    maxlength: 'Nomor telepon maksimal 13 digit'
                }
            },
            errorElement: 'div',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-control-validation').append(error);
            },
            highlight: function (element) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element) {
                $(element).removeClass('is-invalid');
            }
        });
    });
</script>
@endpush