@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-md-8 col-md-offset-2">
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">Drivers List</h3>
                        <button type="button" class="btn btn-success pull-right fa fa-plus" id="add-driver" onClick="add_driver()"></button>
                    </div>
                            <!-- /.box-header -->
                    <div class="box-body table-responsive no-padding">
                        <table class="table table-hover" id="drivers-table" name = "drivers_table">
                        <thead>
                        <tr>
                        <th>ID</th>
                        <th>Driver Login User Name</th>
                        <th>Driver Name</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>Driver</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">Driver 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">Driver User Name (UID):</label>
                                    <label>Only allow Aa-Zz , 0-9 , _ ex: BTW_DRIVER01</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="driver-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="content">Password:</label>
                                    <div class="col-sm-8">
                                        <input type="password" class="form-control" id="password-edit"> 
                                        <p class="errorContent text-center alert alert-danger hidden"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-sm-4" for="content">Name:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="name-edit">
                                        <p class="errorContent text-center alert alert-danger hidden"></p>
                                    </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>Driver</b> Information</h4>
                        </div>

                        <div class="modal-body">
                        <div>  
                            <div class="alert alert-warning alert-dismissible" id="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="invalid-warning-message"></p>
                        </div>
                            
                            <form class="form-horizontal" role="form">
                            
                                <div class="form-group">
                                    <label class="control-label col-sm-4" for="title">Driver User Name (UID):</label>
                                    <label><font size="1 px">Only allow Aa-Zz , 0-9 , _ ex: BTW_DRIVER01</font></label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="driver-add" autofocus>
                                        <!-- <p class="errorTitle text-center alert alert-danger hidden"></p> -->
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-sm-4" for="content">Password:</label>
                                    <div class="col-sm-8">
                                        <input type="password" class="form-control" id="password-add"> 
                                        <p class="errorContent text-center alert alert-danger hidden"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-sm-4" for="content">Name:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="name-add">
                                        <p class="errorContent text-center alert alert-danger hidden"></p>
                                    </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> 

$( document ).ready(function() 
{
    
    drivers_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_driver()
    {
        $('#addModal').modal('show');
    }

   



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

            $('.modal-title').text('Edit');
            $('#id-edit').val($(this).data('id'));
            $('#driver-edit').val($(this).data('uid'));
            $('#password-edit').val('');
            $('#name-edit').val($(this).data('name'));
            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('/driver_add/driver_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');
                        $("#drivers-table .driver-data").remove();
                        drivers_list_get();
                    }
                   
                },
            });
        });


//model update click 
         $('.modal-footer').on('click', '.update', function() {
            $.ajax({
                type:"POST",//or POST
                url:"{{ URL::to('/driver_add/driver_create') }}"+"/"+$("#id-edit").val(),
                data: {
                    '_token': "{{ csrf_token() }}",
                    'uid': $("#driver-edit").val(),
                    'driver_password': $("#password-edit").val(),
                    'driver_name': $("#name-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');
                        $("#drivers-table .driver-data").remove();
                        drivers_list_get();
                    }
                   
                },
            });
        });

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

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

                    }

                    if(responsedata.status=="SUCCESS")
                    {
                        $('#addModal').modal('hide');
                        $("#drivers-table .driver-data").remove();
                        drivers_list_get();

                    }
                   
                },
            });
        });


    function drivers_list_get()
    {
        $.ajax({
                type:"GET",//or POST
                url:"{{ URL::to('/driver_add/drivers_list_get') }}",
                success: function(responsedata) 
                {
                    if(responsedata.status=="SUCCESS")
                    {
                        $('#addModal').modal('hide');
                        $("#drivers-table .driver-data").remove();
                        show_drivers_date(responsedata.response);
                    }
                }
            });
    }

     function show_drivers_date(responsedata)
    {
        $("#drivers-table .driver-data").remove();
                        for(var key in responsedata)
                                                        {
                                                            $('#drivers-table').append("<tr class='item"+responsedata[key].id+" driver-data'>"+
                                                                                        "<td>"+responsedata[key].id+"</td>"+
                                                                                        "<td>"+responsedata[key].uid+"</td>"+
                                                                                        "<td>"+responsedata[key].name+"</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+"')'><i class='fa fa-pencil'></i></button>"+
                                                                                        "</tr>");
                                                        }

                    
    }



    function show_warning($msg)
    {
                    $("#invalid-warning-message").html($msg);
                    $("#invalid-warning").show();
                    $("#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>