@include('common.header')
            <div class="alert alert-warning alert-dismissible">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                <h4><i class="icon fa fa-truck"></i> Dispatch Shipment In Process!</h4>
              </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="dispatch-overlay" name="dispatch_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 Dispatch </b></h3>

                        <div class="box-tools">
              
                                <a href="{{ url('/hub/transit_dispatch') }}"  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>Destination Hub Selection *</b></td>
                                <td> : </td>
                                <td>
                                <div class="form-group">
                                        <select class="form-control select2" id="transit-des-hub" name="transit_des_hub" style="width: 100%;">
                                            <option value="">Select Destination Hub</option>
                                            @foreach($hub_list as $hub)
                                                <option value="{{ $hub->code }}">{{ $hub->stateShort }} - {{ $hub->stateLong }}</option>
                                            @endforeach
                                        </select>
                                </div>    
                                <td>
                                
                                </td>
                            </tr>

                             <tr>
                                <td><b>Remarks</b></td>
                                <td> : </td>
                                <td><textarea class="form-control" rows="3" id="remarks"></textarea></td>
                            </tr>

                            <tr>
                                <td><b>Scan dispatch 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 dispatch 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>Dispatch 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">Wrong Destination</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>Scanned Code</th>
                                    <th>Remark</th>
                                    </tr>                           
                                </thead>
                                    <tbody>
                                
                                </tbody>
                                </table>
                                </div>
                    <!-- /.box-body -->
                    </div>
            </div>

        </div>

        <button type="button" class="btn btn-primary save-button" id="save-event-button" onClick = "save_dispatch()">SAVE</button>     

                
</section>
@include('common.footer')
@include('validationRules.aux_id_validation_rules')

<script>


var saveCompleted = false;
var scanningStarted = false;

//initialize select 2 render function
    $('.select2').select2();
 
    //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_dispatch();
            
        }else
            if(e.keyCode == 9){
                return false;
                //ignore tab press
            }
    })

    $('#dispatch-overlay').on('click', function(e) {
        $( "#receive-code" ).focus();
        
    });

        //https://keycode.info/
    $("html").keydown(function(e){

        if (e.keyCode == 27) //Esc key
        {  
            end_dispatch();
           snd.pause();
           $("#invalid-process").hide();
        }

        if (e.keyCode == 13 && !scanningStarted) //enter key
        {  
            snd.play();
            $("#invalid-process").show();
        }
     
    });

    $('#receive-code').on('click',function (e) {
    if (e.originalEvent) {
        start_dispatch();
        scanningStarted = true;
    } 
    });


    function start_dispatch()
    {
        $("#dispatch-overlay").show();
        $("#start-process").show();
    }

    function end_dispatch()
    {
        $("#dispatch-overlay").hide();
        $("#start-process").hide();
    }

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 get_code(auxID)
{
    var strAuxID = auxID 
    //replace special char scanned and use in class item
    strAuxID =  strAuxID.replace(/[_\W]+/g, "-")
            
                if(find_duplicate_code(auxID, "receive-table"))
                {   
                    
                    show_warning('Duplicated code scanned');
                }else
                if(auxID == "")
                {   
                    show_warning('Please Scan a valid code');
                }else
                {
                    validate_destination_by_scanned_code(auxID)
                }


 }

 function validate_destination_by_scanned_code(auxID)
{
    var validateURL ;
    
    var auxIDType = auxIDTypeValidation(auxID)


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