@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>

        <!-- Progress Bar -->

        <!-- Form Sections -->
        <div class="bg-white border border-gray-100 rounded-2xl">
            <form action="{{ route('employer.jobs.store') }}" method="POST" id="job-form">
                @csrf

                <!-- Section 1: تعريف الوظيفة -->
                <div class="border-b border-gray-100 p-8">
                    <div class="flex items-center gap-3 mb-6">
                        <div class="w-8 h-8 bg-blue-50 rounded-lg flex items-center justify-center">
                            <span class="text-sm font-black text-[#1e3a8a]">1</span>
                        </div>
                        <h2 class="text-xl font-black text-gray-900">تعريف الوظيفة</h2>
                    </div>

                    <div class="space-y-6">
                        <!-- Job Title -->
                        <div class="input-field">
                            <label for="title" class="block text-xs font-black text-gray-400 mb-2">عنوان الوظيفة</label>
                            <input type="text" id="title" name="title" value="{{ old('title') }}"
                                   class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#1e3a8a] focus:ring-0 transition-colors"
                                   placeholder="مثال: مطور واجهات أمامية" required>
                            @error('title')
                            <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Category -->
                        <div class="input-field">
                            <label for="category_id" class="block text-xs font-black text-gray-400 mb-2">الفئة</label>
                            <select id="category_id" name="category_id"
                                    class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#1e3a8a] focus:ring-0 transition-colors" required>
                                <option value="">اختر الفئة</option>
                                @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                                @endforeach
                            </select>
                            @error('category_id')
                            <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Employment Type -->
                        <div class="input-field">
                            <label for="employment_type" class="block text-xs font-black text-gray-400 mb-2">نوع التوظيف</label>
                            <select id="employment_type" name="employment_type"
                                    class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#1e3a8a] focus:ring-0 transition-colors" required>
                                <option value="">اختر نوع التوظيف</option>
                                <option value="full_time" {{ old('employment_type') == 'full_time' ? 'selected' : '' }}>دوام كامل</option>
                                <option value="part_time" {{ old('employment_type') == 'part_time' ? 'selected' : '' }}>دوام جزئي</option>
                                <option value="contract" {{ old('employment_type') == 'contract' ? 'selected' : '' }}>عقد</option>
                                <option value="freelance" {{ old('employment_type') == 'freelance' ? 'selected' : '' }}>عمل حر</option>
                            </select>
                            @error('employment_type')
                            <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Section 2: تفاصيل الدور -->
                <div class="border-b border-gray-100 p-8">
                    <div class="flex items-center gap-3 mb-6">
                        <div class="w-8 h-8 bg-blue-50 rounded-lg flex items-center justify-center">
                            <span class="text-sm font-black text-[#1e3a8a]">2</span>
                        </div>
                        <h2 class="text-xl font-black text-gray-900">تفاصيل الدور</h2>
                    </div>

                    <div class="space-y-6">
                        <!-- Description -->
                        <div class="input-field">
                            <label for="description" class="block text-xs font-black text-gray-400 mb-2">وصف الوظيفة</label>
                            <textarea id="description" name="description" rows="8"
                                      class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#1e3a8a] focus:ring-0 transition-colors resize-none"
                                      placeholder="اكتب وصفاً تفصيلياً للوظيفة والمهام المطلوبة" required>{{ old('description') }}</textarea>
                            @error('description')
                            <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Requirements -->
                        <div class="input-field">
                            <label for="requirements" class="block text-xs font-black text-gray-400 mb-2">المتطلبات</label>
                            <textarea id="requirements" name="requirements" rows="6"
                                      class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#1e3a8a] focus:ring-0 transition-colors resize-none"
                                      placeholder="اذكر المتطلبات الأساسية للوظيفة" required>{{ old('requirements') }}</textarea>
                            @error('requirements')
                            <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Section 3: الموقع والمميزات -->
                <div class="p-8">
                    <div class="flex items-center gap-3 mb-6">
                        <div class="w-8 h-8 bg-blue-50 rounded-lg flex items-center justify-center">
                            <span class="text-sm font-black text-[#1e3a8a]">3</span>
                        </div>
                        <h2 class="text-xl font-black text-gray-900">الموقع والمميزات</h2>
                    </div>

                    <div class="space-y-6">
                        <!-- Location -->
                        <div class="input-field">
                            <label for="location" class="block text-xs font-black text-gray-400 mb-2">الموقع</label>
                            <input type="text" id="location" name="location" value="{{ old('location') }}"
                                   class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#1e3a8a] focus:ring-0 transition-colors"
                                   placeholder="مثال: الرياض، المملكة العربية السعودية" required>
                            @error('location')
                            <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- Salary Min -->
                            <div class="input-field">
                                <label for="salary_min" class="block text-xs font-black text-gray-400 mb-2">الراتب الأدنى (اختياري)</label>
                                <input type="number" id="salary_min" name="salary_min" value="{{ old('salary_min') }}"
                                       class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#1e3a8a] focus:ring-0 transition-colors"
                                       placeholder="0">
                                @error('salary_min')
                                <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Salary Max -->
                            <div class="input-field">
                                <label for="salary_max" class="block text-xs font-black text-gray-400 mb-2">الراتب الأعلى (اختياري)</label>
                                <input type="number" id="salary_max" name="salary_max" value="{{ old('salary_max') }}"
                                       class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#1e3a8a] focus:ring-0 transition-colors"
                                       placeholder="0">
                                @error('salary_max')
                                <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Submit Button -->
                <div class="border-t border-gray-100 p-8">
                    <div class="flex items-center justify-end gap-4">
                        <a href="{{ route('employer.jobs.index') }}" class="px-6 py-3 rounded-lg font-bold text-gray-600 hover:bg-gray-100 transition-colors">
                            إلغاء
                        </a>
                        <button type="submit" class="bg-[#1e3a8a] text-white px-8 py-3 rounded-lg font-bold hover:bg-blue-800 transition-colors">
                            نشر الوظيفة
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('job-form');
    const progressBar = document.getElementById('progress-bar');
    const progressText = document.getElementById('progress-text');

    if (form && progressBar && progressText) {
        const inputs = form.querySelectorAll('input[required], textarea[required], select[required]');
        const totalFields = inputs.length;

        function updateProgress() {
            let filledFields = 0;
            inputs.forEach(input => {
                if (input.value.trim() !== '') {
                    filledFields++;
                }
            });

            const progress = Math.round((filledFields / totalFields) * 100);
            progressBar.style.width = progress + '%';
            progressText.textContent = progress + '%';
        }

        inputs.forEach(input => {
            input.addEventListener('input', updateProgress);
            input.addEventListener('change', updateProgress);
        });

        updateProgress();
    }
});
</script>
@endsection