{{-- <x-app-layout>
    <div class="max-w-4xl mx-auto p-6">
        <h2 class="text-xl font-bold mb-4">Jawaban Kuesioner: {{ $siswa->name }}</h2>

        <table class="w-full table-auto border">
            <thead>
                <tr class="bg-gray-200">
                    <th class="border px-2 py-1">No</th>
                    <th class="border px-2 py-1">Pertanyaan</th>
                    <th class="border px-2 py-1">Dimensi</th>
                    <th class="border px-2 py-1">Nilai</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($jawaban as $j)
                    <tr class="bg-white">
                        <td class="border px-2 py-1">{{ $loop->iteration }}</td>
                        <td class="border px-2 py-1">{{ $j->pertanyaan->pertanyaan }}</td>
                        <td class="border px-2 py-1">{{ $j->pertanyaan->dimensi->nama ?? '-' }}</td>
                        @php
                            $skala = [
                                1 => 'Tidak Sama Sekali',
                                2 => 'Jarang',
                                3 => 'Kadang-kadang',
                                4 => 'Sering',
                                5 => 'Sangat Sering',
                            ];
                        @endphp
                        <td class="border px-2 py-1 text-center">
                            {{ $j->nilai }}<br>
                            <small class="text-gray-500">{{ $skala[$j->nilai] ?? '-' }}</small>
                        </td>

                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</x-app-layout> --}}

<x-app-layout>
    <div class="max-w-6xl mx-auto p-6">
        <h2 class="text-2xl font-bold mb-6">
            Detail Jawaban Kuesioner
            <span class="text-blue-600">{{ $siswa->nama_siswa }}</span>
            <br>
            <span class="text-sm font-normal">
                Minggu ke-{{ $minggu }} Tahun {{ $tahun }}
            </span>
        </h2>

        <div class="mb-4">
            <form method="GET" class="flex gap-4">
                <input type="hidden" name="siswa_id" value="{{ $siswa->id_siswa }}">
                <input type="number" name="minggu" value="{{ $minggu }}" placeholder="Minggu ke-"
                    class="border rounded px-2 py-1">
                <input type="number" name="tahun" value="{{ $tahun }}" placeholder="Tahun"
                    class="border rounded px-2 py-1">
                <button type="submit" class="bg-blue-500 text-white px-4 py-1 rounded">Filter</button>
            </form>
        </div>

        @foreach ($dimensiList as $dimensi)
            <div class="mb-8">
                <h3 class="text-lg font-semibold mb-2 bg-gray-100 p-2 rounded">
                    {{ $dimensi->nama }}
                    <span class="text-sm font-normal text-gray-600">{{ $dimensi->deskripsi }}</span>
                </h3>

                @if (isset($jawaban[$dimensi->nama]))
                    <table class="w-full border mb-4">
                        <thead>
                            <tr class="bg-gray-200">
                                <th class="border px-4 py-2 text-left">Pertanyaan</th>
                                <th class="border px-4 py-2">Nilai</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($jawaban[$dimensi->nama] as $item)
                                <tr class="hover:bg-gray-50">
                                    <td class="border px-4 py-2">{{ $item->pertanyaan->pertanyaan }}</td>
                                    <td
                                        class="border px-4 py-2 text-center 
                                        {{ $item->nilai >= 4 ? 'bg-red-200 font-bold' : '' }}">
                                        {{ $item->nilai }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @else
                    <p class="text-gray-500 italic">Tidak ada data untuk dimensi ini</p>
                @endif
            </div>
        @endforeach

        <div>
            <div class="flex gap-6 items-start">
                {{-- Grafik --}}
                <div class="card shadow-sm p-3 w-[600px]">
                    <div class="text-muted mb-2">Grafik Siswa</div>
                    <canvas id="myChart" height="100"></canvas>
                </div>

                {{-- Kesimpulan --}}
                @if (!empty($nilaiPerDimensi))
                    @php
                        $dimensiMenonjol = collect($nilaiPerDimensi)->filter(fn($nilai) => $nilai >= 4);
                        $dimensiTertinggi = collect($nilaiPerDimensi)->sortDesc()->keys()->first();
                        $nilaiTertinggi = collect($nilaiPerDimensi)->max();
                    @endphp

                    <div class="card shadow-sm p-4 w-full bg-blue-50 border-l-4 border-blue-500 text-blue-900 rounded">
                        <h4 class="font-semibold mb-1">Kesimpulan:</h4>

                        @if ($dimensiMenonjol->isNotEmpty())
                            <p>
                                Siswa menunjukkan performa menonjol pada dimensi:
                                <strong>{{ implode(', ', $dimensiMenonjol->keys()->toArray()) }}</strong>,
                                dengan nilai tertinggi pada dimensi <strong>{{ $dimensiTertinggi }}</strong>
                                (rata-rata <strong>{{ number_format($nilaiTertinggi, 2) }}</strong>).
                            </p>
                        @else
                            <p>
                                Tidak ada dimensi dengan nilai ≥ 4. Siswa perlu mendapatkan perhatian lebih dalam semua
                                dimensi.
                            </p>
                        @endif
                    </div>
                @endif
            </div>
        </div>

        <div class="mt-4">
            <a href="{{ route('rekap-kuesioner.index') }}" class="bg-gray-500 text-white px-4 py-2 rounded">Kembali</a>
        </div>
    </div>
</x-app-layout>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('myChart');

    const labels = {!! json_encode(array_keys($nilaiPerDimensi)) !!};
    const data = {!! json_encode(array_values($nilaiPerDimensi)) !!};

    new Chart(ctx, {
        type: 'radar',
        data: {
            labels: labels,
            datasets: [{
                label: 'Rata-rata Nilai per Dimensi',
                data: data,
                backgroundColor: 'rgba(54, 162, 235, 0.6)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true,
                    max: 5 // karena skala kuesioner dari 1-5
                }
            }
        }
    });
</script>