@include('htmlpage.frontent.layout.app')
<main class="main">
    {{-- <section class="section-box-2">
        <div class="container">
            <div class="banner-hero banner-single banner-single-bg">
                <div class="block-banner text-center">
                    <h3 class="wow animate__animated animate__fadeInUp"><span class="color-brand-2"> Join a team where innovation thrives, </span>
                        ideas matter, and your career journey takes center stage. </h3>
                </div>
            </div>
        </div>
    </section> --}}
        <section class="section-box">
        <div class="breacrumb-cover">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <h2 class="mb-10">Career</h2>
                        <p class="font-lg color-text-paragraph-2">Join a team where innovation thrives, </span>
                        ideas matter, and your career journey takes center stage.</p>
                    </div>
                    <div class="col-lg-6 text-end">
                        <ul class="breadcrumbs mt-40">
                            <li><a class="home-icon" href="/">Home</a></li>
                            <li>Career</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="section-box mt-30">
        <div class="container">
            <div class="row flex-row-reverse">
                <div class="col-lg-12 col-md-12 col-sm-12 col-12 float-right">
                    <div class="content-page">
                        <div class="box-filters-job">
                            <div class="row">
                                <div class="col-xl-6 col-lg-5">
                                    <span class="text-small text-showing">
                                        Showing
                                        <strong>{{ $jobs->firstItem() }}-{{ $jobs->lastItem() }}</strong>
                                        of
                                        <strong>{{ $totalJobs }}</strong>
                                        jobs
                                    </span>
                                </div>

                               
                            </div>
                        </div>
                   <div class="row g-4">
    @foreach ($jobs as $job)
    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
        <div class="job-card hover-up wow fadeInUp" data-wow-delay="0.1s">
            <!-- Optional Featured Badge -->
            @if($job->is_featured)
            <span class="job-badge">Featured</span>
            @endif

            <!-- Job Info -->
            <div class="job-card-body">
                <h5 class="job-title">
                    <a href="{{ route('career-details', ['url' => urlencode(str_replace(' ', '-', strtolower($job->url)))]) }}">
                        {{ $job->post }}
                    </a>
                </h5>

                <div class="job-meta mb-2">
                    <span class="job-date"><i class="fa-regular fa-calendar"></i> {{ \Carbon\Carbon::parse($job->created_at)->format('d M Y') }}</span>
                    <span class="job-type ms-3"><i class="fa-regular fa-briefcase"></i> {{ $job->job_type }}</span>
                </div>

                <p class="job-desc">
                    {!! Str::limit($job->content, 150) !!}
                </p>
            </div>

            <!-- Apply Button -->
            <div class="job-card-footer">
                <a class="btn btn-apply-now" href="{{ route('career-details', ['url' => urlencode(str_replace(' ', '-', strtolower($job->url)))]) }}">
                    Apply Now
                </a>
            </div>
        </div>
    </div>
    @endforeach
</div>

                    </div>

                    <!-- Pagination -->
                    <div class="paginations mt-4">
                        <ul class="pager justify-content-center">
                            {{-- Previous Page Link --}}
                            @if ($jobs->onFirstPage())
                            <li class="disabled"><span class="pager-prev"></span></li>
                            @else
                            <li><a class="pager-prev" href="{{ $jobs->previousPageUrl() }}"></a></li>
                            @endif

                            {{-- Page Numbers --}}
                            @foreach ($jobs->getUrlRange(1, $jobs->lastPage()) as $page => $url)
                            <li>
                                <a class="pager-number {{ $page == $jobs->currentPage() ? 'active' : '' }}" href="{{ $url }}">
                                    {{ $page }}
                                </a>
                            </li>
                            @endforeach

                            {{-- Next Page Link --}}
                            @if ($jobs->hasMorePages())
                            <li><a class="pager-next" href="{{ $jobs->nextPageUrl() }}"></a></li>
                            @else
                            <li class="disabled"><span class="pager-next"></span></li>
                            @endif
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <section class="section-box mt-50 mb-20">
        <div class="container">
            <div class="box-newsletter">
                <div class="row">
                    <div class="col-xl-3 col-12 text-center d-none d-xl-block"><img
                            src=" {{ asset('img/newsletter-left.png') }}" alt="Zillion"></div>
                    <div class="col-lg-12 col-xl-6 col-12">
                        <h2 class="text-md-newsletter text-center">New Things Will Always<br> Update Regularly</h2>
                        <div class="box-form-newsletter mt-40">
                            <form class="form-newsletter">
    <input class="input-newsletter" type="email" placeholder="Enter your email here" required>

    <button type="submit" class="btn btn-default icon-send-letter" aria-label="Subscribe">
        <!-- Send Icon SVG -->
        <svg width="30" height="30" viewBox="0 0 24 24" fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path d="M22 2L11 13" stroke="currentColor" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round" />
            <path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="currentColor"
                stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
    </button>
</form>
                        </div>
                    </div>
                    <div class="col-xl-3 col-12 text-center d-none d-xl-block"><img
                            src=" {{ asset('img/newsletter-right.png') }}" alt="Zillion"></div>
                </div>
            </div>
        </div>
    </section>
</main>
@include('htmlpage.frontent.layout.footer')