<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Form Kuesioner') }}
        </h2>
    </x-slot>

    <div class="max-w-5xl mx-auto bg-white dark:bg-gray-800 p-6 rounded shadow">
        <h2 class="text-xl font-bold mb-6 text-gray-800">Kuesioner Tindak Lanjut Spesialis</h2>

        <form action="{{ route('kuesioner.store') }}" method="POST">
            @csrf

            @php
                $siswas = App\Models\Siswa::where(function ($query) {
                    $query->whereHas('user.pengaduans')->orWhereHas('pribasos');
                })
                    ->orderBy('nama_siswa')
                    ->get();
            @endphp

            <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 }} (Kelas: {{ $siswa->kelas }})
                    </option>
                @endforeach
            </select>

            <br>

            <div class="overflow-x-auto">
                <table class="w-full table-auto border-collapse">
                    <thead>
                        <tr class="bg-gray-100 text-gray-700">
                            <th class="border p-2">No</th>
                            <th class="border p-2 text-left">Pertanyaan</th>
                            <th class="border p-2 text-center">1<br><small>Tidak Sama Sekali</small></th>
                            <th class="border p-2 text-center">2<br><small>Jarang</small></th>
                            <th class="border p-2 text-center">3<br><small>Kadang-kadang</small></th>
                            <th class="border p-2 text-center">4<br><small>Sering</small></th>
                            <th class="border p-2 text-center">5<br><small>Sangat Sering</small></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($pertanyaans as $pertanyaan)
                            <tr class="text-sm text-gray-800">
                                <td class="border p-2 text-center">{{ $loop->iteration }}</td>
                                <td class="border p-2">{{ $pertanyaan->pertanyaan }}</td>
                                @for ($i = 1; $i <= 5; $i++)
                                    <td class="border text-center">
                                        <input type="radio" name="jawaban[{{ $pertanyaan->id }}]"
                                            value="{{ $i }}" required
                                            class="focus:ring-indigo-500 text-indigo-600">
                                    </td>
                                @endfor
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="mt-6">
                <x-primary-button>
                    Simpan Jawaban
                </x-primary-button>
            </div>
        </form>
    </div>
</x-app-layout>
