<!-- Modal: Tambah Peserta ke Kelas -->
<div class="modal fade" id="tambahPesertaKelasModal" tabindex="-1" aria-labelledby="tambahPesertaKelasLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <form action="{{ url('admin/data-umum/kelas/add-peserta') }}" method="POST">
                @csrf
                <div class="modal-header bg-success bg-opacity-25">
                    <h5 class="modal-title text-dark" id="tambahPesertaKelasLabel">Tambah Peserta ke Kelas</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Fase</label>
                            <select id="assign_fase" class="form-select">
                                <option value="">-- Pilih Fase --</option>
                                <option value="A">A</option>
                                <option value="B">B</option>
                                <option value="C">C</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Tingkat</label>
                            <select id="assign_tingkat" class="form-select">
                                <option value="">-- Pilih Tingkat --</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Nama Kelas</label>
                            <select id="assign_kelas" name="kelas_id" class="form-select" required>
                                <option value="">-- Pilih Nama Kelas --</option>
                                @foreach($kelases as $k)
                                    <option value="{{ $k->id }}" data-fase="{{ $k->fase }}" data-tingkat="{{ $k->tingkat }}" data-rombel="{{ $k->rombel }}" data-walikelas="{{ optional($k->walikelas)->name }}">{{ $k->nama }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Wali Kelas</label>
                            <input id="assign_walikelas" type="text" class="form-control" readonly>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Tingkat Awal (sumber peserta)</label>
                            <select id="assign_tingkat_awal" class="form-select">
                                <option value="">-- Pilih Tingkat Awal --</option>
                                @php
                                    $distinctTingkat = $pesertasForKelas->pluck('tingkat_awal')->filter()->unique()->values();
                                @endphp
                                @foreach($distinctTingkat as $t)
                                    <option value="{{ $t }}">{{ $t }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-12">
                            <label class="form-label">Daftar Peserta Didik</label>
                        </div>
                        <div class="col-5">
                            <select id="assign_peserta_list" class="form-select" multiple size="10">
                                <!-- source options populated by JS when tingkat_awal selected -->
                            </select>
                        </div>
                        <div class="col-2 d-flex flex-column justify-content-center align-items-center">
                            <button type="button" id="moveToTarget" class="btn btn-success mb-2" title="Tambahkan ke daftar kelas">+</button>
                            <button type="button" id="moveToSource" class="btn btn-danger" title="Kembalikan ke daftar peserta">-</button>
                        </div>
                        <div class="col-5">
                            <label class="form-label">Daftar Peserta Kelas</label>
                            <select id="assign_peserta_kelas" name="peserta_ids[]" class="form-select" multiple size="10">
                                <!-- target options (selected members) -->
                            </select>
                        </div>
                        <div class="col-12 mt-2">
                            <div class="form-text">Pilih peserta lalu gunakan tombol + / - untuk memindahkan antara daftar peserta dan daftar peserta kelas. Setelah selesai, klik Simpan.</div>
                        </div>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>
