@extends('layouts.web-main')
@section('content')
    <!--
          =============================================
           Inner Banner
          ==============================================
          -->
    <div class="inner-banner-one position-relative">
        <div class="container">
            <div class="position-relative">
                <div class="row">
                    <div class="col-xl-6 m-auto text-center">
                        <div class="title-two">
                            <h2 class="text-white">Candidates</h2>
                        </div>
                        <p class="text-lg text-white mt-30 lg-mt-20 mb-35 lg-mb-20">Find you desire talents & make your work
                            done</p>
                    </div>
                </div>
                <div class="position-relative">
                    <div class="row">
                        <div class="col-xl-9 col-lg-8 m-auto">
                            <div class="job-search-one position-relative">
                                <form action="{{route('candidates')}}" method="GET">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="input-box">
                                                <div class="label">What are you looking for?</div>
                                                <select class="nice-select lg" name="job_title">
                                                    @php
														$uniqueJobTitles = [];
													@endphp
                                                    @foreach ($filters_data as $candidate)
                                                    @if (!in_array($candidate->title, $uniqueJobTitles))
                                                    @php
                                                        $uniqueJobTitles[] = $candidate->title;
                                                    @endphp
                                                        <option value="{{$candidate->title}}">{{$candidate->title}}</option>
                                                  
                                                    @endif
													@endforeach 
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="input-box border-left">
                                                <div class="label">Category</div>
                                                <select class="nice-select lg" name="job_category">
                                                    @php
                                                    $uniqueSkills = [];
                                                @endphp
                                                @foreach ($filters_data as $candidate)
                                                    @php
                                                        $skills = explode(',', $candidate->skills);
                                                    @endphp
                                                    @foreach ($skills as $skill)
                                                        @if (!in_array($skill, $uniqueSkills))
                                                            @php
                                                                $uniqueSkills[] = $skill;
                                                            @endphp
                                                            <option value="{{$skill}}">{{$skill}}</option>
                                                        @endif
                                                    @endforeach
                                                @endforeach
                                                
                                                </select>
                                            </div>
                                        </div>
                                        @if(Auth::check() && Auth::user()->role_id == 2 && Auth::user()->is_purchased == 1)
                                        <div class="col-md-3">
                                            <button type="submit" class="fw-500 text-uppercase h-100 tran3s search-btn">Search</button>
                                        </div>
											@endif
											@if(Auth::check() && Auth::user()->is_purchased !=1)
											<div class="col-md-3">
                                                <button type="button" class="fw-500 text-uppercase h-100 tran3s search-btn package">Search</button>
                                            </div>
											@endif
											@if(!Auth::check())
											<div class="col-md-3">
                                                <button type="button" class="fw-500 text-uppercase h-100 tran3s search-btn login">Search</button>
                                            </div>
											@endif
                                    </div>
                                </form>
                            </div>
                            <!-- /.job-search-one -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <img src="{{ asset('assets/images/lazy.svg') }}" data-src="{{ asset('assets/images/shape/shape_02.svg') }}"
            alt="" class="lazy-img shapes shape_01">
        <img src="{{ asset('assets/images/lazy.svg') }}" data-src="{{ asset('assets/images/shape/shape_03.svg') }}"
            alt="" class="lazy-img shapes shape_02">
    </div> <!-- /.inner-banner-one -->



    <!--
          =============================================
           Candidates Profile
          ==============================================
          -->
    <section class="candidates-profile pt-110 lg-pt-80 pb-160 xl-pb-150 lg-pb-80">
        <div class="container">
            <div class="row">
                <div class="col-xl-3 col-lg-4">
                    <button type="button" class="filter-btn w-100 pt-2 pb-2 h-auto fw-500 tran3s d-lg-none mb-40"
                        data-bs-toggle="offcanvas" data-bs-target="#filteroffcanvas">
                        <i class="bi bi-funnel"></i>
                        Filter
                    </button>
                    <div class="filter-area-tab offcanvas offcanvas-start" id="filteroffcanvas">
                        <button type="button" class="btn-close text-reset d-lg-none" data-bs-dismiss="offcanvas"
                            aria-label="Close"></button>
                        <div class="main-title fw-500 text-dark">Filter By</div>
                        <div class="light-bg border-20 ps-4 pe-4 pt-25 pb-30 mt-20">
                            <div class="filter-block bottom-line pb-25">
                                <a class="filter-title fw-500 text-dark" data-bs-toggle="collapse" href="#collapseSemploye"
                                    role="button" aria-expanded="false">Name or Keyword</a>
                                <div class="collapse show" id="collapseSemploye">
                                    <div class="main-body">
                                        <form action="{{route('candidates')}}" method="GET" class="input-box position-relative">
                                            <input type="text" name="search" placeholder="Name or keyword">
                                            <button type="submit"><i class="bi bi-search"></i></button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <!-- /.filter-block -->
                            <form method="GET" id="filterButton">
                               @csrf
                          
                            <div class="filter-block bottom-line pb-25 mt-25">
                                <a class="filter-title fw-500 text-dark" data-bs-toggle="collapse" href="#collapseCategory"
                                    role="button" aria-expanded="false">Category</a>
                                <div class="collapse show" id="collapseCategory">
                                    <div class="main-body">
                                        <select class="nice-select" id="categoryFilter" name="category">
                                            <option></option>
                                        @php
                                            $uniqueSkills = [];
                                        @endphp
                                        @foreach ($filters_data as $candidate)
                                            @php
                                                $skills = explode(',', $candidate->skills);
                                            @endphp
                                            @foreach ($skills as $skill)
                                                @if (!in_array($skill, $uniqueSkills))
                                                    @php
                                                        $uniqueSkills[] = $skill;
                                                    @endphp
                                                    <option value="{{$skill}}">{{$skill}}</option>
                                                @endif
                                            @endforeach
                                        @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <!-- /.filter-block -->
                            <div class="filter-block bottom-line pb-25 mt-25">
                                <a class="filter-title fw-500 text-dark" data-bs-toggle="collapse" href="#collapseLocation"
                                    role="button" aria-expanded="false">Location</a>
                                <div class="collapse show" id="collapseLocation">
                                    <div class="main-body">
                                        <select class="nice-select bg-white" id="locationFilter" name="location">
                                            {{-- <option value="0">All Location</option> --}}
                                            <option></option>
                                                     @php
                                                        $uniqueLocations = [];
                                                    @endphp

                                                    @foreach ($filters_data as $candidate)
                                                        {{-- @foreach ($candidate->get_education as $education) --}}
                                                            @php
                                                                $location = $candidate->location; // Assuming "location" is a field in the "Education" model.
                                                            @endphp

                                                            @if (!in_array($location, $uniqueLocations))
                                                                @php
                                                                    $uniqueLocations[] = $location;
                                                                @endphp
                                                                <option value="{{$location}}" >{{$location}}</option>
                                                            @endif
                                                        {{-- @endforeach --}}
                                                    @endforeach

                                           
                                        </select>
                                        {{-- <div class="loccation-range-select mt-5">
                                            <div class="d-flex align-items-center">
                                                <span>Radius: &nbsp;</span>
                                                <div id="rangeValue">50</div>
                                                <span>&nbsp;miles</span>
                                            </div>
                                            <input type="range" id="locationRange" value="50" max="100">
                                        </div> --}}
                                    </div>
                                </div>
                            </div>
                            <!-- /.filter-block -->
                        {{--    <div class="filter-block bottom-line pb-25 mt-25">
                                <a class="filter-title fw-500 text-dark collapsed" data-bs-toggle="collapse"
                                    href="#collapseExp" role="button" aria-expanded="false">Expert Level</a>
                                <div class="collapse" id="collapseExp">
                                    <div class="main-body">
                                        <ul class="style-none filter-input">
                                            @php
                                                $uniqueExperiences = [];
                                            @endphp

                                            @foreach ($filters_data as $candidate)
                                                    @php
                                                        $experience = $candidate->experience; // Assuming "experience" is a field in the "Education" model.
                                                    @endphp

                                                    @if (!in_array($experience, $uniqueExperiences))
                                                        @php
                                                            $uniqueExperiences[] = $experience;
                                                        @endphp
                                                        <li>
                                                            <input type="checkbox" name="Experience" id="experienceFilter" value="{{$experience}}">
                                                            <label>{{$experience}}</label>
                                                        </li>
                                                    @endif
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div> --}}
                            <!-- /.filter-block -->
                            <div class="filter-block bottom-line pb-25 mt-25">
                                <a class="filter-title fw-500 text-dark collapsed" data-bs-toggle="collapse"
                                    href="#collapseQualification" role="button" aria-expanded="false">Qualification</a>
                                <div class="collapse" id="collapseQualification">
                                    <div class="main-body">
                                        <ul class="style-none filter-input">
                                            
                                            @php
                                                $uniqueTitles = [];
                                            @endphp

                                            @foreach ($filters_data as $candidate)
                                            
                                                    @php
                                                        $title = $candidate->title; // Assuming "title" is a field in the "Education" model.
                                                    @endphp

                                                    @if (!in_array($title, $uniqueTitles))
                                                        @php
                                                            $uniqueTitles[] = $title;
                                                        @endphp
                                                        <li>
                                                            <input type="checkbox" name="qualification[]" id="qualificationFilter" value="{{$title}}">
                                                            <label>{{$title}}</label>
                                                        </li>
                                                    @endif
                                            @endforeach

                                           
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <!-- /.filter-block -->
                            {{-- <div class="filter-block bottom-line pb-25 mt-25">
                                <a class="filter-title fw-500 text-dark collapsed" data-bs-toggle="collapse"
                                    href="#collapseCType" role="button" aria-expanded="false">Candidate Type</a>
                                <div class="collapse" id="collapseCType">
                                    <div class="main-body">
                                        <ul class="style-none filter-input">
                                            <li>
                                                <input type="checkbox" name="Gender" value="01">
                                                <label>Male</label>
                                            </li>
                                            <li>
                                                <input type="checkbox" name="Gender" value="02">
                                                <label>Female</label>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div> --}}
                            <!-- /.filter-block -->

                            <!--<div class="filter-block bottom-line pb-25 mt-25">-->
                            <!--    <a class="filter-title fw-500 text-dark collapsed" data-bs-toggle="collapse"-->
                            <!--        href="#collapseSalary" role="button" aria-expanded="false">Salary Range</a>-->
                            <!--    <div class="collapse" id="collapseSalary">-->
                            <!--        <div class="main-body">-->
                            <!--            <div class="salary-slider">-->
                            <!--                <div class="price-input d-flex align-items-center pt-5">-->
                            <!--                    <div class="field d-flex align-items-center">-->
                            <!--                        <input type="number"  class="input-min" value="0" readonly>-->
                            <!--                    </div>-->
                            <!--                    <div class="pe-1 ps-1">-</div>-->
                            <!--                    <div class="field d-flex align-items-center">-->
                            <!--                        <input type="number"   class="input-max" value="300" readonly>-->
                            <!--                    </div>-->
                            <!--                    <div class="currency ps-1">USD</div>-->
                            <!--                </div>-->
                            <!--                <div class="slider">-->
                            <!--                    <div class="progress"></div>-->
                            <!--                </div>-->
                            <!--                <div class="range-input mb-10">-->
                            <!--                    <input type="range" id="maxSalary" name="min_salary"  class="range-min" min="0" max="950"-->
                            <!--                        value="0" step="10">-->
                            <!--                    <input type="range" id="minSalary" name="max_salary" class="range-max" min="0" max="1000"-->
                            <!--                        value="300" step="10">-->
                            <!--                </div>-->
                            <!--            </div>-->
                                       
                            <!--        </div>-->
                            <!--    </div>-->
                            <!--</div>-->
                            <!-- /.filter-block -->

                            <div class="filter-block bottom-line pb-25 mt-25">
                                <a class="filter-title fw-500 text-dark collapsed" data-bs-toggle="collapse"
                                    href="#collapseFluency" role="button" aria-expanded="false">English Fluency</a>
                                <div class="collapse" id="collapseFluency">
                                    <div class="main-body">
                                        <select class="nice-select" name="english_fluency" id="englishFluencyFilter">
                                            <option></option>
                                            @php
                                                $uniqueEnglishProficiency = [];
                                            @endphp

                                            @foreach ($filters_data as $candidate)
                                                    @php
                                                        $englishProficiency = $candidate->english_fluency; // Assuming "english_proficiency" is a field in the "Education" model.
                                                    @endphp

                                                    @if (!in_array($englishProficiency, $uniqueEnglishProficiency))
                                                        @php
                                                            $uniqueEnglishProficiency[] = $englishProficiency;
                                                        @endphp
                                                            <option value="{{$englishProficiency}}">{{$englishProficiency}}</option>

                                                    @endif
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <!-- /.filter-block -->

                            @if(Auth::check() && Auth::user()->role_id == 2 && Auth::user()->is_purchased == 1)
                            <button type="submit"  class="btn-ten fw-500 text-white w-100 text-center tran3s mt-30">Apply
                                Filter</button>
                                @endif
                                @if(Auth::check() && Auth::user()->is_purchased != 1)
                                <button type="button"  class="btn-ten fw-500 text-white w-100 text-center tran3s mt-30 package">Apply
                                    Filter</button>
                                    @endif
                                    @if(!Auth::check())
                                    <button type="button"  class="btn-ten fw-500 text-white w-100 text-center tran3s mt-30 login">Apply
                                        Filter</button>
                                        @endif
                            </form>
                            </form>
                        </div>
                    </div>
                    <!-- /.filter-area-tab -->
                </div>


                <div class="col-xl-9 col-lg-8">
                    <div class="ms-xxl-5 ms-xl-3">
                        <div class="upper-filter d-flex justify-content-between align-items-center mb-20">
                            <div class="total-job-found">All <span class="text-dark fw-500">{{$count_candidates}}</span> candidates found
                            </div>
                            <div class="d-flex align-items-center">
                                <!--<div class="short-filter d-flex align-items-center">-->
                                <!--    <div class="text-dark fw-500 me-2">Short:</div>-->
                                <!--    <select class="nice-select">-->
                                <!--        <option value="0">Latest</option>-->
                                <!--        <option value="1">Category</option>-->
                                <!--        <option value="2">Job Type</option>-->
                                <!--    </select>-->
                                <!--</div>-->
                                <button class="style-changer-btn text-center rounded-circle tran3s ms-2 list-btn active"
                                    title="Active List"><i class="bi bi-list"></i></button>
                                <button class="style-changer-btn text-center rounded-circle tran3s ms-2 grid-btn"
                                    title="Active Grid"><i class="bi bi-grid"></i></button>
                            </div>
                        </div>
                        <!-- /.upper-filter -->

                        <div class="accordion-box grid-style show " >
                         @if(Auth::check() && Auth::user()->role_id == 2 && Auth::user()->is_purchased == 1)
                            <div class="row" id="candidateProfiles">
                            @foreach ($candidates as $candidate)

                                <div class="col-xxl-4 col-sm-6 d-flex" >
                                    <div class="candidate-profile-card favourite text-center grid-layout mb-25">
                                        <a href="{{ route('candidate-details', ['id' => $candidate->id ,'slug' => $candidate->user->slug]) }}" class="save-btn tran3s">
                                            <!--<i-->
                                            <!--    class="bi bi-heart"></i></a>-->
                                                  <!--<i class="bi bi-heart-fill favorite_color"></i>-->
                                        <div class="cadidate-avatar online position-relative d-block m-auto"><a
                                                href="{{ route('candidate-details', ['id' => $candidate->id ,'slug' => $candidate->user->slug]) }}" class="rounded-circle">
                                            @if(!empty($candidate->user->photo))
                                            <img
                                                    src="{{ asset('public/images/userDp')}}/{{$candidate->user->photo}}" data-src="{{ asset('public/images/userDp')}}/{{$candidate->user->photo}}"
                                                    alt="" class="lazy-img rounded-circle">
                                                    @else
                                                    <img
                                                    src="{{ asset('assets/images/lazy.svg')}}" data-src="{{ asset('assets/images/candidates/img_01.jpg')}}"
                                                    alt="" class="lazy-img rounded-circle">
                                                    @endif
                                                    </a></div>
                                        <h4 class="candidate-name mt-15 mb-0"><a href="{{ route('candidate-details', ['id' => $candidate->id ,'slug' => $candidate->user->slug]) }}"
                                                class="tran3s">{{$candidate->user->name ?? ''}}</a></h4>
                                        <div class="candidate-post">{{$candidate->title ?? ''}}</div>
                                        <ul
                                            class="cadidate-skills style-none d-flex flex-wrap align-items-center justify-content-center justify-content-md-between pt-30 sm-pt-20 pb-10">
                                            @php
                                                $skillsArray = explode(', ', $candidate->skills);
                                                $limit = 3;
                                                $remainingSkills = count($skillsArray) - $limit;
                                            @endphp

                                            @for ($i = 0; $i < $limit && $i < count($skillsArray); $i++)
                                                <li>{{ $skillsArray[$i] }}</li>
                                            @endfor   

                                            <!-- <li>Design</li>
                                            <li>UI</li>
                                            <li>Digital</li> -->
                                            <li class="more">{{$remainingSkills}}+</li>
                                        </ul>
                                        <!-- /.cadidate-skills -->
                                        <div class="row gx-1">
                                            <!--<div class="col-md-6">-->
                                            <!--    <div class="candidate-info mt-10">-->
                                            <!--        <span>Salary</span>-->
                                            <!--        <div>$30k-$50k/yr</div>-->
                                            <!--    </div>-->
                                                <!-- /.candidate-info -->
                                            <!--</div>-->
                                            <div class="col-md-12">
                                                <div class="candidate-info mt-10">
                                                    <span>Location</span>
                                                    <div>{{$candidate->location}}</div>
                                                </div>
                                                <!-- /.candidate-info -->
                                            </div>
                                        </div>
                                        <div class="row gx-2 pt-25 sm-pt-10">
                                            <div class="col-md-12">
                                                <a href="{{ route('candidate-details', ['id' => $candidate->id ,'slug' => $candidate->user->slug]) }}"
                                                    class="profile-btn tran3s w-100 mt-5">View Profile</a>
                                            </div>
                                            <!--<div class="col-md-6">-->
                                            <!--    <a href="{{ route('candidate-details', ['id' => $candidate->id ,'slug' => $candidate->user->slug]) }}"-->
                                            <!--        class="msg-btn tran3s w-100 mt-5">Message</a>-->
                                            <!--</div>-->
                                        </div>
                                    </div>
                                    <!-- /.candidate-profile-card -->
                                </div>
                                @endforeach
                                @endif
                                
                            </div>
                        </div>
                        

                        <div class="accordion-box list-style" id="liststyleCandidates">
                            @if(Auth::check() && Auth::user()->role_id == 2 && Auth::user()->is_purchased == 1)
                            <!-- /.candidate-profile-card -->
                            @foreach ($candidates as $candidate)
                            <div class="candidate-profile-card list-layout mb-25">
                                <div class="d-flex">
                                    
                                    <div class="cadidate-avatar online position-relative d-block me-auto ms-auto"><a
                                            href="{{ route('candidate-details', ['id' => $candidate->id ,'slug' => $candidate->user->slug]) }}" class="rounded-circle">
                                        @if(!empty($candidate->user->photo))
                                        <img
                                                src="{{ asset('public/images/userDp')}}/{{$candidate->user->photo}}" data-src="{{ asset('public/images/userDp')}}/{{$candidate->user->photo}}"
                                                alt="" class="lazy-img rounded-circle">
                                                @else
                                                <img
                                                src="{{ asset('assets/images/lazy.svg')}}" data-src="{{ asset('assets/images/candidates/img_09.jpg')}}"
                                                alt="" class="lazy-img rounded-circle">
                                                @endif
                                                </a></div>
                                    <div class="right-side">
                                        <div class="row gx-1 align-items-center">
                                            <div class="col-xl-3">
                                                <div class="position-relative">
                                                    <h4 class="candidate-name mb-0"><a href="{{ route('candidate-details', ['id' => $candidate->id ,'slug' => $candidate->user->slug]) }}"
                                                            class="tran3s">{{$candidate->user->name ?? ''}}</a></h4>
                                                    <div class="candidate-post">{{$candidate->title}}</div>
                                                    <ul class="cadidate-skills style-none d-flex align-items-center">
                                                        @php
                                                        $skillsArray = explode(', ', $candidate->skills);
                                                        $limit = 3;
                                                        $remainingSkills = count($skillsArray) - $limit;
                                                    @endphp
        
                                                    @for ($i = 0; $i < $limit && $i < count($skillsArray); $i++)
                                                        <li>{{ $skillsArray[$i] }}</li>
                                                    @endfor 
                                                    </ul>
                                                </div>
                                            </div>
                                            <!--<div class="col-xl-3 col-md-4 col-sm-6">-->
                                            <!--    <div class="candidate-info">-->
                                            <!--        <span>Salary</span>-->
                                            <!--        <div>$250-$300/week</div>-->
                                            <!--    </div>-->
                                            <!--</div>-->
                                            <div class="col-xl-6 col-md-8 col-sm-12">
                                                <div class="candidate-info">
                                                    <span>Location</span>
                                                    <div>{{$candidate->user->get_city->name ?? ''}}, {{$candidate->user->get_country->name ?? ''}}</div>
                                                </div>
                                            </div>
                                            <div class="col-xl-3 col-md-4">
                                                <div class="d-flex justify-content-lg-end">
                                                    <!--<a href="{{ route('candidate-details', ['id' => $candidate->id ,'slug' => $candidate->user->slug]) }}"-->
                                                    <!--    class="save-btn text-center rounded-circle tran3s mt-10">-->
                                                    <!--    <i-->
                                                    <!--        class="bi bi-heart"></i>-->
                                                    <!--        </a>-->
                                                    <a href="{{ route('candidate-details', ['id' => $candidate->id ,'slug' => $candidate->user->slug]) }}"
                                                        class="profile-btn tran3s ms-md-2 mt-10 sm-mt-20">View Profile</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                        {{-- </div> --}}
                        @endforeach
                        @endif
                        <!-- /.accordion-box -->


                        <div class="pt-20 d-sm-flex align-items-center justify-content-between">
                            <p class="m0 order-sm-last text-center text-sm-start xs-pb-20">Showing <span
                                    class="text-dark fw-500">1 to 20</span> of <span class="text-dark fw-500">1,270</span>
                            </p>
                            <div class="d-flex justify-content-center">
                                <ul class="pagination-two d-flex align-items-center style-none">
                                    <li class="active"><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#"><i class="bi bi-chevron-right"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- /.-->
                </div>
                <!-- /.col- -->
            </div>
        </div>
    </section>
    <!-- ./candidates-profile -->





    <!--
          =====================================================
           Job Portal Intro
          =====================================================
          -->
    <section class="job-portal-intro">
        <div class="container">
            <div class="wrapper bottom-border top-border pt-65 md-pt-50 pb-65 md-pb-50">
                <div class="row align-items-center">
                    <div class="col-lg-7">
                        <div class="text-center text-lg-start">
                            <h2>Most complete job portal.</h2>
                            <p class="text-md m0 md-pb-20">Signup and start find your job or talents.</p>
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <ul class="btn-group style-none d-flex flex-wrap justify-content-center justify-content-lg-end">
                           	<li class="me-2"><a href="{{route('all-jobs')}}" class="btn-three">Looking for job?</a></li>
	                            @if(Auth::check() && Auth::user()->role_id  == 2)
								    <li class="ms-2"><a href="{{route('post-job')}}" class="btn-four">Post a job</a></li>						
								@endif
								@if(!Auth::check())
									<li class="ms-2"><a href="{{route('sign-up')}}" class="btn-four">Post a job</a></li>
								@endif
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- /.job-portal-intro -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
    $(document).ready(function () {
        // Listen for a filter button click
        $("#filterButton").submit(function (e) {
            
            e.preventDefault();
    
            // Send an AJAX request to the server with the selected filter values
            $.ajax({
                url: "{{ route('filter-users') }}", // Replace with the actual URL for your filter endpoint
                method: 'GET',
                data: $(this).serialize(),
                success: function (filteredResults) {
                    var jobListContainer = $('#candidateProfiles');
                    var listStyleContainer = $('#liststyleCandidates');
                    jobListContainer.empty(); 
                    listStyleContainer.empty();
                    
                    $.each(filteredResults, function(index, job) {
                        if(job !=null){
                            
                        }
                        var profileUrl = `candidate-details/${job.user.id}/${job.user.slug}`;


                        // Create an HTML string with dynamic data
                        var candidateHtml = ` <div class="col-xxl-4 col-sm-6 d-flex" >
                        <div class="candidate-profile-card favourite text-center grid-layout mb-25">
                            <div class="cadidate-avatar online position-relative d-block m-auto"><a href="${profileUrl}" class="rounded-circle">
                            
                            <img src="{{ asset('public/images/userDp')}}/${job.user.photo}" data-src="{{ asset('public/images/userDp')}}/${job.user.photo}" alt="" class="lazy-img rounded-circle">
                            
                            </a></div>
                            <h4 class="candidate-name mt-15 mb-0"><a href="${profileUrl}" class="tran3s">${job.user.name}</a></h4>
                            <div class="candidate-post">${job.title}</div>
                            <ul class="cadidate-skills style-none d-flex flex-wrap align-items-center justify-content-center justify-content-md-between pt-30 sm-pt-20 pb-10">
                                ${job.skills ? job.skills.split(', ').slice(0, 3).map(skill => `<li>${skill}</li>`).join('') : ''}
                                ${job.skills && job.skills.split(', ').length > 3 ? `<li class="more">${job.skills.split(', ').length - 3}+</li>` : ''}
                            </ul>
                            <div class="row gx-1">
                                <div class="col-md-12">
                                    <div class="candidate-info mt-10">
                                        <span>Location</span>
                                        <div>${job.location}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="row gx-2 pt-25 sm-pt-10">
                                <div class="col-md-12">
                                    <a href="${profileUrl}" class="profile-btn tran3s w-100 mt-5">View Profile</a>
                                </div>
                            </div>
                        </div>
                        </div>
                        `;
                        var candidateHtmlList = `
                        <div class="candidate-profile-card list-layout mb-25">
                                <div class="d-flex">
                                    
                                    <div class="cadidate-avatar online position-relative d-block me-auto ms-auto"><a
                                            href="#" class="rounded-circle"><img
                                                src="{{ asset('public/images/userDp')}}/${job.user.photo}" data-src="{{ asset('public/images/userDp')}}/${job.user.photo}"
                                                alt="" class="lazy-img rounded-circle"></a></div>
                                    <div class="right-side">
                                        <div class="row gx-1 align-items-center">
                                            <div class="col-xl-3">
                                                <div class="position-relative">
                                                    <h4 class="candidate-name mb-0"><a href="#"
                                                            class="tran3s">${job.user.name}</a></h4>
                                                    <div class="candidate-post">${job.title}</div>
                                                    <ul class="cadidate-skills style-none d-flex align-items-center">
                                                        ${job.skills ? job.skills.split(', ').slice(0, 3).map(skill => `<li>${skill}</li>`).join('') : ''}
                                                         ${job.skills && job.skills.split(', ').length > 3 ? `<li class="more">${job.skills.split(', ').length - 3}+</li>` : ''}
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="col-xl-6 col-md-8 col-sm-12">
                                                <div class="candidate-info">
                                                    <span>Location</span>
                                                    <div>${job.location}</div>
                                                </div>
                                            </div>
                                            <div class="col-xl-3 col-md-4">
                                                <div class="d-flex justify-content-lg-end">
                                                    <a href="${profileUrl}"
                                                        class="profile-btn tran3s ms-md-2 mt-10 sm-mt-20">View Profile</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            `;

    
                        // Append the dynamically generated HTML to the jobListContainer
                        jobListContainer.append(candidateHtml);
                        listStyleContainer.append(candidateHtmlList);

                    });
                },
            });
        });
    });
</script>   

<script src="{{ asset('assets/vendor/jquery.min.js') }}"></script>

		<script>
			$('.login').on('click',function(){
				toastr.error('Please login first to see search results !');
			})
		</script>

<script>
	$('.package').on('click',function(){
		toastr.error('Please purchase package to see results !');
		window.location.href ="{{route('pricing')}}";
	})
</script>
    
@endsection