@extends('frontend.layouts.master')
@section('styles')
@parent
@stop
{!! RecaptchaV3::initJs() !!}
@section('content')
<main>
 @if(!empty($banner))
  <section class="inner_banner">
    <div class="bg_ p_img">
      @if(!empty($banner) && !empty($banner->getData('banner_image')))
        <picture>
            <source srcset="{{webp($banner->getData('banner_image'))}}" type="image/webp">
            <source srcset="{{PP($banner->getData('banner_image'))}}" type="image/{{FT($banner->getData('banner_image'))}}">
            <img src="{{PP($banner->getData('banner_image'))}}" loading="lazy" alt="">
        </picture>
        @else      
      <picture>
        <source srcset="{{webp($banner->getData('banner_image'))}}" type="image/webp">
        <source srcset="{{PP($banner->getData('banner_image'))}}" type="image/{{FT($banner->getData('banner_image'))}}">
        <img src="{{PP($banner->getData('banner_image'))}}" loading="lazy" alt="{{lang('careers_banner_alt_keywords')}}">
      </picture>
      @endif
    </div>

    <div class="container">
      <div class="page_title">
        <h1>
          <span>{{$banner->getData('post_title')}}</span>
        </h1>
      </div>
      <div class="intro">
        <div class="text_box ">
        {!!$banner->getData('description')!!}
        </div>
      </div>
    </div>

   @include('frontend.layouts.social')
  </section>
  @endif

  <section class="page-section">
    <div class="container ">
      <div class="title_box">
        <h3 class="section-title">
          <span>{{lang('latest')}}</span>
        </h3>
        <h5 class="small_title_">
          <span>{{lang('jobs')}}</span>
        </h5>
      </div>

      <div class="careers_wrap">
         @if(!empty($careers) && $careers->isNotEmpty())
          @foreach($careers as $career)
        <div class="c_item">
          <div class="content_">
            <h4>{{$career->getData('post_title')}}</h4>
            <div class="meta_box">
              <div class="m_">
                <span>{{lang('posted_on')}} {{DTF($career->getData('post_date'))}}</span>
              </div>
              <div class="m_">
                <span>{{$career->getData('number_positions')}} {{lang('positions')}}</span>
              </div>
            </div>
          </div>
          
          <div class="btn_box">
            <a class="dir-btn" data-title="{{$career->getData('post_title')}}"  data-id="{{$career->getData('post_id')}}" href="#pop1" data-fancybox-modal-pop>{{lang('apply_now')}}<span></span><span></span><span></span><span></span><b aria-hidden="true">{{lang('apply_now')}}</b><b
                aria-hidden="true">{{lang('apply_now')}}</b><b aria-hidden="true">{{lang('apply_now')}}</b><b aria-hidden="true">Apply
                Now</b></a>
          </div>
        </div>
        @endforeach
        @else
        <p>{{lang('no_job_vacancies')}}</p>
        @endif

      </div>

      {{$careers->links()}}
    </div>


  </section>

   <div class="popup_box md_box form_box contact_us_pop " id="pop1" style="display: none;">
    <div class="inner_">
      <div class="img_box ">
        <picture>
          <source srcset="{{getFrontendAsset('images/career_img.webp')}}" type="image/webp">
          <source srcset="{{getFrontendAsset('images/career_img.jpg')}}" type="image/jpeg">
          <img src="{{getFrontendAsset('images/career_img.jpg')}}" loading="lazy" alt="">
        </picture>
      </div>
      
      <div class="content_box">
        <div class="title_">
          {{lang('apply_now')}}
        </div>
        <div class="text_box">
          <h3 id="form_title"></h3>
        </div>
        {{Form::open(array('url'=>route('submit-career',[$lang]),'name'=>'registartion-form','id'=>'career-form','role'=>'form','autocomplete'=>'off') )}}
           <input id="career_id" name="career_id" type="hidden">
          <div class="f_inner_">
            <div class="input-field ">
                <input id="full_name" name="full_name" type="text">
                <label for="full_name">{{lang('full_name')}}</label>
            </div>
            <div class="input-field ">
                <input id="user_email" name="user_email" type="email">
                <label for="user_email">{{lang('email')}}</label>
            </div>

            <div class="input-field ">
                <input id="phone_number" name="phone_number" type="text">
                <label for="phone_number">{{lang('phone_number')}}</label>
            </div>
            
            <div class="input-field attachment_">
                  <div class="input_parent">
                      <input type="file" class="form-control uploader" data-mimes="pdf,docx" data-type="career_cv"
                        id="career_cv"
                        name="career_cv" 
                        style="position: relative; z-index: 1;">
                      <div class="choose">
                        <div class="choose-btn">{{lang('upload_cv')}} <small> (pdf,docx)(2MB)</small></div>
                        <div class="choose-file uploadFileName"></div>
                        <div class="uploadPercentage"></div>
                        <div class="uploadProgressWrapper">
                          <div class="uploadProgress" style="width: 0px;"></div>
                        </div>
                        <div class="icon_box">
                          <div class="icon icon-attachment"></div>
                        </div>
                      </div>
                      <input class="filename" type="hidden" id="career_cv_file" value=""
                        name="career_cv_file" placeholder="">
                      <input class="original_name" type="hidden" id="career_cv_tmp" value=""
                        name="career_cv_tmp" placeholder="">
                  </div>
                </div>
            {!! RecaptchaV3::field('career-form') !!}
            <div class="input-field text-right">

              <button type="submit" class="dir-btn  dir-btn--filled"
                role="button">{{lang('submit')}}<span></span><span></span><span></span><span></span><b
                  aria-hidden="true">{{lang('submit')}}</b><b aria-hidden="true">{{lang('submit')}}</b><b aria-hidden="true">{{lang('submit')}}</b><b
                  aria-hidden="true">submit</b></button>
            </div>
          </div>
          <div class="aj_loader ">
                <div class="inner_loader">
                <div class="c_loader"></div>
                </div>
            </div>
          {!! Form::close() !!}
      </div>
    </div>
    <button type="button" data-fancybox-close="" class="fancybox-button fancybox-close-small" title="Close"><svg
        xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24">
        <path d="M13 12l5-5-1-1-5 5-5-5-1 1 5 5-5 5 1 1 5-5 5 5 1-1z"></path>
      </svg></button>
  </div>

</main>
@stop

@section('scripts')
@parent
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl={{$lang}}" async defer></script>
<script type="text/javascript" src="{{ asset('assets/frontend/swal/sweetalert2.all.min.js') }}"></script>
@include('frontend.scripts.uploader_script')
@include('frontend.partials.jquery_custom_validators')
<script>

    var activeForm = null;
    function formSubmit(){
        grecaptcha.execute();
        if(activeForm)
        {
            $(activeForm).submit();
        }
        return true;
    }
$('#phone_number').mask("000000000000000");    
$('#career-form').validate({
			errorPlacement: function(error, element) {	
			error.appendTo(element.parent());
			},
			ignore:{},
			rules :{
			  'full_name':{
					required:true,
					alphanumeric:true,
				},
				'user_email':{
					required:true,			
					myEmail:true,	
				},
				'phone_number':{
					required:true,
					minlength: 9
					
				},
				'career_cv_file':{
					required:true,
				},
			
			},
			messages:{
				'full_name':{
					required:"{{ trans('messages.field_required') }}",
					alphanumeric:"{{ trans('messages.no_spcl_char') }}",
				},
				'last_name':{
					required:"{{ trans('messages.field_required') }}",
					alphanumeric:"{{ trans('messages.no_spcl_char') }}",
				},
				'date_of_birth':{
					required:"{{ trans('messages.field_required') }}",
				},
				'user_email':{
					required:"{{ trans('messages.field_required') }}",
					myEmail:"{{ trans('messages.invalid_email') }}",
					email:"{{ trans('messages.invalid_email') }}",
				},
				'phone_number':{
					required:"{{ trans('messages.field_required') }}",
					minlength:"{{ trans('messages.no_min_length') }}",
				},
				
				'career_cv_file':{
					required:"{{ trans('messages.field_required') }}",
				},
			
				
			},
			submitHandler:function(form){
				
				$('.aj_loader').addClass('show');
				activeForm = form;
				$('.userMessage').html('').hide();
				if (grecaptcha.getResponse()) 
				{
					activeForm = null;
					var $form = $(form);
					dataToSend = $(form).serializeArray();
					 dataToSend.push({ name: "g-recaptcha-response", value: grecaptcha.getResponse() });
			
					sendAjax($form.attr('action'),'POST',dataToSend,function(response){
						$('.aj_loader').removeClass('show');
            grecaptcha.reset();
						
						if(response.status==true)
						{
							$form[0].reset();
                            $.fancybox.close();
							$('.uploadFileName').html('');
							$('.uploadPercentage').html('');
							$('.uploadProgressWrapper').html('');
                            swal.fire({
                                title: response.warning,
                                html: response.userMessages,
                                confirmButtonText: "{{lang('ok')}}",
                                confirmButtonColor:'#000',
                                closeOnConfirm: false
                            });
						}else{
                            $.each(response.formMessages, function( index, value ){
                                $('#'+index+'-error').remove();
                                    $('#'+index).parent().prepend('<label id="'+index+'-error" class="error er-label" for="'+index+'">'+value+'</label>');
                                    $('#'+index).addClass('error');
                                });
                            }
						  if(response.userMessages){
                            swal.fire({
                                title: response.warning,
                                html: response.userMessages,
                                confirmButtonText: "{{lang('ok')}}",
                                confirmButtonColor:'#000',
                                closeOnConfirm: false
                            });
                          }
					});
				}
				else{
					grecaptcha.reset();
					grecaptcha.execute();
				}
				return false;
			}
		});  



  $(function () {

     $("[data-fancybox-modal-pop]").fancybox({
      modal: true,
      beforeLoad:function(instance, slide){
          $('#form_title').text('');
          $('#career_id').text('');
          var obj =slide.opts.$orig;
          var title =obj.data('title');
          var id =obj.data('id');
          $('#form_title').text(title);
          $('#career_id').val(id);
      },
    });



    $('.input-field select').formSelect();
  })
</script>
@stop