@extends('layouts.main_dashboard.app')

@section('title', __('dashboard.Add New Department'))
@section('page_heading', __('dashboard.Add New Department'))
@section('page_subtitle', 'أنشئ القسم أولًا، ثم اربط به عدة مواد من شاشة المواد حتى لو كانت هذه المواد موزعة على أكثر من صف أو مرحلة.')
@section('page_actions')
    <a href="{{ route('admin.departments.index') }}" class="inline-flex items-center gap-2 rounded-xl border border-surface-200 bg-white px-4 py-2 text-sm font-bold text-surface-700 transition hover:bg-surface-50 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-200 dark:hover:bg-surface-800">
        <i class="fa-solid fa-list"></i>
        <span>{{ __('dashboard.View All Departments') }}</span>
    </a>
@endsection

@section('content')
<div class="space-y-8">
    <section class="rounded-xl border border-surface-200 p-6 dark:border-surface-800">
        <form action="{{ route('admin.departments.store') }}" method="POST" class="space-y-6">
            @csrf
            <div class="grid gap-6 lg:grid-cols-2">
                <div>
                    <label for="name" class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Department Name') }}</label>
                    <input id="name" type="text" name="name" value="{{ old('name') }}" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-900" required>
                    <p class="mt-2 text-xs leading-6 text-surface-500 dark:text-surface-400">مثل: قسم الرياضة أو قسم العلوم. يمكن للقسم الواحد أن يحتوي على عدة مواد عبر صفوف مختلفة.</p>
                    @error('name')
                        <p class="mt-2 text-sm font-medium text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="staff_id" class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Assign Staff (Optional)') }}</label>
                    <select id="staff_id" name="staff_id" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-900">
                        <option value="">{{ __('dashboard.Select Staff') }}</option>
                        @foreach($staffs as $staff)
                            <option value="{{ $staff->id }}" {{ old('staff_id') == $staff->id ? 'selected' : '' }}>{{ $staff->name }}</option>
                        @endforeach
                    </select>
                    @error('staff_id')
                        <p class="mt-2 text-sm font-medium text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <label class="flex items-start gap-3 rounded-2xl border border-surface-200 bg-white px-5 py-4 text-sm text-surface-700 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-200">
                <input type="checkbox" name="head_can_teach" value="1" @checked(old('head_can_teach')) class="mt-1 h-4 w-4 rounded border-surface-300 text-brand-600 focus:ring-brand-500">
                <span class="leading-7">
                    <span class="block font-black">{{ app()->getLocale() === 'ar' ? 'رئيس القسم يدرّس حصصًا' : 'Department head also teaches classes' }}</span>
                    <span class="mt-1 block text-xs text-surface-500 dark:text-surface-400">{{ app()->getLocale() === 'ar' ? 'عند التفعيل تظهر له لوحة شخصية كمدرس داخل نفس الحساب بالإضافة إلى لوحة القسم.' : 'When enabled, the user sees a personal teacher workspace in the same account beside the department workspace.' }}</span>
                </span>
            </label>

            <div class="rounded-2xl border border-dashed border-surface-300 bg-surface-50 px-5 py-4 text-sm leading-7 text-surface-600 dark:border-surface-700 dark:bg-surface-900/60 dark:text-surface-300">
                بعد حفظ القسم، انتقل إلى شاشة المواد واربط أي عدد من المواد بهذا القسم. هذا يعني أنك تستطيع وضع مواد مثل رياضة أولى إعدادي، رياضة ثانية إعدادي، ورياصة ثالثة إعدادي كلها تحت نفس القسم.
            </div>

            <div class="flex flex-wrap justify-end gap-3">
                <a href="{{ route('admin.departments.index') }}" class="inline-flex items-center gap-2 rounded-2xl border border-surface-200 px-4 py-2 text-sm font-bold text-surface-700 transition hover:bg-surface-50 dark:border-surface-700 dark:text-surface-200 dark:hover:bg-surface-800">{{ __('dashboard.Cancel') }}</a>
                <button type="submit" class="inline-flex items-center gap-2 rounded-2xl bg-brand-600 px-4 py-2 text-sm font-bold text-white transition hover:bg-brand-700">
                    <i class="fa-solid fa-floppy-disk"></i>
                    <span>{{ __('dashboard.Save') }}</span>
                </button>
            </div>
        </form>
    </section>
</div>
@endsection