@extends($activeTemplate.'layouts.frontend')
@section('content')
<div class="search-job-area section--bg2">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <form method="GET" class="job-search-form">
                    <div class="row gy-4">
                        <div class="col-md-5 col-sm-6">
                            <div class="custom-icon-field">
                                <i class="las la-search"></i>
                                <select class="form--control" name="city">
                                    <option value="">@lang('Select City')</option>
                                    @foreach($cities as $city)
                                    <option value="{{$city->id}}" data-locations='@json($city->address)' @selected($city->id==request()->city)>
                                        {{__($city->name)}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-5 col-sm-6">
                            <div class="custom-icon-field">
                                <i class="las la-map-marker-alt"></i>
                                <select class="form--control" name="location">
                                    <option>@lang('Select One')</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <button type="submit" class="btn btn--base">@lang('Search')</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- search result section start -->
<section class="pt-50 pb-50 section--bg">
    <div class="container">
        <div class="row gy-4">
            <div class="col-lg-3">
                <button class="action-sidebar-open"><i class="las la-sliders-h"></i>@lang('Filter')</button>
                <div class="action-sidebar">
                    <button class="action-sidebar-close"><i class="las la-times"></i></button>
                    <div class="action-widget pt-0">
                        <h4 class="action-widget__title">@lang('Search by keyword')</h4>
                        <div class="action-widget__body">
                            <form action="{{route('job.filter')}}" method="GET" class="search-form-inline">
                                <div class="input-group">
                                    <input type="text" name="search"  autocomplete="off"
                                        class="form--control form-control-sm" placeholder="@lang('Search here')">
                                    <button type="submit" class="input-group-text">
                                        <i class="las la-search"></i>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <form action="{{route('job.filter')}}" method="GET">
                        <div class="action-widget">
                            <h4 class="action-widget__title">@lang('Category')</h4>
                            <div class="action-widget__body">
                                @foreach($categories as $category)
                                <div
                                    class="form-check custom--checkbox d-flex justify-content-between align-items-center">
                                    <div class="left">
                                        <input class="form-check-input category-check" type="checkbox" value="{{$category->id}}" name="category[]" id="category_{{$category->id}}"
                                            @if(@in_array($category->id, @request()->category ?? [])) checked @endif>
                                        <label class="form-check-label" for="category_{{$category->id}}">{{__($category->name)}}</label>
                                    </div>
                                    <span class="fs--14px">({{$category->job->count()}})</span>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="action-widget">
                            <h4 class="action-widget__title">@lang('Job Nature')</h4>
                            <div class="action-widget__body">
                                @foreach($jobTypes as $jobType)
                                <div
                                    class="form-check custom--checkbox d-flex justify-content-between align-items-center">
                                    <div class="left">
                                        <input class="form-check-input jobType" type="checkbox" value="{{$jobType->id}}"
                                            name="job_type[]" id="jobType.{{$jobType->id}}" @if(@in_array($jobType->id,request()->job_type ?? [])) checked @endif>
                                        <label class="form-check-label" for="jobType.{{$jobType->id}}">
                                            {{__($jobType->name)}}
                                        </label>
                                    </div>
                                    <span class="fs--14px">({{$jobType->job->count()}})</span>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="action-widget">
                            <h4 class="action-widget__title">@lang('Job Shift')</h4>
                            <div class="action-widget__body">
                                @foreach($jobShifts as $jobShift)
                                <div
                                    class="form-check custom--checkbox d-flex justify-content-between align-items-center">
                                    <div class="left">
                                        <input class="form-check-input jobShift" value="{{$jobShift->id}}"
                                            type="checkbox" name="job_shift[]" id="shift.{{$jobShift->id}}"
                                            @if(@in_array($jobShift->id, @request()->job_shift ?? [])) checked @endif>
                                        <label class="form-check-label" for="shift.{{$jobShift->id}}">
                                            {{__($jobShift->name)}}
                                        </label>
                                    </div>
                                    <span class="fs--14px">({{$jobShift->job->count()}})</span>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="action-widget">
                            <h4 class="action-widget__title">@lang('Experience Range')</h4>
                            <div class="action-widget__body">
                                @foreach($jobExperiences as $jobExperience)
                                <div
                                    class="form-check custom--checkbox d-flex justify-content-between align-items-center">
                                    <div class="left">
                                        <input class="form-check-input jobExperience" type="checkbox"
                                            value="{{$jobExperience->id}}" name="job_experience[]"
                                            id="experience.{{$jobExperience->id}}" @if(@in_array($jobExperience->id,
                                        @request()->job_experience ?? [])) checked @endif>
                                        <label class="form-check-label" for="experience.{{$jobExperience->id}}">
                                            {{$jobExperience->name}}
                                        </label>
                                    </div>
                                    <span class="fs--14px">({{$jobExperience->job->count()}})</span>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </form>
                    <div class="action-widget bg--base mt-4 text-center rounded-3 p-4">
                        <h4 class="text-white">@lang('Want a great job opportunity')</h4>
                        <a href="{{route('user.register')}}" class="btn bg-white mt-4">@lang('Join')
                            {{$general->sitename}} @lang('Now')!
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-9 ps-lg-4">
                @foreach($jobs as $job)
                <div class="job-card @if($job->featured == 1) featured @endif has--link">
                    <a href="{{route('job.detail', $job->id)}}" class="item--link"></a>
                    <div class="job-card__top d-flex flex-wrap">
                        <div class="left">
                            <h3 class="job-card__title"><a
                                    href="{{route('job.detail', $job->id)}}">{{__($job->title)}}</a></h3>
                            <ul class="job-card__meta d-flex flex-wrap align-items-center mt-1">
                                <li><strong>{{__($job->employer->company_name)}}</strong></li>
                                <li><i class="las la-map-marker fs--18px"></i> {{__($job->location->name)}},
                                    {{__($job->city->name)}}
                                </li>
                            </ul>
                        </div>
                        <div class="job-card__bookmark text-end">
                            <button type="button" class="bookmark-btn">
                                <span class="non-bookmark"><i class="far fa-bookmark"></i></span>
                                <span class="bookmarked-active"><i class="fas fa-bookmark"></i></span>
                            </button>
                        </div>
                    </div>
                    <p class="job-card__description mt-3">{{strLimit(strip_tags($job->description), 300)}}</p>
                    <div class="row mt-3">
                        <div class="col-6">
                            <strong class="d-inline-block">@lang('Post'): {{diffForHumans($job->created_at)}}</strong>
                        </div>
                        <div class="col-6 text-end">
                            <i class="las la-calendar-alt fs--18px"></i> @lang('Deadline'):
                            <strong>{{showDateTime($job->deadline, 'd M Y')}}</strong>
                        </div>
                    </div>
                </div>
                @endforeach
                @if ($jobs->hasPages())
                <div class="mt-4">
                    {{ paginateLinks($jobs) }}
                </div>
                @endif
            </div>
        </div>
    </div>
</section>
@endsection

@push('script')
<script>
    "use strict";


    $('.jobType').on('click', function () {
        this.form.submit();
    });

    $('.jobShift').on('click', function () {
        this.form.submit();
    });

    $('.jobExperience').on('click', function () {
        this.form.submit();
    });

    function changeCity (locationId=null) {
        var locations = $('select[name=city] :selected').data('locations');
        var html = '<option value="" selected="" disabled="">@lang('Select One')</option>';
        locations.forEach(function myFunction(item, index) {
            html += `<option value="${item.id}" ${locationId==item.id ? 'selected' : ''}>${item.name}</option>`
        });
        $('select[name=location]').html(html);
    };

    $('select[name=city]').on('change', function () {
        changeCity();
    });

    @if(request()->location)
        changeCity("{{ request()->location }}");
    @endif

    $('.action-widget__title').each(function () {
        let ele = $(this).siblings('.action-widget__body');
        $(this).on('click', function () {
            ele.slideToggle();
        });
    });

    $('.category-check').on('click', function () {
        this.form.submit();
    });
</script>
@endpush