@extends('layouts.app')
@section('styles')
<link rel="stylesheet" href="{{ asset('assets/web/css/user-panel.css') }}">
@endsection
@section('content')

<section>
    <div class="main-wrapper" style="min-height: calc(100vh - 516px);">
        <div class="pt-50 pb-50 section--bg">
            <div class="container">
                <div class="row justify-content-center gy-4">
                    <div class="row gy-4">
                        <div class="col-xl-9 col-lg-8 pe-lg-4">
                            <div class="job-details bg-white">
                                <div class="row">
                                    <div class="col-10">
                                        <h2 class="job-details__title">{{ $jobDetail->title }}</h2>
                                        <p class="mt-1"><strong>{{ $jobDetail->employer->company_name}}</strong></p>
                                        <ul class="job-details__meta d-flex flex-wrap">
                                            <li>{{ $jobDetail->jobShift->name }}</li>
                                        </ul>
                                        @if($jobDetail->userJobApplied)
                                            <a href="javascript:void(0)" class="btn btn-md px-4 btn--base mt-4">Applied</a>
                                        @else
                                            <a href="javascript:void(0)" id="applyNowBtn" class="btn btn-md px-4 btn--base mt-4 applyNowBtn" data-toggle="modal"  data-target="#applyJobModal">Apply Now</a>
                                            <input id="jobId" value="{{ $jobDetail->id }}" type="hidden"/>
                                        @endif
                                    </div>
                                    <div class="col-2 text-end">
                                        <a href="#"
                                            class="bookmark-btn mt-2">
                                            <span class="non-bookmark"><i class="far fa-bookmark"></i></span>
                                        </a>
                                    </div>
                                </div>
                                <hr>
                                <h3 class="mt-4 mb-2">Description</h3>
                                <p>{{ $jobDetail->description }}.</p>
                                    {{-- <ul class="disc-list mt-3 ms-lg-4">
                                        <li>Lorem ipsum dolor sit amet</li>                                   
                                    </ul> --}}
                                <hr>
                                <h3 class="mt-4 mb-2">Responsibilities</h3>
                                <p>{{ $jobDetail->responsibilities }}</p>
                                    {{-- <ul class="disc-list mt-3 ms-lg-4">
                                        <li>Lorem ipsum dolor sit amet</li>
                                    </ul> --}}
                                <hr>
                                <h3 class="mt-4 mb-2">Requirements</h3>
                                <p><span style="font-weight: bolder;">Educational Requirements</span></p>
                                <ul class="disc-list mt-2 ms-lg-4">
                                    <li></li>
                                    <li>Advanced certification in Vat &amp; Tax will be added as advantage.</li>
                                    <li>Skills Required: Advance Excel</li>
                                </ul>
                                <p class="mt-4"><span style="font-weight: bolder;">Experience Requirements</span></p>
                                <ul class="disc-list mt-2 ms-lg-4">
                                    <li>Experience:- {{ $jobDetail->jobExperience->name }}</li>                                    
                                </ul>
                                <p class="mt-4"><span style="font-weight: bolder;">Additional Requirements</span></p>
                                <p>{{ $jobDetail->requirements }}</p>
                                <ul class="disc-list mt-2 ms-lg-4">
                                    {{-- <li>Gender:- </li>  --}}
                                </ul>
                                <hr>
                                @if($jobDetail->userJobApplied)
                                    <a href="javascript:void(0)" class="btn btn-md px-4 btn--base mt-4">Applied</a>
                                @else
                                    <a href="javascript:void(0)" id="applyNowBtn" class="btn btn-md px-4 btn--base mt-4 applyNowBtn" data-toggle="modal"  data-target="#applyJobModal">Apply Now</a>
                                @endif
                                {{-- <a href="javascript:void(0)" class="btn btn-md px-4 btn--base mt-4">Applied</a> --}}
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-4">
                            <div class="job-details-sidebar">
                                <div class="job-summary">
                                    <h4 class="job-summary__title">Job Summary</h4>
                                    <ul class="job-summary__list">
                                        <li><strong>Published on:</strong> {{ date('d-M-Y', strtotime($jobDetail->created_at)) }}</li>
                                        <li><strong>Vacancy:</strong> {{ $jobDetail->vacancy }}</li>
                                        <li><strong>Employment Status:</strong> Full Time</li>
                                        <li><strong>Experience:</strong> {{ $jobDetail->jobExperience->name }}</li>
                                        <li><strong>Gender:</strong>{{ $jobDetail->gender == 1 ? 'Male' : 'Female'  }}</li>
                                        <li><strong>Age:</strong> {{ $jobDetail->age }}</li>
                                        <li><strong>Job Location:</strong> {{ $jobDetail->age }}</li>
                                        <li><strong>Salary:</strong>{{ $jobDetail->salary_to }}-{{ $jobDetail->salary_from }}</li>
                                        <li><strong>Salary Period:</strong> {{ $jobDetail->type->name }}</li>
                                        <li><strong>Application Deadline:</strong>{{ date('d-M-Y', strtotime($jobDetail->deadline)) }}</li>
                                    </ul>
                                </div>
                                <div class="mt-4">
                                    <h6>One Soft job post</h6>
                                    <div class="short-job-card mt-2">
                                        <div class="short-job-card__top">
                                            <div class="short-job-card__thumb">
                                                <img src="{{ asset('assets/web/images/company-logo.jpg') }}"
                                                    alt="image">
                                            </div>
                                            <div class="short-job-card__content">
                                                <h6 class="short-job-card__title"><a
                                                        href="#">Junior
                                                        PHP Developer (Laravel)</a></h6>
                                                <p class="caption"><a
                                                        href="#"
                                                        class="text--base">One Soft</a></p>
                                                <span class="fs--14px text--muted">9 months ago</span>
                                            </div>
                                            <div class="short-job-card__action">
                                                <a href="#"
                                                    class="bookmark-btn">
                                                    <span class="non-bookmark"><i class="far fa-bookmark"></i></span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="short-job-card mt-2">
                                        <div class="short-job-card__top">
                                            <div class="short-job-card__thumb">
                                                <img src="{{ asset('assets/web/images/company-logo.jpg') }}"
                                                    alt="image">
                                            </div>
                                            <div class="short-job-card__content">
                                                <h6 class="short-job-card__title"><a
                                                        href="#">Senior
                                                        WordPress Developer</a></h6>
                                                <p class="caption"><a
                                                        href="#"
                                                        class="text--base">One Soft</a></p>
                                                <span class="fs--14px text--muted">9 months ago</span>
                                            </div>
                                            <div class="short-job-card__action">
                                                <a href="#"
                                                    class="bookmark-btn">
                                                    <span class="non-bookmark"><i class="far fa-bookmark"></i></span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade custom--modal" id="applyJobModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    {{-- <form method="POST" action="https://script.viserlab.com/joblab/user/apply/job"> --}}
                        <input type="hidden" name="_token" value="iOg9Pm8Uo8VSdoXcrYcmTCsLxTgjTJyVIzDGLAfk">                
                        <input type="hidden" name="job_id" value="28">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Apply Job</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            Are you sure you want to apply this job?                </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn--secondary btn-sm" data-dismiss="modal">Close</button>
                            <button id="jobApply" class="btn btn--primary btn-sm">Confirm</button>
                        </div>
                    {{-- </form> --}}
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    
</section>
@endsection
@section('scripts')
<script>
    $(document).on('click','#jobApply',function(e){
        var id = $("#jobId").val();
        _ajax.post('/user/apply/job/'+id,{id:id},function(response){
            if(response.success){
                    alert(response.message);
                    $('.applyNowBtn').text('Applied');
                    $('.applyNowBtn').text('Applied');
            }
        });
    });
</script>
@endsection

{{-- /user/apply/job/{id} --}}