@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>
    .q-card {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 1.5rem;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)), rgba(7, 12, 28, 0.48);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 24px 50px rgba(2, 6, 23, 0.26);
        backdrop-filter: blur(12px);
    }

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

    .q-field,
    .q-textarea {
        width: 100%;
        border-radius: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(2, 6, 23, 0.45);
        color: white;
        padding: 0.8rem 1rem;
        outline: none;
    }

    .q-field:focus,
    .q-textarea:focus {
        border-color: rgba(34, 211, 238, 0.6);
        box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1);
    }

    .q-field::placeholder,
    .q-textarea::placeholder {
        color: rgb(148 163 184);
    }

    .section-header {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding-bottom: 0.75rem;
        margin-bottom: 1.25rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .section-header-icon {
        width: 2.5rem;
        height: 2.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.75rem;
        background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(59, 130, 246, 0.2));
        border: 1px solid rgba(34, 211, 238, 0.3);
        color: #67e8f9;
    }

    .option-item {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 0.75rem;
        align-items: center;
        padding: 1rem;
        border-radius: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(10, 16, 34, 0.4);
    }

    .option-item.bilingual {
        grid-template-columns: auto 1fr 1fr auto;
    }

    .option-item.is-correct {
        border-color: rgba(34, 197, 94, 0.5);
        background: rgba(34, 197, 94, 0.08);
    }

    .option-marker {
        width: 2.25rem;
        height: 2.25rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.65rem;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: white;
        font-weight: 700;
        font-size: 0.9rem;
        cursor: pointer;
    }

    .option-item.is-correct .option-marker {
        background: rgba(34, 197, 94, 0.25);
        border-color: rgba(34, 197, 94, 0.5);
        color: #86efac;
    }

    .preview-card {
        position: sticky;
        top: 1.5rem;
        border: 1px solid rgba(34, 211, 238, 0.3);
        border-radius: 1.5rem;
        background: linear-gradient(180deg, rgba(8, 47, 73, 0.9), rgba(7, 12, 28, 0.95));
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
        padding: 1.5rem;
    }

    .preview-option {
        padding: 0.75rem 1rem;
        border-radius: 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.03);
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

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

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

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

    .lang-tag {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        padding: 0.2rem 0.5rem;
        border-radius: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .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);
    }
</style>

<div class="space-y-6">
    {{-- Header --}}
    <div class="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">Add Question</p>
            <h1 class="mt-2 text-2xl font-bold text-white">{{ $exam->title }}</h1>
            <div class="flex items-center gap-3 mt-2 flex-wrap">
                <span class="chip chip-easy">{{ $exam->exam_type }}</span>
                @if($exam->subject && $exam->subject !== 'All Subjects')
                <span class="text-sm text-slate-300">📚 {{ $exam->subject }}</span>
                @endif
                @if($exam->difficulty_level)
                <span class="chip chip-{{ strtolower($exam->difficulty_level) }}">{{ $exam->difficulty_level }}</span>
                @endif
                <span class="chip chip-info">
                    🌐 {{ ucfirst($language) === 'Both' ? 'हिन्दी + English' : ucfirst($language) }}
                </span>
            </div>
        </div>
        <div class="flex flex-wrap gap-2">
            <a href="{{ route('admin.questions.index', $exam) }}" class="admin-action-btn bg-indigo-600 text-white">All Questions</a>
            <a href="{{ route('admin.exams.edit', $exam) }}" class="admin-action-btn bg-yellow-600 text-white">← Exam Settings</a>
        </div>
    </div>

{{-- AI Generate Button + Modal --}}
<div class="mb-4">
    @include('admin.questions.partials.ai-modal')
</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

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2">
            <form method="POST" action="{{ route('admin.questions.store', $exam) }}" id="questionForm" class="space-y-6">
                @csrf

                {{-- Question Text --}}
                <section class="q-card p-6">
                    <div class="section-header">
                        <span class="section-header-icon">
                            <svg viewBox="0 0 20 20" fill="none" class="w-5 h-5">
                                <circle cx="10" cy="10" r="7" stroke="currentColor" stroke-width="1.5" />
                                <path d="M7.5 8a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .8-1 1.4v.3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                                <circle cx="10" cy="14" r="0.8" fill="currentColor" />
                            </svg>
                        </span>
                        <div>
                            <h2 class="text-lg font-semibold text-white">Question</h2>
                            <p class="text-xs text-slate-400">
                                @if($isBilingual) Write in both Hindi & English
                                @elseif($showHindi) Write in Hindi
                                @else Write in English @endif
                            </p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 {{ $isBilingual ? 'md:grid-cols-2' : '' }} gap-4">
                        @if($showHindi)
                        <div>
                            @if($isBilingual)
                            <span class="lang-tag lang-hi">🇮🇳 हिन्दी</span>
                            @endif
                            <textarea name="question_text" id="question_text" rows="4" class="q-textarea" placeholder="यहाँ प्रश्न लिखें..." required>{{ old('question_text') }}</textarea>
                        </div>
                        @endif

                        @if($showEnglish)
                        <div>
                            @if($isBilingual)
                            <span class="lang-tag lang-en">🇬🇧 English</span>
                            <textarea name="question_text_en" id="question_text_en" rows="4" class="q-textarea" placeholder="Type question here...">{{ old('question_text_en') }}</textarea>
                            @else
                            <textarea name="question_text" id="question_text" rows="4" class="q-textarea" placeholder="Type question here..." required>{{ old('question_text') }}</textarea>
                            @endif
                        </div>
                        @endif
                    </div>
                </section>

                {{-- Options --}}
                <section class="q-card p-6">
                    <div class="section-header">
                        <span class="section-header-icon">
                            <svg viewBox="0 0 20 20" fill="none" class="w-5 h-5">
                                <path d="M4 6h12M4 10h12M4 14h12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                                <circle cx="4" cy="6" r="1" fill="currentColor" />
                                <circle cx="4" cy="10" r="1" fill="currentColor" />
                                <circle cx="4" cy="14" r="1" fill="currentColor" />
                            </svg>
                        </span>
                        <div>
                            <h2 class="text-lg font-semibold text-white">Answer Options</h2>
                            <p class="text-xs text-slate-400">Click letter (A/B/C/D) to mark the correct answer</p>
                        </div>
                    </div>

                    <div id="options-container" class="space-y-3">
                        @for($i = 0; $i < 4; $i++)
                            <div class="option-item {{ $isBilingual ? 'bilingual' : '' }}" data-index="{{ $i }}">
                            <div class="option-marker" onclick="selectCorrect({{ $i }})">{{ chr(65 + $i) }}</div>

                            @if($showHindi)
                            <input type="text" name="options[]" class="q-field" placeholder="{{ $isBilingual ? 'हिन्दी में विकल्प' : 'Option '.chr(65+$i) }}" required>
                            @endif

                            @if($isBilingual)
                            <input type="text" name="options_en[]" class="q-field" placeholder="English option">
                            @endif

                            @if($language === 'english')
                            <input type="text" name="options[]" class="q-field" placeholder="Option {{ chr(65 + $i) }}" required>
                            @endif

                            <button type="button" onclick="removeOption(this)" class="px-3 py-2 rounded-lg bg-red-500/20 text-red-300 hover:bg-red-500/30 transition">✕</button>
                            <input type="radio" name="correct_option" value="{{ $i }}" class="hidden" {{ $i === 0 ? 'checked' : '' }}>
                    </div>
                    @endfor
        </div>

        <button type="button" onclick="addOption()" class="mt-4 inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-green-500/20 text-green-300 border border-green-500/40 hover:bg-green-500/30 transition">
            + Add Option
        </button>
        </section>

        {{-- Explanation --}}
        <section class="q-card p-6">
            <div class="section-header">
                <span class="section-header-icon">
                    <svg viewBox="0 0 20 20" fill="none" class="w-5 h-5">
                        <path d="M4 4h12v12H4z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
                        <path d="M7 9h6M7 12h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                    </svg>
                </span>
                <div>
                    <h2 class="text-lg font-semibold text-white">Explanation <span class="text-xs text-slate-400">(optional)</span></h2>
                </div>
            </div>

            <div class="grid grid-cols-1 {{ $isBilingual ? 'md:grid-cols-2' : '' }} gap-4">
                @if($showHindi)
                <div>
                    @if($isBilingual)
                    <span class="lang-tag lang-hi">🇮🇳 हिन्दी</span>
                    @endif
                    <textarea name="explanation" rows="3" class="q-textarea" placeholder="व्याख्या (optional)">{{ old('explanation') }}</textarea>
                </div>
                @endif

                @if($showEnglish)
                <div>
                    @if($isBilingual)
                    <span class="lang-tag lang-en">🇬🇧 English</span>
                    <textarea name="explanation_en" rows="3" class="q-textarea" placeholder="Explanation (optional)">{{ old('explanation_en') }}</textarea>
                    @else
                    <textarea name="explanation" rows="3" class="q-textarea" placeholder="Explanation (optional)">{{ old('explanation') }}</textarea>
                    @endif
                </div>
                @endif
            </div>
        </section>

        {{-- Actions --}}
        <div class="flex flex-wrap gap-3">
            <button type="submit" name="action" value="save_next" class="admin-action-btn bg-gradient-to-r from-blue-500 to-cyan-600 text-white font-bold px-6 py-3">
                💾 Save & Add Next
            </button>
            <button type="submit" name="action" value="save_exit" class="admin-action-btn bg-gradient-to-r from-green-500 to-emerald-600 text-white font-bold px-6 py-3">
                ✅ Save & View All
            </button>
            <a href="{{ route('admin.questions.index', $exam) }}" class="admin-action-btn bg-slate-700 text-white">Cancel</a>
        </div>
        </form>
    </div>

    {{-- RIGHT: Live Preview --}}
    <div class="lg:col-span-1">
        <div class="preview-card">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-sm font-bold text-cyan-300 uppercase tracking-wider">Student Preview</h3>
                <span class="chip chip-easy">Live</span>
            </div>

            <div class="flex flex-wrap gap-2 mb-4">
                <span class="chip chip-{{ strtolower($exam->difficulty_level ?? 'medium') }}">{{ $exam->difficulty_level ?? 'Medium' }}</span>
            </div>

            <div class="pb-4 border-b border-white/10 mb-4">
                <p id="previewQuestion" class="text-white leading-relaxed">Your question will appear here...</p>
                @if($isBilingual)
                <p id="previewQuestionEn" class="text-cyan-200 leading-relaxed mt-2 italic text-sm"></p>
                @endif
            </div>

            <div id="previewOptions" class="space-y-2"></div>

            <div class="mt-4 pt-4 border-t border-white/10 space-y-2 text-xs">
                <div class="flex justify-between">
                    <span class="text-slate-400">Marks</span>
                    <span class="text-cyan-300 font-semibold">{{ $exam->marks_per_question ?? 1 }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-400">Negative</span>
                    <span class="text-red-300 font-semibold">{{ $exam->negative_enabled ? '-' . $exam->negative_marking : 'None' }}</span>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<script>

const isBilingual = {{ $isBilingual ? 'true' : 'false' }};
const showHindi = {{ $showHindi ? 'true' : 'false' }};
const showEnglish = {{ $showEnglish ? 'true' : 'false' }};

    let optionIndex = 4;

    function updatePreview() {
        const qText = document.getElementById('question_text')?.value || 'Your question will appear here...';
        document.getElementById('previewQuestion').textContent = qText;

        if (isBilingual) {
            const qTextEn = document.getElementById('question_text_en')?.value || '';
            document.getElementById('previewQuestionEn').textContent = qTextEn;
        }

        const options = Array.from(document.querySelectorAll('#options-container input[name="options[]"]')).map(i => i.value);
        const optionsEn = isBilingual ? Array.from(document.querySelectorAll('#options-container input[name="options_en[]"]')).map(i => i.value) : [];
        const correctRadio = document.querySelector('input[name="correct_option"]:checked');
        const correctIndex = correctRadio ? Number(correctRadio.value) : -1;

        document.getElementById('previewOptions').innerHTML = options.map((opt, i) => `
            <div class="preview-option ${i === correctIndex ? 'correct' : ''}">
                <span class="font-bold">${String.fromCharCode(65 + i)})</span>
                <div>
                    <div>${opt || 'Option ' + String.fromCharCode(65 + i)}</div>
                    ${isBilingual && optionsEn[i] ? `<div class="text-cyan-200 text-xs italic">${optionsEn[i]}</div>` : ''}
                </div>
                ${i === correctIndex ? '<span class="ml-auto">✅</span>' : ''}
            </div>
        `).join('');
    }

    function buildOptionHtml(idx) {
        let html = `<div class="option-marker" onclick="selectCorrect(${idx})">${String.fromCharCode(65 + idx)}</div>`;

        if (showHindi) {
            html += `<input type="text" name="options[]" class="q-field" placeholder="${isBilingual ? 'हिन्दी में विकल्प' : 'Option ' + String.fromCharCode(65 + idx)}" required>`;
        }
        if (isBilingual) {
            html += `<input type="text" name="options_en[]" class="q-field" placeholder="English option">`;
        }
        if (showEnglish && !isBilingual) {
            html += `<input type="text" name="options[]" class="q-field" placeholder="Option ${String.fromCharCode(65 + idx)}" required>`;
        }

        html += `<button type="button" onclick="removeOption(this)" class="px-3 py-2 rounded-lg bg-red-500/20 text-red-300 hover:bg-red-500/30 transition">✕</button>`;
        html += `<input type="radio" name="correct_option" value="${idx}" class="hidden">`;
        return html;
    }

    function addOption() {
        const container = document.getElementById('options-container');
        const div = document.createElement('div');
        div.className = 'option-item' + (isBilingual ? ' bilingual' : '');
        div.dataset.index = optionIndex;
        div.innerHTML = buildOptionHtml(optionIndex);
        container.appendChild(div);
        optionIndex++;
        updatePreview();
    }

    function removeOption(btn) {
        const container = document.getElementById('options-container');
        if (container.children.length <= 2) {
            alert('Minimum 2 options required!');
            return;
        }
        btn.closest('.option-item').remove();
        reindexOptions();
        updatePreview();
    }

    function reindexOptions() {
        const items = document.querySelectorAll('#options-container .option-item');
        items.forEach((item, i) => {
            item.dataset.index = i;
            item.querySelector('.option-marker').textContent = String.fromCharCode(65 + i);
            item.querySelector('.option-marker').setAttribute('onclick', `selectCorrect(${i})`);
            item.querySelector('input[type="radio"]').value = i;
            const textInputs = item.querySelectorAll('input[type="text"]');
            if (textInputs[0]) textInputs[0].placeholder = isBilingual ? 'हिन्दी में विकल्प' : 'Option ' + String.fromCharCode(65 + i);
        });
        optionIndex = items.length;
    }

    function selectCorrect(index) {
        document.querySelectorAll('#options-container .option-item').forEach(item => item.classList.remove('is-correct'));
        const target = document.querySelector(`#options-container .option-item[data-index="${index}"]`);
        if (target) target.classList.add('is-correct');

        document.querySelectorAll('input[name="correct_option"]').forEach(r => {
            r.checked = Number(r.value) === index;
        });
        updatePreview();
    }

    document.addEventListener('DOMContentLoaded', function() {
        selectCorrect(0);
        document.getElementById('question_text')?.addEventListener('input', updatePreview);
        document.getElementById('question_text_en')?.addEventListener('input', updatePreview);
        document.querySelectorAll('#options-container input[name="options[]"], #options-container input[name="options_en[]"]').forEach(i => {
            i.addEventListener('input', updatePreview);
        });
        updatePreview();
    });
</script>
@endsection