@extends('admin.layouts.master')
@section('title', 'Admin Dashboard')

@section('content')
<style>
    :root {
        --primary-emerald: #047857;
        --primary-hover: #065f46;
        --primary-light: #ecfdf5;
        --primary-border: #a7f3d0;
        --slate-900: #0f172a;
        --slate-800: #1e293b;
        --slate-700: #334155;
        --slate-600: #475569;
        --slate-500: #64748b;
        --slate-300: #cbd5e1;
        --slate-200: #e2e8f0;
        --slate-100: #f1f5f9;
        --slate-50:  #f8fafc;
    }

    .admin-dashboard-wrapper {
        padding: 2rem 1.5rem 3.5rem;
        background-color: #f8fafc;
        min-height: calc(100vh - 100px);
    }

    /* Hero Banner */
    .admin-hero-card {
        background: #ffffff;
        border: 1px solid var(--slate-200);
        border-radius: 20px;
        padding: 2.25rem 2.5rem;
        box-shadow: 0 4px 20px -5px rgba(15, 23, 42, 0.05);
        margin-bottom: 2rem;
        position: relative;
        overflow: hidden;
    }

    .admin-hero-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 6px;
        height: 100%;
        background: linear-gradient(180deg, var(--primary-emerald) 0%, #065f46 100%);
    }

    .admin-hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.35rem 0.85rem;
        background: var(--primary-light);
        border: 1px solid var(--primary-border);
        border-radius: 9999px;
        color: var(--primary-emerald);
        font-size: 0.785rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-bottom: 0.85rem;
    }

    .admin-hero-title {
        font-size: 1.85rem;
        font-weight: 800;
        color: var(--slate-900);
        margin: 0 0 0.5rem;
        letter-spacing: -0.02em;
    }

    .admin-hero-subtitle {
        font-size: 0.95rem;
        color: var(--slate-600);
        margin: 0;
    }

    /* Action Buttons */
    .btn-admin-primary {
        background: linear-gradient(135deg, var(--primary-emerald) 0%, var(--primary-hover) 100%);
        color: #ffffff;
        font-weight: 700;
        font-size: 0.875rem;
        padding: 0.7rem 1.35rem;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        transition: all 0.2s ease;
        text-decoration: none !important;
        border: none;
        box-shadow: 0 4px 14px rgba(4, 120, 87, 0.25);
    }

    .btn-admin-primary:hover {
        color: #ffffff;
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(4, 120, 87, 0.35);
    }

    .btn-admin-outline {
        background: #ffffff;
        border: 1.5px solid var(--slate-300);
        color: var(--slate-700);
        font-weight: 700;
        font-size: 0.875rem;
        padding: 0.7rem 1.35rem;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        transition: all 0.2s ease;
        text-decoration: none !important;
    }

    .btn-admin-outline:hover {
        background: var(--slate-100);
        color: var(--slate-900);
    }

    /* Metric Cards */
    .kpi-card {
        background: #ffffff;
        border: 1px solid var(--slate-200);
        border-radius: 18px;
        padding: 1.5rem;
        display: flex;
        align-items: center;
        gap: 1.25rem;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .kpi-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.06);
    }

    .kpi-icon-box {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.35rem;
        flex-shrink: 0;
    }

    .kpi-icon-emerald { background: var(--primary-light); color: var(--primary-emerald); }
    .kpi-icon-blue    { background: #eff6ff; color: #2563eb; }
    .kpi-icon-amber   { background: #fffbeb; color: #d97706; }
    .kpi-icon-purple  { background: #faf5ff; color: #9333ea; }

    .kpi-val {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--slate-900);
        line-height: 1.2;
    }

    .kpi-lbl {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--slate-500);
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    /* Operation Cards */
    .op-card {
        background: #ffffff;
        border: 1px solid var(--slate-200);
        border-radius: 18px;
        padding: 1.75rem;
        box-shadow: 0 4px 15px -3px rgba(15, 23, 42, 0.04);
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .op-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 25px -5px rgba(15, 23, 42, 0.08);
        border-color: var(--primary-border);
    }

    .op-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: var(--primary-light);
        color: var(--primary-emerald);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        margin-bottom: 1.25rem;
    }

    .op-title {
        font-size: 1.15rem;
        font-weight: 800;
        color: var(--slate-900);
        margin: 0 0 0.5rem;
    }

    .op-desc {
        font-size: 0.875rem;
        color: var(--slate-600);
        line-height: 1.5;
        margin-bottom: 1.5rem;
    }

    /* System Status Card */
    .system-health-card {
        background: #ffffff;
        border: 1px solid var(--slate-200);
        border-radius: 18px;
        padding: 1.75rem;
        box-shadow: 0 4px 15px -3px rgba(15, 23, 42, 0.04);
    }

    .health-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 0;
        border-bottom: 1px dashed var(--slate-200);
    }

    .health-item:last-child {
        border-bottom: none;
    }

    .health-label {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--slate-600);
    }

    .health-value {
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--slate-900);
    }
</style>

<div class="admin-dashboard-wrapper">
    <div class="container-fluid">

        <!-- Welcome Hero Banner -->
        <div class="admin-hero-card">
            <div class="row align-items-center">
                <div class="col-lg-8 mb-3 mb-lg-0">
                    <div class="admin-hero-badge">
                        <i class="fas fa-shield-alt"></i>
                        <span>System Administration Console</span>
                    </div>
                    <h1 class="admin-hero-title">
                        Welcome back, {{ Auth::user()->name ?? Auth::user()->username }}
                    </h1>
                    <p class="admin-hero-subtitle">
                        Ahmadu Bello University Distance Learning Centre Result & Student Management Portal.
                    </p>
                </div>
                <div class="col-lg-4 text-lg-right d-flex gap-2 justify-content-lg-end" style="gap: 0.75rem;">
                    <a href="{{ route('admin.result.upload') }}" class="btn-admin-primary">
                        <i class="fas fa-file-upload"></i> Upload Results
                    </a>
                    <a href="{{ route('users.index') }}" class="btn-admin-outline">
                        <i class="fas fa-users-cog"></i> Users
                    </a>
                </div>
            </div>
        </div>

        <!-- KPI Metrics Row -->
        <div class="row mb-4">
            <div class="col-xl-3 col-md-6 mb-3 mb-xl-0">
                <div class="kpi-card">
                    <div class="kpi-icon-box kpi-icon-blue">
                        <i class="fas fa-users"></i>
                    </div>
                    <div>
                        <div class="kpi-val">{{ number_format($userCount) }}</div>
                        <div class="kpi-lbl">Registered Accounts</div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6 mb-3 mb-xl-0">
                <div class="kpi-card">
                    <div class="kpi-icon-box kpi-icon-emerald">
                        <i class="fas fa-file-alt"></i>
                    </div>
                    <div>
                        <div class="kpi-val">{{ number_format($resultCount) }}</div>
                        <div class="kpi-lbl">Result Records</div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6 mb-3 mb-md-0">
                <div class="kpi-card">
                    <div class="kpi-icon-box kpi-icon-purple">
                        <i class="fas fa-user-shield"></i>
                    </div>
                    <div>
                        <div class="kpi-val">{{ number_format($roleCount) }}</div>
                        <div class="kpi-lbl">System Roles</div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6">
                <div class="kpi-card">
                    <div class="kpi-icon-box kpi-icon-amber">
                        <i class="fas fa-headset"></i>
                    </div>
                    <div>
                        <div class="kpi-val">{{ number_format($unreadMessagesCount) }}</div>
                        <div class="kpi-lbl">Unread Tickets</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Management Operations Row -->
        <div class="row mb-4">
            <div class="col-lg-3 col-md-6 mb-4 mb-lg-0">
                <div class="op-card">
                    <div>
                        <div class="op-icon">
                            <i class="fas fa-users-cog"></i>
                        </div>
                        <h3 class="op-title">User Accounts</h3>
                        <p class="op-desc">Create, search, filter, and manage student and staff user profiles, reset credentials, and assign roles.</p>
                    </div>
                    <div>
                        <a href="{{ route('users.index') }}" class="btn-admin-outline w-100 justify-content-center">
                            Manage Users <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6 mb-4 mb-lg-0">
                <div class="op-card">
                    <div>
                        <div class="op-icon">
                            <i class="fas fa-file-upload"></i>
                        </div>
                        <h3 class="op-title">Upload Results</h3>
                        <p class="op-desc">Import batch examination score sheets from Excel/CSV files into the central result repository.</p>
                    </div>
                    <div>
                        <a href="{{ route('admin.result.upload') }}" class="btn-admin-primary w-100 justify-content-center">
                            Upload File <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
                <div class="op-card">
                    <div>
                        <div class="op-icon">
                            <i class="fas fa-tasks"></i>
                        </div>
                        <h3 class="op-title">Publish Results</h3>
                        <p class="op-desc">Review uploaded semester results, publish results for student access, or retract for audit.</p>
                    </div>
                    <div>
                        <a href="{{ route('admin.result.manage') }}" class="btn-admin-outline w-100 justify-content-center">
                            Publish & Audit <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="op-card">
                    <div>
                        <div class="op-icon">
                            <i class="fas fa-comments"></i>
                        </div>
                        <h3 class="op-title">Support Tickets</h3>
                        <p class="op-desc">Review and respond to student complaints regarding missing or incomplete examination results.</p>
                    </div>
                    <div>
                        <a href="{{ route('posts.index') }}" class="btn-admin-outline w-100 justify-content-center">
                            View Grievances <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- System Status & Info Row -->
        <div class="row">
            <div class="col-lg-8 mb-4 mb-lg-0">
                <div class="system-health-card">
                    <h4 style="font-size: 1.1rem; font-weight: 800; color: var(--slate-900); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem;">
                        <i class="fas fa-server text-success"></i> Portal Operations Summary
                    </h4>
                    <p class="text-muted mb-3" style="font-size: 0.9rem; line-height: 1.6;">
                        Welcome to the official Ahmadu Bello University Distance Learning Centre Administrative Result Portal. All database queries, user management operations, and result publication workflows are running under optimized server parameters with active index scans.
                    </p>
                    <div class="p-3 rounded-lg" style="background: var(--primary-light); border: 1px solid var(--primary-border); display: flex; align-items: center; gap: 0.85rem;">
                        <i class="fas fa-shield-alt text-success" style="font-size: 1.35rem;"></i>
                        <div>
                            <strong style="color: var(--primary-emerald); font-size: 0.875rem;">Security & Performance Active</strong>
                            <div class="text-muted" style="font-size: 0.8rem;">Database queries are paginated via Yajra DataTables with server-side limit offsets.</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="system-health-card">
                    <h4 style="font-size: 1.1rem; font-weight: 800; color: var(--slate-900); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem;">
                        <i class="fas fa-microchip text-success"></i> Server Health
                    </h4>
                    
                    <div class="health-item">
                        <span class="health-label">Environment</span>
                        <span class="health-value"><span class="badge badge-success">PHP 8.4 Active</span></span>
                    </div>
                    <div class="health-item">
                        <span class="health-label">Framework</span>
                        <span class="health-value">Laravel 7.30</span>
                    </div>
                    <div class="health-item">
                        <span class="health-label">Memory Limit</span>
                        <span class="health-value">512 MB</span>
                    </div>
                    <div class="health-item">
                        <span class="health-label">Query Optimization</span>
                        <span class="health-value">Indexed (Yajra DT)</span>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection