@include('common.header')
            <div class="alert alert-warning alert-dismissible" >
                    <div class="overlay">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    <h4><i class="icon fa fa-building"></i> Transhipment In Process!</h4>
                    </div>
              </div>

              <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>Transit Receive </b></h3>

                                <div class="box-tools">
                    
                                        <a href="{{ url('/hub/transit_receive') }}"  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 Received Code Table</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>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">Unmanifested 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>Unmanifested 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;




    $('#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();
             $('#count-label').text($('#receive-table tr').size()-1)
        });



     $('#receive-code').keydown(function (e){
        if(e.keyCode == 13){
            //alert('you pressed enter ^_^');
            get_code($('#receive-code').val());
            $('#receive-code').val("");
            $( "#receive-code" ).focus();
            $('#count-label').text($('#receive-table tr').size()-1)
        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 validate_manifest_by_scanned_code(auxID)
{

    var validateURL ;
    
    var auxIDType = auxIDTypeValidation(auxID)


    switch (auxIDType)
    {
      
        case "babySeal" :case "motherSeal" :case "manifestNo" :case "linehaulSeal" :
        validateURL = "