@extends('layouts.main')
@section('title','Batch Candidate List')
@section('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css" integrity="sha512-3pIirOrwegjM6erE5gPSwkUzO+3cTjpnV9lexlNZqvupR64iZBnOOTiiLPb9M36zpMScbmUNIcHUqKD47M719g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link rel="icon" type="image/png" href="assets/img/favicon.ico">
<style type="text/css">
  .upload-border {
        border: 1px solid #919191;
    padding: 5px;
    border-radius: 4px;
  }
  .modal-upload {
    max-width: 500px;
  }
  .error-content-box {
    position: relative;

  }
  .error-content-box span {
    position: absolute;
    right: 20px;
    top: -8px;
  }
  .table th, .table td {
            padding: 0.75rem;
            vertical-align: top;
            border-top: opx !important;
        }

  .cursor-pointer {
      cursor: pointer !important;
  }

  .shadow {
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  }

  .card {
      border: 0px !important;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  }

  .table .thead-green th {
      color: #fff;
      background-color: #8FC740;
      border-color: #fff;
  }
  
  td > a {
      color: #000 !important;
      text-decoration: none !important;
  }

  .file-pdf {
      font-size: 25px;
      color: #FB5252 !important;
  }

  .live-preview {
      font-size: 25px;
  }

  .action-btn {
      color: #adb5bd;
  }

  .my-auto {
      margin-top: auto !important;
      margin-bottom: auto !important;
  }

 .img-collections img {
  max-width: 100%;
  height: 160px;
  width: 200px;
  margin-left: 3px;
  margin-bottom: 5px;
  object-fit: contain;
  }

  .preview-img img {
      max-width: 100%;
      height: 300px;
      width: 400px;
      border-radius: 5px;  
      object-fit: contain;
  }

  .img-responsive img{
      max-width: 100%;
      height: auto;
      width: 80px;
      margin-left: 3px;
      margin-bottom: 5px;
  }

  .profile-img-responsive {
      height: 60px;
      width: 60px;
      border-radius: 50%;
  }

  .profile-img-responsive-full-screen {
      height: 40px;
      width: 40px;
      border-radius: 50%;
  }

  .overflow-text {
      white-space: nowrap !important;
      width: 200px !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
  }

  .text-decoration {
      text-decoration: none !important;
  }

  .text-breadcrum {
      font-weight: 700;
      font-size: 20x;
      padding-left: 10px;
      border-left: 5px solid #8FC740;
  }

  .page-link {
      color: #8FC740 !important;
  }

  .page-link:hover {
      color: #8FC740 !important;
  }

  .page-item.active .page-link {
      background-color: #8FC740;
      color: #fff !important;
      border-color: #8FC740;
  }
  
  .bold {
      font-weight: 700 !important;
      font-size: 0.8rem;
  }

  .me-2 {
      margin-right: 0.5rem !important;
  }

  .img-profile-modal {
    height: 450px;
  }
  
  @media (min-width: 320px) and (max-width: 767.98px) { 
      .img-profile-modal {
          height: unset;
          width: 100%;
      }
  } 

  .modal.show .modal-fullscreen.modal-dialog   {
  width: 100vw;
  max-width: none;
  height: 100vh;

  margin-top: 30px !important;
  margin-bottom: 0px;
  }
  .modal-fullscreen .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
  }

  .modal-fullscreen .modal-header {
  border-radius: 0;
  }

  .modal-fullscreen .modal-body {
  overflow-y: auto;
  }

  .modal-fullscreen .modal-footer {
  border-radius: 0;
  }

  @media (max-width: 575.98px) {
  .modal-fullscreen-sm-down {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;
  }

  .modal-fullscreen-sm-down .modal-content {
      height: 100%;
      border: 0;
      border-radius: 0;
  }

  .modal-fullscreen-sm-down .modal-header {
      border-radius: 0;
  }

  .modal-fullscreen-sm-down .modal-body {
      overflow-y: auto;
  }

  .modal-fullscreen-sm-down .modal-footer {
      border-radius: 0;
  }
  }

  @media (max-width: 767.98px) {
  .modal-fullscreen-md-down {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;
  }

  .modal-fullscreen-md-down .modal-content {
      height: 100%;
      border: 0;
      border-radius: 0;
  }

  .modal-fullscreen-md-down .modal-header {
      border-radius: 0;
  }

  .modal-fullscreen-md-down .modal-body {
      overflow-y: auto;
  }

  .modal-fullscreen-md-down .modal-footer {
      border-radius: 0;
  }
  }

  @media (max-width: 991.98px) {
  .modal-fullscreen-lg-down {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;
  }

  .modal-fullscreen-lg-down .modal-content {
      height: 100%;
      border: 0;
      border-radius: 0;
  }

  .modal-fullscreen-lg-down .modal-header {
      border-radius: 0;
  }

  .modal-fullscreen-lg-down .modal-body {
      overflow-y: auto;
  }

  .modal-fullscreen-lg-down .modal-footer {
      border-radius: 0;
  }
  }

  @media (max-width: 1199.98px) {
  .modal-fullscreen-xl-down {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;
  }

  .modal-fullscreen-xl-down .modal-content {
      height: 100%;
      border: 0;
      border-radius: 0;
  }

  .modal-fullscreen-xl-down .modal-header {
      border-radius: 0;
  }

  .modal-fullscreen-xl-down .modal-body {
      overflow-y: auto;
  }

  .modal-fullscreen-xl-down .modal-footer {
      border-radius: 0;
  }
  }

  @media (max-width: 1399.98px) {
  .modal-fullscreen-xxl-down {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;
  }

  .modal-fullscreen-xxl-down .modal-content {
      height: 100%;
      border: 0;
      border-radius: 0;
  }

  .modal-fullscreen-xxl-down .modal-header {
      border-radius: 0;
  }

  .modal-fullscreen-xxl-down .modal-body {
      overflow-y: auto;
  }

  .modal-fullscreen-xxl-down .modal-footer {
      border-radius: 0;
  }
  }

  @media (min-width: 992px) {
  .modal-xl {
  max-width: 800px;
  }
  }

  @media (min-width: 1200px) {
      .modal-xl {
      max-width: 1140px;
      }
  }
  .close{
      font-size: xx-large;
  }
</style>
<div class="pcoded-content">  
  <div class="pcoded-inner-content">
    <div class="main-body">
      <div class="page-wrapper">
        <div class="pageheader mb-4" >
              <div class="page-header-title">
                <h4>Batch Candidates List</h4>
              </div>             

                    <div class="page-header-breadcrumb">
                        <ul class="breadcrumb-title">
                            <li class="breadcrumb-item">
                              @if(Auth::guard('corporate')->user()->user_type == 1)
                              <a href="{{secure_url('company/dashboard') }}">
                              @elseif(Auth::guard('corporate')->user()->user_type == 2)
                              <a href="{{secure_url('recruiter/dashboard') }}">
                              @endif  
                                <span class="hiremee-home"></span>
                              </a>
                            </li>
                            <li class="breadcrumb-item">
                              @if(Auth::guard('corporate')->user()->user_type == 1)
                              <a href="{{ secure_url('pro/company/candidate-batch-list') }}">Batch Candidates List</a>
                              @elseif(Auth::guard('corporate')->user()->user_type == 2)
                              <a href="{{ secure_url('pro/company/candidate-batch-list') }}">Batch Candidates List</a>
                              @endif
                            </li>
                         </ul>
                    </div> 
                </div>
      <div class="page-body">
              <div class="hme-loading-mask" style="display: none;">
                          <div class="hme-loading-container">
                              <div class="hme-dual-ring"></div>
                              <div>Please wait, Loading...</div>
                          </div>
                          </div>
               <div class="row">

                <div class="col-xs-12 col-md-12 pl-4 pr-4">

                            <div>
                                <div class="card-block p-1">
                                    <div class="d-flex flex-row flex-wrap hme--custom-filter-wrapper">
                    
                                        <div class="col-md-12">

                                          <div class="row">
                                            <div class="col-md-3">
                                              <label >Select Batch:</label>
                                              {!! Form::select('batch_name', isset($batchList) ? $batchList : [],null,['class' => 'form-control  js-select2', 'placeholder' => 'Select','id'=> 'batch_name']) !!}
                                            </div>
                                            
                            <!--<div class="col-md-2">
                              <label >Start Date :</label >
                                <div class="input-group">
                                  {!! Form::text('start_date','',['class'=>'form-control','placeholder'=>'e.g. 2020-10-22', 'id' => 'start_date']) !!}
                                  <span class="input-group-addon">
                                    <i class="icofont icofont-calendar"></i>
                                  </span>
                                </div>
                              </div>
                          <div class="col-md-2">
                            <label >End Date </label >
                            <div class="input-group">
                              {!! Form::text('end_date','',['class'=>'form-control','placeholder'=>'e.g. 2020-10-22', 'id' => 'end_date']) !!}
                              <span class="input-group-addon" id="">
                                <i class="icofont icofont-calendar"></i>
                              </span>
                            </div>
                          </div>-->
                            <div class="col-md-4" style="margin-top: 29px;">
                             <button class="btn btn-primary btn-sm waves-effect" id="js-candidate-search" rel="{{secure_url('pro/company/candidate-batch-list')}}" data-page="{{($currentPage-1)}}" style="height: 40px;font-size:16px;">Search</button> 
                            <a href="{{ secure_url('pro/company/candidate-batch-list')}}" class="btn btn-sm btn-danger waves-effect" style="height: 40px;font-size:16px;line-height:unset !important;"> Refresh</a>
                           </div>

                      </div>
                     
                        
                    </div>
                      </div>
                </div>
        </div>
                <div id='reportDiv'>
                          @include('pro.include.candidate_batchList_render')
                </div>
              </div>
          </div>
        </div>
      </div> 
    </div>
  </div>
</div>
<!-- resend model-->
<div class="md-modal m-w-950 md-effect-1" id="resendModal">
 
    <div class="md-content p-l-0 p-r-0 p-t-0">
      <button type="button" class="btn btn-primary btn-icon-custom waves-effect md-close login-close-btn"><span class="hiremee-multiply f-18"></span></button>
      <div class="report-modal-head p-b-5 p-t-5">
        <span>Resent Data</span>
      </div>
      <div class="report-modal-content">
        <form id="resendForm" name="resendForm" action="{{secure_url('pro/company/resent-candidate-detail')}}">
          <div class="row">
            
            <div class="col-md-2"></div>
          <div class="col-md-7">
            <div class="form-group">
                        <label for="email">Candidate Name:</label>
                        <div id="name"></div>
                      </div>
                      <div class="form-group">
                        <label for="email">Batch Name:</label>
                        <div id="batch"></div>
                      </div>
                      <div class="form-group">
                        <label for="email">Start Date*:</label>
                        <div class="input-group">
                              {!! Form::text('start_date','',['class'=>'form-control','placeholder'=>'e.g. 14-08-2018', 'id' => 'start_date']) !!}
                              <span class="input-group-addon">
                                <i class="icofont icofont-calendar"></i>
                              </span>
                            </div>
                            
                      </div>
              
                    <div class="form-group">
                      <label for="pwd">End Date*:</label>
                      <div class="input-group">
                          {!! Form::text('end_date','',['class'=>'form-control','placeholder'=>'e.g. 15-08-2018', 'id' => 'end_date']) !!}
                          <span class="input-group-addon" id="">
                            <i class="icofont icofont-calendar"></i>
                          </span>
                        </div>
                        <span class="text-danger small" id="endDateErr"></span>
                      </div>
                      <input type="hidden" name="batch_id" id="batch_id">
                    
                  <div class="form-group col-md-6">
                    <button type="submit" id="resentSubmit" class="btn btn-primary">Submit</button>
                  </div>
                </div>
                </div>
              
          
        </form>
        
          
      </div>
    </div>
  
</div>

<div class="md-modal m-w-950 md-effect-1" id="uploadModal">
 
    <div class="md-content modal-upload p-l-0 p-r-0 p-t-0">
      <button type="button" class="btn btn-primary btn-icon-custom waves-effect md-close login-close-btn"><span class="hiremee-multiply f-18"></span></button>
      <div class="report-modal-head p-b-5 p-t-5">
        <span>Upload Data</span>
      </div>
      <div class="">
      <!--   <form id="uploadForm" method="post" name="uploadForm" action="{{secure_url('pro/company/upload-candidate-images')}}" enctype='multipart/form-data'> -->

          {!! Form::open(array('url' => url('pro/company/upload-candidate-images'), 'class'=>'form-horizontal','files' => true,'enctype'=>'multipart/form-data', 'method'=>'post','id'=>'uploadForm')) !!}

          {{ csrf_field() }}
          <div class="row justify-content-center m-0">
           
          <div class="col-md-12">
            <div class="form-group row m-0">
                        <label for="upload_candidate_name">Candidate Name:</label>
                        <strong id="upload_candidate_name" class="ml-2"></strong>
                      </div>
                      <!-- <div class="form-group">
                        <label for="upload_batch">Batch Name:</label>
                        <div id="upload_batch"></div>
                      </div> -->

                      <div class="form-group row m-0">
                        <label for="upload_email">Email Id:</label>
                        <strong id="upload_email" class="ml-2"></strong>
                      </div>

                      <div class="form-group error-content-box">
                        <label for="photo_one">Photo 1*:</label>
                        {!! Form::file('photo_one',array('id'=>'photo_one', 'class'=>'form-field-alter ml-2 upload-border')) !!}
                        <span id="photo_one-error"></span>
                      </div>

                      <div class="form-group error-content-box">
                        <label for="photo_two">Photo 2*:</label>
                        {!! Form::file('photo_two',array('id'=>'photo_two', 'class'=>'form-field-alter ml-2 upload-border')) !!}
                        <span id="photo_two-error"></span>
                      </div>

                      <div class="form-group error-content-box">
                        <label for="photo_three">Photo 3*:</label>
                        {!! Form::file('photo_three',array('id'=>'photo_three', 'class'=>'form-field-alter ml-2 upload-border')) !!}
                        <span id="photo_three-error"></span>
                      </div>

                      <div class="form-group error-content-box">
                        <label for="id_proof">Id Proof*:</label>
                        {!! Form::file('id_proof',array('id'=>'id_proof', 'class'=>'form-field-alter ml-2 upload-border')) !!}
                         <span id="id_proof-error"></span>
                      </div>                      

                      <input type="hidden" name="upload_batch_id" id="upload_batch_id">
                    
                  <div class="form-group col-md-6">
                    <button type="submit" id="uploadSubmit" class="btn btn-primary">Submit</button>
                  </div>
                </div>
                </div>
              
          
        <!-- </form> -->

        {!! Form::close() !!}

        
          
      </div>
    </div>
  
</div>
<!-- Photo Preview Modal -->
       <div class="modal fade" id="photoPreview" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-dialog-centered modal-xl">
          <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="photoPreviewTitle">Candidate Name</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true" >&times;</span>
                </button>
              </div>
              <div class="modal-body preview-img mx-auto">
                  <img  src="http://placehold.it/400x300" alt="" class="img-fluid" id="image_pre" style="max-width: 450px;max-height:450px;">
              </div>
              
            </div>
        </div>
      </div>


    <!-- ID Card Modal -->
     <div class="modal fade" id="idCard" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-dialog-centered modal-xl">
          <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="idCardTitle">Candidate Name - ID Proof</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body preview-img mx-auto image_data" style="display: none">
                    <img  src="" alt="" class="img-fluid img-fluid-1" id="image_id_proof" style="max-width: 450px;max-height:450px;">
              </div>
              <div class="modal-body pdf_data" style="display: none">                
                  <iframe src="" width="100%" style="min-height:480px;" id="image_id_pdf"></iframe>      
              </div>
             
            </div>
        </div>
      </div>
<div class="md-overlay"></div>
@endsection
  
@section('footer')



<script type="text/javascript">

// $('.hme-loading-mask').css('display','block').fadeIn();
// $('.hme-loading-mask').fadeOut()
var currentPagination = '';
 $(document).ready(function(){


}); 

@if(\Session::has('success'))
    toastr.success("success","{{ Session::get('success') }}");
@endif  
@if(\Session::has('error'))
  toastr.error("error","{{ Session::get('error') }}");
@endif 


$('body').on('click', '.pagination a', function(e) {   
      e.preventDefault();
      var url = $(this).attr('href');
      currentPagination = url;
        $.ajax({
            url: url,
            beforeSend:function(){
              $('.hme-loading-mask').fadeIn();
            },
            success: function(res) {
              $('.hme-loading-mask').fadeOut();
                $('#reportDiv').html(res.content);               
            }
        });
});

$('#js-candidate-search').click(function(e){
  e.preventDefault();
  searchForm();
})

function searchForm(){
   var _this = $('#js-candidate-search');
  var batchName = $('#batch_name').val();
  var page = _this.attr('data-page');
  $.ajax({
      url:_this.attr('rel'),
      type:'get',
      dataType:'json',
      data:{'batch_name':batchName},
      beforeSend:function(){
        //_this.attr('disabled',true);
        $('.hme-loading-mask').fadeIn();
      },
      success:function(res){
        //_this.attr('disabled',false);
         $('.hme-loading-mask').fadeOut();
        $('#reportDiv').html(res.content);
      

      }
  })
}

  var todayDate = new Date().getDate();

    $("#start_date").bootstrapMaterialDatePicker({
      time:false,
      clearButton: true,
      format: 'YYYY-MM-DD',
      minDate:new Date(new Date().setDate(todayDate)),
      //maxDate: new Date(new Date().setDate(todayDate)),
    }).on('change', function(e, date) {

      $("#end_date").val("");
      $("#end_date").bootstrapMaterialDatePicker('setMinDate', date);
    });

  $("#end_date").bootstrapMaterialDatePicker({
      time:false,
      clearButton: true,
      format: 'YYYY-MM-DD',
      //maxDate: new Date(new Date().setDate(todayDate)),
    })

        $('#reportDiv').on('click','.resendBtn',function(e){
            e.preventDefault();
            var id = $(this).attr('rel');
            var batch = $(this).attr('date-batch');
            var startDate = $(this).attr('data-start');
            var endDate = $(this).attr('data-end');
            var candidateName = $(this).attr('data-name');
            $('#batch').html('<strong>'+batch+'</strong>');
            $('#name').html('<strong>'+candidateName+'</strong>');
            $('#start_date').val(startDate);
            $('#end_date').val(endDate);
            $('#batch_id').val(id);
           // $('.hiremee-info').css('display','none')
            $('#resendModal').addClass('md-show');
        })


        $('#reportDiv').on('click','.uploadBtn',function(e){
            e.preventDefault();
            $('#photo_one').val('');
            $('#photo_two').val('');
            $('#photo_three').val('');
            $('#id_proof').val('');
            $('.js-tootletip').addClass('d-none');
           

            var id = $(this).attr('rel');
            var candidateName = $(this).attr('data-name');
            var batch = $(this).attr('data-batch');
            var email = $(this).attr('data-email');

            $('#upload_candidate_name').html('<strong>'+candidateName+'</strong>');
            //$('#upload_batch').html('<strong>'+batch+'</strong>');            
            $('#upload_email').html('<strong>'+email+'</strong>');          
            $('#upload_batch_id').val(id);
           
            $('#uploadModal').addClass('md-show');
        })

        $(document).on('click','.login-close-btn',function(e){
          e.preventDefault();
          $('#resendModal').removeClass('md-show');
          $('.modal-backdrop').remove();
          $('#resentSubmit').attr('disabled',false);
        })

        $(document).on('click','.login-close-btn',function(e){
          e.preventDefault();

          $('#uploadModal').removeClass('md-show');
          $('.modal-backdrop').remove();
          $('#uploadSubmit').attr('disabled',false);
        })

  $('#resendForm').validate({
          ignore: [],
          rules: {
            start_date: {
              required: true
            },
            end_date: {
              required: true
            }
          },
          errorElement: 'span',
          errorPlacement: function(error, element) {

            $('.tooltip').tooltip('hide');
            $("body").find('#'+error[0].id+'-custom').remove();

            var span = '<span data-position="left" data-delay="0" data-animation="false" 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" style="margin-right:19px;"></span>';

            switch(element[0].id) {
              case "start_date":
               element.parent().append(span);
                break;
              case "end_date":
               element.parent().append(span);
                break;
              default:
                element.parent().append(span);
            }

            $('#'+error[0].id+'-custom').tooltip();

          },
          submitHandler: function(form) {
            $("#upload_candidate_form_button").attr("disabled", "disabled");
            $("#upload_candidate_form_button").text("Processing...");

            //form.submit();
            var serializeData = $('#resendForm').serialize();


             $.ajax({
                  url:$('#resendForm').attr('action'),
                  type:'post',
                  dataType:'json',
                  data:serializeData,
                  beforeSend:function(){
                    $('#resentSubmit').attr('disabled',true);
                    $('#resentSubmit').text('Processing..');
                  },
                  success:function(res){
                    $('#resentSubmit').text('Submit');
                    $('#resentSubmit').attr('disabled',false);

                     $('.hme-loading-mask').fadeOut();
                     if(res.status=='ok'){
                      $('#endDateErr').html('');
                      $('#resendModal').removeClass('md-show');
                      $('.modal-backdrop').remove();
                       swal({
                            html: true, 
                            title: '<span class="sweet-success-text">Successfully updated</span>', 
                            //text: "",
                            type: "success",
                            showCancelButton: false,
                            confirmButtonText: "OK",
                            closeOnConfirm: false

                          })    
                      paginationRefresh();
                    }else if(res.status == 'error'){
                      $('#endDateErr').html('<span class="text-danger">'+res.msg+'</span>')
                    }
                  }
              })
          }
  });



$('#photo_one').change(function(e){

    e.preventDefault();
    file_size =$('#photo_one')[0].files[0].size;
    //file_ext =$('#skill_candidate_excel')[0].files[0].size;
    var fileExtension = ['jpeg', 'jpg', 'png'];
    if(file_size>5000000) {
       swal({
               html: true, 
            title: '<span class="sweet-danger-text">File size must be less then 5MB</span>', 
            text: '',
            type: 'warning',
            confirmButtonText: "OK",
            closeOnConfirm: false
            });
       $('#photo_one').val('');
    }
    
    else if ($.inArray($('#photo_one').val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                      // alert("Only '.jpeg','.jpg' formats are allowed.");
             swal({
               html: true, 
            title: '<span class="sweet-danger-text">File upload allow .jpeg, .jpg, .png formats Only</span>', 
            text: '',
            type: 'warning',
            confirmButtonText: "OK",
            closeOnConfirm: false
            });
             $('#photo_one').val('');
      }
});

$('#photo_two').change(function(e){

    e.preventDefault();
    file_size =$('#photo_two')[0].files[0].size;
    var fileExtension = ['jpeg', 'jpg', 'png'];
    //file_ext =$('#skill_candidate_excel')[0].files[0].size;

    if(file_size>5000000) {
       swal({
               html: true, 
            title: '<span class="sweet-danger-text">File size must be less then 5MB</span>', 
            text: '',
            type: 'warning',
            confirmButtonText: "OK",
            closeOnConfirm: false
            });
       $('#photo_two').val('');
    }
    
    else if ($.inArray($('#photo_two').val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                      // alert("Only '.jpeg','.jpg' formats are allowed.");
             swal({
               html: true, 
            title: '<span class="sweet-danger-text">File upload allow .jpeg, .jpg, .png  formats Only</span>', 
            text: '',
            type: 'warning',
            confirmButtonText: "OK",
            closeOnConfirm: false
            });
             $('#photo_two').val('');
      }
});

$('#photo_three').change(function(e){

    e.preventDefault();
    file_size =$('#photo_three')[0].files[0].size;
    var fileExtension = ['jpeg', 'jpg', 'png'];
    //file_ext =$('#skill_candidate_excel')[0].files[0].size;

    if(file_size>5000000) {
       swal({
               html: true, 
            title: '<span class="sweet-danger-text">File size must be less then 5MB</span>', 
            text: '',
            type: 'warning',
            confirmButtonText: "OK",
            closeOnConfirm: false
            });
       $('#photo_three').val('');
    }
    
    else if ($.inArray($('#photo_three').val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                      // alert("Only '.jpeg','.jpg' formats are allowed.");
             swal({
               html: true, 
            title: '<span class="sweet-danger-text">File upload allow .jpeg, .jpg, .png formats Only</span>', 
            text: '',
            type: 'warning',
            confirmButtonText: "OK",
            closeOnConfirm: false
            });
             $('#photo_three').val('');
      }
});

$('#id_proof').change(function(e){      

    e.preventDefault();
    file_size =$('#id_proof')[0].files[0].size;  
    var fileExtension = ['jpeg', 'jpg', 'png', 'pdf'];
    //file_ext =$('#skill_candidate_excel')[0].files[0].size;

    if(file_size>5000000) {
       swal({
               html: true, 
            title: '<span class="sweet-danger-text">File size must be less then 5MB</span>', 
            text: '',
            type: 'warning',
            confirmButtonText: "OK",
            closeOnConfirm: false
            });
       $('#id_proof').val('');
    }
    
    else if ($.inArray($('#id_proof').val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                      // alert("Only '.jpeg','.jpg' formats are allowed.");
             swal({
               html: true, 
            title: '<span class="sweet-danger-text">File upload allow .jpeg, .jpg, .png or .pdf formats Only</span>', 
            text: '',
            type: 'warning',
            confirmButtonText: "OK",
            closeOnConfirm: false
            });
             $('#id_proof').val('');
      }
});



  $('#uploadForm').validate({
          
          rules: {
            photo_one: {
              required: true
            },
            photo_two: {
              required: true
            },
            photo_three: {
              required: true
            },
            id_proof: {
              required: true
            }
          },
          messages: {
            photo_one: {
              required: "Please Choose Photo One"
            },
            photo_two: {
              required: "Please Choose Photo Two"
            },
            photo_three: {
              required: "Please Choose Photo Three"
            },
            id_proof: {
              required: "Please Choose ID proof"
            }
          },
          onfocusout: false,
          ignore:      "",
          errorClass:  'fieldError',
          onkeyup:     false,
          onblur:      false,
          errorElement:'span',
          errorPlacement: function (error, element) {

            $('.js-tootletip').removeClass('d-none');
            
            $('.tooltip').tooltip('hide');
            $("body").find('#' + error[0].id + '-custom').remove();
            $('#' + error[0].id).append('<span style="margin-top:24px; margin-right:22px;" data-position="left" data-delay="0" 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) {
          //console.log('SUCCESS');
            $("body").find('#' + element[0].id + '-custom').remove();
            $('#' + element[0].id + '-custom').tooltip('hide');
            $('.js-tooltip-validate').tooltip();
        },
          submitHandler: function(form) {            

            $('#uploadSubmit').text('Processing').attr('disabled',true);

            form.submit();

            //var serializeData = $('#uploadForm').serialize();
            /*var photo_one = $('#photo_one').val();
            var photo_two = $('#photo_two').val();
            var photo_three = $('#photo_three').val();
            var id_proof = $('#id_proof').val();
            var upload_batch_id = $('#upload_batch_id').val();

            console.log(photo_one);*/

             /*$.ajax({
                  url:$('#uploadForm').attr('action'),
                  type:'post',
                  dataType:'json',
                  data:{
                    'photo_one': photo_one,
                    'photo_two': photo_two,
                    'photo_three': photo_three,
                    'id_proof': id_proof,
                    'upload_batch_id': upload_batch_id,
                    '_token': $('meta[name=csrf-token]').attr('content')
                  },
                  beforeSend:function(){
                    $('#uploadSubmit').attr('disabled',true);
                    $('#uploadSubmit').text('Processing..');
                  },
                  success:function(res){
                    $('#uploadSubmit').text('Submit');
                    $('#uploadSubmit').attr('disabled',false);

                     $('.hme-loading-mask').fadeOut();
                     if(res.status=='ok'){
                      $('#endDateErr').html('');
                      $('#uploadModal').removeClass('md-show');
                      $('.modal-backdrop').remove();
                       swal({
                            html: true, 
                            title: '<span class="sweet-success-text">Successfully updated</span>', 
                            //text: "",
                            type: "success",
                            showCancelButton: false,
                            confirmButtonText: "OK",
                            closeOnConfirm: false

                          })    
                      paginationRefresh();
                    }else if(res.status == 'error'){
                      $('#endDateErr').html('<span class="text-danger">'+res.msg+'</span>')
                    }
                  }
              })*/
          }
      });

  function paginationRefresh(){
        $.ajax({
            url: currentPagination,
            beforeSend:function(){
              $('.hme-loading-mask').fadeIn();
            },
            success: function(res) {
              $('.hme-loading-mask').fadeOut();
                $('#reportDiv').html(res.content);               
            }
        });
  }
   $("#reportDiv").on('click','.image_one',function(e) { 
    e.preventDefault();
    
    $('#image_pre').attr('src',$(this).attr('src'));
   });

    $("#reportDiv").on('click','.image_two',function(e) {   
    e.preventDefault();
    $('#image_pre').attr('src',$(this).attr('src'));
   });

   $("#reportDiv").on('click','.image_three',function(e) {
    e.preventDefault();
    $('#image_pre').attr('src',$(this).attr('src'));
   });

   $("#reportDiv").on('click','.image_proof',function(e) {
e.preventDefault();
      $('.pdf_data').addClass('d-none');
      $('.img-fluid-1').removeClass('d-none');    
      var ext = $(this).attr('src');

      $('.image_data').css('display','block');
      $('#image_id_proof').attr('src',ext);    
    
   });

   $("#reportDiv").on('click','.pdf_proof',function(e) {    
e.preventDefault();
      $('.img-fluid-1').addClass('d-none');
      $('.pdf_data').removeClass('d-none');    
      var ext = $(this).attr('href');      
    
      $('.pdf_data').css('display','block');
      $('#image_id_pdf').attr('src',ext);    
    
   });

</script>
@endsection