{{-- 
    Lokasi File: resources/views/guru/erapor/cetak_index.blade.php 
    Deskripsi: Halaman Daftar Cetak Rapor (Foto Aktif, Modern UI, Safe Spacing)
--}}

@extends('layouts.guru_master')

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

@section('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<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: 1100px; 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: 30px 25px; color: white;
        position: relative; overflow: hidden; margin-top: 20px; margin-bottom: 25px;
        box-shadow: 0 20px 40px -15px rgba(225, 29, 72, 0.3);
    }
    .hero-banner::after {
        content: ''; position: absolute; width: 160px; height: 160px;
        background: rgba(255, 255, 255, 0.1); border-radius: 50%;
        top: -40px; right: -20px;
    }

    /* === CONTENT CARD & LIST === */
    .content-card {
        background: white; border-radius: 28px; border: 1px solid #f1f5f9;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04); overflow: hidden;
    }
    
    .student-item {
        padding: 20px; border-bottom: 1px solid #f1f5f9;
        transition: background 0.3s ease;
    }
    .student-item:last-child { border-bottom: none; }
    .student-item:hover { background: #fafafa; }

    /* === FOTO SISWA (AVATAR) === */
    .avatar-siswa {
        width: 48px; height: 48px; border-radius: 14px;
        background: var(--print-soft); color: var(--print-main);
        object-fit: cover; /* Memastikan foto tidak gepeng */
        border: 2px solid var(--print-soft);
        margin-right: 15px; flex-shrink: 0;
        box-shadow: 0 4px 10px rgba(225, 29, 72, 0.1);
    }

    /* === BADGES === */
    .badge-mapel {
        background: #f0f9ff; color: #0284c7; border: 1px solid #bae6fd;
        padding: 6px 12px; border-radius: 10px; font-weight: 800; font-size: 0.7rem;
    }
    .badge-empty {
        background: #fef2f2; color: #991b1b; border: 1px solid #fecaca;
        padding: 6px 12px; border-radius: 10px; font-weight: 800; font-size: 0.7rem;
    }

    /* === BUTTONS === */
    .btn-print {
        background: var(--print-main); color: white; border-radius: 14px; 
        font-weight: 700; padding: 10px 20px; border: none; transition: 0.3s;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .btn-print:hover { 
        background: #be123c; color: white; 
        transform: translateY(-2px); box-shadow: 0 4px 12px rgba(225, 29, 72, 0.25); 
    }
</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> Kembali ke Dashboard
        </a>
    </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-2 shadow-sm" style="font-size: 0.65rem;">
                <i class="fas fa-print mr-1"></i> PUSAT CETAK DOKUMEN
            </div>
            <h3 class="font-weight-bold mb-1">Cetak Rapor Akademik</h3>
            <p class="mb-0 small opacity-90 font-weight-bold">
                <i class="fas fa-chalkboard mr-1"></i> Kelas: {{ $kelas->nama_kelas }}
            </p>
        </div>
    </div>

    {{-- DAFTAR SISWA (MOBILE OPTIMIZED LIST) --}}
    <div class="content-card animate__animated animate__fadeInUp">
        <div class="p-4 border-bottom bg-light d-flex justify-content-between align-items-center">
            <h6 class="font-weight-bold text-dark mb-0"><i class="fas fa-list-ul text-danger mr-2"></i> Daftar Peserta Didik</h6>
            <span class="badge bg-white border text-muted px-3 py-1 rounded-pill">{{ count($siswas) }} Siswa</span>
        </div>

        @forelse($siswas as $s)
            @php $countMapel = $s->rapor_nilais->count(); @endphp
            <div class="student-item d-flex align-items-center justify-content-between flex-wrap gap-3">
                
{{-- Info Siswa & Foto Avatar --}}
                <div class="d-flex align-items-center flex-grow-1" style="min-width: 250px;">
                    
                    {{-- Logika Penampil Foto Menggunakan foto_url --}}
                    @php
                        $defaultAvatar = 'https://ui-avatars.com/api/?name='.urlencode($s->nama_lengkap).'&background=fff1f2&color=e11d48&bold=true';
                        
                        // Cek apakah foto_url ada isinya dan apakah berupa link luar (http) atau file lokal (storage)
                        if ($s->foto_url) {
                            $foto = Str::startsWith($s->foto_url, 'http') ? $s->foto_url : asset('storage/'.$s->foto_url);
                        } else {
                            $foto = $defaultAvatar;
                        }
                    @endphp
                    
                    {{-- onerror akan otomatis mengubah gambar kembali ke inisial nama jika file foto rusak/hilang di server --}}
                    <img src="{{ $foto }}" 
                         class="avatar-siswa shadow-sm" 
                         alt="{{ $s->nama_lengkap }}" 
                         onerror="this.onerror=null;this.src='{{ $defaultAvatar }}';">
                    
                    <div>
                        <div class="font-weight-bold text-dark" style="font-size: 1rem; line-height: 1.2;">{{ $s->nama_lengkap }}</div>
                        <div class="text-muted small mt-1 font-weight-bold">NIS: {{ $s->nis }}</div>
                    </div>
                </div>
                {{-- Status Rekap Nilai --}}
                <div class="text-md-center mt-2 mt-md-0" style="min-width: 150px;">
                    <div class="small text-muted font-weight-bold text-uppercase mb-1" style="font-size: 0.6rem;">Data Nilai Masuk</div>
                    @if($countMapel > 0)
                        <span class="badge-mapel"><i class="fas fa-check-circle mr-1"></i> {{ $countMapel }} Mata Pelajaran</span>
                    @else
                        <span class="badge-empty"><i class="fas fa-exclamation-circle mr-1"></i> Belum ada nilai</span>
                    @endif
                </div>
                
                {{-- Tombol Cetak PDF --}}
                <div class="w-100 w-md-auto text-right mt-2 mt-md-0">
                    <a href="{{ route('guru.erapor.cetak.pdf', $s->id) }}" target="_blank" class="btn btn-print w-100 w-md-auto btn-print-pdf">
                        <i class="fas fa-file-pdf mr-2"></i> Cetak PDF
                    </a>
                </div>

            </div>
        @empty
            <div class="p-5 text-center">
                <i class="fas fa-folder-open fa-3x text-muted opacity-25 mb-3"></i>
                <h6 class="font-weight-bold text-dark">Belum ada data siswa</h6>
                <p class="text-muted small">Siswa belum ditambahkan ke kelas ini.</p>
            </div>
        @endforelse
    </div>
</div>

{{-- FOOTER INFO --}}
<footer class="safe-container mt-2 mb-5 pb-5 text-center">
    <p class="text-muted small font-weight-bold">Gunakan kertas berukuran F4 (Folio) untuk hasil cetak yang maksimal.</p>
</footer>
@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function() {
        // Memberikan feedback visual saat tombol cetak ditekan
        // Karena generate PDF butuh waktu beberapa detik
        $('.btn-print-pdf').on('click', function() {
            Swal.fire({
                toast: true,
                position: 'top-end',
                icon: 'info',
                title: 'Menyiapkan Dokumen PDF...',
                text: 'Mohon tunggu sebentar, tab baru akan segera terbuka.',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
            });
        });
    });
</script>
@stop