@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-user-plus text-emerald-500"></i>
                إضافة طالب جديد
            </h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">تعبئة البيانات الأكاديمية والمالية والشخصية للطالب</p>
        </div>
        <a href="{{ route('students.index') }}" class="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-xl font-bold text-sm">
            <i class="fas fa-arrow-right"></i> إلغاء والعودة
        </a>
    </div>

    @if(session('error_message'))
        <div class="p-4 bg-rose-50 border border-rose-200 text-rose-800 rounded-xl">
            {{ session('error_message') }}
        </div>
    @endif

    <form method="POST" action="{{ route('students.store') }}" class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 space-y-6">
        @csrf

        <h2 class="text-base font-bold text-gray-800 dark:text-gray-200 border-b border-gray-100 dark:border-gray-700 pb-2">البيانات الأكاديمية والرقم الجامعي</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            <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="student_id" value="{{ old('student_id') }}" required placeholder="مثال: 2025001" 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 font-bold">
            </div>

            <div>
                <label class="block text-xs font-bold text-gray-700 dark:text-gray-300 mb-1">الكلية <span class="text-rose-500">*</span></label>
                <select name="college_id" required 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>

            <div>
                <label class="block text-xs font-bold text-gray-700 dark:text-gray-300 mb-1">القسم <span class="text-rose-500">*</span></label>
                <select name="section_id" required 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($sections as $sec)
                        <option value="{{ $sec->id }}">{{ $sec->name }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-xs font-bold text-gray-700 dark:text-gray-300 mb-1">البرنامج العلمي <span class="text-rose-500">*</span></label>
                <select name="program_id" required 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($programs as $prog)
                        <option value="{{ $prog->id }}">{{ $prog->name }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-xs font-bold text-gray-700 dark:text-gray-300 mb-1">الدفعة <span class="text-rose-500">*</span></label>
                <select name="batch_id" required 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($batches as $b)
                        <option value="{{ $b->id }}">{{ $b->value }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <h2 class="text-base font-bold text-gray-800 dark:text-gray-200 border-b border-gray-100 dark:border-gray-700 pb-2 pt-4">البيانات الشخصية</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            <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="student_name" value="{{ old('student_name') }}" required 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">اسم الطالب بالإنجليزي</label>
                <input type="text" name="student_name_eng" value="{{ old('student_name_eng') }}" 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">النوع</label>
                <select name="gender" 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>
                    <option value="أنثى">أنثى</option>
                </select>
            </div>

            <div>
                <label class="block text-xs font-bold text-gray-700 dark:text-gray-300 mb-1">رقم الهاتف</label>
                <input type="text" name="phone" value="{{ old('phone') }}" 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">الرقم الوطني</label>
                <input type="text" name="national_id" value="{{ old('national_id') }}" 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>

        <h2 class="text-base font-bold text-gray-800 dark:text-gray-200 border-b border-gray-100 dark:border-gray-700 pb-2 pt-4">الرسوم الافتراضية للطالب</h2>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div>
                <label class="block text-xs font-bold text-gray-700 dark:text-gray-300 mb-1">رسوم البرنامج الكلية (SDG)</label>
                <input type="number" step="0.01" name="program_fees" value="{{ old('program_fees', 500000) }}" 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 font-bold">
            </div>

            <div>
                <label class="block text-xs font-bold text-gray-700 dark:text-gray-300 mb-1">رسوم التسجيل (SDG)</label>
                <input type="number" step="0.01" name="registration_fees" value="{{ old('registration_fees', 30000) }}" 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">رسوم التقديم / التأمين (SDG)</label>
                <input type="number" step="0.01" name="insurance_fees" value="{{ old('insurance_fees', 15000) }}" 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>

        <div class="pt-4 flex justify-end">
            <button type="submit" class="px-6 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-xl shadow-md transition text-sm">
                حفظ بيانات الطالب
            </button>
        </div>
    </form>
</div>
@endsection