@php
    $selectedKabupatenId = (int) old('master_kabupaten_id', $item->master_kabupaten_id ?? 0);
    $selectedKecamatanId = (int) old('master_kecamatan_id', $item->master_kecamatan_id ?? 0);
    $selectedDesaId = (int) old('master_desa_id', $item->master_desa_id ?? 0);
    $selectedDesaOption = collect($desaOptions ?? [])->firstWhere('id', $selectedDesaId);
    $selectedKepalaDesaName = $selectedDesaOption?->currentKepalaDesa?->nama_lengkap
        ?? $item->kepalaDesa?->nama_lengkap
        ?? null;

    $kecamatanData = $kecamatanOptions->map(fn ($k) => [
        'id' => $k->id,
        'kabupaten_id' => $k->kabupaten_id,
        'text' => $k->nama_kecamatan . ' - ' . ($k->kabupaten->nama_kabupaten ?? 'Kabupaten belum tersambung'),
    ])->values();

    $desaData = $desaOptions->map(fn ($d) => [
        'id' => $d->id,
        'kecamatan_id' => $d->kecamatan_id,
        'text' => $d->nama_desa . ' - ' . ($d->kecamatan->nama_kecamatan ?? 'Kecamatan belum tersambung'),
        'kepala_desa_name' => $d->currentKepalaDesa->nama_lengkap ?? '',
    ])->values();
@endphp

<div class="form-section">
    <span class="form-section__title">Relasi Kelompok</span>
    <div class="row">
        <div class="form-group col-md-6">
            <label>Master Kelompok</label>
            <select name="master_kelompok_id" class="form-control @error('master_kelompok_id') is-invalid @enderror" data-searchable-select="true" data-search-placeholder="Cari master kelompok...">
                <option value="">- Pilih Master Kelompok -</option>
                @foreach($masterKelompokOptions as $masterKelompok)
                    <option value="{{ $masterKelompok->id }}" {{ (int) old('master_kelompok_id', $item->master_kelompok_id ?? 0) === (int) $masterKelompok->id ? 'selected' : '' }}>
                        {{ $masterKelompok->nama_kelompok }} ({{ $masterKelompok->kode_kelompok }})
                    </option>
                @endforeach
            </select>
            @error('master_kelompok_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
        </div>

        <div class="form-group col-md-6">
            <label>Dosen Pembimbing Lapangan</label>
            <select name="dosen_pembimbing_lapangan_id" class="form-control @error('dosen_pembimbing_lapangan_id') is-invalid @enderror" data-searchable-select="true" data-search-placeholder="Cari dosen pembimbing lapangan...">
                <option value="">- Pilih Dosen Pembimbing Lapangan -</option>
                @foreach($dosenOptions as $dosen)
                    <option value="{{ $dosen->id }}" {{ (int) old('dosen_pembimbing_lapangan_id', $item->dosen_pembimbing_lapangan_id ?? 0) === (int) $dosen->id ? 'selected' : '' }}>
                        {{ $dosen->nama_lengkap }} - {{ $dosen->perguruanTinggi->nama_perguruan_tinggi ?? 'Perguruan tinggi belum tersambung' }}@if($dosen->nidn_nuptk) ({{ $dosen->nidn_nuptk }})@endif
                    </option>
                @endforeach
            </select>
            @error('dosen_pembimbing_lapangan_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
            <small class="text-muted">Pilih dosen pembimbing lapangan utama untuk kelompok ini.</small>
        </div>
    </div>
</div>

<div class="form-section">
    <span class="form-section__title">Akademik dan Peserta</span>
    <div class="row">
        <div class="form-group col-md-12">
            <label>Program Studi</label>
            <select name="master_program_studi_id" class="form-control @error('master_program_studi_id') is-invalid @enderror" data-searchable-select="true" data-search-placeholder="Cari program studi...">
                <option value="">- Multi Program Studi / Tidak Dibatasi -</option>
                @foreach($programStudiOptions as $programStudi)
                    <option value="{{ $programStudi->id }}" {{ (int) old('master_program_studi_id', $item->master_program_studi_id ?? 0) === (int) $programStudi->id ? 'selected' : '' }}>
                        {{ $programStudi->nama_program_studi }}@if($programStudi->jenjang) ({{ $programStudi->jenjang }})@endif - {{ $programStudi->perguruanTinggi->nama_perguruan_tinggi ?? 'PT belum tersambung' }}
                    </option>
                @endforeach
            </select>
            @error('master_program_studi_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
            <small class="text-muted">Kosongkan bila satu kelompok boleh diisi beberapa program studi.</small>
        </div>
    </div>
</div>

<div class="form-section">
    <span class="form-section__title">Wilayah Penempatan</span>
    <div class="row">
        <div class="form-group col-md-4">
            <label>Kabupaten</label>
            <select name="master_kabupaten_id" class="form-control @error('master_kabupaten_id') is-invalid @enderror" data-searchable-select="true" data-search-placeholder="Cari kabupaten...">
                <option value="">- Pilih Kabupaten -</option>
                @foreach($kabupatenOptions as $kabupaten)
                    <option value="{{ $kabupaten->id }}" {{ (int) old('master_kabupaten_id', $item->master_kabupaten_id ?? 0) === (int) $kabupaten->id ? 'selected' : '' }}>
                        {{ $kabupaten->nama_kabupaten }}@if($kabupaten->provinsi) - {{ $kabupaten->provinsi }}@endif
                    </option>
                @endforeach
            </select>
            @error('master_kabupaten_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
        </div>

        <div class="form-group col-md-4">
            <label>Kecamatan</label>
            <select name="master_kecamatan_id" class="form-control @error('master_kecamatan_id') is-invalid @enderror" data-searchable-select="true" data-search-placeholder="Cari kecamatan...">
                <option value="">- Pilih Kecamatan -</option>
                @foreach($kecamatanOptions as $kecamatan)
                    <option
                        value="{{ $kecamatan->id }}"
                        data-kabupaten-id="{{ $kecamatan->kabupaten_id }}"
                        {{ (int) old('master_kecamatan_id', $item->master_kecamatan_id ?? 0) === (int) $kecamatan->id ? 'selected' : '' }}
                    >
                        {{ $kecamatan->nama_kecamatan }} - {{ $kecamatan->kabupaten->nama_kabupaten ?? 'Kabupaten belum tersambung' }}
                    </option>
                @endforeach
            </select>
            @error('master_kecamatan_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
            <small class="text-muted">Pilih kabupaten terlebih dahulu untuk memfilter kecamatan.</small>
        </div>

        <div class="form-group col-md-4">
            <label>Desa</label>
            <select name="master_desa_id" class="form-control @error('master_desa_id') is-invalid @enderror" data-searchable-select="true" data-search-placeholder="Cari desa...">
                <option value="">- Pilih Desa -</option>
                @foreach($desaOptions as $desa)
                    <option
                        value="{{ $desa->id }}"
                        data-kecamatan-id="{{ $desa->kecamatan_id }}"
                        data-kepala-desa-name="{{ $desa->currentKepalaDesa->nama_lengkap ?? '' }}"
                        {{ (int) old('master_desa_id', $item->master_desa_id ?? 0) === (int) $desa->id ? 'selected' : '' }}
                    >
                        {{ $desa->nama_desa }} - {{ $desa->kecamatan->nama_kecamatan ?? 'Kecamatan belum tersambung' }}
                    </option>
                @endforeach
            </select>
            @error('master_desa_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
            <small class="text-muted">Pilih kecamatan terlebih dahulu untuk memfilter desa.</small>
        </div>

        <div class="form-group col-12 mb-0">
            <div
                class="linked-head-card {{ $selectedKepalaDesaName ? '' : 'linked-head-card--empty' }}"
                id="linked_kepala_desa_card"
                data-empty-text="Belum ada kepala desa aktif yang terhubung ke desa ini."
            >
                <span class="linked-head-card__label">Kepala Desa Terhubung</span>
                <strong class="linked-head-card__name" id="linked_kepala_desa_name">
                    {{ $selectedKepalaDesaName ?: 'Belum ada kepala desa aktif yang terhubung ke desa ini.' }}
                </strong>
                <small class="text-muted d-block mt-2">Nama kepala desa diambil otomatis dari modul Kepala Desa berdasarkan desa yang dipilih.</small>
            </div>
        </div>
    </div>
</div>

<div class="form-section">
    <span class="form-section__title">Distribusi Anggota per Zona</span>
    <p class="text-muted small">Isi jumlah mahasiswa anggota kelompok yang berasal dari masing-masing zona. Bagian ini bersifat opsional dan digunakan untuk laporan ringkasan.</p>
    <div class="row">
        <div class="form-group col-md-3">
            <label for="anggota_timor">Timor</label>
            <input type="number" id="anggota_timor" name="anggota_timor" min="0" class="form-control @error('anggota_timor') is-invalid @enderror" value="{{ old('anggota_timor', $item->anggota_timor ?? '') }}">
            @error('anggota_timor') <div class="invalid-feedback">{{ $message }}</div> @enderror
        </div>
        <div class="form-group col-md-3">
            <label for="anggota_flores">Flores</label>
            <input type="number" id="anggota_flores" name="anggota_flores" min="0" class="form-control @error('anggota_flores') is-invalid @enderror" value="{{ old('anggota_flores', $item->anggota_flores ?? '') }}">
            @error('anggota_flores') <div class="invalid-feedback">{{ $message }}</div> @enderror
        </div>
        <div class="form-group col-md-3">
            <label for="anggota_sumba">Sumba</label>
            <input type="number" id="anggota_sumba" name="anggota_sumba" min="0" class="form-control @error('anggota_sumba') is-invalid @enderror" value="{{ old('anggota_sumba', $item->anggota_sumba ?? '') }}">
            @error('anggota_sumba') <div class="invalid-feedback">{{ $message }}</div> @enderror
        </div>
        <div class="form-group col-md-3">
            <label for="anggota_alor">Alor</label>
            <input type="number" id="anggota_alor" name="anggota_alor" min="0" class="form-control @error('anggota_alor') is-invalid @enderror" value="{{ old('anggota_alor', $item->anggota_alor ?? '') }}">
            @error('anggota_alor') <div class="invalid-feedback">{{ $message }}</div> @enderror
        </div>
    </div>
    <div class="row">
        <div class="form-group col-12 mb-0">
            <div class="alert alert-light border" role="alert" style="border-radius: 12px;">
                <strong>Total distribusi zona:</strong> <span id="zone_total">0</span> mahasiswa
            </div>
        </div>
    </div>
</div>

<div class="form-section">
    <span class="form-section__title">Anggota Mahasiswa</span>
    @php
        $selectedMahasiswaIds = collect(old('mahasiswa_ids', isset($item) ? $item->mahasiswas->pluck('id')->all() : []))
            ->map(fn ($id) => (int) $id)
            ->filter(fn ($id) => $id > 0)
            ->unique()
            ->all();
    @endphp
    <div class="form-group mb-0">
        <label for="mahasiswa_search">Pilih Anggota Kelompok</label>
        <input type="text" id="mahasiswa_search" class="form-control mb-3" placeholder="Cari nama mahasiswa, NIM, semester, program studi, atau perguruan tinggi...">
        <div id="member_picker_notice" class="alert alert-warning d-none py-2 px-3 mb-3" role="alert" style="border-radius: 12px; font-size: .88rem;">
            <i class="fas fa-exclamation-circle mr-1"></i> <span id="member_picker_notice_text"></span>
        </div>
        <div class="member-picker">
            <div id="mahasiswa_picker" class="member-picker__options @error('mahasiswa_ids') is-invalid @enderror">
                @foreach($mahasiswaOptions as $mahasiswa)
                    @php
                        $isSelected = in_array((int) $mahasiswa->id, $selectedMahasiswaIds, true);
                    @endphp
                    <button
                        type="button"
                        class="member-option {{ $isSelected ? 'is-selected' : '' }}"
                        data-value="{{ $mahasiswa->id }}"
                        data-member-name="{{ $mahasiswa->nama_lengkap }}"
                        data-member-nim="{{ $mahasiswa->nim }}"
                        data-member-semester="{{ $mahasiswa->semester }}"
                        data-member-study="{{ $mahasiswa->nama_program_studi }}"
                        data-member-campus="{{ $mahasiswa->perguruanTinggi->singkatan ?? $mahasiswa->perguruanTinggi->nama_perguruan_tinggi ?? 'PT belum tersambung' }}"
                    >
                        <span class="member-option__check">
                            <i class="fas fa-check"></i>
                        </span>
                        <span class="member-option__body">
                            <span class="member-option__name">{{ $mahasiswa->nama_lengkap }}</span>
                            <span class="member-option__meta">
                                NIM {{ $mahasiswa->nim }} · Semester {{ $mahasiswa->semester }} · {{ $mahasiswa->nama_program_studi }} · {{ $mahasiswa->perguruanTinggi->singkatan ?? $mahasiswa->perguruanTinggi->nama_perguruan_tinggi ?? 'PT belum tersambung' }}
                            </span>
                            @if($mahasiswa->dataKelompok?->masterKelompok)
                                <span class="member-option__badge">Saat ini: {{ $mahasiswa->dataKelompok->masterKelompok->nama_kelompok }}</span>
                            @endif
                        </span>
                    </button>
                @endforeach
            </div>
        </div>
        @error('mahasiswa_ids') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
        <small class="text-muted d-block mt-2">Klik item mahasiswa pada daftar untuk menambahkan atau menghapus dari anggota terpilih. Maksimal 20 anggota.</small>
        <div class="selected-members mt-3">
            <div class="selected-members__header">
                <div class="selected-members__title">Anggota Terpilih</div>
                <div class="selected-members__counter" id="selected_members_counter">0/20 anggota</div>
            </div>
            <div id="selected_members_inputs"></div>
            <div class="selected-members__list" id="selected_members_list"></div>
            <div class="selected-members__empty text-muted small" id="selected_members_empty">Belum ada mahasiswa yang dipilih.</div>
        </div>
    </div>
</div>

<div class="form-section mb-0">
    <span class="form-section__title">Status Data</span>
    <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" id="is_active" name="is_active" value="1" {{ old('is_active', $item->is_active ?? true) ? 'checked' : '' }}>
        <label class="custom-control-label" for="is_active">Aktif</label>
    </div>
</div>

<style>
    .linked-head-card {
        padding: 1rem 1.05rem;
        border: 1px dashed #bfd0e0;
        border-radius: 16px;
        background: linear-gradient(180deg, #fcfdff 0%, #f8fbff 100%);
    }
    .linked-head-card--empty {
        background: linear-gradient(180deg, #fffdf8 0%, #fff7ec 100%);
        border-color: #f2d7a6;
    }
    .linked-head-card__label {
        display: block;
        margin-bottom: .35rem;
        font-size: .82rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #5b6b79;
    }
    .linked-head-card__name {
        display: block;
        color: #22313f;
        font-size: 1rem;
    }
    .member-picker {
        display: grid;
        gap: .85rem;
    }
    .member-picker__options {
        display: grid;
        gap: .55rem;
        max-height: 420px;
        overflow-y: auto;
        padding: .5rem;
        border: 1px solid #dce7f1;
        border-radius: 16px;
        background: #f8fafc;
    }
    .member-picker__options.is-invalid {
        border-color: #dc3545;
    }
    .member-option {
        display: flex;
        align-items: flex-start;
        gap: .75rem;
        width: 100%;
        text-align: left;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        padding: .75rem .85rem;
        background: #fff;
        transition: all .15s ease;
        cursor: pointer;
    }
    .member-option:hover {
        border-color: #0d6efd;
        box-shadow: 0 4px 14px rgba(13, 110, 253, .08);
    }
    .member-option.is-selected {
        border-color: #0f9f7a;
        background: linear-gradient(180deg, #f0fdf9 0%, #e6f9f2 100%);
    }
    .member-option.is-selected .member-option__check {
        background: linear-gradient(135deg, #0f9f7a 0%, #38c8a1 100%);
        color: #fff;
        border-color: transparent;
    }
    .member-option__check {
        flex: 0 0 24px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        border: 2px solid #cbd5e1;
        color: transparent;
        transition: all .15s ease;
        margin-top: .15rem;
    }
    .member-option__body {
        display: flex;
        flex-direction: column;
        gap: .15rem;
        min-width: 0;
    }
    .member-option__name {
        font-weight: 700;
        color: #1f2d3d;
        font-size: .95rem;
    }
    .member-option__meta {
        font-size: .82rem;
        color: #6c7a89;
    }
    .member-option__badge {
        display: inline-flex;
        align-self: flex-start;
        margin-top: .35rem;
        font-size: .75rem;
        font-weight: 700;
        color: #9a6700;
        background: rgba(255, 193, 7, .15);
        padding: .2rem .55rem;
        border-radius: 999px;
    }
    .selected-members {
        padding: 1rem 1.05rem;
        border: 1px dashed #bfd0e0;
        border-radius: 16px;
        background: linear-gradient(180deg, #fcfffe 0%, #f6fbf9 100%);
    }
    .selected-members__title {
        font-weight: 700;
        color: #22313f;
    }
    .selected-members__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .85rem;
        margin-bottom: .85rem;
        flex-wrap: wrap;
    }
    .selected-members__counter {
        display: inline-flex;
        align-items: center;
        padding: .3rem .68rem;
        border-radius: 999px;
        background: #e8f7f1;
        color: #0f8b6b;
        font-size: .78rem;
        font-weight: 700;
        line-height: 1.2;
    }
    .selected-members__counter.is-full {
        background: rgba(255, 193, 7, .18);
        color: #9a6700;
    }
    .selected-members__list {
        display: grid;
        gap: .7rem;
    }
    .selected-member-chip {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: .8rem;
        padding: .85rem .95rem;
        border-radius: 14px;
        background: #fff;
        border: 1px solid #dce7f1;
    }
    .selected-member-chip__name {
        font-weight: 700;
        color: #1f2d3d;
    }
    .selected-member-chip__meta {
        display: block;
        margin-top: .25rem;
        color: #6c7a89;
        font-size: .82rem;
        line-height: 1.45;
    }
    .selected-member-chip__remove {
        border: 0;
        background: rgba(220, 53, 69, .12);
        color: #b42333;
        border-radius: 10px;
        padding: .42rem .7rem;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }
    .selected-member-chip__remove:hover {
        background: rgba(220, 53, 69, .18);
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const kabupatenSelect = document.querySelector('select[name="master_kabupaten_id"]');
        const kecamatanSelect = document.querySelector('select[name="master_kecamatan_id"]');
        const desaSelect = document.querySelector('select[name="master_desa_id"]');
        const linkedKepalaDesaCard = document.getElementById('linked_kepala_desa_card');
        const linkedKepalaDesaName = document.getElementById('linked_kepala_desa_name');
        const searchInput = document.getElementById('mahasiswa_search');
        const picker = document.getElementById('mahasiswa_picker');
        const pickerNotice = document.getElementById('member_picker_notice');
        const pickerNoticeText = document.getElementById('member_picker_notice_text');
        const selectedMembersList = document.getElementById('selected_members_list');
        const selectedMembersEmpty = document.getElementById('selected_members_empty');
        const selectedMembersInputs = document.getElementById('selected_members_inputs');
        const selectedMembersCounter = document.getElementById('selected_members_counter');
        const selectedMemberIds = new Set(@json($selectedMahasiswaIds));

        const kecamatanOptions = @json($kecamatanData);
        const desaOptionsData = @json($desaData);

        const selectedKabupatenId = {{ $selectedKabupatenId }};
        const selectedKecamatanId = {{ $selectedKecamatanId }};
        const selectedDesaId = {{ $selectedDesaId }};

        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

        function populateKecamatan(kabupatenId, preserveSelected) {
            if (!kecamatanSelect) {
                return;
            }

            const currentSelectedId = preserveSelected ? parseInt(kecamatanSelect.value) || 0 : 0;
            let html = '<option value="">- Pilih Kecamatan -</option>';

            kecamatanOptions.forEach(function (option) {
                if (kabupatenId && option.kabupaten_id === kabupatenId) {
                    const isSelected = preserveSelected && option.id === currentSelectedId ? 'selected' : '';
                    html += '<option value="' + option.id + '" data-kabupaten-id="' + option.kabupaten_id + '" ' + isSelected + '>' + escapeHtml(option.text) + '</option>';
                }
            });

            kecamatanSelect.innerHTML = html;
            refreshSearchableSelect(kecamatanSelect);
            populateDesa(kecamatanSelect.value || 0, false);
        }

        function populateDesa(kecamatanId, preserveSelected) {
            if (!desaSelect) {
                return;
            }

            const currentSelectedId = preserveSelected ? parseInt(desaSelect.value) || 0 : 0;
            let html = '<option value="">- Pilih Desa -</option>';

            desaOptionsData.forEach(function (option) {
                if (kecamatanId && option.kecamatan_id === kecamatanId) {
                    const isSelected = preserveSelected && option.id === currentSelectedId ? 'selected' : '';
                    html += '<option value="' + option.id + '" data-kecamatan-id="' + option.kecamatan_id + '" data-kepala-desa-name="' + escapeHtml(option.kepala_desa_name) + '" ' + isSelected + '>' + escapeHtml(option.text) + '</option>';
                }
            });

            desaSelect.innerHTML = html;
            refreshSearchableSelect(desaSelect);
            desaSelect.dispatchEvent(new Event('change', { bubbles: true }));
        }

        function initCascadingWilayah() {
            if (!kabupatenSelect || !kecamatanSelect || !desaSelect) {
                return;
            }

            kabupatenSelect.addEventListener('change', function () {
                populateKecamatan(parseInt(this.value) || 0, false);
            });

            kecamatanSelect.addEventListener('change', function () {
                populateDesa(parseInt(this.value) || 0, false);
            });

            if (selectedKabupatenId) {
                populateKecamatan(selectedKabupatenId, true);
            }

            if (selectedKecamatanId) {
                populateDesa(selectedKecamatanId, true);
            }
        }

        function syncZoneTotal() {
            const fields = ['anggota_timor', 'anggota_flores', 'anggota_sumba', 'anggota_alor'];
            let total = 0;
            fields.forEach(function (field) {
                const input = document.getElementById(field);
                if (input) {
                    total += parseInt(input.value) || 0;
                }
            });
            const totalEl = document.getElementById('zone_total');
            if (totalEl) {
                totalEl.textContent = total.toString();
            }
        }

        function initZoneTotals() {
            const fields = ['anggota_timor', 'anggota_flores', 'anggota_sumba', 'anggota_alor'];
            fields.forEach(function (field) {
                const input = document.getElementById(field);
                if (input) {
                    input.addEventListener('input', syncZoneTotal);
                }
            });
            syncZoneTotal();
        }

        initCascadingWilayah();
        initZoneTotals();

        function syncLinkedKepalaDesa() {
            if (!desaSelect || !linkedKepalaDesaCard || !linkedKepalaDesaName) {
                return;
            }

            const selectedOption = desaSelect.options[desaSelect.selectedIndex];
            const kepalaDesaName = selectedOption && selectedOption.value ? (selectedOption.dataset.kepalaDesaName || '') : '';
            const emptyText = linkedKepalaDesaCard.dataset.emptyText || 'Belum ada kepala desa aktif yang terhubung ke desa ini.';

            linkedKepalaDesaName.textContent = kepalaDesaName || emptyText;
            linkedKepalaDesaCard.classList.toggle('linked-head-card--empty', kepalaDesaName === '');
        }

        if (desaSelect) {
            desaSelect.addEventListener('change', syncLinkedKepalaDesa);
            syncLinkedKepalaDesa();
        }

        if (!searchInput || !picker || !selectedMembersList || !selectedMembersEmpty || !selectedMembersInputs || !selectedMembersCounter) {
            return;
        }

        const optionById = {};
        const optionButtons = Array.from(picker.querySelectorAll('.member-option'));

        optionButtons.forEach(function (button) {
            optionById[Number(button.dataset.value)] = button;
        });

        function showPickerNotice(message) {
            if (!pickerNotice || !pickerNoticeText) {
                return;
            }
            pickerNoticeText.textContent = message;
            pickerNotice.classList.remove('d-none');
            window.clearTimeout(pickerNotice.dataset.timeoutId);
            pickerNotice.dataset.timeoutId = window.setTimeout(function () {
                pickerNotice.classList.add('d-none');
            }, 3000);
        }

        function findDuplicateOption(button) {
            const newName = button.dataset.memberName.trim().toLowerCase();
            const newNim = button.dataset.memberNim.trim();
            const newStudy = button.dataset.memberStudy.trim().toLowerCase();

            for (const id of selectedMemberIds) {
                const existing = optionById[id];
                if (!existing) {
                    continue;
                }
                const sameName = existing.dataset.memberName.trim().toLowerCase() === newName;
                const sameNim = existing.dataset.memberNim.trim() === newNim;
                const sameStudy = existing.dataset.memberStudy.trim().toLowerCase() === newStudy;
                if (sameName && sameNim && sameStudy) {
                    return existing;
                }
            }

            return null;
        }

        function toggleMember(button) {
            const id = Number(button.dataset.value);

            if (selectedMemberIds.has(id)) {
                selectedMemberIds.delete(id);
                renderSelectedMembers();
                return;
            }

            if (selectedMemberIds.size >= 20) {
                showPickerNotice('Satu kelompok maksimal 20 mahasiswa.');
                return;
            }

            const duplicate = findDuplicateOption(button);
            if (duplicate) {
                showPickerNotice('Mahasiswa dengan NIM, nama, dan program studi yang sama sudah ada dalam daftar anggota terpilih.');
                return;
            }

            selectedMemberIds.add(id);
            renderSelectedMembers();
        }

        searchInput.addEventListener('input', function () {
            const keyword = this.value.trim().toLowerCase();

            optionButtons.forEach(function (button) {
                const text = button.textContent.toLowerCase();
                button.classList.toggle('d-none', keyword !== '' && !text.includes(keyword));
            });
        });

        picker.addEventListener('click', function (event) {
            const button = event.target.closest('.member-option');
            if (!button) {
                return;
            }
            event.preventDefault();
            toggleMember(button);
        });

        function renderSelectedMembers() {
            optionButtons.forEach(function (button) {
                button.classList.toggle('is-selected', selectedMemberIds.has(Number(button.dataset.value)));
            });

            const selectedOptions = Array.from(selectedMemberIds)
                .map(function (id) { return optionById[id]; })
                .filter(function (button) { return !!button; });

            selectedMembersList.innerHTML = '';
            selectedMembersInputs.innerHTML = '';
            selectedMembersCounter.textContent = selectedOptions.length + '/20 anggota';
            selectedMembersCounter.classList.toggle('is-full', selectedOptions.length >= 20);

            if (selectedOptions.length === 0) {
                selectedMembersEmpty.classList.remove('d-none');
                return;
            }

            selectedMembersEmpty.classList.add('d-none');

            selectedOptions.forEach(function (button) {
                const hiddenInput = document.createElement('input');
                hiddenInput.type = 'hidden';
                hiddenInput.name = 'mahasiswa_ids[]';
                hiddenInput.value = button.dataset.value;
                selectedMembersInputs.appendChild(hiddenInput);

                const item = document.createElement('div');
                item.className = 'selected-member-chip';

                const details = document.createElement('div');
                details.innerHTML =
                    '<div class="selected-member-chip__name">' + escapeHtml(button.dataset.memberName) + '</div>' +
                    '<span class="selected-member-chip__meta">NIM ' + escapeHtml(button.dataset.memberNim) +
                    ' · Semester ' + escapeHtml(button.dataset.memberSemester) +
                    ' · ' + escapeHtml(button.dataset.memberStudy) +
                    ' · ' + escapeHtml(button.dataset.memberCampus) + '</span>';

                const removeButton = document.createElement('button');
                removeButton.type = 'button';
                removeButton.className = 'selected-member-chip__remove';
                removeButton.textContent = 'Hapus';
                removeButton.addEventListener('click', function () {
                    selectedMemberIds.delete(Number(button.dataset.value));
                    renderSelectedMembers();
                });

                item.appendChild(details);
                item.appendChild(removeButton);
                selectedMembersList.appendChild(item);
            });
        }

        renderSelectedMembers();
    });
</script>