@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>Manifest Outbound Rule Management </b>(hide destination code)</h3><br>
                          <div class="form-group has-warning">
                            <label class="control-label" for="inputWarning">
                            After you check hide option , the selected station is not able to view the destination station code in manifest module
                            </label>
                          </div>      
                        
                            <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><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 style="width: 20px">Origin</th>
                            <th style="width: 20px">Destination</th>
                            <th>Hide All <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 = "save()" >SAVE</button>     
        </div>

        
          
    </div>


</section>

@include('common.footer')

<script>

var stationManifestOutboundRuleResult            = [];
var stationManifestOutboundHiddenStationCodeList = [];
var allAvailavleWarehouseCode                    = [];
var lastSelectedSrcWahouseCode                   = "";



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



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


 
});



function reinitializeCheckBox()
{ 
    $("#checkAll").click(function()
        {
                $('.hide_check_box').prop('checked', this.checked);  
        });
}





async function search()
{
  $("#load-overlay").show();

  $("#save-button").prop('disabled', false); 
  $("#data-table tbody").empty();
  stationManifestOutboundRuleResult            = [];
  stationManifestOutboundHiddenStationCodeList = [];
  lastSelectedSrcWahouseCode = ""
  lastSelectedSrcWahouseCode = $("#src-station").val();

  const searchResult                      = await syncAjaxCall("",billingApiPath+"/api/v1/courier/manifest_outbound/rule/show/hide_manifest_outbound_station_code/"+lastSelectedSrcWahouseCode,"POST",billingApiToken);
        stationManifestOutboundRuleResult = searchResult
        //if there is no search result ignore parse the meta data
        if(stationManifestOutboundRuleResult.rule_meta != undefined)
        {
          stationManifestOutboundHiddenStationCodeList = JSON.parse(stationManifestOutboundRuleResult.rule_meta)

        }
  renderTable()
}

function renderTable()
{

  allAvailavleWarehouseCode = sortByKey(allAvailavleWarehouseCode, "code")

  allAvailavleWarehouseCode.forEach(function (station, index) {

          var checkBox = ""
          if( stationManifestOutboundHiddenStationCodeList.includes(station.code))
          {
            checkBox ='<input type="checkbox" name="hide" class="hide_check_box" value='+index+' checked>'
          }else
          {
            checkBox ='<input type="checkbox" name="hide" class="hide_check_box" value='+index+'>'
          }

  $('#data-table').append("<tr class='charge-data'>"+   
                            "<td>"+lastSelectedSrcWahouseCode+"</td>"+    
                            "<td>"+station.code+"</td>"+  
                            "<td>"+checkBox+"</td>"+  
                            "</tr>");

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

}
async function save()
{                 
  $("#load-overlay").show();
          
  var selectedHiddenDest = []
  //find all the checked box
  $("input:checkbox[name=hide]:checked").each(function(){
    // get the checked box value , value is allAvailavleWarehouseCode[] index
    var index = $(this).val()
    //push the selected dest code to array
    selectedHiddenDest.push(allAvailavleWarehouseCode[index].code)
  });

  var saveData = {
                  "warehouse_code"     : lastSelectedSrcWahouseCode,
                  "hide_warehouse_code": selectedHiddenDest
                 }

  try {
    const saveResult  = await syncAjaxCall(saveData,
                                           billingApiPath+"/api/v1/courier/manifest_outbound/rule/hide_manifest_outbound_station_code",
                                           "POST",
                                           billingApiToken);
    show_success("Updated")
  } catch (error) {
    show_danger(error.responseText)
  }
  $("#load-overlay").hide();


}       

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")
                    {
                        allAvailavleWarehouseCode = responsedata.response;
                        for(data of responsedata.response)
                        {

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

                    }
                   
                },
            });
}



    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>