@extends('layouts.superadmin')

@section('title', 'إدارة الاختبارات — إنشاء اختبار جديد')
@section('page-title', 'إدارة الاختبارات — إنشاء اختبار جديد')

@section('content')
<div class="space-y-6">

    {{-- هيدر + إحصائيات --}}
    <div class="bg-white dark:bg-slate-900 rounded-2xl shadow-sm border border-slate-200/70 dark:border-slate-700/60 p-4 sm:p-6">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
                <h1 class="text-xl sm:text-2xl font-bold text-slate-900 dark:text-white mb-1">
                    لوحة إدارة الاختبارات
                </h1>
                <p class="text-sm text-slate-500 dark:text-slate-400">
                    قم بإنشاء اختبار جديد، وإدارة الأسئلة والإجابات ونتائج الأعضاء.
                </p>
            </div>

            {{-- كروت الإحصائيات --}}
            <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:auto-cols-fr md:grid-flow-col w-full md:w-auto">
                <div class="bg-slate-50 dark:bg-slate-800/70 rounded-xl px-3 py-2.5 border border-slate-200/80 dark:border-slate-700/70">
                    <p class="text-[11px] text-slate-500 mb-0.5">إجمالي الاختبارات</p>
                    <p class="text-lg font-bold text-slate-900 dark:text-white">
                        {{ $testsSummary['total_tests'] ?? 0 }}
                    </p>
                </div>

                <div class="bg-slate-50 dark:bg-slate-800/70 rounded-xl px-3 py-2.5 border border-slate-200/80 dark:border-slate-700/70">
                    <p class="text-[11px] text-slate-500 mb-0.5">اختبارات هذا الأسبوع</p>
                    <p class="text-lg font-bold text-emerald-600 dark:text-emerald-400">
                        {{ $testsSummary['weekly_tests'] ?? 0 }}
                    </p>
                </div>

                <div class="bg-slate-50 dark:bg-slate-800/70 rounded-xl px-3 py-2.5 border border-slate-200/80 dark:border-slate-700/70 hidden sm:block">
                    <p class="text-[11px] text-slate-500 mb-0.5">محاولات الأعضاء</p>
                    <p class="text-lg font-bold text-indigo-600 dark:text-indigo-400">
                        {{ $testsSummary['total_attempts'] ?? 0 }}
                    </p>
                </div>
            </div>
        </div>
    </div>

    {{-- سلايد إدارة الاختبارات --}}
    <div class="bg-white dark:bg-slate-900 rounded-2xl shadow-sm border border-slate-200/70 dark:border-slate-700/70 p-4 sm:p-6">
        <div class="space-y-4">

            {{-- السلايد --}}
            <div class="relative">
                <button type="button"
                        onclick="toggleDropdown('tests-slide')"
                        class="nav-link w-full group flex items-center justify-between px-4 py-3 text-sm font-medium rounded-xl
                               bg-slate-50 dark:bg-slate-800/70 text-slate-800 dark:text-slate-100 hover:bg-slate-100 dark:hover:bg-slate-800">
                    <div class="flex items-center gap-3">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M3 7h18M3 12h18M3 17h18"/>
                        </svg>
                        <span>قائمة إدارة الاختبارات</span>
                    </div>

                    <svg id="tests-slide-arrow" class="w-4 h-4 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>

                <div id="tests-slide" class="dropdown-menu pr-3 mt-1 space-y-1 max-h-0 overflow-hidden">

                    <a href="{{ route('tests.manage.create') }}"
                       class="nav-link flex items-center gap-3 px-4 py-2.5 text-sm rounded-lg
                       {{ request()->routeIs('tests.manage.create') ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-200' : 'text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800' }}">
                        <i class="fa-solid fa-plus w-4"></i>
                        <span>إنشاء اختبار جديد</span>
                    </a>

                    <a href="{{ route('tests.questions.index') }}"
                       class="nav-link flex items-center gap-3 px-4 py-2.5 text-sm rounded-lg">
                        <i class="fa-regular fa-circle-question w-4"></i>
                        <span>إدارة الأسئلة</span>
                    </a>

                    <a href="{{ route('tests.answers.index') }}"
                       class="nav-link flex items-center gap-3 px-4 py-2.5 text-sm rounded-lg">
                        <i class="fa-solid fa-list w-4"></i>
                        <span>إدارة الإجابات</span>
                    </a>

                    <a href="{{ route('tests.results.index') }}"
                       class="nav-link flex items-center gap-3 px-4 py-2.5 text-sm rounded-lg">
                        <i class="fa-solid fa-chart-line w-4"></i>
                        <span>نتائج الأعضاء</span>
                    </a>

                    <a href="{{ route('tests.manage.stats') }}"
                       class="nav-link flex items-center gap-3 px-4 py-2.5 text-sm rounded-lg">
                        <i class="fa-solid fa-chart-column w-4"></i>
                        <span>الإحصائيات</span>
                    </a>

                </div>
            </div>

            {{-- نموذج إنشاء اختبار --}}
            <div class="border-t border-slate-200 dark:border-slate-700 pt-4">
                <h2 class="text-sm sm:text-base font-semibold text-slate-900 dark:text-white mb-3">
                    إنشاء اختبار جديد
                </h2>

                @if(session('success'))
                    <div class="mb-3 text-sm text-emerald-600 dark:text-emerald-400">
                        {{ session('success') }}
                    </div>
                @endif

                <form action="{{ route('tests.manage.store') }}" method="POST"
                      class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-5">
                    @csrf

                    <input type="hidden" name="audience" value="all">

                    {{-- title --}}
                    <div class="space-y-1.5">
                        <label class="text-xs font-medium text-slate-600 dark:text-slate-300">عنوان الاختبار</label>
                        <input type="text" name="title" value="{{ old('title') }}"
                               class="input-field" placeholder="مثال: اختبار الالتزام الأسبوعي">
                        @error('title')
                            <p class="text-[11px] text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- duration --}}
                    <div class="space-y-1.5">
                        <label class="text-xs font-medium text-slate-600 dark:text-slate-300">مدة الاختبار</label>
                        <input type="number" name="duration_minutes" min="1" value="{{ old('duration_minutes') }}"
                               class="input-field" placeholder="مثال: 15">
                    </div>

                    {{-- start_at --}}
                    <div class="space-y-1.5">
                        <label class="text-xs font-medium text-slate-600 dark:text-slate-300">تاريخ البداية</label>
                        <input type="datetime-local" name="start_at" value="{{ old('start_at') }}"
                               class="input-field">
                    </div>

                    {{-- end_at --}}
                    <div class="space-y-1.5">
                        <label class="text-xs font-medium text-slate-600 dark:text-slate-300">تاريخ النهاية</label>
                        <input type="datetime-local" name="end_at" value="{{ old('end_at') }}"
                               class="input-field">
                    </div>

                    {{-- description --}}
                    <div class="md:col-span-2 space-y-1.5">
                        <label class="text-xs font-medium text-slate-600 dark:text-slate-300">وصف الاختبار</label>
                        <textarea name="description" rows="3" class="input-field">{{ old('description') }}</textarea>
                    </div>

                    <div class="md:col-span-2 flex items-center justify-end gap-2 pt-2">
                        <button type="button"
                                class="px-3.5 py-2 rounded-xl border border-slate-200 dark:border-slate-700 text-xs">
                            حفظ كمسودة
                        </button>
                        <button type="submit"
                                class="px-4 py-2 rounded-xl text-xs sm:text-sm font-semibold bg-indigo-600 text-white hover:bg-indigo-700">
                            حفظ ونشر الاختبار
                        </button>
                    </div>

                </form>
            </div>

        </div>
    </div>

</div>
@endsection

@push('scripts')
<script>
function toggleDropdown(id) {
    const dropdown = document.getElementById(id);
    const arrow = document.getElementById('tests-slide-arrow');

    if (!dropdown.classList.contains('active')) {
        dropdown.classList.add('active');
        dropdown.style.maxHeight = dropdown.scrollHeight + 'px';
        arrow.style.transform = 'rotate(180deg)';
    } else {
        dropdown.classList.remove('active');
        dropdown.style.maxHeight = '0px';
        arrow.style.transform = 'rotate(0deg)';
    }
}
</script>
@endpush

@push('styles')
<style>
.input-field {
    @apply w-full rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/60
           px-3 py-2 text-sm text-slate-900 dark:text-white focus:outline-none
           focus:ring-2 focus:ring-indigo-500/70 focus:border-indigo-500/70;
}
</style>
@endpush