@extends('layouts.app')

@section('title', 'إضافة دورة تدريبية')

@section('content')
<div style="padding: 28px;">
    {{-- Header --}}
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
        <div>
            <h1 style="font-size: 22px; color: #1B2A4A; margin: 0 0 4px;">
                <i class="fas fa-plus-circle" style="color: #E8502F;"></i> إضافة دورة تدريبية
            </h1>
            <p style="color: #6B7280; font-size: 14px; margin: 0;">إنشاء دورة تدريبية جديدة</p>
        </div>
        <a href="{{ route('training-management.my-training') }}" style="color: #6B7280; text-decoration: none; font-size: 14px;">
            <i class="fas fa-arrow-right"></i> العودة للقائمة
        </a>
    </div>

    {{-- Form --}}
    <form action="{{ route('training-management.courses.store') }}" method="POST" style="background: white; border-radius: 16px; padding: 32px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);">
        @csrf

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
            {{-- Title --}}
            <div>
                <label style="display: block; font-size: 13px; font-weight: 600; color: #1B2A4A; margin-bottom: 6px;">عنوان الدورة <span style="color: #E8502F;">*</span></label>
                <input type="text" name="title" value="{{ old('title') }}" required
                    style="width: 100%; padding: 10px 14px; border: 1px solid #D1D5DB; border-radius: 10px; font-size: 14px; outline: none; box-sizing: border-box;"
                    placeholder="مثال: أساسيات إدارة المشاريع">
                @error('title') <span style="color: #E8502F; font-size: 12px;">{{ $message }}</span> @enderror
            </div>

            {{-- Category --}}
            <div>
                <label style="display: block; font-size: 13px; font-weight: 600; color: #1B2A4A; margin-bottom: 6px;">التصنيف <span style="color: #E8502F;">*</span></label>
                <select name="category" required
                    style="width: 100%; padding: 10px 14px; border: 1px solid #D1D5DB; border-radius: 10px; font-size: 14px; outline: none; box-sizing: border-box; background: white;">
                    <option value="">اختر التصنيف</option>
                    <option value="technical" {{ old('category') == 'technical' ? 'selected' : '' }}>تقني</option>
                    <option value="management" {{ old('category') == 'management' ? 'selected' : '' }}>إداري</option>
                    <option value="soft_skills" {{ old('category') == 'soft_skills' ? 'selected' : '' }}>مهارات شخصية</option>
                    <option value="compliance" {{ old('category') == 'compliance' ? 'selected' : '' }}>التزام</option>
                    <option value="safety" {{ old('category') == 'safety' ? 'selected' : '' }}>سلامة مهنية</option>
                </select>
                @error('category') <span style="color: #E8502F; font-size: 12px;">{{ $message }}</span> @enderror
            </div>

            {{-- Instructor --}}
            <div>
                <label style="display: block; font-size: 13px; font-weight: 600; color: #1B2A4A; margin-bottom: 6px;">المدرب <span style="color: #E8502F;">*</span></label>
                <input type="text" name="instructor" value="{{ old('instructor') }}" required
                    style="width: 100%; padding: 10px 14px; border: 1px solid #D1D5DB; border-radius: 10px; font-size: 14px; outline: none; box-sizing: border-box;"
                    placeholder="اسم المدرب">
                @error('instructor') <span style="color: #E8502F; font-size: 12px;">{{ $message }}</span> @enderror
            </div>

            {{-- Duration --}}
            <div>
                <label style="display: block; font-size: 13px; font-weight: 600; color: #1B2A4A; margin-bottom: 6px;">مدة الدورة (ساعات) <span style="color: #E8502F;">*</span></label>
                <input type="number" name="duration_hours" value="{{ old('duration_hours') }}" required min="1"
                    style="width: 100%; padding: 10px 14px; border: 1px solid #D1D5DB; border-radius: 10px; font-size: 14px; outline: none; box-sizing: border-box;">
                @error('duration_hours') <span style="color: #E8502F; font-size: 12px;">{{ $message }}</span> @enderror
            </div>

            {{-- Start Date --}}
            <div>
                <label style="display: block; font-size: 13px; font-weight: 600; color: #1B2A4A; margin-bottom: 6px;">تاريخ البدء <span style="color: #E8502F;">*</span></label>
                <input type="date" name="start_date" value="{{ old('start_date') }}" required
                    style="width: 100%; padding: 10px 14px; border: 1px solid #D1D5DB; border-radius: 10px; font-size: 14px; outline: none; box-sizing: border-box;">
                @error('start_date') <span style="color: #E8502F; font-size: 12px;">{{ $message }}</span> @enderror
            </div>

            {{-- End Date --}}
            <div>
                <label style="display: block; font-size: 13px; font-weight: 600; color: #1B2A4A; margin-bottom: 6px;">تاريخ الانتهاء <span style="color: #E8502F;">*</span></label>
                <input type="date" name="end_date" value="{{ old('end_date') }}" required
                    style="width: 100%; padding: 10px 14px; border: 1px solid #D1D5DB; border-radius: 10px; font-size: 14px; outline: none; box-sizing: border-box;">
                @error('end_date') <span style="color: #E8502F; font-size: 12px;">{{ $message }}</span> @enderror
            </div>

            {{-- Max Participants --}}
            <div>
                <label style="display: block; font-size: 13px; font-weight: 600; color: #1B2A4A; margin-bottom: 6px;">الحد الأقصى للمشاركين</label>
                <input type="number" name="max_participants" value="{{ old('max_participants') }}" min="1"
                    style="width: 100%; padding: 10px 14px; border: 1px solid #D1D5DB; border-radius: 10px; font-size: 14px; outline: none; box-sizing: border-box;"
                    placeholder="مثال: 30">
                @error('max_participants') <span style="color: #E8502F; font-size: 12px;">{{ $message }}</span> @enderror
            </div>

            {{-- Location --}}
            <div>
                <label style="display: block; font-size: 13px; font-weight: 600; color: #1B2A4A; margin-bottom: 6px;">مكان الانعقاد</label>
                <input type="text" name="location" value="{{ old('location') }}"
                    style="width: 100%; padding: 10px 14px; border: 1px solid #D1D5DB; border-radius: 10px; font-size: 14px; outline: none; box-sizing: border-box;"
                    placeholder="قاعة التدريب / عن بُعد">
                @error('location') <span style="color: #E8502F; font-size: 12px;">{{ $message }}</span> @enderror
            </div>
        </div>

        {{-- Description --}}
        <div style="margin-bottom: 20px;">
            <label style="display: block; font-size: 13px; font-weight: 600; color: #1B2A4A; margin-bottom: 6px;">وصف الدورة <span style="color: #E8502F;">*</span></label>
            <textarea name="description" rows="4" required
                style="width: 100%; padding: 10px 14px; border: 1px solid #D1D5DB; border-radius: 10px; font-size: 14px; outline: none; box-sizing: border-box; resize: vertical;"
                placeholder="اكتب وصفاً تفصيلياً للدورة التدريبية...">{{ old('description') }}</textarea>
            @error('description') <span style="color: #E8502F; font-size: 12px;">{{ $message }}</span> @enderror
        </div>

        {{-- Is Mandatory --}}
        <div style="margin-bottom: 28px;">
            <label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
                <input type="checkbox" name="is_mandatory" value="1" {{ old('is_mandatory') ? 'checked' : '' }}
                    style="width: 18px; height: 18px; accent-color: #E8502F;">
                <span style="font-size: 14px; font-weight: 600; color: #1B2A4A;">دورة إلزامية</span>
            </label>
        </div>

        {{-- Actions --}}
        <div style="display: flex; gap: 12px; justify-content: flex-start;">
            <button type="submit" style="background: #E8502F; color: white; padding: 12px 32px; border: none; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer;">
                <i class="fas fa-save"></i> حفظ الدورة
            </button>
            <a href="{{ route('training-management.my-training') }}" style="background: #F3F4F6; color: #374151; padding: 12px 32px; border-radius: 10px; text-decoration: none; font-size: 14px; font-weight: 600;">
                إلغاء
            </a>
        </div>
    </form>
</div>
@endsection