@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>
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">SMS Station List</h3>
                        <button type="button" class="btn btn-success pull-right fa fa-plus" id="add-customer" onClick="add_station()"></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>Services</th>
                        <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>


               

     <!-- Modal form to add a post -->
        <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>Add</b> Message Station</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">Select Station:</label>
                                        <div class="col-sm-8">
                                            <select class="form-control select2" id="station-add" name="station-add" style="width: 100%;">
                                                <option value="">Select Station</option>
                                                     @foreach($warehouse_code as $warehouse)
                                                    <option value="{{ $warehouse->code }}">{{ $warehouse->stateShort }} - {{ $warehouse->stateLong }}</option>
                                                     @endforeach
                                            </select>
                                        </div>
                                </div>


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

</div>



    
                
</section>


@include('common.footer')

<script> 

function reInitializeTable()
{
  $(function () {
    $('#data-table').DataTable()
  })
}

$( document ).ready(function() 
{
    
    stations_list_get();
});

$('.select2').select2();


function add_station()
{
    $('#addModal').modal('show');
}


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

$(".delete-btn").click(function(){
  alert("The paragraph was clicked.");
});

$(document).on('click', '.delete-btn', function() {

    revoke_message_station($(this).data('warehousecode'))
});
    async function revoke_message_station(stationCode)
    {
        var dataArray = {};
        dataArray['warehouseCode'] = stationCode;
        dataArray['messenger']     = "sms" ;
        try {
            var stationMessengerServiceEndPoint =  messageApiPath+"/twirp/bbbmsg.v1.StationMessengerService/Revoke";
            const result = await syncAjaxCall(dataArray , stationMessengerServiceEndPoint, "POST",bearerToken)
            $('#addModal').modal('hide');
            stations_list_get()
        } catch (error) {
            add_model_show_warning(error.responseJSON.msg)
        }
    }

    async function register_message_station()
    {
        var dataArray = {};
        dataArray['warehouseCode'] = $("#station-add").val();
        dataArray['messenger']     = "sms"
        try {
            var stationMessengerServiceEndPoint =  messageApiPath+"/twirp/bbbmsg.v1.StationMessengerService/Register";
            const result = await syncAjaxCall(dataArray , stationMessengerServiceEndPoint, "POST",bearerToken)
            $('#addModal').modal('hide');
            stations_list_get()
        } catch (error) {
          
        }
     
        
    }

    async function stations_list_get()
    {
        $("#load-overlay").show();
        var setting = {};
            setting['pageLimit']          = 100;
            setting['includePageSize']    = true;
            setting['pageOffset']         = 0;
        var dataArray                     = {};
            dataArray['page']             = setting;

        var stationMessengerServiceEndPoint =  messageApiPath+"/twirp/bbbmsg.v1.StationMessengerService/Get";
        const result = await syncAjaxCall(dataArray , stationMessengerServiceEndPoint, "POST",bearerToken)
        tableData = result.results
        $("#data-table .station-data").remove();
        for(var key in tableData)
        {
            $('#data-table').append("<tr class='item"+tableData[key].warehouseCode+" station-data'>"+
                                                                "<td>"+tableData[key].warehouseCode+"</td>"+
                                                                "<td>"+tableData[key].messenger+"</td>"+
                                                                "<td><button type='button' class='delete-btn btn btn-danger' "+
                                                                " data-warehouseCode='"+tableData[key].warehouseCode+"'"+
                                                                " data-messenger='"+tableData[key].messenger+"')'><i class='fa fa-trash'></i></button></td>"+
                                                                "</tr>");
        }
        reInitializeTable()
        $("#load-overlay").hide();

    }



    function add_model_show_warning($msg)
    {
                    $("#add-invalid-warning-message").html($msg);
                    $("#add-invalid-warning").show();
                    $("#add-invalid-warning").delay(3000).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() {});
    }

</script>