@extends('layouts.admin')

@section('content')
<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      
    </div>
    <div class="col-lg-12 col-md-12">
      <div class="card">
        <div class="card-header card-header-primary">
          <h4 class="card-title pull-left mr-auto">Customer</h4>
          <a href="{{ route('customer.add') }}" class="btn btn-primary btn-round pull-right ml-auto">Add Customer<div class="ripple-container"></div></a>
        </div>
        <div class="card-body table-responsive">
          @if ( session('message') )
            <div class="alert alert-success bg-gradient-success">
              {{ session('message') }}
            </div>
          @endif
          <table class="table table-hover" id="dataTable" style="width: 100%;" cellspacing="0">
            <thead class="text-primary">
              <th>Name</th>
              <th>Email</th>
              <th>Address</th>
              <th></th>
            </thead>
            <tbody>
              
            </tbody>
          </table>
        </div>
    </div>

  </div>
</div>
@endsection 

@section('style')
  <link href="{{ asset('assets/vendor/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
  <style type="text/css">
    .line-clamp {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;  
      overflow: hidden;
      width: 400px;
    }
  </style>
@endsection

@section('script')

    <script src="{{ asset('assets/vendor/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/datatables/dataTables.bootstrap4.min.js') }}"></script>

    <script type="text/javascript">
      
      $(document).ready(function() {
        
         var dataTable = $('#dataTable').DataTable({
              "ajax": {
                  "url": "{{route('customer.ajax')}}",
                  "type": "POST",
                  "data": dataTableValue
              },
              "paging": true,
              "processing": false,
              "serverSide": true,
              "columns": [
                  { "data": "name" },
                  { "data": "email" },
                  { "data": "address" },
                  { "data": "action" }
              ],
              "columnDefs": [
                { "orderable": false, "targets": 3 }
              ]
          });

      });

      function dataTableValue(data){

          data._token = '{{ csrf_token() }}';
          return data;
      }

      function refreshTable(){
          dataTable.ajax.reload();
      }
      

    </script>
@endsection