@extends('template')
@section('main')
<main id="site-content" role="main" ng-controller="cancel_reservation">
  @include('common.subheader') 
  <div class="container my-4 my-md-5">
     <div class="row">
        <div class="col-12 col-md-3 side-nav">
          @include('common.sidenav')
        </div>
        <div class="col-12 col-md-9 mt-3 mt-md-0">    
          <h1 class="mb-4">
           {{ trans('messages.header.employee_list') }}
          </h1>
          <div id="EmployeeTable" class="row table-responsive"> 
           <table class="table table-bordered yajra-datatable" >
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Email</th>
                    <th>Contact</th>
                    <th>Property Name</th>
                    <th>Status</th>
                    <th>Created at</th>              
                </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
          </div>
        </div>
</div>
   
</div>


</main>
@stop

@push('scripts')
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
  <link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
  <style>
    div.dataTables_wrapper div.dataTables_length select {
      width: auto !important;
      display: inline-block !important;
    }
    .selectboxit-container {  
      display: none !important;
    }
  </style>
    <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
      $('.yajra-datatable').dataTable().fnDestroy();
      employee_datatable();
   
  });

  function employee_datatable()
  {
    var table = $('.yajra-datatable').DataTable({
        processing: true,
        serverSide: true,

        ajax:  {
            url: "{{ route('employees-datatable') }}",
            type: 'GET',
        },
        columns: [
              {data: 'id', name: 'id'},
              {data: 'employee_firstname', name: 'employee_firstname'},
              {data: 'employee_lastname', name: 'employee_lastname'},
              {data: 'employee_email', name: 'employee_email'},
              {data: 'employee_contact', name: 'employee_contact'},
              {data: 'name', name: 'name'},
              {data: 'status', name: 'status'},
              {data: 'created_at', name: 'created_at'},
              
        ]
      });
  }
</script>
@endpush