@extends('layouts.app')

@section('title', 'الامتحان: ' . $exam->title)

@section('content')
    <div class="container py-4">

        {{-- Header --}}
        <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-lg-between gap-2 mb-4">
            <div>
                <h1 class="h4 mb-1">الامتحان: {{ $exam->title }}</h1>
                <div class="text-muted small">
                    إجمالي الأسئلة:
                    <span class="badge bg-primary">{{ $statsTotal }}</span>
                    <span class="mx-2">|</span>
                    متوسط عدد الاختيارات:
                    <span class="badge bg-secondary">{{ $statsAvgOptions }}</span>
                </div>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ $exportUrl }}" class="btn btn-outline-secondary">
                    تصدير CSV
                </a>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createQuestionModal">
                    + إضافة سؤال
                </button>
            </div>
        </div>

        {{-- Filters --}}
        <form method="GET" class="row g-3 mb-3">
            <input type="hidden" name="sort" value="{{ $sort }}">
            <input type="hidden" name="direction" value="{{ $direction }}">

            <div class="col-12 col-md-6">
                <label class="form-label">بحث</label>
                <input name="search" value="{{ $search }}" class="form-control" placeholder="كلمات من نص السؤال…">
            </div>

            <div class="col-6 col-md-3">
                <label class="form-label">من تاريخ</label>
                <input type="date" name="created_from" value="{{ request('created_from') }}" class="form-control">
            </div>
            <div class="col-6 col-md-3">
                <label class="form-label">إلى تاريخ</label>
                <input type="date" name="created_to" value="{{ request('created_to') }}" class="form-control">
            </div>

            <div class="col-12">
                <button class="btn btn-outline-primary">تصفية</button>
                <a href="{{ route('exams.show', $exam) }}" class="btn btn-link">إعادة التعيين</a>
            </div>
        </form>

        {{-- Sort bar --}}
        @php
            if (!function_exists('sortUrl')) {
                function sortUrl($field)
                {
                    $isSame = request('sort') === $field;
                    $nextDir = $isSame && request('direction') === 'asc' ? 'desc' : 'asc';
                    return request()->fullUrlWithQuery(['sort' => $field, 'direction' => $nextDir]);
                }
            }

            if (!function_exists('sortIcon')) {
                function sortIcon($field)
                {
                    if (request('sort') !== $field) {
                        return '';
                    }
                    return request('direction') === 'asc' ? '↑' : '↓';
                }
            }
        @endphp
        <div class="d-flex align-items-center gap-2 mb-2 small text-muted">
            <span>فرز حسب:</span>
            <a class="btn btn-sm btn-outline-light border" href="{{ sortUrl('created_at') }}">
                التاريخ {!! sortIcon('created_at') !!}
            </a>
            <a class="btn btn-sm btn-outline-light border" href="{{ sortUrl('question') }}">
                السؤال {!! sortIcon('question') !!}
            </a>
            <span class="ms-auto"></span>
        </div>

        {{-- Questions Table --}}
        <div class="table-responsive bg-white border rounded mb-3">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr class="text-nowrap">
                        <th>#</th>
                        <th>السؤال</th>
                        <th style="min-width:240px;">الاختيارات</th>
                        <th>الإجابة الصحيحة</th>
                        <th>أُنشئ في</th>
                        <th class="text-center">إجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($questions as $q)
                        @php
                            $answers = is_array($q->answers)
                                ? $q->answers
                                : (json_decode($q->answers ?? '[]', true) ?:
                                []);
                        @endphp
                        <tr>
                            <td class="text-muted">{{ $q->id }}</td>
                            <td style="max-width:420px;">
                                <div class="fw-semibold">{{ Str::limit($q->question, 160) }}</div>
                            </td>
                            <td>
                                @if (!empty($answers))
                                    <ul class="mb-0 ps-3">
                                        @foreach ($answers as $k => $v)
                                            <li><code class="me-1">{{ $k }}</code> {{ $v }}</li>
                                        @endforeach
                                    </ul>
                                @else
                                    <span class="text-muted">—</span>
                                @endif
                            </td>
                            <td><span class="badge bg-success-subtle text-success-emphasis">{{ $q->correct_answer }}</span>
                            </td>
                            <td class="text-muted">{{ optional($q->created_at)->format('Y-m-d H:i') }}</td>
                            <td class="text-center">
                                <div class="d-inline-flex gap-2">
                                    <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal"
                                        data-bs-target="#editQuestionModal-{{ $q->id }}">
                                        تعديل
                                    </button>
                                    <form method="POST" action="{{ route('questions.destroy', $q) }}"
                                        onsubmit="return confirm('تأكيد حذف السؤال؟')">
                                        @csrf
                                        @method('DELETE')
                                        {{-- توريث الاستعلامات --}}
                                        <input type="hidden" name="search" value="{{ $search }}">
                                        <input type="hidden" name="sort" value="{{ $sort }}">
                                        <input type="hidden" name="direction" value="{{ $direction }}">
                                        <input type="hidden" name="created_from" value="{{ request('created_from') }}">
                                        <input type="hidden" name="created_to" value="{{ request('created_to') }}">
                                        <button class="btn btn-sm btn-outline-danger">حذف</button>
                                    </form>
                                </div>
                            </td>
                        </tr>

                        {{-- Edit Modal (per-row, no JS injection needed) --}}
                        <div class="modal fade" id="editQuestionModal-{{ $q->id }}" tabindex="-1"
                            aria-hidden="true" aria-labelledby="editLabel-{{ $q->id }}">
                            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 id="editLabel-{{ $q->id }}" class="modal-title">تعديل سؤال
                                            #{{ $q->id }}</h5>
                                        <button type="button" class="btn-close ms-0" data-bs-dismiss="modal"
                                            aria-label="إغلاق"></button>
                                    </div>
                                    <form method="POST" action="{{ route('questions.update', $q) }}">
                                        @csrf
                                        @method('PUT')
                                        <div class="modal-body">

                                            {{-- توريث الاستعلامات --}}
                                            <input type="hidden" name="search" value="{{ $search }}">
                                            <input type="hidden" name="sort" value="{{ $sort }}">
                                            <input type="hidden" name="direction" value="{{ $direction }}">
                                            <input type="hidden" name="created_from"
                                                value="{{ request('created_from') }}">
                                            <input type="hidden" name="created_to" value="{{ request('created_to') }}">

                                            <div class="mb-3">
                                                <label class="form-label">نص السؤال</label>
                                                <textarea name="question" rows="3" class="form-control" required>{{ $q->question }}</textarea>
                                            </div>

                                            @php
                                                // نبني مصفوفة مفاتيح افتراضية A..F مع تعبئة القيم الموجودة
                                                $keys = ['A', 'B', 'C', 'D', 'E', 'F'];
                                                $existing = [];
                                                foreach ($keys as $k) {
                                                    $existing[$k] = $answers[$k] ?? '';
                                                }
                                                // أضف أي مفاتيح إضافية غير قياسية ظهرت في قاعدة البيانات
                                                foreach ($answers as $k => $v) {
                                                    if (!array_key_exists($k, $existing)) {
                                                        $existing[$k] = $v;
                                                    }
                                                }
                                            @endphp

                                            <div class="mb-2">
                                                <div class="d-flex align-items-center justify-content-between">
                                                    <label class="form-label mb-0">الاختيارات</label>
                                                    <small class="text-muted">اترك الخانات الفارغة ليتم تجاهلها</small>
                                                </div>
                                            </div>

                                            <div class="row g-2">
                                                @foreach ($existing as $k => $v)
                                                    <div class="col-12 col-md-2">
                                                        <div class="input-group">
                                                            <span class="input-group-text">{{ $k }}</span>
                                                            <input type="text" name="answers[{{ $k }}]"
                                                                class="form-control" value="{{ $v }}"
                                                                placeholder="نص الاختيار">
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>

                                            <div class="mt-3">
                                                <label class="form-label">مفتاح الإجابة الصحيحة (مثل: A)</label>
                                                <input type="text" name="correct_answer"
                                                    value="{{ $q->correct_answer }}" class="form-control" required>
                                            </div>

                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-link"
                                                data-bs-dismiss="modal">إلغاء</button>
                                            <button class="btn btn-primary">تحديث</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center text-muted py-5">لا توجد أسئلة مطابقة.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        <div class="d-flex justify-content-center">
            {{ $questions->links() }}
        </div>

        {{-- Create Modal (no JS) --}}
        <div class="modal fade" id="createQuestionModal" tabindex="-1" aria-hidden="true"
            aria-labelledby="createLabel">
            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 id="createLabel" class="modal-title">إضافة سؤال جديد</h5>
                        <button type="button" class="btn-close ms-0" data-bs-dismiss="modal"
                            aria-label="إغلاق"></button>
                    </div>
                    <form method="POST" action="{{ route('questions.store') }}">
                        @csrf
                        <div class="modal-body">

                            <input type="hidden" name="exam_id" value="{{ $exam->id }}">

                            {{-- توريث الاستعلامات --}}
                            <input type="hidden" name="search" value="{{ $search }}">
                            <input type="hidden" name="sort" value="{{ $sort }}">
                            <input type="hidden" name="direction" value="{{ $direction }}">
                            <input type="hidden" name="created_from" value="{{ request('created_from') }}">
                            <input type="hidden" name="created_to" value="{{ request('created_to') }}">

                            <div class="mb-3">
                                <label class="form-label">نص السؤال</label>
                                <textarea name="question" class="form-control" rows="3" required></textarea>
                            </div>

                            <div class="mb-2">
                                <div class="d-flex align-items-center justify-content-between">
                                    <label class="form-label mb-0">الاختيارات</label>
                                    <small class="text-muted">A..F — اترك الفارغ وسيتم تجاهله</small>
                                </div>
                            </div>

                            <div class="row g-2">
                                @foreach (['A', 'B', 'C', 'D', 'E', 'F'] as $k)
                                    <div class="col-12 col-md-2">
                                        <div class="input-group">
                                            <span class="input-group-text">{{ $k }}</span>
                                            <input type="text" name="answers[{{ $k }}]"
                                                class="form-control" placeholder="نص الاختيار">
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <div class="mt-3">
                                <label class="form-label">مفتاح الإجابة الصحيحة (مثل: A)</label>
                                <input type="text" name="correct_answer" class="form-control" required>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-link" data-bs-dismiss="modal">إلغاء</button>
                            <button class="btn btn-primary">حفظ</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
@endsection