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

    {{-- Form --}}
    <form action="{{ route('job-postings.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>

            {{-- Department --}}
            <div>
                <label style="display: block; font-size: 13px; font-weight: 600; color: #1B2A4A; margin-bottom: 6px;">القسم <span style="color: #E8502F;">*</span></label>
                <select name="department_id" 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>
                    @foreach($departments ?? [] as $dept)
                        <option value="{{ $dept->id }}" {{ old('department_id') == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
                    @endforeach
                </select>
                @error('department_id') <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;">الموقع <span style="color: #E8502F;">*</span></label>
                <input type="text" name="location" value="{{ old('location') }}" 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('location') <span style="color: #E8502F; font-size: 12px;">{{ $message }}</span> @enderror
            </div>

            {{-- Employment Type --}}
            <div>
                <label style="display: block; font-size: 13px; font-weight: 600; color: #1B2A4A; margin-bottom: 6px;">نوع التوظيف <span style="color: #E8502F;">*</span></label>
                <select name="employment_type" 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="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="remote" {{ old('employment_type') == 'remote' ? 'selected' : '' }}>عمل عن بُعد</option>
                </select>
                @error('employment_type') <span style="color: #E8502F; font-size: 12px;">{{ $message }}</span> @enderror
            </div>

            {{-- Salary Range --}}
            <div>
                <label style="display: block; font-size: 13px; font-weight: 600; color: #1B2A4A; margin-bottom: 6px;">نطاق الراتب</label>
                <input type="text" name="salary_range" value="{{ old('salary_range') }}"
                    style="width: 100%; padding: 10px 14px; border: 1px solid #D1D5DB; border-radius: 10px; font-size: 14px; outline: none; box-sizing: border-box;"
                    placeholder="مثال: 8,000 - 12,000 ر.س">
                @error('salary_range') <span style="color: #E8502F; font-size: 12px;">{{ $message }}</span> @enderror
            </div>

            {{-- Deadline --}}
            <div>
                <label style="display: block; font-size: 13px; font-weight: 600; color: #1B2A4A; margin-bottom: 6px;">آخر موعد للتقديم</label>
                <input type="date" name="deadline" value="{{ old('deadline') }}"
                    style="width: 100%; padding: 10px 14px; border: 1px solid #D1D5DB; border-radius: 10px; font-size: 14px; outline: none; box-sizing: border-box;">
                @error('deadline') <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="5" 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>

        {{-- Requirements --}}
        <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="requirements" 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('requirements') }}</textarea>
            @error('requirements') <span style="color: #E8502F; font-size: 12px;">{{ $message }}</span> @enderror
        </div>

        {{-- Benefits --}}
        <div style="margin-bottom: 28px;">
            <label style="display: block; font-size: 13px; font-weight: 600; color: #1B2A4A; margin-bottom: 6px;">المزايا</label>
            <textarea name="benefits" rows="3"
                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('benefits') }}</textarea>
            @error('benefits') <span style="color: #E8502F; font-size: 12px;">{{ $message }}</span> @enderror
        </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('job-postings.index') }}" 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