@extends('front.layouts.app')

@section('title', 'إضافة إعلان مبوب | MedExchange')

@section('styles')
    <link rel="stylesheet" href="{{ asset('css/jobs.css') }}">
@endsection

@section('content')
<div class="jobs-page" style="background: #f0f2f5;">
    <div class="container">
        <div class="job-form-box">
            <header class="form-header">
                <h2>أضف إعلانك المبوب</h2>
                <p>املأ البيانات التالية بدقة ليتم مراجعة إعلانك ونشره في أقرب وقت</p>
            </header>

            <form action="{{ route('jobs.store') }}" method="POST" class="job-form">
                @csrf
                
                <div class="form-group mb-4">
                    <label class="job-label">عنوان الإعلان</label>
                    <input type="text" name="title" placeholder="مثال: مطلوب صيدلي فترة مسائية لصيدلية كبرى" class="job-input" required>
                </div>

                <div class="input-row">
                    <div class="form-group">
                        <label class="job-label">المحافظة</label>
                        <select name="governorate" class="job-input" required>
                            <option value="">اختار المحافظة</option>
                            @foreach($governorates as $gov)
                                <option value="{{ $gov }}">{{ $gov }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="job-label">نوع الإعلان</label>
                        <select name="type" class="job-input" required>
                            <option value="hiring">أقوم بالتوظيف (صيدلية / منشأة)</option>
                            <option value="searching">أبحث عن عمل (صيدلي)</option>
                        </select>
                    </div>
                </div>

                <div class="form-group mb-4">
                    <label class="job-label">رقم التواصل (هاتف أو واتساب)</label>
                    <input type="tel" name="phone" value="{{ auth()->user()->phone }}" placeholder="01xxxxxxxxx" class="job-input" required>
                    <p style="font-size: 0.8rem; color: var(--text-lighter); margin-top: 5px;">سيتم عرض هذا الرقم للباحثين عن الوظيفة للتواصل معك مباشرة</p>
                </div>

                <div class="form-group mb-4">
                    <label class="job-label">تفاصيل الإعلان</label>
                    <textarea name="description" rows="8" placeholder="اكتب تفاصيل الوظيفة، ساعات العمل، الراتب المتوقع، أو مهاراتك الشخصية إذا كنت تبحث عن عمل..." class="job-input" style="resize: none;" required></textarea>
                </div>

                <div class="form-footer">
                    <button type="submit" class="btn-submit-job">
                        <i class="fas fa-paper-plane"></i>
                        <span>إرسال الإعلان للمراجعة</span>
                    </button>
                    <div class="warning-note" style="margin-top: 20px; padding: 15px; background: #fff5f5; border-radius: var(--border-radius-md); color: #c53030; font-size: 0.85rem; border: 1px solid #feb2b2;">
                        <i class="fas fa-info-circle"></i>
                        سيتم نشر إعلاناتكم بعد مراجعتها من قبل الإدارة للتأكد من مطابقتها لمعايير المنصة.
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection