@extends('layouts.main_dashboard.app')
@section('title', app()->getLocale() === 'ar' ? 'بنك أسئلة جديد' : 'New Question Bank')
@section('skip_page_hero', true)

@section('content')
@php $isArabic = app()->getLocale() === 'ar'; @endphp
<div class="mx-auto max-w-2xl space-y-6">
    <div class="flex items-center gap-3">
        <a href="{{ route('admin.exam-banks.index') }}" class="flex h-9 w-9 items-center justify-center rounded-xl border border-surface-200 text-surface-500 hover:bg-surface-50 dark:border-surface-700 dark:text-surface-400">
            <i class="fa-solid fa-arrow-{{ $isArabic ? 'right' : 'left' }} text-sm"></i>
        </a>
        <h1 class="text-xl font-black text-surface-900 dark:text-white">{{ $isArabic ? 'بنك أسئلة جديد' : 'New Question Bank' }}</h1>
    </div>

    <form method="POST" action="{{ route('admin.exam-banks.store') }}"
          class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900 space-y-5">
        @csrf

        <div>
            <label class="mb-1.5 block text-sm font-bold text-surface-700 dark:text-surface-300">{{ $isArabic ? 'الاسم' : 'Title' }} *</label>
            <input type="text" name="title" value="{{ old('title') }}" required
                   class="w-full rounded-xl border border-surface-200 bg-white px-4 py-2.5 text-sm outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-100 dark:border-surface-700 dark:bg-surface-800 dark:text-white">
            @error('title')<p class="mt-1 text-xs text-red-500">{{ $message }}</p>@enderror
        </div>

        <div>
            <label class="mb-1.5 block text-sm font-bold text-surface-700 dark:text-surface-300">{{ $isArabic ? 'المادة' : 'Subject' }}</label>
            <select name="subject_id" class="w-full rounded-xl border border-surface-200 bg-white px-4 py-2.5 text-sm outline-none focus:border-brand-400 dark:border-surface-700 dark:bg-surface-800 dark:text-white">
                <option value="">— {{ $isArabic ? 'اختياري' : 'Optional' }} —</option>
                @foreach($subjects as $s)
                    <option value="{{ $s->id }}" @selected(old('subject_id') == $s->id)>{{ $s->name }}</option>
                @endforeach
            </select>
        </div>

        <div>
            <label class="mb-1.5 block text-sm font-bold text-surface-700 dark:text-surface-300">{{ $isArabic ? 'الوصف' : 'Description' }}</label>
            <textarea name="description" rows="3"
                      class="w-full rounded-xl border border-surface-200 bg-white px-4 py-2.5 text-sm outline-none focus:border-brand-400 dark:border-surface-700 dark:bg-surface-800 dark:text-white">{{ old('description') }}</textarea>
        </div>

        <label class="flex items-center gap-3 cursor-pointer">
            <input type="checkbox" name="is_shared" value="1" {{ old('is_shared') ? 'checked' : '' }}
                   class="h-4 w-4 rounded border-surface-300 text-brand-600">
            <span class="text-sm font-bold text-surface-700 dark:text-surface-300">{{ $isArabic ? 'مشترك مع المعلمين' : 'Shared with teachers' }}</span>
        </label>

        <div class="flex justify-end gap-3 pt-2">
            <a href="{{ route('admin.exam-banks.index') }}"
               class="rounded-xl border border-surface-200 px-5 py-2.5 text-sm font-bold text-surface-700 hover:bg-surface-50 dark:border-surface-700 dark:text-surface-300">
                {{ __('dashboard.Cancel') }}
            </a>
            <button type="submit"
                    class="rounded-xl bg-brand-600 px-5 py-2.5 text-sm font-bold text-white hover:bg-brand-700">
                {{ $isArabic ? 'إنشاء وإضافة أسئلة' : 'Create & Add Questions' }}
            </button>
        </div>
    </form>
</div>
@endsection