@extends('layouts.admin')

@section('content')
<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);
    }

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

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

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

<div class="space-y-6">
    <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">Edit 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-info">Question {{ $position }} of {{ $total }}</span>
                <span class="text-sm text-slate-300">📚 {{ $exam->subject }}</span>
                @if($exam->topic)
                    <span class="chip chip-easy">{{ $exam->topic }}</span>
                @endif
            </div>
        </div>

        <a href="{{ route('admin.questions.index', $exam) }}" class="admin-action-btn bg-indigo-600 text-white">
            All Questions
        </a>
    </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

    <form method="POST" action="{{ route('admin.questions.update', $question) }}" class="space-y-6">
        @csrf
        @method('PUT')

        {{-- 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>
                </div>
            </div>

            <textarea name="question_text" rows="4" class="q-textarea" required>{{ old('question_text', $question->question_text) }}</textarea>
        </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">Correct answer पर click करें</p>
                </div>
            </div>

            <div id="options-container" class="space-y-3">
                @foreach($question->options as $index => $option)
                    <div class="option-item {{ $option->is_correct ? 'is-correct' : '' }}" data-index="{{ $index }}">
                        <div class="option-marker" onclick="selectCorrect({{ $index }})">{{ chr(65 + $index) }}</div>
                        <input type="text" name="options[]" value="{{ $option->option_text }}" class="q-field" required>
                        <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="{{ $index }}" class="hidden" {{ $option->is_correct ? 'checked' : '' }}>
                    </div>
                @endforeach
            </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</h2>
                </div>
            </div>

            <textarea name="explanation" rows="3" class="q-textarea">{{ old('explanation', $question->explanation) }}</textarea>
        </section>

        {{-- Actions --}}
        <div class="flex flex-wrap gap-3">
            <button type="submit" class="admin-action-btn bg-gradient-to-r from-green-500 to-emerald-600 text-white font-bold px-6 py-3">
                ✓ Update Question
            </button>

            @if($prev)
                <a href="{{ route('admin.questions.edit', $prev) }}" class="admin-action-btn bg-yellow-600 text-white">← Previous</a>
            @endif

            @if($next)
                <a href="{{ route('admin.questions.edit', $next) }}" class="admin-action-btn bg-indigo-600 text-white">Next →</a>
            @endif

            <a href="{{ route('admin.questions.create', $exam) }}" class="admin-action-btn bg-blue-600 text-white">+ Add New</a>
            <a href="{{ route('admin.questions.index', $exam) }}" class="admin-action-btn bg-slate-700 text-white">Back to List</a>
        </div>
    </form>
</div>

<script>
    let optionIndex = {{ $question->options->count() }};

    function addOption() {
        const container = document.getElementById('options-container');
        const div = document.createElement('div');
        div.className = 'option-item';
        div.dataset.index = optionIndex;
        div.innerHTML = `
            <div class="option-marker" onclick="selectCorrect(${optionIndex})">${String.fromCharCode(65 + optionIndex)}</div>
            <input type="text" name="options[]" class="q-field" placeholder="Option ${String.fromCharCode(65 + optionIndex)}" required>
            <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="${optionIndex}" class="hidden">
        `;
        container.appendChild(div);
        optionIndex++;
    }

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

    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;
            item.querySelector('input[type="text"]').placeholder = '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;
        });
    }
</script>
@endsection