@extends('layouts.master')
@section('content')

          <div id='mainContent'>
            <div class="container-fluid">
                            <div class="row">
                <div class="col-md-12">
                  <div class="bgc-white bd bdrs-3 p-20 mB-20">
                    <h4 class="c-grey-900 mB-20">Payroll List</h4>
                    <table id="dataTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
                        <thead>
                          <tr>

                            <th>ID</th>

                            <th>Name</th>

                            <th>Status</th>
                            <th>Date Created</th>
                            <th>Date Modified</th>
                            <th>Action</th>

                          </tr>

                        </thead>
                        <tbody>
                        @foreach($data as $item)
                        <tr>

                            <td>{{$item->id}}</td>

                            <td>{{$item->short_description}}</td>

                            <td>{{$item->status}}</td>
                            <td>{{$item->created_by}}</td>
                            <td>{{$item->updated_at}}</td>
                            
                            <td>

            <button type="button" class="btn cur-p btn-primary btn-color">View</button>
            <button type="button" class="btn cur-p btn-success btn-color">Edit</button>
            <button type="button" class="btn cur-p btn-danger btn-color">Del</button>
          </td>
        
                          </tr>
                          @endforeach

</tbody>
                       </table>
                  </div>
                </div>
              </div>

          </div>

@endsection
@push('scripts')
<script type="text/javascript">
    $(function () {
          var table = $('#dataTable').DataTable({

              ajax: "{{ route('payrolls.index') }}",
              columns: [
            { data: 'id', name: 'id' },
            { data: 'short_description', name: 'short_description' },
            { data: 'status', name: 'status' },
            { data: 'created_at', name: 'created_at' },
            { data: 'updated_at', name: 'updated_at' }
        ]
    });
});
</script>
@endpush