<div class="modal fade" id="tambahModal" tabindex="-1" aria-labelledby="tambahModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5 font-bold" id="tambahModalLabel">
                    TAMBAH DATA TINDAK LANJUT RUJUKAN SPESIALIS
                </h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="post" action="{{ route('tindak-lanjut.rujukan-spesialis.store') }}"
                    enctype="multipart/form-data" class="mt-6 space-y-6" id="rujukanForm">
                    @csrf

                    @php
                        $siswas = App\Models\Siswa::whereHas('jawabanKuesioner')->get();
                    @endphp

                    {{-- Pilih Siswa --}}
                    <div class="max-w-xl">
                        <x-input-label for="id_siswa" value="NAMA SISWA" />
                        <select id="id_siswa" name="id_siswa" class="mt-1 block w-full rounded-md" required>
                            <option value="">Pilih Siswa</option>
                            @foreach ($siswas as $siswa)
                                <option value="{{ $siswa->id_siswa }}">{{ $siswa->nama_siswa }}</option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Permasalahan --}}
                    <div class="col-12">
                        <label class="form-label font-bold">Pilih permasalahan yang dialami siswa:</label>
                        <div class="container">
                            @php
                                $chunks = \App\Models\PertanyaanKuesioner::all()->chunk(4);
                            @endphp

                            @foreach ($chunks as $chunk)
                                <div>
                                    @foreach ($chunk as $item)
                                        <div class="form-check">
                                            <input class="form-check-input pertanyaan-checkbox" type="checkbox"
                                                id="pertanyaan_{{ $item->id }}" data-id="{{ $item->id }}"
                                                value="{{ $item->id }}" name="selected_siswa[]">
                                            <label class="form-check-label" for="pertanyaan_{{ $item->id }}">
                                                {{ $item->pertanyaan }}
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                            @endforeach
                        </div>
                    </div>

                    {{-- Tujuan Rujukan --}}
                    <div class="max-w-xl">
                        <x-input-label for="tujuan_rujukan" value="RUJUKAN" />
                        <x-select-input id="tujuan_rujukan" name="tujuan_rujukan" class="mt-1 block w-full" required>
                            <option value="">Pilih Spesialis</option>
                            <option value="Psikolog">Psikolog</option>
                            <option value="Psikiater">Psikiater</option>
                        </x-select-input>
                    </div>

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

<script>
    document.getElementById('id_siswa').addEventListener('change', function() {
        let siswaId = this.value;

        document.querySelectorAll('.pertanyaan-checkbox').forEach(cb => {
            cb.checked = false;
        });

        if (siswaId) {
            fetch(`/tindak-lanjut/rujukan-spesialis/jawaban/${siswaId}`)
                .then(res => res.json())
                .then(data => {
                    Object.entries(data).forEach(([pertanyaanId, nilai]) => {
                        if (nilai >= 3) {
                            let checkbox = document.querySelector(
                                `.pertanyaan-checkbox[data-id='${pertanyaanId}']`
                            );
                            if (checkbox) {
                                checkbox.checked = true;
                            }
                        }
                    });
                });
        }
    });
</script>
