@extends('layouts.admin')

@section('content')
<style>
    /* ============ HEADER ============ */
    .results-header {
        position: relative;
        overflow: hidden;
        border-radius: 1.75rem;
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: linear-gradient(135deg, rgba(10, 16, 30, 0.78), rgba(15, 23, 42, 0.58)),
                    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),
                    0 28px 70px rgba(2, 6, 23, 0.4);
        backdrop-filter: blur(12px) saturate(125%);
        padding: 1.5rem;
    }
    .results-header::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent 34%);
        pointer-events: none;
    }
    .results-header::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.14) 40%, transparent 58%);
        transform: translateX(-120%);
        animation: headerSweep 8s ease-in-out infinite;
        pointer-events: none;
    }
    @keyframes headerSweep {
        0%, 100% { transform: translateX(-120%); }
        50% { transform: translateX(120%); }
    }

    /* ============ KPI CARDS ============ */
    .kpi-card {
        padding: 1rem 1.15rem;
        border-radius: 1.15rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(8px);
    }
    .kpi-card-label {
        font-size: 0.6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: #94a3b8;
    }
    .kpi-card-value {
        font-size: 1.5rem;
        font-weight: 700;
        color: white;
        margin-top: 0.35rem;
        line-height: 1;
    }
    .kpi-card-blue { border-color: rgba(59,130,246,0.3); background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(15,23,42,0.4)); }
    .kpi-card-cyan { border-color: rgba(34,211,238,0.3); background: linear-gradient(135deg, rgba(34,211,238,0.08), rgba(15,23,42,0.4)); }
    .kpi-card-green { border-color: rgba(34,197,94,0.3); background: linear-gradient(135deg, rgba(34,197,94,0.08), rgba(15,23,42,0.4)); }
    .kpi-card-amber { border-color: rgba(234,179,8,0.3); background: linear-gradient(135deg, rgba(234,179,8,0.08), rgba(15,23,42,0.4)); }

    /* ============ FILTER PILLS ============ */
    .filter-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.55rem 0.95rem;
        border-radius: 0.85rem;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #cbd5e1;
        font-size: 0.82rem;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.2s;
    }
    .filter-pill:hover {
        background: rgba(34, 211, 238, 0.08);
        border-color: rgba(34, 211, 238, 0.4);
        color: #67e8f9;
    }
    .filter-pill.is-active {
        background: linear-gradient(135deg, rgba(34,211,238,0.18), rgba(59,130,246,0.18));
        border-color: rgba(34, 211, 238, 0.5);
        color: #67e8f9;
        box-shadow: 0 4px 14px rgba(34,211,238,0.15);
    }
    .filter-pill-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.5rem;
        padding: 0.1rem 0.45rem;
        border-radius: 9999px;
        background: rgba(0, 0, 0, 0.3);
        font-size: 0.65rem;
        font-weight: 700;
    }

    /* ============ SEARCH BAR ============ */
    .search-bar {
        position: relative;
        flex: 1;
        min-width: 240px;
    }
    .search-input {
        width: 100%;
        padding: 0.7rem 1rem 0.7rem 2.75rem;
        border-radius: 0.85rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(2, 6, 23, 0.5);
        color: white;
        font-size: 0.88rem;
        outline: none;
        transition: all 0.2s;
    }
    .search-input:focus {
        border-color: rgba(34, 211, 238, 0.5);
        box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1);
    }
    .search-input::placeholder {
        color: #64748b;
    }
    .search-icon {
        position: absolute;
        left: 0.85rem;
        top: 50%;
        transform: translateY(-50%);
        color: #64748b;
        pointer-events: none;
    }

    /* ============ TABLE ============ */
    .results-table-wrapper {
        border-radius: 1.5rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.55), rgba(10, 16, 30, 0.4));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
                    0 20px 50px rgba(2, 6, 23, 0.3);
        backdrop-filter: blur(12px);
        overflow: hidden;
    }
    .results-table {
        width: 100%;
        border-collapse: collapse;
    }
    .results-table thead {
        background: rgba(2, 6, 23, 0.5);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .results-table thead th {
        padding: 0.9rem 1rem;
        text-align: left;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: #94a3b8;
        white-space: nowrap;
    }
    .results-table tbody tr {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        transition: background 0.2s;
    }
    .results-table tbody tr:last-child { border-bottom: none; }
    .results-table tbody tr:hover {
        background: rgba(34, 211, 238, 0.04);
    }
    .results-table tbody td {
        padding: 1rem;
        color: #e2e8f0;
        font-size: 0.85rem;
        vertical-align: middle;
    }

    /* ============ BADGES ============ */
    .badge {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.2rem 0.6rem;
        border-radius: 9999px;
        font-size: 0.62rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        white-space: nowrap;
    }
    .badge-type {
        background: linear-gradient(135deg, rgba(34,211,238,0.18), rgba(59,130,246,0.18));
        color: #67e8f9;
        border: 1px solid rgba(34, 211, 238, 0.35);
    }
    .badge-easy { background: rgba(34,197,94,0.15); color: #86efac; border: 1px solid rgba(34,197,94,0.3); }
    .badge-medium { background: rgba(234,179,8,0.15); color: #fde047; border: 1px solid rgba(234,179,8,0.3); }
    .badge-hard { background: rgba(239,68,68,0.15); color: #fca5a5; border: 1px solid rgba(239,68,68,0.3); }
    .badge-slate { background: rgba(148,163,184,0.12); color: #cbd5e1; border: 1px solid rgba(148,163,184,0.3); }

    .attempts-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.5rem;
        padding: 0.35rem 0.7rem;
        border-radius: 0.65rem;
        background: linear-gradient(135deg, rgba(34,211,238,0.15), rgba(59,130,246,0.15));
        border: 1px solid rgba(34,211,238,0.3);
        font-size: 0.85rem;
        font-weight: 700;
        color: #67e8f9;
    }

    /* ============ ACTION BUTTON ============ */
    .btn-view {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.5rem 0.9rem;
        border-radius: 0.65rem;
        background: linear-gradient(135deg, rgba(99,102,241,0.85), rgba(79,70,229,0.85));
        color: white;
        font-size: 0.75rem;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.2s;
        border: 1px solid rgba(129,140,248,0.5);
    }
    .btn-view:hover {
        background: linear-gradient(135deg, rgba(99,102,241,1), rgba(79,70,229,1));
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(99,102,241,0.3);
    }

    /* ============ EMPTY STATE ============ */
    .empty-state {
        padding: 4rem 1.5rem;
        text-align: center;
    }
    .empty-icon { font-size: 3rem; margin-bottom: 0.75rem; }
    .empty-title { font-size: 1rem; font-weight: 600; color: white; }
    .empty-sub { font-size: 0.85rem; color: #94a3b8; margin-top: 0.35rem; }

    /* ============ MOBILE CARDS ============ */
    .mobile-card {
        display: none;
        padding: 1rem;
        border-radius: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.03);
        margin-bottom: 0.75rem;
    }
    .mobile-card-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 0.6rem;
    }
    .mobile-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.6rem;
        padding-top: 0.6rem;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    /* ============ RESPONSIVE ============ */
    @media (max-width: 900px) {
        .results-table-wrapper { display: none; }
        .mobile-card-list { display: block; }
    }
    @media (min-width: 901px) {
        .mobile-card-list { display: none; }
    }
    @media (max-width: 640px) {
        .results-header { padding: 1rem; }
        .kpi-card-value { font-size: 1.25rem; }
    }
</style>

<div class="space-y-6">

    {{-- ============ HEADER ============ --}}
    <div class="results-header">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
            <div>
                <p class="text-xs font-semibold uppercase tracking-[0.26em] text-amber-200">Results</p>
                <h1 class="mt-1 text-2xl font-bold text-white">Completed Exams</h1>
                <p class="mt-1 text-sm text-slate-400">View performance, attempts, and per-student breakdown</p>
            </div>
        </div>
    </div>

    {{-- ============ KPI STRIP ============ --}}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="kpi-card kpi-card-blue">
            <p class="kpi-card-label">Completed Exams</p>
            <p class="kpi-card-value">{{ $totalExams ?? 0 }}</p>
        </div>
        <div class="kpi-card kpi-card-cyan">
            <p class="kpi-card-label">Total Attempts</p>
            <p class="kpi-card-value">{{ $totalAttempts ?? 0 }}</p>
        </div>
        <div class="kpi-card kpi-card-green">
            <p class="kpi-card-label">Pass Rate</p>
            <p class="kpi-card-value">{{ number_format($passRate ?? 0, 1) }}%</p>
        </div>
        <div class="kpi-card kpi-card-amber">
            <p class="kpi-card-label">Avg Score</p>
            <p class="kpi-card-value">{{ number_format($avgScore ?? 0, 1) }}%</p>
        </div>
    </div>

    {{-- ============ SEARCH + FILTER ============ --}}
    <div class="space-y-4">
        {{-- Search --}}
        <form method="GET" action="{{ route('admin.results.index') }}" class="flex flex-wrap items-center gap-3">
            @if($selectedExamType)
                <input type="hidden" name="exam_type" value="{{ $selectedExamType }}">
            @endif

            <div class="search-bar">
                <span class="search-icon">
                    <svg viewBox="0 0 24 24" fill="none" class="w-5 h-5">
                        <circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"/>
                        <path d="M20 20l-3.5-3.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                </span>
                <input type="text" name="search" value="{{ $search ?? '' }}" class="search-input"
                       placeholder="Search by exam title, subject, or topic...">
            </div>

            <button type="submit" class="admin-action-btn bg-sky-600 text-white">
                Search
            </button>

            @if($search || $selectedExamType)
                <a href="{{ route('admin.results.index') }}" class="admin-action-btn bg-slate-700 text-white">
                    Reset
                </a>
            @endif
        </form>

        {{-- Filter Pills --}}
        <div>
            <label class="mb-3 block text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">Filter by Exam Type</label>
            <div class="flex flex-wrap items-center gap-2">
                <a href="{{ route('admin.results.index', ['search' => $search]) }}"
                   class="filter-pill {{ ($selectedExamType ?? '') === '' ? 'is-active' : '' }}">
                    All Exams
                </a>
                @foreach($examTypes as $key => $label)
                    <a href="{{ route('admin.results.index', ['search' => $search, 'exam_type' => $key]) }}"
                       class="filter-pill {{ $selectedExamType === $key ? 'is-active' : '' }}">
                        {{ $key }}
                        @if(isset($examTypeCounts[$key]))
                            <span class="filter-pill-count">{{ $examTypeCounts[$key] }}</span>
                        @endif
                    </a>
                @endforeach
            </div>
        </div>
    </div>

    {{-- ============ DESKTOP TABLE ============ --}}
    @if($exams->count() > 0)
        <div class="results-table-wrapper">
            <table class="results-table">
                <thead>
                    <tr>
                        <th>Exam</th>
                        <th>Type</th>
                        <th>Subject</th>
                        <th>Topic</th>
                        <th>Difficulty</th>
                        <th>Test Type</th>
                        <th style="text-align: center;">Attempts</th>
                        <th style="text-align: right;">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($exams as $exam)
                        <tr>
                            {{-- Title --}}
                            <td>
                                <p class="text-sm font-semibold text-white leading-tight max-w-xs">
                                    {{ $exam->title }}
                                </p>
                            </td>

                            {{-- Exam Type --}}
                            <td>
                                <span class="badge badge-type">{{ $exam->exam_type ?? 'N/A' }}</span>
                            </td>

                            {{-- Subject --}}
                            <td>
                                @if($exam->subject && $exam->subject !== 'All Subjects')
                                    <span class="text-sm text-slate-300">📚 {{ $exam->subject }}</span>
                                @elseif($exam->subject === 'All Subjects')
                                    <span class="text-sm text-slate-300">📚 All Subjects</span>
                                @else
                                    <span class="text-sm text-slate-500">—</span>
                                @endif
                            </td>

                            {{-- Topic --}}
                            <td>
                                @if($exam->topic)
                                    <span class="text-sm text-slate-300">→ {{ $exam->topic }}</span>
                                @else
                                    <span class="text-sm text-slate-500">—</span>
                                @endif
                            </td>

                            {{-- Difficulty --}}
                            <td>
                                @if($exam->difficulty_level)
                                    <span class="badge badge-{{ strtolower($exam->difficulty_level) }}">
                                        {{ $exam->difficulty_level }}
                                    </span>
                                @else
                                    <span class="text-sm text-slate-500">—</span>
                                @endif
                            </td>

                            {{-- Test Type --}}
                            <td>
                                @if($exam->test_type)
                                    <span class="text-xs text-slate-300">
                                        {{ ucwords(str_replace('_', ' ', $exam->test_type)) }}
                                    </span>
                                @else
                                    <span class="text-sm text-slate-500">—</span>
                                @endif
                            </td>

                            {{-- Attempts --}}
                            <td style="text-align: center;">
                                <span class="attempts-badge">{{ $exam->results_count ?? 0 }}</span>
                            </td>

                            {{-- Action --}}
                            <td style="text-align: right;">
                                <a href="{{ route('admin.results.show', ['exam' => $exam->id]) }}" class="btn-view">
                                    View Students
                                    <svg viewBox="0 0 24 24" fill="none" class="w-3.5 h-3.5">
                                        <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{-- ============ MOBILE CARDS ============ --}}
        <div class="mobile-card-list">
            @foreach($exams as $exam)
                <div class="mobile-card">
                    <div class="mobile-card-head">
                        <div class="flex flex-wrap gap-1.5">
                            <span class="badge badge-type">{{ $exam->exam_type ?? 'N/A' }}</span>
                            @if($exam->difficulty_level)
                                <span class="badge badge-{{ strtolower($exam->difficulty_level) }}">{{ $exam->difficulty_level }}</span>
                            @endif
                        </div>
                        <span class="attempts-badge">{{ $exam->results_count ?? 0 }}</span>
                    </div>

                    <p class="text-sm font-semibold text-white leading-tight">{{ $exam->title }}</p>

                    <div class="flex flex-wrap gap-2 text-xs text-slate-400 mt-1.5">
                        @if($exam->subject && $exam->subject !== 'All Subjects')
                            <span>📚 {{ $exam->subject }}</span>
                        @elseif($exam->subject === 'All Subjects')
                            <span>📚 All Subjects</span>
                        @endif
                        @if($exam->topic)
                            <span>→ {{ $exam->topic }}</span>
                        @endif
                    </div>

                    <div class="mobile-card-meta">
                        @if($exam->test_type)
                            <span class="text-xs text-slate-400">{{ ucwords(str_replace('_', ' ', $exam->test_type)) }}</span>
                        @endif
                    </div>

                    <div class="mt-3">
                        <a href="{{ route('admin.results.show', ['exam' => $exam->id]) }}" class="btn-view w-full justify-center">
                            View Students
                            <svg viewBox="0 0 24 24" fill="none" class="w-3.5 h-3.5">
                                <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </a>
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <div class="results-table-wrapper">
            <div class="empty-state">
                <p class="empty-icon">📭</p>
                <p class="empty-title">No completed exams yet</p>
                <p class="empty-sub">
                    @if($search || $selectedExamType)
                        Try adjusting your filters or search query
                    @else
                        Exams with at least one attempt will appear here
                    @endif
                </p>
            </div>
        </div>
    @endif

</div>
@endsection