@extends('layouts.main_dashboard.app')

@section('title', app()->getLocale() === 'ar' ? 'مواد بنك الأسئلة' : 'Question Bank Subjects')
@section('page_heading', app()->getLocale() === 'ar' ? 'مواد بنك الأسئلة' : 'Question Bank Subjects')
@section('page_subtitle', app()->getLocale() === 'ar' ? 'استكشف المواد المغطاة داخل البنك من صفحة مستقلة وواضحة.' : 'Explore subjects covered by the bank from a separate, clearer page.')
@section('skip_page_hero', true)

@php
    $isArabic = app()->getLocale() === 'ar';
    $allSubjectCards = collect($questionBankData['subject_cards']);
    $subjectSearch = trim((string) request('subject_search'));
    $subjectStage = trim((string) request('stage_name'));
    $subjectCards = $allSubjectCards
        ->filter(function ($subjectCard) use ($subjectSearch, $subjectStage) {
            $matchesSearch = $subjectSearch === ''
                || str_contains(mb_strtolower($subjectCard['name'] ?? ''), mb_strtolower($subjectSearch))
                || str_contains(mb_strtolower($subjectCard['grade_name'] ?? ''), mb_strtolower($subjectSearch));

            $matchesStage = $subjectStage === ''
                || ($subjectCard['stage_name'] ?? '') === $subjectStage;

            return $matchesSearch && $matchesStage;
        })
        ->values()
        ->take(10);
    $stageOptions = $allSubjectCards->pluck('stage_name')->filter()->unique()->sort()->values();
@endphp

@section('content')
<div class="space-y-6">
    <section class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <div class="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
            <div class="space-y-2">
                <h2 class="text-2xl font-black tracking-tight text-surface-900 dark:text-white">{{ $isArabic ? 'مواد بنك الأسئلة' : 'Question Bank Subjects' }}</h2>
                <p class="max-w-2xl text-sm leading-7 text-surface-500 dark:text-surface-400">
                    {{ $isArabic ? 'راجع المواد التي تحتوي على أسئلة داخل البنك من صفحة بسيطة تركز على الفلترة والجدول فقط.' : 'Review subjects that contain questions in the bank from a simple page focused on filtering and the table only.' }}
                </p>
            </div>

            @include('admin.questions._navigation')
        </div>
    </section>

    <section class="overflow-hidden rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <div class="border-b border-surface-200 bg-surface-50/80 px-6 py-5 dark:border-surface-800 dark:bg-surface-800/30">
                <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
                    <div>
                        <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'مواد بنك الأسئلة' : 'Question bank subjects' }}</h2>
                        <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'اعرض المواد داخل جدول واضح مع فلترة حسب الاسم أو المرحلة.' : 'Review subjects in a clear table with filters by name or stage.' }}</p>
                    </div>

                    <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
                        <div class="rounded-2xl border border-surface-200 bg-white px-4 py-3 dark:border-surface-700 dark:bg-surface-900">
                            <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'إجمالي المواد' : 'Total subjects' }}</p>
                            <p class="mt-1 text-xl font-black leading-none text-surface-900 dark:text-white">{{ $allSubjectCards->count() }}</p>
                        </div>
                        <div class="rounded-2xl border border-surface-200 bg-white px-4 py-3 dark:border-surface-700 dark:bg-surface-900">
                            <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'المعروضة' : 'Visible' }}</p>
                            <p class="mt-1 text-xl font-black leading-none text-surface-900 dark:text-white">{{ $subjectCards->count() }}</p>
                        </div>
                        <div class="rounded-2xl border border-surface-200 bg-white px-4 py-3 dark:border-surface-700 dark:bg-surface-900">
                            <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'المراحل' : 'Stages' }}</p>
                            <p class="mt-1 text-xl font-black leading-none text-surface-900 dark:text-white">{{ $stageOptions->count() }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="border-b border-surface-200 px-6 py-6 dark:border-surface-800">
                <form method="GET" action="{{ route('admin.questions.subjects') }}" class="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
                    <input type="search" name="subject_search" value="{{ $subjectSearch }}" class="rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" placeholder="{{ $isArabic ? 'ابحث باسم المادة أو الصف' : 'Search by subject or grade' }}">
                    <select name="stage_name" class="rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ $isArabic ? 'كل المراحل' : 'All stages' }}</option>
                        @foreach($stageOptions as $stageOption)
                            <option value="{{ $stageOption }}" @selected($subjectStage === $stageOption)>{{ $stageOption }}</option>
                        @endforeach
                    </select>
                    <button type="submit" class="inline-flex items-center justify-center gap-2 rounded-xl bg-brand-600 px-4 py-3 text-sm font-bold text-white transition hover:bg-brand-700">
                        <i class="fa-solid fa-magnifying-glass text-xs"></i>
                        <span>{{ __('dashboard.Filter') }}</span>
                    </button>
                    <a href="{{ route('admin.questions.subjects') }}" class="inline-flex items-center justify-center rounded-xl border border-surface-200 px-4 py-3 text-sm font-bold text-surface-600 transition hover:bg-surface-50 dark:border-surface-700 dark:text-surface-300 dark:hover:bg-surface-800">
                        {{ __('dashboard.Reset') }}
                    </a>
                </form>
            </div>

            @if($subjectCards->isEmpty())
                <div class="px-6 py-16 text-center text-sm text-surface-500 dark:text-surface-400">{{ __('dashboard.No data found') }}</div>
            @else
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-surface-200 dark:divide-surface-800">
                        <thead class="bg-surface-50/80 dark:bg-surface-800/40">
                            <tr class="text-right text-xs font-black uppercase tracking-[0.2em] text-surface-500 dark:text-surface-400">
                                <th class="px-6 py-4">{{ $isArabic ? 'المادة' : 'Subject' }}</th>
                                <th class="px-6 py-4">{{ $isArabic ? 'المرحلة والصف' : 'Stage & grade' }}</th>
                                <th class="px-6 py-4">{{ $isArabic ? 'الأسئلة' : 'Questions' }}</th>
                                <th class="px-6 py-4">{{ $isArabic ? 'الدروس' : 'Lessons' }}</th>
                                <th class="px-6 py-4">{{ $isArabic ? 'المنشئون' : 'Creators' }}</th>
                                <th class="px-6 py-4">{{ $isArabic ? 'متوسط الدرجة' : 'Average score' }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-surface-200 dark:divide-surface-800">
                            @foreach($subjectCards as $subjectCard)
                                <tr class="transition hover:bg-surface-50/80 dark:hover:bg-surface-800/20">
                                    <td class="px-6 py-5">
                                        <p class="text-sm font-black text-surface-900 dark:text-white">{{ $subjectCard['name'] }}</p>
                                    </td>
                                    <td class="px-6 py-5 text-sm text-surface-600 dark:text-surface-300">{{ trim(($subjectCard['stage_name'] ?? '') . ' - ' . ($subjectCard['grade_name'] ?? ''), ' -') ?: '-' }}</td>
                                    <td class="px-6 py-5 text-sm font-black text-surface-900 dark:text-white">{{ $subjectCard['questions_count'] }}</td>
                                    <td class="px-6 py-5 text-sm text-surface-600 dark:text-surface-300">{{ $subjectCard['lessons_count'] }}</td>
                                    <td class="px-6 py-5 text-sm text-surface-600 dark:text-surface-300">{{ $subjectCard['creators_count'] }}</td>
                                    <td class="px-6 py-5 text-sm text-surface-500 dark:text-surface-400">{{ number_format((float) ($subjectCard['average_score'] ?? 0), 1) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
    </section>
</div>
@endsection