@extends('layouts.app')

@section('content')
{{-- Search band --}}
<section class="search-band">
    <div class="mx-auto max-w-[1400px] px-4 py-5 sm:px-6 lg:px-8">
        <h1 class="mb-4 text-lg font-bold text-white sm:text-xl">{{ __('Search Jobs in Sri Lanka') }}</h1>
        <form action="{{ route('jobs.index') }}" method="GET" class="flex flex-col gap-3 lg:flex-row lg:items-stretch">
            <input type="text" name="keyword" placeholder="{{ __('Job title, keyword or company...') }}"
                class="input-field flex-1 lg:min-w-0" value="{{ request('keyword') }}">
            <select name="category" class="input-field lg:w-52">
                <option value="">{{ __('All Categories') }}</option>
                @foreach($categories as $cat)
                    <option value="{{ $cat->slug }}">{{ $cat->name }} ({{ $cat->jobs_count }})</option>
                @endforeach
            </select>
            <select name="district" class="input-field lg:w-44">
                <option value="">{{ __('All Locations') }}</option>
                @foreach($districts as $district)
                    <option value="{{ $district->slug }}">{{ $district->name }}</option>
                @endforeach
            </select>
            <button type="submit" class="btn-primary shrink-0 !bg-white !text-brand-portal-blue hover:!bg-gray-100 lg:px-8">{{ __('Search') }}</button>
        </form>
    </div>
</section>

{{-- Hot jobs ticker --}}
<section class="stats-ticker">
    <div class="mx-auto max-w-[1400px] px-4 py-2.5 text-center sm:px-6 lg:px-8">
        <strong>{{ __('Hot Jobs') }}:</strong>
        <span class="font-semibold text-red-700">{{ number_format($stats['jobs']) }}</span> {{ __('active vacancies') }}
        <span class="mx-2 text-amber-400">|</span>
        <span class="font-semibold">{{ number_format($stats['companies']) }}</span> {{ __('employers') }}
        <span class="mx-2 text-amber-400">|</span>
        <a href="{{ route('jobs.index') }}" class="font-semibold text-brand-portal-blue hover:underline">({{ __('Recent 100 Jobs') }})</a>
    </div>
</section>

{{-- Main portal layout --}}
<div class="mx-auto max-w-[1400px] px-4 py-5 sm:px-6 lg:px-8">
    <div class="portal-layout">

        {{-- Categories sidebar --}}
        <aside class="w-full shrink-0 lg:w-56">
            <div class="category-sidebar sticky top-[8.5rem]">
                <div class="category-sidebar-header">
                    <h2 class="text-xs font-bold uppercase tracking-wider">{{ __('Job Categories') }}</h2>
                    <a href="{{ route('jobs.index') }}" class="text-[11px] text-brand-blue hover:text-white">{{ __('All') }}</a>
                </div>
                <nav class="category-sidebar-list" aria-label="{{ __('Job categories') }}">
                    @foreach($categories as $category)
                        <a href="{{ route('categories.show', $category->slug) }}"
                           class="category-sidebar-item {{ $category->jobs_count > 0 ? '' : 'opacity-40' }}">
                            <span class="truncate leading-snug">{{ $category->name }}</span>
                            @if($category->jobs_count > 0)
                                <span class="category-count">{{ $category->jobs_count }}</span>
                            @endif
                        </a>
                    @endforeach
                </nav>
            </div>
        </aside>

        {{-- Job listings --}}
        <div class="portal-main">

            @if($featuredJobs->count())
                <section class="job-panel">
                    <div class="job-panel-header">
                        <h2 class="job-panel-title">★ {{ __('Featured & Hot Jobs') }}</h2>
                        <span class="text-xs text-gray-500">{{ $featuredJobs->count() }} {{ __('jobs') }}</span>
                    </div>
                    <div class="job-table-head">
                        <span>{{ __('Vacancy') }} / {{ __('Employer') }}</span>
                        <span>{{ __('Category') }}</span>
                        <span>{{ __('Location') }}</span>
                        <span>{{ __('Posted') }}</span>
                    </div>
                    <div class="job-list">
                        @foreach($featuredJobs as $job)
                            @include('public.jobs.partials.row', ['job' => $job, 'featured' => true])
                        @endforeach
                    </div>
                </section>
            @endif

            <section class="job-panel">
                <div class="job-panel-header">
                    <h2 class="job-panel-title">{{ __('Latest Vacancies') }}</h2>
                    <a href="{{ route('jobs.index') }}" class="text-xs font-semibold text-brand-portal-blue hover:underline">{{ __('View All') }} &rarr;</a>
                </div>
                <div class="job-table-head">
                    <span>{{ __('Vacancy') }} / {{ __('Employer') }}</span>
                    <span>{{ __('Category') }}</span>
                    <span>{{ __('Location') }}</span>
                    <span>{{ __('Posted') }}</span>
                </div>

                @if($recentJobs->count())
                    <div class="job-list">
                        @foreach($recentJobs as $job)
                            @include('public.jobs.partials.row', ['job' => $job])
                        @endforeach
                    </div>
                    <div class="border-t border-gray-200 bg-gray-50 px-4 py-3 text-center">
                        <a href="{{ route('jobs.index') }}" class="text-sm font-semibold text-brand-portal-blue hover:underline">{{ __('Browse all :count jobs', ['count' => number_format($stats['jobs'])]) }} &rarr;</a>
                    </div>
                @else
                    <div class="px-6 py-14 text-center">
                        <p class="font-medium text-gray-700">{{ __('No jobs posted yet') }}</p>
                        @guest
                            <a href="{{ route('register') }}" class="btn-primary mt-4 inline-flex">{{ __('Register as Employer') }}</a>
                        @endguest
                    </div>
                @endif
            </section>

            {{-- Mobile / tablet ads --}}
            <div class="xl:hidden">
                @include('layouts.partials.ads-sidebar')
            </div>
        </div>

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

{{-- Top employers --}}
@if($featuredEmployers->count())
<section class="employer-strip">
    <div class="mx-auto max-w-[1400px] px-4 sm:px-6 lg:px-8">
        <h2 class="mb-5 text-center text-sm font-bold uppercase tracking-widest text-gray-500">{{ __('Top Employers') }}</h2>
        <div class="flex flex-wrap items-center justify-center gap-4">
            @foreach($featuredEmployers as $employer)
                <a href="{{ route('companies.show', $employer->slug) }}" class="employer-logo-box group" title="{{ $employer->name }}">
                    @if($employer->logo)
                        <img src="{{ asset('storage/'.$employer->logo) }}" alt="{{ $employer->name }}"
                            class="max-h-12 w-full object-contain" loading="lazy">
                    @else
                        <span class="text-center text-xs font-bold text-brand-navy group-hover:text-brand-portal-blue">{{ $employer->name }}</span>
                    @endif
                </a>
            @endforeach
        </div>
    </div>
</section>
@endif
@endsection