@extends('layouts.app')

@section('content')
<div class="card">
 <div class="card-header">
            <div class="row align-items-center">
                <div class="col">
                    <h5 class="mb-0">Employee Gratuity</h5>
                </div>
                <div class="col-auto">
                    <a href="{{ route('core.gratuities.create') }}" class="btn btn-primary btn-sm">
                        Add Gratuity
                    </a>
                </div>
            </div>       
        </div>
<div class="card-body">
<table class="table table-bordered yajra-datatable w-100" id="gratuityTable">
<thead>
<tr>
    <th>Emp No (Prev)</th>
    <th>Name (Prev)</th>
    <th>Emp No (Curr)</th>
    <th>Name (Curr)</th>
    <th>Date</th>
    <th>Gratuity Date</th>
    <th>Remarks</th>
    <th>Active</th>
    <th width="80">Action</th>
</tr>
</thead>
</table>
</div>
</div>
@endsection

@section('scripts')
<script>
$('#gratuityTable').DataTable({
    processing: true,
    serverSide: true,
    ajax: "{{ route('core.gratuities.index') }}",
      dom:
        "<'row mb-3 align-items-center'<'col-md-6'l><'col-md-6 d-flex justify-content-end'f>>" +
        "<'table-responsive'tr>" +
        "<'row mt-3 align-items-center'<'col-md-6'i><'col-md-6 d-flex justify-content-end'p>>",

        language: {
        search: "",
        searchPlaceholder: "Search gratuities...",
        lengthMenu: "Show _MENU_ entries",
        info: "Showing _START_–_END_ of _TOTAL_ gratuities"
        },
    columns: [
        { data: 'prev_no' },
        { data: 'prev_name' },
        { data: 'curr_no' },
        { data: 'curr_name' },
        { data: 'date' },
        { data: 'gratuity_date' },
        { data: 'remarks' },
        { data: 'active' },
        { data: 'action' },
    ]
});
</script>
@endsection
