@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">3rd Party API Consumer List</h3>
                        <button type="button" class="btn btn-success pull-right fa fa-plus" id="add-customer" onClick="add_user()"></button>
                    </div>
                            <!-- /.box-header -->
                    <div class="box-body table-responsive no-padding">
                        <table class="table table-bordered table-striped" id="users-table" name = "users_table">
                        <thead>
                        <tr>
                        <th>ID</th>
                        <th>API CID</th>
                        <th>Name</th>
                        <th>Station</th>
                        <th>Scope</th>
                        <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>


               


    <!-- Modal form to edit a post -->
        <div>   
        <div id="editModal" 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>Users</b> Information</h4>
                        </div>

                
                        <div class="modal-body">
                            <div>  
                                <div class="alert alert-warning alert-dismissible" id="edit-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="edit-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" id="id-edit" 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">*UID:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="uid-edit" 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">*pasword:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="password-edit">
                                        <!-- <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">*Name:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="name-edit">
                                        <!-- <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">role:</label>
                                    <div class="col-sm-8">
                                        <select class="input-sm form-control" id="role-edit" name="role_edit">
                                        </select>
                                    </div>
                                </div>
                            </form>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-success update col-sm-2 pull-right" >
                                    <span id="" class='glyphicon glyphicon-check'></span> update
                                </button>
                                <!-- <button type="button" class="btn btn-warning" data-dismiss="modal">
                                    <span class='glyphicon glyphicon-remove'></span> Close
                                </button> -->
                                <br>
                                <br>
                                <br>
                                <br>
                                <br>
                                    <div>
                                        <label class="control-label col-sm-4 delete" for="title">Enter ID to delete:</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="id-delete-confirm">
                                                <!-- <p class="errorTitle text-center alert alert-danger hidden"></p> -->
                                            </div>
                                                <button type="button" class="btn btn-danger delete col-sm-2"  id="delete-btn" disabled>
                                                <i class="fa fa-trash-o"></i> Delete
                                                </button>
                                    </div>
                            </div>
                        </div>
                    </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> Customer</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>

                                <div class="form-group">
                                        <label class="control-label col-sm-4" for="title">Customer Account:</label>
                                        <div class="col-sm-8">
                                            <div class="overlay" id="uid_add_spin" hidden>
                                            <i class="fa fa-refresh fa-spin"></i>
                                            </div>
                                            <select class="form-control select2" id="uid-add" name="uid-add" style="width: 100%;">
                                                <option value="">Select Customer</option>
                                            </select>
                                        </div>
                                </div>

                                 <div class="form-group">
                                    <label class="control-label col-sm-4" for="title">*Admin Security Token:</label>
                                    <div class="col-sm-8">
                                        <!-- <p class="errorTitle text-center alert alert-danger hidden"></p> -->
                                        <textarea class="form-control" rows="3" id="token-add" placeholder=""></textarea>
                                    </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> 

var apiPath = "{{$api_path}}";

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

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

});

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

$(document).on('focus', '.select2', function (e) {
if (e.originalEvent) {
    $(this).siblings('select').select2('open');    
} 
});

//detect warehouse select2 change even
$('#station-add').on('select2:select', function (e) 
{
    $("#uid_add_spin").show();
    $("#uid-add").empty();
    $.ajax({
                type:"POST",//or POST
                url:"{{ URL::to('/hq/hq_consumer_register_search/get_all_customer_by_warehouse') }}"+"/"+$("#station-add").val(),
                data: {
                    '_token': "{{ csrf_token() }}",
                },
                success: function(responsedata) 
                {
                    if(responsedata.status=="SUCCESS")
                    {

                        for(data of responsedata.response)
                        {
                            console.log(data.account_no);
                            $("#uid-add").append("<option value='" + data.account_no + "'"+
                                                  " data-account_no='"+data.account_no+"'"+
                                                  " data-address='"+data.address+"'"+
                                                  " data-contact_name='"+data.contact_name+"'"+
                                                  " data-contact_number='"+data.contact_number+"'"+
                                                  " data-name='"+data.name+"'"+
                                                  " data-postcode='"+data.postcode+"'"+
                                                  " data-state_long='"+data.state_long+"'"+
                                                  " data-warehouse_code='"+data.warehouse_code+"'"+
                                                  ">"+data.account_no+" - "+data.name+"</option>")
                        }
                      //console.log(responsedata.response)
                      $("#uid_add_spin").hide();
                    }
                   
                },
            });
    

});


//validate delete ID
$('#id-delete-confirm').keyup(function (e) {
    
    if ($('#id-delete-confirm').val() == $('#id-edit').val() )
    {
        $("#delete-btn").prop('disabled', false);   
    }else{
        $("#delete-btn").prop('disabled', true);   
    }

});




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

   



      // Edit a post
      $(document).on('click', '.edit-modal', function() {

            $('.modal-title').text('Edit');
            $('#id-edit').val($(this).data('id'));
            $('#uid-edit').val($(this).data('uid'));
            $('#name-edit').val($(this).data('name'));
            $('#role-edit').val($(this).data('role'));
            document.getElementById('id-delete-confirm').value = "";
            $("#delete-btn").prop('disabled', true);  
            $('#editModal').modal('show');
        });

        //model delete click 
        $('.modal-footer').on('click', '.delete', function() {
            $.ajax({
                type:"POST",//or POST
                url:"{{ URL::to('/users_add/user_delete') }}"+"/"+$("#id-edit").val(),
                data: {
                    '_token': "{{ csrf_token() }}",
        
                },
                success: function(responsedata) 
                {

                    if (responsedata.status=="ERROR")
                    {
                       var messages =""
                      
                        for(var value in responsedata.errors_messages )
                        {
                          messages += responsedata.errors_messages[value]+ '<br>';
                            
                        }
                        edit_model_show_warning(messages)

                    }

                    if(responsedata.status=="SUCCESS")
                    {
                        $('#editModal').modal('hide');
                        $("#users-table .user-data").remove();
                        consumers_list_get();
                    }
                   
                },
            });
        });


//model update click 
         $('.modal-footer').on('click', '.update', function() {
            $.ajax({
                type:"POST",//or POST
                url:apiPath+"/api/admin/v1/consumer/key",
                data: {
                    'cid': "{{ csrf_token() }}",
                    'name': $("#uid-edit").val(),
                    'scopes': $("#password-edit").val(),
                    'warehouse': $("#name-edit").val(),
                    'orgID': $("#role-edit").val(),
        
                },
                success: function(responsedata) 
                {

                    if (responsedata.status=="ERROR")
                    {
                       var messages =""
                      
                        for(var value in responsedata.errors_messages )
                        {
                          messages += responsedata.errors_messages[value]+ '<br>';
                            
                        }
                        edit_model_show_warning(messages)

                    }

                    if(responsedata.status=="SUCCESS")
                    {
                        $('#editModal').modal('hide');
                        $("#users-table .user-data").remove();
                        consumers_list_get();
                    }
                   
                },
            });
        });

//model add click 
$('.modal-footer').on('click', '.add', function() {
        
        
        var consumer = {};
        consumer['cid'] = $("#uid-add").val();
        consumer['name'] = $("#uid-add").children('option:selected').data('name');
        consumer['scopes'] = "[\"standard\"]" ;
        consumer['warehouse'] = $("#uid-add").children('option:selected').data('warehouse_code') ; 
        consumer['orgID'] = $("#uid-add").val() ;

        var settings = {
                    "async": true,
                    "crossDomain": true,
                    "url" :apiPath+"/api/admin/v1/consumer/key",
                    "method": "POST",
                    "headers": {
                        "Authorization":"Bearer "+$("#token-add").val(),
                        "X-Requested-With": "XMLHttpRequest",
                        "Content-Type": "application/json",
                    },
                    "processData": false,
                    "data": JSON.stringify(consumer)
                    }

                    $.ajax(settings).success(function (successResponse) 
                                        {
                                            $('#addModal').modal('hide');
                                            $("#users-table .user-data").remove();
                                            consumers_list_get();
                                            console.log(successResponse.key);
                                       
                                        }).error(function(jqXhr, json, errorThrown) {
                                            add_model_show_warning(jqXhr.responseText+ " ! <br> Please enter valid Admin Token ")
                                           console.log(jqXhr.responseText);
                                        })


       });

    

    function consumers_list_get()
    {
        $("#load-overlay").show();
        $.ajax({
                type:"GET",//or POST
                url:"{{ URL::to('/hq/hq_consumer_register_search/get_all_api_consumer') }}",
                success: function(responsedata) 
                {
                    if(responsedata.status=="SUCCESS")
                    {
                        $('#addModal').modal('hide');
                        $("#users-table .user-data").remove();
                        show_users_date(responsedata.response);
                    }
                    $("#load-overlay").hide();
                }
            });
    }

     function show_users_date(responsedata)
    {
        $("#users-table .user-data").remove();
                        for(var key in responsedata)
                                {
                                    $('#users-table').append("<tr class='item"+responsedata[key].id+" user-data'>"+
                                                                                        "<td>"+responsedata[key].id+"</td>"+
                                                                                        "<td>"+responsedata[key].cid+"</td>"+
                                                                                        "<td>"+responsedata[key].name+"</td>"+
                                                                                        "<td>"+responsedata[key].warehouse_code+"</td>"+
                                                                                        "<td>"+responsedata[key].scopes+"</td>"+
                                                                                        "<td><button type='button' class='edit-modal btn btn-warning' "+
                                                                                        " data-id='"+responsedata[key].id+"'"+
                                                                                        " data-uid='"+responsedata[key].uid+"'"+
                                                                                        " data-name='"+responsedata[key].name+"'"+
                                                                                        " data-role='"+responsedata[key].role+"')'><i class='fa fa-pencil'></i></button></td>"+
                                                                                        "</tr>");
                                }
                                reInitializeTable()
    }


    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() {});
    }

    // 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>