@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">UPLOADING 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-xs-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="box box-success">
            <div class="box-header">
                <h3 class="box-title"><b>Shipment</b> Import</h3>

                <div class="box-tools pull-right">
                        <div style="width: 270px;">
                            <a href="{{ asset('sample_excel/BBB_Import_Template.xlsx')  }}" class="btn btn-success "><i class="fa fa-download"></i> DOWNLOAD TEMPLATE</a>
                            <a href="{{ url('/home/shipment_import') }}" class="btn btn-primary pull-right"><i class="fa fa-file"></i> NEW</a>
                        </div>
                    </div>
            </div>
            <!-- /.box-header -->
         <!-- form start -->
 
            <div class="box-body table-responsive no-padding">
                <form action="" method="POST" enctype="multipart/form-data" onsubmit="displayLoading()">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <div class="col-md-12">
                        <!-- The time line -->
                        <ul class="timeline">
                            <!-- timeline time label -->
                            <li class="time-label">
                            </li>
                            <!-- /.timeline-label -->

                            <!-- timeline item -->
                            <li>
                            <i class="fa fa-barcode bg-blue"></i>

                            <div class="timeline-item">

                                <h3 class="timeline-header"><a href="#">STEP 1</a> Select excel file</h3>

                                <div class="timeline-body col-xs-4">
                                    <input type="file" name="importFile" accept=".xls,.xlsx">
                                    @if ($errors->has('importFile'))
                                                    <span class="help-block">
                                                        <strong><font color="red">{{ $errors->first('importFile') }}</font></strong>
                                                    </span>
                                     @endif
                                </div>
                  
                            </div>
                            </li>
                            <!-- END timeline item -->

                             <!-- timeline item -->
                             <li>
                            <i class="fa fa-user bg-yellow"></i>

                            <div class="timeline-item">

                                <h3 class="timeline-header"><a href="#">STEP 2</a> Select Customer </h3>

                                <div class="timeline-body col-xs-4">

                                        <div>
                                                <select class="form-control select2" id="customer-no" name="customer_no" style="width: 100%;">
                                                    <option value="">Select Customer</option>
                                                    @foreach($all_customers as $customer)
                                                        <option value="{{ $customer->account_no }}">{{ $customer->account_no }} - {{ $customer->name }}</option>
                                                    @endforeach
                                                </select>
                                                @if ($errors->has('customer_no'))
                                                    <span class="help-block">
                                                        <strong><font color="red">{{ $errors->first('customer_no') }}</font></strong>
                                                    </span>
                                                @endif
                                        </div>
                        
                                </div>
                            </li>
                            <!-- END timeline item -->


                             <!-- timeline item -->
                             <li>
                            <i class="fa fa-file-excel-o bg-maroon"></i>

                            <div class="timeline-item">

                                <h3 class="timeline-header"><a href="#">STEP 3</a> Submit</h3>

                                <div class="timeline-body col-xs-4">
                                   
                                        <div>
                                            <button type="submit" class="btn bg-olive margin " id='import-excel' name="import_excel" ><i class="fa  fa-file-excel-o"></i> Import Now</button>
                                        </div>
                                    </div>

                    
                        
                                </div>
                            </li>
                            <!-- END timeline item -->
            </form>

                        
                             
                         
            </div>

                      
            </div>
              <!-- /.box-body -->
            </div>



        <!-- ***************** -->

              <div class="box">
                <div class="box-header">
                <h3 class="box-title">Imported Waybill Table</h3>
                <div class="box-tools">
                    <div class="input-group input-group-sm" style="width: 150px;">
                    </div>
                </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body table-responsive no-padding">
                <table class="table table-hover" id="import-table" name = "import_table">
                    <thead>
                    <tr>
                    <th>No#</th>
                    <th>Customer Account<font color="red">*</font></th>
                    <th>CN<font color="red">*</font></th>
                    <th>Shipper Name</th>
                    <th>Receiver Name</th>
                    <th>Pcs<font color="red">* must > 1</font></th>
                    <th>Actual Weight<font color="red">* must > 0.1</font></th>
                    <th>Volumn Weight<font color="red">* must number</font></th>
                    <th>Destination</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_import()">SAVE</button>     



    <!-- Modal form to edit a post -->
    <div>   
        <div id="editModal" class="modal fade" role="dialog">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">×</button>
                            <h4 class="modal-title"><b>Edit</b> Waybill</h4>
                        </div>

                
                        <div class="modal-body">
                            <div>  
                                <div class="alert alert-warning alert-dismissible" id="edit-invalid-warning" style="display:none;">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                <h4><i class="icon fa fa-warning"></i> Alert!</h4>
                                <p id="edit-invalid-warning-message"></p>
                            </div>
                            <form class="form-horizontal" role="form">
                            <div class="box-body table-responsive no-padding">
                    <table class="table">
                        <tr>
                            <td class="homeTd1 col-xs-3">
                                <div>
                                <b>Shipper Information</b><br/>
                                        <input type="text" class="input-sm form-control" id="index-no" name="index_no" style="display:none;">

                                        <label for="account-no" class="control-label homeTd1Lbl">Account No</label><br/>
                                        <input type="text" class="input-sm form-control" id="account-no" name="account_no">

                
                             
                                        <label for="shipper-name" class="control-label homeTd1Lbl">Shipper Name *</label><br/>
                                        <input type="text" class="input-sm form-control" id="shipper-name" name="shipper_name"/>
                                    
                    
                                  
                                        <label for="shipper-address" class="control-label homeTd1Lbl">Address *</label><br/>
                                        <textarea class="input-sm form-control" id="shipper-address" name="shipper_address" rows="2"></textarea>
                      
                                        <label for="shipper-state" class="control-label homeTd1Lbl">Select State</label><br/>
                                        <select class="input-sm form-control" id="shipper-state" name="shipper_state">
                                        <option value="">Select State</option>
                                        @foreach($states as $state)
                                            <option value="{{ $state }}">{{ $state }}</option>
                                        @endforeach
                                        </select>
                           
                                        <label for="shipper-postcode" class="control-label homeTd1Lbl">Postcode</label><br/>
                                        <input type="text" class="input-sm form-control" id="shipper-postcode" name="shipper_postcode"  />
                            
                                    
                                        <label for="shipper-contact-name" class="control-label homeTd1Lbl">Contact Person Name</label><br/>
                                        <input type="text" class="input-sm form-control" id="shipper-contact-name" name="shipper_contact_name"  />
                                     
                                   
                                        <label for="shipper-contact-ph" class="control-label homeTd1Lbl">Contact Person PH</label><br/>
                                        <input type="text" class="input-sm form-control" id="shipper-contact-ph" name="shipper_contact_ph"  />
                              
                                </div>
                            </td>
                            <td class="homeTd1 col-xs-3">
                                <div>
                                    <b>Consignee Information</b><br/>
                                
                                        <label for="consignee-name" class="control-label homeTd1Lbl">Consignee Name *</label><br/>
                                        <input type="text" class="input-sm form-control" id="consignee-name" name="consignee_name"  />
                                 
                              
                                        <label for="consignee-address" class="control-label homeTd1Lbl">Address *</label><br/>
                                        <textarea class="input-sm form-control" id="consignee-address" name="consignee_address" rows="2"></textarea>
                                 
                                        <label for="consignee-state" class="control-label homeTd1Lbl">Select State</label><br/>
                                        <select class="input-sm form-control" id="consignee-state" name="consignee_state">
                                        <option value="">Select State</option>
                                        @foreach($states as $state)
                                            <option value="{{ $state }}">{{ $state }}</option>
                                        @endforeach
                                        </select>
                                  
                                        <label for="consignee-postcode" class="control-label homeTd1Lbl">Postcode</label><br/>
                                        <input type="text" class="input-sm form-control" id="consignee-postcode" name="consignee_postcode"  />
                              
                                 
                                        <label for="consignee-contact-name" class="control-label homeTd1Lbl">Contact Person Name</label><br/>
                                        <input type="text" class="input-sm form-control" id="consignee-contact-name" name="consignee_contact_name"  />
                                     
                                  
                                        <label for="consignee-contact-ph" class="control-label homeTd1Lbl">Contact Person PH</label><br/>
                                        <input type="text" class="input-sm form-control" id="consignee-contact-ph" name="consignee_contact_ph"  />
                                    
                                </div>
                            </td>
                            <td class="homeTd2 col-xs-3">
                                <div>
                                        <label for="parcel-type" class="control-label homeTd1Lbl">Parcel Type</label><br/>
                                        <select class="input-sm form-control" id="parcel-type" name="parcel_type">
                                        @foreach($parcel_types as $parcel_type)
                                                <option value="{{ $parcel_type }}">{{ $parcel_type }}</option>
                                        @endforeach
                                         </select>
                                 
                                        <label for="parcel-total" class="control-label homeTd1Lbl">Total Pcs *</label><br/>
                                        <input type="text" class="input-sm form-control" id="parcel-total" name="parcel_total"  />
                               
                                  
                                        <label for="parcel-weight" class="control-label homeTd1Lbl">Weight Kgs *</label><br/>
                                        <input type="text" class="input-sm form-control" id="parcel-weight" name="parcel_weight"  /><br/>
                                
                                 
                                        <label for="parcel-weight" class="control-label homeTd1Lbl">Volume Weight Kgs</label><br/>
                                        <input type="text" class="input-sm form-control" id="parcel-weight1" name="parcel_weight1" placeholder="Volumn Weight kgs *"  />
                                  
                                </div>
                            </td>
                            <td class="homeTd2 col-xs-3">
                                <div>
                                    <label for="parcel-total" class="control-label homeTd1Lbl">#CN</label><br/>
                                    <input type="text" class="input-sm form-control" id="cn-no" name="cn_no"  />

                                    <label for="parcel-total" class="control-label homeTd1Lbl">Scan Baby Code Here</label><br/>
                                    <textarea class="input-sm form-control" id="additional-barcode" name="additional_barcode" rows="7"></textarea>

                                    <label for="parcel-total" class="control-label homeTd1Lbl">Remarks</label><br/>
                                    <textarea class="input-sm form-control" id="additional-remarks" name="additional_remarks" rows="2"></textarea>


                        
                                </div>
            <!-- /.box-body -->

                                
                                </div>
                            </td>
                        </tr> 
                    </table>
                </div>
                             
                            </form>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-success update" >
                                    <span id="" class='glyphicon glyphicon-check'></span> update
                                </button>
                                <button type="button" class="btn btn-warning" data-dismiss="modal">
                                    <span class='glyphicon glyphicon-remove'></span> Close
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

     <!-- Modal form to add a post -->
</div>

</section>

@include('common.footer')

<script>
var apiPath = "{{env('API_PATH')}}"
var bearerToken = "{{session('authorization_key')}}"

var waybills = null
//initialize select 2 render function
$('.select2').select2();

//model on hide event clear all model input
$('#editModal').on('hidden.bs.modal', function () 
{
    $('#index-no').val("");
    $('#account-no').val("");
    $('#shipper-name').val("");
    $('#shipper-address').val("");
    $('#shipper-state').val("");
    $('#shipper-postcode').val("");
    $('#shipper-contact-name').val("");
    $('#shipper-contact-ph').val("");
    $('#consignee-name').val("");
    $('#consignee-address').val("");
    $('#consignee-state').val("");
    $('#consignee-postcode').val("");
    $('#consignee-contact-name').val("");
    $('#consignee-contact-ph').val("");
    $('#parcel-type').val("");
    $('#parcel-total').val("");
    $('#parcel-weight').val("");
    $('#parcel-weight1').val("");
    $('#cn-no').val("");
    $('#additional-remarks').val("");
    $('additional-barcode').val("");
    $("#edit-invalid-warning").hide();
});

   // Edit a post
   $(document).on('click', '.edit-modal', function() {

   console.log(waybills[parseInt($(this).data('index'))]);
 
    if (waybills[parseInt($(this).data('index'))].dataResponse.status=="ERROR")
                    {
                       var messages =""
                      
                        for(var value in waybills[parseInt($(this).data('index'))].dataResponse.errors_messages )
                        {
                          messages += waybills[parseInt($(this).data('index'))].dataResponse.errors_messages[value]+ '<br>';
                            
                        }
                        edit_model_show_warning(messages)

                    }
    
    $('#index-no').val(parseInt($(this).data('index')));
    $('#account-no').val(waybills[parseInt($(this).data('index'))]['waybill']['accountNo']);
    $('#shipper-name').val(waybills[parseInt($(this).data('index'))]['waybill']['shipperName']);
    $('#shipper-address').val(waybills[parseInt($(this).data('index'))]['waybill']['shipperAddress']);
    $('#shipper-state').val(waybills[parseInt($(this).data('index'))]['waybill']['shipperState']);
    $('#shipper-postcode').val(waybills[parseInt($(this).data('index'))]['waybill']['shipperPostcode']);
    $('#shipper-contact-name').val(waybills[parseInt($(this).data('index'))]['waybill']['shipperContactName']);
    $('#shipper-contact-ph').val(waybills[parseInt($(this).data('index'))]['waybill']['shipperContactNumber']);
    $('#consignee-name').val(waybills[parseInt($(this).data('index'))]['waybill']['consigneeName']);
    $('#consignee-address').val(waybills[parseInt($(this).data('index'))]['waybill']['consigneeAddress']);
    $('#consignee-state').val(waybills[parseInt($(this).data('index'))]['waybill']['consigneeState']);
    $('#consignee-postcode').val(waybills[parseInt($(this).data('index'))]['waybill']['consigneePostcode']);
    $('#consignee-contact-name').val(waybills[parseInt($(this).data('index'))]['waybill']['consigneeContactName']);
    $('#consignee-contact-ph').val(waybills[parseInt($(this).data('index'))]['waybill']['consigneeContactNumber']);
    $('#parcel-type').val(waybills[parseInt($(this).data('index'))]['waybill']['parcelType']);
    $('#parcel-total').val(waybills[parseInt($(this).data('index'))]['waybill']['pc']);
    $('#parcel-weight').val(waybills[parseInt($(this).data('index'))]['waybill']['actualWeight']);
    $('#parcel-weight1').val(waybills[parseInt($(this).data('index'))]['waybill']['volumeWeight']);
    $('#cn-no').val(waybills[parseInt($(this).data('index'))]['waybill']['cnNo']);
    $('#additional-remarks').val(waybills[parseInt($(this).data('index'))]['waybill']['remark']);
    var bbcode =  waybills[parseInt($(this).data('index'))]['waybill']['babyCodes'];
    var textarea = document.getElementById("additional-barcode");
    textarea.value = bbcode.join('\n');
    //console.log(bbcode);
    $('#editModal').modal('show');
    });


    function waybillValidation(waybill)
    {
        
        var status = "SUCCESS"
        var message = []
                if (waybill['shipperName'] == "" || 
                    waybill['shipperAddres'] == "" ||
                    waybill['consigneeName'] == "" ||
                    waybill['consigneeAddress'] == "" ||
                    waybill['parcelType'] == "" ||
                    waybill['pc'] < 1 ||
                    waybill['actualWeight'] < 0.1 ||
                    waybill['cnNo'] == "" ||
                    waybill['accountNo'] == ""
                   )
                {
                    status = "ERROR"
                } 

        return {'status':status,'message':message}
    }

    function save_import()
    {


          //     //AVTIVE LOADED
        $("#load-overlay").show();
        $("#save-event-button").prop('disabled', true); 
        var isError = false ;
        var counter = 0

        console.log(waybills);

        for(var i in waybills)
            {
               var responsedata =  waybillValidation(waybills[i]['waybill'])

                 //clear the warning
                                var x = document.getElementById("import-table").rows[counter+1].cells;
                                x[10].innerHTML = ""
                                //if error append warning.
                                if (responsedata['status']=="ERROR")
                                {   isError = true;
                                    var x = document.getElementById("import-table").rows[counter+1].cells;
                                    x[10].innerHTML = '<span class="label label-danger">Invalid</span>'
                                }else
                                {
                                    var x = document.getElementById("import-table").rows[counter+1].cells;
                                    x[10].innerHTML = '<span class="label label-success">Valid</span>'

                                }
                waybills[counter]['dataResponse'] = responsedata['message'] ;
                counter ++ 

            }

                                 if(!isError)
                                    {
                                        displayProcess("0%","Creating Waybill 0 of 0",0)
                                            var waybillArray = {};
                                            for(i in waybills)
                                            {   
                                                //remove dataResponse when building a ajax array
                                                delete waybills[i]['dataResponse'];
                                            }
                                            var chunkedTableArray = arrayChunk(waybills,50);
                                            runBulkAjaxInsert(chunkedTableArray,0,waybills.length)
                                    }else
                                    {
                                        show_danger("Excel data validation fail , please edit the data or upload again.<br>"+
                                                    "1)Must have valid Account number <br>"+
                                                    "2)Must have valid CN number <br>"+
                                                    "3)Pcs must greater than 0 <br>"+
                                                    "4)Weight must greater than 0 <br>"+
                                                    "5)Volumn Weight not allow blank , must atleast 0")
                                                    $("#load-overlay").hide();
                                    }
    }


    function runBulkAjaxInsert(waybillsArray,index,totalWaybill)
    {
        //AVTIVE LOADED
        $("#load-overlay").show();
        var counter = 0 
        for(var i in waybillsArray[index])
        {
            dataString =  JSON.stringify(waybillsArray[index][i])
        
                        var settings = {
                                        "async": true,
                                        "crossDomain": true,
                                        "url":apiPath+"/api/v2/courier/waybill",
                                        "method":"PUT",
                                        "headers": {
                                            "Authorization": bearerToken,
                                            "Content-Type": "application/json",
                                        },
                                        "processData": false,
                                        "data":dataString,
                                        }

                                
                                    $.ajax(settings).done(function (response) 
                                    {
                                        console.log(response)
                                        counter++
                                        if(counter == waybillsArray[index].length)
                                        {
                                            var process = parseInt((100/parseInt(waybillsArray.length))*(index+1))
                                            displayProcess(process+"%","Creating Waybill "+((index*50)+counter)+" of "+totalWaybill,process)

                                            console.log(index+"-"+waybillsArray.length)
                                                if(index == waybillsArray.length -1 )
                                                {
                                                    console.log(index+"-"+waybillsArray.length)
                                                    $("#load-overlay").hide();
                                                    $("#upload-info-box-content").hide();
                                                    $("#save-event-button").prop('disabled', true);   
                                                    show_success("Excel data import completed")
                                                }else
                                                {
                                                    runBulkAjaxInsert(waybillsArray,index+1,totalWaybill)      
                                                }
                                        }
                                        
                                    
                                    }) .fail(function(xhr, status, error) {
                                            //Ajax request failed.
                                            var errorMessage =xhr.status + '- ' + xhr.statusText
                                                    $("#load-overlay").hide(); 
                                                    $("#save-event-button").prop('disabled', false);   
                                                    show_danger("Error on IMPORT : "+errorMessage);    
                                                    $("#save-event-button").prop('disabled', true);   
                                                    
                                    });
        }
    }


    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+'%')
    }

    //model update click 
    $('.modal-footer').on('click', '.update', function() {
            index = parseInt($('#index-no').val());
            waybills[index]['accountNo']=$('#account-no').val();
            waybills[index]['shipperName']=$('#shipper-name').val();
            waybills[index]['shipperAddress']=$('#shipper-address').val();
            waybills[index]['shipperState']=$('#shipper-state').val();
            waybills[index]['shipperPostcode']=$('#shipper-postcode').val();
            waybills[index]['shipperContactName']=$('#shipper-contact-name').val();
            waybills[index]['shipperContactNumber']=$('#shipper-contact-ph').val();
            waybills[index]['consigneeName']=$('#consignee-name').val();
            waybills[index]['consigneeAddress']=$('#consignee-address').val();
            waybills[index]['consigneeState']=$('#consignee-state').val();
            waybills[index]['consigneePostcode']=$('#consignee-postcode').val();
            waybills[index]['consigneeContactName']=$('#consignee-contact-name').val();
            waybills[index]['consigneeContactNumber']=$('#consignee-contact-ph').val();
            waybills[index]['parcelType']=$('#parcel-type').val();
            waybills[index]['pc']=$('#parcel-total').val();
            waybills[index]['actualWeight']=$('#parcel-weight').val();
            waybills[index]['volumeWeight']=$('#parcel-weight1').val();
            waybills[index]['cnNo']=$('#cn-no').val();
            waybills[index]['remark']=$('#additional-remarks').val();
            waybills[index]['babyCodes']=$('#additional-barcode').val().split('\n');
            //remove empty string "", 0, NaN, null, undefined, and false. in array
            waybills[index]['babyCodes'] = waybills[index]['babyCodes'].filter(Boolean);

            var x = document.getElementById("import-table").rows[index+1].cells;
            x[1].innerHTML = waybills[index]['cnNo']
            x[2].innerHTML = waybills[index]['shipperName']
            x[3].innerHTML = waybills[index]['consigneeName']
            x[4].innerHTML = waybills[index]['pc']
            x[5].innerHTML = waybills[index]['actualWeight']
            x[6].innerHTML = waybills[index]['volumeWeight']
            x[8].innerHTML = '<small class="label label-primary"><i class="fa fa-clock-o"></i> Updated</small>'

            $('#editModal').modal('hide');

        });
  
    function displayLoading() {
        $("#save-button").attr("disabled", true);
        $("#load-overlay").show();
    }

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

    function show_danger($msg)
    {
                    $("#invalid-danger-message").html($msg);
                    $("#invalid-danger").show();
                    //$("#invalid-danger").delay(8000).hide(0, function() {});
    }

    function show_success($msg)
    {
                    $("#invalid-success-message").html($msg);
                    $("#invalid-success").show();
                    // $("#invalid-success").delay(5000).hide(0, function() {});
    }

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

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

    
</script>