@extends('layouts.app')
@section('title', 'إضافة دورة تدريبية')
@section('content')
@push('styles')
<style>
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.page-header h1{font-size:1.5rem;font-weight:700;color:#1B2A4A;margin:0}
.card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px rgba(0,0,0,.06);max-width:700px}
.form-group{margin-bottom:16px}
.form-group label{display:block;margin-bottom:6px;font-weight:600;font-size:.85rem;color:#374151}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:.9rem}
.btn-primary{background:#E8502F;color:#fff;border:none;padding:10px 24px;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:600;transition:all .2s}
.btn-primary:hover{background:#d4431f}
.btn-back{background:#f1f5f9;color:#1B2A4A;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:.85rem;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:all .2s}
.btn-back:hover{background:#e2e8f0}
</style>
@endpush

<div class="page-header">
    <h1><i class="fas fa-plus-circle"></i> إضافة دورة تدريبية</h1>
    <a href="/training-management/courses" class="btn-back"><i class="fas fa-arrow-right"></i> رجوع</a>
</div>

<div class="card">
    <form action="/training-management/courses" method="POST">
        @csrf
        <div class="form-group"><label>عنوان الدورة *</label><input type="text" name="title" required value="{{ old('title') }}"></div>
        <div class="form-group"><label>المدرب</label><input type="text" name="trainer" value="{{ old('trainer') }}"></div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
            <div class="form-group"><label>تاريخ البدء</label><input type="date" name="start_date" value="{{ old('start_date') }}"></div>
            <div class="form-group"><label>تاريخ الانتهاء</label><input type="date" name="end_date" value="{{ old('end_date') }}"></div>
        </div>
        <div class="form-group"><label>الموقع</label><input type="text" name="location" value="{{ old('location') }}"></div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
            <div class="form-group"><label>الحد الأقصى للمقاعد</label><input type="number" name="max_seats" min="1" value="{{ old('max_seats') }}"></div>
            <div class="form-group"><label>إلزامية</label><select name="is_mandatory"><option value="0">لا</option><option value="1">نعم</option></select></div>
        </div>
        <div class="form-group"><label>الوصف</label><textarea name="description" rows="4">{{ old('description') }}</textarea></div>
        <button type="submit" class="btn-primary" style="width:100%"><i class="fas fa-save"></i> حفظ الدورة</button>
    </form>
</div>
@endsection