@extends('layouts.app')

@section('title', __('Jobs'))

@section('content')
<h1 class="text-2xl font-bold mb-6">الوظائف المتاحة</h1>

<form method="GET" action="{{ route('jobs.index') }}" class="bg-white border rounded-lg p-4 mb-6 grid md:grid-cols-4 gap-3">
    <input type="text" name="search" value="{{ request('search') }}" placeholder="ابحث عن وظيفة..." class="border rounded px-3 py-2">

    <select name="country_id" class="border rounded px-3 py-2">
        <option value="">كل الدول</option>
        @foreach($countries as $country)
            <option value="{{ $country->id }}" @selected(request('country_id') == $country->id)>
                {{ app()->getLocale() === 'ar' ? $country->name_ar : $country->name_en }}
            </option>
        @endforeach
    </select>

    <select name="specialty_id" class="border rounded px-3 py-2">
        <option value="">كل التخصصات</option>
        @foreach($specialties as $specialty)
            <option value="{{ $specialty->id }}" @selected(request('specialty_id') == $specialty->id)>
                {{ app()->getLocale() === 'ar' ? $specialty->name_ar : $specialty->name_en }}
            </option>
        @endforeach
    </select>

    <button class="bg-blue-600 text-white rounded px-4 py-2">بحث</button>
</form>

<div class="grid md:grid-cols-2 gap-4">
    @forelse($jobs as $job)
        <article class="bg-white border rounded-lg p-4">
            <h2 class="font-semibold text-lg mb-1">{{ app()->getLocale() === 'ar' ? $job->title_ar : $job->title_en }}</h2>
            <p class="text-sm text-slate-500 mb-2">
                {{ app()->getLocale() === 'ar' ? $job->country->name_ar : $job->country->name_en }} -
                {{ app()->getLocale() === 'ar' ? $job->specialty->name_ar : $job->specialty->name_en }}
            </p>
            <p class="text-sm text-slate-700 mb-3">
                {{ \Illuminate\Support\Str::limit(app()->getLocale() === 'ar' ? $job->description_ar : $job->description_en, 140) }}
            </p>
            <a href="{{ route('jobs.show', $job) }}" class="text-blue-600 font-medium text-sm">عرض التفاصيل</a>
        </article>
    @empty
        <p class="text-slate-600">لا توجد وظائف مطابقة.</p>
    @endforelse
</div>

<div class="mt-6">
    {{ $jobs->links() }}
</div>
@endsection