@extends('master')

@section('title_front','Job-Details')

@section('content')

<section>
    <div class="post d-flex flex-column-fluid" id="kt_post">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-fluid">
            <!--begin::Card-->
            <div class="card">
                <div class="card-header border-0 pt-5 p-0">
                    <div class="container-fluid">
                        <div class="d-flex justify-content-between">
                            <h1 class="mb-0">{{$job_post->job_title}}</h1>
                            <button class="btn btn-primary" id="apply_job">
                                {{trans('Apply')}} <i class="dripicons-arrow-thin-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body py-4">
                    <div class="row">
                        <div class="col-md-7">
                            <div class="padding-right">
                                <!-- Company Info -->
                                <div class="job-info">
                                    <p>{{$job_post->short_description}}</p>
                                    <hr>
                                    <h3>{{trans('Details')}}</h3>
                                    {!! html_entity_decode($job_post->long_description) !!}
                                </div>
                            </div>
                        </div>
                        <!-- Widgets -->
                        <div class="col-md-4 offset-md-1">
                            <div class="card">
                                <div class="card-body">
                                    <h3 class="card-title">{{trans('Overview')}}</h3>
                                    <h6 class="card-subtitle mt-2 text-muted">{{__('Job Title')}}</h6>
                                    <p class="card-text">{{$job_post->job_title}}</p>
                                    @if(!empty($job_post->Company->company_name))
                                    <h6 class="card-subtitle mt-2 text-muted">{{__('Company')}}</h6>
                                    <p class="card-text">{{$job_post->Company->company_name}}</p>
                                    @endif
                                    <h6 class="card-subtitle mt-2 text-muted">{{trans('Experience')}}</h6>
                                    <p class="card-text">{{$job_post->jobExperience->title}}</p>
                                    <h6 class="card-subtitle mt-2 text-muted">{{trans('Vacancy')}}</h6>
                                    <p class="card-text">{{$job_post->no_of_vacancy}}</p>
                                    <h6 class="card-subtitle mt-2 text-muted">{{__('Apply Before')}}</h6>
                                    <p class="card-text">{{$job_post->closing_date}}</p>
                                    <h6 class="card-subtitle mt-2 text-muted">{{__('Posted')}}</h6>
                                    <p class="card-text">{{$job_post->updated_at->diffForHumans()}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


    <!--begin::Modal - Apply Job-->
    <div class="modal fade" id="applyModal" data-keyboard="false" data-bs-backdrop="static">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <!--begin::Modal content-->
            <div class="modal-content">
                <!--begin::Form-->
                <form class="form" action="javascript:void(0)" id="apply_form" enctype="multipart/form-data">
                    @csrf
                    <!--begin::Modal header-->
                    <div class="modal-header" id="kt_modal_new_address_header">
                        <!--begin::Modal title-->
                        <h2>{{__('Apply For This Job')}}</h2>
                        <!--end::Modal title-->
                        <!--begin::Close-->
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                            <span class="svg-icon svg-icon-1">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                        transform="rotate(-45 6 17.3137)" fill="black" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                        transform="rotate(45 7.41422 6)" fill="black" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                        </div>
                        <!--end::Close-->
                    </div>
                    <!--end::Modal header-->

                    <!--begin::Modal body-->
                    <div class="modal-body py-10 px-lg-17">
                        <span id="form_result"></span>
                        <div class="row mb-5">
                            <div class="col-md-6 fv-row mb-5">
                                <label class="required fs-5 fw-bold mb-2">{{__('Full Name')}}</label>
                                <input type="text" class="form-control form-control-solid" name="full_name"
                                    id="full_name" placeholder="{{__('Full Name')}}" required/>
                            </div>

                            <div class="col-md-6 fv-row mb-5">
                                <label class="required fs-5 fw-bold mb-2">{{trans('Email')}}</label>
                                <input type="email" class="form-control form-control-solid" name="email"
                                    id="email" placeholder="{{trans('Email')}}" required/>
                            </div>

                            <div class="col-md-6 fv-row mb-5">
                                <label class="required fs-5 fw-bold mb-2">{{trans('Phone')}}</label>
                                <input type="text" class="form-control form-control-solid" name="phone"
                                    id="phone" placeholder="{{trans('Phone')}}" required/>
                            </div>

                            <div class="col-md-12 fv-row mb-5">
                                <label class="fs-5 fw-bold mb-2">{{trans('Address')}}</label>
                                <textarea class="form-control form-control-solid" name="address"
                                    id="address" rows="3" placeholder="{{trans('Address')}}"></textarea>
                            </div>

                            <div class="col-md-12 fv-row mb-5">
                                <label class="required fs-5 fw-bold mb-2">{{__('Cover Letter/Message')}}</label>
                                <textarea class="form-control form-control-solid" name="cover_letter"
                                    id="cover_letter" rows="3" required></textarea>
                            </div>

                            <div class="col-md-6 fv-row mb-5">
                                <label class="fs-5 fw-bold mb-2">{{__('Facebook Profile')}} ({{trans('Optional')}})</label>
                                <input type="text" class="form-control form-control-solid" name="fb_id"
                                    id="fb_id" placeholder="{{__('Facebook Profile')}}"/>
                            </div>

                            <div class="col-md-6 fv-row mb-5">
                                <label class="fs-5 fw-bold mb-2">{{__('Linkedin Profile')}} ({{trans('Optional')}})</label>
                                <input type="text" class="form-control form-control-solid" name="linkedin_id"
                                    id="linkedin_id" placeholder="{{__('Linkedin Profile')}}"/>
                            </div>

                            <div class="col-md-12 fv-row mb-5">
                                <label class="fs-5 fw-bold mb-2">{{__('Upload your cv')}}</label>
                                <input type="file" class="form-control form-control-solid" name="cv"
                                    id="cv" accept="image/*,.pdf,.doc,.docs"/>
                            </div>
                        </div>
                    </div>
                    <!--end::Modal body-->

                    <!--begin::Modal footer-->
                    <div class="modal-footer flex-center">
                        <!--begin::Button-->
                        <button type="submit" id="action_button" class="btn btn-primary">
                            <span class="indicator-label">{{trans('Apply')}}</span>
                        </button>
                        <!--end::Button-->
                    </div>
                    <!--end::Modal footer-->
                </form>
                <!--end::Form-->
            </div>
        </div>
    </div>
    <!--end::Modal - Apply Job-->
@endsection
@section('page_script')
    <script nonce="{{ $cspNonce }}">

        (function($) {
            "use strict";

            $(document).ready(function () {

                $('#apply_job').on('click', function () {

                    $('#applyModal').modal('show');
                });

                $('#apply_form').on('submit', function (event) {
                    event.preventDefault();

                    $.ajax({
                        url: "{{ route('jobs.apply',$job_post->id )}}",
                        method: "POST",
                        data: new FormData(this),
                        contentType: false,
                        cache: false,
                        processData: false,
                        dataType: "json",
                        success: function (data) {
                            var html = '';
                            if (data.errors) {
                                html = '<div class="alert alert-danger">';
                                for (var count = 0; count < data.errors.length; count++) {
                                    html += '<p>' + data.errors[count] + '</p>';
                                }
                                html += '</div>';
                            }
                            if (data.success) {
                                html = '<div class="alert alert-success">' + data.success + '</div>';
                                $('#apply_form')[0].reset();

                            }
                            $('#form_result').html(html).slideDown(300).delay(5000).slideUp(300);
                        }
                    });

                });

            });



        })(jQuery);

    </script>

@endsection