@extends('layouts.admin')

@section('title', 'Dashboard Admin')
@section('page-title', 'Dashboard')

@section('content')
<!-- Stats Cards -->
<div class="grid grid-cols-4 mb-6">
    <div class="stat-card">
        <div class="stat-icon blue">
            <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/>
            </svg>
        </div>
        <div class="stat-content">
            <span class="stat-value">{{ $stats['total_students'] }}</span>
            <span class="stat-label">Total Siswa</span>
        </div>
    </div>
    
    <div class="stat-card">
        <div class="stat-icon yellow">
            <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
            </svg>
        </div>
        <div class="stat-content">
            <span class="stat-value">{{ $stats['pending_submissions'] }}</span>
            <span class="stat-label">Menunggu Verifikasi</span>
        </div>
    </div>
    
    <div class="stat-card">
        <div class="stat-icon green">
            <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
        </div>
        <div class="stat-content">
            <span class="stat-value">{{ $stats['verified_submissions'] }}</span>
            <span class="stat-label">Terverifikasi</span>
        </div>
    </div>
    
    <div class="stat-card">
        <div class="stat-icon purple">
            <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
            </svg>
        </div>
        <div class="stat-content">
            <span class="stat-value">{{ $stats['total_criteria'] }}</span>
            <span class="stat-label">Total Kriteria</span>
        </div>
    </div>
</div>

<div class="grid grid-cols-2">
    <!-- Recent Submissions -->
    <div class="card">
        <div class="card-header flex justify-between items-center">
            <h2>Pengajuan Terbaru</h2>
            <a href="{{ route('admin.submissions.index') }}" class="btn btn-secondary btn-sm">Lihat Semua</a>
        </div>
        <div class="card-body">
            @if($recentSubmissions->isEmpty())
                <p class="text-muted text-center">Belum ada pengajuan.</p>
            @else
                <div class="table-container">
                    <table>
                        <thead>
                            <tr>
                                <th>Nama</th>
                                <th>Status</th>
                                <th>Tanggal</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recentSubmissions as $submission)
                                <tr>
                                    <td>{{ $submission->student->user->name ?? '-' }}</td>
                                    <td>
                                        <span class="badge badge-{{ $submission->status->color() }}">
                                            {{ $submission->status->label() }}
                                        </span>
                                    </td>
                                    <td class="text-sm text-muted">{{ $submission->created_at->format('d M Y') }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>
    
    <!-- Top Rankings -->
    <div class="card">
        <div class="card-header flex justify-between items-center">
            <h2>Peringkat Teratas ({{ $stats['current_period'] }})</h2>
            <a href="{{ route('admin.results.index') }}" class="btn btn-secondary btn-sm">Lihat Semua</a>
        </div>
        <div class="card-body">
            @if($latestResults->isEmpty())
                <p class="text-muted text-center">Belum ada hasil perhitungan.</p>
            @else
                <div class="table-container">
                    <table>
                        <thead>
                            <tr>
                                <th>Rank</th>
                                <th>Nama</th>
                                <th>Skor Yi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($latestResults as $result)
                                <tr>
                                    <td>
                                        <span class="rank-badge rank-{{ $result->rank }}">{{ $result->rank }}</span>
                                    </td>
                                    <td>{{ $result->submission->student->user->name ?? '-' }}</td>
                                    <td class="font-medium">{{ number_format($result->yi_score, 6) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>
</div>

@push('styles')
<style>
    .stat-card {
        background: white;
        border-radius: 0.75rem;
        padding: 1.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    
    .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .stat-icon.blue {
        background: #dbeafe;
        color: #2563eb;
    }
    
    .stat-icon.yellow {
        background: #fef3c7;
        color: #d97706;
    }
    
    .stat-icon.green {
        background: #d1fae5;
        color: #059669;
    }
    
    .stat-icon.purple {
        background: #ede9fe;
        color: #7c3aed;
    }
    
    .stat-content {
        display: flex;
        flex-direction: column;
    }
    
    .stat-value {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--gray-800);
    }
    
    .stat-label {
        font-size: 0.875rem;
        color: var(--gray-500);
    }
    
    .rank-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        font-size: 0.75rem;
        font-weight: 600;
        background: var(--gray-100);
        color: var(--gray-600);
    }
    
    .rank-badge.rank-1 {
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        color: white;
    }
    
    .rank-badge.rank-2 {
        background: linear-gradient(135deg, #9ca3af, #6b7280);
        color: white;
    }
    
    .rank-badge.rank-3 {
        background: linear-gradient(135deg, #d97706, #b45309);
        color: white;
    }
</style>
@endpush
@endsection