@extends('layouts.app')

@section('title', 'Leger Nilai · '.$class->nama_kelas)

@section('content')
<style>
    .ledger-preview{min-height:100vh;background:#f1f5f9;padding:18px}
    .ledger-toolbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:16px;margin:-18px -18px 22px;padding:14px 22px;background:#fff;border-bottom:1px solid #e2e8f0;box-shadow:0 4px 16px #0f172a0d}
    .ledger-toolbar p{margin:0;color:#2563eb;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
    .ledger-toolbar h1{margin:2px 0;font-size:18px;font-weight:700;color:#0f172a}
    .ledger-toolbar span{font-size:12px;color:#64748b}
    .ledger-actions{display:flex;align-items:center;gap:8px}
    .ledger-paper{max-width:1480px;margin:0 auto;padding:32px;background:#fff;box-shadow:0 12px 40px #0f172a1a;color:#111827}
    .ledger-paper h2{text-align:center;margin:0;font-size:20px;font-weight:800}
    .ledger-subtitle{text-align:center;margin:4px 0 20px;font-size:12px;font-weight:700;text-transform:uppercase}
    .ledger-info{width:100%;margin-bottom:18px;border-collapse:collapse;font-size:12px}
    .ledger-info th,.ledger-info td{padding:3px 6px;text-align:left;vertical-align:top}
    .ledger-info th{width:145px;font-weight:600;white-space:nowrap}
    .ledger-info td:nth-child(2),.ledger-info td:nth-child(5){width:14px;text-align:center}
    .ledger-info tr th:nth-child(4){padding-left:20px}
    .ledger-table-wrap{overflow-x:auto}
    .ledger-table{width:100%;border-collapse:collapse;font-size:11px}
    .ledger-table th,.ledger-table td{border:1px solid #334155;padding:5px 6px;text-align:center;vertical-align:middle}
    .ledger-table thead th{background:#eaf2ff;font-weight:700}
    .ledger-table .student-name{text-align:left;min-width:175px}
    .ledger-table .average-row{background:#eff6ff;font-weight:700}
    .ledger-table .empty-row{padding:24px;color:#64748b}
    .ledger-signatures{display:flex;justify-content:space-between;gap:24px;margin:30px 4% 0;page-break-inside:avoid}
    .ledger-signatures>div{width:280px;text-align:center;font-size:12px}
    .ledger-signatures p{margin:0 0 4px}
    .ledger-signatures div div{height:68px}
    .ledger-signatures strong{display:inline-block;min-width:180px;padding-top:4px;border-top:1px solid #111827}
    @page{size:landscape;margin:10mm}
    @media print{
        body{background:#fff!important}
        .ledger-preview{min-height:0;background:#fff;padding:0}
        .ledger-toolbar{display:none!important}
        .ledger-paper{max-width:none;margin:0;padding:0;box-shadow:none}
        .ledger-table-wrap{overflow:visible}
        .ledger-table{font-size:9px}
        .ledger-table th,.ledger-table td{padding:3px}
        .ledger-paper h2{font-size:16px}
        .ledger-signatures{margin-top:22px}
    }
</style>
<div class="ledger-preview">
    <header class="ledger-toolbar">
        <div>
            <p>Manajemen Raport</p>
            <h1>Pratinjau cetak leger</h1>
            <span>{{ $class->nama_kelas }} · {{ $period->tahun_pelajaran }} · {{ $period->semester }}</span>
        </div>
        <div class="ledger-actions">
            <a class="sp-btn-secondary" href="{{ route('pkbm.raport.cetak', [
                'periode' => $period->tahun_pelajaran.'|'.$period->semester,
                'id_kelas' => $class->id_kelas,
            ]) }}">Kembali ke daftar</a>
            <button class="sp-btn-primary" type="button" onclick="window.print()">
                <i class="bi bi-printer" aria-hidden="true"></i>Cetak leger
            </button>
        </div>
    </header>

    <main class="ledger-paper">
        <h2>DAFTAR NILAI LEGER (RAPOR)</h2>
        <p class="ledger-subtitle">{{ $school->nama_pkbm }} · {{ $period->tahun_pelajaran }} · Semester {{ $period->semester }}</p>

        <table class="ledger-info">
            <tbody>
                <tr><th>Nama PKBM</th><td>:</td><td>{{ $school->nama_pkbm }}</td><th>Kelas</th><td>:</td><td>{{ $class->nama_kelas }}</td></tr>
                <tr><th>Tahun Pelajaran</th><td>:</td><td>{{ $period->tahun_pelajaran }}</td><th>Semester</th><td>:</td><td>{{ $period->semester }}</td></tr>
            </tbody>
        </table>

        <div class="ledger-table-wrap">
            <table class="ledger-table">
                <thead>
                    <tr>
                        <th>No.</th>
                        <th class="student-name">Nama Siswa</th>
                        @foreach ($subjects as $subject)
                            <th title="{{ $subject->nama_mapel }}">{{ $subject->singkatan ?: $subject->nama_mapel }}</th>
                        @endforeach
                        <th>Rata-rata</th>
                        <th>Peringkat</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($students as $student)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td class="student-name">{{ $student->nama_siswa }}</td>
                            @foreach ($subjects as $subject)
                                @php($grade = $student->grades[$subject->id_mapel])
                                <td>{{ $grade === null ? '-' : number_format($grade, $decimalPlaces, ',', '') }}</td>
                            @endforeach
                            <td>{{ $student->average === null ? '-' : number_format($student->average, $decimalPlaces, ',', '') }}</td>
                            <td>{{ $student->rank ?? '-' }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="{{ $subjects->count() + 4 }}" class="empty-row">Tidak ada siswa terdaftar pada kelas dan periode ini.</td></tr>
                    @endforelse
                    @if ($students->isNotEmpty())
                        <tr class="average-row">
                            <th colspan="2">Rata-rata Kelas</th>
                            @foreach ($subjects as $subject)
                                @php($average = $subjectAverages[$subject->id_mapel])
                                <td>{{ $average === null ? '-' : number_format($average, $decimalPlaces, ',', '') }}</td>
                            @endforeach
                            <td>{{ $classAverage === null ? '-' : number_format($classAverage, $decimalPlaces, ',', '') }}</td>
                            <td>-</td>
                        </tr>
                    @endif
                </tbody>
            </table>
        </div>

        <footer class="ledger-signatures">
            <div>
                <p>Mengetahui,</p>
                <p>Kepala {{ $school->nama_pkbm }}</p>
                <div></div>
                <strong>{{ $headName }}</strong>
            </div>
            <div>
                <p>{{ $class->nama_kelas }}, {{ $reportDate }}</p>
                <p>Wali {{ $class->nama_kelas }}</p>
                <div></div>
                <strong>{{ $homeroomTeacher }}</strong>
            </div>
        </footer>
    </main>
</div>
@endsection