@include('common.header')
<style type="text/css">

.tableFixHead {
        overflow-y: auto;
        height: 600px;
      }
      .tableFixHead thead th {
        position: sticky;
        top: 0;
      }
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
        padding: 8px 16px;
        border: 1px solid #ccc;
      }
      th {
        background: #eee;
      }

</style>

<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-md-12">
            <div class=" box box-default">
                    <div class="box-header with-border">
                        <h3 class="box-title"><b>Account Setting </b>Management</h3>    
                            <div class="box-tools pull-right">
                                        <div style="width: 370px;">
                            </div>
                    </div>
                    </div>
                    <!-- /.box-header -->
                <div class="box-body table-responsive no-padding">
                                <table class="table" >
                                  
                                    
                                    <tr>
                                        <td><b>Station Selection :</b></td>
                                        <td>
  
                                                <select class="form-control select2" id="src-station" style="width: 100%;">

                                                </select>
 
                                   
                                        <td><b>Inbound / OutBound</b></td>
                                        <td>
                                      
                                                <select class="form-control select2" id="in-out-selection" style="width: 100%;">
                                                    <option value="outbound" selected>Outbound</option>
                                                    <option value="inbound">Inbound</option>
                                                </select>


                                        <td><button type="button" class="btn btn-block btn-success" onclick="search()">Search</button></td> 
                                     
                                    </tr>

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

        <div class="col-md-12">
          <div class="box box-warning">
            <div class="box-header">
              <div class="box-tools">
              </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding ">
                    <div class="tableFixHead">
                        <table class="table table-striped table-hover" id="data-table" >
                            <thead>
                            <tr>
                            <th>Origin</th>
                            <th>Destination</th>
                            <th>Charges <input type="checkbox" id="checkAll" ></th>
                            </tr>
                            </thead>
                            <tbody>
                        </tbody>
                        </table>
                    </div>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>


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

        
          
    </div>


</section>

@include('common.footer')

<script>

var shippingCharges = []; 
var shippingPoints = [];
var chargeType = [];

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

var stationCode = "";
var routeMode = ""

$( document ).ready(function() {
    get_station();


 
});



function reinitializeCheckBox()
{   //because check all box is dynamic hence it need reinitialize 
    //check all already set with unique id="checkAllID_C-Deliver"
    //to perform check all action on click we replace the ID -> class name
    //<input type="checkbox" id="checkAllID_C-DELIVERY"> click
    //all below will checked , if with class="check_box_C-DELIVERY"
    //<input type="checkbox" name="charges" class="check_box_C-DELIVERY">
    $('input[id^="checkAllID_"]').click(function()
        {
                var checkAllTarget = $(this).attr("id").replace("checkAllID_","check_box_");
                $('.'+checkAllTarget).prop('checked', this.checked);  
        });

}





function search()
{
    $("#save-button").prop('disabled', false); 
    $("#data-table thead").empty();
    $("#data-table tbody").empty();
    $("#load-overlay").show();
    shippingCharges = [];
    shippingPoints = [];
    chargeType = [];

    stationCode = $('#src-station').val() ; 
    routeMode = $('#in-out-selection').val();

    switch (routeMode)
    {
        case "outbound":

            get_shipping_charges(stationCode,"");
        break;

        case "inbound":

            get_shipping_charges("",stationCode);
        break;

    }
}

function get_station()
{

    $("#src-station").empty();
    $.ajax({
                type:"GET",
                url:"{{ URL::to('/courier/stations_list_get') }}",
                data: {
                    '_token': "{{ csrf_token() }}",
                },
                success: function(responsedata) 
                {
                    if(responsedata.status=="SUCCESS")
                    {
                        for(data of responsedata.response)
                        {

                            $("#src-station").append("<option value='" + data.code + "'"+
                                                  ">"+data.code+" - "+data.state_long+"</option>")
                        }

                    }
                   
                },
            });
}



 function get_shipping_charges(src,dest)
    {

        var settings = {
                                    "async": true,
                                    "crossDomain": true,
                                    "url":billingApiPath+"/api/v1/courier/shipping_charges/bystation/search",
                                    "method": "POST",
                                    "headers": {
                                        "Authorization": billingApiToken,
                                        "Content-Type": "application/json",
                                        "X-Requested-With":"XMLHttpRequest"
                                    },
                                    "processData": false,
                                    "data": JSON.stringify({"src":src,"dest":dest})
                                    }
                            
                                    $.ajax(settings).done(function (responsedata) 
                                    {
                                        shippingCharges = shippingCharges.concat(responsedata);
                                        get_shipping_point(src,dest)

                                    }) .fail(function(xhr, status, error) {
                                        //Ajax request failed.
                                        var errorMessage =xhr.status + '- ' + xhr.statusText
                                                $("#load-overlay").hide(); 
                                                show_danger("Error on Search : "+errorMessage);    
                                                  
                                    });     

                                     

    }

     function get_shipping_point(src,dest)
    {

        var settings = {
                                    "async": true,
                                    "crossDomain": true,
                                    "url":billingApiPath+"/api/v1/courier/shipping_point/search",
                                    "method": "POST",
                                    "headers": {
                                        "Authorization": billingApiToken,
                                        "Content-Type": "application/json",
                                        "X-Requested-With":"XMLHttpRequest"
                                    },
                                    "processData": false,
                                    "data": JSON.stringify({"src":src,"dest":dest})
                                    }
                            
                                    $.ajax(settings).done(function (responsedata) 
                                    {
                                         shippingPoints = shippingPoints.concat(responsedata.data);
                                         get_charge_type()

                                    }) .fail(function(xhr, status, error) {
                                        //Ajax request failed.
                                        var errorMessage =xhr.status + '- ' + xhr.statusText
                                                $("#load-overlay").hide(); 
                                                show_danger("Error on Search : "+errorMessage);    
                                                  
                                    });                    

    }

    function get_charge_type()
    {

        var settings = {
                                    "async": true,
                                    "crossDomain": true,
                                    "url":billingApiPath+"/api/v1/courier/charges_type/search",
                                    "method": "POST",
                                    "headers": {
                                        "Authorization": billingApiToken,
                                        "Content-Type": "application/json",
                                        "X-Requested-With":"XMLHttpRequest"
                                    },
                                    "processData": false,
                                    "data": JSON.stringify({"charge_code":"","charge_description":""})
                                    }
                            
                                    $.ajax(settings).done(function (responsedata) 
                                    {
                                         chargeType  = chargeType.concat(responsedata.data);
                                         grouping_shipping_point_with_charges()

                                    }) .fail(function(xhr, status, error) {
                                        //Ajax request failed.
                                        var errorMessage =xhr.status + '- ' + xhr.statusText
                                                $("#load-overlay").hide(); 
                                                show_danger("Error on Search : "+errorMessage);    
                                                  
                                    });            

    }

    function grouping_shipping_point_with_charges()
    {   
        
      process_charges_group_by_shipping_point(shippingCharges)
    

      var selectAllButton ;

      for(i in chargeType)
        {
            selectAllButton = selectAllButton + "<th><input type='checkbox' id='checkAllID_"+chargeType[i].charge_code+"'><br><small class='label label-primary '>"+chargeType[i].charge_code+"</small></th>"

        }

          $('#data-table thead').append("<tr>"+     
                            "<th>Src</th>"+
                            "<th>Dest</th>"+
                            selectAllButton+                 
                            "</tr>");

    

    if($('#in-out-selection').val() == "outbound")
    {
        //sort the shipping point asscending order by dest code
        shippingPoints = sortByKey(shippingPoints,"dest") ;
    }else
    if($('#in-out-selection').val() == "inbound")
    {    
        //sort the shipping point asscending order by src code
        shippingPoints = sortByKey(shippingPoints,"src") ;
    }

        
      for(i in shippingPoints)
      {
        var charges = ""
        for(a in chargeType)
        {

            var hadChargeInShippingPoint = false;
            var shippingChargesID = 0;

            //compare the shipping charges VS the shipping point and charges type 
            // if the charges is exis in this shipping point checked the check box
            for(c in shippingCharges)
            {   
                if(shippingCharges[c].chargesTypeID ==  chargeType[a].id && shippingCharges[c].shippingPointID ==  shippingPoints[i].id)
                { 
                    hadChargeInShippingPoint = true ;
                    shippingChargesID = shippingCharges[c].shippingChargesID ; 
                    break;
                }
        
            }

                var checkBoxValue = {"shippingPointID":shippingPoints[i].id,"chargesTypeID":chargeType[a].id,"billedAccountNo":"","id":shippingChargesID}

                if( hadChargeInShippingPoint)
                    {
                        charges = charges + '<td><input type="checkbox" name="charges" class="check_box_'+chargeType[a].charge_code+'" value='+JSON.stringify(checkBoxValue)+' checked></td>'
                    }else
                    {
                        charges = charges + '<td><input type="checkbox" name="charges" class="check_box_'+chargeType[a].charge_code+'" value='+JSON.stringify(checkBoxValue)+' ></td>'
                    }
                
        }


        $('#data-table').append("<tr class='charge-data'>"+     
                            "<td>"+shippingPoints[i].src+"</td>"+
                            "<td>"+shippingPoints[i].dest+"</td>"+
                            charges+                 
                            "</tr>");


      }
      reinitializeCheckBox();

      $("#load-overlay").hide();


                 
    }

    function ajaxSaveData()
    {
        $("#load-overlay").show();
        var dataArray = []
                            $("input:checkbox[name=charges]:checked").each(function(){
                                dataArray.push(JSON.parse($(this).val()));
                            });

        switch (routeMode)
                {
                    case "outbound":
                        var finalArray = {"src":stationCode,
                                                "shippingCharges":dataArray}
                    break;

                    case "inbound":

                        var finalArray = {"dest":stationCode,
                                                "shippingCharges":dataArray}
                    break;

                }

                      

        var settings = {
                                    "async": true,
                                    "crossDomain": true,
                                    "url":billingApiPath+"/api/v1/courier/shipping_charges/add",
                                    "method": "POST",
                                    "headers": {
                                        "Authorization": billingApiToken,
                                        "Content-Type": "application/json",
                                        "X-Requested-With":"XMLHttpRequest"
                                    },
                                    "processData": false,
                                    "data": JSON.stringify(finalArray)
                                    }
                            
                                    $.ajax(settings).done(function (responsedata) 
                                    {
                                        $("#load-overlay").hide();
                                        show_success("Charges Saved");
                                        $("#save-button").prop('disabled', true); 

                                    }) .fail(function(xhr, status, error) {
                                        //Ajax request failed.
                                        var errorMessage =xhr.status + '- ' + xhr.statusText
                                                $("#load-overlay").hide(); 
                                                show_danger("Error on Search : "+errorMessage);    
                                                  
                                    });            



    }

    function process_charges_group_by_shipping_point(allItemsArray)
    { 
    
        var uniqueNo = [];
        var Final_Array = [];
        
        for(var key in allItemsArray)
        {
          if(uniqueNo.indexOf(allItemsArray[key].shippingPointID) >= 0)
          {
            var index = uniqueNo.indexOf(allItemsArray[key].shippingPointID);
            Final_Array[index][allItemsArray[key].shippingPointID].push(allItemsArray[key])
          }else
          {
            var tem={};
            tem[allItemsArray[key].shippingPointID]=Array(allItemsArray[key]);
            Final_Array.push(tem); 
            uniqueNo.push(allItemsArray[key].shippingPointID)
          }
        }

        var processArray = []
        for(i in Final_Array)
        {
            
            processArray = processArray.concat(Final_Array[i][Object.keys(Final_Array[i])])
        }

        processArray = sortByKey(processArray,"shippingPointID") ;
        return processArray ;
    }



    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(5000).hide(0, function() {});
    }

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

    function sortByKey(array, key) 
    {
      return array.sort(function(a, b) {
          var x = a[key]; var y = b[key];
          return ((x < y) ? -1 : ((x > y) ? 1 : 0));
      });
    }   

    



</script>