@extends('layouts.front-page')
@section('pageTitle', 'HireMee Jobs')

@section('content')
<section class="section hme-candidate-banner hme-bgm-light-gray p-0 p-relative section-min-height-100">
	<div class="row">
	    <div class="col">
	      <!-- carousel code -->
	       <div class="jobcaption-banner">
	          	
	          </div>
	  </div>
	</div>	
</section>
<section class="jobcaption-bg">
    <div class="jobcaption">
        <div class="jobcaption-card jobcaption-form">
	        <div class="jobcaption-border"></div>
			<div class="jobcaption-p-l-r-34">

				<h5 class="jobcaption-content f-34">Hello Job Captains!</h5>
	     	
				<p class="f-14">Nominate yourself to transform your career now! <br/>Be a HireMee representative in your college and get placed in your dream company on a priority basis.<br/>What are you waiting for? Hurry up!</p>

				{!! Form::open(array('url' => secure_url('job-captain'), 'method'=>'POST','class'=>'form-horizontal','id'=>'job_captain_form')) !!}
                {{ csrf_field() }}
				
                    @csrf
                    @if(Session::get('success'))
			        <div class="alert alert-success background-success">
			          <button type="button" class="close m-t-0" data-dismiss="alert" aria-label="Close">
			            <i class="hiremee-multiply text-white"></i>
			          </button>
			          <strong>Success!</strong>{{ Session::get('success') }}
			        </div>
			        @endif
			        @if(Session::get('error'))
			        <ul class="notifications">
			          <div class="col-md-12 error-content-b media error-content-b backend-error-box">
			            <button class="btn btn-danger waves-effect" data-type="danger" data-from="top" data-align="right" data-icon="hiremee-multiply">{{ Session::get('error') }}</button>
			          </div></ul>
			        @endif
                    <label for="exampleInputEmail1">Name <span class="text-danger">*</span> :</label>
					<div class="row col-sm-12 col-lg-12 form-group">
					   
					    <input type="text" class="form-control" id="name" name="name" placeholder="Your Name" autocomplete="off">
				    </div>

				    <label for="exampleInputEmail1">E-mail ID <span class="text-danger">*</span> :</label>
				    <div class="row col-sm-12 col-lg-12 form-group">
					    
					    <input type="text" class="form-control" id="email_address" name="email_address" placeholder="Your email address" autocomplete="off">
				    </div>

				     <label for="exampleInputEmail1">Phone Number <span class="text-danger">*</span> :</label>
				    <div class="row col-sm-12 col-lg-12 form-group">
					   
					    <input type="text" class="form-control" id="mobile_number" name="mobile_number" placeholder="Your Contact Number" autocomplete="off">
				    </div>

				    <label for="exampleInputEmail1">College Name <span class="text-danger">*</span> :</label>
				    <div class="row col-sm-12 col-lg-12 form-group">
					    
					    <input type="text" class="form-control" id="college_name" name="college_name" placeholder="Your College Name" autocomplete="off">
				    </div>

				    <label for="exampleInputEmail1">Location <span class="text-danger">*</span> :</label>
				    <div class="row col-sm-12 col-lg-12 form-group">
					    
					    <input type="text" class="form-control" id="location" name="location" placeholder="Your Location" autocomplete="off">
				    </div>

				    <label for="exampleInputEmail1">Comments :</label>
				    <div class="row col-sm-12 col-lg-12 form-group">
					   
					    <div class="select-full-width">
					    <textarea class="form-control" id ="comments" name="comments" rows="4" placeholder="Your Comments"></textarea>
					</div>
					</div>
					<div class="form-group">
						    <div class="d-flex justify-content-start">
						     	<button type="Submit" class="btn btn-success mt-2 c-p" >{{ __('Submit Query') }} </button>
						    </div>
						  </div>
				    </div>
				    {!! Form::close() !!}
			</div>
		</div>
	</div>
</section>

@endsection
@section('footer')
<script type="text/javascript">
  $(document).ready(function(){
	$.validator.addMethod("validateEmail", function(value, element) {
	    return this.optional(element) || /^\s*([0-9a-zA-Z]([-_\\.]*[0-9a-zA-Z]+)*)@([0-9a-zA-Z]([-_\\.]*[0-9a-zA-Z]+)*)[\\.]([a-zA-Z]{1,9})[\w\W ]*[^ ]$/.test(value);
	  }, "Please Enter a valid email id.");

	$.validator.addMethod("nameValidate", function(value, element) {
	return this.optional(element) || /^[a-zA-Z.\s]+$/.test(value);
	}, "This value seems invalid.");

	$.validator.addMethod('yopmailvalidation', function (value) {
    return /^([\w-.]+@(?!yopmail\.com)([\w-]+.)+[\w-]{2,4})?$/.test(value);
},"we won't allowed the Yopmail email address");


	$('#job_captain_form').validate({
        errorElement: 'span',
        errorPlacement: function (error,element){
          var parent = $(element).parent();
          $('.tooltip').tooltip('hide');             
          $("body").find('#'+error[0].id+'-custom').remove();
          parent.append('<span data-position="left" data-delay="0" style="z-index:1000;" class="js-tootletip hiremee-info text-danger tooltip-validate" id="'+error[0].id+'-custom" data-toggle="tooltip" data-original-title="'+error[0].innerText+'" data-trigger="hover"></span>');
          $('#'+error[0].id+'-custom').tooltip();
        },
        success: function (element){
          $("body").find('#'+element[0].id+'-custom').remove();
            $('#'+element[0].id+'-custom').tooltip('hide');
            $('.js-tooltip-validate').tooltip();
        },
        onfocusout: false,
	    rules: {         
	    name: {
	      required:true,
	      maxlength:50,
	      nameValidate:true,
	      normalizer: function(value) {
		       return $.trim(value);
		    }
	    },
	    email_address: {
	      required:true,
	      validateEmail:true,
	      yopmailvalidation:true,
	    },  
	    mobile_number: {
	      required: true,
	      number: true,
	      minlength:10,
	      maxlength:10
	    },
	    college_name:{
				required: true,
	            maxlength:250
	    },
	    location:{
				required: true,
	            maxlength:150
	    },
	    comments: {
	      minlength:10,
	      maxlength:500,      
	      normalizer: function(value) {
	           return $.trim(value);
	        }
	    }
	  },
	  messages: {
	     name: {
	      required:"Please enter name",
	      nameValidate:"Please enter valid name",
	    },
	    email_address: {
	      required:"Please enter your email address",
	      validateEmail:"Please valid email Address",
	    },
	    mobile_number: {
	      required: "Please enter a contact number",
	      minlength: "contact number must 10 characters",
	    }, 
	    college_name:{
				required: "Please enter the college name",
	    },
	    location:{
				required: "Please enter the location",
	    },
	    comments:{
	      minlength:"Minimum length is 10",
	    }             
	  },
	  submitHandler:function(form){
	    $("#js_contact_button").attr("disabled",true);
	   	form.submit();   
	  } 
	});
  });
</script>
@endsection