@extends('layouts.admin')

@section('title', 'Dashboard Ringkasan Admin')

@section('content')
<!-- WELCOME BANNER -->
<div class="card border-0 mb-4 text-white overflow-hidden shadow-sm" style="background: linear-gradient(135deg, #022c22 0%, #064e3b 100%); border-radius: 1.5rem !important;">
    <div class="card-body p-4 p-md-5 position-relative">
        <div class="position-absolute" style="width: 250px; height: 250px; background: rgba(16, 185, 129, 0.15); border-radius: 50%; top: -100px; right: -50px; filter: blur(50px);"></div>
        <div class="position-absolute" style="width: 150px; height: 150px; background: rgba(5, 150, 105, 0.1); border-radius: 50%; bottom: -50px; right: 100px; filter: blur(40px);"></div>
        
        <div class="row align-items-center">
            <div class="col-lg-8">
                <span class="badge font-heading px-3 py-2 mb-3 rounded-pill" style="background: rgba(255,255,255,0.15) !important; color: white !important;">
                    <i class="fa-solid fa-chart-line me-1"></i> Ringkasan Panel Konten
                </span>
                <h2 class="fw-bold font-heading mb-2">Selamat Datang Kembali, {{ Auth::user()->name ?? 'Admin' }}! 👋</h2>
                <p class="text-white-50 mb-0">Kelola semua materi edukasi pengelolaan sampah dan pantau skor kuis siswa di dashboard ini dengan mudah.</p>
            </div>
            <div class="col-lg-4 text-lg-end mt-4 mt-lg-0">
                <div class="d-inline-flex align-items-center gap-2 p-3 bg-white bg-opacity-10 rounded-4 text-white border border-white border-opacity-10 backdrop-blur-sm">
                    <i class="fa-solid fa-calendar-alt fs-3 text-success"></i>
                    <div class="text-start">
                        <div class="small text-white-50" style="font-size: 0.7rem;">HARI INI</div>
                        <div class="fw-bold" style="font-size: 0.9rem;">{{ now()->format('l, d M Y') }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- METRICS COUNTERS -->
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-5 g-3 mb-4">
    <!-- TOTAL ARTIKEL -->
    <div class="col">
        <div class="card border-0 shadow-sm rounded-4 p-3 h-100 card-accent-green">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="text-muted fw-bold mb-1" style="font-size: 0.68rem; letter-spacing: 0.05em;">TOTAL ARTIKEL</h6>
                    <h2 class="fw-extrabold mb-0 text-dark font-heading">{{ $totalArticles }}</h2>
                </div>
                <div class="rounded-circle p-3 d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background-color: rgba(16, 185, 129, 0.1); color: #10b981;">
                    <i class="fa-solid fa-newspaper fs-4"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- TOTAL POSTER -->
    <div class="col">
        <div class="card border-0 shadow-sm rounded-4 p-3 h-100 card-accent-blue">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="text-muted fw-bold mb-1" style="font-size: 0.68rem; letter-spacing: 0.05em;">TOTAL POSTER</h6>
                    <h2 class="fw-extrabold mb-0 text-dark font-heading">{{ $totalPosters }}</h2>
                </div>
                <div class="rounded-circle p-3 d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background-color: rgba(59, 130, 246, 0.1); color: #3b82f6;">
                    <i class="fa-solid fa-file-image fs-4"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- TOTAL VIDEO -->
    <div class="col">
        <div class="card border-0 shadow-sm rounded-4 p-3 h-100 card-accent-orange">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="text-muted fw-bold mb-1" style="font-size: 0.68rem; letter-spacing: 0.05em;">TOTAL VIDEO</h6>
                    <h2 class="fw-extrabold mb-0 text-dark font-heading">{{ $totalVideos }}</h2>
                </div>
                <div class="rounded-circle p-3 d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background-color: rgba(249, 115, 22, 0.1); color: #f97316;">
                    <i class="fa-solid fa-video fs-4"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- SOAL KUIS -->
    <div class="col">
        <div class="card border-0 shadow-sm rounded-4 p-3 h-100 card-accent-red">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="text-muted fw-bold mb-1" style="font-size: 0.68rem; letter-spacing: 0.05em;">SOAL KUIS</h6>
                    <h2 class="fw-extrabold mb-0 text-dark font-heading">{{ $totalQuizQuestions }}</h2>
                </div>
                <div class="rounded-circle p-3 d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background-color: rgba(239, 68, 68, 0.1); color: #ef4444;">
                    <i class="fa-solid fa-circle-question fs-4"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- TOTAL SISWA BERMAIN -->
    <div class="col">
        <div class="card border-0 shadow-sm rounded-4 p-3 h-100 card-accent-purple">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="text-muted fw-bold mb-1" style="font-size: 0.68rem; letter-spacing: 0.05em;">SISWA BERMAIN</h6>
                    <h2 class="fw-extrabold mb-0 text-dark font-heading">{{ $totalStudents }}</h2>
                </div>
                <div class="rounded-circle p-3 d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background-color: rgba(139, 92, 246, 0.1); color: #8b5cf6;">
                    <i class="fa-solid fa-user-graduate fs-4"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row gy-4">
    <!-- RECENT ARTICLES -->
    <div class="col-lg-6">
        <div class="card border-0 shadow-sm rounded-4 p-4 card-accent-green h-100">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div>
                    <h5 class="fw-bold mb-1 text-dark"><i class="fa-solid fa-newspaper text-success me-2"></i> Artikel Terbaru</h5>
                    <small class="text-muted d-block" style="font-size: 0.75rem;">5 artikel yang terakhir diterbitkan</small>
                </div>
            </div>
            
            <div class="mt-3">
                @forelse($recentArticles as $art)
                <div class="d-flex align-items-center justify-content-between p-3 mb-2 rounded-3 border-bottom border-light bg-hover-soft">
                    <div class="d-flex align-items-center gap-3">
                        <div class="rounded-3 p-2 d-none d-sm-flex align-items-center justify-content-center" style="width: 40px; height: 40px; background-color: rgba(16, 185, 129, 0.1) !important; color: #10b981 !important;">
                            <i class="fa-solid fa-file-lines fs-5"></i>
                        </div>
                        <div>
                            <strong class="text-dark d-block" style="font-size: 0.9rem;">{{ Str::limit($art->title, 45) }}</strong>
                            <small class="text-muted" style="font-size: 0.75rem;">Diposting {{ $art->created_at ? $art->created_at->diffForHumans() : '-' }}</small>
                        </div>
                    </div>
                    <div>
                        <span class="badge bg-success">{{ $art->category }}</span>
                    </div>
                </div>
                @empty
                <div class="text-center text-muted py-5">
                    <i class="fa-solid fa-folder-open fs-2 mb-2 text-muted"></i>
                    <p class="mb-0">Belum ada artikel.</p>
                </div>
                @endforelse
            </div>
        </div>
    </div>

    <!-- RECENT POSTERS -->
    <div class="col-lg-6">
        <div class="card border-0 shadow-sm rounded-4 p-4 card-accent-blue h-100">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div>
                    <h5 class="fw-bold mb-1 text-dark"><i class="fa-solid fa-file-image text-primary me-2"></i> Poster Terbaru</h5>
                    <small class="text-muted d-block" style="font-size: 0.75rem;">5 poster yang terakhir diunggah</small>
                </div>
            </div>
            
            <div class="mt-3">
                @forelse($recentPosters as $pos)
                <div class="d-flex align-items-center justify-content-between p-3 mb-2 rounded-3 border-bottom border-light bg-hover-soft">
                    <div class="d-flex align-items-center gap-3">
                        <div class="rounded-3 p-2 d-none d-sm-flex align-items-center justify-content-center" style="width: 40px; height: 40px; background-color: rgba(59, 130, 246, 0.1) !important; color: #3b82f6 !important;">
                            <i class="fa-solid fa-image fs-5"></i>
                        </div>
                        <div>
                            <strong class="text-dark d-block" style="font-size: 0.9rem;">{{ Str::limit($pos->title, 45) }}</strong>
                            <small class="text-muted" style="font-size: 0.75rem;">Diunggah {{ $pos->created_at ? $pos->created_at->diffForHumans() : '-' }}</small>
                        </div>
                    </div>
                    <div>
                        <span class="badge bg-info text-dark"><i class="fa-solid fa-download me-1"></i>{{ $pos->download_count }}x</span>
                    </div>
                </div>
                @empty
                <div class="text-center text-muted py-5">
                    <i class="fa-solid fa-folder-open fs-2 mb-2 text-muted"></i>
                    <p class="mb-0">Belum ada poster.</p>
                </div>
                @endforelse
            </div>
        </div>
    </div>
</div>

<!-- STUDENT LEADERBOARD -->
<div class="row mt-4">
    <div class="col-12">
        <div class="card border-0 shadow-sm rounded-4 p-4 card-accent-purple">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div>
                    <h5 class="fw-bold mb-1 text-dark"><i class="fa-solid fa-trophy text-warning me-2"></i> Papan Peringkat Kuis Siswa</h5>
                    <small class="text-muted d-block" style="font-size: 0.75rem;">10 siswa dengan skor kuis tertinggi</small>
                </div>
                <span class="badge bg-success font-heading px-3 py-2 rounded-pill">Total Siswa: {{ $totalStudents }}</span>
            </div>
            
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0 text-center">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 15%;">Peringkat</th>
                            <th>Nama Siswa</th>
                            <th>Kelas</th>
                            <th>Nilai Tertinggi</th>
                            <th>Terakhir Bermain</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($studentScores as $index => $score)
                        <tr>
                            <td>
                                @if($index === 0)
                                    <span class="badge font-heading px-3 py-2" style="background-color: rgba(245, 158, 11, 0.15) !important; color: #b45309 !important; border: 1px solid rgba(245, 158, 11, 0.3) !important;">🥇 Juara 1</span>
                                @elseif($index === 1)
                                    <span class="badge font-heading px-3 py-2" style="background-color: rgba(148, 163, 184, 0.15) !important; color: #475569 !important; border: 1px solid rgba(148, 163, 184, 0.3) !important;">🥈 Juara 2</span>
                                @elseif($index === 2)
                                    <span class="badge font-heading px-3 py-2" style="background-color: rgba(194, 65, 12, 0.15) !important; color: #c2410c !important; border: 1px solid rgba(194, 65, 12, 0.3) !important;">🥉 Juara 3</span>
                                @else
                                    <span class="badge bg-light text-muted border font-heading px-3 py-2">{{ $index + 1 }}</span>
                                @endif
                            </td>
                            <td><strong class="text-dark">{{ $score->name }}</strong></td>
                            <td><span class="text-muted">{{ $score->class }}</span></td>
                            <td><strong class="text-success">{{ $score->score }} / 500</strong></td>
                            <td><small class="text-muted">{{ $score->updated_at ? $score->updated_at->diffForHumans() : '-' }}</small></td>
                        </tr>
                        @empty
                        <tr><td colspan="5" class="text-center text-muted py-4">Belum ada siswa yang bermain kuis.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection