@extends('layouts/contentLayoutMaster')

@section('title', 'Candidate Create')

@section('vendor-style')
  {{-- Page Css files --}}
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/pickers/pickadate/pickadate.css')) }}">
@endsection

@section('page-style')
  {{-- Page Css files --}}
  <link rel="stylesheet" href="{{ asset(mix('css/plugins/forms/validation/form-validation.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('css/pages/app-user.css')) }}">
  <style type="text/css">
    .picker {
      margin-top: -159px;
    }
  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.css">
@endsection

@section('content')
<!-- users edit start -->

<section class="users-edit">
  <div class="card">
    <div class="card-content">
      <div class="card-body">
        <ul class="nav nav-tabs mb-3" role="tablist">
          <li class="nav-item">
            <a class="nav-link d-flex align-items-center active" id="account-tab" data-toggle="tab" href="#account" aria-controls="account" role="tab" aria-selected="true">
              <i class="feather icon-user mr-25"></i><span class="d-none d-sm-block">Account</span>
            </a>
          </li>
          <!--<li class="nav-item">-->
          <!--  <a class="nav-link d-flex align-items-center" id="files-tab" data-toggle="tab" href="#files" aria-controls="files" role="tab" aria-selected="false">-->
          <!--    <i class="feather icon-file mr-25"></i><span class="d-none d-sm-block">Files & Documents</span>-->
          <!--  </a>-->
          <!--</li>-->
        </ul>
        <form novalidate id="frm_add_candidate" action="{{ url('employees/store') }}" method="post" enctype="multipart/form-data">
          {{ csrf_field() }}
        <div class="tab-content">
          <div class="tab-pane active" id="account" aria-labelledby="account-tab" role="tabpanel">
            <!-- users edit account form start -->
              <div class="row">
                <div class="col-12 col-sm-8">
                    <div class="row">
                        <input type="hidden" name="source_name" id="source_name" value="{{$source}}"/>
                       
                        <input type="hidden" name="notify_by_wa" id="notify_by_wa" value="Y">
                        @if(isset($company_id) && !empty($company_id))
                            <input type="hidden" name="employer_id" id="employer_id" value="{{$company_id}}"/>
                        @else
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <div class="controls">
                                        <label>Company </label>
                                        <select name="employer_id" id="employer_id" class="form-control" required data-validation-required-message="Company required">
                                            @if($employers)
                                                @foreach($employers as $employer)
                                                    <option value="{{ $employer->id }}">
                                                        @if(!empty($employer->b2b_company_name))
                                                            {{ $employer->b2b_company_name }} -- {{ $employer->b2b_brand_name }}
                                                        @else
                                                            {{ $employer->first_name }} {{ $employer->middle_name }} {{ $employer->last_name }}
                                                        @endif
                                                    </option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>
                        @endif

                    <div class="col-sm-4">
                      <div class="form-group">
                        <div class="controls">
                          <label>Candidate Types <span style="color:red">*</span></label>
                          <select name="employee_type_id" id="employee_type_id" class="form-control" required data-validation-required-message="Candidate Type required">
                            <option value="">Select Candidate Type</option>
                            @if($employeetypes)
                              @foreach($employeetypes ->sortBy('type') as $employeetype)
                                <option {{ null !== $employee_prefil && $employee_prefil->employee_type_id == $employeetype->id ? 'selected' : '' }} value="{{ $employeetype->id }}">{{ $employeetype->type }}</option>
                              @endforeach
                            @endif
                          </select>
                        </div>
                      </div>
                    </div>
                    
                   
                          <input type="hidden" name="employee_code" id="employee_code" class="form-control" value="{{ old('employee_code') }}" placeholder="Candidate Code">
                     
                    
                    <div class="col-sm-4">
                      <div class="form-group">
                        <label>Verification Type</label>
                        <div class="controls">
                          <select name="vf_type" id="vf_type" class="form-control">
                            <option value="PRE">PRE</option>
                            <option value="POST">POST</option>
                          </select>
                        </div>
                      </div>
                    </div>

                    <div class="col-sm-4">
                      <div class="form-group">
                        <div class="controls">
                          <label>Document Types</label>
                          <select name="docTypeId" id="docTypeId" class="form-control" required data-validation-required-message="Document Type required">
                            <option value="">Select Document Type</option>
                            @if($documenttypes)
                              @foreach($documenttypes as $documenttype)
                               <option {{ null !== $employee_prefil && $employee_prefil->doc_type_id == $documenttype->id ? 'selected' : '' }} value="{{ $documenttype->id }}">{{ $documenttype->name }}</option>
                              @endforeach
                            @endif
                          </select>
                        </div>
                      </div>
                    </div>

                    
                    
                    <div class="col-sm-4">
                      <div class="form-group">
                        <div class="controls">
                          <label>First Name <span style="color:red">*</span></label>
                          <input type="text" name="first_name" id="first_name" value="{{ old('first_name') ?? ($employee_prefil ? $employee_prefil->first_name : '') }}" class="form-control" placeholder="First Name" required data-validation-required-message="This field is required">
                          @if($errors->has('first_name'))
                            <p class="text-danger">{{ $errors->first('first_name') }}</p>
                          @endif
                        </div>
                      </div>
                    </div>
                    
                    <div class="col-sm-4">
                      <div class="form-group">
                        <div class="controls">
                          <label>Last Name <span style="color:red">*</span></label>
                          <input type="text" name="last_name" id="last_name" value="{{ old('last_name') ?? ($employee_prefil ? $employee_prefil->last_name : '') }}" class="form-control" placeholder="Last Name" required data-validation-required-message="This field is required">
                          @if($errors->has('last_name'))
                            <p class="text-danger">{{ $errors->first('last_name') }}</p>
                          @endif
                        </div>
                      </div>
                    </div>
                    
                    <div class="col-sm-4">
                      <div class="form-group">
                        <div class="controls">
                          <label>Alias Name</label>
                          <input type="hidden" name="co_relation" id="co_relation" value="FATHER"/>
                          <input type="text" name="alias_name" id="alias_name" value="{{ old('alias_name') }}" class="form-control" placeholder="Alias Name">
                        </div>
                      </div>
                    </div>
                    
                    <div class="col-sm-4">
                      <div class="form-group">
                        <div class="controls">
                          <label for="father_name">Father/Husband Name <span style="color:red">*</span></label>
                          <input type="text" name="father_name" id="father_name" value="{{ old('father_name') ?? ($employee_prefil ? $employee_prefil->co_name : '') }}" class="form-control" placeholder="Father/Husband Name" required data-validation-required-message="This field is required">
                          @if($errors->has('father_name'))
                            <p class="text-danger">{{ $errors->first('father_name') }}</p>
                          @endif
                        </div>
                      </div>
                    </div>
                    
                    <div class="col-sm-4">
                      <div class="form-group">
                        <div class="controls">
                          <label for="email">E-mail <span style="color:red">*</span></label>
                          <input type="email" name="email" id="email" value="{{ old('email') ?? ($employee_prefil ? $employee_prefil->email : '') }}" class="form-control" placeholder="E-mail" required data-validation-required-message="This field is required">
                          @if($errors->has('email'))
                            <p class="text-danger">{{ $errors->first('email') }}</p>
                          @endif
                        </div>
                      </div>
                    </div>
                    
                      <div class="col-sm-4">
                      <div class="form-group">
                        <label>Status</label>
                        <div class="controls">
                          <select name="status" id="status" class="form-control">
                            <option value="1">Active</option>
                            <option value="0">Deactive</option>
                          </select>
                        </div>
                      </div>
                    </div>

                    <div class="col-sm-4">
                      <div class="form-group">
                        <label>Country Code</label>
                        <select name="country_code" id="country_code" class="form-control">
                          <option value="91" Selected>India (+91)</option>
                          <option value="44">UK (+44)</option>
                          <option value="1">USA (+1)</option>
                        </select>
                        @if($errors->has('country_code'))
                          <p class="text-danger">{{ $errors->first('country_code') }}</p>
                        @endif
                      </div>
                    </div>

                    <div class="col-sm-4">
                      <div class="form-group">
                        <div class="controls">
                          <label>Mobile <span style="color:red">*</span></label>
                          <input type="text" name="mobile" minlength="10" maxlength="10" value="{{ old('mobile') ?? ($employee_prefil ? $employee_prefil->mobile : '') }}" class="form-control" placeholder="Mobile" value="{{ old('mobile') }}" required data-validation-required-message="This field is required">
                          @if($errors->has('mobile'))
                            <p class="text-danger">{{ $errors->first('mobile') }}</p>
                          @endif
                        </div>
                      </div>
                    </div>
                    
                    @if(isset($locations))
                    <div class="col-sm-4">
                    <div class="form-group">
                        <label for="location">Location</label>
                        <div class="controls">
                            <select name="location" id="location" class="form-control">
                                <option value="">Select Location</option>
                                @foreach($locations as $location)
                                    <option value="{{ $location->id }}">{{ $location->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                @endif
                                  
                    
                      <div class="col-sm-4">
                      <div class="controls">
                        <label>Gender</label>
                        <ul class="list-unstyled mb-0">
                          <li class="d-inline-block mr-2">
                            <fieldset>
                              <div class="vs-radio-con">
                                <input type="radio" name="gender" checked value="M">
                                <span class="vs-radio">
                                  <span class="vs-radio--border"></span>
                                  <span class="vs-radio--circle"></span>
                                </span>
                                Male
                              </div>
                            </fieldset>
                          </li>
                          <li class="d-inline-block mr-2">
                            <fieldset>
                              <div class="vs-radio-con">
                                <input type="radio" name="gender" value="F">
                                <span class="vs-radio">
                                  <span class="vs-radio--border"></span>
                                  <span class="vs-radio--circle"></span>
                                </span>
                                Female
                              </div>
                            </fieldset>
                          </li>
                          <li class="d-inline-block mr-2">
                            <fieldset>
                              <div class="vs-radio-con">
                                <input type="radio" name="gender" value="O">
                                <span class="vs-radio">
                                  <span class="vs-radio--border"></span>
                                  <span class="vs-radio--circle"></span>
                                </span>
                                Other
                              </div>
                            </fieldset>
                          </li>
                        </ul>
                      </div>
                    </div>
                    
                    
                </div>
                </div>

                <div class="col-12 col-sm-4">
                  
                  <div class="row">
                      
                      <div class="col-sm-12">
                      <div class="form-group">
                        <div class="controls">
                          <label>Document Number <span style="color:red">*</span></label>
                          <input type="text" name="document_no" id="document_no" value="{{ old('document_no') ?? ($employee_prefil ? $employee_prefil->doc_number : '') }}" class="form-control document_no" placeholder="Document Number" required data-validation-required-message="This field is required">
                        </div>
                        <span id="valmessage"></span>
                      </div>
                    </div>
                    
                    <div class="col-sm-12">
                      <div class="form-group">
                        <div class="controls">
                          <label>Date of Birth <span style="color:red">*</span></label>
                          <input type="text" name="dob" id="dob" value="{{ old('dob') ?? ($employee_prefil ? $employee_prefil->dob : '') }}" class="form-control birthdate-picker" required placeholder="Birth date" data-validation-required-message="This field is required">
                        </div>
                      </div>
                    </div>

                  
                    
                    <div class="col-sm-12" style="padding-top: 0px;">
                      <div class="form-group">
                        <label>Plan <span style="color:red">*</span></label>
                        <div class="controls">
                          <select name="plan" id="plan" class="form-control" required data-validation-required-message="Plan required">
                            <option value="">Select Plan</option>
                            @if($plans)
                              @foreach($plans as $plan)
                                <option {{ null !== old('plan') && old('plan') == $plan->id ? 'selected' : '' }} value="{{$plan->id}}">{{$plan->name}}-{{$plan->pkg_name}}</option>
                              @endforeach
                            @endif
                          </select>
                        </div>
                      </div>
                    </div>
                    
                    
                    
                  <div class="row">
                    <div class="col-12">
                      <div class="form-group">
                        <ul class="list-unstyled mb-0">
                          <li class="d-inline-block mr-2">
                            <input type="hidden" name="userpref_id" value="{{ $userpref->id ?? '' }}">
                            <fieldset>
                              <div class="vs-checkbox-con vs-checkbox-primary">
                                <input  type="checkbox" {{ isset($userpref->notify_by_sms) && $userpref->notify_by_sms == 'Y' ? 'checked' : '' }} name="notify_by_sms" value="Y">
                                <span class="vs-checkbox">
                                  <span class="vs-checkbox--check">
                                    <i class="vs-icon feather icon-check"></i>
                                  </span>
                                </span>
                                <span class="" style="font-size: 0.85rem;">Notify by SMS</span>
                              </div>
                            </fieldset>
                          </li>
                        </ul>
                      </div>
                    </div>
                    <div class="col-12">
                      <div class="form-group">
                        <ul class="list-unstyled mb-0">
                          <li class="d-inline-block mr-2">
                            <fieldset>
                              <div class="vs-checkbox-con vs-checkbox-primary">
                                <input type="checkbox" {{ isset($userpref->notify_by_email) && $userpref->notify_by_email == 'Y' ? 'checked' : '' }} name="notify_by_email" value="Y">
                                <span class="vs-checkbox">
                                  <span class="vs-checkbox--check">
                                    <i class="vs-icon feather icon-check"></i>
                                  </span>
                                </span>
                                <span class="" style="font-size: 0.85rem;">Notify by Email</span>
                              </div>
                            </fieldset>
                          </li>
                        </ul>
                      </div>
                    </div>
                    
                  
                  <div class="col-12 d-flex flex-sm-row flex-column mt-1">
                  <button type="button" onclick="activeClass('files-tab','account-tab')" data-toggle="tab" href="#files" aria-controls="files" role="tab" aria-selected="false" class="btn btn-primary glow mb-1 mb-sm-0 mr-0 mr-sm-1">Save</button>
                  <!-- <button type="reset" class="btn btn-outline-warning">Back</button> -->
                </div>
                </div>
                </div>
                </div>
              <!-- users edit account form ends -->
            </div>
            <!--<div class="tab-pane" id="files" aria-labelledby="files-tab" role="tabpanel">-->
              <!-- users edit socail form start -->

            <!--  <div class="row">-->
            <!--    <div class="col-md-6 text-center">-->
            <!--      <div id="upload-demo"></div>-->
            <!--    </div>-->
            <!--    <div class="col-md-6">-->
            <!--      <div id="preview-crop-image"></div>-->
            <!--    </div>-->
            <!--    <div class="col-12 col-sm-6">-->
            <!--      <fieldset class="form-group">-->
            <!--        <strong>Select image to crop:</strong>-->
            <!--        <div class="custom-file">-->
            <!--          <input type="file" name="profile_image" class="custom-file-input" id="image">-->
            <!--          <label class="custom-file-label" for="image">Choose file</label>-->
            <!--          <button type="button" class="btn btn-primary btn-block upload-image" style="margin-top:2%">Upload Image</button>-->
            <!--          <input type="hidden" name="photo_url" id="photo_url" value="">-->
            <!--        </div>-->
            <!--      </fieldset>-->
            <!--    </div>-->
            <!--  </div>-->
              
            <!--  <div class="row">-->
            <!--    <div class="col-12 col-sm-6">-->
            <!--      <fieldset class="form-group">-->
            <!--        <label for="doc_url_front">Documents front Image</label>-->
            <!--        <div class="custom-file">-->
            <!--          <input type="file" name="doc_url_front" class="custom-file-input" id="doc_url_front">-->
            <!--          <label class="custom-file-label" for="doc_url">Choose file</label>-->
            <!--        </div>-->
            <!--      </fieldset>-->
            <!--    </div>-->
            <!--  </div>-->

            <!--  <div class="row">-->
            <!--    <div class="col-12 col-sm-6">-->
            <!--      <fieldset class="form-group">-->
            <!--        <label for="doc_url_back">Documents Back Image</label>-->
            <!--        <div class="custom-file">-->
            <!--          <input type="file" name="doc_url_back" class="custom-file-input" id="doc_url_back">-->
            <!--          <label class="custom-file-label" for="doc_url">Choose file</label>-->
            <!--        </div>-->
            <!--      </fieldset>-->
            <!--    </div>-->
            <!--  </div>-->
              
            <!--  <div class="row">-->
            <!--    <div class="col-12 d-flex flex-sm-row flex-column justify-content-end mt-1">-->
            <!--      <button type="button" onclick="activeClass('information-tab','files-tab')" data-toggle="tab" href="#information" aria-controls="information" role="tab" aria-selected="false" class="btn btn-primary glow mb-1 mb-sm-0 mr-0 mr-sm-1">Next</button>-->
            <!--      <button type="reset" class="btn btn-outline-warning">Back</button>-->
            <!--    </div>-->
            <!--  </div>-->
              <!-- users edit socail form ends -->
            <!--</div>-->
          </div>
        </form>
      </div>
    </div>
  </div>
</section>
<!-- users edit ends -->
@endsection

@section('vendor-script')
  {{-- Vendor js files --}}
  <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/forms/validation/jqBootstrapValidation.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/pickers/pickadate/picker.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/pickers/pickadate/picker.date.js')) }}"></script>
  <script src="{{ url('js/scripts/state.js') }}"></script>
@endsection

@section('page-script')
  {{-- Page js files --}}
  <script src="{{ asset(mix('js/scripts/pages/app-user.js')) }}"></script>
  <script src="{{ asset(mix('js/scripts/navs/navs.js')) }}"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.js"></script>
  <script type="text/javascript">
    $('#source_name').on('change', function(){
      var source = $('#source_name').val();
      location.href = '/candidates/create?source='+source;
    });
    function activeClass(active,deactive){

      if(active == 'files-tab' && deactive == 'account-tab'){
        $('#frm_add_candidate').submit();

      }

      $('#' + active).addClass('active');
      $('#' + deactive).removeClass('active');
    }
    $('#dob').pickadate({
      format: 'dd mmmm yyyy',
      selectMonths: true,
      selectYears: 124,
      max: true
    });
    $('#doj').pickadate({
      format: 'dd mmmm yyyy',
      selectMonths: true,
      selectYears: 124,
      max: true
    });
  </script>
  <script type="text/javascript">

$.ajaxSetup({
headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});


var resize = $('#upload-demo').croppie({
    enableExif: true,
    enableOrientation: true,    
    viewport: {
        width: 300,
        height: 300,
        type: 'square' //circle
    },
    boundary: {
        width: 350,
        height: 350
    }
});


$('#image').on('change', function () { 
  var reader = new FileReader();
    reader.onload = function (e) {
      resize.croppie('bind',{
        url: e.target.result
      }).then(function(){
        console.log('jQuery bind complete');
      });
    }
    reader.readAsDataURL(this.files[0]);
});


$('.upload-image').on('click', function (ev) {
  resize.croppie('result', {
    type: 'canvas',
    size: 'viewport'
  }).then(function (img) {
    $.ajax({
      url: "{{ url('upload-file') }}",
      type: "POST",
      data: { "image" : img },
      success: function (data) {
        html = '<img src="' + img + '" class="img-fluid" />';
        $("#preview-crop-image").html(html);
        $('#photo_url').val(data);
      }
    });
  });
});
  </script>
  <script>
    $(document).ready(function() {
      $('.document_no').on('keypress', function(e) {
			var docTypeId = $("#docTypeId").val();
			
			  if(docTypeId == 1){
				var mobileNumber = $(this).val();
				var maxLength = 12; 

			   if (e.which < 48 || e.which > 57) {
				  // Allow only numeric digits
				  e.preventDefault();
				}

				if (mobileNumber.length >= maxLength) {
				  // Prevent entering more than the allowed length
				  e.preventDefault();
				}
				
				if (!/^\d+$/.test(mobileNumber)) {
				  // Display message for invalid characters
				  $('#valmessage').text('Only numeric characters are allowed.').css("color","red");
				} else {
				  $('#valmessage').text(''); // Clear the message
				}
			}else if(docTypeId == 5){
	            if ($(this).val().length >= 10) {
              event.preventDefault();
              }			
			}
			else if(docTypeId == 2){
                    if ($(this).val().length >= 9) {
                    event.preventDefault();
                    }
                    
			}
			else if(docTypeId == 4){
                    if ($(this).val().length >= 16) {
                    event.preventDefault();
                    }
			}
			else if(docTypeId == 3){
                 if ($(this).val().length >= 15) {
                  event.preventDefault();
                 }			
			}else{
			 $('#valmessage').text('');
			}
      });
    });
</script>

<script>
$(document).ready(function(){
  $("#docTypeId").change(function(){
   $(".document_no").val('');
 $('#valmessage').text('');
  });
});
</script>
@endsection