@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">

    <div class="col-xs-12">
        <div class="box">
            <div class="box-header with-border">
            <h3 class="box-title">Station</h3>
            </div>
            <div class="box-body">
            <div class="row">

                <div class="col-xs-12">
                <select class="form-control select2" id="stations-selection" style="width: 100%;">                             
                </select>
                </div>

            </div>
            </div>

        </div>
    </div>

        
        <div>
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">Station Postocode List</h3>
                        <button type="button" class="btn btn-success pull-right fa fa-plus" id="add-postcode" onClick="add_postcode()"></button>
                    </div>
                            <!-- /.box-header -->
                    <div class="box-body table-responsive no-padding">
                        <table class="table table-bordered table-striped" id="data-table">
                        <thead>
                        <tr>
                        <th>Station Code</th>
                        <th>Covered Postcode</th>
                        <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>


        <div class="modal fade" id="add-postcode-modal" style="display: none;">
            <div class="modal-dialog">
                <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="station-title">Default Modal</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                    <textarea class="form-control" rows="5" id="postcodes-add-input" placeholder="57000,58000,59000,57000A,58000B,59000C,..." onkeypress="checkInputOnlyAllowUpperCaseNumberCommaBackSpace(event)"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onClick="add_postcode_save()">Save changes</button>
                </div>
                </div>
            </div>
        </div>

                
</section>


@include('common.footer')
@include('common.location_services_api_call')


<script> 
var dataTable       = ""
var allPostcodeList = []

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

$( document ).ready(function() {
    //getPostcodeByWarehouse("postcodeObjectPostcodeAsKey");
    get_station()
    initializeDataTable();
});

function checkInputOnlyAllowUpperCaseNumberCommaBackSpace(e) {
    console.log(e.keyCode)
    // 0 - 9
    if ((e.keyCode < 48 || e.keyCode > 90) )
    {
        //comma
        if ((e.keyCode != 44) ){
            event.returnValue = false;
            return false;
        }
    }
}     

function add_postcode()
    {
        $('#add-postcode-modal').modal('show');
        $("#postcodes-add-input").val('');
        var selectedStation = $("#stations-selection").val();
        $("#station-title").html("Add Postcode for Station <b>"+selectedStation+"<b>")
    }

function get_station()
{

    $("#stations-selection").empty();
    $.ajax({
                type:"GET",
                url:"{{ URL::to('/courier/stations_list_get') }}",
                data: {
                    '_token': "{{ csrf_token() }}",
                },
                success: function(responsedata) 
                {
                    if(responsedata.status=="SUCCESS")
                    {
                        $("#stations-selection").append("<option value=''>Select Station</option>")
                        for(data of responsedata.response)
                        {
                            $("#stations-selection").append("<option value='" + data.code + "'"+">"+data.code+" - "+data.state_long+"</option>")
                        }

                    }
                   
                },
            });
}

function initializeDataTable()
    {
        dataTable =  $('#data-table').DataTable( {
                                                  dom         : 'Bfrtip',
                                                  buttons     : 
                                                                [
                                                                'excelHtml5',
                                                                'csvHtml5',
                                                                'pageLength'
                                                                ],
                                                  "lengthMenu": [ 10, 25, 50, 100 ],
                                                  data        : [],
                                                  columns     : [
                                                                {data: "stationCode"},
                                                                {data: "postcode"},
                                                                {data: "action"}
                                                                ]
                                                });
       
    }

$('#stations-selection').on('select2:select', function (e) {
    //if select2 on select station mode not execute searchStationPostcode()
    if( $("#stations-selection").val() != ""){searchStationPostcode()}
});

async function searchStationPostcode()
{ 
    $("#load-overlay").show();
    var selectedStation = $("#stations-selection").val();
        allPostcodeList = await getPostcodeApiCallFunction("postcodeObjectWarehoseCodeAsKey")
        renderTable();
    $("#load-overlay").hide();
}

function renderTable()
{

    $("#load-overlay").show();
    $('#data-table').DataTable().clear().draw();

       var totalRowData    = [];
       var selectedStation = $("#stations-selection").val();
       var postcodes       = allPostcodeList[selectedStation];

           postcodes.forEach(function (postcodeObject, index) {
                    var editButton = '<button type="button" class="btn btn-danger btn-sm pull-left delete-btn"  '+
                                      'data-toggle="tooltip" data-original-title="Collapse" data-postcode="'+postcodeObject.postcode+'" ><i class="fa fa-trash"></i></button>'
                    var temRow     = {
                                        "stationCode": selectedStation,
                                        "postcode"   : postcodeObject.postcode,
                                        "action"     : editButton
                                    }
                        totalRowData.push(temRow);
        })

        dataTable.rows.add(totalRowData).draw(); 
        $("#load-overlay").hide();
}

async function add_postcode_save()
{
    var selectedStation = $("#stations-selection").val();
    var addedPostCode   = $("#postcodes-add-input").val()
    var postcodeList    = addedPostCode.replace(/\s/g, '').replace(/\n/g, '').split(",");
        //remove duplicated postcode
    let uniquepostcodeList = [...new Set(postcodeList)];
        //remove empty array
        uniquepostcodeList = uniquepostcodeList.filter(Boolean);

    var data = {warehouseCode: selectedStation,postcodes: []}

    uniquepostcodeList.forEach(function (postcode, index) {
    data.postcodes.push({"postcode":postcode })
    })

    try {
        const addResult = await syncAjaxCall(data,RpcApiPath+"/api/rpc/bbb.v4.LocationService/RegisterPostcode","POST",bearerToken);
        Swal.fire({position: 'top-end',icon: 'success',title: 'Postcode Added',showConfirmButton: false,timer: 1000})
        }
        catch(err) {
        Swal.fire({ title: "Postcode Error", text: err.message+" contact system administrator", icon: "error", confirmButtonColor: "#5156be" });
        }

        $('#add-postcode-modal').modal('hide');
        searchStationPostcode()
}

async function delete_postcode_save(postcode){
    var selectedStation = $("#stations-selection").val();
    var dataBody = {
                        "warehouseCode": selectedStation,
                        "postcodes": [
                                        {
                                            "postcode": postcode.toString()
                                        }
                                     ]
                  }

    try {
    const addResult = await syncAjaxCall(dataBody,RpcApiPath+"/api/rpc/bbb.v4.LocationService/DeletePostcode","POST",bearerToken);
    Swal.fire({position: 'top-end',icon: 'success',title: 'Postcode Deleted',showConfirmButton: false,timer: 1000})
    }
    catch(err) {
    Swal.fire({ title: "Postcode Error", text: err.message+" contact system administrator", icon: "error", confirmButtonColor: "#5156be" });
    return
    }

}

    $('#data-table').on('click', '.delete-btn', function() {
    delete_postcode_save($(this).data('postcode'))
    $('#data-table').DataTable().rows($(this).parents('tr')).remove().draw();
    });

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

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

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

</script>