@extends('layouts.admin')

@section('content')
<style>
    .manage-exams-page { position: relative; }

    /* ================= HEADER ================= */
    .manage-exams-header {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 1.75rem;
        background: linear-gradient(135deg, rgba(10, 16, 30, 0.78), rgba(15, 23, 42, 0.58)),
                    linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.04));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
                    0 28px 70px rgba(2, 6, 23, 0.42);
        backdrop-filter: blur(12px) saturate(125%);
        -webkit-backdrop-filter: blur(12px) saturate(125%);
    }

    .manage-exams-header::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 34%);
        pointer-events: none;
    }

    .manage-exams-header::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.16) 40%, transparent 58%);
        transform: translateX(-120%);
        animation: manageExamsHeroSweep 8s ease-in-out infinite;
        pointer-events: none;
    }

    @keyframes manageExamsHeroSweep {
        0%, 100% { transform: translateX(-120%); }
        50% { transform: translateX(120%); }
    }

    /* ================= TABLE WRAPPER ================= */
    .exams-table-wrapper {
        position: relative;
        overflow: hidden;
        border-radius: 1.5rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        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.1),
                    0 20px 50px rgba(2, 6, 23, 0.35);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .exams-table {
        width: 100%;
        border-collapse: collapse;
    }

    .exams-table thead {
        background: rgba(2, 6, 23, 0.5);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .exams-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;
    }

    .exams-table tbody tr {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        transition: background 0.2s ease;
    }

    .exams-table tbody tr:last-child { border-bottom: none; }

    .exams-table tbody tr:hover {
        background: rgba(34, 211, 238, 0.04);
    }

    .exams-table tbody td {
        padding: 1rem;
        vertical-align: middle;
        color: #e2e8f0;
        font-size: 0.85rem;
    }

    /* Exam title cell */
    .exam-title-cell {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        min-width: 260px;
    }

    .exam-title-text {
        font-size: 0.88rem;
        font-weight: 600;
        color: white;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        max-width: 320px;
    }

    .exam-title-meta {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
        font-size: 0.72rem;
        color: #94a3b8;
    }

    /* Badges */
    .badge {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.2rem 0.6rem;
        border-radius: 9999px;
        font-size: 0.6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        white-space: nowrap;
    }

    .badge-published { background: rgba(34, 197, 94, 0.15); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.3); }
    .badge-draft { background: rgba(234, 179, 8, 0.15); color: #fde047; border: 1px solid rgba(234, 179, 8, 0.3); }
    .badge-free { background: rgba(168, 85, 247, 0.15); color: #d8b4fe; border: 1px solid rgba(168, 85, 247, 0.3); }
    .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); }

    /* Meta pills in table cells */
    .meta-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.3rem 0.65rem;
        border-radius: 0.6rem;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 0.72rem;
        color: #cbd5e1;
        white-space: nowrap;
    }

    /* ================= ACTION BUTTONS ================= */
    .row-actions {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        justify-content: flex-end;
    }

    .row-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        padding: 0.4rem 0.7rem;
        border-radius: 0.55rem;
        font-size: 0.7rem;
        font-weight: 600;
        text-decoration: none;
        border: 1px solid transparent;
        transition: all 0.2s ease;
        cursor: pointer;
        white-space: nowrap;
    }

    .row-btn-publish {
        background: rgba(34, 197, 94, 0.15);
        border-color: rgba(34, 197, 94, 0.35);
        color: #86efac;
    }
    .row-btn-publish:hover { background: rgba(34, 197, 94, 0.28); border-color: rgba(34, 197, 94, 0.55); }

    .row-btn-unpublish {
        background: rgba(234, 179, 8, 0.15);
        border-color: rgba(234, 179, 8, 0.35);
        color: #fde047;
    }
    .row-btn-unpublish:hover { background: rgba(234, 179, 8, 0.28); border-color: rgba(234, 179, 8, 0.55); }

    .row-btn-edit {
        background: rgba(56, 189, 248, 0.13);
        border-color: rgba(56, 189, 248, 0.35);
        color: #7dd3fc;
    }
    .row-btn-edit:hover { background: rgba(56, 189, 248, 0.25); border-color: rgba(56, 189, 248, 0.55); }

    .row-btn-view {
        background: rgba(148, 163, 184, 0.13);
        border-color: rgba(148, 163, 184, 0.3);
        color: #cbd5e1;
    }
    .row-btn-view:hover { background: rgba(148, 163, 184, 0.25); border-color: rgba(148, 163, 184, 0.5); }

    /* ================= EMPTY STATE ================= */
    .empty-state {
        padding: 3rem 1.5rem;
        text-align: center;
        border-radius: 1.5rem;
        border: 1px dashed rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.02);
    }

    /* ================= MOBILE CARDS ================= */
    .exam-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;
    }

    .exam-mobile-card:last-child { margin-bottom: 0; }

    .exam-mobile-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.5rem;
        margin-bottom: 0.6rem;
    }

    .exam-mobile-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .exam-mobile-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .exam-mobile-actions .row-btn { width: 100%; justify-content: center; }
    .exam-mobile-actions form { width: 100%; }
    .exam-mobile-actions form .row-btn { width: 100%; }

    /* ================= RESPONSIVE ================= */
    @media (max-width: 900px) {
        .exams-table-wrapper { display: none; }
        .exam-mobile-list { display: block; }
    }

    @media (min-width: 901px) {
        .exam-mobile-list { display: none; }
    }
</style>

<div class="manage-exams-page space-y-6">

    {{-- ============ HEADER ============ --}}
    <div class="manage-exams-header p-6">
        <div class="flex justify-between items-center gap-4 flex-wrap">
            <div>
                <p class="text-xs font-semibold uppercase tracking-[0.26em] text-amber-200">Manage Exams</p>
                <h1 class="mt-2 text-2xl font-bold text-white">All Tests</h1>
                <p class="mt-2 text-sm text-slate-300">View, edit and publish all exams across every exam type.</p>
            </div>
            <a href="{{ route('admin.exams.create') }}" class="admin-action-btn bg-sky-600 text-white">
                + Create Exam
            </a>
        </div>
    </div>

    {{-- ============ SUCCESS MESSAGE ============ --}}
    @if(session('success'))
        <div class="rounded-2xl border border-emerald-400/30 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-100 flex items-center gap-2">
            <svg viewBox="0 0 24 24" fill="none" class="w-5 h-5 text-emerald-300"><path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/></svg>
            {{ session('success') }}
        </div>
    @endif

    {{-- ============ RECENT EXAMS ============ --}}
    <section>
        <div class="flex items-center justify-between mb-4">
            <div>
                <h2 class="text-lg font-bold text-white">📋 Recent Tests</h2>
                <p class="text-xs text-slate-400">Latest tests created across all exam types</p>
            </div>
            @if($recentExams->count() > 0)
                <span class="text-xs font-semibold text-slate-400">{{ $recentExams->count() }} {{ Str::plural('test', $recentExams->count()) }}</span>
            @endif
        </div>

        @if($recentExams->count() > 0)

            {{-- ============ DESKTOP TABLE ============ --}}
            <div class="exams-table-wrapper">
                <table class="exams-table">
                    <thead>
                        <tr>
                            <th>Test</th>
                            <th>Type</th>
                            <th>Details</th>
                            <th>Status</th>
                            <th style="text-align: right;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($recentExams as $exam)
                            <tr>
                                {{-- Test Info --}}
                                <td>
                                    <div class="exam-title-cell">
                                        <p class="exam-title-text">{{ $exam->title }}</p>
                                        <div class="exam-title-meta">
                                            @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
                                            <span>📅 {{ $exam->created_at->format('d M Y') }}</span>
                                        </div>
                                    </div>
                                </td>

                                {{-- Type Badges --}}
                                <td>
                                    <div class="flex items-center gap-1.5 flex-wrap">
                                        <span class="badge badge-type">{{ $exam->exam_type }}</span>
                                        @if($exam->difficulty_level)
                                            <span class="badge badge-{{ strtolower($exam->difficulty_level) }}">{{ $exam->difficulty_level }}</span>
                                        @endif
                                        @if($exam->is_free_test)
                                            <span class="badge badge-free">🎁 Free</span>
                                        @endif
                                    </div>
                                </td>

                                {{-- Details --}}
                                <td>
                                    <div class="flex items-center gap-1.5 flex-wrap">
                                        <span class="meta-pill">⏱️ {{ $exam->duration_minutes }}m</span>
                                        @if($exam->total_questions > 0)
                                            <span class="meta-pill">❓ {{ $exam->total_questions }}Q</span>
                                        @endif
                                        @if($exam->total_marks > 0)
                                            <span class="meta-pill">🎯 {{ $exam->total_marks }}M</span>
                                        @endif
                                    </div>
                                </td>

                                {{-- Status --}}
                                <td>
                                    @if($exam->status === 'published')
                                        <span class="badge badge-published">● Published</span>
                                    @else
                                        <span class="badge badge-draft">● Draft</span>
                                    @endif
                                </td>

                                {{-- Actions --}}
                                <td>
                                    <div class="row-actions">
                                        @if($exam->status === 'published')
                                            <form method="POST" action="{{ route('admin.exams.toggle_publish', $exam) }}">
                                                @csrf
                                                <button class="row-btn row-btn-unpublish" title="Unpublish">
                                                    ⏸
                                                </button>
                                            </form>
                                        @else
                                            <form method="POST" action="{{ route('admin.exams.toggle_publish', $exam) }}">
                                                @csrf
                                                <button class="row-btn row-btn-publish" title="Publish">
                                                    ✓
                                                </button>
                                            </form>
                                        @endif

                                        <a href="{{ route('admin.exams.edit', $exam) }}" class="row-btn row-btn-edit" title="Edit">
                                            ✎
                                        </a>

                                        <a href="{{ route('admin.exams.show', $exam) }}" class="row-btn row-btn-view" title="View">
                                            👁
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            {{-- ============ MOBILE CARDS ============ --}}
            <div class="exam-mobile-list">
                @foreach($recentExams as $exam)
                    <div class="exam-mobile-card">
                        <div class="exam-mobile-head">
                            <div class="flex items-center gap-1.5 flex-wrap">
                                <span class="badge badge-type">{{ $exam->exam_type }}</span>
                                @if($exam->difficulty_level)
                                    <span class="badge badge-{{ strtolower($exam->difficulty_level) }}">{{ $exam->difficulty_level }}</span>
                                @endif
                                @if($exam->is_free_test)
                                    <span class="badge badge-free">🎁 Free</span>
                                @endif
                            </div>
                            @if($exam->status === 'published')
                                <span class="badge badge-published">● Published</span>
                            @else
                                <span class="badge badge-draft">● Draft</span>
                            @endif
                        </div>

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

                        <div class="flex items-center gap-2 flex-wrap text-xs text-slate-400">
                            @if($exam->subject && $exam->subject !== 'All Subjects')
                                <span>📚 {{ $exam->subject }}</span>
                            @endif
                            @if($exam->topic)
                                <span>→ {{ $exam->topic }}</span>
                            @endif
                            <span>📅 {{ $exam->created_at->format('d M Y') }}</span>
                        </div>

                        <div class="exam-mobile-meta">
                            <span class="meta-pill">⏱️ {{ $exam->duration_minutes }}m</span>
                            @if($exam->total_questions > 0)
                                <span class="meta-pill">❓ {{ $exam->total_questions }}Q</span>
                            @endif
                            @if($exam->total_marks > 0)
                                <span class="meta-pill">🎯 {{ $exam->total_marks }}M</span>
                            @endif
                        </div>

                        <div class="exam-mobile-actions">
                            @if($exam->status === 'published')
                                <form method="POST" action="{{ route('admin.exams.toggle_publish', $exam) }}">
                                    @csrf
                                    <button class="row-btn row-btn-unpublish">⏸ Unpublish</button>
                                </form>
                            @else
                                <form method="POST" action="{{ route('admin.exams.toggle_publish', $exam) }}">
                                    @csrf
                                    <button class="row-btn row-btn-publish">✓ Publish</button>
                                </form>
                            @endif

                            <a href="{{ route('admin.exams.edit', $exam) }}" class="row-btn row-btn-edit">✎ Edit</a>

                            <a href="{{ route('admin.exams.show', $exam) }}" class="row-btn row-btn-view">👁 View</a>
                        </div>
                    </div>
                @endforeach
            </div>

        @else
            <div class="empty-state">
                <p class="text-3xl mb-2">📭</p>
                <p class="text-slate-300 font-semibold">No tests created yet</p>
                <p class="text-slate-400 text-sm mt-1">Click "Create Exam" to add your first test</p>
                <a href="{{ route('admin.exams.create') }}" class="admin-action-btn bg-sky-600 text-white mt-4 inline-block">
                    + Create First Test
                </a>
            </div>
        @endif
    </section>

</div>
@endsection