@extends('web.layouts.container')
@section('css')
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/toastr.css') }}" />
@endsection
@section('content')
    <div class="page-heading">
        <div class="overlay"></div>
        <div class="container">
            <div class="text text-center">
                <h4>{{__('empPortals.jobs')}}</h4>
            </div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="#">{{__('main.home_page')}}</a>
                        <i class="far fa-dot-circle"></i>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">{{__('empPortals.job_seeker_or_training_seeker')}}</li>
                </ol>
            </nav>
        </div>
    </div>
    <section class="job-form-pg">
        <div class="container">
            <div class="row">
                <div class="col-md-11 m-auto">
                    <div class="form-wrapper">
                        <div class="text-heading">
                            <div class="text">
                                <span class="title">{{__('empPortals.form')}}</span>
                                <h3>{{__('empPortals.job_seeker_or_training_seeker_form')}}</h3>
                            </div>
                        </div>
                        <form action="{{route('traineWorkApplication')}}" method="post" class="send_application_form">
                            @csrf()
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <div class="form-group">
                                        <label for="">{{__('users.job_title')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                        <input type="text" name="job_title" class="form-control" placeholder="{{__('users.job_title')}}"/>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                    <div class="form-group">
                                        <label for="">{{__('users.first_name')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                        <input type="text" name="first_name" class="form-control" placeholder="{{__('users.first_name')}}"/>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                    <div class="form-group">
                                        <label for="">{{__('users.second_name')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                        <input type="text" name="second_name" class="form-control" placeholder="{{__('users.second_name')}}"/>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                    <div class="form-group">
                                        <label for="">{{__('users.family_name')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                        <input type="text" name="family_name" class="form-control" placeholder="{{__('users.family_name')}}"/>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                    <div class="form-group">
                                        <label for="">{{__('users.title')}}</label>
                                        <input type="text" name="title" class="form-control" placeholder="{{__('users.title')}}"/>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                    <div class="form-group">
                                        <label for="">{{__('users.birth_date')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                        <input type="date" name="birth_date" class="form-control" placeholder="{{__('users.birth_date')}}"/>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                    <div class="form-group">
                                        <label for="">{{__('users.phone')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                        <input type="tel" name="phone" class="form-control" placeholder="{{__('users.phone')}}"/>
                                    </div>
                                </div>

                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                    <div class="form-group">
                                        <label for="">{{__('users.email')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                        <input type="email" name="email" class="form-control" placeholder="{{__('users.email')}}"/>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                    <div class="form-group">
                                        <label for="">{{__('users.email_confirmation')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                        <input type="email" name="email_confirmation" class="form-control" placeholder="{{__('users.email_confirmation')}}"/>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                    <div class="form-group">
                                        <label for="">{{__('users.gender')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                        <select name="gender" class="form-control">
                                            <option value="">{{__('users.gender')}}</option>
                                            <option value="male">{{__('users.male')}}</option>
                                            <option value="female">{{__('users.female')}}</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                    <div class="form-group">
                                        <label for="">{{__('users.nationality')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                        <select name="nationality_id" class="form-control">
                                            <option value="">{{__('users.nationality')}}</option>
                                            @if($nationalities->count())
                                                @foreach($nationalities as $nationality)
                                                    <option value="{{$nationality->id}}">{{$nationality->name}}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                    <div class="form-group">
                                        <label for="">{{__('users.country_id')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                        <select name="country_id" class="form-control countries" data-cities=".city_id">
                                            <option value="">{{__('users.country')}}</option>
                                            @if($countries->count())
                                                @foreach($countries as $country)
                                                    <option value="{{$country->id}}">{{$country->name}}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                    <div class="form-group">
                                        <label for="">{{__('users.city_id')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                        <select name="city_id" class="form-control city_id">
                                            <option value="">{{__('users.city_id')}}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                    <div class="form-group">
                                        <label for="">{{__('users.degree')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                        <select data-other=".other_degree" name="degree" class="form-control">
                                            <option value="">{{__('users.degree')}}</option>
                                            <option value="diploma">{{__('users.diploma')}}</option>
                                            <option value="bachelor">{{__('users.bachelor')}}</option>
                                            <option value="ma">{{__('users.ma')}}</option>
                                            <option value="phd">{{__('users.phd')}}</option>
                                            <option value="other">{{__('users.other')}}</option>
                                        </select>
                                    </div>
                                    <div class="form-group d-none other_degree"> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                        <input type="text" name="other_degree" class="form-control" placeholder="{{__('users.other_degree')}}">
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 ">
                                    <div class="form-group">
                                        <label for="">{{__('users.general_speciality')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                        <select data-other=".other_general_speciality" name="general_speciality" class="form-control">
                                            <option value="">{{__('users.general_speciality')}}</option>
                                            <option value="dental_technology">{{__('users.dental_technology')}}</option>
                                            <option value="other">{{__('users.other')}}</option>
                                        </select>
                                    </div>
                                    <div class="form-group d-none other_general_speciality"> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                        <input type="text" name="other_general_speciality" class="form-control" placeholder="{{__('users.general_speciality')}}">
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 ">
                                    <div class="form-group">
                                        <label for="">{{__('users.graduation_date')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                        <input type="date" name="graduation_date" class="form-control" placeholder="{{__('users.graduation_date')}}"/>
                                    </div>
                                </div>

                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 ">
                                    <div class="form-group">
                                        <label for="">{{__('users.job_status')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                        <select data-other=".other_job_status" name="job_status" class="form-control">
                                            <option value="">{{__('users.job_status')}}</option>
                                            <option value="public_employee">{{__('users.public_employee')}}</option>
                                            <option value="private_employee">{{__('users.private_employee')}}</option>
                                            <option value="self_employee">{{__('users.self_employee')}}</option>
                                            <option value="unemployed">{{__('users.unemployed')}}</option>
                                            <option value="other">{{__('users.other')}}</option>
                                        </select>
                                    </div>
                                    <div class="form-group d-none other_job_status"> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                        <input type="text" name="other_job_status" class="form-control" placeholder="{{__('users.other_job_status')}}">
                                    </div>
                                </div>

                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 ">
                                    <div class="form-group">
                                        <label for="">{{__('users.specialization')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                        <select data-other=".other_specialization" name="specialization" class="form-control">
                                            <option value="">{{__('users.specialization')}}</option>
                                            <option value="fixed_fixtures">{{__('users.fixed_fixtures')}}</option>
                                            <option value="unfixed_fixtures">{{__('users.unfixed_fixtures')}}</option>
                                            <option value="orthodontics">{{__('users.orthodontics')}}</option>
                                            <option value="other">{{__('users.other')}}</option>
                                        </select>
                                    </div>
                                    <div class="form-group d-none other_specialization"> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                        <input type="text" name="other_specialization" class="form-control" placeholder="{{__('users.other_specialization')}}">
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                    <div class="form-group">
                                        <label for="">{{__('users.cv')}}</label>  <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                        <input type="file" name="cv" class="form-control"/>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 ">
                                    <div class="form-group">
                                        <label for="">{{__('users.how_know_us')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                        <select data-other=".other_how_know_us" name="how_know_us" class="form-control">
                                            <option value="">{{__('users.how_know_us')}}</option>
                                            <option value="friend">{{__('users.through_friend')}}</option>
                                            <option value="google">{{__('users.google')}}</option>
                                            <option value="related_associations">{{__('users.related_associations')}}</option>
                                            <option value="social_media">{{__('users.social_media')}}</option>
                                            <option value="other">{{__('users.other')}}</option>
                                        </select>
                                    </div>
                                    <div class="form-group d-none other_how_know_us"> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                        <input type="text" name="other_how_know_us" class="form-control" placeholder="{{__('users.other_how_know_us')}}">
                                    </div>
                                </div>

                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                    <div class="form-group">
                                        <label for="">{{__('users.experience_years')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                        <input type="number" name="experience_years" class="form-control" min="1" placeholder="{{__('users.experience_years')}}"/>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <div class="form-group m-0">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" name="adaption_of" class="custom-control-input" id="adaption_of" value="1">
                                            <label class="custom-control-label" for="adaption_of"><small>{{__('users.adaption_of_hint')}}</small></label>
                                            <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <div class="form-group">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" name="share_cv" class="custom-control-input" id="share_cv" value="1">
                                            <label class="custom-control-label" for="share_cv"><small>{{__('users.share_cv_hint')}}</small></label>
                                            <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button class="main-butn send_application_button">{{__('empPortals.send')}}</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')
    <script src="{{ asset('assets/web/js/lib/toastr.min.js') }}"></script>

    <script>
        $(document).ready(function () {
            $('.send_application_button').click(async function (e) {
                e.preventDefault();

                let form = $('.send_application_form'),
                    data = new FormData(form[0]),
                    url = form.attr('action'),
                    method = form.attr('method');

                const response=await ajax({
                    url,
                    data,
                    dataType: 'json',
                    method
                });

                if (response.errors) {
                    toasterError(response.errors);
                }
                if (response.message) {
                    toasterSuccess(response.message);
                    setTimeout(function(){
                        window.location.href = "{{route('employee-portal.index')}}";
                    }, 500)

                }
            });

            $('.countries').change(async function (e) {
                e.preventDefault();
                let data = {country_id: $(this).val()},
                    url = "{{route('getCities')}}",
                    method = 'get',
                    cities = $($(this).data('cities'));
                const response=await ajax({
                    url,
                    data,
                    dataType: 'html',
                    method,
                    // contentType: false,
                    // processData: false,
                });
                if (response) {
                    cities.html(response)
                }
            });

            $('select').change(function () {
                if ($(this).val() === 'other'){
                    $($(this).data('other')).removeClass('d-none');
                } else {
                    $($(this).data('other')).addClass('d-none');
                    $($(this).data('other')).children('input').val('');
                }
            });

            $('input[name="terms"]').click(function () {
                if ($(this).prop('checked') === true){
                    $('.modal').modal()
                }
            })
        });
    </script>
@endsection