@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">Users 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>Created By</th>
                        <th>UID (User Login ID)</th>
                        <th>Name</th>
                        <th>Role</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">
                                        @foreach($roles as $role)
                                            <option value="{{ $role }}">{{ $role }}</option>
                                        @endforeach
                                        </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> System User</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">*UID:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="uid-add">
                                        <!-- <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-add">
                                        <!-- <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-add">
                                        <!-- <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-add" name="role_add">
                                        @foreach($roles as $role)
                                            <option value="{{ $role }}">{{ $role }}</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 () {
    $('#users-table').DataTable()
    
  })
}

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

});


//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();
                        users_list_get();
                    }
                   
                },
            });
        });


//model update click 
         $('.modal-footer').on('click', '.update', function() {
            $.ajax({
                type:"POST",//or POST
                url:"{{ URL::to('/users_add/user_create') }}"+"/"+$("#id-edit").val(),
                data: {
                    '_token': "{{ csrf_token() }}",
                    'uid': $("#uid-edit").val(),
                    'password': $("#password-edit").val(),
                    'name': $("#name-edit").val(),
                    'role': $("#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();
                        users_list_get();
                    }
                   
                },
            });
        });

//model add click 
$('.modal-footer').on('click', '.add', function() {
            $.ajax({
                type:"POST",//or POST
                url:"{{ URL::to('/users_add/user_create') }}",
                data: {
                    '_token': "{{ csrf_token() }}",
                    'uid': $("#uid-add").val(),
                    'password': $("#password-add").val(),
                    'name': $("#name-add").val(),
                    'role': $("#role-add").val(),
                },
                success: function(responsedata) 
                {

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

                    }

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

    

    function users_list_get()
    {
        $("#load-overlay").show();
        $.ajax({
                type:"GET",//or POST
                url:"{{ URL::to('/users_add/users_list_get') }}",
                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].created_by+"</td>"+
                                                                                        "<td>"+responsedata[key].uid+"</td>"+
                                                                                        "<td>"+responsedata[key].name+"</td>"+
                                                                                        "<td>"+responsedata[key].role+"</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>