@extends('layouts.app')

@section('title', 'Nilai Raport Siswa')

@section('content')
<style>
    /* ═══════════════════════════════════════════════
     *  Standarisasi font & judul kartu — selaras dengan
     *  Dashboard (.sd), Materi, Tagihan, Ujian, Tugas.
     *  Bootstrap menimpa font pada heading, jadi 'Plus
     *  Jakarta Sans' dipaksa di seluruh halaman ini.
     * ═══════════════════════════════════════════════ */
    .student-nilai-page,
    .student-nilai-page h1, .student-nilai-page h2, .student-nilai-page h3, .student-nilai-page h4,
    .student-nilai-page p, .student-nilai-page span, .student-nilai-page a, .student-nilai-page label,
    .student-nilai-page button, .student-nilai-page input, .student-nilai-page select,
    .student-nilai-page td, .student-nilai-page th {
        font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important;
    }
    .student-nilai-page .sp-card h2 {
        font-size: 13.5px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        letter-spacing: -0.01em !important;
        line-height: 1.25 !important;
    }
    /* Label dropdown filter — gaya label Tailwind klasik (normal case, text-sm, medium). */
    .student-nilai-page .sp-filter-label {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        color: #1e293b;
    }
    .student-nilai-page .sp-filter-label i {
        font-size: 1rem;
        line-height: 1;
        color: #2563eb;
    }
    /* Judul kartu kosong "Belum Ada Data Nilai" & nama mapel (h3) — cegah pembesaran Bootstrap. */
    .student-nilai-page .sp-card h3 {
        font-size: 15px !important;
        font-weight: 800 !important;
        color: #334155 !important;
        line-height: 1.3 !important;
    }
</style>
<div class="student-nilai-page mx-auto max-w-6xl space-y-6">
    <header class="pkbm-dashboard__heading">
        <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <p class="pkbm-dashboard__breadcrumb">
                    <a href="{{ route('student.dashboard') }}" class="hover:text-blue-700 no-underline">Ruang Belajar</a>
                    <i class="bi bi-chevron-right" aria-hidden="true"></i>
                    Nilai Raport
                </p>
                <h1 class="pkbm-dashboard__title">Capaian Hasil Belajar</h1>
                <p class="pkbm-dashboard__subtitle">
                    Informasi nilai harian, UTS, UAS, dan nilai akhir mata pelajaran
                </p>
            </div>
            <div class="flex items-center gap-2 rounded-xl bg-white/90 px-3.5 py-2 shadow-sm backdrop-blur">
                <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-100 text-blue-700">
                    <i class="bi bi-person-badge"></i>
                </div>
                <div class="text-xs">
                    <span class="block text-[10px] uppercase font-bold text-slate-400">Siswa</span>
                    <span class="font-bold text-slate-800">{{ $student['nama'] }}</span>
                </div>
            </div>
        </div>
    </header>

    {{-- Filter Bar --}}
    <div class="sp-card p-4">
        <form method="GET" action="{{ route('student.nilai') }}" class="grid grid-cols-1 gap-3 sm:grid-cols-12 sm:items-end">
            <div class="sm:col-span-4">
                <label for="filter-tp" class="sp-filter-label"><i class="bi bi-calendar3" aria-hidden="true"></i>Tahun Pelajaran</label>
                <select id="filter-tp" name="tp" class="sp-form-control">
                    <option value="">Semua Tahun Pelajaran</option>
                    @foreach($listTp as $tp)
                        <option value="{{ $tp }}" @selected($filterTp === $tp)>TP {{ $tp }}</option>
                    @endforeach
                </select>
                @if ($listTp->isEmpty())
                    <p class="mt-1.5 flex items-start gap-1.5 text-[11px] font-medium leading-snug text-slate-400">
                        <i class="bi bi-info-circle mt-0.5 shrink-0" aria-hidden="true"></i>
                        <span>Belum ada data nilai untuk akun ini, jadi pilihan tahun pelajaran belum tersedia.</span>
                    </p>
                @endif
            </div>

            <div class="sm:col-span-4">
                <label for="filter-semester" class="sp-filter-label"><i class="bi bi-collection" aria-hidden="true"></i>Semester</label>
                <select id="filter-semester" name="semester" class="sp-form-control">
                    <option value="">Semua Semester</option>
                    <option value="Ganjil" @selected($filterSemester === 'Ganjil')>Ganjil</option>
                    <option value="Genap" @selected($filterSemester === 'Genap')>Genap</option>
                </select>
            </div>

            <div class="sm:col-span-4 flex items-center gap-2">
                <button type="submit" class="sp-btn-primary flex-1 justify-center">
                    <i class="bi bi-filter"></i>
                    <span>Terapkan Filter</span>
                </button>
                @if($filterTp || $filterSemester)
                    <a href="{{ route('student.nilai') }}" class="sp-btn-secondary px-3" title="Reset filter">
                        <i class="bi bi-arrow-counterclockwise"></i>
                    </a>
                @endif
            </div>
        </form>
    </div>

    @if(empty($grouped))
        <div class="sp-card p-12 text-center text-slate-400">
            <div class="inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-slate-100 text-slate-400 mb-3">
                <i class="bi bi-journal-x text-3xl"></i>
            </div>
            <h3 class="text-base font-bold text-slate-700">Belum Ada Data Nilai</h3>
            <p class="mt-1 text-sm text-slate-500 max-w-sm mx-auto">
                Data nilai untuk kriteria filter ini belum diinput atau belum dipublikasikan oleh pihak pengajar.
            </p>
        </div>
    @else
        @foreach($grouped as $group)
            <div class="sp-card overflow-hidden">
                <div class="border-b border-slate-100 bg-slate-50/70 p-4 flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-600 text-white font-bold text-xs">
                            {{ substr($group['semester'], 0, 1) }}
                        </span>
                        <div>
                            <h2 class="text-sm font-bold text-slate-900">
                                Semester {{ $group['semester'] }} · TP {{ $group['tahun_pelajaran'] }}
                            </h2>
                            <p class="text-xs text-slate-500">Kelas: {{ $group['nama_kelas'] }}</p>
                        </div>
                    </div>
                    <span class="rounded-full bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700">
                        {{ count($group['rows']) }} Mapel
                    </span>
                </div>

                {{-- Desktop Table --}}
                <div class="hidden sm:block overflow-x-auto">
                    <table class="w-full text-left text-sm text-slate-700">
                        <thead class="bg-slate-50 text-xs font-semibold uppercase text-slate-500 border-b border-slate-200">
                            <tr>
                                <th class="px-4 py-3 text-center w-12">No</th>
                                <th class="px-4 py-3">Mata Pelajaran</th>
                                <th class="px-4 py-3 text-center w-24">Harian</th>
                                <th class="px-4 py-3 text-center w-24">UTS</th>
                                <th class="px-4 py-3 text-center w-24">UAS</th>
                                <th class="px-4 py-3 text-center w-32">Nilai Akhir</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @foreach($group['rows'] as $idx => $r)
                                <tr class="hover:bg-slate-50/60 transition">
                                    <td class="px-4 py-3 text-center text-slate-400 text-xs">{{ $idx + 1 }}</td>
                                    <td class="px-4 py-3 font-semibold text-slate-900">{{ $r->nama_mapel }}</td>
                                    <td class="px-4 py-3 text-center text-slate-700">{{ $r->harian !== null && $r->harian !== '' ? number_format($r->harian, 0) : '-' }}</td>
                                    <td class="px-4 py-3 text-center text-slate-700">{{ $r->uts !== null && $r->uts !== '' ? number_format($r->uts, 0) : '-' }}</td>
                                    <td class="px-4 py-3 text-center text-slate-700">{{ $r->uas !== null && $r->uas !== '' ? number_format($r->uas, 0) : '-' }}</td>
                                    <td class="px-4 py-3 text-center">
                                        @if($r->nilai_akhir !== null && $r->nilai_akhir !== '')
                                            <span @class([
                                                'inline-flex items-center justify-center rounded-xl px-3 py-1 text-xs font-extrabold shadow-sm min-w-[3.5rem]',
                                                'bg-blue-600 text-white' => (float)$r->nilai_akhir >= 75,
                                                'bg-amber-500 text-white' => (float)$r->nilai_akhir >= 60 && (float)$r->nilai_akhir < 75,
                                                'bg-rose-500 text-white' => (float)$r->nilai_akhir < 60,
                                            ])>
                                                {{ number_format($r->nilai_akhir, 0) }}
                                            </span>
                                        @else
                                            <span class="text-slate-400">-</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                {{-- Mobile List Cards --}}
                <div class="block sm:hidden divide-y divide-slate-100 p-3 space-y-3">
                    @foreach($group['rows'] as $r)
                        <div class="pt-3 first:pt-0">
                            <div class="flex items-start justify-between">
                                <div>
                                    <h3 class="text-sm font-bold text-slate-900">{{ $r->nama_mapel }}</h3>
                                    <span class="text-[11px] text-slate-500">Sem. {{ $group['semester'] }}</span>
                                </div>
                                <div class="text-right">
                                    <span class="block text-[10px] text-slate-400 uppercase font-bold">Nilai Akhir</span>
                                    <span @class([
                                        'inline-block mt-0.5 rounded-lg px-2.5 py-1 text-xs font-extrabold shadow-sm min-w-[2.5rem]',
                                        'bg-blue-600 text-white' => (float)$r->nilai_akhir >= 75,
                                        'bg-amber-500 text-white' => (float)$r->nilai_akhir >= 60 && (float)$r->nilai_akhir < 75,
                                        'bg-rose-500 text-white' => (float)$r->nilai_akhir < 60,
                                    ])>
                                        {{ $r->nilai_akhir !== null && $r->nilai_akhir !== '' ? number_format($r->nilai_akhir, 0) : '-' }}
                                    </span>
                                </div>
                            </div>
                            <div class="mt-2.5 grid grid-cols-3 gap-2 rounded-xl bg-slate-50 p-2 text-center text-xs">
                                <div>
                                    <span class="block text-[10px] text-slate-400">Harian</span>
                                    <span class="font-bold text-slate-700">{{ $r->harian !== null && $r->harian !== '' ? number_format($r->harian, 0) : '-' }}</span>
                                </div>
                                <div>
                                    <span class="block text-[10px] text-slate-400">UTS</span>
                                    <span class="font-bold text-slate-700">{{ $r->uts !== null && $r->uts !== '' ? number_format($r->uts, 0) : '-' }}</span>
                                </div>
                                <div>
                                    <span class="block text-[10px] text-slate-400">UAS</span>
                                    <span class="font-bold text-slate-700">{{ $r->uas !== null && $r->uas !== '' ? number_format($r->uas, 0) : '-' }}</span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach
    @endif
</div>
@endsection