{{-- resources/views/public/guru/nilai_index.blade.php --}}
@extends('layouts.app')
@section('title', 'Pilih Kelas Penilaian - ' . ($setting->web_name ?? 'Sekolah'))

@section('content')
@include('public.guru._hero')

<section class="section light-background pt-3 pb-5">
    <div class="container" data-aos="fade-up">
        
        <div class="mb-4 px-2 d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3">
            <div>
                <h4 class="fw-bold text-dark mb-1"><i class="fas fa-edit text-success me-2"></i>Pilih Kelas Untuk Penilaian</h4>
                <p class="text-muted small mb-0">Pilih rombongan belajar yang Anda ampu untuk mengelola dan memasukkan nilai siswa.</p>
            </div>
            <div>
                <a href="{{ route('guru.dashboard') }}" class="btn btn-outline-secondary btn-sm btn-round shadow-sm px-4 fw-bold">
                    <i class="fas fa-arrow-left me-1"></i> Kembali ke Dashboard
                </a>
            </div>
        </div>

        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-3">
                <form action="{{ route('guru.nilai.index') }}" method="GET" class="m-0">
                    <div class="row g-3 align-items-end">
                        <div class="col-md-5">
                            <label class="form-label fw-bold small text-muted mb-1"><i class="fas fa-calendar-check me-1"></i> Tahun Ajaran</label>
                            <select name="tahun_ajaran_id" class="form-select border-success-subtle bg-light fw-bold shadow-none" onchange="this.form.submit()">
                                @foreach($tahunAjarans as $ta)
                                    <option value="{{ $ta->id }}" {{ $selectedTahunId == $ta->id ? 'selected' : '' }}>
                                        {{ $ta->tahun_ajaran }} {{ $ta->is_active ? '(Aktif Saat Ini)' : '' }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-5">
                            <label class="form-label fw-bold small text-muted mb-1"><i class="fas fa-layer-group me-1"></i> Semester</label>
                            <select name="semester" class="form-select border-success-subtle bg-light fw-bold shadow-none" onchange="this.form.submit()">
                                <option value="">-- Semua Semester --</option>
                                <option value="Ganjil" {{ $selectedSemester == 'Ganjil' ? 'selected' : '' }}>Semester Ganjil</option>
                                <option value="Genap" {{ $selectedSemester == 'Genap' ? 'selected' : '' }}>Semester Genap</option>
                            </select>
                        </div>
                        <div class="col-md-2 d-none d-md-block">
                            <a href="{{ route('guru.nilai.index') }}" class="btn btn-outline-secondary w-100 fw-bold shadow-sm" title="Reset Filter">
                                <i class="fas fa-sync-alt me-1"></i> Reset
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        @if($jadwalsGrouped->isEmpty())
            <div class="alert alert-success rounded-4 border-0 shadow-sm p-5 text-center bg-white">
                <i class="fas fa-box-open fa-3x mb-3 text-success opacity-50"></i>
                <h5 class="fw-bold text-dark">Data Kelas Kosong</h5>
                <p class="mb-0 text-muted">Anda tidak memiliki jadwal mengajar pada kriteria tahun ajaran dan semester yang dipilih.</p>
            </div>
        @else
            @foreach($jadwalsGrouped as $hari => $sesiGroup)
                <div class="d-flex align-items-center mb-3 mt-4 px-2 border-bottom pb-2">
                    <h5 class="fw-bold m-0 text-dark text-uppercase" style="letter-spacing: 1px;">
                        <i class="fas fa-calendar-day me-2 text-success"></i> Jadwal {{ $hari }}
                    </h5>
                </div>

                <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 mb-4">
                    @foreach($sesiGroup as $kunciSesi => $jadwals)
                        @php
                            $first = $jadwals->first();
                            $namaKelas = $first->kelas->nama_kelas ?? optional($first->kelas->rombel)->nama_rombel ?? '-';
                            $namaMapel = optional(optional($first->mapel)->mapelNama)->nama_mapel ?? '-';
                            
                            $kategoriRaw = optional(optional($first->mapel)->mapelKategori)->kategori ?? 'Umum';
                            $kategoriLower = strtolower($kategoriRaw);
                            
                            $themeClass = 'bg-primary';
                            if(str_contains($kategoriLower, 'agama')) $themeClass = 'bg-success';
                            if(str_contains($kategoriLower, 'mulok')) $themeClass = 'bg-warning text-dark';
                            
                            $sesiTexts = [];
                            foreach($jadwals as $j) {
                                $jamKe = optional($j->jamPelajaran)->jam_ke ?? '-';
                                $waktu = $j->jamPelajaran ? date('H:i', strtotime($j->jamPelajaran->waktu_mulai)) . ' - ' . date('H:i', strtotime($j->jamPelajaran->waktu_selesai)) : '';
                                $sesiTexts[] = "Sesi ke-$jamKe ($waktu)";
                            }
                        @endphp
                        
                        <div class="col">
                            <div class="card h-100 border-0 shadow-sm rounded-4 classroom-card overflow-hidden">
                                <div class="card-header {{ $themeClass }} border-0 py-4 px-4 position-relative" style="min-height: 120px;">
                                    <div class="position-relative z-1">
                                        <h4 class="fw-bold {{ $themeClass == 'bg-warning text-dark' ? 'text-dark' : 'text-white' }} mb-1 text-truncate" title="{{ $namaKelas }}">
                                            <i class="fas fa-school me-1 opacity-75"></i> {{ $namaKelas }}
                                        </h4>
                                        <div class="{{ $themeClass == 'bg-warning text-dark' ? 'text-dark' : 'text-white' }} opacity-75 small fw-bold text-truncate" title="{{ $namaMapel }}">
                                            <i class="fas fa-book me-1"></i> {{ $namaMapel }}
                                        </div>
                                    </div>
                                    <div class="position-absolute top-0 end-0 bottom-0 start-0 opacity-25" style="background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 20px);"></div>
                                    
                                    <div class="position-absolute shadow-sm d-flex align-items-center justify-content-center bg-white rounded-circle fw-bold fs-5 text-success border border-2 border-white" 
                                         style="width: 50px; height: 50px; bottom: -20px; right: 20px; z-index: 2;">
                                        {{ substr(auth()->user()->name, 0, 1) }}
                                    </div>
                                </div>
                                
                                <div class="card-body bg-white pt-4 pb-3 px-4">
                                    <div class="text-muted small mb-2 fw-bold text-uppercase" style="font-size: 0.7rem; letter-spacing: 1px;">Sesi Pembelajaran (KBM):</div>
                                    <div class="d-flex flex-column gap-1 mb-3">
                                        @foreach($sesiTexts as $sesi)
                                            <div class="d-flex align-items-center text-dark small fw-bold">
                                                <i class="far fa-clock text-muted me-2"></i> {{ $sesi }}
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                
                                <div class="card-footer bg-white border-top-0 px-4 pb-4 pt-0 d-flex justify-content-end gap-2">
                                    <a href="{{ route('guru.nilai.show', $first->kelas_id) }}" class="btn btn-success btn-sm btn-round shadow-sm px-4 fw-bold w-100">
                                        <i class="fas fa-edit me-1"></i> Input Nilai Siswa
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endforeach
        @endif
    </div>
</section>
@endsection

@push('scripts')
<style>
    #header { background-color: #263351 !important; }
    #header.header-scrolled { background-color: rgba(38, 51, 81, 0.95) !important; }
    
    .classroom-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .classroom-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
    }
</style>
@endpush