@extends('layouts.app')

@section('title', 'طلب تدريب مخصص - منصة ابدأ')

@section('content')
<div class="min-h-screen bg-white">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <!-- Header Section -->
        <div class="flex items-center justify-between mb-8">
            <div>
                <h1 class="text-2xl font-black text-[#1e3a8a] mb-2">طلب تدريب مخصص</h1>
                <p class="text-gray-600">املأ البيانات التالية لطلب تدريب مخصص لشركتك</p>
            </div>
            <a href="{{ route('employer.dashboard') }}" class="inline-flex items-center gap-2 text-gray-600 hover:text-[#1e3a8a] transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                </svg>
                <span class="font-medium">عودة</span>
            </a>
        </div>

        <!-- Form Card -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
            <form action="{{ route('employer.training-requests.store') }}" method="POST">
                @csrf

                <!-- Title -->
                <div class="mb-6">
                    <label for="title" class="block text-sm font-bold text-gray-700 mb-2">عنوان التدريب المطلوب</label>
                    <input type="text" 
                           id="title" 
                           name="title" 
                           value="{{ old('title') }}"
                           class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-[#1e3a8a] focus:ring-2 focus:ring-blue-100 transition-colors bg-white"
                           placeholder="مثال: تدريب فريق المبيعات على مهارات التواصل"
                           required>
                    @error('title')
                        <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Description -->
                <div class="mb-6">
                    <label for="description" class="block text-sm font-bold text-gray-700 mb-2">وصف المهارات المطلوبة</label>
                    <textarea id="description" 
                              name="description" 
                              rows="6"
                              class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-[#1e3a8a] focus:ring-2 focus:ring-blue-100 transition-colors bg-white resize-none"
                              placeholder="اشرح بالتفصيل المهارات التي تود تدريب فريقك عليها..."
                              required>{{ old('description') }}</textarea>
                    @error('description')
                        <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Trainees Count -->
                <div class="mb-6">
                    <label for="trainees_count" class="block text-sm font-bold text-gray-700 mb-2">عدد الموظفين المطلوب تدريبهم</label>
                    <input type="number" 
                           id="trainees_count" 
                           name="trainees_count" 
                           value="{{ old('trainees_count', 1) }}"
                           min="1" 
                           max="100"
                           class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-[#1e3a8a] focus:ring-2 focus:ring-blue-100 transition-colors bg-white"
                           required>
                    @error('trainees_count')
                        <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Submit Button -->
                <div class="flex items-center gap-4">
                    <button type="submit" 
                            class="flex-1 bg-[#1e3a8a] text-white px-8 py-3 rounded-xl font-bold hover:bg-blue-800 transition-colors">
                        إرسال الطلب
                    </button>
                    <a href="{{ route('employer.dashboard') }}" 
                       class="px-8 py-3 rounded-xl font-bold text-gray-600 hover:bg-gray-100 transition-colors">
                        إلغاء
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection