{{-- 
    Lokasi File: resources/views/guru/erapor/cetak_rapor.blade.php 
    Deskripsi: Menu Utama Cetak Rapor Wali Kelas (Modern UI, Safe Spacing)
--}}

@extends('layouts.guru_master')

@section('title', 'Cetak Rapor & Leger | Smart Cendekia')

@section('css')
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
    :root {
        --app-bg: #f8fafc;
        --print-main: #e11d48; /* Rose 600 */
        --print-light: #f43f5e; /* Rose 500 */
        --print-soft: #fff1f2; /* Rose 50 */
        --text-main: #0f172a;
        --border: #e2e8f0;
    }

    body { font-family: 'Plus Jakarta Sans', sans-serif !important; background-color: var(--app-bg); }

    /* === SAFE CONTAINER === */
    .safe-container { padding: 0 20px; max-width: 1200px; margin: 0 auto; }
    @media (min-width: 768px) { .safe-container { padding: 0 35px; } }

    /* === HERO BANNER === */
    .hero-banner {
        background: linear-gradient(135deg, var(--print-main) 0%, var(--print-light) 100%);
        border-radius: 30px; padding: 35px 30px; color: white;
        position: relative; overflow: hidden; margin-top: 20px; margin-bottom: 30px;
        box-shadow: 0 20px 40px -15px rgba(225, 29, 72, 0.35);
    }
    .hero-banner::after {
        content: ''; position: absolute; width: 200px; height: 200px;
        background: rgba(255, 255, 255, 0.1); border-radius: 50%;
        top: -50px; right: -30px;
    }

    /* === CLASS CARD STYLING === */
    .card-class {
        border: 1px solid #f1f5f9; border-radius: 28px;
        background: white; overflow: hidden;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04);
        height: 100%; display: flex; flex-direction: column;
    }
    .card-class:hover { transform: translateY(-5px); box-shadow: 0 20px 30px -10px rgba(225, 29, 72, 0.15); }

    .class-header {
        background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
        padding: 30px 25px; color: white; position: relative;
    }
    .class-header-icon {
        position: absolute; right: 20px; bottom: -20px;
        font-size: 5rem; opacity: 0.1; color: white;
    }

    .class-badge {
        background: rgba(255, 255, 255, 0.15); padding: 6px 14px;
        border-radius: 12px; font-size: 0.7rem; font-weight: 800;
        backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.2);
        letter-spacing: 0.5px; text-transform: uppercase;
    }

    /* === STATISTICS BOX === */
    .stat-container { display: flex; gap: 15px; margin-bottom: 25px; }
    .stat-item {
        flex: 1; text-align: center; padding: 15px;
        background-color: #f8fafc; border-radius: 18px;
        border: 1px solid var(--border);
    }
    .stat-value { font-size: 1.5rem; font-weight: 800; color: var(--text-main); line-height: 1.2; }
    .stat-label { font-size: 0.7rem; color: #64748b; font-weight: 700; text-transform: uppercase; margin-top: 5px; }

    /* === BUTTONS === */
    .btn-action {
        border-radius: 14px; padding: 14px; font-weight: 800; font-size: 0.9rem;
        transition: all 0.3s; display: flex; align-items: center; justify-content: center;
        text-decoration: none; width: 100%;
    }
    .btn-print { background: var(--print-main); color: white; border: none; box-shadow: 0 4px 15px rgba(225, 29, 72, 0.25); }
    .btn-print:hover { background: #be123c; color: white; transform: translateY(-2px); }
    
    .btn-leger { background: white; color: var(--text-main); border: 2px solid var(--border); }
    .btn-leger:hover { border-color: var(--text-main); color: var(--text-main); background: #f8fafc; }

    /* === LOCK SCREEN (AKSES DITOLAK) === */
    .lock-container {
        background: white; border-radius: 28px; padding: 40px; text-align: center;
        border: 1px solid #f1f5f9; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04);
        max-width: 600px; margin: 40px auto;
    }
    .lock-icon-box {
        width: 100px; height: 100px; background: #fff7ed; color: #ea580c;
        border-radius: 50%; display: flex; align-items: center; justify-content: center;
        font-size: 3rem; margin: 0 auto 20px; border: 4px solid #ffedd5;
    }
</style>
@stop

@section('content_body')
<div class="safe-container pb-5 mb-5 animate__animated animate__fadeIn">

    {{-- NAVIGASI ATAS --}}
    <div class="d-flex justify-content-between align-items-center my-4">
        <a href="{{ route('guru.erapor.index') }}" class="btn btn-white border rounded-pill shadow-sm px-3 py-2 font-weight-bold text-secondary btn-sm">
            <i class="fas fa-arrow-left mr-1"></i> Dashboard Rapor
        </a>
        <span class="badge badge-light border rounded-pill px-3 py-2 text-muted font-weight-bold">
            E-Rapor Center
        </span>
    </div>

    {{-- HERO BANNER --}}
    <div class="hero-banner animate__animated animate__fadeInDown">
        <div style="position: relative; z-index: 2;">
            <div class="badge bg-white text-danger rounded-pill px-3 py-1 font-weight-bold mb-3 shadow-sm" style="font-size: 0.65rem; letter-spacing: 0.5px;">
                <i class="fas fa-print mr-1"></i> PUSAT CETAK DOKUMEN
            </div>
            <h2 class="font-weight-bold mb-2" style="font-size: 1.8rem;">Cetak Rapor & Leger Nilai</h2>
            <p class="mb-0 opacity-90 font-weight-bold" style="font-size: 0.95rem;">
                Menu khusus bagi Anda sebagai Wali Kelas untuk mengelola dokumen hasil belajar siswa.
            </p>
        </div>
    </div>

    {{-- KONTEN UTAMA --}}
    <div class="row">
        {{-- LOGIKA: Cek apakah variabel ada DAN tidak kosong --}}
        @if(isset($kelasWali) && $kelasWali->isNotEmpty())
            
            @foreach($kelasWali as $k)
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="card-class animate__animated animate__zoomIn" style="animation-delay: {{ $loop->index * 0.1 }}s;">
                    {{-- Card Header --}}
                    <div class="class-header">
                        <span class="class-badge mb-3 d-inline-block"><i class="fas fa-star text-warning mr-1"></i> Kelas Perwalian</span>
                        <h3 class="font-weight-bold mb-1" style="font-size: 1.6rem; letter-spacing: -0.5px;">Kelas {{ $k->nama_kelas }}</h3>
                        <p class="mb-0 opacity-80 small font-weight-bold">
                            Wali Kelas: {{ $k->waliKelas->name ?? Auth::user()->name }}
                        </p>
                        <i class="fas fa-chalkboard-teacher class-header-icon"></i>
                    </div>
                    
                    {{-- Card Body --}}
                    <div class="card-body p-4 d-flex flex-column" style="flex: 1;">
                        
                        {{-- Statistik --}}
                        <div class="stat-container">
                            <div class="stat-item">
                                <div class="stat-value">{{ $k->siswas_count ?? $k->siswas()->count() }}</div>
                                <div class="stat-label">Total Siswa</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-value text-primary">{{ $k->tingkat ?? '-' }}</div>
                                <div class="stat-label">Tingkat Kelas</div>
                            </div>
                        </div>

                        {{-- Tombol Aksi (Otomatis ke bawah) --}}
                        <div class="mt-auto d-flex flex-column gap-3">
                            <a href="{{ route('guru.erapor.cetak.index', ['kelas' => $k->id]) }}" class="btn-action btn-print">
                                <i class="fas fa-file-pdf mr-2 fa-lg"></i> Buka Menu Cetak Rapor
                            </a>
                            <a href="{{ route('guru.erapor.cetak.leger', ['kelas' => $k->id]) }}" class="btn-action btn-leger mt-3">
                                <i class="fas fa-table mr-2 fa-lg text-primary"></i> Lihat Leger Nilai
                            </a>
                        </div>

                    </div>
                </div>
            </div>
            @endforeach

        @else
            {{-- TAMPILAN LOCK SCREEN (JIKA BUKAN WALI KELAS) --}}
            <div class="col-12 animate__animated animate__fadeInUp">
                <div class="lock-container">
                    <div class="lock-icon-box">
                        <i class="fas fa-user-lock"></i>
                    </div>
                    <h4 class="font-weight-bold text-dark mb-3">Akses Terbatas</h4>
                    <p class="text-muted font-weight-bold mb-4" style="line-height: 1.6;">
                        Maaf, Anda belum terdaftar sebagai <strong>Wali Kelas</strong> pada tahun ajaran/semester yang sedang aktif saat ini. Fitur pencetakan dokumen hanya tersedia khusus untuk Wali Kelas.
                    </p>
                    <div class="p-3 bg-light rounded-lg border text-left d-inline-block">
                        <span class="small font-weight-bold text-dark"><i class="fas fa-info-circle text-primary mr-1"></i> Solusi:</span>
                        <span class="small text-muted d-block mt-1">Silakan hubungi Administrator atau Bagian Kurikulum untuk memetakan nama Anda sebagai Wali Kelas.</span>
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>

{{-- FOOTER INFO --}}
<footer class="safe-container mt-2 mb-5 pb-5 text-center">
    <p class="text-muted small font-weight-bold">© 2026 Smart Cendekia E-Rapor System</p>
</footer>
@stop