@include('common.header')

<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 Option </b>Management</h3>    
                        <button type="button" class="btn btn-success pull-right fa fa-plus" id="add-charges" onClick="add_charges()"></button>
                            <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 table-hover" id="data-table" >
                            <thead>
                              <tr>
                                <th>ID</th>
                                <th>Manifest Code</th>
                                <th>Description</th>
                                <th>Responsible Station (Billed Station)</th>
                                <th>Excluded Charges</th>
                              </tr>
                            </thead>
                          <tbody>
                          </tbody>
                      </table>
                  </div>
  
                    
                <!-- /.box-body -->
            <!-- *******************************-->  
            </div>


        
          
    </div>

    <div id="addModal" class="modal fade" role="dialog">
                 <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">×</button>
                            <h4 class="modal-title"><b>Manage</b> Manifest option</h4>
                        </div>

                
                        <div class="modal-body">
                            <div>  
                                <div class="alert alert-warning alert-dismissible" id="add-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="add-invalid-warning-message"></p>
                            </div>
                            <form class="form-horizontal" role="form">

                             <div class="form-group">
                                    <label class="control-label col-sm-4" for="title" >ID:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control text" id="id-add" autocomplete="off" disabled>
                                        <!-- <p class="errorTitle text-center alert alert-danger hidden"></p> -->
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-sm-4 " for="title" >*Manifest Type:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control text " id="manifest_types-add" autocomplete="off" disabled>
                                        <!-- <p class="errorTitle text-center alert alert-danger hidden"></p> -->
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-sm-4" for="title" >*Description:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control text" id="manifest_types_description-add" autocomplete="off" >
                                        <!-- <p class="errorTitle text-center alert alert-danger hidden"></p> -->
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-sm-4" for="title" >*Billed Station Control:</label>
                                    <div class="col-sm-8">
                                            <select class="form-control " id="responsible_station-add">
                                            <option value="INT_SRC">BILL TO ORIGIN</option>
                                            <option value="INT_DEST">BILL TO DESTINATION</option>
                                            <option value="HUB">BILL TO HUB</option>
                                            </select>

                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-sm-4" for="title" >*Excluded Charge Code:</label>
                                    <div class="col-sm-7">
                                            <select class="form-control " id="charge_code-add">
                                            </select>
                                    </div>
                                    <div class="col-sm-1">
                                    <button type="button" class="btn btn-success pull-right fa fa-plus" onClick="excluded_charge_add()"></button>
                                    </div>
                                </div>

            

                                <table class="table table-condensed" id="excluded-charges-table-add">
                                    <thead>
                                            <tr>
                                            <th>Excluded Charge Code</th>
                                            <th></th>
                                            </tr>
                                    </thead>
                                    <tbody>   
                                    </tbody>

                                   
                                </table>

                            </form>
           
                            <div class="modal-footer">
                                <button type="button" class="btn btn-success save" >
                                    <span id="" class='glyphicon glyphicon-check'></span> SAVE
                                </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>


</section>

@include('common.footer')

<script>

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

$( document ).ready(function() {
  get_manifest_options();
  get_charges_type();

});


$( "#manifest_types_description-add" ).keyup(function() {
  let str = $( "#manifest_types_description-add" ).val();
  str = str.toLowerCase().replace(/ /g,"_");
  $( "#manifest_types-add" ).val(str);

});

function get_charges_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":""
                                    }
                            
                                    $.ajax(settings).done(function (responsedata) 
                                    {
                                        $("#load-overlay").hide();
                                        for(a in responsedata.data)
                                        {
                                        $("#charge_code-add").append(new Option(responsedata.data[a].charge_code, responsedata.data[a].charge_code));
                                        }

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

    function add_charges()
    {
        clear_data()
        $('#addModal').modal('show');
        $("#code-add").removeAttr("disabled"); 
    }

    function excluded_charge_add()
    {
        appendExcludedChargesTable($('#charge_code-add').val())
    }

    function appendExcludedChargesTable(chargesCode)
    {
        $('#excluded-charges-table-add').append("<tr class='formula-data'>"+     
                                "<td>"+chargesCode+"</td>"+
                                "<td><a id='DeleteButton'><i class='fa fa-trash-o'></i></a>"+
                                "</tr>");
    }

    function clear_data()
    {
      $('#excluded-charges-table-add tbody').empty() ;
      $(".text").val("");
    }

    $("#data-table").on("click", "#EditButton", function() {

        clear_data()
        $('#addModal').modal('show');
        $("#manifest_types_description-add").attr("disabled", "disabled");  
 
        var manifestOptionJSONData = JSON.parse($(this).closest("tr").find('.json-data').text());
        $("#id-add").val(parseFloat(manifestOptionJSONData.id)) 
        $("#manifest_types-add").val(manifestOptionJSONData.manifest_types)
        $("#manifest_types_description-add").val(manifestOptionJSONData.manifest_types_description)
        $("#responsible_station-add").val(manifestOptionJSONData.responsible_station).change()
        var excluded_charges = JSON.parse(manifestOptionJSONData.excluded_charges)
        for(a in excluded_charges)
        {
            appendExcludedChargesTable(excluded_charges[a])
        }
    });

    $("#excluded-charges-table-add").on("click", "#DeleteButton", function() {
    $(this).closest("tr").remove();
    });

    //model add click 
    $('.modal-footer').on('click', '.save', function() {

        var TableData = new Array();
        $('#excluded-charges-table-add tbody tr').each(function(row, tr){
            TableData[row]= $(tr).find('td:eq(0)').text();
        }); 

        var data = {"id":parseFloat($("#id-add").val()),
                    "manifest_types":$("#manifest_types-add").val(),
                    "manifest_types_description":$("#manifest_types_description-add").val(),
                    "responsible_station":$("#responsible_station-add").val(),
                    "excluded_charges":JSON.stringify(TableData)
                    }


        var httpRequestmethod = ""
        if($("#id-add").val() == "")
        {
            httpRequestmethod = "PUT";
        }else
        {
            httpRequestmethod = "PATCH";
        }
        var settings = {
                                    "async": true,
                                    "crossDomain": true,
                                    "url":billingApiPath+"/api/v1/courier/manifest_options",
                                    "method": httpRequestmethod,
                                    "headers": {
                                        "Authorization": billingApiToken,
                                        "Content-Type": "application/json",
                                        "X-Requested-With":"XMLHttpRequest"
                                    },
                                    "processData": false,
                                    "data": JSON.stringify(data)
                                    }
                            
                                    $.ajax(settings).done(function (responsedata) 
                                    {
                                        $("#load-overlay").hide();
                                        get_manifest_options()
                                        $('#addModal').modal('hide');

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

        
    });

    function get_manifest_options()
    {
        $("#load-overlay").show();
        $('#data-table tbody').empty() ;
      var settings = {
                                    "async": true,
                                    "crossDomain": true,
                                    "url":billingApiPath+"/api/v1/courier/manifest_options/search",
                                    "method": "POST",
                                    "headers": {
                                        "Authorization": billingApiToken,
                                        "Content-Type": "application/json",
                                        "X-Requested-With":"XMLHttpRequest"
                                    },
                                    "processData": false,
                                    }
                            
                                    $.ajax(settings).done(function (responsedata) 
                                    {
                                        $("#load-overlay").hide();
                                        render_table(responsedata.data)

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

    }

    function render_table(data)
    {
      for(i in data)
        {
          
          var excluded_charges = JSON.parse(data[i].excluded_charges)
          var excluded_charges_string = ""
          for(a in excluded_charges)
          {
           excluded_charges_string = excluded_charges_string+"<button type='button' class='btn bg-maroon margin btn-sm'>"+excluded_charges[a]+"</button> "
          }

          $('#data-table').append("<tr class='charge-data'>"+     
                                "<td>"+data[i].id+"</td>"+
                                "<td>"+data[i].manifest_types+"</td>"+
                                "<td>"+data[i].manifest_types_description+"</td>"+
                                "<td>"+data[i].responsible_station+"</td>"+
                                "<td>"+excluded_charges_string+"</td>"+
                                "<td style='display:none;'class='json-data'>"+JSON.stringify(data[i])+"</td>"+
                                "<td><a id='EditButton'><i class='fa fa-pencil-square'></i></a>"+
                                "</tr>");
        }
    }


    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>