@extends('layouts.admin')

@section('content')
<style>
    .detail-card {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.14);
        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%);
    }

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

    .stat-pill {
        position: relative;
        border-radius: 1.15rem;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05)),
                    rgba(15, 23, 42, 0.4);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
        padding: 1rem 1.15rem;
    }

    .info-row {
        display: flex;
        justify-content: space-between;
        align-items: start;
        gap: 1rem;
        padding: 0.75rem 0;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
    }

    .info-row:last-child { border-bottom: none; }

    .info-label {
        color: #94a3b8;
        font-size: 0.875rem;
        font-weight: 500;
        flex-shrink: 0;
    }

    .info-value {
        color: white;
        font-weight: 600;
        text-align: right;
        font-size: 0.9rem;
        word-break: break-word;
    }

    .info-value.success { color: #86efac; }
    .info-value.danger { color: #fca5a5; }
    .info-value.warning { color: #fde047; }
    .info-value.info { color: #93c5fd; }

    .chip {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.3rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .chip-published { background: rgba(34, 197, 94, 0.15); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.3); }
    .chip-draft { background: rgba(234, 179, 8, 0.15); color: #fde047; border: 1px solid rgba(234, 179, 8, 0.3); }
    .chip-easy { background: rgba(34, 197, 94, 0.15); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.3); }
    .chip-medium { background: rgba(234, 179, 8, 0.15); color: #fde047; border: 1px solid rgba(234, 179, 8, 0.3); }
    .chip-hard { background: rgba(239, 68, 68, 0.15); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.3); }
    .chip-info { background: rgba(59, 130, 246, 0.15); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.3); }
    .chip-free { background: rgba(168, 85, 247, 0.15); color: #d8b4fe; border: 1px solid rgba(168, 85, 247, 0.3); }
    .chip-type { background: rgba(34, 211, 238, 0.15); color: #67e8f9; border: 1px solid rgba(34, 211, 238, 0.3); }

    .section-title {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        color: #67e8f9;
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .section-title::after {
        content: "";
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, rgba(103, 232, 249, 0.3), transparent);
    }
</style>

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

    {{-- HEADER --}}
    <div class="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
        <div class="flex-1">
            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-cyan-200">Exam Details</p>
            <h1 class="mt-2 text-3xl font-bold text-white">{{ $exam->title }}</h1>

            <div class="flex items-center gap-2 mt-3 flex-wrap">
                <span class="chip chip-type">{{ $exam->exam_type }}</span>

                @if($exam->subject && $exam->subject !== 'All Subjects')
                    <span class="chip chip-info">📚 {{ $exam->subject }}</span>
                @elseif($exam->subject === 'All Subjects')
                    <span class="chip chip-info">📚 All Subjects</span>
                @endif

                @if($exam->topic)
                    <span class="chip chip-medium">{{ $exam->topic }}</span>
                @endif

                @if($exam->difficulty_level)
                    <span class="chip chip-{{ strtolower($exam->difficulty_level) }}">{{ $exam->difficulty_level }}</span>
                @endif

                @if($exam->test_type)
                    <span class="chip chip-easy">{{ config('academix.test_types.' . $exam->test_type, $exam->test_type) }}</span>
                @endif

                @if($exam->is_free_test)
                    <span class="chip chip-free">🎁 Free Test</span>
                @endif

                @if($exam->status === 'published')
                    <span class="chip chip-published">● Published</span>
                @else
                    <span class="chip chip-draft">● Draft</span>
                @endif
            </div>
        </div>

        <div class="flex flex-wrap gap-2">
            <a href="{{ route('admin.exams.index') }}" class="admin-action-btn bg-slate-700 text-white">← Back</a>
            <a href="{{ route('admin.exams.edit', $exam) }}" class="admin-action-btn bg-blue-600 text-white">✎ Edit Exam</a>
        </div>
    </div>

    @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">
            ✅ {{ session('success') }}
        </div>
    @endif

    {{-- QUICK STATS --}}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="stat-pill">
            <p class="text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-slate-400">Duration</p>
            <p class="mt-1 text-2xl font-bold text-white">{{ $exam->duration_minutes }} <span class="text-sm text-slate-400">min</span></p>
        </div>
        <div class="stat-pill">
            <p class="text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-slate-400">Questions</p>
            <p class="mt-1 text-2xl font-bold text-cyan-300">{{ $exam->questions_count ?? $exam->questions->count() }}</p>
        </div>
        <div class="stat-pill">
            <p class="text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-slate-400">Total Marks</p>
            <p class="mt-1 text-2xl font-bold text-emerald-300">{{ $exam->total_marks ?? 0 }}</p>
        </div>
        <div class="stat-pill">
            <p class="text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-slate-400">Pass %</p>
            <p class="mt-1 text-2xl font-bold text-amber-300">{{ $exam->pass_percentage ?? 40 }}<span class="text-sm">%</span></p>
        </div>
    </div>

    {{-- DETAIL GRID --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

        {{-- Test Structure --}}
        <div class="detail-card p-6">
            <h2 class="section-title">Test Structure</h2>

            <div class="space-y-0">
                <div class="info-row">
                    <span class="info-label">Exam Type</span>
                    <span class="info-value info">{{ $exam->exam_type }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Test Type</span>
                    <span class="info-value">{{ config('academix.test_types.' . $exam->test_type, $exam->test_type) }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Subject</span>
                    <span class="info-value">{{ $exam->subject ?: '—' }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Topic</span>
                    <span class="info-value">{{ $exam->topic ?: '—' }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Difficulty</span>
                    <span class="info-value">{{ $exam->difficulty_level ?: '—' }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Language</span>
                    <span class="info-value">{{ config('academix.languages.' . $exam->language, $exam->language ?? 'both') }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Question Source</span>
                    <span class="info-value">{{ config('academix.question_sources.' . $exam->question_source, $exam->question_source ?? 'Manual') }}</span>
                </div>
            </div>
        </div>

        {{-- Marking & Timing --}}
        <div class="detail-card p-6">
            <h2 class="section-title">Marking & Timing</h2>

            <div class="space-y-0">
                <div class="info-row">
                    <span class="info-label">Total Questions</span>
                    <span class="info-value info">{{ $exam->questions_count ?? $exam->questions->count() }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Marks per Question</span>
                    <span class="info-value">{{ $exam->marks_per_question ?? 1 }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Total Marks</span>
                    <span class="info-value success">{{ $exam->total_marks ?? 0 }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Duration</span>
                    <span class="info-value">{{ $exam->duration_minutes }} minutes</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Pass Percentage</span>
                    <span class="info-value warning">{{ $exam->pass_percentage ?? 40 }}%</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Negative Marking</span>
                    @if($exam->negative_enabled)
                        <span class="info-value danger">−{{ $exam->negative_marking }} per wrong answer</span>
                    @else
                        <span class="info-value">Not enabled</span>
                    @endif
                </div>
            </div>
        </div>

        {{-- Schedule --}}
        <div class="detail-card p-6">
            <h2 class="section-title">Schedule</h2>

            <div class="space-y-0">
                <div class="info-row">
                    <span class="info-label">Start Time</span>
                    <span class="info-value info">
                        @if($exam->start_time)
                            {{ \Carbon\Carbon::parse($exam->start_time)->format('d M Y • h:i A') }}
                        @else
                            —
                        @endif
                    </span>
                </div>
                <div class="info-row">
                    <span class="info-label">End Time</span>
                    <span class="info-value info">
                        @if($exam->end_time)
                            {{ \Carbon\Carbon::parse($exam->end_time)->format('d M Y • h:i A') }}
                        @else
                            —
                        @endif
                    </span>
                </div>
                <div class="info-row">
                    <span class="info-label">Free Test</span>
                    <span class="info-value {{ $exam->is_free_test ? 'success' : '' }}">
                        {{ $exam->is_free_test ? '🎁 Yes (For new students)' : 'No' }}
                    </span>
                </div>
                <div class="info-row">
                    <span class="info-label">Status</span>
                    <span class="info-value {{ $exam->status === 'published' ? 'success' : 'warning' }}">
                        {{ ucfirst($exam->status) }}
                    </span>
                </div>
            </div>
        </div>

        {{-- Security & Proctoring --}}
        <div class="detail-card p-6">
            <h2 class="section-title">Security & Proctoring</h2>

            <div class="space-y-0">
                <div class="info-row">
                    <span class="info-label">Anti-Cheat Level</span>
                    <span class="info-value {{ $exam->anti_cheat_level === 'strict' ? 'danger' : ($exam->anti_cheat_level === 'standard' ? 'info' : '') }}">
                        {{ ucfirst($exam->anti_cheat_level ?? 'Standard') }}
                    </span>
                </div>
                <div class="info-row">
                    <span class="info-label">Proctoring</span>
                    <span class="info-value {{ $exam->proctoring_enabled ? 'success' : '' }}">
                        {{ $exam->proctoring_enabled ? 'Enabled' : 'Disabled' }}
                    </span>
                </div>

                @if($exam->proctoring_enabled)
                    <div class="info-row">
                        <span class="info-label">Camera</span>
                        <span class="info-value {{ $exam->require_camera ? 'success' : '' }}">
                            {{ $exam->require_camera ? 'Required' : 'Not required' }}
                        </span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Microphone</span>
                        <span class="info-value {{ $exam->require_microphone ? 'success' : '' }}">
                            {{ $exam->require_microphone ? 'Required' : 'Not required' }}
                        </span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Max Warnings</span>
                        <span class="info-value warning">{{ $exam->max_warnings ?? 5 }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Pre-Exam Countdown</span>
                        <span class="info-value">{{ $exam->pre_exam_countdown_seconds ?? 10 }} sec</span>
                    </div>

                    <div class="pt-3 mt-3 border-t border-dashed border-white/10">
                        <p class="text-xs font-semibold text-slate-400 mb-2">Violation Checks:</p>
                        <div class="flex flex-wrap gap-2">
                            @if($exam->detect_no_face)
                                <span class="chip chip-easy">No Face</span>
                            @endif
                            @if($exam->detect_multiple_faces)
                                <span class="chip chip-easy">Multiple Faces</span>
                            @endif
                            @if($exam->detect_talking)
                                <span class="chip chip-easy">Talking</span>
                            @endif
                            @if(!$exam->detect_no_face && !$exam->detect_multiple_faces && !$exam->detect_talking)
                                <span class="text-xs text-slate-500">No violation rules enabled</span>
                            @endif
                        </div>
                    </div>
                @endif
            </div>
        </div>

        {{-- Description --}}
        @if($exam->description)
            <div class="detail-card p-6 lg:col-span-2">
                <h2 class="section-title">Description</h2>
                <div class="text-slate-300 leading-relaxed text-sm whitespace-pre-wrap">{{ $exam->description }}</div>
            </div>
        @endif

    </div>

    {{-- ACTION BUTTONS --}}
    <div class="detail-card p-6">
        <h2 class="section-title">Actions</h2>

        <div class="flex flex-wrap gap-3">
            <a href="{{ route('admin.exams.edit', $exam) }}"
               class="admin-action-btn bg-blue-600 text-white">
                ✎ Edit Exam
            </a>

            <a href="{{ route('admin.questions.index', $exam) }}"
               class="admin-action-btn bg-indigo-600 text-white">
                📝 Manage Questions ({{ $exam->questions_count ?? $exam->questions->count() }})
            </a>

            <a href="{{ route('admin.questions.create', $exam) }}"
               class="admin-action-btn bg-cyan-600 text-white">
                + Add Question
            </a>

            @if($exam->violations()->exists())
                <a href="{{ route('admin.violations.exam', $exam) }}"
                   class="admin-action-btn bg-rose-600 text-white">
                    ⚠ Review Violations
                </a>
            @endif

            <form method="POST" action="{{ route('admin.exams.toggle_publish', $exam) }}" class="inline">
                @csrf
                <button class="admin-action-btn {{ $exam->status === 'published' ? 'bg-yellow-600' : 'bg-green-600' }} text-white">
                    {{ $exam->status === 'published' ? '⏸ Unpublish' : '✓ Publish' }}
                </button>
            </form>
        </div>
    </div>

</div>
@endsection