@extends('front.layouts.main')
@section('title')Empoweb Jobs @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="1" @if(app('request')->input('sort') == "1") selected @endif>Recent Activity</option>
                    <option value="2" @if(app('request')->input('sort') == "2") selected @endif>Recently Applied</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.traker')}}" 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 btm-arrow">
                                    <label class="control-label">Application Status</label>
                                    <select name="status" class="form-control">
                                        <option @if(app('request')->input('status') == 1) selected="select" @endif value="1">All</option>
                                        <option @if(app('request')->input('status') == 2) selected="select" @endif value="2">In Progress</option>
                                        <option @if(app('request')->input('status') == 3) selected="select" @endif value="3">On Hold</option>
                                        <option @if(app('request')->input('status') == 4) selected="select" @endif value="4">Rejected</option>
                                        <option @if(app('request')->input('status') == 5) selected="select" @endif value="5">Offered</option>
                                    </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.traker')}}" 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 show active">
                <div class="main-content tab-content">
                    <div id="tracker" class="tab-pane fade mb-0 show active">
                        <div class="title-wrapper">
                            <h3 class="h3 h3-title mt-0">Job Tracker <span class="gray ml-2">Viewing @if($appliedJobs){{$appliedJobs->total()}} @else 0 @endif applied 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="status" id="hid_status" type="hidden" value="{{app('request')->input('status')}}">
                                    <label class="gray mr-2">Sort by</label>
                                    <select class="gray" name="sort" onchange="this.form.submit()">
                                        <option value="1" @if(app('request')->input('sort') == "1")) selected @endif>Recent Activity</option>
                                        <option value="2" @if(app('request')->input('sort') == "2")) selected @endif>Recently Applied</option>
                                    </select>
                                </form>
                            </div>
                        </div>
                        @if($appliedJobs->total() > 0)
                        @foreach($appliedJobs as $key => $job)
                        <div class="box white job-list">
                            <div class="job-name-status d-flex justify-content-between align-items-center">
                                <h3 class="border-0">{{$job->nameformatted}}</h3>
                            </div>
                            <div class="row">
                                <div class="col-lg-9 col-md-12">
                                    <div class="tags d-flex align-items-center flex-wrap">
                                        <p><i class="material-icons">room</i> {{$job->city->name}}</p>
                                        <p><i class="material-icons">business_center</i> {{$job->type->name}}</p>
                                        <p><i class="material-icons">bookmark</i> {{$job->level->name}}</p>
                                    </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>
                                    @if($job->track_record)
                                    <div class="chips chips-track d-flex align-items-center flex-wrap pt-3">
                                        @foreach($job->track_record as $tkey => $track)
                                        @if($track->text == "cv_submitted")
                                        @if($track->trackable->status == "pending")
                                        <span class="em-chip blue">CV | {{$track->created_at_date_formatted}}</span>
                                        @else
                                        <span class="em-chip ">CV | {{$track->created_at_date_formatted}}</span>
                                        @endif
                                        @endif
                                        @if($track->text == "interview_booked")
                                            @if($track->trackable->interview && $track->trackable->interview->status)
                                                @if($track->trackable->interview->status == "pending" || $track->trackable->interview->status == "on_hold" || $track->trackable->interview->status == "offer_made")
                                                    <span class="em-chip blue">Interview {{$track->trackable->interview->interview_count}} | {{$track->trackable->interview->created_at_date_formatted}}</span>
                                                @else
                                                    <span class="em-chip ">Interview {{$track->trackable->interview->interview_count}} | {{$track->trackable->interview->created_at_date_formatted}}</span>
                                                @endif
                                            @else
                                                @if($track->trackable->status == "pending" || $track->trackable->status == "on_hold")
                                                    <span class="em-chip blue">Interview {{$track->trackable->interview_count}} | {{$track->trackable->created_at_date_formatted}}</span>
                                                @else
                                                    <span class="em-chip ">Interview {{$track->trackable->interview_count}} | {{$track->trackable->created_at_date_formatted}}</span>
                                                @endif
                                            @endif
                                        @endif
                                        @if($track->text == "hired")
                                        <span class="em-chip green">Hired {{$track->trackable->interview_count}} | {{$track->created_at_date_formatted}}</span>
                                        @endif
                                        @if($track->text == "cv_rejected")
                                        <span class="em-chip red">Rejected {{$track->trackable->interview_count}} | {{$track->created_at_date_formatted}}</span>
                                        @endif
                                        @endforeach
                                    </div>
                                    @endif
                                </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> Applied @if($job->job_candidates[0]->applied_days == 'yesterday') Yesterday @elseif($job->job_candidates[0]->applied_days == 'today') Today @else {{$job->job_candidates[0]->applied_days}} days ago @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
                        {{ $appliedJobs->onEachSide(7)->links('front.common.pagination') }}
                        @else
                        <div class="m-5 p5 text-center">
                            @if(app('request')->input() == null)
                            <img src="{{asset('/img/no-recommendation.png')}}" srcset="{{asset('/img/no-recommendation@2x.png')}} 2x" height="200" alt="No Jobs" class="mt-5">
                            @else
                            <img src="{{asset('/img/update-filter.png')}}" srcset="{{asset('/img/update-filter@2x.png')}} 2x" height="200" alt="Update Filter" class="mt-5">
                            @endif
                            <h3 class="h3 h3-title">Job Not Found</h3>
                            <p>First Please apply for the Job.</p>
                            <p><a href="{{route('front.job.index')}}" class="btn btn-transparent">Browse Jobs</a></p>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection
@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

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