@extends('front.layouts.app')

@section('title', 'إعلانات الوظائف الطبية | MedExchange')

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

@section('content')
<div class="jobs-page">
    <div class="container">
        <!-- Header -->
        <header class="jobs-header">
            <div class="jobs-title-box">
                <h1>إعلانات الوظائف</h1>
                <p>الملتقى الأكبر للصيادلة والمنشآت الطبية للبحث عن أفضل الكوادر والفرص</p>
            </div>
            <div class="jobs-actions">
                <a href="{{ route('jobs.create') }}" class="btn-filter" style="background: var(--primary-color);">
                    <i class="fas fa-plus-circle"></i>
                    <span>أضف إعلانك المبوب</span>
                </a>
            </div>
        </header>

        <!-- Filters -->
        <section class="jobs-filters">
            <form action="{{ route('jobs.index') }}" method="GET" class="filter-form">
                <div class="filter-group">
                    <label>المحافظة</label>
                    <select name="governorate" class="filter-input">
                        <option value="">كل المحافظات</option>
                        @foreach($governorates as $gov)
                            <option value="{{ $gov }}" {{ request('governorate') == $gov ? 'selected' : '' }}>{{ $gov }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="filter-group">
                    <label>نوع الإعلان</label>
                    <select name="type" class="filter-input">
                        <option value="">الكل</option>
                        <option value="hiring" {{ request('type') == 'hiring' ? 'selected' : '' }}>صيدلية تطلب صيادلة</option>
                        <option value="searching" {{ request('type') == 'searching' ? 'selected' : '' }}>صيدلي يبحث عن عمل</option>
                    </select>
                </div>
                <div class="filter-group">
                    <button type="submit" class="btn-filter">
                        <i class="fas fa-search"></i>
                        <span>تصفية النتائج</span>
                    </button>
                </div>
            </form>
        </section>

        <!-- Jobs Grid -->
        <div class="jobs-grid">
            @forelse($ads as $ad)
            <article class="job-card">
                <div class="job-type-badge {{ $ad->type == 'hiring' ? 'type-hiring' : 'type-searching' }}">
                    {{ $ad->type == 'hiring' ? 'توظيف' : 'بحث عن عمل' }}
                </div>
                
                <div class="job-date">{{ $ad->created_at->diffForHumans() }}</div>
                
                <h3 class="job-title">{{ $ad->title }}</h3>
                
                <div class="job-location">
                    <i class="fas fa-map-marker-alt"></i>
                    <span>{{ $ad->governorate }}</span>
                </div>
                
                <p class="job-description">
                    {{ $ad->description }}
                </p>
                
                <div class="job-footer">
                    <div class="job-user">
                        <div class="user-avatar text-center pt-2">
                             <i class="fas fa-user"></i>
                        </div>
                        <div class="user-info">
                            <div class="user-name">{{ $ad->user->name }}</div>
                            <div style="font-size: 0.75rem; color: var(--text-lighter)">{{ $ad->type == 'hiring' ? 'صيدلية / منشأة' : 'صيدلي متخصص' }}</div>
                        </div>
                    </div>
                    
                    <div class="job-contact-btns">
                        <a href="tel:{{ $ad->phone }}" class="btn-contact btn-phone">
                            <i class="fas fa-phone-alt"></i>
                            <span>اتصل الآن</span>
                        </a>
                        @if($ad->phone)
                        <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $ad->phone) }}" target="_blank" class="btn-contact btn-whatsapp">
                            <i class="fab fa-whatsapp"></i>
                        </a>
                        @endif
                    </div>
                </div>
            </article>
            @empty
            <div class="empty-jobs">
                <i class="fas fa-briefcase"></i>
                <h2>لا توجد إعلانات متاحة حالياً</h2>
                <p>جرب تغيير فلاتر البحث أو أضف إعلانك الخاص ليكون الأول في منطقتك</p>
            </div>
            @endforelse
        </div>

        <div class="pagination-container" style="margin-top: 50px;">
            {{ $ads->links() }}
        </div>
    </div>
</div>
@endsection