@extends('layouts.master')

@section('title', $data['pageTitle'])

@push('custom-css')
<style>
    .job-card { border: 2px solid #e0e0e0; border-radius: 16px; overflow: hidden; }
    .job-card .post-item-body { padding: 24px; }
</style>
@endpush

@section('content')
    <!--begin::Content-->

    <div class="main-container">
        <section class="banner-container ">
            <div class="banner-title ">
                <div style="line-height: 1.1;">
                    <span style="background-color: #86A34D;font-weight: bold; margin-bottom: 8px;font-size: 64px;">{!! $page->title !!}</span>
                </div>
            </div>
            <div style="height: 400px;" class="banner-image">
                <img src="{{ Voyager::image($page->image) }}" decoding="async" loading="lazy" alt="" style="width: 100%; height: 100%; object-fit: cover; object-position: center;" rel="preload" as="image">
            </div>
        </section>

        <section class="container-fluid" style="background-color: #F0F9DC;padding-top: 50px">
            <div class="row">
                <div class="col-md-10 m-auto ">
                    <div class="row align-items-stretch">
                        <div class="col-md-12 d-flex flex-column justify-content-center text-center">
                            <div style="color: #BA744A;font-size: 34px;text-align: center;font-weight: bold;">{!! $page->title !!}</div>

                        </div>
                        <!-- Rigt column with text + image -->
                        <div class="col-md-12 d-flex">
                            <div class="mt-3">
                                <div style="color:#FF5757;line-height: 1.3;" class="mb-3">
                                    <div style="font-size: 20px;color: #232323 ;text-align: center;">{!! $page->body !!}</div>
                                </div>
                            </div>
                        </div>
                        <!-- Right column with long text -->
                    </div>
                </div>
            </div>
        </section>

        <!-- Carrers displaying with custom job module managed via admin -->
        <!-- Careers Listing Start -->
        <div class="page-blog mt-5 mb-5">
            <div class="container">

                <!-- Search / Filter Start -->
                <div class="row">
                    <div class="col-lg-12">
                        <form method="GET" action="{{ route('careers') }}" class="career-search-form wow fadeInUp mb-5">
                            <div class="row">
                                <div class="form-group col-lg-4 col-md-6 mb-3">
                                    <input type="text" name="keyword" class="form-control" placeholder="Search by title or keyword"
                                           value="{{ request('keyword') }}">
                                </div>

                                <div class="form-group col-lg-2 col-md-6 mb-3">
                                    <select name="job_type" class="form-control">
                                        <option value="">All Job Types</option>
                                        @foreach($filters['types'] as $value => $label)
                                            <option value="{{ $value }}" @selected(request('job_type') === $value)>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group col-lg-2 col-md-6 mb-3">
                                    <select name="city" class="form-control">
                                        <option value="">All Cities</option>
                                        @foreach($filters['cities'] as $value => $label)
                                            <option value="{{ $value }}" @selected(request('city') === $value)>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group col-lg-2 col-md-6 mb-3">
                                    <select name="state" class="form-control">
                                        <option value="">All States</option>
                                        @foreach($filters['states'] as $value => $label)
                                            <option value="{{ $value }}" @selected(request('state') === $value)>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group col-lg-2 col-md-6 mb-3">
                                    <select name="country" class="form-control">
                                        <option value="">All Countries</option>
                                        @foreach($filters['countries'] as $value => $label)
                                            <option value="{{ $value }}" @selected(request('country') === $value)>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-lg-12 d-flex gap-2">
                                    <button type="submit" class="btn-default">Search Jobs</button>
                                    @if(request()->hasAny(['keyword', 'job_type', 'city', 'state', 'country']))
                                        <a href="{{ route('careers') }}" class="btn btn-default btn-highlighted">Reset</a>
                                    @endif
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- Search / Filter End -->

                <!-- Jobs Grid Start -->
                <div class="row careers-jobs-row">
                    @forelse($jobs as $job)
                        <div class="col-xl-4 col-md-6">
                            <!-- Post Item Start -->
                            <div class="post-item job-card wow fadeInUp">
                                <div class="post-item-body">
                                    <div class="post-item-content">
                                        <div class="post-item-tags mb-2">
                                            <a href="{{ route('careers.show', $job->slug) }}">{{ $job->job_type }}</a>
                                        </div>

                                        <h2>
                                            <a href="{{ route('careers.show', $job->slug) }}">{{ $job->title }}</a>
                                        </h2>

                                        <ul class="job-meta list-unstyled mt-3">
                                            @if($job->location)
                                                <li><i class="fa-solid fa-location-dot"></i> {{ $job->location }}</li>
                                            @endif
                                            @if($job->salary_range)
                                                <li><i class="fa-solid fa-indian-rupee-sign"></i> {{ $job->salary_range }}</li>
                                            @endif
                                            @if($job->date_posted)
                                                <li><i class="fa-regular fa-calendar"></i> Posted {{ $job->date_posted->format('d M Y') }}</li>
                                            @endif
                                        </ul>

                                        @if($job->description)
                                            <p class="mt-3">{{ \Illuminate\Support\Str::limit(strip_tags($job->description), 120) }}</p>
                                        @endif
                                    </div>

                                    <div class="post-item-btn mt-3">
                                        <a href="{{ route('careers.show', $job->slug) }}" class="subscribe">View Details</a>
                                    </div>
                                </div>
                            </div>
                            <!-- Post Item End -->
                        </div>
                    @empty
                        <div class="col-lg-12">
                            <div class="section-title text-center">
                                <h2 class="wow fadeInUp">No current openings</h2>
                                <p class="wow fadeInUp">There are no positions matching your search right now. Please check back soon.</p>
                            </div>
                        </div>
                    @endforelse

                    @if($jobs->hasPages())
                        <div class="col-lg-12">
                            <!-- Page Pagination Start -->
                            <div class="page-pagination wow fadeInUp" data-wow-delay="0.4s">
                                {{ $jobs->links('vendor.pagination.default') }}
                            </div>
                            <!-- Page Pagination End -->
                        </div>
                    @endif
                </div>
                <!-- Jobs Grid End -->

            </div>
        </div>
        <!-- Careers Listing End -->

    </div>
    <!--end::Content-->
@endsection