@extends('frontend.layouts.web')
@section('content')
<section class="wizard-section">
  <div class="container">
    <div class="row no-gutters"> 
      <div class="col-lg-8 col-md-12 mt-3">
        <div class="form-wizard">
          <form role="form" action="{{route('form-submit.store')}}" class="login-box" method="POST" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="job_id" value="{{$JobDetail->id}}">
            <div class="form-wizard-header">
              <ul class="list-unstyled form-wizard-steps clearfix">
                <li class="active"><span>1</span></li>
                <li><span>2</span></li>
                <li><span>3</span></li>
              </ul>
            </div>
            {{-- Personal Information start here  --}}
            <fieldset class="wizard-fieldset show">
              <h1 class="">Job Application</h1>
              <h4 class="mb-3">Personal Information</h4>
              <div class="row">

                <div class="col-md-12">
                  <div class="form-group">
                    <label for="">Full Name*</label>
                    <input type="text" class="form-input bg-transparent p-3 wizard-required" id="full_name" name="full_name" value="{{old('full_name')}}">
                    <div class="wizard-form-error">
                      Field is required*
                    </div>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="form-group">
                    <label for="">Short Detail*</label>
                    <input type="text" class="form-input bg-transparent p-3 wizard-required" id="remarks" name="remarks" value="{{old('remarks')}}">
                    <div class="wizard-form-error">
                      Field is required*
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="">E-mail*</label>
                    <input type="text" class="form-input bg-transparent p-3 wizard-required" id="email" name="email" value="{{old('email')}}">
                    <div class="wizard-form-error">
                      Field is required*
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="">Mobile*</label>
                    <input type="text" class="form-input bg-transparent p-3 wizard-required" id="Mnumber" data-inputmask="'mask': '0399-99999999'" type = "number" maxlength = "12" name="mobile" value="{{old('mobile')}}">
                    <div class="wizard-form-error">
                      Field is required*
                    </div>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="form-group">
                    <label for="">Address*</label>
                    <input type="text" class="form-input bg-transparent wizard-required p-3" id="address" name="address" value="{{old('address')}}" >
                    <div class="wizard-form-error">
                      Field is required*
                    </div>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="form-group">
                    <label for="">Postel Address*</label>
                    <input type="text" class="form-input bg-transparent wizard-required p-3" id="postel_address" name="postel_address" value="{{old('postel_address')}}" >
                    <div class="wizard-form-error">
                      Field is required*
                    </div>
                  </div>
                </div>
                <div class="col-md-6 col-12 mt-4">
                  <div class="form-group">
                    <select class="form-input domicile bg-transparent p-2 wizard-required domicile" name="domicile">
                      <option value="">Domicile*</option>
                      @foreach($cities as $citie)
                      <option value="{{$citie->name}}">{{$citie->name}}</option>
                      @endforeach
                    </select>
                    <div class="wizard-form-error">
                      Field is required*
                    </div>
                  </div>
                </div>

                <div class="col-md-6 col-12 mt-4">
                  <div class="form-group">
                    <select class="form-input domicile bg-transparent p-2 wizard-required" name="martial_status" >
                      <option value="">Marital Status *</option>
                      <option value="Married">Married</option>
                      <option value="Single">Single</option>
                    </select>
                    <div class="wizard-form-error">
                      Field is required*
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <div class="form-input" style="border: 0px;">
                      <div class=" justify-content-between">
                        <label><h3 class="fw-light"> Gender * </h3> </label>
                        <div class="d-flex mt-2">
                          <div class="form-check form-check-inline mr-5">
                            <input class="form-check-input" type="radio" name="gender" id="inlineRadio1" value="Male" checked >
                            <label class="form-check-label" for="inlineRadio1">Male</label>
                          </div>
                          <div class="form-check form-check-inline femail-radio">
                            <input class="form-check-input" type="radio" name="gender" id="inlineRadio2" value="Female">
                            <label class="form-check-label" for="inlineRadio2">Female</label>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-md-6 mt-3">
                  <div class="form-group">
                    <input class="form-input p-3 wizard-required" type="number" id="quantity" name="age" value="{{old('age')}}"  placeholder=" Age*">
                    <div class="wizard-form-error">
                      Field is required*
                    </div>
                  </div>
                </div>

                <div class="col-md-6 mt-3">
                  <div class="form-group">
                    <div class="form-input pl-3 pr-3">
                      <div class="d-flex justify-content-between mt-3 px-3">
                        <label>DOB *</label>
                          <input type="date" class="border-0 bg-transparent wizard-required" id="birthday" name="date_of_birth" value="{{old('date_of_birth')}}" style="color: #666666;">
                          <div class="wizard-form-error">Field is required*</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-6 mt-3">
                      <div class="form-group">
                          <select class="form-input bg-transparent domicile p-2 wizard-required" name="cities_name">
                            <option value="">City*</option>
                            @foreach($cities as $citie)
                            <option value="{{$citie->name}}">{{$citie->name}}</option>
                            @endforeach
                          </select>
                          <div class="wizard-form-error">Field is required*</div>
                      </div>
                  </div>
                <div class="col-md-12 mt-4">
                  <div class="form-group">
                    <h5 style="color:#666666;" class="fw-bold darkGreen"><i class="fa fa-upload" class="color-blue" aria-hidden="true"></i> Upload Resume *</h5>
                    <p  style="color:#666666;" class="fw-bold">( Files accepted: .pdf, .doc/docx-Max file size: 150KB limit )</p>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="form-group">
                    <input  type="file" id="myFile"  class="form-input bg-transparent p-2 wizard-required" name="cv">
                    <div class="wizard-form-error">
                      Field is required*
                    </div>
                  </div>
                </div>   
              </div>
              <ul class="list-inline pull-right">
                <li>
                  <button type="button" class="form-wizard-next-btn default-btn next-step"><i class="fa fa-arrow-right" aria-hidden="true"></i> Continue to next step</button>
                </li>
              </ul>
            </fieldset>
            {{-- Personal Information end here  --}}

            {{-- academic requirement start here	 --}}
            <fieldset class="wizard-fieldset">
              <h1 class="">Job Application</h1>
              <h4 class="mb-5">Academic Information</h4>
              <div class="row template mt-4">
                
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="">Degree Level *</label>
                    <input type="text" class="form-input bg-transparent p-3 wizard-required" list="airports" value="{{old('degree_level.0')}}" name="degree_level[]"> 
                    <div class="wizard-form-error">
                      Field is required*
                    </div>
                  </div>
                </div>

                <div class="col-md-6">
                  <div class="form-group">
                    <label for="">Degree Name *</label>
                    <input type="text" class="form-input bg-transparent p-3 wizard-required" list="DegreeName" value="{{old('degree_name.0')}}" name="degree_name[]"> 
                    <div class="wizard-form-error">
                      Field is required*
                    </div>
                  </div>
                </div>

                <div class="col-md-12">
                  <div class="form-group">
                    <label for="">Institute *</label>
                    <input type="text" class="form-input bg-transparent p-3 wizard-required" placeholder="Institution *" value="{{old('institute.0')}}" name="institute[]">
                    <div class="wizard-form-error">
                      Field is required*
                    </div>
                  </div>
                </div>

                <div class="col-md-6">
                  <div class="form-group">
                    <label for="">Major *</label>
                    <input type="text" class="form-input bg-transparent p-3 wizard-required" name="major_subject[]" value="{{old('major_subject.0')}}">
                    <div class="wizard-form-error">
                      Field is required*
                    </div>
                  </div>
                </div>

                <div class="col-md-6">
                  <div class="form-group">
                    <label for="">Session *</label>
                    <select  name="session[]" id="year" class="form-input bg-transparent px-3 wizard-required">
                      <option value="">Session *</option>
                        @if ($errors->has('year'))
                            <option value="year">{{ $errors->first('year') }}</option>
                        @endif
                    </select>
                    <div class="wizard-form-error">
                      Field is required*
                    </div>
                  </div>
                </div>
                <div class="col-md-6 mt-3">
                  <div class="form-group">
                    <label for="">Select System *</label>
                    <select name="system[]" class="form-input bg-transparent px-3">
                      <option value="">Select System</option>
                      <option value="Annual">Annual</option>
                      <option value="Semester">Semester</option>
                    </select>
                  </div>
                </div>

                <div class="col-md-6 mt-3">
                  <div class="form-group">
                    <label for="">CGPA/Percentage *</label>
                    <input class="form-input p-3 wizard-required" type="text" id="CGPA" value="{{old('cgpa.0')}}" name="cgpa[]" >
                    <div class="wizard-form-error">
                      Field is required*
                    </div>
                  </div>
                </div>

                <div class="col-md-6 mt-3 mb-4">
                  <div class="form-group">
                    <label for="">Total Marks *</label>
                    <input class="form-input p-3 wizard-required" type="number" id="total_marks" value="{{old('total_marks.0')}}" name="total_marks[]">
                    <div class="wizard-form-error">
                      Field is required*
                    </div>
                  </div>
                </div>
                <div class="col-md-6 mt-3 mb-4">
                  <div class="form-group">
                    <label for="">Obtained Marks *</label>
                    <input class="form-input p-3 wizard-required" type="number" id="obtain_marks"  value="{{old('obtain_marks.0')}}" name="obtain_marks[]">
                    <div class="wizard-form-error">
                      Field is required*
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <a href="#" class="addMoreBtn" id="add-more"><i class="fa fa-plus" aria-hidden="true"></i> <span class="fw-blod">ADD MORE</span></a>
                </div>
              </div>
              <h4 class="mt-5">Other Information</h4>
              {{-- new row start here  --}}
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <input type="text" class="form-input bg-transparent p-3" name="hobbies" value="{{old('hobbies')}}" placeholder="Hobbies">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <input type="text" class="form-input bg-transparent p-3 wizard-required" name="skill" value="{{old('skill')}}" placeholder="Skills *">
                    <div class="wizard-form-error">
                      Field is required*
                    </div>
                  </div>
                </div>
              </div>
              <ul class="list-inline pull-left">
                <li>
                  <button type="button" class="form-wizard-previous-btn default-btn prev-step"> Back <i class="fa fa-arrow-left" aria-hidden="true"></i></button>
                </li>
              </ul>
              <ul class="list-inline pull-right">
                <li>
                  <button type="button" class="form-wizard-next-btn default-btn next-step"><i class="fa fa-arrow-right" aria-hidden="true"></i> Continue to next step </button>
                </li>
              </ul>
              
            </fieldset>
            {{-- academic requirement end here	 --}}

            {{-- Professional Information start here  --}}
            <fieldset class="wizard-fieldset">
              <h1 class="">Job Application</h1>
              <h4 class="mb-5">Professional Information</h4>
              <div class="row Proftemplate">
                {{-- row Professional Information start here  --}}
                <div class="col-sm-12">
                  <div class="form-group">
                    <input type="text" class="form-input bg-transparent p-3 wizard-required"  name="org_name[]" value="{{old('org_name.0')}}" placeholder="Institution/Organization *"> 
                    <div class="wizard-form-error">
                      Field is required*
                    </div>
                  </div>
                </div>

                <div class="col-sm-12">
                  <div class="form-group">
                    <input type="text" class="form-input bg-transparent p-3 wizard-required" name="org_designation[]" value="{{old('org_designation.0')}}" placeholder="Designation *"> 
                    <div class="wizard-form-error">
                      Field is required*
                    </div>
                  </div>
                </div>

                <div class="col-sm-6 mb-4">
                  <div class="form-group">
                    <div class=" justify-content-between">
                      <label>Start Date</label>
                      <input class="form-input p-3 wizard-required" type="date" id="StartYear" name="start_date[]" value="{{old('start_date.0')}}" placeholder="Starting Year *">
                      <div class="wizard-form-error">
                        Field is required*
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-sm-6 mb-4">
                  <div class="form-group">
                    <div class=" justify-content-between">
                      <label>End Date</label>
                      <input class="form-input p-3 wizard-required" type="date" id="EndingYear" name="end_date[]" value="{{old('end_date.0')}}" placeholder="Ending Year *">
                      <div class="wizard-form-error">
                        Field is required*
                      </div>
                    </div>
                  </div>
                </div> 
              </div> {{-- end row here  --}}
              <div class="row">
                <div class="col-md-12">
                  <a href="#" class="addMoreBtn" id="add-more-prof"><i class="fa fa-plus" aria-hidden="true"></i> <span class="fw-blod">ADD MORE</span></a>
                </div>
              </div>
              <h4 class="mt-5 mb-5">Workshops/Research Information</h4>
              {{-- new row start here workshop information  --}}
              <div class="row Worktemplate mb-5">
                <div class="col-sm-12">
                  <div class="form-group">
                    <input type="text" class="form-input bg-transparent p-3" name="res_title[]" value="{{old('res_title.0')}}" placeholder="Title Name">
                  </div>
                </div>
                <div class="col-sm-12">
                  <div class="form-group">
                    <input type="text" class="form-input bg-transparent p-3" name="res_org_name[]" value="{{old('res_org_name.0')}}" placeholder="Organization/Journal Name">
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group">
                    <input class="form-input p-3" type="number" id="workyear" name="res_year[]" value="{{old('res_year.0')}}" placeholder="Year">
                  </div>
                </div>
              </div> {{-- new row end here workshop information  --}}
              <div class="row">
                <div class="col-md-12">
                  <a href="#" class="addMoreBtn" id="add-more-work"><i class="fa fa-plus" aria-hidden="true"></i> <span class="fw-blod">ADD MORE</span></a>
                </div>
              </div>
              <ul class="list-inline pull-left mt-4">
                <li>
                  <button type="button" class="form-wizard-previous-btn default-btn prev-step"> Back <i class="fa fa-arrow-left" aria-hidden="true"></i></button>
                </li>
              </ul>  
              <ul class="list-inline pull-right mt-4">
                <li><button type="submit" class="form-wizard-submit default-btn next-step" onclick="this.style.visibility = 'hidden'" >Submit Application</button></li>
              </ul>
              <div class="clearfix">
              </div>
            </fieldset>	
            {{-- Professional Information end here  --}}
          </form>
        </div>
      </div>
      <div class="col-lg-4 col-md-12 col-sm-12 mb-5 career_sideBar">        
        <div class="wrapper-career mt-5 p-3">
          <h4 class=" mt-3 fw-bold">QUICK CAREER TIPS</h4>
          @foreach($CareerTips as $tips)
            <div class="three-phase mt-4">
              <span><a href="{{route('career-tips-detail.show',$tips->slug)}}">{{$tips->title}}</a></span>
              <img src="{{URL('/')}}/frontend/images/career/careertips/{{$tips->image}}" class="py-2" alt="...">
              <br><span class="date">{{date('M d, Y', strtotime($tips->created_at)) }}</span>
            </div>
          @endforeach
        </div>
        <div class="col-md-12 border border-warning mt-5 pb-3">
          <h4 class="px-3 mt-3 fw-bold p-1">Allowed characters in fields:</h4>
          <div class="row">
              <div class="p-3">
                <ul>
                    <li> Capital letters (A - Z) </li>
                    <li> Lower-case letters (a - z) </li>
                    <li> Numbers (0 - 9) </li>
                    <li> Special characters (/@*#-.,\) </li>
                </ul>
              </div>
          </div>
      </div>
      </div>
    </div>
</div>
</section>
@push('js')
<script>
  // $(document).ready(function() {
  //     $('.domicile').select2();
  //     });
    var start = 2000;
    var end = new Date().getFullYear();
    var options = "";
    for(var year = start ; year <=end; year++){
      options += "<option>"+ year +"</option>";
    }
    if ($('#year').length) {
      document.getElementById("year").innerHTML = options;
}
  jQuery(document).ready(function() {
      // click on next button
      jQuery('.form-wizard-next-btn').click(function() {
          var parentFieldset = jQuery(this).parents('.wizard-fieldset');
          var currentActiveStep = jQuery(this).parents('.form-wizard').find('.form-wizard-steps .active');
          var next = jQuery(this);
          var nextWizardStep = true;
          parentFieldset.find('.wizard-required').each(function(){
              var thisValue = jQuery(this).val();

              if( thisValue == "") {
                  jQuery(this).siblings(".wizard-form-error").slideDown();
                  nextWizardStep = false;
              }
              else {
                  jQuery(this).siblings(".wizard-form-error").slideUp();
              }
          });
          if( nextWizardStep) {
              next.parents('.wizard-fieldset').removeClass("show","400");
              currentActiveStep.removeClass('active').addClass('activated').next().addClass('active',"400");
              next.parents('.wizard-fieldset').next('.wizard-fieldset').addClass("show","400");
              jQuery(document).find('.wizard-fieldset').each(function(){
                  if(jQuery(this).hasClass('show')){
                      var formAtrr = jQuery(this).attr('data-tab-content');
                      jQuery(document).find('.form-wizard-steps .form-wizard-step-item').each(function(){
                          if(jQuery(this).attr('data-attr') == formAtrr){
                              jQuery(this).addClass('active');
                              var innerWidth = jQuery(this).innerWidth();
                              var position = jQuery(this).position();
                              jQuery(document).find('.form-wizard-step-move').css({"left": position.left, "width": innerWidth});
                          }else{
                              jQuery(this).removeClass('active');
                          }
                      });
                  }
              });
          }
      });
      //click on previous button
      jQuery('.form-wizard-previous-btn').click(function() {
          var counter = parseInt(jQuery(".wizard-counter").text());;
          var prev =jQuery(this);
          var currentActiveStep = jQuery(this).parents('.form-wizard').find('.form-wizard-steps .active');
          prev.parents('.wizard-fieldset').removeClass("show","400");
          prev.parents('.wizard-fieldset').prev('.wizard-fieldset').addClass("show","400");
          currentActiveStep.removeClass('active').prev().removeClass('activated').addClass('active',"400");
          jQuery(document).find('.wizard-fieldset').each(function(){
              if(jQuery(this).hasClass('show')){
                  var formAtrr = jQuery(this).attr('data-tab-content');
                  jQuery(document).find('.form-wizard-steps .form-wizard-step-item').each(function(){
                      if(jQuery(this).attr('data-attr') == formAtrr){
                          jQuery(this).addClass('active');
                          var innerWidth = jQuery(this).innerWidth();
                          var position = jQuery(this).position();
                          jQuery(document).find('.form-wizard-step-move').css({"left": position.left, "width": innerWidth});
                      }else{
                          jQuery(this).removeClass('active');
                      }
                  });
              }
          });
      });
      //click on form submit button
      jQuery(document).on("click",".form-wizard .form-wizard-submit" , function(){
          var parentFieldset = jQuery(this).parents('.wizard-fieldset');
          var currentActiveStep = jQuery(this).parents('.form-wizard').find('.form-wizard-steps .active');
          parentFieldset.find('.wizard-required').each(function() {
              var thisValue = jQuery(this).val();
              if( thisValue == "" ) {
                  jQuery(this).siblings(".wizard-form-error").slideDown();
              }
              else {
                  jQuery(this).siblings(".wizard-form-error").slideUp();
              }
          });
      });
      // focus on input field check empty or not
      jQuery(".form-control").on('focus', function(){
          var tmpThis = jQuery(this).val();
          if(tmpThis == '' ) {
              jQuery(this).parent().addClass("focus-input");
          }
          else if(tmpThis !='' ){
              jQuery(this).parent().addClass("focus-input");
          }
      }).on('blur', function(){
          var tmpThis = jQuery(this).val();
          if(tmpThis == '' ) {
              jQuery(this).parent().removeClass("focus-input");
              jQuery(this).siblings('.wizard-form-error').slideDown("3000");
          }
          else if(tmpThis !='' ){
              jQuery(this).parent().addClass("focus-input");
              jQuery(this).siblings('.wizard-form-error').slideUp("3000");
          }
      });
  });
  $('#add-more').click(function () {
              $(this).before($(".template:eq(0)").clone()); 
          });

          $('#add-more-prof').click(function () {
          $(this).before($(".Proftemplate:eq(0)").clone());
          });

          $('#add-more-work').click(function () {
          $(this).before($(".Worktemplate:eq(0)").clone());
          });

</script>
@endpush
@endsection