@extends('layouts.app')

@section('content')
<section class="search-band">
    <div class="mx-auto max-w-[1400px] px-4 py-4 sm:px-6 lg:px-8">
        <h1 class="text-lg font-bold text-white">{{ __('Jobs in Sri Lanka') }}</h1>
        <p class="mt-1 text-sm text-blue-100" x-text="`${total} {{ __('jobs found') }}`">{{ $jobs->total() }} {{ __('jobs found') }}</p>
    </div>
</section>

<div class="mx-auto max-w-[1400px] px-4 py-5 sm:px-6 lg:px-8" x-data="jobFilter()">
    <div class="portal-layout">
        <aside class="w-full shrink-0 lg:w-52">
            <form @submit.prevent="filterJobs" class="card sticky top-24 space-y-3">
                <h2 class="text-sm font-bold uppercase tracking-wide text-brand-navy">{{ __('Filters') }}</h2>

                <div>
                    <label class="label" for="f-keyword">{{ __('Keyword') }}</label>
                    <input type="text" id="f-keyword" x-model="filters.keyword" class="input-field !py-2">
                </div>

                <div>
                    <label class="label" for="f-category">{{ __('Category') }}</label>
                    <input type="text" id="f-category" x-model="filters.category" class="input-field !py-2" placeholder="{{ __('Category slug') }}">
                </div>

                <div>
                    <label class="label" for="f-job-type">{{ __('Job Type') }}</label>
                    <select id="f-job-type" x-model="filters.job_type" class="input-field !py-2">
                        <option value="">{{ __('All') }}</option>
                        @foreach(\App\Enums\JobType::cases() as $type)
                            <option value="{{ $type->value }}">{{ $type->label() }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="label" for="f-experience">{{ __('Experience') }}</label>
                    <select id="f-experience" x-model="filters.experience_level" class="input-field !py-2">
                        <option value="">{{ __('All') }}</option>
                        @foreach(\App\Enums\ExperienceLevel::cases() as $level)
                            <option value="{{ $level->value }}">{{ $level->label() }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="label" for="f-sort">{{ __('Sort By') }}</label>
                    <select id="f-sort" x-model="filters.sort" class="input-field !py-2">
                        <option value="latest">{{ __('Latest') }}</option>
                        <option value="oldest">{{ __('Oldest') }}</option>
                        <option value="most_viewed">{{ __('Most Viewed') }}</option>
                    </select>
                </div>

                <button type="submit" class="btn-primary w-full !py-2" :disabled="loading">
                    <span x-show="!loading">{{ __('Apply Filters') }}</span>
                    <span x-show="loading">{{ __('Loading...') }}</span>
                </button>
            </form>
        </aside>

        <div class="portal-main">
            <div class="job-panel">
                <div class="job-table-head">
                    <span>{{ __('Vacancy') }} / {{ __('Employer') }}</span>
                    <span>{{ __('Category') }}</span>
                    <span>{{ __('Location') }}</span>
                    <span>{{ __('Posted') }}</span>
                </div>
                <div id="job-results" class="job-list">
                    @include('public.jobs.partials.list', ['jobs' => $jobs])
                </div>
            </div>
            @if($jobs->hasPages())
                <div class="mt-4">{{ $jobs->links() }}</div>
            @endif
        </div>

        <div class="hidden xl:block">
            @include('layouts.partials.ads-sidebar')
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function jobFilter() {
    return {
        filters: @json($filters),
        total: {{ $jobs->total() }},
        loading: false,
        async filterJobs() {
            this.loading = true;
            const params = new URLSearchParams(this.filters);
            const response = await fetch(`{{ route('jobs.index') }}?${params}`, {
                headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
            });
            const data = await response.json();
            document.getElementById('job-results').innerHTML = data.html;
            this.total = data.total;
            this.loading = false;
            history.replaceState(null, '', `?${params}`);
        }
    }
}
</script>
@endpush