@extends('layouts.main_dashboard.app')

@section('title', __('dashboard.Edit Department'))
@section('page_heading', __('dashboard.Edit 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.update', $department->id) }}" method="POST" class="space-y-6">
            @csrf
            @method('PUT')
            <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', $department->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 }}" {{ $staff->id == old('staff_id', $department->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', $department->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 account gets a personal teacher workspace; when disabled, it keeps only 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