@include('common.header')
<div id="invalid-process" class="alert alert-danger alert-dismissible" style="display:none;">
   <div class="overlay">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
      <h4><i class="icon fa fa-ban"></i>Invalid Scanning Process Detected , Press (Esc) to exit !</h4>
   </div>
</div>
<section class="content">
   <div class="col-lg-12" id="load-overlay" name="load-overlay" style="display:none;">
      <div id="loader" ></div>
      <div id="overlay"></div>
   </div>
   <div class="col-lg-12" id="receive-overlay" name="receive-overlay" style="display:none;">
      <div id="overlay"></div>
   </div>
   @include('alert.alert_panel')
   <div class="row">
      <div class ="col-md-12" id="start-process" name="start_process" style="display:none;">
         <div class="box box-warning">
            <div class="box-header">
               <h3 class="box-title">Scanning process started</h3>
               Press (Esc) to end barcode scanning. <i class="fa fa-refresh fa-spin"></i>
            </div>
            <div class="box-body">
            </div>
            <div class="small-box bg-green" id="manifested_alert">
               <div class="inner">
                  <div>
                     <h1 id="scanned_barcode">N/A</h1>
                  </div>
                  <p id="manifested_status">N/A</p>
               </div>
               <div class="icon">
                  <i  class="fa fa-check " id="manifested_status_icon" style="color:white"></i>
               </div>
               </a>
            </div>
         </div>
         <!-- /.box -->
      </div>
      `
      <div class="col-md-12">
         <div class="box box-danger">
            <form>
               <div class="box-header">
                  <h3 class="box-title"><b>Waybill Pickup</b></h3>
                  <div class="box-tools">
                     <a href="{{ url('/home/event_add/waybill_pickup') }}"  class="btn btn-primary"><i class="fa fa-file"></i> NEW</a>
                  </div>
               </div>
               <!-- /.box-header -->
               <div class="box-body table-responsive no-padding">
                  <table class="table">
                     <tr>
                        <td><input type="text"  class="form-control" style='display:none;'/></td>
                     </tr>
                     <tr>
                        <td><b>Scan receive code</b></td>
                        <td> : </td>
                        <td>
                           <div class="input-group">
                              <span class="input-group-addon"><i class="fa fa-barcode"></i></span>
                              <input type="text" id="receive-code" name="receive_code" class="form-control">
                           </div>
                        </td>
                        <td></td>
                     </tr>
                  </table>
               </div>
            </form>
         </div>
      </div>
      <div class="col-md-9">
         <div class="box">
            <div class="box-header">
               <h3 class="box-title">Scanned Waybill</h3>
               <button type="button" class="btn btn-success pull-right" id="count-label">0</button>
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
               <table class="table table-hover" id="receive-table" name = "receive_table">
                  <thead>
                     <tr>
                        <th>Received Code</th>
                        <th>Remark</th>
                        <th>Action</th>
                     </tr>
                  <tbody>
                  </tbody>
               </table>
            </div>
            <!-- /.box-body -->
         </div>
         <!-- /.box -->
      </div>
      <div class="col-md-3">
         <div class="box box-warning">
            <div class="box-header with-border">
               <h3 class="box-title"><button type="button" class="btn btn-warning " id="error-count-label">Invalid CN</button></h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding ">
               <table class="table table-hover" id="error-table" name = "error_table">
                  <thead>
                     <tr>
                        <th>Invalid CN</th>
                        <th>Remark</th>
                     </tr>
                  </thead>
                  <tbody>
                  </tbody>
               </table>
            </div>
            <!-- /.box-body -->
         </div>
      </div>
   </div>
   </div>
   <button type="button" class="btn btn-primary save-button" id="save-event-button" onClick = "save_receive()">SAVE</button>     
</section>
@include('common.footer')
@include('validationRules.aux_id_validation_rules')
<script>
   var saveCompleted = false;
   var scanningStarted = false;
   
      const refereshCount = () => $('#count-label').text(document.getElementById('receive-table').rows.length) ;

   
       $('#receive-overlay').on('click', function(e) {
           $( "#receive-code" ).focus();
       });
   
       //https://keycode.info/
     $("html").keydown(function(e){
       if (e.keyCode == 27) //Esc key
           {  
              end_receive();
              snd.pause();
              $("#invalid-process").hide();
           }
   
           if (e.keyCode == 13 && !scanningStarted) //enter key
           {  
               snd.play();
               $("#invalid-process").show();
           }
        
       });
       
       //remove the code from clicked button
        $(document).on('click', '.delete-model', function() 
           {
                $('.item' + $(this).data('id')).remove();
                refereshCount();
           });
   
   
   
        $('#receive-code').keydown(function (e){
           if(e.keyCode == 13){
               //alert('you pressed enter ^_^');
               validate_waybill($('#receive-code').val());
               $('#receive-code').val("");
               $( "#receive-code" ).focus();
               refereshCount()
           start_receive(); 
           }else
           if(e.keyCode == 9){
               return false;
               //ignore tab press
           }
       })
   
   
       $('#receive-code').on('click',function (e) {
       if (e.originalEvent) {
           start_receive();
           scanningStarted = true;
       } 
       });
   
       function find_duplicate_code(str, tableID)
       {   var isDuplicate = false;
           
           $('#' + tableID + ' tr').each(function(){
               $(this).children('td').each(function(){
                   if ( $(this).html() == str ){
                       isDuplicate = true;
                   }
               });
           }); 
           return isDuplicate ;
       }
   
   function start_receive()
   {
       $("#receive-overlay").show();
       $("#start-process").show();
   }
   
   function end_receive()
   {
       $("#receive-overlay").hide();
       $("#start-process").hide();
   }
   
   
   function append_table(auxID)
   {
       $('#receive-table').append("<tr class='item"+auxID+"'>"+
       "<td>"+auxID+"</td>"+
       "<td>SYSTEM-Pickup By