@extends('adminlte::page')

@section('title', 'Laporan Belajar | Smart Cendekia Enterprise')

@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>
    :root {
        --app-primary: #1D4ED8;   
        --app-secondary: #3B82F6; 
        --app-accent: #F59E0B;    /* Warna Oranye Nilai */
        --app-bg: #F8FAFC;
        --shadow-soft: 0 4px 20px rgba(0,0,0,0.03);
        --shadow-hover: 0 15px 30px rgba(0,0,0,0.08);
    }

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

    /* --- LOGIKA RESPONSIVE SEAMLESS --- */
    @media (min-width: 992px) {
        .mobile-ui { display: none !important; }
        .content-wrapper { padding: 30px !important; }
    }

    @media (max-width: 991.98px) {
        .main-header, .main-sidebar, .content-header { display: none !important; }
        .content-wrapper, .content, .container-fluid { 
            margin: 0 !important; padding: 0 !important; background: var(--app-bg) !important;
            min-height: 100vh !important;
        }
        .desktop-ui { display: none !important; }
    }

    /* --- SMART BUBBLE CARDS --- */
    .main-body { padding: 15px 15px 110px; }
    
    .card-bubble { 
        background: white; 
        border-radius: 20px; 
        padding: 20px; 
        margin-bottom: 15px; 
        border: 1px solid #f1f5f9; 
        box-shadow: var(--shadow-soft); 
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
    }

    /* Hover Interaktif (Kartu Melayang) */
    .card-bubble:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-hover);
    }

    /* Kartu Biru (Rata-rata Nilai) dengan Efek Kilap (Shimmer) */
    .card-blue-gradient {
        background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
        color: white;
        border: none;
        position: relative;
        overflow: hidden;
    }

    .card-blue-gradient::after {
        content: '';
        position: absolute;
        top: 0; left: -100%; width: 50%; height: 100%;
        background: linear-gradient(to right, transparent, rgba(255,255,255,0.15), transparent);
        transform: skewX(-25deg);
        animation: shimmer 4s infinite;
    }

    @keyframes shimmer {
        0% { left: -100%; }
        20% { left: 200%; }
        100% { left: 200%; }
    }

    /* Typography Data */
    .stat-label {
        font-size: 0.65rem;
        font-weight: 800;
        text-transform: uppercase;
        color: #64748b;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
        display: block;
    }

    .card-blue-gradient .stat-label { color: rgba(255,255,255,0.7); }

    .stat-number {
        font-size: 3rem;
        font-weight: 900;
        color: #0f172a;
        line-height: 1;
        margin-bottom: 15px;
        display: flex;
        align-items: baseline;
    }

    .stat-number small {
        font-size: 1.2rem;
        color: #94a3b8;
        font-weight: 700;
        margin-left: 5px;
    }

    .card-blue-gradient .stat-number {
        color: var(--app-accent); /* Warna Oranye */
        text-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
    }

    /* Smart Progress Bar */
    .custom-progress {
        height: 8px;
        background: #e2e8f0;
        border-radius: 10px;
        overflow: hidden;
    }
    
    .custom-progress .progress-bar { 
        border-radius: 10px; 
        width: 0%; /* Berawal dari 0 untuk animasi JS */
        transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Table Styles */
    .table-responsive { border-radius: 0 0 20px 20px; }
    .table-modern th {
        font-size: 0.65rem;
        font-weight: 800;
        text-transform: uppercase;
        color: #94a3b8;
        border-bottom: 2px solid #f1f5f9;
        padding: 15px;
        white-space: nowrap;
    }
    .table-modern td {
        padding: 15px;
        vertical-align: middle;
        border-bottom: 1px solid #f8fafc;
        white-space: nowrap;
    }
</style>
@stop

@section('content')

{{-- 📱 MOBILE VIEW --}}
<div class="mobile-ui animate__animated animate__fadeIn">
    
    @include('partials.header_mobile')

    <div class="main-body">
        {{-- KARTU 1: TUGAS DISELESAIKAN --}}
        <div class="card-bubble animate__animated animate__fadeInUp">
            <span class="stat-label">Tugas Diselesaikan</span>
            <div class="stat-number">
                <span class="counter" data-target="{{ $completedTasks ?? 0 }}">0</span> <small>/{{ $totalTasks ?? 0 }}</small>
            </div>
            <div class="custom-progress">
                <div class="progress-bar smart-bar" style="background-color: var(--app-secondary);" data-width="{{ $progressPercentage ?? 0 }}%"></div>
            </div>
        </div>

        {{-- KARTU 2: RATA-RATA NILAI (BIRU) --}}
        <div class="card-bubble card-blue-gradient animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
            <span class="stat-label">Rata-Rata Nilai</span>
            <div class="stat-number mb-2">
                <span class="counter-float" data-target="{{ number_format($averageScore ?? 0, 1) }}">0.0</span>
            </div>
            <p class="mb-0" style="font-size: 0.75rem; color: rgba(255,255,255,0.8); font-weight: 600;">
                Berdasarkan tugas yang sudah dinilai
            </p>
        </div>

        {{-- KARTU 3: PROGRESS KURIKULUM --}}
        <div class="card-bubble animate__animated animate__fadeInUp" style="animation-delay: 0.2s;">
            <span class="stat-label">Progress Kurikulum</span>
            <div class="stat-number">
                <span class="counter" data-target="{{ number_format($progressPercentage ?? 0, 0) }}">0</span>%
            </div>
            <div class="custom-progress">
                <div class="progress-bar bg-success smart-bar" data-width="{{ $progressPercentage ?? 0 }}%"></div>
            </div>
        </div>

        {{-- KARTU 4: TABEL DETAIL --}}
        <div class="card-bubble p-0 overflow-hidden mt-4 animate__animated animate__fadeInUp" style="animation-delay: 0.3s;">
            <div class="p-4 border-bottom">
                <h4 class="m-0 font-weight-600" style="font-size: 1.1rem; color: #1e293b;">Detail Progres Belajar</h4>
            </div>
            
            <div class="table-responsive">
                <table class="table table-borderless table-modern mb-0">
                    <thead>
                        <tr>
                            <th>Mata Pelajaran</th>
                            <th>Judul Tugas</th>
                            <th>Waktu Kumpul</th>
                            <th class="text-center">Status</th>
                            <th class="text-right">Nilai</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($submissions as $sub)
                            <tr class="animate__animated animate__fadeInLeft" style="animation-delay: {{ $loop->iteration * 0.1 }}s;">
                                <td>
                                    <span class="badge" style="background: #f1f5f9; color: #64748b; padding: 6px 10px; font-weight: 700;">
                                        {{ $sub->nama_mapel }}
                                    </span>
                                </td>
                                <td>
                                    <b class="text-dark" style="font-size: 0.85rem;">{{ $sub->judul }}</b>
                                </td>
                                <td>
                                    <span class="text-muted font-weight-bold" style="font-size: 0.8rem;">
                                        {{ \Carbon\Carbon::parse($sub->created_at)->translatedFormat('d M Y') }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    @if($sub->status == 'dinilai')
                                        <span class="badge bg-success px-3 py-1 rounded-pill" style="font-size: 0.65rem;">DINILAI</span>
                                    @else
                                        <span class="badge bg-warning text-dark px-3 py-1 rounded-pill" style="font-size: 0.65rem;">MENUNGGU</span>
                                    @endif
                                </td>
                                <td class="text-right">
                                    <h5 class="m-0 font-weight-900" style="color: {{ $sub->status == 'dinilai' ? 'var(--app-primary)' : '#94a3b8' }};">
                                        {{ $sub->status == 'dinilai' ? (int)$sub->nilai : '-' }}
                                    </h5>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center py-5">
                                    <i class="fas fa-folder-open fa-2x text-muted opacity-50 mb-2"></i>
                                    <p class="text-muted font-weight-bold mb-0">Belum ada tugas yang dikumpulkan.</p>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if($submissions->hasPages())
                <div class="px-4 py-3 border-top bg-light">
                    {{ $submissions->links() }}
                </div>
            @endif
        </div>

        {{-- SPACER UNTUK FOOTER --}}
        <div style="height: 100px; width: 100%; display: block;"></div>
    </div>
</div>

{{-- 🖥️ DESKTOP INTERFACE --}}
<div class="desktop-ui container-fluid pb-5">
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card-bubble p-4 h-100">
                <span class="stat-label">Tugas Diselesaikan</span>
                <div class="stat-number">
                    <span class="counter" data-target="{{ $completedTasks ?? 0 }}">0</span> <small>/{{ $totalTasks ?? 0 }}</small>
                </div>
                <div class="custom-progress">
                    <div class="progress-bar smart-bar" style="background-color: var(--app-secondary);" data-width="{{ $progressPercentage ?? 0 }}%"></div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card-bubble card-blue-gradient p-4 h-100">
                <span class="stat-label">Rata-Rata Nilai</span>
                <div class="stat-number mb-2">
                    <span class="counter-float" data-target="{{ number_format($averageScore ?? 0, 1) }}">0.0</span>
                </div>
                <p class="mb-0" style="font-size: 0.8rem; color: rgba(255,255,255,0.8); font-weight: 600;">
                    Berdasarkan tugas yang sudah dinilai
                </p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card-bubble p-4 h-100">
                <span class="stat-label">Progress Kurikulum</span>
                <div class="stat-number">
                    <span class="counter" data-target="{{ number_format($progressPercentage ?? 0, 0) }}">0</span>%
                </div>
                <div class="custom-progress">
                    <div class="progress-bar bg-success smart-bar" data-width="{{ $progressPercentage ?? 0 }}%"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="card card-bubble p-0 overflow-hidden">
        <div class="p-4 border-bottom bg-white">
            <h4 class="m-0 font-weight-600 text-dark">Detail Progres Belajar</h4>
        </div>
        <div class="table-responsive">
            <table class="table table-borderless table-modern mb-0 bg-white">
                <thead style="background: #f8fafc;">
                    <tr>
                        <th>Mata Pelajaran</th>
                        <th>Judul Tugas</th>
                        <th>Waktu Kumpul</th>
                        <th class="text-center">Status</th>
                        <th class="text-right">Nilai</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($submissions as $sub)
                        <tr class="animate__animated animate__fadeInLeft" style="animation-delay: {{ $loop->iteration * 0.1 }}s;">
                            <td><span class="badge" style="background: #f1f5f9; color: #64748b; padding: 6px 10px;">{{ $sub->nama_mapel }}</span></td>
                            <td><b class="text-dark">{{ $sub->judul }}</b></td>
                            <td class="text-muted font-weight-bold">{{ \Carbon\Carbon::parse($sub->created_at)->translatedFormat('d M Y, H:i') }}</td>
                            <td class="text-center">
                                @if($sub->status == 'dinilai')
                                    <span class="badge bg-success px-3 py-1 rounded-pill">DINILAI</span>
                                @else
                                    <span class="badge bg-warning text-dark px-3 py-1 rounded-pill">MENUNGGU</span>
                                @endif
                            </td>
                            <td class="text-right">
                                <h5 class="m-0 font-weight-900" style="color: {{ $sub->status == 'dinilai' ? 'var(--app-primary)' : '#94a3b8' }};">
                                    {{ $sub->status == 'dinilai' ? (int)$sub->nilai : '-' }}
                                </h5>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center py-5 text-muted font-weight-bold">
                                Belum ada data tugas yang dikumpulkan.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($submissions->hasPages())
            <div class="px-4 py-3 border-top bg-light">
                {{ $submissions->links() }}
            </div>
        @endif
    </div>
</div>

@include('partials.mobile-nav')

@stop

@section('js')
<script>
    $(document).ready(function() {
        // Otomatis tutup sidebar AdminLTE di HP
        if ($(window).width() < 992) {
            $('body').addClass('sidebar-collapse');
        }

        // 1. Animasi Smart Progress Bar
        setTimeout(function() {
            $('.smart-bar').each(function() {
                var targetWidth = $(this).attr('data-width');
                $(this).css('width', targetWidth);
            });
        }, 300); // Mulai setelah delay sedikit

        // 2. Animasi Angka Penghitung (Integers)
        $('.counter').each(function() {
            var $this = $(this),
                target = parseInt($this.attr('data-target'));
            
            $({ countNum: 0 }).animate({ countNum: target }, {
                duration: 1500,
                easing: 'swing',
                step: function() {
                    $this.text(Math.floor(this.countNum));
                },
                complete: function() {
                    $this.text(this.countNum);
                }
            });
        });

        // 3. Animasi Angka Penghitung Desimal (Float) untuk Rata-rata
        $('.counter-float').each(function() {
            var $this = $(this),
                target = parseFloat($this.attr('data-target'));
            
            $({ countNum: 0 }).animate({ countNum: target }, {
                duration: 1500,
                easing: 'swing',
                step: function() {
                    // Paksa 1 angka di belakang koma
                    $this.text((this.countNum).toFixed(1));
                },
                complete: function() {
                    $this.text((this.countNum).toFixed(1));
                }
            });
        });
    });
</script>
@stop