@extends('front.layouts.main')


@section('title'){{ @trans('seo.empower_jobs_title') }}@endsection

@section('description'){{ @trans('seo.empower_jobs_desc') }}@endsection


@section('content')
<main class="job-list-page">
    <div class="container mt-5">
        <div class="fixed-wrapper d-md-none">
            <div class="form-group mb-0 select transparent without-label d-block d-md-none"><i class="gray material-icons">import_export</i>
                <select class="gray m-0 p-0 second_sort">
                    <option value="0" @if(app('request')->input('sort') == "0")) selected @endif>Latest Jobs</option>
                    <option value="1" @if(app('request')->input('sort') == "1")) selected @endif>Date Ascending</option>
                    <option value="2" @if(app('request')->input('sort') == "2")) selected @endif>Date Descending</option>
                </select>
            </div>
            <a href="#filter-modal" class="gray filter-btn border-left" data-toggle="modal" data-target="#filter-modal">
                <i class="gray material-icons mr-1">filter_list</i> Filter
            </a>
        </div>
        <div class="row">
            <div class="col-lg-3 col-md-4">
                <div class="sidebar left modal" id="filter-modal">
                    <div class="modal-content border-0 bg-transparent">
                        <div class="modal-body p-0">
                            <div class="title-wrapper">
                                <h3 class="h3-title h3">Search Jobs</h3>
                                <a href="{{route('front.job.index')}}" class="clear-link float-right title-act gray"><i class="material-icons">refresh</i> Clear</a>
                            </div>
                            <form autocomplete="off" name="filter" id="filter">
                                <div class="form-group search-input">
                                    <img src="{{asset('img/ic_search.png')}}" srcset="{{asset('img/ic_search@2x.png')}} 2x" alt="search">
                                    <input type="text" name="search" placeholder="Search Jobs" value="{{app('request')->input('search')}}" class="form-control">
                                </div>

                                <div class="title-wrapper">
                                    <h3 class="h3-title h3">Filter Results</h3>
                                </div>

                                <div class="form-group select">
                                    <label class="control-label">Location</label>
                                    <select id="location" name="location" class="form-control select-two js-data-example-ajax">

                                    </select>
                                </div>
                                <div class="form-group select">
                                    <label class="control-label">Industry</label>
                                    <select name="industry" id="industry" class="form-control select-two js-category-data-ajax">
                                        <option value="" hidden>Select option</option>
                                        @foreach($jobIndustries as $key => $industry)
                                        <option value="{{$industry->id}}" @if(app('request')->input('industry') == $industry->id) selected="select" @endif >{{$industry->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="control-label d-block">Job Type</label>
                                    <div class="switch-wrapper">
                                        <label class="switch">
                                            <input name="type[]" value="1" type="checkbox" @if(app('request')->input('type')) @if(in_array("1",app('request')->input('type'))) checked @endif @endif>
                                            <span class="slider round"></span>
                                        </label><span class="gray ml-2 switch-name">Full Time</span>
                                    </div>
                                    <div class="switch-wrapper">
                                        <label class="switch">
                                            <input name="type[]" value="2" type="checkbox" @if(app('request')->input('type')) @if(in_array("2",app('request')->input('type'))) checked @endif @endif>
                                            <span class="slider round"></span>
                                        </label><span class="gray ml-2">Temporary</span>
                                    </div>
                                    <div class="switch-wrapper">
                                        <label class="switch">
                                            <input name="type[]" value="3" type="checkbox" @if(app('request')->input('type')) @if(in_array("3",app('request')->input('type'))) checked @endif @endif>
                                            <span class="slider round"></span>
                                        </label><span class="gray ml-2">Internship</span>
                                    </div>
                                </div>
                                <div class="form-group select">
                                    <label class="control-label">Category</label>
                                    <select name="job_category" id="job_category" class="form-control select-two js-category-data-ajax">
                                        <option value="" hidden>Select option</option>
                                        @foreach($jobCategories as $key => $category)
                                        <option value="{{$category->id}}" @if(app('request')->input('job_category') == $category->id) selected="select" @endif >{{$category->name}}</option>
                                        @endforeach
                                    </select>
                                </div>


                                <div class="form-group select">
                                    <label class="control-label">Job Level</label>
                                    <select name="level" id="level" class="form-control select-two js-category-data-ajax">
                                        <option value="" hidden>Select</option>
                                        @foreach($jobLevels as $jobLevel)
                                        <option @if(app('request')->input('level') == $jobLevel->level->id) selected="select" @endif value="{{$jobLevel->level->id}}">{{$jobLevel->level->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <input type="hidden" name="sort" value="{{app('request')->input('sort')}}">
                                <input type="submit" class="btn btn-transparent" value="Search">
                                <a href="{{route('front.job.index')}}" class="btn btn-bordered"><i class="material-icons">refresh</i> Clear</a>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-9 col-md-8 mt-3 mt-md-0">
                <div class="main-content tab-content">
                    <div id="all" class="tab-pane fade mb-0 show active">
                        <div class="title-wrapper">
                            <h3 class="h3 h3-title mt-0">Empower Jobs <span class="gray ml-2">Viewing {{$allJobs->total()}} jobs</span></h3>
                            <div class="form-group mb-0 select btm-arrow float-right transparent without-label d-none d-md-block">
                                <form name="filter">
                                    <input name="search" id="hid_search" type="hidden" value="{{app('request')->input('search')}}">
                                    <input name="location" id="hide_location" type="hidden" value="{{app('request')->input('location')}}">
                                    <input name="job_category" id="hid_job_category" type="hidden" value="{{app('request')->input('job_category')}}">
                                    <input name="industry" id="hid_industry" type="hidden" value="{{app('request')->input('industry')}}">
                                    <input name="type[]" id="hid_fulltime" type="hidden" @if(app('request')->input('type')) @if(in_array("1",app('request')->input('type'))) value="1" @endif @endif>
                                    <input name="type[]" id="hid_temp" type="hidden" @if(app('request')->input('type')) @if(in_array("2",app('request')->input('type'))) value="2" @endif @endif>
                                    <input name="type[]" id="hid_intern" type="hidden" @if(app('request')->input('type')) @if(in_array("3",app('request')->input('type'))) value="3" @endif @endif>
                                    <input name="level" id="hid_level" type="hidden" value="{{app('request')->input('level')}}">

                                    <label class="gray mr-2">Sort by</label>
                                    <select class="gray" name="sort" onchange="this.form.submit()">
                                        <option value="0" @if(app('request')->input('sort') == "0") selected @endif>Latest Jobs</option>
                                        <option value="1" @if(app('request')->input('sort') == "1") selected @endif>Date Ascending</option>
                                        <option value="2" @if(app('request')->input('sort') == "2") selected @endif>Date Descending</option>
                                    </select>
                                </form>
                            </div>
                        </div>

                        @if($allJobs->count() == 0 && empty(app('request')->input()))
                        <div class="m-5 p5 text-center">
                            <img src="{{asset('/img/no-recommendation.png')}}" srcset="{{asset('/img/no-recommendation@2x.png')}} 2x" height="200" alt="Update Filter" class="mt-5">
                            <h3 class="h3 h3-title">Jobs Not Found</h3>
                            <p>Sorry, no job available at the moment!</p>
                        </div>
                        @elseif($allJobs->count() == 0 && !empty(app('request')->input()))
                        <div class="m-5 p5 text-center">
                            <img src="{{asset('/img/update-filter.png')}}" srcset="{{asset('/img/update-filter@2x.png')}} 2x" height="200" alt="Update Filter" class="mt-5">
                            <h3 class="h3 h3-title">Jobs Not Found</h3>
                            <p>We are not able to find the suitable job for your applied filter.</p>
                            <p><a href="{{route('front.job.index')}}" class="btn btn-transparent">Clear Filter</a></p>
                        </div>
                        @else
                        @foreach($allJobs as $key => $job)
                        <div class="box white job-list">
                            <h3 class="border-0">{{$job->nameformatted}}</h3>
                            <div class="row">
                                <div class="col-lg-9 col-md-12">
                                    <div class="tags d-flex align-items-center flex-wrap">
                                        @if($job->city)<p><i class="material-icons">room</i> {{$job->city->name}}</p>@endif
                                        @if($job->type)<p><i class="material-icons">business_center</i> {{$job->type->name}}</p>@endif
                                        @if($job->level)<p><i class="material-icons">bookmark</i> {{$job->level->name}}</p>@endif
                                    </div>
                                    <div class="tags d-flex align-items-center flex-wrap">
                                        @if($job->min_requirements->industry1)<p><i class="material-icons">business</i> {{$job->min_requirements->industry1->name}}@if($job->min_requirements->industry2), {{$job->min_requirements->industry2->name}} @endif </p>@endif
                                        @if($job->min_requirements && !$job->min_requirements->industry1 && !$job->min_requirements->industry2 && $job->pref_requirements && $job->pref_requirements->industry1) <p>
                                            <i class="material-icons">business</i> 
                                            {{$job->pref_requirements->industry1->name}}@if($job->pref_requirements->industry2), {{$job->pref_requirements->industry2->name}} @endif </p>
                                            @endif
                                    </div>
                                    <div class="chips d-flex align-items-center flex-wrap">
                                        @if($job->min_requirements->category1)<span class="em-chip">{{$job->min_requirements->category1->name}}</span>@endif
                                        @if($job->min_requirements->category2)<span class="em-chip">{{$job->min_requirements->category2->name}}</span>@endif

                                        @if($job->min_requirements && !$job->min_requirements->category1 && !$job->min_requirements->category2 && 
                                            $job->pref_requirements && ($job->pref_requirements->category1 || $job->pref_requirements->category2))
                                            @if($job->pref_requirements->category1)<span class="em-chip">{{$job->pref_requirements->category1->name}}</span>@endif
                                            @if($job->pref_requirements->category2)<span class="em-chip">{{$job->pref_requirements->category2->name}}</span>@endif
                                        @endif
                                            
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-12 apply-now-wrap text-lg-right mt-lg-auto mt-3">
                                    <a href="{{route('front.job.detail',['slug' => $job->slug.'-'.$job->unique_id])}}" class="btn btn-transparent">View Details</a>
                                    <p class="gray mb-0"><i class="material-icons">access_time</i> Expiring @if($job->remaining_days == 2) Tomorrow @elseif($job->remaining_days == 1) Today @else in {{$job->remaining_days}} Days @endif</p>
                                </div>
                            </div>
                            <div class="box-actbar d-flex justify-content-between flex-wrap">
                                <a href="{{route('front.job.downloadjob',['slug' => $job->slug.'-'.$job->unique_id])}}" class="gray"><i class="material-icons">picture_as_pdf</i> Download as PDF</a>
                                <div class="share ml-2">
                                    <label class="gray mb-0">Share This Job</label>
                                    <a target="_blank" href="{{config('laravel-share.services.whatsapp.uri').route('front.job.detail',['slug' => $job->slug.'-'.$job->unique_id])}}"><img src="{{asset('img/whatsapp.svg')}}" alt="whatsapp"></a>
                                    <a target="_blank" href="{{config('laravel-share.services.facebook.uri').route('front.job.detail',['slug' => $job->slug.'-'.$job->unique_id])}}"><img src="{{asset('img/facebook-clr.svg')}}" alt="facebook"></a>
                                    <a target="_blank" href="{{config('laravel-share.services.twitter.uri').route('front.job.detail',['slug' => $job->slug.'-'.$job->unique_id])}}"><img src="{{asset('img/twitter-clr.svg')}}" alt="twitter"></a>
                                    <a target="_blank" href="{{config('laravel-share.services.linkedin.uri').route('front.job.detail',['slug' => $job->slug.'-'.$job->unique_id])}}"><img src="{{asset('img/linkedin-clr.svg')}}" alt="linkedin"></a>
                                </div>
                            </div>
                        </div>
                        @endforeach
                        {{ $allJobs->onEachSide(7)->links('front.common.pagination') }}
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection
@push('pageCss')
<script>
    $baseUrl = "{{url('/')}}";
</script>
@endpush
@push('pageJs')
<script type="text/javascript" src="{{asset('js/front/jobs/jobs.js')}}"></script>
@endpush
@push('pageJs')
<script type="text/javascript">
    $(document).ready(function() {

        $('.js-data-example-ajax').on('change', function() {
            $(this).valid();
        });
        $('.js-data-example-ajax').select2({
            placeholder: 'Select an option',
            minimumInputLength: 3,
            allowClear: true,
            dropdownParent: $('#filter-modal .modal-content'),
            ajax: {
                delay: 250,
                url: '{{route("city.ajaxSearch")}}',
                dataType: 'json',
                data: function(params) {
                    var query = {
                        search: params.term
                    }
                    return query;
                },
                processResults: function(response) {
                    return {
                        results: response,
                    };
                }
            }
        });
        $('.js-category-data-ajax').select2({
            placeholder: 'Select an option',
            allowClear: true,
            dropdownParent: $('#filter-modal .modal-content'),
        });

        @if(!empty($city))
        var data = {
            id: "{{$city->id}}",
            text: "{{$city->name}}"
        };
        var newOption = new Option(data.text, data.id, true, true);
        $('#location').append(newOption).trigger('change');
        @endif
    });

    function options(elementId, data, selected) {

        $(elementId).empty();

        $(elementId).append('<option value="" hidden>Select</option>')
        jQuery.each(data, function(i, val) {
            $(elementId).append('<option value="' + val.id + '" >' + val.name + '</option>');
        });
        if (selected != undefined) {
            $(elementId).val(selected);
        }
    }

    $(document).on('change', '.second_sort', function() {

        $('select[name="sort"]').val($(this).val()).trigger('change');
    })
</script>
@endpush