@extends('layouts.admin')
@section('page-title')
Testimonials
@endsection

@section('content')


<div class="row">
    <div class="col-md-12">
        <div class="text-right">
            <button type="button" class="btn btn-primary addBtn" >
                Add New
            </button>
        </div>
        <br />
        <div class="card">
            <div class="card-body">                
                <div class="">
                    <table class="table" id = "gridView">
                        <thead class="thead-light" > 
                            <th></th>                           
                            <th>Customer</th>
                            <th>Description</th>
                            <th>Ratings</th>                          
                            <th width= "12%">Action</th> 
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalHeaderText">Add New Testimonial</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form method="POST" action="" enctype="multipart/form-data" >
            @csrf
            <input type="hidden" id="pkid" name="id" value="0" />
            <div class="modal-body">
            <div class="form-group">
                    <label for="logo">Customer</label>
                    <input type="text" id = "txtCustomer" name="customer" class="form-control" required  />
                </div> 
                <div class="form-group">
                <label for="description">Description</label>
                <textarea id="description" name="description" rows="4" cols="50" class="form-control" required></textarea>
                    
                </div>               
                <div class="form-group">
                    <label for="ratings">ratings</label>
                    <select name="ratings" id="ddlRatings"  class="form-control">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </div>              
                <div class="form-group">
                    <div class="custom-file">
                    <label for="logo">Photo</label><br>
                    <input type="file" name="photo" id="customFile" class="custom-file-input">
                    <label class="custom-file-label" for="customFile" id = "lblFileUpload">Choose file for Customer photo</label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </form>
      </div>
    </div>
  </div>


@endsection

@push('custom-js-scripts')

<script type="text/javascript">

    $(document).ready(function () {
        
        table =  $('#gridView').DataTable({
            processing: true,
            serverSide: true,
            order: [],
            ajax: "{{ url('/admin/testimonials') }}",
            columns: [
                {data: 'photo', name: 'photo', orderable: false, searchable: false},                
                {data: 'customer', name: 'customer'},
                {data: 'description', name: 'description'},
                {data: 'ratings', name: 'ratings'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
                ],
        });  
    });
       

    $('body').on('click', '.addBtn', function () {
        $("#pkid").val(0);       
        $("#txtCustomer").val('');
        $("#modalHeaderText").text('Add New Testimonial');
        $('#AddModal').modal('show');
    });

    $('body').on('click', '.btnEdit', function () {
        var pkid = $(this).data('id');
        $("#pkid").val(pkid);
        var row = $(this).closest("tr");        
        $("#txtCustomer").val(row.find("td:eq(1)").text());
        $("#description").val(row.find("td:eq(2)").text());
        $("#ddlRatings").val(row.find("td:eq(3)").text());
        
        $("#modalHeaderText").text('Edit Testimonial')
        $('#AddModal').modal('show');
    });

    function Delete(id){
    if (confirm("Are you sure to delete?")) {
        event.preventDefault(); 
        document.getElementById('delete-form-' + id).submit();
    }
    return false;
   }

   $(document).on('change','#customFile' , function(){
        var fileName = this.value;
        var lastRowIndex = fileName.lastIndexOf('\\');
        fileName = fileName.substring(lastRowIndex + Number(1), fileName.length);
        $("#lblFileUpload").html(fileName);
    });
</script>
@endpush