@extends('layouts.web-main')
@section('content')
		<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">Job Listing </h2>
                            </div>
							<p class="text-lg text-white mt-30 lg-mt-20 mb-35 lg-mb-20">We delivered blazing fast & striking work solution</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('all-jobs')}}" 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="title">
													@php
														$uniqueJobTitles = [];
													@endphp
												
													@foreach($job_filter as $job)
														@if (!in_array($job->job_title, $uniqueJobTitles))
															@php
																$uniqueJobTitles[] = $job->job_title;
															@endphp
															<option value="{{ $job->job_title }}">{{ $job->job_title }}</option>
														@endif
													@endforeach
														{{-- <option value="2">Content creator</option>
														<option value="3">Web Developer</option>
														<option value="4">SEO Guru</option>
														<option value="5">Digital marketer</option> --}}
													</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="category">
													    
													@php
														$uniqueCategories = [];
													@endphp
												
													@foreach($job_filter as $job)
														@if (!in_array($job->category, $uniqueCategories))
															@php
																$uniqueCategories[] = $job->job_category;
															@endphp
															<option value="{{ $job->job_category }}">{{ $job->job_category }}</option>
														@endif
													@endforeach

														{{-- <option value="2">Design & Creative</option>
														<option value="3">It & Development</option>
														<option value="4">Web & Mobile Dev</option>
														<option value="5">Writing</option>
														<option value="6">Sales & Marketing</option>
														<option value="7">Music & Audio</option> --}}
													</select>
												</div>
											</div>
											<div class="col-md-3">
												<button class="fw-500 text-uppercase h-100 tran3s search-btn">Search</button>
											</div>
										</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 -->


		<!-- 
		=============================================
			Job Listing Three
		============================================== 
		-->
		<section class="job-listing-three 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>
                             <form method="GET" id="applyfilter">
                               @csrf
                            <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="#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="get_location" name="get_location">
                                                <option></option>
											@php
												$uniqueLocations = [];
											@endphp
										
											@foreach($job_filter as $job)
												@if (!in_array($job->location, $uniqueLocations))
													@php
														$uniqueLocations[] = $job->location;
													@endphp
													<option value="{{ $job->location}}">{{ $job->location }}</option>
												@endif
											@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="#collapseJobType" role="button" aria-expanded="false">Job Type</a>
                                    <div class="collapse show" id="collapseJobType">
                                        <div class="main-body">
											<ul class="style-none filter-input">
												<li>
													<input type="checkbox" id="JobType" name="JobType[]" value="Fixed-Price">
													<label>Fixed-Price <span>{{$count_fixed}}</span></label>
												</li>
												<li>
													<input type="checkbox" id="JobType" name="JobType[]" value="Full time">
													<label>Fulltime <span>{{$count_full_time}}</span></label>
												</li>
												<li>
													<input type="checkbox" id="JobType" name="JobType[]" value="Part-time">
													<label>Part-time (20hr/week) <span>{{$count_part_time}}</span></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" data-bs-toggle="collapse" href="#collapseExp" role="button" aria-expanded="false">Experience</a>
                                    <div class="collapse show" id="collapseExp">
                                        <div class="main-body">
											<ul class="style-none filter-input">
												<li>
													<input type="checkbox" name="Experience[]" value="No-Experience">
													<label>Fresher <span>{{$count_fresh}}</span></label>
												</li>
												<li>
													<input type="checkbox" name="Experience[]" value="Intermediate">
													<label>Intermediate <span>{{$count_intermediate}}</span></label>
												</li>
												<li>
													<input type="checkbox" name="Experience[]" value="Expert">
													<label>Expert <span>{{$count_expert}}</span></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" data-bs-toggle="collapse" href="#collapseSalary" role="button" aria-expanded="false">Salary</a>
                                    <div class="collapse show" 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" id="min_price" name="minPrice" 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" id="max_price" name="maxPrice" value="700000" 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" class="range-min"  min="0" max="950" value="0" step="10">
													<input type="range" class="range-max"  min="0" max="1000" value="300" step="10">
												</div>
											</div>
											<!--<ul class="style-none d-flex flex-wrap justify-content-between radio-filter mb-5">-->
											<!--	<li>-->
											<!--		<input type="radio" name="jobDuration" value="Weekly">-->
											<!--		<label>Weekly</label>-->
											<!--	</li>-->
											<!--	<li>-->
											<!--		<input type="radio" name="jobDuration" value="Monthly">-->
											<!--		<label>Monthly</label>-->
											<!--	</li>-->
											<!--	<li>-->
											<!--		<input type="radio" name="jobDuration" value="Hourly">-->
											<!--		<label>Hourly</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="#collapseCategory" role="button" aria-expanded="false">Category</a>
                                    <div class="collapse" id="collapseCategory">
                                        <div class="main-body">
											<ul class="style-none filter-input">

											    	    @php
                                                        $uniqueCategories = [];
                                                        $categoryCounts = [];
                                                        @endphp
                                                        
                                                        @foreach($job_filter as $job)
                                                            @if (!in_array($job->job_category, $uniqueCategories))
                                                                @php
                                                                    $uniqueCategories[] = $job->job_category;
                                                                    $categoryCounts[$job->job_category] = 1;
                                                                @endphp
                                                            @else
                                                                @php
                                                                    $categoryCounts[$job->job_category]++;
                                                                @endphp
                                                            @endif
                                                            <li>
                                                                <input type="checkbox" name="categories" value="{{ $job->job_category }}">
                                                                <label>{{ $job->job_category }} <span>{{ $categoryCounts[$job->job_category] }}</span></label>
                                                            </li>
                                                        @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="#collapseTag" role="button" aria-expanded="false">Tags</a>
                                    <div class="collapse" id="collapseTag">
                                        <div class="main-body">
											<ul class="style-none d-flex flex-wrap justify-space-between radio-filter mb-5">

												@php
											$uniqueSkills = [];
										@endphp

										@foreach($job_filter as $job)
											@php
												$jobSkills = explode(',', $job->skills);
											@endphp

											@foreach($jobSkills as $skill)
												@if (!in_array($skill, $uniqueSkills))
													@php
														$uniqueSkills[] = $skill;

														@endphp
												<li>
													<input type="checkbox" name="tags[]" value="{{$skill}}">
													<label>{{$skill}}</label>
												</li>
												@endif
												@endforeach
											@endforeach
											</ul>
                                        </div>
                                    </div>
                                </div>
                                <!-- /.filter-block -->

								<button type="submit" class="btn-ten fw-500 text-white w-100 text-center tran3s mt-30">Apply Filter</button>
								</form>
                            </div>
                            
                        </div>
                        <!-- /.filter-area-tab -->
                    </div>


					<div class="col-xl-9 col-lg-8">
						<div class="job-post-item-wrapper 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">{{$count_jobs}}</span> jobs 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" title="Active List"><i class="bi bi-list"></i></button>
									<button class="style-changer-btn text-center rounded-circle tran3s ms-2 grid-btn active" title="Active Grid"><i class="bi bi-grid"></i></button>
								</div>
							</div>
							<!-- /.upper-filter -->
							<div class="accordion-box list-style show" id="appenddata">
								@foreach($jobs as $job)
								<div class="job-list-one style-two position-relative border-style mb-20" >
									<div class="row justify-content-between align-items-center"  >
										<div class="col-md-5">                                      
											<div class="job-title d-flex align-items-center">
												@if(!empty($job->get_employer->photo))
													<a href="{{ route('job-details', ['id' => $job->id ,'slug' => $job->slug]) }}" class="logo"><img src="{{ asset('images/userDp') }}/{{$job->get_employer->photo}}" data-src="{{ asset('public/images/userDp') }}/{{$job->get_employer->photo}}" alt="" class="lazy-img m-auto"></a>
												@else
													<a href="{{ route('job-details', ['id' => $job->id ,'slug' => $job->slug]) }}" class="logo"><img src="{{ asset('assets/images/lazy.svg') }}" data-src="{{ asset('images/logo/media_22.png') }}" alt="" class="lazy-img m-auto"></a>
												@endif
												<div class="split-box1">
													<a href="{{ route('job-details', ['id' => $job->id ,'slug' => $job->slug]) }}" class="job-duration fw-500">{{$job->job_type}}</a>
													<a href="{{ route('job-details', ['id' => $job->id ,'slug' => $job->slug]) }}" class="title fw-500 tran3s">{{$job->job_title}}.</a>
												</div>
											</div>
										</div>
										<div class="col-md-4 col-sm-6">
											<div class="job-location">
												<a href="{{ route('job-details', ['id' => $job->id ,'slug' => $job->slug]) }}">{{$job->location}}</a>
											</div>
											<div class="job-salary"><span class="fw-500 text-dark">${{$job->min_salary}}-${{$job->max_salary}}</span> / {{$job->salary}}</div>
										</div>
										<div class="col-md-3 col-sm-6">
											<div class="btn-group d-flex align-items-center justify-content-sm-end xs-mt-20">
												<a href="javascript:void(0)" class="save-btn text-center rounded-circle tran3s me-3 savejob" data-id="{{$job->id}}" title="Save Job"><i class="bi bi-bookmark-dash"></i></a>
												<a href="{{ route('job-details', ['id' => $job->id ,'slug' => $job->slug]) }}" class="apply-btn text-center tran3s">View</a>
											</div>
										</div>
									</div>
								</div>
								@endforeach

							</div>

							
							<div class="accordion-box grid-style">
								<div class="row" id="appendBox">
									
									@foreach($jobs as $job)
									<div class="col-sm-6 mb-30">
										<div class="job-list-two style-two position-relative">
											@if(!empty($job->get_employer->photo))
													<a href="{{ route('job-details', ['id' => $job->id ,'slug' => $job->slug]) }}" class="logo"><img src="{{ asset('images/userDp') }}/{{$job->get_employer->photo}}" data-src="{{ asset('public/images/userDp') }}/{{$job->get_employer->photo}}" alt="" class="lazy-img m-auto"></a>
											@else
													<a href="{{ route('job-details', ['id' => $job->id ,'slug' => $job->slug]) }}" class="logo"><img src="{{ asset('assets/images/lazy.svg') }}" data-src="{{ asset('images/logo/media_22.png') }}" alt="" class="lazy-img m-auto"></a>
											@endif
											<a href="javascript:void(0)" class="save-btn text-center rounded-circle tran3s savejob"  data-id="{{$job->id}}" title="Save Job"><i class="bi bi-bookmark-dash"></i></a>
											<div><a href="{{ route('job-details', ['id' => $job->id ,'slug' => $job->slug]) }}" class="job-duration fw-500 part-time">{{$job->job_type}}</a></div>
											<div><a href="{{ route('job-details', ['id' => $job->id ,'slug' => $job->slug]) }}" class="title fw-500 tran3s">{{$job->job_title}}</a></div>
											<div class="job-salary"><span class="fw-500 text-dark">${{$job->min_salary}}-${{$job->max_salary}}</span> / {{$job->salary}}</div>
											<div class="d-flex align-items-center justify-content-between mt-auto">
												<div class="job-location"><a href="{{ route('job-details', ['id' => $job->id ,'slug' => $job->slug]) }}">{{$job->location}}</a></div>
												<a href="{{ route('job-details', ['id' => $job->id ,'slug' => $job->slug]) }}" class="apply-btn text-center tran3s">View</a>
											</div>
										</div> 
									</div>
									@endforeach
								</div>
							</div>
							<!-- /.accordion-box -->

							<div class="pt-30 lg-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">7,096</span></p>
								<ul class="pagination-one d-flex align-items-center justify-content-center justify-content-sm-start 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="#">4</a></li>
									<li>....</li>
									<li class="ms-2"><a href="#" class="d-flex align-items-center">Last <img src="images/icon/icon_50.svg" alt="" class="ms-2"></a></li>
								</ul>
							</div>
						</div>
						<!-- /.job-post-item-wrapper -->
					</div>
					<!-- /.col- -->
                </div>
            </div>
		</section>
		<!-- ./job-listing-three -->
        <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>
        <script src="{{ asset('assets/vendor/jquery.min.js') }}"></script>

		<script>
			$(".savejob").click(function(){
				var dataId = $(this).attr("data-id");
				$.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            url: '{{ route('savejob') }}',
            type: 'GET',
            data: { dataId: dataId },
            success: function(response) {
                if (response.status == 401) {
                    toastr.error(response.message);
                }
                // Update the heart icon after adding to the wishlist
                if (response.status == 200) {
                    toastr.success(response.message);
                }
                if (response.status == 202) {
                    toastr.success(response.message);
                }
				if (response.status == 419) {
                    toastr.error(response.message);
                }
            }
        });
	});
		</script>
		<script>
	
	$(document).ready(function () {
    // Event handler for the "Apply Filter" button
    $('#applyfilter').submit(function (e) {
         e.preventDefault();
        // Make an AJAX request to the server
        $.ajax({
            url: "{{ route('filter-jobs') }}",  // Create a route for this in your routes/web.php
            method: 'GET',
			data:  $(this).serialize(),
		success: function (filteredJobs) {
			var jobListContainer = $('#appenddata');
			var jobBox = $("#appendBox");
			jobBox.empty();
			jobListContainer.empty(); // Clear the container

		$.each(filteredJobs, function(index, job) {
			var jobDetailsURL = '{{ route("job-details", ["id" => ":jobId", "slug" => ":jobSlug"]) }}';
        var jobHtml = '<div">' +
        	'<div class="job-list-one style-two position-relative border-style mb-20" >'+
            '<div class="row justify-content-between align-items-center">' +
            '<div class="col-md-5">' +
            '<div class="job-title d-flex align-items-center">' +
            '<a href="' + jobDetailsURL.replace(":jobId", job.id).replace(":jobSlug", job.slug) + '" class="logo">';
            if (job.get_employer.photo) {
                jobHtml += '<img src="{{ asset("public/images/userDp") }}/' + job.get_employer.photo + '" data-src="{{ asset("public/images/userDp") }}/' + job.get_employer.photo + '" alt="" class="lazy-img m-auto">';
            } else {
                jobHtml += '<img src="{{ asset("assets/images/lazy.svg") }}" data-src="{{ asset("images/logo/media_22.png") }}" alt="" class="lazy-img m-auto">';
            }
            jobHtml += '</a>' +
            '<div class="split-box1">' +
            '<a href="' + jobDetailsURL.replace(":jobId", job.id).replace(":jobSlug", job.slug) + '" class="job-duration fw-500">' + job.job_type + '</a>' +
            '<a href="' + jobDetailsURL.replace(":jobId", job.id).replace(":jobSlug", job.slug) + '" class="title fw-500 tran3s">' + job.job_title + '.</a>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '<div class="col-md-4 col-sm-6">' +
            '<div class="job-location">' +
            '<a href="' + jobDetailsURL.replace(":jobId", job.id).replace(":jobSlug", job.slug) + '">' + job.location + '</a>' +
            '</div>' +
            '<div class="job-salary"><span class="fw-500 text-dark">$' + job.min_salary + '-$' + job.max_salary + '</span> / ' + job.salary + '</div>' +
            '</div>' +
            '<div class="col-md-3 col-sm-6">' +
            '<div class="btn-group d-flex align-items-center justify-content-sm-end xs-mt-20">' +
            '<a href="javascript:void(0)" class="save-btn text-center rounded-circle tran3s me-3 savejob" data-id="' + job.id + '" title="Save Job"><i class="bi bi-bookmark-dash"></i></a>' +
            '<a href="' + jobDetailsURL.replace(":jobId", job.id).replace(":jobSlug", job.slug) + '"]) }}" class="apply-btn text-center tran3s">View</a>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>'+
            '</div>';
			
			var jobDetailsURL = '{{ route("job-details", ["id" => ":jobId", "slug" => ":jobSlug"]) }}';
        var jobBoxHtml = `<div class="col-sm-6 mb-30">
							<div class="job-list-two style-two position-relative">
						
													<a href="{{ route('job-details', ['id' => $job->id ,'slug' => $job->slug]) }}" class="logo"><img src="{{ asset('assets/images/lazy.svg') }}" data-src="{{ asset('images/logo/media_22.png') }}" alt="" class="lazy-img m-auto"></a>
										
											<a href="javascript:void(0)" class="save-btn text-center rounded-circle tran3s savejob"  data-id="{{$job->id}}" title="Save Job"><i class="bi bi-bookmark-dash"></i></a>
											<div><a href="{{ route('job-details', ['id' => $job->id ,'slug' => $job->slug]) }}" class="job-duration fw-500 part-time">${job.job_type}</a></div>
											<div><a href="{{ route('job-details', ['id' => $job->id ,'slug' => $job->slug]) }}" class="title fw-500 tran3s">${job.job_title}</a></div>
											<div class="job-salary"><span class="fw-500 text-dark">${job.min_salary}-${job.max_salary}</span> / {{$job->salary}}</div>
											<div class="d-flex align-items-center justify-content-between mt-auto">
												<div class="job-location"><a href="{{ route('job-details', ['id' => $job->id ,'slug' => $job->slug]) }}">${job.location}</a></div>
												<a href="{{ route('job-details', ['id' => $job->id ,'slug' => $job->slug]) }}" class="apply-btn text-center tran3s">View</a>
											</div>
										</div> 
									</div>`;

        jobListContainer.append(jobHtml);
		jobBox.append(jobBoxHtml);
    });
},

            // error: function (error) {
            //     console.error('AJAX request failed:', error);
            // },
        });
    });
});



</script>
@endsection