@extends('frontend.layouts.app')

@section('title', $title)
@section('description', $description)

@section('content')
    @php
        $assetPath = fn (string $path) => asset('frontend/' . ltrim($path, '/'));
    @endphp

    @include('frontend.layouts.breadcrumb', ['title' => $pageVacanciesTitle ?? 'Careers'])

    <section class="blog-list-section space bg-light">
        <div class="container">
            @if(!empty($pageVacanciesIntro))
                <div class="row mb-40">
                    <div class="col-lg-12 text-center">
                        <div class="title-wrap three">
                            <p class="mb-0">{{ $pageVacanciesIntro }}</p>
                        </div>
                    </div>
                </div>
            @endif

            <div class="contact-form vacancies-filter-card mb-40">
                <div class="title-wrap three mb-30">
                    <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>Open roles</div>
                    <h2 class="sec-title mb-10">Refine your search</h2>
                    <p class="mb-0">Filter by department, employment type, or location to find the right opening.</p>
                </div>
                <form method="GET" class="contact_form vacancies-filter-form">
                    <div class="form-grid">
                        <div class="form-group">
                            <span class="icon"><i class="fa-solid fa-building"></i></span>
                            <select name="department" id="department" aria-label="Department">
                                <option value="">All departments</option>
                                @foreach($departments as $department)
                                    <option value="{{ $department->slug }}" {{ request('department') == $department->slug ? 'selected' : '' }}>
                                        {{ $department->name }} ({{ $department->vacancies_count }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <span class="icon"><i class="fa-solid fa-briefcase"></i></span>
                            <select name="type" id="type" aria-label="Employment type">
                                <option value="">All employment types</option>
                                @foreach($employmentTypes as $type)
                                    <option value="{{ $type }}" {{ request('type') == $type ? 'selected' : '' }}>
                                        {{ ucfirst($type) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <span class="icon"><i class="fa-sharp fa-regular fa-location-dot"></i></span>
                            <input type="text" name="location" id="location" value="{{ request('location') }}" placeholder="City or region" autocomplete="address-level2">
                        </div>
                    </div>
                    <div class="vacancies-filter-actions mt-10">
                        <button type="submit" class="theme-btn br-30">
                            <span class="link-effect"><span class="effect-1"><i class="fa-solid fa-filter"></i> Apply filters</span><span class="effect-1"><i class="fa-solid fa-filter"></i> Apply filters</span></span>
                        </button>
                        @if(request()->hasAny(['department', 'type', 'location']))
                            <a href="{{ route('frontend.vacancies.index') }}" class="theme-btn style2 br-30 bg-white text-dark">
                                <span class="link-effect"><span class="effect-1">Clear filters</span><span class="effect-1">Clear filters</span></span>
                            </a>
                        @endif
                        <span class="vacancies-filter-count text-muted small">{{ $vacancies->total() }} {{ Str::plural('opening', $vacancies->total()) }}</span>
                    </div>
                </form>
            </div>

            <div class="row gy-30 flex-column-reverse flex-lg-row">
                <div class="col-xl-8 col-lg-8">
                    <div class="blog-list-left">
                        @forelse($vacancies as $vacancy)
                            <div class="blog-list-card">
                                <div class="card-content">
                                    <span class="category">{{ strtoupper($vacancy->employment_type ?? 'ROLE') }}</span>
                                    <h3 class="title"><a href="{{ route('frontend.vacancies.show', $vacancy->slug) }}">{{ $vacancy->title }}</a></h3>
                                    <div class="author-info flex-wrap">
                                        @if($vacancy->department)
                                            <div class="author"><span class="name"><i class="fa-solid fa-building"></i> {{ $vacancy->department->name }}</span></div>
                                        @endif
                                        @if($vacancy->location)
                                            <span class="date"><i class="fa-solid fa-location-dot"></i> {{ $vacancy->location }}</span>
                                        @endif
                                        @if($vacancy->is_featured)
                                            <span class="date text-theme fw-semibold"><i class="fa-solid fa-star"></i> Featured</span>
                                        @endif
                                    </div>
                                    <div class="pt-20 pb-25"><div class="border dark"></div></div>
                                    @if($vacancy->description)
                                        <p class="description">{{ Str::limit(strip_tags($vacancy->description), 220) }}</p>
                                    @endif
                                    @if($vacancy->requirements)
                                        <p class="small text-muted mb-20">{{ Str::limit(strip_tags($vacancy->requirements), 120) }}</p>
                                    @endif
                                    <div class="d-flex flex-wrap gap-3 align-items-center mt-10">
                                        <span class="small text-muted"><i class="icon-calender"></i> Posted {{ $vacancy->created_at->diffForHumans() }}</span>
                                        <div class="ms-auto d-flex flex-wrap gap-2">
                                            <a href="{{ route('frontend.vacancies.show', $vacancy->slug) }}" class="continue-reading">Details</a>
                                            <a href="{{ route('frontend.vacancies.apply', $vacancy->slug) }}" class="theme-btn style2 br-30">
                                                <span class="link-effect"><span class="effect-1">Apply</span><span class="effect-1">Apply</span></span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="cms-inotek-empty text-center">
                                <h3>No openings match</h3>
                                <p>
                                    @if(request()->hasAny(['department', 'type', 'location']))
                                        Try clearing filters or checking another department.
                                    @else
                                        There are no open roles right now—please check back soon.
                                    @endif
                                </p>
                                @if(request()->hasAny(['department', 'type', 'location']))
                                    <a href="{{ route('frontend.vacancies.index') }}" class="theme-btn br-30 mt-20">Clear filters</a>
                                @endif
                            </div>
                        @endforelse
                        @if($vacancies->count())
                            <ul class="pagination-menu">
                                <li>{{ $vacancies->withQueryString()->links() }}</li>
                            </ul>
                        @endif
                    </div>
                </div>

                <div class="col-xl-4 col-lg-4">
                    <div class="sidebar-widget blog-sidebar pl-15 lg-pl-0">
                        @if($featuredVacancies->count())
                            <div class="sidebar-latest-posts">
                                <h4 class="sidebar-title">Featured roles</h4>
                                <div class="widget-box">
                                    <div class="latest-posts">
                                        @foreach($featuredVacancies as $fv)
                                            <div class="post">
                                                <a href="{{ route('frontend.vacancies.show', $fv->slug) }}">
                                                    <img class="cms-theme-footer-post-thumb" width="88" height="84" src="{{ $assetPath('images/blog/latest-details01.webp') }}" alt="">
                                                </a>
                                                <div class="post-content">
                                                    <a href="{{ route('frontend.vacancies.show', $fv->slug) }}">{{ Str::limit($fv->title, 48) }}</a>
                                                    <p>{{ $fv->location ? Str::limit($fv->location, 24) : ucfirst($fv->employment_type ?? '') }}</p>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endif

                        @if($departments->count())
                            <div class="sidebar-category-list">
                                <h4 class="sidebar-title">Departments</h4>
                                <div class="widget-box">
                                    <ul class="categories">
                                        @foreach($departments as $department)
                                            <li>
                                                <a href="{{ route('frontend.vacancies.index', ['department' => $department->slug]) }}">
                                                    {{ $department->name }} <span>({{ $department->vacancies_count }})</span>
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="tv-skill-section space-bottom">
        <div class="tv-skill-inner bg-light2 space-top position-relative overflow-hidden br-30 mx-30 ml-mx-0">
            <div class="container">
                <div class="row gy-30">
                    <div class="col-lg-6 position-relative">
                        <div class="skill-left-box">
                            <div class="skill-thumb">
                                <img class="br-30 cms-img-cover" src="{{ $assetPath('images/cta/cta-img.webp') }}" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="skill-content-wrap">
                            <div class="title-wrap">
                                <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>Careers</div>
                                <h2 class="sec-title">{{ $ctaCareersTitle ?? 'Talk to us about your next role' }}</h2>
                                <p>{{ $ctaCareersBody ?? '' }}</p>
                            </div>
                            <a href="{{ route('frontend.contact') }}" class="theme-btn br-30">{{ $ctaCareersButtonLabel ?? 'Contact us' }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @include('frontend.partials.newsletter')
@endsection