@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.paths') }}" style="color: #6B7280; text-decoration: none; font-size: 14px;">
            <i class="fas fa-arrow-right"></i> العودة للمسارات
        </a>
    </div>

    {{-- Form --}}
    <form action="{{ route('training-management.paths.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;">
            {{-- Name --}}
            <div style="grid-column: 1 / -1;">
                <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="name" value="{{ old('name') }}" 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('name') <span style="color: #E8502F; font-size: 12px;">{{ $message }}</span> @enderror
            </div>

            {{-- Description --}}
            <div style="grid-column: 1 / -1;">
                <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="3" 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>

            {{-- Target Roles --}}
            <div style="grid-column: 1 / -1;">
                <label style="display: block; font-size: 13px; font-weight: 600; color: #1B2A4A; margin-bottom: 6px;">الأدوار المستهدفة</label>
                <input type="text" name="target_roles" value="{{ old('target_roles') }}"
                    style="width: 100%; padding: 10px 14px; border: 1px solid #D1D5DB; border-radius: 10px; font-size: 14px; outline: none; box-sizing: border-box;"
                    placeholder="مثال: مدراء الأقسام، رؤساء الفرق (افصل بين الأدوار بفاصلة)">
                @error('target_roles') <span style="color: #E8502F; font-size: 12px;">{{ $message }}</span> @enderror
            </div>
        </div>

        {{-- Courses Selection --}}
        <div style="margin-bottom: 28px;">
            <label style="display: block; font-size: 15px; font-weight: 700; color: #1B2A4A; margin-bottom: 12px;">
                <i class="fas fa-list-ol" style="color: #E8502F;"></i> الدورات المضمنة (بالترتيب)
            </label>
            <p style="font-size: 13px; color: #6B7280; margin-bottom: 16px;">اختر الدورات وحدد ترتيبها في المسار التدريبي</p>

            <div id="coursesContainer">
                @foreach(old('courses', ['']) as $index => $courseId)
                <div class="course-row" style="display: flex; gap: 12px; align-items: center; margin-bottom: 10px;">
                    <span style="background: #1B2A4A; color: white; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0;">{{ $index + 1 }}</span>
                    <select name="courses[]"
                        style="flex: 1; padding: 10px 14px; border: 1px solid #D1D5DB; border-radius: 10px; font-size: 14px; background: white;">
                        <option value="">اختر دورة</option>
                        @foreach($courses ?? [] as $course)
                            <option value="{{ $course->id }}" {{ $courseId == $course->id ? 'selected' : '' }}>{{ $course->title }}</option>
                        @endforeach
                    </select>
                    <button type="button" onclick="this.closest('.course-row').remove(); reorderCourses();"
                        style="background: #FEE2E2; color: #991B1B; border: none; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; font-size: 14px; flex-shrink: 0;">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                @endforeach
            </div>

            <button type="button" onclick="addCourseRow()"
                style="background: #EEF2FF; color: #1B2A4A; border: 1px dashed #1B2A4A; padding: 10px 20px; border-radius: 10px; font-size: 13px; cursor: pointer; font-weight: 600; margin-top: 4px;">
                <i class="fas fa-plus"></i> إضافة دورة
            </button>
        </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.paths') }}" style="background: #F3F4F6; color: #374151; padding: 12px 32px; border-radius: 10px; text-decoration: none; font-size: 14px; font-weight: 600;">
                إلغاء
            </a>
        </div>
    </form>
</div>

<script>
function addCourseRow() {
    const container = document.getElementById('coursesContainer');
    const count = container.querySelectorAll('.course-row').length + 1;
    const row = document.createElement('div');
    row.className = 'course-row';
    row.style.cssText = 'display: flex; gap: 12px; align-items: center; margin-bottom: 10px;';
    row.innerHTML = `
        <span style="background: #1B2A4A; color: white; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0;">${count}</span>
        <select name="courses[]" style="flex: 1; padding: 10px 14px; border: 1px solid #D1D5DB; border-radius: 10px; font-size: 14px; background: white;">
            <option value="">اختر دورة</option>
            @foreach($courses ?? [] as $course)
                <option value="{{ $course->id }}">{{ $course->title }}</option>
            @endforeach
        </select>
        <button type="button" onclick="this.closest('.course-row').remove(); reorderCourses();"
            style="background: #FEE2E2; color: #991B1B; border: none; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; font-size: 14px; flex-shrink: 0;">
            <i class="fas fa-times"></i>
        </button>
    `;
    container.appendChild(row);
}

function reorderCourses() {
    const rows = document.querySelectorAll('#coursesContainer .course-row');
    rows.forEach((row, index) => {
        row.querySelector('span').textContent = index + 1;
    });
}
</script>
@endsection