@extends('layouts.app')
@section('content')

<!--=================================
inner banner -->
<div class="header-inner bg-light text-center">
</div>
<!--=================================
inner banner -->

<!--=================================
Let’s Get In Touch -->
<section class="space-ptb">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="section-title-03 text-center">
             @if(request()->get('search') || request()->get('location'))
                <h3>Sorry, the job that you want to view is no longer available.</h3>
                <h3> You can still <a class="btn btn-primary" href="{{ url('/jobs?search='.request()->get('search').'&location='.request()->get('location').'&Radius=20') }}">click here</a> to know more about your favourite jobs to grab more opportunities.</h3>
            @else 
                 <h3>Sorry, the job that you want to view is no longer available.</h3>
                 <h3> You can still fill your information to know more about your favourite jobs to grab more opportunities.</h3>
                 <div class="login-register">
          <div class="tab-content">
             <legend class="px-2" id="sug_id">Please fill in the details so that we can serve you better.</legend>

             <legend class="px-2">
                 <div class="text-success text-center" id="success_res"></div>
             </legend>

             <div class="tab-pane active" id="candidate" role="tabpanel">
              <form class="mt-4" name="Jobnotfound"  method="POST" enctype="multipart/form-data">
                @csrf
                <div class="form-row">
                  <div class="form-group col-12">
                    <input type="text" class="form-control"  id="uname" name="uname" placeholder="Enter Name">
                    <div class="text-danger" id="nameErr"></div>
                </div>
                <div class="form-group col-12">
                    <input type="email" class="form-control" id="uemail" name="uemail" placeholder="Enter email">
                    <div class="text-danger" id="emailErr"></div>
                </div>
                <div class="form-group col-12">
                    <input type="text" class="form-control" id="ujobtitle" name="ujobtitle" placeholder="Enter Job Title">
                    <div class="text-danger" id="jobtitleErr"></div>
                </div>
                <div class="form-group col-12">
                    <input type="text" class="form-control city_search" id="ujoblocation" name="ujoblocation" placeholder="Enter Location">
                    <div class="city_list"></div>
                    <div class="text-danger" id="joblocationErr"></div>
                </div>
                <input type="hidden" name="uaff_id" id="uaff_id">
                <div class="form-group col-12">
                 <div class="text-danger text-center" id="error_res"></div>
               </div>
              </div>
               <div class="form-row">
                <div class="col-md-12"> 
                  <a class="btn btn-primary btn-block" id="btnSendJobNotFound" href="javascript:">SHOW MORE JOBS</a>
                </div> 
            </div>
          </form>
          </div>
        </div>
      </div>

             @endif 
        </div>
      </div>
  </div>
  </div>
</section>

<!--=================================
Let’s Get In Touch -->

<!-- start Added Above Footer Add From Admin SiteSetting -->

<div class="adv_section container">
    {!! $siteSetting->above_footer_ad !!}
</div>
<!-- end Added Above Footer Add From Admin SiteSetting -->


<div id="AjaxLoaderDiv" style="display: none;z-index:99999 !important;">
    <div style="width:100%; height:100%; left:0px; top:0px; position:fixed; opacity:0; filter:alpha(opacity=40); background:#000000;z-index:999999999;">
    </div>
    <div style="float:left;width:100%; left:0px; top:50%; text-align:center; position:fixed; padding:0px; z-index:999999999;">
       <div class="spinner">
        <div class="spinner1"></div>
        <div class="spinner2"></div>
        <div class="spinner3"></div>
        <div class="spinner4"></div>
        <div class="spinner5"></div>
        <div class="spinner6"></div>
        <div class="spinner7"></div>
        <div class="spinner8"></div>
    </div>             
</div>
</div>

<!--=================================
    Job Alert Modal Popup -->

@endsection
@push('scripts') 
<script type="text/javascript">
   
    // $(document).ready(function () {
   $("#btnSendJobNotFound").click(function () {
    var name = document.Jobnotfound.uname.value;
    var email = document.Jobnotfound.uemail.value;
    var jobtitle = document.Jobnotfound.ujobtitle.value;
    var joblocation = document.Jobnotfound.ujoblocation.value;
    var aff_id = document.Jobnotfound.uaff_id.value;
    var token =  '{{csrf_token()}}'; 

    //Validate name
    if(name == "") {
        $("#nameErr").show();
        printError("nameErr", "Please enter your name");

    } else {
        $("#nameErr").hide();
        var regex = /^[a-zA-Z\s]+$/;                
        if(regex.test(name) === false) {
            $("#nameErr").show();
            printError("nameErr", "Please enter a valid name");
        } else {
            $("#nameErr").hide();
            // $("#nameErr").show();
            printError("nameErr", "");
            nameErr = false;
        }
    }
    
    // Validate email address
    if(email == "") {
        $("#emailErr").show();
        printError("emailErr", "Please enter your email address");
    } else {
        // Regular expression for basic email validation
        var regex = /^\S+@\S+\.\S+$/;
        if(regex.test(email) === false) {
            $("#emailErr").show();
            printError("emailErr", "Please enter a valid email address");
        } else{

            $("#emailErr").hide();
            printError("emailErr", "");
            emailErr = false;
        }
    }
    
    // Validate Job Title
    if(jobtitle == "") {
        $("#jobtitleErr").show();
        printError("jobtitleErr", "Please enter Job Title");
    } else {
        $("#jobtitleErr").hide();
        printError("jobtitleErr", "");
        jobtitleErr = false;
    }
    
       // Validate Job Location
       if(joblocation == "") {
        $("#joblocationErr").show();
        printError("joblocationErr", "Please enter Job Location");
    } else {
        $("#joblocationErr").hide();
        printError("joblocationErr", "");
        joblocationErr = false;

    }


    
    // Prevent the form from being submitted if there are any errors
    if((nameErr || emailErr || jobtitleErr || joblocationErr) == true) {

     return false;
    } else {
        if(name!="" && email!="" && jobtitle!="" && joblocation!=""){
        $("#nameErr").hide();
        $("#emailErr").hide();
        $("#jobtitleErr").hide();
        $("#joblocationErr").hide();
        $('#success_res').hide();   
        $('#error_res').hide(); 

        $.ajax({
           headers: {
            'X-CSRF-Token': token 
        },
        url: "{{route('request.Jobnotfound.popup')}}",
        type: 'POST',
        data: {name:name, email:email,jobtitle:jobtitle,joblocation:joblocation,aff_id:aff_id},
        success: function (result) {
                      if(result.hasOwnProperty('error')){
                        $('#error_res').show(); 
                        $('#error_res').text(result.error);
                    }else{
                        window.location.href = '{{url("/")}}'+'/jobs?search='+jobtitle+'&location='+joblocation+'&Radius=20';
                    }

                }
            }); 
        }
    }
});
</script>
@endpush