@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: 300px;">
                            <a href="{{ asset('sample_excel/BBB_Import_Template_Public_Customer.xlsx')  }}" class="btn btn-success "><i class="fa fa-download"></i> DOWNLOAD TEMPLATE</a>
                            <a href="{{ url('/public_customer/shipment_import') }}" class="btn btn-primary pull-right"><i class="fa fa-file"></i> NEW IMPORT</a>
                        </div>
                    </div>
            </div>
            <!-- /.box-header -->
         <!-- form start -->
 
            <div class="box-body table-responsive no-padding">
                <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" id="fileUpload" accept=".xls,.xlsx">
                                </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 2</a> Import Excel</h3>

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

                    
                        
                                </div>
                            </li>
                            <!-- END timeline item -->
                         
            </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>Status</th>
                    </tr>
                </thead>
                <tbody>

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





</section>

@include('common.footer')

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

//initialize select 2 render function
$('.select2').select2();

function Upload() {

        $("#import-excel").prop("disabled",true);
        $("#upload").prop('disabled', true);
        //Reference the FileUpload element.
        var fileUpload = document.getElementById("fileUpload");
 
        // //Validate whether File is valid Excel file.
        // var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.xls|.xlsx)$/;
        
        //Validate whether File is valid Excel file.
        var regex = /(.xls|.xlsx)$/;
        if (regex.test(fileUpload.value.toLowerCase())) {
            if (typeof (FileReader) != "undefined") {
                var reader = new FileReader();
 
                //For Browsers other than IE.
                if (reader.readAsBinaryString) {
                    reader.onload = function (e) {
                        ProcessExcel(e.target.result);
                    };
                    reader.readAsBinaryString(fileUpload.files[0]);
                } else {
                    //For IE Browser.
                    reader.onload = function (e) {
                        var data = "";
                        var bytes = new Uint8Array(e.target.result);
                        for (var i = 0; i < bytes.byteLength; i++) {
                            data += String.fromCharCode(bytes[i]);
                        }
                        ProcessExcel(data);
                    };
                    reader.readAsArrayBuffer(fileUpload.files[0]);
                }
            } else {
                alert("This browser does not support HTML5.");
            }
        } else {
            alert("Please upload a valid Excel file.");
        }
    };
    function ProcessExcel(data) {

        //verify import data header
        var problemData = false;
        var problemDataMessage = "";
         //read 1 row to verify the header
         var VerifyWorkbook = XLSX.read(data, {
            type: 'binary',
            sheetRows: 1
        });
        var firstSheet = VerifyWorkbook.SheetNames[0];
        var VerifyHeaderData = XLSX.utils.sheet_to_row_object_array(VerifyWorkbook.Sheets[firstSheet],{
            header: 1,
            defval: '',
            blankrows: false
        });

       //define the needed vaerify header
       var headerArray = ['shipperName',
                          'shipperAddress',
                          'shipperState',
                          'shipperPostcode',
                          'shipperContactName',
                          'shipperContactNumber',
                          'consigneeName',
                          'consigneeAddress',
                          'consigneeState',
                          'consigneePostcode',
                          'consigneeContactName',
                          'consigneeContactNumber',
                          'pc',
                          'actualWeight',
                          'remark',
                          'ref1',
                          'ref2',
                          'ref3',
                          'ref4'];
       for(var i in headerArray)
       {    //if the indexOf < 0  mean the header is not found
            if(VerifyHeaderData[0].indexOf(headerArray[i])<0)
            {
                problemData = true;
                problemDataMessage = problemDataMessage+headerArray[i]+"<br>";
            }
       }

       if(problemData)
        {
            show_danger("Selected file is not valid , please select again <br>"+
                        "Header not found : <br>"+
                        problemDataMessage+
                        "<a href='{{ url('/public_customer/shipment_import') }}'>Click to Continue</a>");
                        return;
        }
        //Read the Excel File data.
        var workbook = XLSX.read(data, {
            type: 'binary'
        });
 
        //Fetch the name of First Sheet.
        var firstSheet = workbook.SheetNames[0];

       
        //Read all rows from First Sheet into an JSON array.
        excelRows = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[firstSheet],{
            header: 2,
            defval: '',
            blankrows: false
        });

        if(excelRows.length>100)
        {
            show_danger("File Size Exceeded the Maximum Import Limit of 100 Row <br>"+
                        "<a href='{{ url('/public_customer/shipment_import') }}'>Click to Continue</a>");
                        return;
        }


        saveWaybillAjax(excelRows)
     

    };

    function saveWaybillAjax(excelRows)
    {
        var waybillArray = [];
        var isValidImport = true;

        $('.excel-data').remove();

        var d = new Date();
        var EwaybillID = d.getFullYear().toString().slice(-2)+""+(d.getMonth() + 1)+""+d.getDate()+""+d.getHours()+""+d.getMinutes()+""+d.getSeconds() ; 


        for (var i = 0; i < excelRows.length; i++) 
        {
            //build a unique waybill no 
            var eCN ="EX{{session('customer_id')}}"+EwaybillID+i; 
            validData = true ;


            // //if the excel contain no data / black convert to ""; 
            // for(key in excelRows[i])
            // {
            //     excelRows[i][key] == undefined ? excelRows[i][key]= "":"" ;    
            // }
            
            //control if pc and weight is no data or blank
            excelRows[i]['pc'] ==  "" || isNaN(excelRows[i]['pc'])? excelRows[i]['pc']= 0:""        
            excelRows[i]['actualWeight'] == ""  || isNaN(excelRows[i]['actualWeight']) ? (excelRows[i]['actualWeight']= 0):""



            excelRows[i]['pc'] = parseInt(excelRows[i]['pc']) ; 
            excelRows[i]['actualWeight'] = parseFloat(parseFloat(excelRows[i]['actualWeight']).toFixed(2)); 
            
            excelRows[i]['parcelType'] = "Parcel" ; 
            excelRows[i]['deliveryMode'] = "delivery" ; 
            excelRows[i]['pickupMode'] = "self_transport" ; 
            excelRows[i]['serviceType'] = "cou" ; 
            excelRows[i]['id'] = null ; 
            excelRows[i]['cnNo'] = eCN ; 
            excelRows[i]['accountNo'] = "{{session('uid')}}" ; 
            excelRows[i]['srcWarehouseID'] = "{{session('warehouseCode')}}" ; 

            if(excelRows[i]['actualWeight'] < 0.1)
            {
                validData = false ;
            }


            if(excelRows[i]['pc'] < 1)
            {
                validData = false ;
            }

            var validLabel = ""

            if(validData)
            {
                validLabel = "<span class='label label-success pull-left'>valid</span>"
            }else
            {
                validLabel = "<span class='label label-danger pull-left'>invalid</span>"


                show_danger("Invalid import data , please amend the excel file and import again.<a href='{{ url('/public_customer/shipment_import') }}'>Click to Continue</a>")
                isValidImport = false;

            }

            var actionEditOrViewOnly = "<button data-cn="+excelRows[i]['cnNo']+"  class='btn btn-warning view-button'><i class='fa fa-pencil'></i></button>&nbsp"
            var printButton = "<button   data-cn="+excelRows[i]['cnNo']+" class='btn btn-info print-button'><i class='fa fa-print'></i></button>"



            $('#import-table').append("<tr class=' excel-data item"+excelRows[i]['cnNo']+"'>"+
                                                                                "<td>"+(i+1)+"</td>"+
                                                                                "<td>"+excelRows[i]['accountNo']+"</td>"+
                                                                                "<td>"+excelRows[i]['cnNo']+"</td>"+
                                                                                "<td>"+excelRows[i]['shipperName']+"</td>"+
                                                                                "<td>"+excelRows[i]['consigneeName']+"</td>"+
                                                                                "<td>"+excelRows[i]['pc']+"</td>"+
                                                                                "<td>"+excelRows[i]['actualWeight']+"</td>"+
                                                                                "<td>"+validLabel+"</td>"+
                                                                                "<td>"+actionEditOrViewOnly+printButton+"</td>"+
                                                                                "</tr>");




            ajaxData = (JSON.stringify({"waybill":excelRows[i],"babyCodes":[]}))
            waybillArray.push(ajaxData);

        
        }

        if(isValidImport)
            {
                ImportAjax(waybillArray)
            }

        
       

    }

    function ImportAjax(waybillData)
    {
        $("#load-overlay").show();
        var count  = 0 ;

        for(data in waybillData)
        {

              var settings = {
                                    "async": true,
                                    "crossDomain": true,
                                    "url": apiPath+"/api/v2/courier/waybill",
                                    "method": "PUT",
                                    "headers": {
                                        "Authorization": bearerToken,
                                        "Content-Type": "application/json",
                                        "X-Requested-With":"XMLHttpRequest",
                                    },
                                    "processData": false,
                                    "data":waybillData[data],
                                    }
                            
                                $.ajax(settings).done(function (response) 
                                {

                                   count++;
                                   if(waybillData.length == count)
                                   {
                                      $("#load-overlay").hide();
                                       exportToExcel(excelRows)
                                       show_success("Waybill import successful <a href='{{ url('/public_customer/shipment_import') }}'>Click to Continue</a>")
                                   }
                                
                                }) .fail(function(xhr, status, error) {
                                        //Ajax request failed.
                                        var errorMessage =xhr.status + '- ' + xhr.statusText
                                                show_danger("Error on Import : "+errorMessage);      
                                    });

        }

        
    }


function exportToExcel(data)
    {
        //AVTIVE LOADER
        filename = 'SUCCESS EXCEL IMPORT - FROM CUSTOMER - {{session("uid")}}'
        const xls = new XlsExport(data, 'IMPORTED WAYBILL')
        xls.exportToXLS(filename+'.xls') 
        //HIDE LOADER
    }

    $(document).on('click', '.view-button', function() 
        {
             viewPrintWaybill($(this).data('cn'),"view")

        });

    $(document).on('click', '.print-button', function() 
    {
            viewPrintWaybill($(this).data('cn'),"print")
    });



    function viewPrintWaybill(cn,action)
    {
        const data = {
                        from: "" ,
                        to: "",
                        cnno:cn,
                        offset:0
                        };
            const searchParams = new URLSearchParams(data);

            var settings = {
                                    "async": true,
                                    "crossDomain": true,
                                    "url":apiPath+'/api/v2/courier/waybill?'+searchParams.toString(),
                                    "method": "GET",
                                    "headers": {
                                        "Authorization": bearerToken,
                                        "Content-Type": "application/json",
                                    },
                                    "processData": false
                                    }

                                    $.ajax(settings).done(function (response) 
                                    {

         
                                        if(response.length>0)
                                        {
                                            switch(action)
                                            {
                                                case "view":
                      
                                                                    window.open( 
                                                                        "{{ url('/public_customer/shipment_edit/') }}/"+response[0]["ID"], "_blank"); 
                                                                break;


                                                case "print":
                                                
                                                                    window.open( 
                                                                        "{{ url('/public_customer/shipment_print/') }}/"+response[0]["ID"], "_blank"); 
                                                                break;


                                            }
                                          
                                        }   
                                
                                }) .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 searching : "+errorMessage);    
                                                  
                                    });
    }


   


  
    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>