@extends('layouts.admin')

@section('content')
@php
    $language = $exam->language ?? 'both';
    $showHindi = in_array($language, ['hindi', 'both']);
    $showEnglish = in_array($language, ['english', 'both']);
    $isBilingual = $language === 'both';
@endphp
<style>
    .question-order-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 999px;
        background: rgba(34, 211, 238, 0.14);
        border: 1px solid rgba(34, 211, 238, 0.24);
        color: rgb(207 250 254);
        font-weight: 700;
        font-size: 0.9rem;
    }

    .q-row {
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        transition: background 0.15s ease;
    }

    .q-row:hover {
        background: rgba(34, 211, 238, 0.03);
    }

    .lang-label {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        padding: 0.15rem 0.5rem;
        border-radius: 0.4rem;
        margin-bottom: 0.3rem;
    }

    .lang-hi {
        background: rgba(251, 146, 60, 0.15);
        color: #fdba74;
        border: 1px solid rgba(251, 146, 60, 0.3);
    }

    .lang-en {
        background: rgba(59, 130, 246, 0.15);
        color: #93c5fd;
        border: 1px solid rgba(59, 130, 246, 0.3);
    }

    .option-line {
        display: flex;
        align-items: start;
        gap: 0.5rem;
        padding: 0.3rem 0;
        font-size: 0.85rem;
    }

    .option-letter {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 0.4rem;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        font-weight: 700;
        font-size: 0.7rem;
        flex-shrink: 0;
    }

    .option-line.correct .option-letter {
        background: rgba(34, 197, 94, 0.2);
        border-color: rgba(34, 197, 94, 0.5);
        color: #86efac;
    }

    .option-line.correct {
        color: #86efac;
        font-weight: 600;
    }

    .bilingual-block {
        display: grid;
        gap: 0.5rem;
    }

    .table-shell {
        background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 1.5rem;
        overflow: hidden;
    }

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

    .table-shell thead {
        background: rgba(255, 255, 255, 0.04);
    }

    .table-shell thead th {
        padding: 1rem;
        text-align: left;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #94a3b8;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .table-shell tbody td {
        padding: 1rem;
        vertical-align: top;
        color: #e2e8f0;
    }
</style>

<div class="mb-6 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
    <div>
        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-cyan-200">Questions</p>
        <h1 class="mt-2 text-2xl font-bold text-white">{{ $exam->title }}</h1>
        <div class="flex flex-wrap gap-2 mt-2 items-center">
            <span class="text-xs font-semibold uppercase tracking-wider px-2 py-1 rounded-full bg-cyan-500/15 text-cyan-300 border border-cyan-500/30">{{ $exam->exam_type }}</span>
            @if($exam->subject && $exam->subject !== 'All Subjects')
                <span class="text-sm text-slate-300">📚 {{ $exam->subject }}</span>
            @endif
            @if($exam->topic)
                <span class="text-sm text-slate-400">→ {{ $exam->topic }}</span>
            @endif
            <span class="text-xs font-semibold px-2 py-1 rounded-full
                {{ $isBilingual ? 'bg-purple-500/15 text-purple-300 border border-purple-500/30' :
                   ($showHindi ? 'bg-orange-500/15 text-orange-300 border border-orange-500/30' :
                                 'bg-blue-500/15 text-blue-300 border border-blue-500/30') }}">
                🌐 {{ $isBilingual ? 'Bilingual' : ($showHindi ? 'Hindi' : 'English') }}
            </span>
            <span class="text-sm text-slate-400">📝 {{ $questions->count() }} questions</span>
        </div>
    </div>

    <div class="flex items-center gap-2 flex-wrap">
        <a href="{{ route('admin.exams.show', $exam) }}" class="admin-action-btn bg-yellow-600 text-white">← Back</a>
        <a href="{{ route('admin.questions.create', $exam) }}" class="admin-action-btn bg-blue-600 text-white">+ Add Question</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 mb-4">
        ✅ {{ session('success') }}
    </div>
@endif

<div class="table-shell">
    <table>
        <thead>
            <tr>
                <th style="width: 4rem;">#</th>
                <th>Question</th>
                <th style="width: 26%;">Options</th>
                <th style="width: 16%;">Correct</th>
                <th style="width: 12%;">Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse($questions as $q)
                @php
                    $correctOption = $q->options->firstWhere('is_correct', true);
                @endphp
                <tr class="q-row">
                    <td>
                        <span class="question-order-badge">{{ $loop->iteration }}</span>
                    </td>

                    {{-- QUESTION --}}
                    <td>
                        @if($isBilingual)
                            <div class="bilingual-block">
                                <div>
                                    <span class="lang-label lang-hi">🇮🇳 हिंदी</span>
                                    <div class="text-slate-100">{{ $q->question_text ?: '—' }}</div>
                                </div>
                                <div>
                                    <span class="lang-label lang-en">🇬🇧 English</span>
                                    <div class="text-slate-300 italic">{{ $q->question_text_en ?: '—' }}</div>
                                </div>
                            </div>
                        @elseif($showHindi)
                            <div class="text-slate-100">{{ $q->question_text ?: '—' }}</div>
                        @else
                            <div class="text-slate-100">{{ $q->question_text_en ?: $q->question_text ?: '—' }}</div>
                        @endif
                    </td>

                    {{-- OPTIONS --}}
                    <td>
                        <div class="space-y-1">
                            @foreach($q->options as $index => $op)
                                <div class="option-line {{ $op->is_correct ? 'correct' : '' }}">
                                    <span class="option-letter">{{ chr(65 + $index) }}</span>
                                    <div class="flex-1">
                                        @if($isBilingual)
                                            <div>{{ $op->option_text ?: '—' }}</div>
                                            <div class="text-xs italic text-slate-400">{{ $op->option_text_en ?: '—' }}</div>
                                        @elseif($showHindi)
                                            <div>{{ $op->option_text ?: '—' }}</div>
                                        @else
                                            <div>{{ $op->option_text_en ?: $op->option_text ?: '—' }}</div>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </td>

                    {{-- CORRECT ANSWER --}}
                    <td>
                        @if($correctOption)
                            <div class="flex items-start gap-2">
                                <span class="inline-flex items-center justify-center w-6 h-6 rounded-lg bg-green-500/20 text-green-300 border border-green-500/40 font-bold text-xs flex-shrink-0">
                                    {{ chr(65 + $q->options->search($correctOption)) }}
                                </span>
                                <div class="text-green-300 font-semibold text-sm">
                                    @if($isBilingual)
                                        <div>{{ $correctOption->option_text }}</div>
                                        <div class="text-xs italic opacity-80">{{ $correctOption->option_text_en }}</div>
                                    @elseif($showHindi)
                                        <div>{{ $correctOption->option_text }}</div>
                                    @else
                                        <div>{{ $correctOption->option_text_en ?: $correctOption->option_text }}</div>
                                    @endif
                                </div>
                            </div>
                        @else
                            <span class="text-slate-500 text-sm">—</span>
                        @endif
                    </td>

                    {{-- ACTIONS --}}
                    <td>
                        <div class="flex flex-col gap-2">
                            <a href="{{ route('admin.questions.edit', $q) }}"
                               class="admin-action-btn bg-blue-600 text-white text-center">
                                Edit
                            </a>

                            <form method="POST"
                                  action="{{ route('admin.questions.destroy', $q) }}"
                                  onsubmit="event.preventDefault(); appConfirm('Delete question?', { title: 'Delete Question', confirmText: 'Delete' }).then(confirmed => { if (confirmed) this.submit(); });"
                                  class="inline-block">
                                @csrf
                                @method('DELETE')
                                <button class="admin-action-btn bg-red-600 text-white w-full">
                                    Delete
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="5" class="text-center py-12 text-slate-400">
                        <p class="text-3xl mb-2">📭</p>
                        <p class="font-semibold">No questions added yet</p>
                        <p class="text-sm mt-1">Click "Add Question" to create the first one</p>
                        <a href="{{ route('admin.questions.create', $exam) }}" class="admin-action-btn bg-blue-600 text-white mt-4 inline-block">
                            + Add Question
                        </a>
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

@endsection