@extends('front.master.master')
@section('title', __('recruitment'))
@section('content')
<div class="main-body body-home overflow-hidden">
        <!-- Bread Crumb -->
        <div class="bread-crumb my-4">
            <div class="container">
                <ul class="d-flex align-items-center">
                    <li><a href="{{route('home')}}">{{__('Home')}}</a></li>
                    <li><a href="{{route('recruitment')}}">{{__('recruitment')}}</a></li>
                    <li><a href="">{{__('Job details')}}</a></li>
                </ul>
            </div>
        </div>

        <!-- Details Media News -->
        <div class="slider-media-news py-2">
            <div class="container">

                <div class="item-head-details position-relative">
                    <img src="{{asset('front/images/bg-media.png')}}" alt="" class="w-100 bg-up">
                    <div class="over-info-new p-5 w-100 h-100 d-flex flex-column justify-content-end">
                        <div class="mx-txt position-relative">
                            <div class="position-relative">
                                <span class="text-white">{{__('Job title')}}</span>
                                <h4 class="text-white">{{$job->title}}</h4>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="details-work py-4">
                    <div class="row">
                        <div class="col-md-3 col-xs-12 overflow-hidden">
                            <div class="block-item-work bgOpSecondColor rounded-3 my-3 p-3 d-flex align-items-center" data-aos="fade-up" data-aos-offset="200" data-aos-easing="ease-in-sine" data-aos-duration="300">
                                <div class="btn-icon-45 borderRad-13 bgColorMain d-flex align-items-center justify-content-center">
                                    <i class="icon-man-lap fs-5 text-white"></i>
                                </div>
                                <div class="px-3">
                                    <h6 class="text-white mt-0">{{__('Employer')}}</h6>
                                    <span class="text-white small-font-13">{{$job->employer}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-xs-12 overflow-hidden">
                            <div class="block-item-work bgOpSecondColor rounded-3 my-3 p-3 d-flex align-items-center" data-aos="fade-up" data-aos-offset="200" data-aos-easing="ease-in-sine" data-aos-duration="350">
                                <div class="btn-icon-45 borderRad-13 bgColorMain d-flex align-items-center justify-content-center">
                                    <i class="icon-users fs-5 text-white"></i>
                                </div>
                                <div class="px-3">
                                    <h6 class="text-white mt-0">{{__('Category')}}</h6>
                                    <span class="text-white small-font-13">{{$job->category}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-xs-12 overflow-hidden">
                            <div class="block-item-work bgOpSecondColor rounded-3 my-3 p-3 d-flex align-items-center" data-aos="fade-up" data-aos-offset="200" data-aos-easing="ease-in-sine" data-aos-duration="400">
                                <div class="btn-icon-45 borderRad-13 bgColorMain d-flex align-items-center justify-content-center">
                                    <i class="icon-bage fs-5 text-white"></i>
                                </div>
                                <div class="px-3">
                                    <h6 class="text-white mt-0">{{__('Type of the job')}}</h6>
                                    <span class="text-white small-font-13">{{$job->kind}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-xs-12 overflow-hidden">
                            <div class="block-item-work bgOpSecondColor rounded-3 my-3 p-3 d-flex align-items-center" data-aos="fade-up" data-aos-offset="200" data-aos-easing="ease-in-sine" data-aos-duration="450">
                                <div class="btn-icon-45 borderRad-13 bgColorMain d-flex align-items-center justify-content-center">
                                    <i class="icon-map fs-5 text-white"></i>
                                </div>
                                <div class="px-3">
                                    <h6 class="text-white mt-0">{{__('location')}}</h6>
                                    <span class="text-white small-font-13">{{$job->address}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="my-4">

                    <div class="container my-2">
                        <h4 class="colorMain title-sec position-relative mt-0">{{__('work tasks')}}</h4>
                    </div>

                    <div class="p-2">

                        @foreach($job->Tasks as $t_key => $task)
                            <div class="d-flex align-items-center my-4">
                                <div class="btn-icon-45 borderRad-13 bgOpSecondColor d-flex align-items-center justify-content-center">
                                    <span class="fs-5 colorMain">0{{$t_key+1}}</span>
                                </div>
                                <h6 class="text-white m-0 mx-3">{{$task->name}}</h6>
                            </div>
                        @endforeach

                    </div>

                </div>

                <div class="my-4">

                    <div class="container my-2">
                        <h4 class="colorMain title-sec position-relative mt-0">{{__('Required qualifications')}}</h4>
                    </div>

                    <div class="p-2">

                        @foreach($job->Qualifications as $t_qua => $qualification)
                            <div class="d-flex align-items-center my-4">
                                <div class="btn-icon-45 borderRad-13 bgOpSecondColor d-flex align-items-center justify-content-center">
                                    <span class="fs-5 colorMain">0{{$t_qua+1}}</span>
                                </div>
                                <h6 class="text-white m-0 mx-3">{{$qualification->name}}</h6>
                            </div>
                        @endforeach

                    </div>

                </div>

                <button class="btn-button w-50 bgColorMain m-auto d-table my-5 text-white fs-5 open-form-job-app">{{__('Apply')}}</button>


            </div>
        </div>

        <!-- Form Job Application -->
        <div class="w-75 bgOpSecondColor form-job-app h-100">
            <div class="container">
                <div class="d-flex align-items-center justify-content-between border-bottom p-4">
                    <h6 class="m-0 text-white">{{__('Fill out the job application form')}}</h6>
                    <button class="btn-icon-45 border borderRad-13 open-form-job-app"><i class="icon-arr-r text-white small-font-13"></i></button>
                </div>

                <div class="w-75 m-auto">
                    <div class="p-4">
                        <h6 class="text-white">{{$job->title}}</h6>
                        <div class="block-item-work rounded-3 my-3 d-flex align-items-center">
                            <div class="btn-icon-65 borderRad-13 bgColorMain d-flex align-items-center justify-content-center overflow-hidden">
                                <img src="{{asset('uploads/jobs/'.$job->image)}}" class="w-100 h-100" alt="">
                            </div>
                            <div class="px-3">
                                <h6 class="text-white mt-0">{{__('Employer')}}</h6>
                                <span class="text-white small-font-13">{{$job->employer}}</span>
                            </div>
                        </div>
                    </div>

                    <div class="form-job px-4">
                        <form action="{{route('recruitment.store')}}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="job_id" value="{{$job->id}}" id="">
                            <div class="row">
                                <div class="col-md-6 col-xs-12">
                                    <div class="my-3">
                                        <label for="" class="text-white mb-2">{{__('full name')}}</label>
                                        <div class="position-relative input-val">
                                            <i class="icon-user-b fix-icon-Input colorMain"></i>
                                            <input type="text" name="name" required maxlength="225" class="input-icon w-100" placeholder="{{__('full name')}}">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xs-12">
                                    <div class="my-3">
                                        <label for="" class="text-white mb-2">{{__('the ID number')}}</label>
                                        <div class="position-relative input-val">
                                            <i class="icon-user-b fix-icon-Input colorMain"></i>
                                            <input type="text" name="national_number" required maxlength="100" class="input-icon w-100" placeholder="000000000000">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xs-12">
                                    <div class="my-3">
                                        <label for="" class="text-white mb-2">{{__('phone')}}</label>
                                        <div class="position-relative input-val">
                                            <i class="icon-user-b fix-icon-Input colorMain"></i>
                                            <input type="tel" name="phone" required maxlength="11" class="input-icon w-100" placeholder="05565646546">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xs-12">
                                    <div class="my-3">
                                        <label for="" class="text-white mb-2">{{__('Gender')}}</label>
                                        <div class="position-relative select-in">
                                            <select name="gender" class="form-select" aria-label="Default select example">
                                                <option value="male">{{__('male')}}</option>
                                                <option value="female">{{__('female')}}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xs-12">
                                    <div class="my-3">
                                        <label for="" class="text-white mb-2">{{__('date of birth')}}</label>
                                        <div class="position-relative input-val data-val">
                                            <input type="date" name="date_of_birth" class="w-100" required value="2013-01-08" placeholder="12-1-2023">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xs-12">
                                    <div class="my-3">
                                        <label for="" class="text-white mb-2">{{__('Qualification')}}</label>
                                        <div class="position-relative input-val">
                                            <i class="icon-user-b fix-icon-Input colorMain"></i>
                                            <input type="text" name="qualification" required maxlength="225" class="input-icon w-100" placeholder="المؤهل العلمي">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xs-12">
                                    <div class="my-3">
                                        <label for="" class="text-white mb-2">{{__('Specialization')}}</label>
                                        <div class="position-relative input-val">
                                            <input type="text" name="specialty" required maxlength="225" class="w-100" placeholder="انظمة معلومات">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xs-12">
                                    <div class="my-3">
                                        <label for="" class="text-white mb-2">{{__('City')}}</label>
                                        <div class="position-relative input-val">
                                            <i class="icon-user-b fix-icon-Input colorMain"></i>
                                            <input type="text" name="city" required maxlength="225" class="input-icon w-100" placeholder="المدينه">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 col-xs-12">
                                    <div class="my-3">
                                        <label for="" class="text-white mb-2">{{__('Attach your CV')}}</label>
                                        <label for="file-upload" class="custom-file-upload w-100 d-flex align-items-center justify-content-between">
                                            <span>{{__('no file chosen')}}</span>
                                            <a class="p-1 rounded-3 text-white px-3 bgColorMain">
                                                <span>{{__('upload a file')}}</span>
                                            </a>
                                        </label>
                                        <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
                                    </div>
                                </div>
                                <div class="col-md-12 col-xs-12">
                                    <div class="my-3">
                                        <label for="" class="text-white mb-2">{{__('message')}}</label>
                                        <textarea name="message" placeholder="{{__('message')}}" maxlength="500" class="w-100"></textarea>
                                    </div>
                                </div>
                                <div class="col-md-12 col-xs-12">
                                    <div class="my-5">
                                        <button class="btn-button w-100 text-white bgColorMain rounded-3 fs-5" type="submit">{{__('Apply')}}</button>

                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
</div>

    <!-- Vertically centered modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content bgOpSecondColor">
            <div class="modal-body">
                <div class="text-center p-4">
                    <span class="btn-icon-big bgOpSecColor rounded-circle d-flex align-items-center justify-content-center m-auto">
                        <img src="{{asset('front/images/modal.png')}}" alt="">
                    </span>
                    <p class="text-white my-4">{{__('You have successfully applied for the job')}}</p>
                    <p class="text-white my-4">{{_('Thank you for applying for this job. We will contact you soon')}}</p>
                    <div class="d-flex align-items-center justify-content-center">
                        <button class="btn-button bgColorMain text-white rounded-3 d-flex align-items-center justify-content-center fs-6 mx-2" data-bs-dismiss="modal">
                            {{__('Close')}}
                        </button>
                    </div>
                </div>
            </div>
          </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function(){
            let searchParams = new URLSearchParams(window.location.search)
            var done = searchParams.has('done') // true
            if(done){
                $('#exampleModal').modal('show')
                // get current url
                var url = window.location.href
                // remove done params of url
                var url = url.split('?')[0]
                // replace current url with new url without done params
                window.history.pushState('', '', url);
            }
        })
    </script>
@endsection