@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">Customers List</h3>
                        <button type="button" class="btn btn-success pull-right fa fa-plus" id="add-customer" onClick="add_driver()"></button>
                    </div>
                            <!-- /.box-header -->
                    <div class="box-body table-responsive no-padding">
                        <table class="table table-bordered table-striped" id="customers-table" name = "customers_table">
                        <thead>
                        <tr>
                        <th>ID</th>
                        <th>Created By</th>
                        <th>Account No</th>
                        <th>Customer Name</th>
                        <th>Address</th>
                        <th>State</th>
                        <th>Postcode</th>
                        <th>Contact Name</th>
                        <th>Contact Number</th>
                        <th>Account Sharing</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>Customers</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">*Account No:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="account-no-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">*Customer Name:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="customer-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">*Address:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="address-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">State:</label>
                                    <div class="col-sm-8">
                                        <select class="input-sm form-control" id="state-edit" name="state_edit">
                                        @foreach($states as $state)
                                        @if(in_array(old('shipper_state'? $state : null),$states))
                                            <option value="{{ $state }}" selected>{{ $state }}</option>
                                        @else
                                            <option value="{{ $state }}">{{ $state }}</option>
                                        @endif
                                        @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-sm-4" for="title">Postcode:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="postcode-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">Contact Name:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="contact-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">Contact Number:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="contact-number-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">Account Sharing Option:</label>
                                    <div class="col-sm-8">
                                        <select class="input-sm form-control" id="share-edit" name="share_edit">
                                            <option value="private">private</option>
                                            <option value="public">public</option>
                                        </select>
                                    </div>
                                </div>
                             
                            </form>
                            <div class="modal-footer">
                              
                                <div>
                                    <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 col-sm-2 pull-right" data-dismiss="modal">
                                        <span class='glyphicon glyphicon-remove'></span> Close
                                    </button> -->
                                </div>
                                <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">*Account No:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="account-no-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">*Customer Name:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="customer-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">*Address:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="address-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">State:</label>
                                    <div class="col-sm-8">
                                        <select class="input-sm form-control" id="state-add" name="state_add">
                                        @foreach($states as $state)
                                        @if(in_array(old('shipper_state'? $state : null),$states))
                                            <option value="{{ $state }}" selected>{{ $state }}</option>
                                        @else
                                            <option value="{{ $state }}">{{ $state }}</option>
                                        @endif
                                        @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-sm-4" for="title">Postcode:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="postcode-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">Contact Name:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="contact-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">Contact Number:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="contact-number-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">Account Sharing Option:</label>
                                    <div class="col-sm-8">
                                        <select class="input-sm form-control" id="share-add" name="share_add">
                                            <option value="private">private</option>
                                            <option value="public">public</option>
                                        </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> 

//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 reInitializeTable()
{
  $('#customers-table').DataTable().order([1, 'asc']).draw(true);
}

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

});




    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'));
            $('#account-no-edit').val($(this).data('accountno'));
            $('#customer-name-edit').val($(this).data('name'));
            $('#address-edit').val($(this).data('address'));
            $('#state-edit').val($(this).data('statelong'));
            $('#postcode-edit').val($(this).data('postcode'));
            $('#contact-name-edit').val($(this).data('contactname'));
            $('#contact-number-edit').val($(this).data('contactnumber'));
            $('#share-edit').val($(this).data('visibility'));
            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('/customers_add/customer_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');
                        //$("#customers-table .customer-data").remove();
                        window.open("{{ URL::to('/customers_add') }}",'_self').close();

                    }
                   
                },
            });
        });


//model update click 
         $('.modal-footer').on('click', '.update', function() {
            $.ajax({
                type:"POST",//or POST
                url:"{{ URL::to('/customers_add/customer_create') }}"+"/"+$("#id-edit").val(),
                data: {
                    '_token': "{{ csrf_token() }}",
                    'account_no': $("#account-no-edit").val(),
                    'customer_name': $("#customer-name-edit").val(),
                    'address': $("#address-edit").val(),
                    'state': $("#state-edit").val(),
                    'postcode': $("#postcode-edit").val(),
                    'contact_name': $("#contact-name-edit").val(),
                    'contact_number': $("#contact-number-edit").val(),
                    'visibility':$("#share-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');
                        //$("#customers-table .customer-data").remove();
                        window.open("{{ URL::to('/customers_add') }}",'_self').close();

                    }
                   
                },
            });
        });

//model add click 
$('.modal-footer').on('click', '.add', function() {
            $.ajax({
                type:"POST",//or POST
                url:"{{ URL::to('/customers_add/customer_create') }}",
                data: {
                    '_token': "{{ csrf_token() }}",
                    'account_no': $("#account-no-add").val(),
                    'customer_name': $("#customer-name-add").val(),
                    'address': $("#address-add").val(),
                    'state': $("#state-add").val(),
                    'postcode': $("#postcode-add").val(),
                    'contact_name': $("#contact-name-add").val(),
                    'contact_number': $("#contact-number-add").val(),
                    'visibility':$("#share-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');
                        //$("#customers-table .customer-data").remove();
                        window.open("{{ URL::to('/customers_add') }}",'_self').close();
                    }
                   
                },
            });
        });

    

    function customers_list_get()
    {
        $("#load-overlay").show();
        $.ajax({
                type:"GET",//or POST
                url:"{{ URL::to('/customers_add/customers_list_get') }}",
                success: function(responsedata) 
                {
                    if(responsedata.status=="SUCCESS")
                    {
                        $('#addModal').modal('hide');
                        $("#customers-table .customer-data").remove();
                        show_drivers_date(responsedata.response);
                    }
                    $("#load-overlay").hide();
                }
            });
    }

     function show_drivers_date(responsedata)
    {
        $("#customers-table .customer-data").remove();
                        for(var key in responsedata)
                                {
                                    var visibilityLabel ;


                                    if(responsedata[key].visibility == "private")
                                    {
                                        visibilityLabel ='<span class="label label-danger pull-right">'+responsedata[key].visibility+' <i class="fa fa-fw fa-lock"></i></span>';
                                    }else
                                    {
                                        visibilityLabel ='<span class="label label-success pull-right">'+responsedata[key].visibility+'<i class="fa fa-fw fa-share-alt"></i></span>';
                                    }

                                   

                                    $('#customers-table').append("<tr class='item"+responsedata[key].id+" customer-data'>"+
                                                                                        "<td>"+responsedata[key].id+"</td>"+
                                                                                        "<td>"+responsedata[key].created_by+"</td>"+
                                                                                        "<td>"+responsedata[key].account_no+"</td>"+
                                                                                        "<td>"+responsedata[key].name+"</td>"+
                                                                                        "<td>"+responsedata[key].address+"</td>"+
                                                                                        "<td>"+responsedata[key].state_long+"</td>"+
                                                                                        "<td>"+responsedata[key].postcode+"</td>"+
                                                                                        "<td>"+responsedata[key].contact_name+"</td>"+
                                                                                        "<td>"+responsedata[key].contact_number+"</td>"+
                                                                                        "<td>"+visibilityLabel+"</td>"+
                                                                                        "<td><button type='button' class='edit-modal btn btn-warning' "+
                                                                                        " data-id='"+responsedata[key].id+"'"+
                                                                                        " data-accountno='"+responsedata[key].account_no+"'"+
                                                                                        " data-name='"+responsedata[key].name+"'"+
                                                                                        " data-address='"+responsedata[key].address+"'"+
                                                                                        " data-statelong='"+responsedata[key].state_long+"'"+
                                                                                        " data-postcode='"+responsedata[key].postcode+"'"+
                                                                                        " data-contactname='"+responsedata[key].contact_name+"'"+
                                                                                        " data-contactnumber='"+responsedata[key].contact_number+"'"+
                                                                                        " data-visibility='"+responsedata[key].visibility+"')'><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>