@extends('layouts.app')

@section('title', 'Cetak Raport')

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div>
            <p class="pkbm-dashboard__breadcrumb"><span>Standar Penilaian</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Manajemen Raport<i class="bi bi-chevron-right" aria-hidden="true"></i>Cetak Raport</p>
            <h1 class="pkbm-dashboard__title">Cetak Raport</h1>
            <p class="pkbm-dashboard__subtitle">Pilih tahun pelajaran dan kelas untuk melihat leger nilai serta pilihan dokumen cetak siswa.</p>
        </div>
        @if ($period)
            <div class="pkbm-settings__period">
                <span class="pkbm-settings__period-icon"><i class="bi bi-calendar2-week" aria-hidden="true"></i></span>
                <span>
                    <span class="pkbm-settings__period-label">@if ($activePeriod && $activePeriod->tahun_pelajaran === $period->tahun_pelajaran && $activePeriod->semester === $period->semester) Periode aktif @else Periode dipilih @endif</span>
                    <span class="pkbm-settings__period-value">{{ $period->tahun_pelajaran }} · {{ $period->semester }}</span>
                </span>
            </div>
        @endif
    </header>

    @if ($periods->isEmpty())
        <section class="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
            <i class="bi bi-exclamation-triangle mr-2" aria-hidden="true"></i>Belum ada periode akademik atau data kelas yang dapat dicetak.
        </section>
    @else
        <section class="sp-card overflow-visible">
            <div class="sp-card-header">
                <h2 class="sp-section-title">Pilih periode dan kelas</h2>
                <p class="mt-1 text-xs text-slate-500">Riwayat periode tersedia mengikuti data siswa pada lembaga Anda.</p>
            </div>
            <form id="cetak-raport-filter" method="GET" action="{{ route('pkbm.raport.cetak') }}" class="grid gap-4 p-4 sm:grid-cols-2 lg:grid-cols-2 lg:items-end">
                <div>
                    <label class="sp-form-label" for="report-period">Tahun pelajaran / semester</label>
                    <select class="sp-form-control w-full px-3 py-2.5 text-sm" id="report-period" name="periode" required>
                        @foreach ($periods as $availablePeriod)
                            @php($periodKey = $availablePeriod->tahun_pelajaran.'|'.$availablePeriod->semester)
                            <option value="{{ $periodKey }}" @selected($period && $period->tahun_pelajaran === $availablePeriod->tahun_pelajaran && $period->semester === $availablePeriod->semester)>
                                {{ $availablePeriod->tahun_pelajaran }} · {{ $availablePeriod->semester }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="sp-form-label" for="report-class">Kelas</label>
                    <select class="sp-form-control w-full px-3 py-2.5 text-sm" id="report-class" name="id_kelas">
                        <option value="">Pilih kelas</option>
                        @foreach ($classes as $class)
                            <option value="{{ $class->id_kelas }}" @selected($selectedClassId === (int) $class->id_kelas)>
                                {{ $class->nama_kelas }} · Tingkat {{ $class->tingkatan }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </form>
        </section>

        @if ($selectedClassId)
            <div class="flex justify-end">
                <a class="sp-btn-primary" target="_blank" rel="noopener"
                    href="{{ route('pkbm.raport.cetak.leger', [
                        'classId' => $selectedClassId,
                        'tahun_pelajaran' => $period->tahun_pelajaran,
                        'semester' => $period->semester,
                    ]) }}">
                    <i class="bi bi-printer" aria-hidden="true"></i>Cetak leger
                </a>
            </div>
        @endif

        @if ($selectedClassId)
            <section class="sp-card overflow-hidden">
                <div class="sp-card-header flex flex-wrap items-center justify-between gap-3">
                    <div>
                        <h2 class="sp-section-title">Daftar siswa</h2>
                        <p class="mt-1 text-xs text-slate-500">{{ $students->count() }} siswa · nilai ditampilkan mengikuti mata pelajaran yang memiliki nilai akhir pada periode ini.</p>
                    </div>
                    <span class="inline-flex items-center gap-2 rounded-full bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700">
                        <i class="bi bi-printer" aria-hidden="true"></i>{{ $period->tahun_pelajaran }} · {{ $period->semester }}
                    </span>
                </div>
                @if ($students->isNotEmpty())
                    <div class="overflow-x-auto">
                        <table class="w-full min-w-max text-left text-sm">
                            <thead class="bg-slate-50 text-xs uppercase tracking-wide text-slate-500">
                                <tr>
                                    <th class="sticky left-0 z-20 w-16 bg-slate-50 px-4 py-3 text-center font-semibold">No.</th>
                                    <th class="sticky z-20 min-w-52 bg-slate-50 px-4 py-3 font-semibold" style="left: 4.5rem">Nama siswa</th>
                                    @foreach ($subjects as $subject)
                                        <th class="min-w-24 px-3 py-3 text-center font-semibold" title="{{ $subject->nama_mapel }}">
                                            {{ $subject->singkatan ?: mb_substr($subject->nama_mapel, 0, 5) }}
                                        </th>
                                    @endforeach
                                    <th class="sticky right-0 z-20 min-w-[21rem] border-l border-slate-200 bg-slate-50 px-4 py-3 text-center font-semibold">Opsi cetak</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100">
                                @foreach ($students as $student)
                                    <tr>
                                        <td class="sticky left-0 z-10 bg-white px-4 py-3 text-center text-slate-500">{{ $loop->iteration }}</td>
                                        <td class="sticky z-10 min-w-52 bg-white px-4 py-3 font-medium text-slate-800" style="left: 4.5rem">{{ $student->nama_siswa }}</td>
                                        @foreach ($subjects as $subject)
                                            @php($grade = $scores->get($student->id)?->get($subject->id)?->nilai_akhir)
                                            <td class="px-3 py-3 text-center">
                                                @if ($grade !== null)
                                                    <span class="font-semibold text-blue-700">{{ number_format((float) $grade, max(0, min(4, (int) ($decimalPlaces ?? 0))), ',', '') }}</span>
                                                @else
                                                    <span class="text-slate-300">-</span>
                                                @endif
                                            </td>
                                        @endforeach
                                        <td class="sticky right-0 z-10 min-w-[21rem] border-l border-slate-200 bg-white px-4 py-3">
                                            <div class="flex flex-wrap justify-center gap-1.5">
                                                <a class="sp-btn-secondary !min-h-8 !px-2.5 !py-1 !text-xs"
                                                    href="{{ route('pkbm.raport.cetak.dokumen', [
                                                    'studentId' => $student->id,
                                                    'classId' => $selectedClassId,
                                                    'document' => 'cover1',
                                                    'tahun_pelajaran' => $period->tahun_pelajaran,
                                                    'semester' => $period->semester,
                                                ]) }}"
                                                    target="_blank" rel="noopener">Cover 1</a>
                                                <a class="sp-btn-secondary !min-h-8 !px-2.5 !py-1 !text-xs"
                                                    href="{{ route('pkbm.raport.cetak.dokumen', [
                                                    'studentId' => $student->id,
                                                    'classId' => $selectedClassId,
                                                    'document' => 'identitas-lembaga',
                                                    'tahun_pelajaran' => $period->tahun_pelajaran,
                                                    'semester' => $period->semester,
                                                ]) }}"
                                                    target="_blank" rel="noopener">ID Lembaga</a>
                                                <a class="sp-btn-secondary !min-h-8 !px-2.5 !py-1 !text-xs"
                                                    href="{{ route('pkbm.raport.cetak.dokumen', [
                                                    'studentId' => $student->id,
                                                    'classId' => $selectedClassId,
                                                    'document' => 'identitas-siswa',
                                                    'tahun_pelajaran' => $period->tahun_pelajaran,
                                                    'semester' => $period->semester,
                                                ]) }}"
                                                    target="_blank" rel="noopener">ID Siswa</a>
                                                <a class="sp-btn-primary !min-h-8 !px-2.5 !py-1 !text-xs"
                                                    href="{{ route('pkbm.raport.cetak.siswa', [
                                                    'studentId' => $student->id,
                                                    'classId' => $selectedClassId,
                                                    'tahun_pelajaran' => $period->tahun_pelajaran,
                                                    'semester' => $period->semester,
                                                ]) }}"
                                                    target="_blank" rel="noopener">
                                                    <i class="bi bi-printer" aria-hidden="true"></i>Raport
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="p-8 text-center text-sm text-slate-500">
                        <i class="bi bi-people mb-2 block text-2xl text-slate-300" aria-hidden="true"></i>
                        Tidak ada siswa terdaftar pada kelas dan periode ini.
                    </div>
                @endif
            </section>
        @elseif ($classes->isEmpty())
            <section class="rounded-xl border border-dashed border-slate-300 bg-white p-8 text-center text-sm text-slate-500">
                <i class="bi bi-mortarboard mb-2 block text-2xl text-slate-300" aria-hidden="true"></i>
                Tidak ada kelas yang dapat diakses untuk periode ini.
            </section>
        @else
            <section class="rounded-xl border border-dashed border-slate-300 bg-white p-8 text-center text-sm text-slate-500">
                <i class="bi bi-people mb-2 block text-2xl text-slate-300" aria-hidden="true"></i>
                Pilih kelas untuk melihat siswa yang raportnya akan dicetak.
            </section>
        @endif
    @endif
</div>
@endsection

@push('scripts')
    <script>
        (() => {
            const form = document.getElementById('cetak-raport-filter');
            if (!form) return;

            const classSelect = form.querySelector('[name="id_kelas"]');
            const periodSelect = form.querySelector('[name="periode"]');
            periodSelect.addEventListener('change', () => {
                classSelect.value = '';
                form.requestSubmit();
            });
            classSelect.addEventListener('change', () => form.requestSubmit());
        })();
    </script>
@endpush