{{-- 
    Lokasi File: resources/views/guru/erapor/index.blade.php 
    Deskripsi: Dashboard Utama E-Rapor (Guru Master Layout, Ultra-Modern UI, 1-Row Mobile Grid)
--}}

@extends('layouts.guru_master')

@section('title', 'Dashboard E-Rapor | Smart Cendekia')

@section('css')
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<style>
    /* =========================================================================
       BASE & TYPOGRAPHY
    ========================================================================= */
    body { font-family: 'Plus Jakarta Sans', sans-serif !important; background-color: #f8fafc; }
    
    :root {
        --orange-main: #f59e0b;
        --orange-soft: #fffbeb;
        --navy-dark: #0f172a;
        --navy-light: #1e3a8a;
        --text-muted: #64748b;
    }

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

    /* =========================================================================
       HERO BANNER
    ========================================================================= */
    .erapor-hero {
        background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-light) 100%);
        border-radius: 20px; padding: 25px; color: white;
        position: relative; overflow: hidden; margin-top: 15px; margin-bottom: 25px;
        box-shadow: 0 10px 25px -5px rgba(30, 58, 138, 0.3);
    }
    .erapor-hero::after {
        content: '\f51c'; font-family: 'Font Awesome 5 Free'; font-weight: 900;
        position: absolute; right: 20px; top: -20px; font-size: 8rem; 
        opacity: 0.08; transform: rotate(-15deg); pointer-events: none;
    }
    
    @media (max-width: 767px) {
        .erapor-hero { padding: 20px; text-align: left; }
        .erapor-hero::after { font-size: 5rem; right: -10px; top: -10px; }
        .erapor-hero h4 { font-size: 1.25rem; }
    }

    /* =========================================================================
       CLASS CARDS (MODERN STYLE)
    ========================================================================= */
    .erapor-card {
        background: white; border-radius: 20px; border: 1px solid #f1f5f9;
        box-shadow: 0 4px 15px -3px rgba(0,0,0,0.05); transition: all 0.3s ease;
        height: 100%; display: flex; flex-direction: column; position: relative;
    }
    .erapor-card:hover { 
        transform: translateY(-5px); 
        box-shadow: 0 15px 30px -5px rgba(0,0,0,0.1); 
        z-index: 10; 
    }
    
    .erapor-card-header { padding: 20px 20px 15px; }
    .erapor-badge {
        background: var(--orange-soft); color: var(--orange-main);
        padding: 6px 12px; border-radius: 8px; font-weight: 800; font-size: 0.65rem;
        text-transform: uppercase; letter-spacing: 0.5px; display: inline-block; margin-bottom: 12px;
    }

    /* =========================================================================
       GRID NAVIGASI 5 FITUR UTAMA (1 BARIS PENUH)
    ========================================================================= */
    .erapor-nav-grid {
        display: grid; 
        grid-template-columns: repeat(5, 1fr);
        border-top: 1px solid #f1f5f9; background: #f8fafc;
        border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;
        margin-top: auto;
    }
    .erapor-nav-item {
        padding: 12px 2px; display: flex; flex-direction: column;
        align-items: center; justify-content: center; color: var(--text-muted);
        transition: 0.3s; border-right: 1px solid #f1f5f9; cursor: pointer;
        text-decoration: none !important;
    }
    .erapor-nav-item:last-child { border-right: none; }
    .erapor-nav-item i { font-size: 1.1rem; margin-bottom: 5px; transition: 0.3s; }
    .erapor-nav-item span { font-size: 0.55rem; font-weight: 800; text-transform: uppercase; text-align: center; }
    
    .erapor-nav-item:hover { background: white; color: var(--orange-main); }
    .erapor-nav-item:hover i { transform: translateY(-3px); }

    /* --- MOBILE RESPONSIVE TWEAKS FOR 1-ROW GRID --- */
    @media (max-width: 575px) {
        .erapor-nav-item { padding: 12px 0; } 
        .erapor-nav-item i { font-size: 0.95rem; margin-bottom: 4px; } 
        .erapor-nav-item span { font-size: 0.45rem; letter-spacing: -0.2px; } 
        .erapor-card { border-radius: 16px; margin-bottom: 20px; }
        .erapor-nav-grid { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
    }

    /* =========================================================================
       DROPDOWN CETAK (SAFE POSITION)
    ========================================================================= */
    .dropdown-menu.erapor-dropdown { 
        border-radius: 12px; border: none; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
        padding: 8px; min-width: 180px; z-index: 9999 !important;
    }
    .dropdown-item.erapor-dropdown-item { 
        border-radius: 8px; padding: 10px 12px; font-weight: 700; 
        font-size: 0.85rem; color: #475569; display: flex; align-items: center; transition: 0.2s;
    }
    .dropdown-item.erapor-dropdown-item i { width: 20px; text-align: center; margin-right: 8px; font-size: 1rem; }
    .dropdown-item.erapor-dropdown-item:hover { background: var(--orange-soft); color: var(--orange-main); }
</style>
@stop

@section('content_body')

{{-- HEADER CUSTOM --}}
<div class="safe-container mt-4 mb-3 animate__animated animate__fadeIn">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h3 class="font-weight-bold mb-1" style="color: #0f172a; letter-spacing: -0.5px;">E-Rapor Center</h3>
            <p class="text-muted small mb-0 font-weight-bold">Pengolahan Nilai & Capaian Belajar</p>
        </div>
        <div class="d-none d-md-block">
            <div class="bg-white d-inline-flex p-3 rounded-circle shadow-sm align-items-center justify-content-center" style="width: 50px; height: 50px;">
                <i class="fas fa-file-signature text-warning fa-lg"></i>
            </div>
        </div>
    </div>
</div>

{{-- KONTEN UTAMA --}}
<div class="safe-container pb-5 mb-5 animate__animated animate__fadeIn">

    {{-- HERO BANNER --}}
    <div class="erapor-hero">
        <div style="position: relative; z-index: 2;">
            <h4 class="font-weight-bold mb-1">Halo, {{ explode(' ', Auth::user()->name ?? 'Guru')[0] }}!</h4>
            <p class="mb-0 small font-weight-bold" style="opacity: 0.85;">Waktunya merekap kemajuan siswa semester ini.</p>
        </div>
    </div>

    {{-- ALERT NOTIFIKASI --}}
    @if(session('success'))
        <div class="alert alert-success border-0 shadow-sm mb-4 animate__animated animate__flipInX d-flex align-items-center" style="border-radius: 12px; font-weight: 600; background-color: #dcfce7; color: #166534;">
            <i class="fas fa-check-circle mr-2 fa-lg"></i> 
            <span class="flex-grow-1 font-weight-bold small">{{ session('success') }}</span>
            <button type="button" class="close text-success m-0 p-0" data-dismiss="alert" aria-label="Close" style="color: #166534 !important;">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    {{-- GRID KELAS --}}
    <div class="row">
        @forelse($jadwalAjar ?? [] as $jadwal)
            <div class="col-12 col-md-6 col-lg-4 mb-3 mb-md-4">
                <div class="erapor-card animate__animated animate__fadeInUp" style="animation-delay: {{ $loop->index * 0.1 }}s;">
                    
                    {{-- Informasi Kelas & Mapel --}}
                    <div class="erapor-card-header">
                        <div class="d-flex justify-content-between align-items-start">
                            <div class="erapor-badge">{{ $jadwal->nama_mapel ?? 'Mapel' }}</div>
                        </div>
                        <h4 class="font-weight-bold text-dark mb-1" style="letter-spacing: -0.5px;">{{ $jadwal->nama_kelas ?? 'Kelas' }}</h4>
                        <p class="text-muted small font-weight-bold mb-3">Tahun Pelajaran {{ $jadwal->tahun_ajaran ?? '2025/2026' }}</p>
                        
                        <div class="d-flex align-items-center">
                            <div class="bg-light rounded-pill px-3 py-1 text-muted small font-weight-bold" style="border: 1px solid #e2e8f0;">
                                <i class="fas fa-user-graduate mr-1"></i> Smt Ganjil
                            </div>
                        </div>
                    </div>

                    {{-- NAVIGASI FITUR UTAMA --}}
                    <div class="erapor-nav-grid">
                        
                        {{-- 1. Akademik (Nilai Mapel) --}}
                        <a href="{{ route('guru.erapor.form', ['kelas' => $jadwal->kelas_id, 'mapel' => $jadwal->mapel_id]) }}" 
                           class="erapor-nav-item" data-toggle="tooltip" title="Input Nilai Mapel" data-placement="top">
                            <i class="fas fa-edit text-primary"></i>
                            <span>Nilai</span>
                        </a>

                        {{-- 2. Ekskul --}}
                        <a href="{{ route('guru.erapor.ekskul.input', ['kelas' => $jadwal->kelas_id]) }}" 
                           class="erapor-nav-item" data-toggle="tooltip" title="Input Ekstrakurikuler" data-placement="top">
                            <i class="fas fa-running text-success"></i>
                            <span>Ekskul</span>
                        </a>

                        {{-- 3. Projek P5 --}}
                        <a href="{{ route('guru.erapor.p5.input', ['kelas' => $jadwal->kelas_id]) }}" 
                           class="erapor-nav-item" data-toggle="tooltip" title="Input Projek P5" data-placement="top">
                            <i class="fas fa-hands-helping text-warning"></i>
                            <span>P5</span>
                        </a>

                        {{-- 4. Catatan Wali --}}
                        <a href="{{ route('guru.erapor.catatan.input', ['kelas' => $jadwal->kelas_id]) }}" 
                           class="erapor-nav-item" data-toggle="tooltip" title="Input Catatan Wali Kelas" data-placement="top">
                            <i class="fas fa-comment-dots text-info"></i>
                            <span>Pesan</span>
                        </a>

                        {{-- 5. Cetak (Dropdown) --}}
                        <div class="erapor-nav-item dropdown p-0" style="border-right: none;">
                            <a href="#" class="w-100 h-100 d-flex flex-column align-items-center justify-content-center" 
                               data-toggle="dropdown" aria-expanded="false" style="color: inherit; text-decoration: none;">
                                <i class="fas fa-print text-danger"></i>
                                <span>Cetak</span>
                            </a>
                            
                            <div class="dropdown-menu dropdown-menu-right erapor-dropdown">
                                <div class="dropdown-header font-weight-bold px-3 py-2 text-uppercase text-muted" style="font-size: 0.7rem; letter-spacing: 1px;">Dokumen Rapor</div>
                                <div class="dropdown-divider my-1"></div>
                                
                                {{-- 5a. Cetak Rapor Siswa --}}
                                <a class="dropdown-item erapor-dropdown-item" href="{{ route('guru.erapor.cetak.index', ['kelas' => $jadwal->kelas_id]) }}">
                                    <i class="fas fa-file-pdf text-danger"></i> Rapor Siswa
                                </a>
                                
                                {{-- 5b. Cetak Leger Nilai --}}
                                <a class="dropdown-item erapor-dropdown-item" href="{{ route('guru.erapor.cetak.leger', ['kelas' => $jadwal->kelas_id]) }}" target="_blank">
                                    <i class="fas fa-table text-success"></i> Leger Nilai (A3)
                                </a>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        @empty
            {{-- TAMPILAN JIKA BELUM ADA KELAS --}}
            <div class="col-12 text-center py-5 bg-white rounded-lg shadow-sm border mx-2">
                <div class="mb-3">
                    <i class="fas fa-clipboard-list text-muted" style="font-size: 4rem; opacity: 0.2;"></i>
                </div>
                <h5 class="font-weight-bold text-dark">Belum Ada Jadwal Mengajar</h5>
                <p class="text-muted font-weight-bold small">Data kelas E-Rapor akan muncul otomatis sesuai pembagian tugas Anda.</p>
            </div>
        @endforelse
    </div>

</div>

{{-- FOOTER INFO --}}
<footer class="safe-container mt-2 mb-5 pb-5 text-center">
    <div class="border-top pt-3" style="border-color: #e2e8f0 !important;">
        <p class="text-muted small font-weight-bold mb-0">© 2026 Smart Cendekia E-Rapor System</p>
    </div>
</footer>

@stop

@section('js')
<script>
    $(document).ready(function() {
        if (!('ontouchstart' in window)) {
            $('[data-toggle="tooltip"]').tooltip({
                trigger: 'hover'
            });
        }

        $('.dropdown').on('show.bs.dropdown', function () {
            $(this).find('[data-toggle="tooltip"]').tooltip('hide');
        });

        /* =========================================================
           SMART DROPDOWN POSITIONING (ANTI-TERPOTONG)
        ========================================================= */
        $('.dropdown').on('shown.bs.dropdown', function() {
            var $btn = $(this).find('a[data-toggle="dropdown"]');
            var $menu = $(this).find('.dropdown-menu');
            
            $menu.data('parent', $(this));
            $('body').append($menu.detach());
            
            var offset = $btn.offset();
            
            var menuLeft = offset.left + $btn.outerWidth() - $menu.outerWidth();
            
            if (menuLeft < 10) { menuLeft = 10; }
            
            $menu.css({
                'display': 'block',
                'top': offset.top + $btn.outerHeight(),
                'left': menuLeft,
                'position': 'absolute',
                'z-index': 9999
            });
        });

        $('.dropdown').on('hidden.bs.dropdown', function() {
            var $menu = $('body > .dropdown-menu');
            var $parent = $menu.data('parent');
            
            if ($parent && $parent.length > 0) {
                $parent.append($menu.detach());
                $menu.css({ 'display': '', 'top': '', 'left': '', 'position': '', 'z-index': '' });
            }
        });

        $(window).on('scroll', function() {
            if ($('body > .dropdown-menu:visible').length > 0) {
                $('.dropdown').dropdown('hide');
                
                var $menu = $('body > .dropdown-menu');
                var $parent = $menu.data('parent');
                if ($parent) {
                    $parent.append($menu.detach());
                    $menu.css({ 'display': '', 'top': '', 'left': '', 'position': '', 'z-index': '' });
                }
            }
        });
    });
</script>
@stop