@extends('jobs.layout')

@section('title', 'Find jobs')
@section('meta_description', 'Search current job openings from verified employers across Kenya.')

@section('content')
<main class="jobs-page preview-container">
    <section class="jobs-page-heading">
        <div>
            <span class="preview-overline">Verified opportunities across Kenya</span>
            <h1>Find work that moves you forward.</h1>
            <p>Search jobs by title, category, location, or work arrangement.</p>
        </div>
        <div class="jobs-heading-count"><strong>{{ number_format($jobs->total()) }}</strong><span>{{ $jobs->total() === 1 ? 'open opportunity' : 'open opportunities' }}</span></div>
    </section>

    @if ($errors->any())<div class="jobs-alert" role="alert">{{ $errors->first() }}</div>@endif

    <form class="jobs-filter-form" method="GET" action="{{ route('jobs.index') }}">
        <label class="jobs-filter-field jobs-filter-keyword"><span>Keyword</span><input type="search" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Job title, skill, or company"></label>
        <label class="jobs-filter-field"><span>Category</span><select name="category_id"><option value="">All categories</option>@foreach ($categories as $category)<option value="{{ $category->id }}" @selected(($filters['category_id'] ?? '') == $category->id)>{{ $category->name }}</option>@endforeach</select></label>
        <label class="jobs-filter-field"><span>Town</span><select name="town"><option value="">Any town</option>@foreach ($cities as $city)<option value="{{ $city->name }}" @selected(($filters['town'] ?? '') === $city->name)>{{ $city->name }}</option>@endforeach</select></label>
        <label class="jobs-filter-field"><span>County</span><select name="county_id"><option value="">All counties</option>@foreach ($counties as $county)<option value="{{ $county->id }}" @selected(($filters['county_id'] ?? '') == $county->id)>{{ $county->name }}</option>@endforeach</select></label>
        <label class="jobs-filter-field"><span>Schedule</span><select name="employment_type"><option value="">Any schedule</option><option value="full_time" @selected(($filters['employment_type'] ?? '') === 'full_time')>Full-time</option><option value="part_time" @selected(($filters['employment_type'] ?? '') === 'part_time')>Part-time</option><option value="contract" @selected(($filters['employment_type'] ?? '') === 'contract')>Contract</option><option value="temporary" @selected(($filters['employment_type'] ?? '') === 'temporary')>Temporary</option><option value="internship" @selected(($filters['employment_type'] ?? '') === 'internship')>Internship</option></select></label>
        <label class="jobs-filter-field"><span>Work arrangement</span><select name="work_mode"><option value="">Any arrangement</option><option value="onsite" @selected(($filters['work_mode'] ?? '') === 'onsite')>On-site</option><option value="hybrid" @selected(($filters['work_mode'] ?? '') === 'hybrid')>Hybrid</option><option value="remote" @selected(($filters['work_mode'] ?? '') === 'remote')>Remote</option></select></label>
        <button class="jobs-filter-submit" type="submit">Search jobs <span aria-hidden="true">→</span></button>
    </form>

    <div class="jobs-results-heading">
        <div><span class="preview-overline">Matching roles</span><h2>{{ number_format($jobs->total()) }} {{ $jobs->total() === 1 ? 'opportunity' : 'opportunities' }} found</h2></div>
        @if (request()->query())<a class="jobs-clear-filter" href="{{ route('jobs.index') }}">Clear filters</a>@endif
    </div>

    @if ($jobs->isEmpty())
        <div class="jobs-empty">
            <span aria-hidden="true">⌕</span>
            <h2>No matching jobs yet</h2>
            <p>Try a different keyword or adjust your filters. New verified opportunities are added as employers publish them.</p>
            <a class="jobs-outline-button" href="{{ route('jobs.index') }}">Browse all jobs</a>
        </div>
    @else
        <section class="jobs-results-grid" aria-label="Job listings">
            @foreach ($jobs as $job)
                <a class="jobs-result-card" href="{{ route('jobs.show', $job) }}">
                    <img class="jobs-result-image" src="{{ $job->cover_image_path ? route('content.image', ['type' => 'job', 'record' => $job->id]) : asset('images/job-listing-default.png') }}" alt="" loading="lazy">
                    <div class="jobs-result-company">{{ $job->employer->company_name }}</div>
                    <h3>{{ $job->title }}</h3>
                    <div class="jobs-result-meta"><span>⌖ {{ collect([$job->town, $job->county?->name])->filter()->join(', ') ?: 'Flexible location' }}</span><span>{{ str($job->employment_type)->replace('_', ' ')->title() }}</span></div>
                    <div class="jobs-result-tags">@if ($job->category)<span>{{ $job->category->name }}</span>@endif<span>{{ str($job->work_mode)->replace('_', ' ')->title() }}</span></div>
                    <div class="jobs-result-bottom">
                        @if ($job->salary_min || $job->salary_max)<strong>{{ $job->salary_currency }} {{ $job->salary_min ? number_format((float) $job->salary_min) : '—' }} – {{ $job->salary_max ? number_format((float) $job->salary_max) : '—' }}</strong>@else<span>View job details</span>@endif
                        <span aria-hidden="true">→</span>
                    </div>
                </a>
            @endforeach
        </section>
        <div class="jobs-pagination">{{ $jobs->links() }}</div>
    @endif
</main>
@endsection