@extends('layouts.app')
@section('title', 'Edit question #' . $question->id)

@section('breadcrumb')
    <a href="{{ route('admin.dashboard') }}">Dashboard</a>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12"><path d="M9 18l6-6-6-6"/></svg>
    <a href="{{ route('admin.questions.index') }}">Question bank</a>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12"><path d="M9 18l6-6-6-6"/></svg>
    <a href="{{ route('admin.questions.show', $question) }}">#{{ $question->id }}</a>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12"><path d="M9 18l6-6-6-6"/></svg>
    <span>Edit</span>
@endsection

@push('styles')
<style>
    .q-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
    @media (min-width: 992px) { .q-form-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }

    .opt-row {
        display: grid; grid-template-columns: 42px 1fr; gap: 0;
        margin-bottom: 12px;
    }
    .opt-letter {
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--primary-700); color: #fff;
        font-family: 'Space Grotesk', Inter, sans-serif;
        font-weight: 700;
        border: 1px solid var(--primary-700);
        border-right: 0;
        border-top-left-radius: var(--r-md);
        border-bottom-left-radius: var(--r-md);
    }
    .opt-row input.form-control {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    .opt-row.is-invalid .opt-letter { background: var(--danger-500); border-color: var(--danger-500); }

    .answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .answer-option {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 12px;
        border: 1px solid var(--border-strong);
        border-radius: var(--r-md);
        cursor: pointer;
        transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
        background: var(--bg-surface);
    }
    .answer-option:hover { border-color: var(--primary-400); }
    .answer-option input { cursor: pointer; }
    .answer-option.is-selected {
        border-color: var(--success-500);
        background: var(--success-100);
        color: var(--success-700);
        font-weight: 700;
    }

    .meta-card { padding: 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); margin-top: 12px; }
    .meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 12.5px; }
    .meta-grid dt { color: var(--text-tertiary); margin: 0; }
    .meta-grid dd { color: var(--text-primary); margin: 0; font-weight: 500; }
</style>
@endpush

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-header-title">
            Edit question
            <span class="status-pill s-neutral cell-mono" style="vertical-align:middle; font-size:12px; margin-left:4px;">#{{ $question->id }}</span>
        </h1>
        <p class="page-header-sub">Update this question in the global question pool.</p>
    </div>
    <div class="page-header-actions" style="display:flex; gap:8px;">
        <a href="{{ route('admin.questions.show', $question) }}" class="btn btn-secondary btn-sm">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
            View
        </a>
        <a href="{{ route('admin.questions.index') }}" class="btn btn-ghost btn-sm">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
            Back
        </a>
    </div>
</div>

<form method="POST" action="{{ route('admin.questions.update', $question) }}" id="questionForm" novalidate>
    @csrf
    @method('PUT')

    <div class="q-form-grid">

        <section class="section-card">
            <header class="section-card-header">
                <h2 class="section-card-title">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
                    Question content
                </h2>
            </header>
            <div class="section-card-body">

                <div class="form-group" style="margin-bottom:16px;">
                    <label class="form-label" for="question_text">Question text <span class="form-required">*</span></label>
                    <textarea id="question_text" name="question_text" rows="4"
                              class="form-control @error('question_text') is-invalid @enderror"
                              required>{{ old('question_text', $question->question_text) }}</textarea>
                    @error('question_text')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="form-group">
                    <label class="form-label">Answer options <span class="form-required">*</span></label>
                    @foreach(['a' => 'A', 'b' => 'B', 'c' => 'C', 'd' => 'D'] as $key => $label)
                        <div class="opt-row @error('option_'.$key) is-invalid @enderror">
                            <span class="opt-letter">{{ $label }}</span>
                            <input type="text" name="option_{{ $key }}"
                                   class="form-control @error('option_'.$key) is-invalid @enderror"
                                   value="{{ old('option_'.$key, $question->{'option_'.$key}) }}"
                                   placeholder="Option {{ $label }}" required>
                        </div>
                        @error('option_'.$key)<div class="invalid-feedback" style="margin-top:-8px; margin-bottom:8px;">{{ $message }}</div>@enderror
                    @endforeach
                </div>

                <div class="form-group" style="margin-top:8px;">
                    <label class="form-label" for="explanation">Explanation <span class="form-text" style="font-weight:400;">(optional)</span></label>
                    <textarea id="explanation" name="explanation" rows="3"
                              class="form-control @error('explanation') is-invalid @enderror"
                              placeholder="Explain why the correct answer is correct…">{{ old('explanation', $question->explanation) }}</textarea>
                    @error('explanation')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

            </div>
        </section>

        <section style="display:flex; flex-direction:column; gap:12px;">

            <div class="section-card">
                <header class="section-card-header">
                    <h2 class="section-card-title">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
                        Settings
                    </h2>
                </header>
                <div class="section-card-body">

                    <div class="form-group" style="margin-bottom:16px;">
                        <label class="form-label">Correct answer <span class="form-required">*</span></label>
                        <div class="answer-grid">
                            @foreach(['a' => 'A', 'b' => 'B', 'c' => 'C', 'd' => 'D'] as $key => $label)
                                @php $selected = old('correct_answer', $question->correct_answer) === $key; @endphp
                                <label class="answer-option {{ $selected ? 'is-selected' : '' }}" for="answer_{{ $key }}">
                                    <input class="answer-option-input" type="radio"
                                           name="correct_answer" id="answer_{{ $key }}" value="{{ $key }}"
                                           {{ $selected ? 'checked' : '' }} required>
                                    Option {{ $label }}
                                </label>
                            @endforeach
                        </div>
                        @error('correct_answer')<div class="form-error" style="margin-top:6px;">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-group" style="margin-bottom:16px;">
                        <label class="form-label" for="status">Status <span class="form-required">*</span></label>
                        <select id="status" name="status" class="form-select @error('status') is-invalid @enderror" required>
                            <option value="active"   {{ old('status', $question->status) === 'active'   ? 'selected' : '' }}>Active (used in exams)</option>
                            <option value="inactive" {{ old('status', $question->status) === 'inactive' ? 'selected' : '' }}>Inactive (excluded)</option>
                        </select>
                        @error('status')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div style="display:flex; flex-direction:column; gap:6px;">
                        <button type="submit" class="btn btn-primary">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
                            Save changes
                        </button>
                        <a href="{{ route('admin.questions.show', $question) }}" class="btn btn-secondary">Cancel</a>
                    </div>

                </div>
            </div>

            <div class="meta-card">
                <dl class="meta-grid">
                    <dt>Question ID</dt>
                    <dd>#{{ $question->id }}</dd>
                    <dt>Created by</dt>
                    <dd>{{ $question->createdBy?->name ?? '—' }}</dd>
                    <dt>Created at</dt>
                    <dd>{{ $question->created_at->format('d M Y') }}</dd>
                    @if($question->updatedBy)
                        <dt>Last edited</dt>
                        <dd>{{ $question->updatedBy?->name }}</dd>
                    @endif
                </dl>
            </div>

        </section>

    </div>
</form>

@endsection

@push('scripts')
<script>
$(function () {
    $('input[name=correct_answer]').on('change', function () {
        $('.answer-option').removeClass('is-selected');
        $(this).closest('.answer-option').addClass('is-selected');
    });
});
</script>
@endpush