@extends('frontend.layouts.main')

@section('content')

<main class="home bg-light-grey">

    <section class="bs-banner set-bg job-listing-banner" data-img="assets/images/job-listing/job-listing.jpg">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                @if(Session::has('success'))
                    <div class="bs-modal congratulation-modal">
                        <div class="modal fade" id="congratulationModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                            aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">

                                        <span class="icon icon-Close-circle" data-bs-dismiss="modal" aria-label="Close"></span>
                                    </div>
                                    <div class="modal-body">
                                        <div class="congrats-img">
                                            <img src="assets/images/congrats-img.svg" alt="congrats" class="img-fluid">
                                        </div>
                                        <h2 class="congrats">Congratulation</h2>
                                        <h5 class="congratsPara typ-img-flexCenter">
                                        {{ Session::get('success') }}
                                        </h5>


                                    
                                    </div>
                                    <div class="modal-footer">
                                        <div class="img-areacongrats">
                                            <img class="vector-1 " src="assets/images/congrats1.svg" alt="vector">
                                            <img class="vector-2" src="assets/images/congrats2.svg" alt="vector">
                                            <img class="vector-3" src="assets/images/congrats3.svg" alt="vector">
                                            <img class="vector-4" src="assets/images/congrats4.svg" alt="vector">
                                            <img class="vector-5" src="assets/images/congrats5.svg" alt="vector">
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                    <div class="content-wrapper paddingmanage-job">
                        <h2 class="title max-800 wow fadeInUp" data-wow-duration="0.2s">Search your dream job Today.
                        </h2>
                        <p class="para mrgB32 wow fadeInUp" data-wow-duration="0.4s">Discover diverse roles that suit
                            your
                            ambition. </p>
                        <div class=" mod-search wow fadeInUp" data-wow-duration="0.7s">
                            <div class="input-group position-relative">
                                <span class="input-group-text searchIcon"><span class="icon icon-search"></span></span>
                                <input type="text" class="form-control" value="" id="titleSearch"
                                    placeholder="What position are you looking for ?">
                                <input type="hidden" id="listval" value="">
                                <div class="set-search" id="set-search">
                                    <ul class="close-search" id="list">
                                    </ul>
                                </div>
                            </div>
                            <!-- <div id="titleList"></div> -->
                            <div class="pipe"></div>

                            <div class="select-area">
                                    <select class="form-select custom-select" aria-label="Default select example" name="exprience">
                                        <option selected>Select Exprience</option>
                                        <option value="fresher">Fresher</option>
                                        <option value="1">1 year</option>
                                        <option value="2">2 year</option>
                                        <option value="3">3 year</option>
                                        <option value="4">4 year</option>
                                        <option value="5">5 year</option>
                                        <option value="6">6 year</option>
                                        <option value="7">7 year</option>
                                        <option value="8">8 year</option>
                                        <option value="9">9 year</option>
                                        <option value="10">10 year</option>
                                        <option value="11">11 year</option>
                                        <option value="12">12 year</option>
                                        <option value="13">13 year</option>
                                        <option value="14">14 year</option>
                                        <option value="15">15+ year</option>

                                    </select>
                                </div>

                            <div class="pipe"></div>  



                            <div class="input-group position-relative">
                                <input type="text" class="form-control" value="" id="locationSearch"
                                    placeholder="Enter Location">
                                <input type="hidden" id="listvallocation" value="">
                                <div class="set-search1" id="set-search1">
                                    <ul class="close-search" id="list1">
                                    </ul>
                                </div>
                                <button class="input-group-text location" onclick="searchFilter()">
                                    <span class="text"><span class="name">Search </span>
                                        <!-- <span class="icon icon-map-icon"></span> -->
                                </button>
                            </div>
                        
                        </div>
                        <div class="inputfielderrorMsg wow fadeInUp" id="errmsg" data-wow-duration="0.8s"></div>
                    </div>
                </div>
            </div>
        </div>

    </section>
    <!-- <section class="bs-filter-area">
    <div class="container">
        <div class="row"> 
            <div class="col-lg-3">
                <div class="job-value">
                    <h2 class="numbers"><span class="count">150</span> Jobs</h2>
                </div>
            </div>
            <div class="col-lg-9">
                <div class="filter-sort">
                    <div class="filter-area">
                        <div class="icon-area">
                            <span class="icon icon-filter"></span>
                        </div>
                        <div class="name">
                            Filter
                        </div>
                        <div class="flter-tabs">
                            <div class="btn-section">
                                <div class="filter-btn">
                                    Design <span class="icon icon-close1"></span>
                                </div>
                                <div class="filter-btn">
                                    Design <span class="icon icon-close1"></span>
                                </div>
                                <div class="filter-btn">
                                    Design <span class="icon icon-close1"></span>
                                </div>                                       
                            </div>
                            <a href="#" class="clearall">Clear All</a>
                        </div>
                    </div>
                    <div class="sort-area">
                        <select class="form-select custom-select" aria-label="Default select example">
                            <option selected>Sort By: Relevency</option>
                            <option value="relevance">Relevance</option>
                            <option value="date">Date</option>
                          </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section> -->
    <section class="lyt-section typ-filter-area">
        <div class="container">
            <div class="row">
                <div class="col-md-12 d-md-block d-lg-none overflow-hidden position-btn-sticky">
                    <div class="bs-mobile-filter">
                        <div class="mobile-btn-wrapper">
                            <div class="mobile-filter">
                                <div class="filter-img" data-bs-toggle="modal" data-bs-target="#filterApplied">
                                    <img src="assets/images/use-svg/filter.svg" alt="filter">
                                    <span class="filter-dot"></span>
                                </div>
                                <div class="btn-section">
                                    <div class="btn-filter typ-12Medium" data-bs-toggle="modal"
                                        data-bs-target="#exampleModal" data-label="Department">
                                        Departments</div>
                                    <div class="btn-filter typ-12Medium" data-bs-toggle="modal"
                                        data-bs-target="#exampleModal" data-label="Employment">Employment Type
                                    </div>
                                    <div class="btn-filter typ-12Medium" data-bs-toggle="modal"
                                        data-bs-target="#exampleModal" data-label="Locations">
                                        Locations</div>
                                    <div class="btn-filter typ-12Medium" data-bs-toggle="modal"
                                        data-bs-target="#exampleModal" data-label="Industry">Industry
                                    </div>
                                    <div class="btn-filter typ-12Medium" data-bs-toggle="modal"
                                        data-bs-target="#exampleModal" data-label="Qualification">Qualification</div>
                                    <div class="btn-filter typ-12Medium" data-bs-toggle="modal"
                                        data-bs-target="#exampleModal" data-label="Qualification">Qualification</div>
                                    <div class="BottomFilters_placeholder__1sCvR">&nbsp;</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 d-none d-lg-block wow fadeInUp" data-wow-duration="0.4s">
                    <div class="bs-filter">
                        <div id="sidebar" class="sidebar">
                            <ul class="sidebar-nav" id="sidebar-nav">
                                <li class="nav-item" id="appliedDiv">
                                    <div class="all-filter">
                                        <span class="filterText">All Filters</span>
                                        <a class="applied" data-bs-toggle="modal"
                                            data-bs-target="#filterApplied">Applied <span class="count"
                                                id="fliterCountNumber"></span></a>
                                    </div>
                                </li><!-- End Forms Nav -->

                                <li class="nav-item">
                                    <a class="nav-link" data-bs-target="#industry-nav" data-bs-toggle="collapse"
                                        href="#" aria-expanded="false">
                                        <span>Industry</span><i class="icon icon-arrow "></i>
                                    </a>
                                    <div id="industry-nav" class="nav-content collapse show"
                                        data-bs-parent="#sidebar-nav">
                                        <ul class="scrollElement">
                                            @foreach($industries->take(6) as $industry)
                                            <li>
                                                <div class="form-check mod-checkbox typ-modal">
                                                    <input class="form-check-input" type="checkbox" name="industry"
                                                        value="{{$industry->id}}" id="industry{{$industry->id}}"
                                                        placeholder="{{$industry->industry_name}}"
                                                        onclick="filter(event)">
                                                    <label class="form-check-label" for="industry{{$industry->id}}">
                                                        {{$industry->industry_name}}
                                                    </label>
                                                </div>
                                            </li>
                                            @endforeach
                                        </ul>
                                        @if(count($industries) > 6)
                                        <div class="viewMore">
                                            <a class="viewLink" data-bs-toggle="modal" data-bs-target="#industryModal"
                                                href="#">View More</a>
                                        </div>
                                        @endif
                                    </div>


                                </li><!-- End Forms Nav -->

                                <li class="nav-item">
                                    <a class="nav-link" data-bs-target="#forms-nav" data-bs-toggle="collapse" href="#"
                                        aria-expanded="false">
                                        <span>Departments</span><i class="icon icon-arrow "></i>
                                    </a>
                                    <div id="forms-nav" class="nav-content collapse show"
                                        data-bs-parent="#sidebar-nav-old">
                                        <ul class="scrollElement">
                                            @foreach($departments->take(6) as $department)
                                            <li>
                                                <div class="form-check mod-checkbox typ-modal">
                                                    <input class="form-check-input" type="checkbox" name="department"
                                                        value="{{$department->id}}" id="department{{$department->id}}"
                                                        placeholder="{{$department->department_name}}"
                                                        onclick="filter(event)">
                                                    <label class="form-check-label" for="department{{$department->id}}">
                                                        {{$department->department_name}}
                                                    </label>
                                                </div>
                                            </li>
                                            @endforeach
                                        </ul>
                                        @if(count($departments) > 6)
                                        <div class="viewMore">
                                            <a class="viewLink" data-bs-toggle="modal" data-bs-target="#departmentModal"
                                                href="#">View More</a>
                                        </div>
                                        @endif
                                    </div>

                                </li><!-- End Forms Nav -->

                                <li class="nav-item">
                                    <a class="nav-link" data-bs-target="#employee-nav" data-bs-toggle="collapse"
                                        href="#" aria-expanded="false">
                                        <span>Employment Type</span><i class="icon icon-arrow "></i>
                                    </a>
                                    <div id="employee-nav" class="nav-content collapse show"
                                        data-bs-parent="#sidebar-nav">
                                        <ul class="scrollElement">
                                            @foreach($employmentTypes->take(6) as $employmentType)
                                            <li>
                                                <div class="form-check mod-checkbox typ-modal">
                                                    <input class="form-check-input" type="checkbox"
                                                        name="employmentType" value="{{$employmentType->id}}"
                                                        id="employmentType{{$employmentType->id}}"
                                                        placeholder="{{$employmentType->name}}" onclick="filter(event)">
                                                    <label class="form-check-label"
                                                        for="employmentType{{$employmentType->id}}">
                                                        {{$employmentType->name}}
                                                    </label>
                                                </div>
                                            </li>
                                            @endforeach

                                        </ul>
                                        @if(count($employmentTypes) > 6)
                                        <div class="viewMore">
                                            <a class="viewLink" data-bs-toggle="modal"
                                                data-bs-target="#employmentTypeModal" href="#">View More</a>
                                        </div>
                                        @endif

                                    </div>

                                </li>

                                <li class="nav-item">
                                    <a class="nav-link" data-bs-target="#employee-nav" data-bs-toggle="collapse"
                                        href="#" aria-expanded="false">
                                        <span>Company Type</span><i class="icon icon-arrow "></i>
                                    </a>
                                    <div id="employee-nav" class="nav-content collapse show"
                                        data-bs-parent="#sidebar-nav">
                                        <ul class="scrollElement">
                                            @foreach($companyTypes->take(6) as $companyType)
                                            <li>
                                                <div class="form-check mod-checkbox typ-modal">
                                                    <input class="form-check-input" type="checkbox"
                                                        name="companyType" value="{{$companyType->id}}"
                                                        id="companyType{{$companyType->id}}"
                                                        placeholder="{{$companyType->company_type}}" onclick="filter(event)">
                                                    <label class="form-check-label"
                                                        for="companyType{{$companyType->id}}">
                                                        {{$companyType->company_type}}
                                                    </label>
                                                </div>
                                            </li>
                                            @endforeach

                                        </ul>
                                        @if(count($companyTypes) > 6)
                                        <div class="viewMore">
                                            <a class="viewLink" data-bs-toggle="modal"
                                                data-bs-target="#employmentTypeModal" href="#">View More</a>
                                        </div>
                                        @endif

                                    </div>

                                </li>

                                <li class="nav-item">
                                    <a class="nav-link" data-bs-target="#location-nav" data-bs-toggle="collapse"
                                        href="#" aria-expanded="false">
                                        <span>Locations</span><i class="icon icon-arrow "></i>
                                    </a>
                                    <div id="location-nav" class="nav-content collapse show"
                                        data-bs-parent="#sidebar-nav">
                                        <!-- <div class="location-search">
                                            <div class="input-group mb-3">
                                                <span class="input-group-text" id="basic-addon1"><span
                                                        class="icon icon-search"></span></span>
                                                <input type="text" class="form-control" placeholder="Search Location"
                                                    id="locationSearch" aria-label="searchLocation"
                                                    aria-describedby="basic-addon1">
                                                <div id="blogList"></div>
                                            </div>
                                        </div> -->
                                        <ul class="scrollElement">
                                            @foreach($cities->take(6) as $city)
                                            <li>
                                                <div class="form-check mod-checkbox typ-modal">
                                                    <input class="form-check-input" type="checkbox"
                                                        value="{{$city->id}}" name="location" id="city{{$city->id}}"
                                                        placeholder="{{$city->city_name}}" onclick="filter(event)">
                                                    <label class="form-check-label" for="city{{$city->id}}">
                                                        {{$city->city_name}}
                                                    </label>
                                                </div>
                                            </li>
                                            @endforeach

                                        </ul>
                                        @if(count($cities) > 6)
                                        <div class="viewMore">
                                            <a class="viewLink" href="#" type="button" data-bs-toggle="modal"
                                                data-bs-target="#locationModal">View More</a>
                                        </div>
                                        @endif
                                    </div>

                                </li><!-- End Forms Nav -->


                                <li class="nav-item">
                                    <a class="nav-link" data-bs-target="#qualification-nav" data-bs-toggle="collapse"
                                        href="#" aria-expanded="false">
                                        <span>Qualification</span><i class="icon icon-arrow "></i>
                                    </a>
                                    <div id="qualification-nav" class="nav-content collapse show"
                                        data-bs-parent="#sidebar-nav">
                                        <ul class="scrollElement">
                                            @foreach($qualifications->take(6) as $qualification)
                                            <li>
                                                <div class="form-check mod-checkbox typ-modal">
                                                    <input class="form-check-input" type="checkbox"
                                                        value="{{$qualification->id}}" name="qualification"
                                                        id="qualification{{$qualification->id}}"
                                                        placeholder="{{$qualification->name}}" onclick="filter(event)">
                                                    <label class="form-check-label"
                                                        for="qualification{{$qualification->id}}">
                                                        {{$qualification->name}}
                                                    </label>
                                                </div>
                                            </li>
                                            @endforeach

                                        </ul>
                                        @if(count($qualifications) > 6)
                                        <div class="viewMore">
                                            <a class="viewLink" data-bs-toggle="modal"
                                                data-bs-target="#qualificationModal" href="#">View More</a>
                                        </div>
                                        @endif
                                    </div>

                                </li><!-- End Forms Nav -->

                            </ul>
                            </aside>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="job-card-section">
                        <div class="row position-count-stickey">
                            <div class="col-md-12">
                                <div class="job-value wow fadeInUp" data-wow-duration="0.4s">
                                    <h2 class="numbers"><span class="count" id="countDynamic">{{$jobsCount}}</span> Jobs
                                    </h2>
                                    <!-- <div class="sort-area">
                                        <select class="form-select custom-select" id="sortSelect" aria-label="Default select example" onchange="getSelectedValue()">
                                            <option selected>Sort By: Relevency</option>
                                            <option value="relevance">Relevance</option>
                                            <option value="date">Date</option>
                                        </select>
                                    </div> -->
                                </div>

                            </div>
                        </div>
                        <div class="row gap-create-24 wow fadeInUp" data-wow-duration="0.6s" id="job-container">
                            @foreach($jobs as $job)
                            <div class="col-lg-6 col-md-12">
                                <a href="{{ route('job.detail',[$job->slug]) }}" class="bs-card typ-job-list">
                                    <div class="card-body">
                                        <div class="logo-section">
                                            <div class="img-title">
                                                <div class="img-section"><img class="img-fluid" src="{{$job->logo}}"
                                                        alt="logo"> </div>
                                                <div class="title">
                                                    <h3 class="name">{{$job->company_name}}</h3>
                                                    <h2 class="position">{{$job->title}}</h2>
                                                </div>
                                            </div>
                                            <div class="icon-section" onclick="saveJob({{ $job->id }})">
                                            @if($savedJobs->contains('job_id', $job->id) && $savedJobs->contains('user_id', $userID))
                                                    <span class="icon icon-save-fill" id="save-icon-{{ $job->id }}"></span>
                                                @else
                                                    <span class="icon icon-save11" id="save-icon-{{ $job->id }}"></span>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="icon-section">
                                            <ul>
                                                <li>
                                                    <span class="icon-name"><span class="icon icon-map-new"></span>
                                                        {{$job->city_name}}</span>
                                                </li>
                                                <li class="dot-sec">
                                                    <span class="dot"></span>
                                                </li>
                                                <li>
                                                    <span class="icon-name"><img src="assets/images/svg/bag1.svg" alt="bagss">
                                                        {{$job->experience}} Yrs</span>
                                                </li>
                                                <li class="dot-sec">
                                                    <span class="dot"></span>
                                                </li>
                                                <li>
                                                    <span class="icon-name"><span class="icon icon-clock"></span>
                                                        {{$job->employee_types_name}}</span>
                                                </li>
                                                <li class="dot-sec">
                                                    <span class="dot"></span>
                                                </li>
                                                <li>
                                                    <span class="icon-name"><span class="">₹</span>
                                                        {{$job->salary_from}}-{{$job->salary_to}} LPA</span>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="description">
                                            <p>{{ Illuminate\Support\Str::limit(strip_tags($job->description),
                                    $limit = 180, $end = '...') }} ...</p> 
                                        </div>
                                    </div>
                                    <div class="card-footer">
                                        <div class="last-date">
                                            <span class="icon icon-calender1"></span> Last date - {{ date('M d, Y', strtotime($job->end_date)) }}
                                        </div>
                                        @php
                                            $applied = false;
                                        @endphp
                                        @if($applications)
                                        @foreach($applications as $application)
                                            @if($application->job_id == $job->id)
                                                @php
                                                    $applied = true;
                                                @endphp
                                                @break
                                            @endif
                                        @endforeach
                                        @endif
                                        <div class="btn-section">
                                            @if($applied)
                                            <span class="bs-btn typ-appliedgeeen">Applied <span class="icon icon-check-sucess"></span></span>
                                            @else
                                            <span class="bs-btn typ-outline">Apply Now</span>
                                            @endif
                                        </div>
                                    </div>
                                </a>
                            </div>
                            @endforeach
                        </div>
                        <div class="row" id="paginationHide">
                            <div class="col-md-12 ">
                                <nav class="bs-pagination" aria-label="Page navigation example">
                                    <ul class="pagination justify-content-end">
                                        <li class="page-item">{{$jobs->links()}}</li>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                        <!-- <div class="row">
                            <div class="col-md-12 ">
                                <nav class="bs-pagination" aria-label="Page navigation example">
                                    <ul class="pagination justify-content-end">
                                        <li class="page-item">
                                            <a class="page-link prev" href="#" aria-label="Previous">
                                                <span aria-hidden="true"><span class="icon icon-arrow"></span></span>
                                            </a>
                                        </li>
                                        <li class="page-item"><a class="page-link active" href="#">1</a></li>
                                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                                        <li class="page-item">
                                            <a class="page-link next" href="#" aria-label="Next">
                                                <span aria-hidden="true"><span class="icon icon-arrow"></span></span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div> -->

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

</main>


<!-- Modal -->
<div class="bs-modal modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog  modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title fs-5" id="exampleModalLabel">Locations</h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="location-nav" class="nav-content">
                    <div class="location-search">
                        <div class="input-group">
                            <span class="input-group-text" id="basic-addon1"><span
                                    class="icon icon-search"></span></span>
                            <input type="text" class="form-control" placeholder="Search" aria-label="searchLocation"
                                aria-describedby="basic-addon1">
                        </div>
                    </div>
                    <ul class="scrollElement">
                        <li>
                            <div class="form-check mod-checkbox typ-modal">
                                <input class="form-check-input" type="checkbox" value="" id="newYork">
                                <label class="form-check-label" for="newYork">
                                    New York
                                </label>
                            </div>
                        </li>
                        <li>
                            <div class="form-check mod-checkbox typ-modal">
                                <input class="form-check-input" type="checkbox" value="" id="singapore">
                                <label class="form-check-label" for="singapore">
                                    Singapore
                                </label>
                            </div>
                        </li>
                        <li>
                            <div class="form-check mod-checkbox typ-modal">
                                <input class="form-check-input" type="checkbox" value="" id="kualaLumpur">
                                <label class="form-check-label" for="kualaLumpur">
                                    Kuala Lumpur
                                </label>
                            </div>
                        </li>
                        <li>
                            <div class="form-check mod-checkbox typ-modal">
                                <input class="form-check-input" type="checkbox" value="" id="jakarta">
                                <label class="form-check-label" for="jakarta">
                                    Jakarta
                                </label>
                            </div>
                        </li>
                        <li>
                            <div class="form-check mod-checkbox typ-modal">
                                <input class="form-check-input" type="checkbox" value="" id="sydney">
                                <label class="form-check-label" for="sydney">
                                    Sydney
                                </label>
                            </div>
                        </li>
                        <li>
                            <div class="form-check mod-checkbox typ-modal">
                                <input class="form-check-input" type="checkbox" value="" id="mumbai">
                                <label class="form-check-label" for="mumbai">
                                    Mumbai
                                </label>
                            </div>
                        </li>
                        <li>
                            <div class="form-check mod-checkbox typ-modal">
                                <input class="form-check-input" type="checkbox" value="" id="bandung">
                                <label class="form-check-label" for="bandung">
                                    Bandung
                                </label>
                            </div>
                        </li>
                        <li>
                            <div class="form-check mod-checkbox typ-modal">
                                <input class="form-check-input" type="checkbox" value="" id="manchester">
                                <label class="form-check-label" for="manchester">
                                    Manchester
                                </label>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn bs-btn typ-outline" data-bs-dismiss="modal">Clear All</button>
                <button type="button" class="btn bs-btn typ-apply">Apply Changes</button>
            </div>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="bs-modal modal fade" id="industryModal" tabindex="-1" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog  modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title fs-5" id="exampleModalLabel">Locations</h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="location-nav" class="nav-content">
                    <div class="location-search">
                        <div class="input-group">
                            <span class="input-group-text" id="basic-addon1"><span
                                    class="icon icon-search"></span></span>
                            <input type="text" class="form-control" placeholder="Search" id="industrySearch"
                                aria-label="searchLocation" aria-describedby="basic-addon1">
                        </div>
                    </div>
                    <ul class="scrollElement" id="industrytypeSearch">
                        @foreach($industries as $industry)
                        <li>
                            <div class="form-check mod-checkbox typ-modal">
                                <input class="form-check-input" type="checkbox" name="industry"
                                    value="{{$industry->id}}" id="industry{{$industry->id}}"
                                    placeholder="{{$industry->industry_name}}" onclick="filterChange(event)">
                                <label class="form-check-label" for="industry{{$industry->id}}">
                                    {{$industry->industry_name}}
                                </label>
                            </div>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <!-- <button type="button" class="btn bs-btn typ-outline" data-bs-dismiss="modal">Clear All</button> -->
                <button type="button" onclick="filterApply()" class="btn bs-btn typ-apply">Apply Changes</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="bs-modal modal fade" id="departmentModal" tabindex="-1" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog  modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title fs-5" id="exampleModalLabel">Departments</h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="location-nav" class="nav-content">
                    <div class="location-search">
                        <div class="input-group">
                            <span class="input-group-text" id="basic-addon1"><span
                                    class="icon icon-search"></span></span>
                            <input type="text" class="form-control" placeholder="Search" id="departmentSearch"
                                aria-label="searchLocation" aria-describedby="basic-addon1">
                        </div>
                    </div>
                    <ul class="scrollElement" id="departmentSearchappend">
                        @foreach($departments as $department)
                        <li>
                            <div class="form-check mod-checkbox typ-modal">
                                <input class="form-check-input" type="checkbox" name="department"
                                    value="{{$department->id}}" id="department{{$department->id}}"
                                    placeholder="{{$department->department_name}}" onclick="filterChange(event)">
                                <label class="form-check-label" for="department{{$department->id}}">
                                    {{$department->department_name}}
                                </label>
                            </div>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <!-- <button type="button" class="btn bs-btn typ-outline" data-bs-dismiss="modal">Clear All</button> -->
                <button type="button" onclick="filterApply()" class="btn bs-btn typ-apply">Apply Changes</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="bs-modal modal fade" id="employmentTypeModal" tabindex="-1" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog  modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title fs-5" id="exampleModalLabel">Employment Type</h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="location-nav" class="nav-content">
                    <div class="location-search">
                        <div class="input-group">
                            <span class="input-group-text" id="basic-addon1"><span
                                    class="icon icon-search"></span></span>
                            <input type="text" class="form-control" placeholder="Search" id="employeTypeSearch"
                                aria-label="searchLocation" aria-describedby="basic-addon1">
                        </div>
                    </div>
                    <ul class="scrollElement" id="employmentTypeSearch">
                        @foreach($employmentTypes as $employmentType)
                        <li>
                            <div class="form-check mod-checkbox typ-modal">
                                <input class="form-check-input" type="checkbox" name="employmentType"
                                    value="{{$employmentType->id}}" id="employmentType{{$employmentType->id}}"
                                    placeholder="{{$employmentType->name}}" onclick="filterChange(event)">
                                <label class="form-check-label" for="employmentType{{$employmentType->id}}">
                                    {{$employmentType->name}}
                                </label>
                            </div>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <!-- <button type="button" class="btn bs-btn typ-outline" data-bs-dismiss="modal">Clear All</button> -->
                <button type="button" onclick="filterApply()" class="btn bs-btn typ-apply">Apply Changes</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="bs-modal modal fade" id="locationModal" tabindex="-1" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog  modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title fs-5" id="exampleModalLabel">Locations</h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="location-nav" class="nav-content">
                    <div class="location-search">
                        <div class="input-group">
                            <span class="input-group-text" id="basic-addon1"><span
                                    class="icon icon-search"></span></span>
                            <input type="text" class="form-control" placeholder="Search" id="searchLocationModel"
                                aria-label="searchLocation" aria-describedby="basic-addon1">
                        </div>
                    </div>
                    <ul class="scrollElement" id="locationModelSearch">
                        @foreach($cities as $city)
                        <li>
                            <div class="form-check mod-checkbox typ-modal">
                                <input class="form-check-input" type="checkbox" name="location" value="{{$city->id}}"
                                    placeholder="{{$city->city_name}}" id="city{{$city->id}}"
                                    onclick="filterChange(event)">
                                <label class="form-check-label" for="city{{$city->id}}">
                                    {{$city->city_name}}
                                </label>
                            </div>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <!-- <button type="button" class="btn bs-btn typ-outline" data-bs-dismiss="modal">Clear All</button> -->
                <button type="button" onclick="filterApply()" class="btn bs-btn typ-apply">Apply Changes</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="bs-modal modal fade" id="qualificationModal" tabindex="-1" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog  modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title fs-5" id="exampleModalLabel">Qualification</h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="location-nav" class="nav-content">
                    <div class="location-search">
                        <div class="input-group">
                            <span class="input-group-text" id="basic-addon1"><span
                                    class="icon icon-search"></span></span>
                            <input type="text" class="form-control" placeholder="Search" id="searchQualificationModel"
                                aria-label="searchLocation" aria-describedby="basic-addon1">
                        </div>
                    </div>
                    <ul class="scrollElement" id="qualificationModalSearch">
                        @foreach($qualifications as $qualification)
                        <li>
                            <div class="form-check mod-checkbox typ-modal">
                                <input class="form-check-input" type="checkbox" name="qualification"
                                    value="{{$qualification->id}}" placeholder="{{$qualification->city_name}}"
                                    id="qualification{{$qualification->id}}" onclick="filterChange(event)">
                                <label class="form-check-label" for="qualification{{$qualification->id}}">
                                    {{$qualification->name}}
                                </label>
                            </div>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <!-- <button type="button" class="btn bs-btn typ-outline" data-bs-dismiss="modal">Clear All</button> -->
                <button type="button" onclick="filterApply()" class="btn bs-btn typ-apply">Apply Changes</button>
            </div>
        </div>
    </div>
</div>

<!-- Button trigger modal -->


<!-- Modal -->
<div class="bs-modal typ-applied modal fade" id="filterApplied" tabindex="-1" aria-labelledby="filterAppliedLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <div class="modal-hd">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    <a href="" onclick="removeAll(event)" class="title">Remove All</a>
                </div>
                <div class="nav-content">
                    <ul class="scrollElement" id="applied">

                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
     setTimeout(function() {
        $('#JobSuccess').fadeOut('slow');
    }, 5000);

    function saveJob(jobid) {
    event.preventDefault()
    var jobID = jobid;
    console.log("jobID>>>",jobID);
    const token='{{csrf_token()}}';
    $.ajax({
      url: "{{ route('job.save') }}",
      method: 'POST',
      headers: {
        'X-CSRF-TOKEN': token
      },
      data: { jobID: jobID },
      success: function (response) {
      if (response.status == 200) {
        var saveIcon = $('#save-icon-' + jobID);
                // Toggle classes based on the current class
                if (saveIcon.hasClass('icon-save11')) {
                    saveIcon.removeClass('icon-save11').addClass('icon-save-fill');
                } else if (saveIcon.hasClass('icon-save-fill')) {
                    saveIcon.removeClass('icon-save-fill').addClass('icon-save11');
                }

      } else {
        console.log('Failed to save course.');
      }
      },
      error: function (error) {
      console.error('AJAX error:', error);
      }
      });
      }

    $(document).ready(function () {
        if ('{{ Session::has('success') }}') {
            var congratulationModal = new bootstrap.Modal(document.getElementById('congratulationModal'));
            congratulationModal.show();
        }
        $("#appliedDiv").hide();
        $("#dataNotFound").hide();

        // $(document).on('click', '.pagination a', function(event) {
        //     event.preventDefault();
        //     var page = $(this).attr('href').split('page=')[1];
        //     fetchJobs(page);
        // });

        // function fetchJobs(page) {
        //     $.ajax({
        //         url: '/fetch-jobs?page=' + page,
        //         success: function(response) {
        //             if (response.status == 200) {
        //             console.log(' response:', response);
        //             updateJobContainerpagination(response, response.pagination);
        //         } else {
        //             $('#job-container').html('Data Not Found')
        //         }
        //         },
        //         error: function(xhr) {
        //             console.log(xhr.responseText);
        //         }
        //     });
        // }

        $('#employeTypeSearch').keyup(function () {
            var term = $(this).val();
            // alert(term);
            console.log("term>>>", term);

            $.ajax({
                url: "{{ route('employetype.search') }}",
                method: 'POST',
                data: { term: term },
                success: function (response) {
                    if (response.status == 200) {
                        console.log(' response:', response);
                        $('#employmentTypeSearch').empty();
                        response.data.forEach(function (employmentType) {
                            var html = '<li>' +
                                '<div class="form-check mod-checkbox typ-modal">' +
                                '<input class="form-check-input" type="checkbox" name="employmentType" value="' + employmentType.id + '" id="employmentType' + employmentType.id + '" placeholder="' + employmentType.name + '" onclick="filterChange(event)">' +
                                '<label class="form-check-label" for="employmentType' + employmentType.id + '">' +
                                employmentType.name +
                                '</label>' +
                                '</div>' +
                                '</li>';

                            // Append the generated HTML to the ul element
                            $('#employmentTypeSearch').append(html);
                        });
                    } else {
                        $('#employmentTypeSearch').html('Data Not Found');
                    }
                },
                error: function (error) {
                    console.error('AJAX error:', error);
                }
            });

        });

        $('#departmentSearch').keyup(function () {
            var term = $(this).val();
            // alert(term);
            console.log("term>>>", term);

            $.ajax({
                url: "{{ route('department.search') }}",
                method: 'POST',
                data: { term: term },
                success: function (response) {
                    if (response.status == 200) {
                        console.log(' response:', response);
                        $('#departmentSearchappend').empty();
                        response.data.forEach(function (department) {
                            var html = '<li>' +
                                '<div class="form-check mod-checkbox typ-modal">' +
                                '<input class="form-check-input" type="checkbox" name="department" value="' + department.id + '" id="department' + department.id + '" placeholder="' + department.department_name + '" onclick="filterChange(event)">' +
                                '<label class="form-check-label" for="department' + department.id + '">' +
                                department.department_name +
                                '</label>' +
                                '</div>' +
                                '</li>';

                            // Append the generated HTML to the ul element
                            $('#departmentSearchappend').append(html);
                        });
                    } else {
                        $('#departmentSearchappend').html('Data Not Found');
                    }
                },
                error: function (error) {
                    console.error('AJAX error:', error);
                }
            });

        });

        $('#searchQualificationModel').keyup(function () {
            var term = $(this).val();
            // alert(term);
            console.log("term>>>", term);

            $.ajax({
                url: "{{ route('location.qualification.model') }}",
                method: 'POST',
                data: { term: term },
                success: function (response) {
                    if (response.status == 200) {
                        console.log(' response:', response);
                        $('#qualificationModalSearch').empty();
                        response.data.forEach(function (qualification) {
                            var html = '<li>' +
                                '<div class="form-check mod-checkbox typ-modal">' +
                                '<input class="form-check-input" type="checkbox" name="qualification" value="' + qualification.id + '" id="qualification' + qualification.id + '" placeholder="' + qualification.name + '" onclick="filterChange(event)">' +
                                '<label class="form-check-label" for="qualification' + qualification.id + '">' +
                                qualification.name +
                                '</label>' +
                                '</div>' +
                                '</li>';

                            // Append the generated HTML to the ul element
                            $('#qualificationModalSearch').append(html);
                        });
                    } else {
                        $('#qualificationModalSearch').html('Data Not Found');
                    }
                },
                error: function (error) {
                    console.error('AJAX error:', error);
                }
            });

        });

        $('#searchLocationModel').keyup(function () {
            var term = $(this).val();
            // alert(term);
            console.log("term>>>", term);

            $.ajax({
                url: "{{ route('location.search.model') }}",
                method: 'POST',
                data: { term: term },
                success: function (response) {
                    if (response.status == 200) {
                        console.log(' response:', response);
                        $('#locationModelSearch').empty();
                        response.data.forEach(function (location) {
                            var html = '<li>' +
                                '<div class="form-check mod-checkbox typ-modal">' +
                                '<input class="form-check-input" type="checkbox" name="location" value="' + location.id + '" id="city' + location.id + '" placeholder="' + location.city_name + '" onclick="filterChange(event)">' +
                                '<label class="form-check-label" for="city' + location.id + '">' +
                                location.city_name +
                                '</label>' +
                                '</div>' +
                                '</li>';

                            // Append the generated HTML to the ul element
                            $('#locationModelSearch').append(html);
                        });
                    } else {
                        $('#locationModelSearch').html('Data Not Found');
                    }
                },
                error: function (error) {
                    console.error('AJAX error:', error);
                }
            });

        });

        $('#industrySearch').keyup(function () {
            var term = $(this).val();
            // alert(term);
            console.log("term>>>", term);

            $.ajax({
                url: "{{ route('industry.search') }}",
                method: 'POST',
                data: { term: term },
                success: function (response) {
                    if (response.status == 200) {
                        console.log(' response:', response);
                        $('#industrytypeSearch').empty();
                        response.data.forEach(function (industry) {
                            var html = '<li>' +
                                '<div class="form-check mod-checkbox typ-modal">' +
                                '<input class="form-check-input" type="checkbox" name="industry" value="' + industry.id + '" id="industry' + industry.id + '" placeholder="' + industry.industry_name + '" onclick="filterChange(event)">' +
                                '<label class="form-check-label" for="industry' + industry.id + '">' +
                                industry.industry_name +
                                '</label>' +
                                '</div>' +
                                '</li>';

                            // Append the generated HTML to the ul element
                            $('#industrytypeSearch').append(html);
                        });
                    } else {
                        $('#industrytypeSearch').html('Data Not Found');
                    }
                },
                error: function (error) {
                    console.error('AJAX error:', error);
                }
            });

        });



        $('#titleSearch').keyup(function () {
            var term = $(this).val();
            console.log("term>>>", term);
            if (term !== "") {
                
                $.ajax({
                    url: "{{ route('title.search') }}",
                    method: 'POST',
                    data: { term: term },
                    success: function (response) {
                        if (response.status == 200) {
                            $('#set-search').addClass("active");
                            console.log(' response:', response);
                            $('#list').html(''); // Clear the existing list items
                            response.data.forEach(function (titleSearch) {
                                var listItems = '<li data-id="' + titleSearch.title + '">' + titleSearch.title + '</li>';
                                $('#list').append(listItems);
                            });
                            $('#list li').click(function () {
                                var textContent = $(this).text();
                                $('#titleSearch').val(textContent);
                                $('#set-search').removeClass('active');
                                $("#listval").val(textContent);
                            });
                        } else {
                            $('#list').html('Data Not Found');
                        }
                    },
                });
            } else {
                // Clear the list if the search term is empty
                $('#list').html('');
                $('#set-search').removeClass('active');
            }
        });

        $('#locationSearch').keyup(function () {
            var term = $(this).val();
            console.log("term>>>", term);
            if (term !== "") {
               
                $.ajax({
                    url: "{{ route('location.search') }}",
                    method: 'POST',
                    data: { term: term },
                    success: function (response) {
                        if (response.status == 200) {
                            $('#set-search1').addClass("active");
                            console.log(' response:', response);
                            $('#list1').html(''); // Clear the existing list items
                            response.data.forEach(function (locationSearch) {
                                var listItems = '<li data-id="' + locationSearch.id + '">' + locationSearch.city_name + '</li>';
                                $('#list1').append(listItems);
                            });
                            $('#list1 li').click(function () {
                                var textContent = $(this).text();
                                $('#locationSearch').val(textContent);
                                $('#set-search1').removeClass('active');
                                var selectedId = $(this).attr('data-id');
                                $("#listvallocation").val(selectedId);
                                console.log("selectedId>>>", selectedId);
                            });
                        } else {
                            $('#list1').html('Data Not Found');
                        }
                    },
                });
            } else {
                // Clear the list if the search term is empty
                $('#list1').html('');
                $('#set-search1').removeClass('active');
            }
        });

    });





    var numCheckedCheckboxes = 0;

    var selectedFilters = [];

    var checkboxData = [];

    function searchFilter() {
        var locationSearch = $("#locationSearch").val();
        console.log("locationSearch>>>", locationSearch);
        if (locationSearch !== '') {
            var listvallocation = $('#listvallocation').val();
        } else {
            var listvallocation = '';
        }
        // var listvallocation = $('#listvallocation').val();
        var listval = $('#titleSearch').val();
        var experiance = $('select[name="exprience"]').val();




        if (listval == '') {
            // alert("ff");
            $("#errmsg").html("Please enter keywords to search relevant jobs");
        } else {
            console.log("listval>>>", listval);
            console.log("listvallocation>>>", listvallocation);
            console.log("experiance>>>", experiance);
            $("#errmsg").html("");
            selectedFilters = [];
            var val = "bannerSearch";
            selectedFilters.push({
                listval: listval,
                listvallocation: listvallocation,
                val: val,
                experiance: experiance
            });
            console.log("selectedFiltersssssssssssssss", selectedFilters);
            performAjaxRequest(selectedFilters);

            // $.ajax({
            //     url: "{{ route('searchFilterJob') }}",
            //     method: 'POST',
            //     data: { filterValues: selectedFilters },
            //     success: function (response) {
            //         if (response.status == 200) {
            //             if(response.pagination == ''){
            //                 $("#paginationHide").hide();
            //                 updateJobContainer(response);
            //             }else{
            //                 $("#paginationHide").show();
            //                 updateJobContainerpagination(response, response.pagination);
            //             }
            //         } else {
            //             $('#job-container').html('Data Not Found')
            //         }
            //     },
            //     error: function (error) {
            //         console.error('AJAX error:', error);
            //     }
            // });
        }
    }

    
    function filterApply() {
        if (checkboxData.length > 0) {
            selectedFilters = [];
            checkboxData.forEach(function (checkbox) {
                var filterName = checkbox.checkbox.name;
                var filterValue = checkbox.checkbox.value;
                var filterID = checkbox.checkbox.id;
                var placeholder = checkbox.checkbox.placeholder;

                // Check if the checkbox is checked
                if (checkbox.checkbox.checked) {
                    var checkboxesWithSameID = document.querySelectorAll('input[type="checkbox"][id="' + filterID + '"]');
                    checkboxesWithSameID.forEach(function (checkbox) {
                        checkbox.checked = true;
                    });

                    var checkboxID = checkbox.checkbox.id;
                    console.log("checkboxID>>",checkboxID);

                      if ($('#applied input[type="checkbox"]#' + checkboxID).length === 0) {
                        var html = '<li>' +
                            '<div class="form-check mod-checkbox typ-modal">' +
                            '<input class="form-check-input" type="checkbox" name="' + checkbox.checkbox.name + '" value="' + checkbox.checkbox.value + '" id="' + checkboxID + '" onclick="filterChecked(event)" checked>' +
                            '<label class="form-check-label" for="' + checkboxID + '">' +
                            checkbox.checkbox.placeholder +
                            '</label>' +
                            '</div>' +
                            '</li>';
                        $('#applied').append(html);
                        numCheckedCheckboxes++;
                    }
                } else {
                    selectedFilters = selectedFilters.filter(function (filter) {
                        return filter.value !== checkbox.value;
                    });
                    var checkboxesWithSameID = document.querySelectorAll('input[type="checkbox"][id="' + filterID + '"]');
                    checkboxesWithSameID.forEach(function (checkbox) {
                        checkbox.checked = false;
                    });
                    
                    var existingLi = $('#applied').find('input[type="checkbox"][id="' + filterID + '"]').closest('li');
                    if (existingLi.length > 0) {
                        existingLi.remove();
                        numCheckedCheckboxes--;
                    }
                }
                selectedFilters = Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(function (checkbox) {
                    return {
                        name: checkbox.name,
                        value: checkbox.value
                    };
                });
                if (numCheckedCheckboxes > 0) {
                    $('#fliterCountNumber').empty();
                    $("#appliedDiv").show();
                    $('#fliterCountNumber').append(numCheckedCheckboxes);
                } else (
                    $("#appliedDiv").hide()
                )
            });
        }
        console.log("selectedFilters>>>", selectedFilters);
        performAjaxRequest(selectedFilters);
        $('#employmentTypeModal').modal('hide');
        $('#locationModal').modal('hide');
        $('#industryModal').modal('hide');
        $('#qualificationModal').modal('hide');
        $('#departmentModal').modal('hide');
    }

    function filterChange(event) {
        var checkbox = event.currentTarget;
        var checkboxValue = checkbox.value;
        var checkboxName = checkbox.name;
        var filterID = checkbox.id;
        var placeholder = checkbox.placeholder;
        console.log("placeholder>>", placeholder);

        checkboxData.push({
            checkbox: checkbox,
            checkboxValue: checkboxValue,
            checkboxName: checkboxName,
            placeholder: placeholder,
            filterID: filterID
        });
    }

    function removeAll(event) {
        event.preventDefault(); // Prevent default form submission

        // Uncheck all checkboxes
        $('input[type="checkbox"]').prop('checked', false);

        // Clear selectedFilters array
        selectedFilters = [];
        $('#applied').empty();
        $('#appliedDiv').hide();
        $('#filterApplied').modal('hide');

        // Reset numCheckedCheckboxes globally
        numCheckedCheckboxes = 0;

        // Perform Ajax request with empty selectedFilters
        performAjaxRequest(selectedFilters);
    }

    function filterChecked(event) {
        var checkbox = event.currentTarget;
        // console.log("checkbox>>",checkbox);
        var checkboxValue = checkbox.value;
        var checkboxName = checkbox.name;
        var filterID = checkbox.id;

        if (checkbox.checked) {
            var checkboxesWithSameID = document.querySelectorAll('input[type="checkbox"][id="' + filterID + '"]');
            checkboxesWithSameID.forEach(function (checkbox) {
                checkbox.checked = true;
            });
            var html = '<li>' +
                '<div class="form-check mod-checkbox typ-modal">' +
                '<input class="form-check-input" type="checkbox" name="' + checkbox.name + '" value="' + checkbox.value + '" id="' + checkbox.id + '" onclick="filterChecked(event)" checked>' +
                '<label class="form-check-label" for="' + checkbox.id + '">' +
                checkbox.placeholder +
                '</label>' +
                '</div>' +
                '</li>';
            $('#applied').append(html);
            numCheckedCheckboxes++;
        } else {
            selectedFilters = selectedFilters.filter(function (filter) {
                return filter.value !== checkbox.value;
            });
            var checkboxesWithSameID = document.querySelectorAll('input[type="checkbox"][id="' + filterID + '"]');
            checkboxesWithSameID.forEach(function (checkbox) {
                checkbox.checked = false;
            });
            numCheckedCheckboxes--;
        }
        selectedFilters = Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(function (checkbox) {
            return {
                name: checkbox.name,
                value: checkbox.value
            };
        });
        if (numCheckedCheckboxes > 0) {
            $('#fliterCountNumber').empty();
            $("#appliedDiv").show();
            $('#fliterCountNumber').append(numCheckedCheckboxes);
        } else (
            $("#appliedDiv").hide()
        )

        console.log("selectedFilters>>>", selectedFilters);
        performAjaxRequest(selectedFilters);
        var existingLi = $('#applied').find('input[type="checkbox"][id="' + filterID + '"]').closest('li');

        // If found, remove the <li>
        if (existingLi.length > 0) {
            existingLi.remove();
        }

        $('#filterApplied').modal('hide');
    }



    function filter(event) {
        var checkbox = event.currentTarget;
        // console.log("checkbox>>",checkbox);
        var checkboxValue = checkbox.value;
        var checkboxName = checkbox.name;
        var filterID = checkbox.id;

        if (checkbox.checked) {
            var checkboxesWithSameID = document.querySelectorAll('input[type="checkbox"][id="' + filterID + '"]');
            checkboxesWithSameID.forEach(function (checkbox) {
                checkbox.checked = true;
            });
            var html = '<li>' +
                '<div class="form-check mod-checkbox typ-modal">' +
                '<input class="form-check-input" type="checkbox" name="' + checkbox.name + '" value="' + checkbox.value + '" id="' + checkbox.id + '" onclick="filterChecked(event)" checked>' +
                '<label class="form-check-label" for="' + checkbox.id + '">' +
                checkbox.placeholder +
                '</label>' +
                '</div>' +
                '</li>';
            $('#applied').append(html);
            numCheckedCheckboxes++;
        } else {
            selectedFilters = selectedFilters.filter(function (filter) {
                return filter.value !== checkbox.value;
            });
            var checkboxesWithSameID = document.querySelectorAll('input[type="checkbox"][id="' + filterID + '"]');
            checkboxesWithSameID.forEach(function (checkbox) {
                checkbox.checked = false;
            });
            numCheckedCheckboxes--;
            var existingLi = $('#applied').find('input[type="checkbox"][id="' + filterID + '"]').closest('li');
        if (existingLi.length > 0) {
            existingLi.remove();
        }

        $('#filterApplied').modal('hide');
        }
        selectedFilters = Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(function (checkbox) {
            return {
                name: checkbox.name,
                value: checkbox.value
            };
        });


        if (numCheckedCheckboxes > 0) {
            $('#fliterCountNumber').empty();
            $("#appliedDiv").show();
            $('#fliterCountNumber').append(numCheckedCheckboxes);
        } else {
            $("#appliedDiv").hide()
        }
        console.log("selectedFilters>>>", selectedFilters);
        performAjaxRequest(selectedFilters);

        
    }

    function performAjaxRequest(filterValues, currentPage) {
        console.log('Data to be sent:', filterValues);
        const token='{{csrf_token()}}';
        $.ajax({
            url: "{{ route('FilterJob') }}",
            method: 'POST',
            headers: {
            'X-CSRF-TOKEN': token
        },
            data: { filterValues: filterValues, page: currentPage },
            success: function (response) {
                if (response.status == 200) {
                    console.log(' response:', response);
                    if (response.pagination == '') {
                        $("#paginationHide").hide();
                        updateJobContainer(response,response.savedJobs,response.userID);
                    } else {
                        $("#paginationHide").show();
                        updateJobContainerpagination(response, response.pagination,response.savedJobs,response.userID);
                    }
                } else {
                    document.getElementById("countDynamic").innerHTML = 0;
                    $("#paginationHide").hide();
                    var container = $('#job-container');
                     container.empty();
                     $('#job-container').html(
                        '<section class="lyt-section" id="dataNotFound">' +
                        '<div class="notfound">' +
                        '<div class="content-wrapper">' +
                        '<h2>Data Not Found!</h2>' +
                        '<img class="img-fluid" src="assets/images/not-found.png" alt="not-found">' +
                        '</div>' +
                        '</div>' +
                        '</section>'
                    );
                }
            },
            error: function (error) {
                console.error('AJAX error:', error);
            }
        });


    }

    function updateJobContainerpagination(response, pagination, savedJobs, userID) {
    document.getElementById("countDynamic").innerHTML = response.count;
    var container = $('#job-container');
    container.empty();
    var jobDetailsUrl = @json(route('job.detail', ['slug_placeholder']));

    response.data.data.forEach(function (item) {
        var applied = false;

        // Check if the user has applied for this job
        if (response.applications && response.applications.length > 0) {
            response.applications.forEach(function (application) {
                if (application.job_id == item.id) {
                    applied = true;
                }
            });
        }

        var isSaved = savedJobs.some(function (savedJob) {
            return savedJob.job_id === item.id && savedJob.user_id === userID;
        });

        var endDate = new Date(item.end_date);

        // Format the date to "MMM dd, yyyy" format
        var formattedEndDate = endDate.toLocaleDateString('en-US', { month: 'short', day: '2-digit', year: 'numeric' });

        var plainTextDescription = item.description.replace(/<[^>]*>?/gm, '');
        var truncatedDescription = plainTextDescription.length > 180 ? plainTextDescription.substring(0, 180) + '...' : plainTextDescription;

        var saveIconClass = isSaved ? 'icon-save-fill' : 'icon-save11';

        var cardHtml = '<div class="col-lg-6 col-md-12">' +
            '<a href="' + jobDetailsUrl.replace('slug_placeholder', item.slug) + '" class="bs-card typ-job-list">' +
            '<div class="card-body">' +
            '<div class="logo-section">' +
            '<div class="img-title">' +
            '<div class="img-section"><img class="img-fluid" src="' + item.logo + '" alt="logo"> </div>' +
            '<div class="title">' +
            '<h3 class="name">' + item.company_name + '</h3>' +
            '<h2 class="position">' + item.title + '</h2>' +
            '</div>' +
            '</div>' +
            '<div class="icon-section" onclick="saveJob(' + item.id + ')">' +
            '<span class="icon ' + saveIconClass + '" id="save-icon-' + item.id + '"></span>' +
            '</div>' +
            '</div>' +
            '<div class="icon-section">' +
            '<ul>' +
            '<li>' +
            '<span class="icon-name"><span class="icon icon-map-new"></span> ' + item.city_name + '</span>' +
            '</li>' +
            '<li class="dot-sec">' +
            '<span class="dot"></span>' +
            '</li>' +
            '<li>' +
            '<span class="icon-name"><img src="assets/images/svg/bag1.svg" alt="bagss"> ' + item.experience + ' Yrs</span>' +
            '</li>' +
            '<li class="dot-sec">' +
            '<span class="dot"></span>' +
            '</li>' +
            '<li>' +
            '<span class="icon-name"><span class="icon icon-clock"></span> ' + item.employee_types_name + '</span>' +
            '</li>' +
            '<li class="dot-sec">' +
            '<span class="dot"></span>' +
            '</li>' +
            '<li>' +
            '<span class="icon-name"><span class="">₹</span> ' + item.salary_from + '-' + item.salary_to + ' LPA</span>' +
            '</li>' +
            '</ul>' +
            '</div>' +
            '<div class="description">' +
            '<p>' + truncatedDescription + '... </p>' +
            '</div>' +
            '</div>' +
            '<div class="card-footer">' +
            '<div class="last-date">' +
            '<span class="icon icon-calender1"></span> Last date - ' + formattedEndDate  +
            '</div>' +
            '<div class="btn-section">';

        // Apply Now or Applied button based on the 'applied' variable
        if (applied) {
            cardHtml += '<span class="bs-btn typ-appliedgeeen">Applied <span class="icon icon-check-sucess"></span></span>';
        } else {
            cardHtml += '<span class="bs-btn typ-outline">Apply Now</span>';
        }

        cardHtml += '</div>' +
            '</div>' +
            '</a>' +
            '</div>';

        container.append(cardHtml);
    });

    $('.bs-pagination ul').html($(pagination).html());
}


    function updateJobContainer(response,savedJobs,userID) {
        console.log("responseqqq>>>", response);
        document.getElementById("countDynamic").innerHTML = response.count;
        var container = $('#job-container');
        container.empty();
        var jobDetailsUrl = @json(route('job.detail', ['slug_placeholder']));

        response.data.data.forEach(function (item) {
        var applied = false;
        // Check if the user has applied for this job
        if (response.applications && response.applications.length > 0) {
            response.applications.forEach(function(application) {
                if (application.job_id == item.id) {
                    applied = true;
                }
            });
        }

        var isSaved = savedJobs.some(function (savedJob) {
            return savedJob.job_id === item.id && savedJob.user_id === userID;
        });

        var endDate = new Date(item.end_date);         
        // Format the date to "MMM dd, yyyy" format
        var formattedEndDate = endDate.toLocaleDateString('en-US', { month: 'short', day: '2-digit', year: 'numeric' });


        var plainTextDescription = item.description.replace(/<[^>]*>?/gm, '');
    var truncatedDescription = plainTextDescription.length > 180 ? plainTextDescription.substring(0, 180) + '...' : plainTextDescription;

    var saveIconClass = isSaved ? 'icon-save-fill' : 'icon-save11';

        var cardHtml = '<div class="col-lg-6 col-md-12">' +
            '<a href="' + jobDetailsUrl.replace('slug_placeholder', item.slug) + '" class="bs-card typ-job-list">' +
            '<div class="card-body">' +
            '<div class="logo-section">' +
            '<div class="img-title">' +
            '<div class="img-section"><img class="img-fluid" src="' + item.logo + '" alt="logo"> </div>' +
            '<div class="title">' +
            '<h3 class="name">' + item.company_name + '</h3>' +
            '<h2 class="position">' + item.title + '</h2>' +
            '</div>' +
            '</div>' +
            '<div class="icon-section" onclick="saveJob(' + item.id + ')">' +
            '<span class="icon ' + saveIconClass + '" id="save-icon-' + item.id + '"></span>' +
            '</div>' +
            '</div>' +
            '<div class="icon-section">' +
            '<ul>' +
            '<li>' +
            '<span class="icon-name"><span class="icon icon-map-new"></span> ' + item.city_name + '</span>' +
            '</li>' +
            '<li class="dot-sec">' +
            '<span class="dot"></span>' +
            '</li>' +
            '<li>' +
            '<span class="icon-name"><img src="assets/images/svg/bag1.svg" alt="bagss"> ' + item.experience + ' Yrs</span>' +
            '</li>' +
            '<li class="dot-sec">' +
            '<span class="dot"></span>' +
            '</li>' +
            '<li>' +
            '<span class="icon-name"><span class="icon icon-clock"></span> ' + item.employee_types_name + '</span>' +
            '</li>' +
            '<li class="dot-sec">' +
            '<span class="dot"></span>' +
            '</li>' +
            '<li>' +
            '<span class="icon-name"><span class="">₹</span> ' + item.salary_from + '-' + item.salary_to + ' LPA</span>' +
            '</li>' +
            '</ul>' +
            '</div>' +
            '<div class="description">' +
            '<p>' + truncatedDescription + '... </p>' +
            '</div>' +
            '</div>' +
            '<div class="card-footer">' +
            '<div class="last-date">' +
            '<span class="icon icon-calender1"></span> Last date - ' + formattedEndDate +
            '</div>' +
            '<div class="btn-section">';
        
        // Apply Now or Applied button based on the 'applied' variable
        if(applied) {
            cardHtml += '<span class="bs-btn typ-appliedgeeen">Applied <span class="icon icon-check-sucess"></span></span>';
        } else {
            cardHtml += '<span class="bs-btn typ-outline">Apply Now</span>';
        }

        cardHtml += '</div>' +
            '</div>' +
            '</a>' +
            '</div>';

        container.append(cardHtml);
    });
    }

    $(document).ready(function () {
    $(document).on('click', '.pagination a', function (event) {
        event.preventDefault();
        $('.pagination a').removeClass('active'); // Remove active class from all pagination links
        $(this).addClass('active'); // Add active class to the clicked pagination link
        var page = $(this).attr('href').split('page=')[1];
        currentPage = page;
        selectedFilters = selectedFilters;
        console.log(selectedFilters);
        performAjaxRequest(selectedFilters, currentPage);
    });
});


</script>