@include('common.header')
 <!-- /.info-box -->
 <div id="upload-info-box-content" style="display:none;">
          <div class="info-box bg-yellow">
            <span class="info-box-icon"><i class="fa fa-cloud-upload"></i></span>

            <div class="info-box-content">
              <span class="info-box-text" id="upload-info-box-text">UPDATE IN PROGRESS</span>
              <span class="info-box-number"  id="upload-info-box-number">41,410</span>

              <div class="progress">
                <div class="progress-bar" id="upload-progress-bar" style="width: 10%"></div>
              </div>
                  <span class="progress-description" id="upload-progress-description">
                    70% Increase in 30 Days
                  </span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
         <!-- /.info-box -->

<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="row">
    @include('alert.alert_panel')
    
        <div class="col-xs-12">
            <div class="box box-info">
                <form>
                    <div class="box-header">
                        <h3 class="box-title"><b>Create Tracking Entry</b></h3>

                        <div class="box-tools">
                            <div style="width: 160px;">
                                <a href="{{ url('/home/event_add') }}"  class="btn btn-primary"><i class="fa fa-file"></i> NEW</a>
                                <a href="{{ url('/home/event_search') }}" class="btn btn-default pull-right"><i class="fa fa-search"></i></a>
                                <a href="{{ url('/home/event_add') }}" class="btn btn-info pull-right"><i class="fa fa-pencil"></i></a>
                            </div>
                        </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>
                                    <div class="col-xs-12">
                                        <label>Event Tracking Type</label>
                                    </div>
                                </td>

                                  
                            </tr>
                            <tr>
                                <td colspan="4">
                                <div class="col-xs-10">   
                                    <select class="form-control" id="event-type" name="event_type">
                                        <option value="shortlanded">Shortlanded</option>
                                        <option value="arrived_unmanifested">Arrived Unmanifested</option>
                                        <option value="misroute">Misroute </option>
                                        <!-- <option value="arrived_hq">Arrived HQ</option> -->
                                        <option value="to_transit">To Transit</option>
                                        <option value="arrived_dest">Arrived Destination </option>
                                        <!-- <option value="out_for_deliver">Out For Deliver </option> -->
                                        <option value="proof_of_deliver">Proof Of deliver </option>
                                        <option value="not_delivered">Not Delivered </option>
                                        <!-- <option value="held_in_hq">Held in HQ</option> -->
                                        <option value="held_in_dest">Held in Destination </option>
                                        <option value="on_forwarded_via_third_party">Onforwarded via ThirdParty</option>
                                        <option value="bounced_to_consumer">Bounced To Consumer</option>
                                        <option value="information">Information</option>
                                    </select>
                                    </div>

                                    <div class="checkbox col-xs-2 pull-right">
                                        <label>
                                        <input type="checkbox" id="bulk_scan_checkbox">
                                        <span class="label label-warning"> <font color="black">I wish to bulk scanning CN number in tracking entry </font></span>
                                        </label>
                                    </div>
                                </td>
                                 
                            </tr>
                            <tr>
                                <td colspan="4">
                                    <div class="col-xs-3">
                                    <b>Code </b>ex (waybill / CN)
                                    </div>
                                    <div class="col-xs-2">
                                    Date (dd-mm-yyyy)
                                    </div>
                                    <div class="col-xs-2">
                                    Time (hh:mm)
                                    </div>
                                    <div class="col-xs-5">
                                    Remarks
                                    </div>
                                </td>
                                </tr>
                                <tr>   
                                <td colspan="4">
                                    <div class="col-xs-3">
                                    <input type="text" id="event-code" name="event_code" class="form-control" >
                                    </div>
                                    <div class="col-xs-2">
                                    <input type="text" id="event-date" class="form-control" data-inputmask="'alias': 'dd-mm-yyyy'" data-mask="">
                                    </div>
                                    <div class="col-xs-2">
                                    <input type="text" id="event-time"class="form-control" data-inputmask="'alias': 'hh:mm'" data-mask="">
                                    </div>
                                    <div class="col-xs-5">
                                    <select class="form-control" id="undelived-type" name="undelived_type" style="display:none;">
                                        <option value="">Select Remarks</option>
                                        <option value="Wrong Address">Wrong Address</option>
                                        <option value="Customer Away">Customer Away</option>
                                        <option value="Cannot Locate">Cannot Locate</option>
                                        <option value="Customer Phone Not Responding">Customer Phone Not Responding</option>
                                        <option value="Incomplete Address">Incomplete Address</option>
                                        <option value="Customer Refuse to Accept">Customer Refuse to Accept</option>
                                        <option value="Out of Time">Out of Time</option>
                                        <option value="other">OTHER</option>
                                    </select>
                                    <textarea class="form-control" rows="1" placeholder="Enter Your Remark" id="remarks-text" name="remarks_text"></textarea>
                                    </div>
                                </td>
                                <td>
                                    <a href="#"  class="btn btn-primary" id="event-add-btn" name="event_add_btn" >Add</a>
                                </td>
                              
                            </tr>
                            
                        </table>
                    </div>
                   
                </form>

                
        </div>

        
    </div>

                <div class="col-xs-12">
                    <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>Code</th>
                            <th>Remarks</th>
                            <th>Action</th>
                            </tr>
                        </thead>
                            <tbody>                      
                        </tbody>
                        </table>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                    </div>
                    <button type="button" class="btn btn-primary save-button" id="save-event-button" onClick = "save_tracking()">SAVE</button>     

                </div>

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

<script>


$('#bulk_scan_checkbox').change(function() {
        if(this.checked) {
            $('#event-add-btn').hide(); 
        }else{
            $('#event-add-btn').show();     
        }
        
    });

$("#undelived-type").on('change', function() 
{
    if(this.value == "other")
    {
        $("#remarks-text").show()
    }else
    {   
        if($("#event-type").val()=="not_delivered")
        {
            $("#remarks-text").hide()
        }
        document.getElementById('remarks-text').value = this.value;   
    }
        
});

$("#event-type").on('change', function() {
    if(this.value == "not_delivered")
    {
        $("#undelived-type").show()
        $("#remarks-text").hide()
    }else{
        $("#undelived-type").hide()
        $("#remarks-text").show()
    } 
});



 $(function () {
        //Datemask dd/mm/yyyy
        $('#datemask').inputmask('dd-mm-yyyy', { 'placeholder': 'dd-mm-yyyy' })
        //Datemask2 mm/dd/yyyy
        $('#datemask2').inputmask('mm/dd/yyyy', { 'placeholder': 'mm/dd/yyyy' })
        $('#datemask3').inputmask('hh:mm', { 'placeholder': 'hh:mm' })
        //Money Euro
        $('[data-mask]').inputmask()
    })


    $('#event-code').keydown(function (e){
    
    if(e.keyCode == 13 && $("#bulk_scan_checkbox").is(':checked')){
        if( $('#event-code').val()!="" && $('#remarks-text').val()!="" )
        {
            var dateTimeString = $('#event-date').val()+" "+$('#event-time').val();
            var remarksDateTimeString="";
                if(dateTimeString)
                {
                    remarksDateTimeString = dateTimeString;
                }
            add_tracking($('#event-code').val(),remarksDateTimeString+" "+$('#remarks-text').val());
            $('#event-code').val("");
            $( "#event-code" ).focus();
            $('#count-label').text($('#receive-table tr').size()-1)
        }else
        {
            show_warning("Please insert code & remarks")
        }
    }
    })


    $("#event-add-btn").click(function(e) {
        if( $('#event-code').val()!="" && $('#remarks-text').val()!="" )
        {
            var dateTimeString = $('#event-date').val()+" "+$('#event-time').val();
            var remarksDateTimeString="";
                if(dateTimeString)
                {
                    remarksDateTimeString = dateTimeString;
                }
            add_tracking($('#event-code').val(),remarksDateTimeString+" "+$('#remarks-text').val());
            $('#event-code').val("");
            $('#event-time').val("")
            $('#remarks-text').val("");
            $( "#event-code" ).focus();
            $('#count-label').text($('#receive-table tr').size()-1)
            $('#undelived-type').prop('selectedIndex', 0).change();
        }else
        {
            show_warning("Please insert code & remarks")
        }
    });
 
    //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)
        });


    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 add_tracking(auxID,remarks)
{
            
                if(find_duplicate_code(auxID, "receive-table"))
                {   
                    
                    show_warning('Duplicated code scanned');
                }else
                {

                $('#receive-table').append("<tr class='item"+auxID+"'>"+
                                                            "<td>"+auxID+"</td>"+
                                                            "<td>"+remarks+"</td>"+
                                                            "<td><button type='button' class='delete-model btn btn-danger' data-id="+auxID+"><i class='fa fa-trash-o'></i></button>"+
                                                            "</tr>");
                }
 }



//new function
function save_tracking()
{   

    //AVTIVE LOADER
    $("#load-overlay").show();
    $("#save-event-button").prop('disabled', true);
    // GET ALL DATA IN receive-table 
    var TableData     = new Array();
    var TableFullData = new Array();
    $('#receive-table tr').each(function(row, tr){
        var tem1 = new Array();
            tem1 = {code:$(tr).find('td:eq(0)').text(),description:$(tr).find('td:eq(1)').text()};
        TableData.push(tem1);
    }); 
    TableData.shift();  // first row is the table header - so remove
    var eventType         = $('#event-type').val();
    var chunkedTableArray = arrayChunk(TableData,1);
    var cycleCount        = 0 ;
    var responseArray     = new Array();

                        for(var i = 0 ; i < chunkedTableArray.length ; i++)
                        {
                            try{
                                    
                                    var dataArray= {
                                                    "entry_codes"          : chunkedTableArray[i],
                                                    "handling_warehouse_id": warehouseCode
                                                    };

                                    arrivedDestResult = syncAjaxCall(dataArray,courierApiMatrix+"/api/v2/courier/shipping/event/"+eventType,"POST",matrixBearerToken);
                            }
                            catch(e){
                                    
                                    $("#load-overlay").show();
                                    show_danger("Error on Tracking Entry - "+e.statusText  )
                                    return ;
                            }

                        }


    //DEAVTIVE LOADED
    $("#load-overlay").hide(); 
    $("#save-event-button").prop('disabled', true); 
    show_success("New shipement received successfuly")
    saveCompleted = true;    


}



    function show_warning($msg)
    {
                    $("#invalid-warning-message").html($msg);
                    $("#invalid-warning").show();
                    $("#invalid-warning").delay(3000).hide(0, function() {});
    }

    function show_danger($msg)
    {
                    $("#invalid-danger-message").html($msg);
                    $("#invalid-danger").show();

    }

    function show_success($msg)
    {
                    $("#invalid-success-message").html($msg);
                    $("#invalid-success").show();
                    
    }

    function displayProcess(upload_info_box_number,upload_progress_description,width)
    {
        $("#upload-info-box-content").show();
        $('#upload-info-box-number').text(upload_info_box_number);
        $('#upload-progress-description').text(upload_progress_description);
        $("#upload-progress-bar").width(width+'%')
    }

    function sleep(delay) {
        var start = new Date().getTime();
        while (new Date().getTime() < start + delay);
      }
</script>