@extends('adminlte::page')

@section('title', 'Hasil & Analisis Nilai')

{{-- CSS KHUSUS TEMA APEX MODERN --}}
@section('css')
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
    :root {
        --primary: #5B247A; /* Warna Royal Purple */
        --primary-soft: #f3eafa;
        --secondary: #00D2FC;
        --text-dark: #2d3748;
        --text-muted: #718096;
        --bg-light: #f7fafc;
    }

    body { font-family: 'Poppins', sans-serif; background-color: var(--bg-light); }

    /* Card Modern */
    .apex-card {
        border: none;
        border-radius: 15px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.03);
        background: #fff;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        margin-bottom: 20px;
    }
    .apex-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.06); }

    /* Header styling */
    .page-title { font-weight: 700; color: var(--text-dark); letter-spacing: -0.5px; }
    
    /* Table Styling */
    .table-modern th {
        background-color: #f8f9fa;
        color: var(--text-muted);
        text-transform: uppercase;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.5px;
        border-top: none;
        border-bottom: 1px solid #e2e8f0;
        padding: 15px 20px;
    }
    .table-modern td {
        vertical-align: middle;
        padding: 15px 20px;
        border-bottom: 1px solid #f1f5f9;
        color: var(--text-dark);
        font-size: 0.9rem;
    }
    .table-modern tr:last-child td { border-bottom: none; }

    /* Badges */
    .badge-soft { padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: 0.75rem; }
    .badge-soft-primary { background-color: var(--primary-soft); color: var(--primary); }
    .badge-soft-success { background-color: #def7ec; color: #03543f; }
    .badge-soft-warning { background-color: #fdf6b2; color: #723b13; }
    .badge-soft-secondary { background-color: #e2e8f0; color: #4a5568; }

    /* Button */
    .btn-apex {
        border-radius: 10px;
        padding: 8px 16px;
        font-weight: 500;
        font-size: 0.85rem;
        transition: all 0.3s;
    }
    .btn-apex-primary {
        background: linear-gradient(135deg, var(--primary) 0%, #3e1654 100%);
        color: white;
        border: none;
        box-shadow: 0 4px 10px rgba(91, 36, 122, 0.2);
    }
    .btn-apex-primary:hover { color: white; box-shadow: 0 6px 15px rgba(91, 36, 122, 0.3); transform: translateY(-1px); }

    /* Icon Box */
    .icon-box {
        width: 45px; height: 45px;
        border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.2rem;
    }
</style>
@stop

@section('content_header')
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h1 class="page-title m-0" style="font-size: 1.7rem;">Hasil & Analisis Nilai</h1>
            <p class="text-muted m-0 small">Pantau progres dan hasil ujian siswa secara real-time.</p>
        </div>
        <div class="d-none d-md-block">
            <span class="badge badge-soft-primary p-2 px-3">
                <i class="far fa-calendar-alt mr-2"></i> {{ now()->translatedFormat('l, d F Y') }}
            </span>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid p-0">

    {{-- 1. RINGKASAN STATISTIK --}}
    <div class="row">
        <div class="col-md-4">
            <div class="card apex-card p-3">
                <div class="d-flex align-items-center">
                    <div class="icon-box bg-light text-primary mr-3">
                        <i class="fas fa-file-signature"></i>
                    </div>
                    <div>
                        <small class="text-muted font-weight-bold text-uppercase">Total Ujian</small>
                        <h4 class="mb-0 font-weight-bold">{{ $ujians->total() }}</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card apex-card p-3">
                <div class="d-flex align-items-center">
                    <div class="icon-box bg-light text-success mr-3">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <div>
                        <small class="text-muted font-weight-bold text-uppercase">Total Siswa Selesai</small>
                        {{-- Menghitung total dari semua data di halaman ini --}}
                        <h4 class="mb-0 font-weight-bold">{{ $ujians->sum('total_selesai') }}</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card apex-card p-3">
                <div class="d-flex align-items-center">
                    <div class="icon-box bg-light text-info mr-3">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div>
                        <small class="text-muted font-weight-bold text-uppercase">Rata-rata Nilai</small>
                        <h4 class="mb-0 font-weight-bold">-</h4> {{-- Fitur Next Update --}}
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- 2. TABEL DATA MODERN --}}
    <div class="card apex-card">
        <div class="card-header bg-white d-flex justify-content-between align-items-center py-4 border-0">
            <h5 class="font-weight-bold m-0 text-dark">Daftar Riwayat Ujian</h5>
            <div class="card-tools">
                <div class="input-group" style="width: 250px;">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-light border-0 pl-3"><i class="fas fa-search text-muted"></i></span>
                    </div>
                    <input type="text" id="tableSearch" class="form-control bg-light border-0" placeholder="Cari Nama Ujian...">
                </div>
            </div>
        </div>
        
        <div class="table-responsive">
            <table class="table table-modern table-hover mb-0" id="tableUjian">
                <thead>
                    <tr>
                        <th width="5%" class="text-center">No</th>
                        <th width="30%">Informasi Ujian</th>
                        <th width="20%">Target Kelas</th>
                        <th width="15%">Waktu</th>
                        <th width="15%" class="text-center">Partisipasi</th>
                        <th width="15%" class="text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($ujians as $ujian)
                        <tr>
                            <td class="text-center font-weight-bold text-muted">{{ $loop->iteration + $ujians->firstItem() - 1 }}</td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="icon-box bg-soft-primary text-primary mr-3 rounded-circle" style="width: 40px; height: 40px; font-size: 1rem;">
                                        {{ substr($ujian->nama_ujian, 0, 1) }}
                                    </div>
                                    <div>
                                        <span class="d-block font-weight-bold text-dark">{{ $ujian->nama_ujian }}</span>
                                        <small class="text-muted">
                                            <i class="fas fa-layer-group mr-1"></i> {{ $ujian->bankSoal->mataPelajaran->nama_mapel ?? 'Mapel Umum' }}
                                        </small>
                                    </div>
                                </div>
                            </td>
                            <td>
                                @foreach($ujian->kelas as $kls)
                                    <span class="badge badge-soft-secondary mb-1">{{ $kls->nama_kelas }}</span>
                                @endforeach
                            </td>
                            <td>
                                <div class="d-flex flex-column">
                                    <span class="text-dark font-weight-bold" style="font-size: 0.85rem;">
                                        {{ \Carbon\Carbon::parse($ujian->waktu_mulai)->format('d M Y') }}
                                    </span>
                                    <small class="text-muted">
                                        {{ \Carbon\Carbon::parse($ujian->waktu_mulai)->format('H:i') }} WIB
                                    </small>
                                </div>
                            </td>
                            <td class="text-center">
                                <div class="d-inline-block text-center">
                                    <h5 class="mb-0 font-weight-bold text-success">{{ $ujian->total_selesai }}</h5>
                                    <small class="text-muted" style="font-size: 0.7rem;">SISWA SELESAI</small>
                                </div>
                            </td>
                            <td class="text-center">
                                <a href="{{ route('guru.ujian.koreksi.index', $ujian->id) }}" class="btn btn-apex btn-apex-primary shadow-sm" title="Lihat Detail Nilai">
                                    <i class="fas fa-chart-bar mr-2"></i> Detail
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center py-5">
                                <div class="d-flex flex-column align-items-center justify-content-center opacity-50">
                                    <img src="https://img.icons8.com/clouds/100/000000/empty-box.png" alt="Kosong">
                                    <h6 class="font-weight-bold text-muted mt-2">Belum ada data ujian.</h6>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        {{-- Pagination Modern --}}
        @if($ujians->hasPages())
            <div class="card-footer bg-white border-0 py-3">
                <div class="d-flex justify-content-end">
                    {{ $ujians->links('pagination::bootstrap-4') }}
                </div>
            </div>
        @endif
    </div>
</div>
@stop

@section('js')
    <script>
        $(document).ready(function(){
            // Efek pencarian real-time
            $("#tableSearch").on("keyup", function() {
                var value = $(this).val().toLowerCase();
                $("#tableUjian tbody tr").filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });
        });
    </script>
@stop