@extends('front.layouts.main')

{{-- @section('share-linkedin')
<meta property='og:title' content='{{$job->nameformatted}}'/>
<meta property='og:image' content='{{ asset("img/logo.png") }}' />
<meta property='og:url' content="{{ config('laravel-share.services.linkedin.uri').route('front.job.detail',['slug' => $job->slug.'-'.$job->unique_id]) }}" />
@endsection --}}

@section('title'){{ $job->nameformatted }} | Empower @endsection

@section('description'){{ strip_tags(substr($job->summary, 0,  160)) }}@endsection

@section('content')
<main class="job-detail-page">
    <section class="section pt-0">
        <div class="container">
            <div class="row">
                <div class="col-lg-9 col-md-8 mt-3 mt-md-0">
                    <div class="main-content">
                        <div class="box white job-detail">
                            <div class="title-wrapper">
                                <h2 class="box-title medium-font-size">{{$job->nameformatted}}</h2>
                            </div>
                            
                            <div class="row">
                                <div class="col-xl-12 d-flex flex-column">
                                    <div class="row tags pt-2">
                                        @if($job->city)<p class="col-sm-4 col-6 mr-0 mb-3"><i class="material-icons mr-2">room</i>{{$job->city->name}}</p>@endif
                                        @if($job->type)<p class="col-sm-4 col-6 mr-0 mb-3"><i class="material-icons mr-2">business_center</i>{{$job->type->name}}</p>@endif
                                        <p class="col-sm-4 col-6 mr-0 mb-3"><i class="material-icons mr-2">book</i>{{$job->no_of_reports}} Direct Reports</p>
                                        @if($job->level)<p class="col-sm-4 col-6 mr-0 mb-3"><i class="material-icons" data-toggle="left-tooltip" data-placement="left" title="" data-original-title="Job Position">bookmark</i> {{$job->level->name}}</p>@endif
                                        <p class="col-sm-4 col-6 mr-0 mb-3"><i class="material-icons mr-2">directions_car</i>Driving License @if($job->have_liscence == 1) Required @else Not Required @endif</p>
                                        @if($job->expatriates_ready == 1)
                                        <p class="col-sm-4 col-6 mr-0 mb-3"><i class="material-icons mr-2">flag</i>Open to Expatriates & Local Nationals</p>
                                        @else
                                        <p class="col-sm-4 col-6 mr-0 mb-3"><i class="material-icons mr-2">flag</i>Only Open to {{$job->franchise->countries->citizenship}} Nationals</p>
                                        @endif
                                        @if($job->min_requirements->is_salary_confidential == 0)
                                        @if($job->min_requirements->min_salary)<p class="col-sm-4 col-6 mr-0 mb-3"><img src="{{asset('img/coins.svg')}}" class="mr-2" alt="coins">Salary @if($job->franchise->countries->currency_code){{$job->franchise->countries->currency_code}} @endif {{number_format_short($job->min_requirements->min_salary)}} - {{number_format_short($job->min_requirements->max_salary)}} net salary</p>@endif
                                        @endif
                                        @if(!($job->status == 'closed' ||  $job->status == 'paused' || $job->expires_at < \Carbon\Carbon::today()))
                                        <p class="col-sm-4 col-6 mr-0 mb-3"><i class="material-icons mr-2">access_time</i>Expiring @if($job->remaining_days == 2) Tomorrow @elseif($job->remaining_days == 1) Today @else in {{$job->remaining_days}} Days @endif</p>
                                        @endif
                                        @if($job->min_requirements->industry1)<p class="col-sm-12 mr-0 mb-3"><i class="material-icons mr-2" data-toggle="left-tooltip" data-placement="left" title="" data-original-title="Job Industry">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 class="col-sm-12 mr-0 mb-3"><i class="material-icons mr-2" data-toggle="left-tooltip" data-placement="left" title="" data-original-title="Job Industry">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 mt-auto mb-2">
                                        @if($job->min_requirements->category1)<span class="em-chip" data-toggle="tooltip" data-placement="top" title="" data-original-title="Job Category">{{$job->min_requirements->category1->name}}</span>@endif
                                        @if($job->min_requirements->category2)<span class="em-chip" data-toggle="tooltip" data-placement="top" title="" data-original-title="Job Category">{{$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" data-toggle="tooltip" data-placement="top" title="" data-original-title="Job Category">{{$job->pref_requirements->category1->name}}</span>@endif
                                        @if($job->pref_requirements->category2)<span class="em-chip" data-toggle="tooltip" data-placement="top" title="" data-original-title="Job Category">{{$job->pref_requirements->category2->name}}</span>@endif
                                        @endif
                                    </div>
                                </div>

                            </div>
                            
                            <!-- Nav tabs -->
                            <div class="form-group btm-arrow select d-md-none without-label">
                                <select class="form-control toggle-tab">
                                    @if($isApplied)<option value="job-activity">Job Activity</option>@endif
                                    <option value="roles">Job Description</option>
                                    <option value="education">Minimum Requirements</option>
                                </select>
                            </div>
                            <ul class="nav nav-tabs d-none d-md-flex" role="tablist" id="abt-nav">
                                @if($isApplied)
                                <li class="nav-item">
                                    <a class="nav-link active" data-toggle="tab" href="#job-activity">Job Activity</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link " data-toggle="tab" href="#roles">Job Description</a>
                                </li>
                                @else
                                <li class="nav-item">
                                    <a class="nav-link active" data-toggle="tab" href="#roles">Job Description</a>
                                </li>
                                @endif

                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#education">Minimum Requirements</a>
                                </li>
                            </ul>

                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div id="job-activity" class="tab-pane fade show @if($isApplied) active @endif">
                                    @foreach($tracker as $key => $track)
                                    @if($track->text == "job_application")
                                    <div class="activity-row d-flex justify-content-between">
                                        <div>
                                            <img src="{{asset('img/dashboard-img1.svg')}}" alt="Activity Image" class="rounded-circle" style="width: 60px;">
                                        </div>
                                        <div>
                                            <div class="box white">
                                                <small class="gray">{{$track->created_at_formatted}}</small>
                                                <p class="mb-0">Your job application for {{$job->nameformatted}} has been submitted successfully and under review.</p>
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                    @if($track->text == "cv_submitted")
                                    <div class="activity-row d-flex justify-content-between">
                                        <div>
                                            <img src="{{asset('img/dashboard-img3.svg')}}" alt="Activity Image" class="rounded-circle" style="width: 60px;">
                                        </div>
                                        <div>
                                            <div class="box white">
                                                <small class="gray">{{$track->created_at_formatted}}</small>
                                                <p class="mb-0">Your Profile and CV has been submitted for the {{$job->nameformatted}} role and is currently under review by the hiring organisation.</p>
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                    @if($track->text == "cv_rejected" || $track->text == "rejected_from_job")
                                    <div class="activity-row d-flex justify-content-between">
                                        <div>
                                            <img src="{{asset('img/dashboard-img2.svg')}}" alt="Activity Image" class="rounded-circle" style="width: 60px;">
                                        </div>
                                        <div>
                                            <div class="box dark-bg mx-0">
                                                <div class="white-bg">
                                                    <small class="gray">{{$track->created_at_formatted}}</small>
                                                    <p class="mb-0">The hiring organisation has reviewed your CV for the {{$job->nameformatted}} role and will unfortunately not take your
                                                        application further.</p>
                                                </div>
                                                <small class="gray">Reason</small>
                                                <p class="mb-0">
                                                    @if($track->trackable->cv_rejection_reason)
                                                    {{ $track->trackable->cv_rejection_reason }} <br>
                                                    @endif

                                                    @if($track->trackable->cv_rejection_reason_other)
                                                    {{ $track->trackable->cv_rejection_reason_other }} <br>
                                                    @endif

                                                    @isset($track->trackable->feedback->rejection_reason)
                                                    {{ $track->trackable->feedback->rejection_reason }} <br>
                                                    @endisset
                                                    {{-- {{ @trans('client_dashboard.keep_browsing_similiar_jobs') }}. --}}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                    @if($track->text == "removed_from_job" && $track->trackable->job != null )
                                    <div class="activity-row d-flex justify-content-between">
                                        <div>
                                            <img src="{{asset('img/dashboard-img2.svg')}}" alt="Activity Image" class="rounded-circle" style="width: 60px;">
                                        </div>
                                        <div>
                                            <div class="box dark-bg mx-0">
                                                <div class="white-bg">
                                                    <small class="gray">{{$track->created_at_formatted}}</small>
                                                    <p class="mb-0">Your profile has been reviewed with the regards to your job application on the {{$track->trackable->job->nameformatted}} role.</p>
                                                    <p class="mb-0 mt-3">We are sorry to inform that your application was unsuccessful for the following reason(s):</p>
                                                </div>
                                                <small class="gray">{{ @trans('client_dashboard.reason') }}</small>
                                                <ul class="mb-0 pl-3">
                                                    @if(isset($track->trackable->is_experience_mismatch) && $track->trackable->is_experience_mismatch == 1)
                                                    <li style="list-style-type: disc">{{ trans('client_dashboard.experience_not_match') }} </li>
                                                    @endif

                                                    @if(isset($track->trackable->is_salary_mismatch) && $track->trackable->is_salary_mismatch == 1)
                                                    <li style="list-style-type: disc">{{ trans('client_dashboard.salary_not_match') }} </li>
                                                    @endif

                                                    @if(isset($track->trackable->is_qualification_mismatch) && $track->trackable->is_qualification_mismatch == 1)
                                                    <li style="list-style-type: disc">{{ trans('client_dashboard.qualification_not_match') }} </li>
                                                    @endisset

                                                    @if(isset($track->trackable->is_job_requirement_mismatch) && $track->trackable->is_job_requirement_mismatch == 1)
                                                    <li style="list-style-type: disc">{{ trans('client_dashboard.job_requirement_not_match') }} </li>
                                                    @endisset

                                                    @if(isset($track->trackable->other_reason) && $track->trackable->other_reason != null)
                                                    <li style="list-style-type: disc">{{ $track->trackable->other_reason }} </li>
                                                    @endisset
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                    @if(($track->text == "interview_booked" || $track->text == "interview_rebooked") && $track->trackable->job != "null")
                                    <div class="activity-row d-flex justify-content-between">
                                        <div>
                                            <img src="{{asset('img/dashboard-img4.svg')}}" alt="Activity Image" class="rounded-circle" style="width: 60px;">
                                        </div>
                                        <div>
                                            <div class="box dark-bg mx-0">
                                                <div class="white-bg">
                                                    <small class="gray">{{$track->created_at_formatted}}</small>
                                                    <p class="mb-0">Your {{numberToWord($track->trackable->interview_count)}}
                                                        interview for the {{$job->nameformatted}} role has been @if($track->text == "interview_booked") scheduled @else rescheduled @endif.@if($track->trackable->interview && ($track->trackable->interview->status == "next_interview_requested" ||
                                                        $track->trackable->interview->status == "document_requested"))
                                                        <a href="javascript:void(0)" onclick="interviewFeedbackDetail({{$track->trackable->interview_id}})" class="font-orange underline">
                                                            Click to view feedback</a> @endif
                                                    </p>
                                                    </p>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label class="control-label">Time &amp; Date</label>
                                                            <p class="display-info">{{$track->trackable->interview_time_formatted}}, {{$track->trackable->interview_date_formatted}}</p>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label class="control-label">Interview Type</label>
                                                            <p class="display-info">{{($track->trackable->type == 'Skype') ? 'Virtual' : $track->trackable->type}}</p>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            @if($track->trackable->type == "Skype")
                                                            <label class="control-label">{{ @trans('client_dashboard.virtual_info') }}</label>
                                                            <p class="display-info">{{$track->trackable->skype}}</p>
                                                            @elseif($track->trackable->type == "Face To Face")
                                                            <label class="control-label">Interview Location</label>
                                                            <p class="display-info">{{$track->trackable->location}}</p>
                                                            @else
                                                            <label class="control-label">Contact No.</label>
                                                            <p class="display-info">{{$track->trackable->telephone}}</p>
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label class="control-label">Contact Person</label>
                                                            <p class="display-info">{{$track->trackable->job->recruiter->first_name}}, {{$track->trackable->job->recruiter->mobile}}</p>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="form-group mb-0">
                                                            <label class="control-label">Notes</label>
                                                            @if($track->trackable->notes_for_candidate)
                                                            <p class="display-info mb-0">{{$track->trackable->notes_for_candidate}}</p>
                                                            @else
                                                            <p class="display-info mb-0">-</p>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                    @if($track->text == "document_requested")
                                    <div class="activity-row d-flex justify-content-between">
                                        <div>
                                            <img src="{{asset('img/dashboard-img6.svg')}}" alt="Activity Image" class="rounded-circle" style="width: 60px;">
                                        </div>
                                        <div class="box dark-bg mx-0">
                                            <div class="white-bg">
                                                <small class="gray">{{$track->created_at_formatted}}</small>
                                                <p>We require your @foreach($track->trackable->requestedDocs as $key => $document)@if($key != 0),@endif {{$document->documentDetails->name}}
                                                    @endforeach in order to proceed with your application for the {{$job->nameformatted}} role. Please use the link below
                                                    to upload the relevant document(s).</p>
                                                <div class="d-flex flex-column flex-lg-row">
                                                    @foreach($track->trackable->requestedDocs as $key => $document)
                                                    @if($document->status == "pending")
                                                    <input type="hidden" name="document_req_id" value="{{$document->id}}">
                                                    <div class="form-group file-upload d-inline-block mr-lg-2 my-1">
                                                        <div class="custom-file">
                                                            <input title="Upload {{$document->documentDetails->name}}" data-toggle="tooltip" type="text" class="custom-file-input upload_doc" id="document_{{$document->id}}" data-id="{{$document->id}}" name="document" alt="Upload {{$document->documentDetails->name}}" onclick="openAttachModal('{{ Auth::user()->id }}','{{ $document->documentDetails->id }}', '{{ $document->id }}')">
                                                            <label class="custom-file-label" for="{{$document->documentDetails->name}}"><img src="{{asset('img/file-upload.svg')}}" alt="upload">Upload {{$document->documentDetails->name}}</label>
                                                        </div>
                                                    </div>
                                                    @endif
                                                    @endforeach
                                                </div>
                                            </div>
                                            @foreach($track->trackable->requestedDocs as $key => $document)
                                            @if($document->status == "completed")
                                            <small class="gray">Uploaded</small>
                                            @break
                                            @endif
                                            @endforeach
                                            <div id="uploaded-document">
                                                @foreach($track->trackable->requestedDocs as $key => $document)
                                                @if($document->status == "completed")
                                                <p class="mb-0">{{$document->documentDetails->name}} uploaded successfully.</p>
                                                @endif
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                    @if($track->text == "hired")
                                    <div class="activity-row d-flex justify-content-between">
                                        <div>
                                            <img src="{{asset('img/dashboard-img9.svg')}}" alt="Activity Image" class="rounded-circle" style="width: 60px;">
                                        </div>
                                        <div>
                                            <div class="box white">
                                                <small class="gray">{{$track->created_at_formatted}}</small>
                                                <p> Congratulation {{$track->trackable->user->first_name}} you have been hired for
                                                    the {{$track->trackable->job->nameformatted}} role. Please find a link to your signed offer letter / contract <span class="underline"><a href="{{asset($track->trackable->contract_link)}}" target="_blank">here</a></span>. All the best with your new role!</p>
                                            </div>
                                        </div>
                                    </div>
                                    @endif

                                    @endforeach
                                </div>
                                <div id="roles" class="gray tab-pane fade show @if(!$isApplied) active @endif">
                                    @if($job->summary)
                                    <h3 class="h3 mt-0">Summary</h3>
                                    {!! $job->summary !!}
                                    @endif

                                    @if($job->roles_responsibilities)
                                    <h3 class="h3 mt-0">Responsibilities</h3>
                                    {!! $job->roles_responsibilities !!}
                                    @endif

                                    @if($job->qualifications)
                                    <h3 class="h3 mt-0">Education and Qualifications</h3>
                                    {!! $job->qualifications !!}
                                    @endif

                                    @if($job->experience)
                                    <h3 class="h3 mt-0">Requirements</h3>
                                    {!! $job->experience !!}
                                    @endif

                                    @if($job->characteristics)
                                    <h3 class="h3 mt-0">Characteristics</h3>
                                    {!! $job->characteristics !!}
                                    @endif

                                    @if($job->reporting_to)
                                    <h3 class="h3 mt-0">Reporting To</h3>
                                    {!! $job->reporting_to !!}
                                    @endif
                                </div>
                                <div id="education" class="gray tab-pane fade">
                                    <div class="row">
                                        <div class="col-md-4 info">
                                            <div class="form-group">
                                                <label class="control-label">Min Budget (per month)</label>
                                                @if(isset($job->min_requirements) && ($job->min_requirements->is_salary_confidential == 0))
                                                <p class="display-info">
                                                    @if($job->franchise->countries->currency_code){{$job->franchise->countries->currency_code}} @endif{{ $job->min_requirements->min_salary_formatted}}</p>
                                                @else
                                                <p class="display-info">-</p>
                                                @endif
                                            </div>
                                            <div class="form-group ">
                                                <label class="control-label">Max Budget (per month)</label>
                                                @if(isset($job->min_requirements) && ($job->min_requirements->is_salary_confidential == 0))

                                                <p class="display-info">@if($job->franchise->countries->currency_code){{$job->franchise->countries->currency_code}} @endif {{ $job->min_requirements->max_salary_formatted}}</p>
                                                @else
                                                <p class="display-info">-</p>
                                                @endif
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">Certificate</label>
                                                <p class="display-info">
                                                    @if(count($job->certificates) > 0)
                                                    @foreach($job->certificates as $value)
                                                    {{ $value->name }} <br />
                                                    @endforeach
                                                    @else
                                                    -
                                                    @endif
                                                </p>
                                            </div>
                                        </div>

                                        <div class="col-md-4 info">
                                            <div class="form-group">
                                                <label class="control-label">Primary Industry</label>
                                                <p class="display-info">
                                                    @if(isset($job->min_requirements->industry1))
                                                    {{ $job->min_requirements->industry1->name }}: {{ $job->min_requirements->primary_industry_year }} Years
                                                    @else
                                                    -
                                                    @endif
                                                </p>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">Secondary Industry</label>
                                                <p class="display-info">
                                                    @if(isset($job->min_requirements->industry2))
                                                    {{ $job->min_requirements->industry2->name }}: {{ $job->min_requirements->secondary_industry_year }}
                                                    Years
                                                    @else
                                                    -
                                                    @endif
                                                </p>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">Qualification</label>
                                                <p class="display-info">
                                                    @if(count($job->job_qualifications) > 0)
                                                    @foreach($job->job_qualifications as $value)
                                                    {{ $value->name }} <br />
                                                    @endforeach
                                                    @else
                                                    -
                                                    @endif
                                                </p>
                                            </div>
                                        </div>

                                        <div class="col-md-4 info">
                                            <div class="form-group">
                                                <label class="control-label">Primary Category</label>
                                                <p class="display-info">
                                                    @if(isset($job->min_requirements->category1))
                                                    {{ $job->min_requirements->category1->name }}: {{ $job->min_requirements->primary_category_year }} Years
                                                    @else
                                                    -
                                                    @endif
                                                </p>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">Secondary Category</label>
                                                <p class="display-info">
                                                    @if(isset($job->min_requirements->category2))
                                                    {{ $job->min_requirements->category2->name }}: {{ $job->min_requirements->secondary_category_year }}
                                                    Years
                                                    @else
                                                    -
                                                    @endif
                                                </p>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4">
                    <div class="sidebar right mt-3 mt-md-0">
                        <div class="box white">
                            <h3>Job Progress</h3>
                            <div class="vertical-progress d-flex flex-column mt-3 mt-sm-0">
                                @for($i=1; $i<=count($currentStatus); $i++) @if($i < $job->current_status)
                                    <p class="gray done">{{$currentStatus[$i]}}</p>
                                    @elseif($i == $job->current_status)
                                    <p class="gray active">{{$currentStatus[$i]}}</p>
                                    @else
                                    <p class="gray">{{$currentStatus[$i]}}</p>
                                    @endif
                                    @endfor
                            </div>

                            @if($isApplied)
                            <a href="javascript:void(0)" class="btn btn-primary-em w-100 mb-2 disabled">Applied Already</a>
                            <p class="text-center gray mb-0 be-first">Applied on {{$isApplied->applied_date_formatted}}</p>
                            @else
                                @if(!($job->status == 'closed' ||  $job->status == 'paused' || $job->expires_at < \Carbon\Carbon::today()))
                                    @guest
                                        <a href="{{route('home')}}" class="btn btn-primary-em w-100 mb-2">Apply Now</a>
                                    @endguest

                                    @auth
                                        @if($cvUploaded != null)
                                        
                                            @if($min_req_match == 1)
                                                @if($askForUpdateSalary == true)
                                                    <a href="javascript:void(0)" class="btn btn-primary-em w-100 mb-2" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#currenyModal">Apply Now</a>
                                                @else
                                                    <a href="javascript:void(0)" class="btn btn-primary-em w-100 mb-2 directApplyNow">Apply Now</a>
                                                @endif
                                            @else
                                                <a href="javascript:void(0)" class="btn btn-primary-em w-100 mb-2" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#applyModal">Apply Now</a>
                                            @endif
                                        @else
                                            <a href="javascript:void(0)" class="btn btn-primary-em w-100 mb-2" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#cvUploadModal">Apply Now</a>
                                        @endif
                                    @endauth
                                    @if($isNew)
                                        <p class="text-center gray mb-0 be-first">Be the first to apply</p>
                                    @endif
                                @endif
                            @endif
                        </div>
                        @if(!($job->status == 'closed' ||  $job->status == 'paused' || $job->expires_at < \Carbon\Carbon::today()))
                            <div class="box white">
                                <p class="gray mb-0">Share This Job</p>
                                <div class="share d-flex justify-content-between align-items-center">
                                    <a target="_blank" href="{{config('laravel-share.services.whatsapp.uri').route('front.job.detail',['slug' => $job->slug.'-'.$job->unique_id])}}" class="whatsapp"><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])}}" class="facebook"><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])}}" class="twitter"><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]).'&title='.$job->title.'&summary='.strip_tags($job->summary).'&source='.$job->title}}" class="linkedin"><img src="{{asset('img/linkedin-clr.svg')}}" alt="linkedin"></a>
                                </div>
                                <a href="{{route('front.job.downloadjob',['slug' => $job->slug.'-'.$job->unique_id])}}" class="btn btn-primary-em w-100 mb-2"><i class="material-icons">picture_as_pdf</i> Download as PDF</a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
    @if($otherJobs->count() > 0)
    <section class="section recent-job-sec">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h2 class="h2 sec-title mb-0">Recent Jobs</h2>
                    <!-- <p class="tag-line gray mb-0">Browse from 4000+ jobs in accross 40 categories</p> -->
                </div>
                @foreach($otherJobs as $okey => $recentJob)
                <div class="col-md-4">
                    <div class="box white job-list">
                        <h3 class="border-0">{{$recentJob->title}}</h3>
                        <p class="loc gray"><i class="material-icons">room</i> {{$recentJob->city->name}}</p>
                        <div class="tags d-flex align-items-center flex-wrap">
                            @if($recentJob->min_requirements->industry1)<p class="mr-0 flex-basis-100"><i class="material-icons">business</i> {{$recentJob->min_requirements->industry1->name}}@if($recentJob->min_requirements->industry2), {{$recentJob->min_requirements->industry2->name}} @endif </p>@endif
                            @if($recentJob->min_requirements && !$recentJob->min_requirements->industry1 && !$recentJob->min_requirements->industry2 && $recentJob->pref_requirements &&
                            $recentJob->pref_requirements->industry1)<p class="mr-0 flex-basis-100">
                                <i class="material-icons">business</i>
                                {{$recentJob->pref_requirements->industry1->name}}@if($recentJob->pref_requirements->industry2), {{$recentJob->pref_requirements->industry2->name}} @endif
                            </p>
                            @endif
                            <p><i class="material-icons">business_center</i> {{$recentJob->type->name}}</p>
                            <p><i class="material-icons">bookmark</i> {{$recentJob->level->name}}</p>
                        </div>
                        <div class="chips d-flex align-items-center flex-wrap">
                            @if($recentJob->min_requirements->category1)<span class="em-chip">{{$recentJob->min_requirements->category1->name}}</span>@endif
                            @if($recentJob->min_requirements->category2)<span class="em-chip">{{$recentJob->min_requirements->category2->name}}</span>@endif
                            @if($recentJob->min_requirements && !$recentJob->min_requirements->category1 && !$recentJob->min_requirements->category2 &&
                            $recentJob->pref_requirements && ($recentJob->pref_requirements->category1 || $recentJob->pref_requirements->category2))
                            @if($recentJob->pref_requirements->category1)<span class="em-chip">{{$recentJob->pref_requirements->category1->name}}</span>@endif
                            @if($recentJob->pref_requirements->category2)<span class="em-chip">{{$recentJob->pref_requirements->category2->name}}</span>@endif
                            @endif
                        </div>
                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <a href="{{route('front.job.detail',['slug' => $recentJob->slug.'-'.$recentJob->unique_id])}}" class="btn btn-transparent">View Detail</a>
                            <p class="gray mb-0"><i class="material-icons">access_time</i> Expiring @if($recentJob->remaining_days == 2) Tomorrow @elseif($recentJob->remaining_days == 1) Today @else in {{$recentJob->remaining_days}} Days @endif</p>
                        </div>
                    </div>
                </div>
                @endforeach
                <div class="col-md-12 text-center">
                    <a href="{{route('front.job.index')}}" class="btn btn-transparent">Browse All Jobs</a>
                </div>
            </div>
        </div>
    </section>
    @endif
</main>

@auth
<form name="applyJobForm">
    @csrf
    <input type="hidden" name="candidate_user_id" value="{{auth()->user()->id}}" id="candidate_user_id">
    <input type="hidden" name="job_id" value="{{$job->id}}" id="job_id">
    <input type="hidden" name="min_req_match" value="{{$min_req_match}}" id="min_req_match">
</form>
@endauth

@endsection
@push('pageModals')
<div id="feedback-content">

</div>
{{-- start multiple file upload --}}
<div class="modal fade" id="attachModal" data-backdrop="static">
    <div class="modal-dialog modal-md modal-dialog-centered">
        <div class="modal-content">
            <form id="frmAttach" method="post" enctype="multipart/form-data" action="">
                <input type="hidden" name="candidateId" id="candidateId" value="" />
                <input type="hidden" name="docTypeId" id="docTypeId" value="" />
                <input type="hidden" name="jobInterviewDocRerquestId" id="jobInterviewDocRerquestId" value="" />
                @csrf
                <!-- Modal Header -->
                <div class="modal-header new-light-bg">
                    <h4 class="modal-title regular body-font-size">Attach</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <p class="mb-1 small-font-size">Upload your documents</p>
                    <p class="gray xs-font-size documentModalMsg"></p>
                    <div class="attach-list-row">
                        <div class="form-group mb-1 documentFileNameClass">
                            <label class="control-label">Upload File</label>
                            <div class="custom-file w-100 file-type-new">
                                <input type="file" class="custom-file-input w-100 fileInput" name="document[]">
                                <label class="custom-file-label bg-white form-control text-left d-flex">Choose file...</label>
                                <span class="attachment-bg"><img src="{{ asset('img/ic-attachment-dark.svg') }}" alt="ic-attachment"></span>
                            </div>
                            <span class="m-0 xs-font-size showDocumentFileName"></span>
                        </div>
                        <div class="align-items-start d-flex">
                            <div class="form-group mb-0 mr-2">
                                <label class="control-label">Document Name</label>
                                <input type="text" class="form-control titleInput" name="title[]">
                            </div>
                            <a href="javascript:void(0)" class="mt-4 px-1 pt-3 pb-2 act adder text-center"><span class="material-icons gray">add</span></a>
                        </div>
                        <hr />
                    </div>

                </div>

                <!-- Modal footer -->
                <div class="modal-footer justify-content-center border-top-0 pt-0 pb-4">
                    <input type="submit" class="btn btn-transparent px-4 submitfrmAttach" value="Submit" />
                </div>

            </form>

        </div>
    </div>
</div>
{{-- end multiple file upload --}}
<div class="modal fade" id="applyModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal body -->
            <div class="modal-body text-center pb-0">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <img class="text-center" src="{{asset('/img/warning.svg')}}" alt="Warning" />
                <p class="text-justify">It looks like your profile does not meet some of the minimum requirement for this role. Minimum requirements are set by the hiring organisation and are considered necessary to be a successful candidate</p>
                <p class="text-justify">The requirements not met are:</p>
                @if(count($minRequirements) > 0)
                <ul class="list-group list-group-flush text-justify">
                    @if($minRequirements['primaryIndDiff'] == false)
                    @if($job->min_requirements->industry1)
                    <li class="list-group-item pl-0"><strong>Industry Experience:</strong> {{$job->min_requirements->industry1->name}} ({{$minRequirements['primaryIndYear']}} Years)</li>
                    @endif
                    @endif

                    @if($minRequirements['secondaryIndDiff'] == false)
                    @if($job->min_requirements->industry2)
                    <li class="list-group-item pl-0"><strong>Industry Experience:</strong> {{$job->min_requirements->industry2->name}} ({{$minRequirements['secondIndYear']}} Years)</li>
                    @endif
                    @endif

                    @if($minRequirements['primaryCatDiff'] == false)
                    @if($job->min_requirements->category1)
                    <li class="list-group-item pl-0"><strong>Category Experience:</strong> {{$job->min_requirements->category1->name}} ({{$minRequirements['primaryCatYear']}} Years)</li>
                    @endif
                    @endif

                    @if($minRequirements['secondaryCatDiff'] == false)
                    @if($job->min_requirements->category2)
                    <li class="list-group-item pl-0"><strong>Category Experience:</strong> {{$job->min_requirements->category2->name}} ({{$minRequirements['secondaryCatYear']}} Years)</li>
                    @endif
                    @endif

                    @if($minRequirements['salarymatch'] == false)
                    <li class="list-group-item pl-0"><strong>Allocated Budget:</strong> Your minimum expectation does not match the allocated budget for the role</li>
                    @endif
                </ul>
                @endif
                <p class="gray text-justify">This message is based on the information input on your Empower profile; if you have not included your entire career experience on your profile please click ‘edit profile’ and input the relevant information or you can ‘apply anyway’</p>
            </div>
            <!-- Modal footer -->
            <div class="modal-footer border-0 pt-0 justify-content-between">
                <button type="button" id="applyanyway" class="btn btn-bordered w-50">Apply Anyway</button>
                <a href="{{route('front.profile.index')}}" class="btn btn-transparent w-50">Edit Profile</a>
            </div>

        </div>
    </div>
</div>
<div class="modal fade" id="currenyModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Update Minimum Expectation</h4>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body pb-0">
                <p class="small-font-size gray">Please input your minimum expectation.</p>
                <p class="small-font-size gray">This information will be used to understand whether your current remuneration is in line with the hiring organisation’s allocated budget; please do not inflate your salary as this may mislead our Talent Advisors when they are making their selection.</p>

                <form id="frmremunaration" name="frmremunaration" autocomplete="off" novalidate="novalidate">
                    @csrf
                    <div class="form-body">
                        <div class="row">
                            <div class="col-lg-6 col-sm-6 col-xs-12">
                                <div class="form-group required">
                                    <label class="control-label" for="currency_country_id">Currency</label>
                                    <select class="form-control select-two js-example-basic-single" id="currency_country_id" name="currency_country_id" required>
                                        <!-- <option value="" hidden="">Select</option> -->
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-6 col-xs-12">
                                <div class="form-group required">
                                    <label class="control-label" for="min_expected_salary" data-toggle="tooltip" title="What is the absolute minimum salary you will accept for your dream job?">Minimum Expectation</label>
                                    <input class="form-control" id="min_expected_salary" name="min_expected_salary" type="number" placeholder="Minimum Expectation" min="0" required>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <!-- Modal footer -->
            <div class="modal-footer border-0 pt-0 justify-content-start">
                <button type="submit" form="frmremunaration" class="btn btn-transparent btnfrmremunaration">Update & Apply</button>
            </div>

        </div>
    </div>
</div>
<div class="modal fade" id="cvUploadModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Upload CV First</h4>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body pb-0">
                <p class="small-font-size gray">Please upload your CV in the word format first, then apply for the job here!</p>
            </div>
            <!-- Modal footer -->
            <div class="modal-footer border-0 pt-0 justify-content-start">
                <a href="{{route('front.profile.index')}}#documents-box" class="btn btn-transparent w-50">Upload CV</a>
                <a href="javascript:void(0)" data-dismiss="modal" class="btn btn-bordered w-50">Ok</a>
            </div>

        </div>
    </div>
</div>
<div class="modal" tabindex="-1" id="docSizeAlert" data-backdrop="static">
    <div class="modal-dialog modal-md modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Alert!</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Maximum size of document should be 25 MB.</p>
            </div>
            <div class="modal-footer d-flex justify-content-between">
                <button type="button" class="btn btn-cncl" data-dismiss="modal">Okay</button>
            </div>
        </div>
    </div>
</div>

@endpush
@push('pageJs')
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>
    $(function() {
        $('[data-toggle="tooltip"]').tooltip()
    })
    $(document).ready(function() {
        var clicked = 0;
        $(document).on('click', '#applyanyway', function() {
            clicked = 1;
            $('#applyModal').modal("hide");
            @if($askForUpdateSalary == true)
            $('#applyModal').on('hidden.bs.modal', function() {
                if (clicked == 1) {
                    $("#currenyModal").modal("show");
                }
            });
            @else
            $('#applyanyway').attr('disabled', true).text('Please Wait...');
            axios.post("{{route('front.job.applyJob')}}", {
                params: {
                    user_id: $("#candidate_user_id").val(),
                    job_id: $("#job_id").val(),
                    min_req_match: $("#min_req_match").val(),
                }
            }).then(function(response) {
                var $location = "{{route('front.job.traker')}}";
                window.location = $location;
            });
            @endif

        });

        $('.directApplyNow').on('click', function() {
            $('.directApplyNow').addClass('disabled').text('Please Wait...');
            axios.post("{{route('front.job.applyJob')}}", {
                params: {
                    user_id: $("#candidate_user_id").val(),
                    job_id: $("#job_id").val(),
                    min_req_match: $("#min_req_match").val(),
                }
            }).then(function(response) {
                var $location = "{{route('front.job.traker')}}";
                window.location = $location;
            });
        });

        $("#currenyModal").on("show.bs.modal", function() {
            $("#currency_country_id").select2({
                placeholder: "Select",
                allowClear: true,
            });
            axios.get("{{route('front.profile.remuneration.getcurrenSalary')}}")
                .then(function(response) {
                    var countries = response.data.countries;
                    var expet = response.data.expectations;

                    $("#currency_country_id").empty();
                    $("#currency_country_id").append('<option value="" hidden>Select</option>')
                    jQuery.each(countries, function(i, val) {
                        $("#currency_country_id").append('<option value="' + val.id + '" >' + val.currency_code + ' - ' + val.name + '</option>');
                    });

                    $("#min_expected_salary").val(expet.min_expected_salary);
                    $("#currency_country_id").val(expet.country_id);
                }).catch(function(error) {

                });
        });
        $("#currenyModal").on("hidden.bs.modal", function() {
            clicked = 0;
        });

        var frmremunaration = $("#frmremunaration").validate({
            messages: {
                currency_country_id: "Currency is required",
                min_expected_salary: "Minimum Expectation salary is required",
            },
            errorElement: 'span',
            errorClass: 'invalid-feedback',
            errorPlacement: function(error, element) {
                if (element.type == 'input') {
                    error.insertAfter(element.sibling(a));
                } else {
                    if (element.hasClass('select-two')) {
                        error.insertAfter(element.next('.select2-container'));
                    } else if (element.prop('type') === 'radio') {
                        error.appendTo(element.parent().parent());

                    } else {
                        if (element.is('#fb-userId')) {
                            el = $(".name-opt .dropdown-menu").parent();
                            error.insertAfter(el);
                        } else {
                            error.insertAfter(element);
                        }
                    }
                }
            },
            submitHandler: function(form) {
                $('.btnfrmremunaration').addClass('disabled').text('Please Wait...');
                axios.post("{{route('front.profile.remuneration.updateCurrency')}}", {
                    country_id: $("#currency_country_id").val(),
                    current_salary: $("#min_expected_salary").val(),
                }).then(function(response) {
                    $('#currenyModal').modal("hide");
                    $('#currenyModal').on('hidden.bs.modal', function() {
                        axios.post("{{route('front.job.applyJob')}}", {
                            params: {
                                user_id: $("#candidate_user_id").val(),
                                job_id: $("#job_id").val(),
                                min_req_match: $("#min_req_match").val(),
                            }
                        }).then(function(response) {
                            window.location.reload();
                        });

                    });
                }).catch(function(response) {});

            }
        });

    })

    function interviewFeedbackDetail(interviewId) {
        axios.get("{{route('front.feedback.review')}}", {
            params: {
                id: interviewId
            }
        }).then(function(response) {
            $("#feedback-content").html('');
            $("#feedback-content").append(response.data.html);
            $("#feedback-modal").modal('show');
        });
    }

    function openAttachModal(candiateId, docTypeId, jobInterviewDocRerquestId) {
        $('[data-toggle="tooltip"]').tooltip('hide');
        $('#frmAttach #candidateId').val(candiateId);
        $('#frmAttach #docTypeId').val(docTypeId);
        $('#frmAttach #jobInterviewDocRerquestId').val(jobInterviewDocRerquestId);

        if (isIE()) {
            $('#ieMessage').modal();
        } else {
            $('#attachModal').modal();
        }
    }
    // start multiple file upload function
    $('#frmAttach').on('submit', function(e) {

        e.preventDefault();
        if ($('#frmAttach').valid()) {
            var formData = new FormData(this);
            var doc_id = $('#frmAttach #docTypeId').val()
            $('#frmAttach .submitfrmAttach').attr('disabled', true);
            $('#frmAttach .submitfrmAttach').val('Uploading...');

            $.ajax({
                type: 'POST',
                url: '{{ route("front.job.uploadDocument") }}',
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: function() {
                    showLoader();
                },
                success: function(response) {
                    location.reload();
                    $('#frmAttach .submitfrmAttach').attr('disabled', false);
                    $('#frmAttach .submitfrmAttach').val('Submit');
                    $("#frmAttach").trigger('reset');
                    $('#attachModal').modal('hide');
                    hideLoder();
                },
                error: function() {
                    hideLoder();
                    $('#docSizeAlert').modal('show');
                    $('#frmAttach .submitfrmAttach').attr('disabled', false);
                    $('#frmAttach .submitfrmAttach').val('Submit');

                }
            });
        }
    });

    var frmAttach = $("#frmAttach").validate({
        rules: {
            'document[]': {
                required: true,
                extension: 'doc|docx|pdf|xlsx|xls|jpeg|jpg|png',
                filesize: 25
            },
            'title[]': {
                required: true
            }
        },
        messages: {
            'document[]': {
                required: "This field is required.",
                extension: 'Valid files are PDF, Word, Excel, Images (png/jpg)',
            },
            title: {
                required: 'This field is required.'
            }
        },
        errorElement: 'span',
        errorClass: 'invalid-feedback',
        errorPlacement: function(error, element) {
            if (element.type == 'input') {
                error.insertAfter(element.sibling(a));
            } else {
                if (element.prop('type') === 'file') {
                    error.appendTo(element.parent().parent());
                } else {
                    if (element.is('#fb-userId')) {
                        el = $(".name-opt .dropdown-menu").parent();
                        error.insertAfter(el);
                    } else {
                        error.insertAfter(element);
                    }
                }
            }
        }
    });

    // $('#frmAttach input[type="file"]').change(function(e){
    $(document).on('change', '#frmAttach input[type="file"]', function(e) {
        $(this).parents('.documentFileNameClass').find('.showDocumentFileName').text(e.target.files[0].name);
    });

    $(document).on('click', '#frmAttach .adder', function() {

        var img = '{{ asset("img/ic-attachment-dark.svg") }}';
        var block = '<div class="attach-list-row cloned">\
    <div class="form-group mb-1 documentFileNameClass">\
        <label class="control-label">Upload File</label>\
        <div class="custom-file w-100 file-type-new">\
            <input type="file" class="custom-file-input w-100 fileInput" name="document[]">\
            <label class="custom-file-label bg-white form-control text-left d-flex">Choose file...</label>\
            <span class="attachment-bg"><img src="' + img + '" alt="ic-attachment"></span>\
        </div>\
        <span class="m-0 xs-font-size showDocumentFileName"></span>\
    </div>\
    <div class="align-items-start d-flex">\
        <div class="form-group mb-0 mr-2">\
            <label class="control-label">Document Name</label>\
            <input type="text" class="form-control titleInput" name="title[]">\
        </div>\
        <a href="javascript:void(0)" class="mt-4 px-1 pt-3 pb-2 act remover text-center"><span class="material-icons gray">clear</span></a>\
    </div>\
    <hr/>\
</div>';
        $(block).insertAfter($('#frmAttach').find('.attach-list-row:last'));
        reindex();

        $docTypeId = $('#frmAttach #docTypeId').val();
        if ($docTypeId == 2) {
            $('#frmAttach .titleInput').attr('placeholder', 'Company Name / Payslip Month & Year');
        } else if ($docTypeId == 3) {
            $('#frmAttach .titleInput').attr('placeholder', 'ID Document Name / Month & Year of ID');
        } else if ($docTypeId == 4) {
            $('#frmAttach .titleInput').attr('placeholder', 'e.g. Exp Certificate / Month & Year');
        } else if ($docTypeId == 5) {
            $('#frmAttach .titleInput').attr('placeholder', 'e.g. Cisco CCNA 200-301 Certified / Month & Year');
        }
    });

    $(document).on('click', '#frmAttach .remover', function() {
        $(this).parents('.attach-list-row:first').remove();
        reindex();
    });

    function reindex() {
        var blocks = $('#frmAttach .attach-list-row');
        $.each(blocks, function(index, value) {
            $(value).find('.custom-file-input').attr('name', 'document[' + index + ']');
            $(value).find('.custom-file-input').attr('id', 'document_' + index);
            $(value).find('.form-control').attr('name', 'title[' + index + ']');
            $(value).find('.form-control').attr('id', 'title_' + index);
        });

        $.validator.messages.extension = 'Valid files are PDF, Word, Excel, Images (png/jpg)';
        $.validator.addClassRules("titleInput", {
            required: true
        });

        $.validator.addClassRules("fileInput", {
            required: true,
            extension: 'doc|docx|pdf|xls|xlsx|jpeg|jpg|png',
            filesize: 25
        });
    }

    $('#attachModal').on('hidden.bs.modal', function(e) {
        $('#frmAttach').find('.cloned').remove();
        $('#frmAttach').trigger('reset');
        $('#frmAttach').find('.invalid-feedback').remove('span');
        $('.showDocumentFileName').empty();
        $('#frmAttach').find('.custom-file-input').removeClass('is-invalid');
        $('#frmAttach').find('.form-control').removeClass('is-invalid');
        frmAttach.resetForm();
    });

    $('#attachModal').on('show.bs.modal', function(e) {
        var candiateId = $('#frmAttach #candidateId').val();
        var docTypeId = $('#frmAttach #docTypeId').val();
        if (docTypeId == 2) {
            $('.documentModalMsg').html('You can upload multiple payslips at a time. Valid files are PDF, Word, Excel, Images (png/jpg)');
            $('.titleInput').attr('placeholder', 'Company Name / Payslip Month & Year');
        } else if (docTypeId == 3) {
            $('.documentModalMsg').html('You can upload multiple identifications at a time. Valid files are PDF, Word, Excel, Images (png/jpg)');
            $('.titleInput').attr('placeholder', 'ID Document Name / Month & Year of ID');
        } else if (docTypeId == 4) {
            $('.documentModalMsg').html('You can upload multiple employment docs at a time. Valid files are PDF, Word, Excel, Images (png/jpg)');
            $('.titleInput').attr('placeholder', 'e.g. Exp Certificate / Month & Year');
        } else if (docTypeId == 5) {
            $('.documentModalMsg').html('You can upload multiple additional docs at a time. Valid files are PDF, Word, Excel, Images (png/jpg)');
            $('.titleInput').attr('placeholder', 'e.g. Cisco CCNA 200-301 Certified / Month & Year');
        }

    });
</script>
@endpush