@extends('layouts.app')
@section('title', 'Browse Jobs')

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">

        {{-- Sidebar: Filters --}}
        <aside class="md:col-span-1">
            <form method="GET" class="bg-white rounded-lg shadow p-5 space-y-4 sticky top-4">
                <h3 class="font-bold text-lg">Filters</h3>

                <div>
                    <label class="text-sm font-semibold">Keyword</label>
                    <input name="keyword" value="{{ request('keyword') }}"
                           class="w-full border rounded px-3 py-2 mt-1">
                </div>

                <div>
                    <label class="text-sm font-semibold">Location</label>
                    <input name="location" value="{{ request('location') }}"
                           class="w-full border rounded px-3 py-2 mt-1">
                </div>

                <div>
                    <label class="text-sm font-semibold">Category</label>
                    <select name="category" class="w-full border rounded px-3 py-2 mt-1">
                        <option value="">All</option>
                        @foreach($categories as $cat)
                            <option value="{{ $cat->id }}" @selected(request('category') == $cat->id)>
                                {{ $cat->name }} ({{ $cat->jobs_count }})
                            </option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="text-sm font-semibold">Job Type</label>
                    <select name="job_type" class="w-full border rounded px-3 py-2 mt-1">
                        <option value="">All</option>
                        <option value="full_time" @selected(request('job_type') == 'full_time')>Full Time</option>
                        <option value="part_time" @selected(request('job_type') == 'part_time')>Part Time</option>
                        <option value="contract" @selected(request('job_type') == 'contract')>Contract</option>
                        <option value="internship" @selected(request('job_type') == 'internship')>Internship</option>
                    </select>
                </div>

                <div>
                    <label class="text-sm font-semibold">Min Salary</label>
                    <input type="number" name="min_salary" value="{{ request('min_salary') }}"
                           class="w-full border rounded px-3 py-2 mt-1">
                </div>

                <div>
                    <label class="text-sm font-semibold">Experience (years)</label>
                    <input type="number" name="experience" value="{{ request('experience') }}"
                           class="w-full border rounded px-3 py-2 mt-1">
                </div>

                <button class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700">
                    Apply Filters
                </button>

                <a href="{{ route('jobs.index') }}" class="block text-center text-sm text-gray-500 hover:underline">
                    Reset
                </a>
            </form>
        </aside>

        {{-- Main: Job list --}}
        <div class="md:col-span-3">
            <div class="flex justify-between items-center mb-4">
                <h1 class="text-2xl font-bold">Jobs</h1>
                <p class="text-sm text-gray-500">{{ $jobs->total() }} jobs found</p>
            </div>

            @forelse($jobs as $job)
                @include('jobs._card', ['job' => $job])
            @empty
                <div class="bg-white rounded-lg shadow p-8 text-center text-gray-500">
                    কোনো জব পাওয়া যায়নি।
                </div>
            @endforelse

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