@extends('layouts.master')

@section('content')
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
    .font-cairo { font-family: 'Cairo', sans-serif !important; }
</style>

<div class="p-4 sm:p-6 space-y-6 font-cairo" dir="rtl">
    <div class="flex items-center justify-between bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
                <i class="fas fa-sitemap text-emerald-500"></i>
                إضافة قسم أكاديمي جديد
            </h1>
        </div>
        <a href="{{ route('sections.index') }}" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-xl font-bold text-sm">
            <i class="fas fa-arrow-right"></i> العودة
        </a>
    </div>

    <form method="POST" action="{{ route('sections.store') }}" class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 space-y-4 max-w-xl">
        @csrf
        <div>
            <label class="block text-xs font-bold text-gray-700 dark:text-gray-300 mb-1">اسم القسم <span class="text-rose-500">*</span></label>
            <input type="text" name="name" required placeholder="مثال: قسم علوم الحاسوب" class="w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-xl px-3 py-2 text-sm">
        </div>

        <div>
            <label class="block text-xs font-bold text-gray-700 dark:text-gray-300 mb-1">رمز القسم (Code)</label>
            <input type="text" name="code" placeholder="مثال: CS" class="w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-xl px-3 py-2 text-sm font-mono">
        </div>

        <div>
            <label class="block text-xs font-bold text-gray-700 dark:text-gray-300 mb-1">الكلية التابع لها</label>
            <select name="parent" class="w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-xl px-3 py-2 text-sm">
                <option value="">اختر الكلية...</option>
                @foreach($colleges as $col)
                    <option value="{{ $col->id }}">{{ $col->name }}</option>
                @endforeach
            </select>
        </div>

        <button type="submit" class="px-6 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-xl text-sm transition">
            حفظ القسم
        </button>
    </form>
</div>
@endsection