@extends('HR.layout')

<link rel="stylesheet" href="https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap5.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

@section('content')

<div class="row align-items-center mb-3 mt-3 m-2">

    <div class="col d-flex justify-content-between align-items-center">

        <h5 class="mb-0">Salary Details</h5>

    </div>

</div>


<div class="card p-0 m-2">

    <div class="row mb-3 align-items-center p-3 g-2">

        <!-- Page Length -->
        <div class="col-1">

            <select id="pageLength" class="form-select">

                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>

            </select>

        </div>


        <!-- Search -->
        <div class="col-md-3 ms-auto">

            <input
                type="text"
                id="searchInput"
                class="form-control"
                placeholder="Search">

        </div>

    </div>


    <div class="table-responsive pt-0 pb-2">

        <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">

            <div class="justify-content-between dt-layout-table">

                <div class="justify-content-between align-items-center dt-layout-full table-responsive">

                    <table class="table" id="salaryTable">

                        <thead>

                            <tr>

                                <th class="text-nowrap">
                                    Sno
                                </th>

                                <th class="text-nowrap">
                                    Employee Name
                                </th>

                                <th class="text-nowrap">
                                    Employee ID
                                </th>

                                <th class="text-nowrap">
                                    Salary
                                </th>

                                <th class="text-nowrap">
                                    Created Date
                                </th>

                                <th class="text-nowrap">
                                    Paid Date
                                </th>

                                <th class="text-nowrap">
                                    Action
                                </th>

                            </tr>

                        </thead>

                        <tbody>
                        </tbody>

                    </table>

                </div>

            </div>

        </div>

    </div>

</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>

<script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.js"></script>


<script>

$(document).ready(function () {

    const table = $('#salaryTable').DataTable({

        processing: true,

        serverSide: true,

        ordering: false,

        lengthChange: false,

        pageLength: 10,

        ajax: {

            url: "{{ route('salary_table_data') }}",

            type: "GET",

            error: function (xhr, error, thrown) {

                console.log("Salary DataTable Error");

                console.log(xhr.responseText);

                console.log(error);

                console.log(thrown);

            }

        },

        columns: [

            {
                data: null,

                name: 'serial_number',

                orderable: false,

                searchable: false,

                render: function (
                    data,
                    type,
                    row,
                    meta
                ) {

                    return meta.row +
                           meta.settings._iDisplayStart +
                           1;

                }

            },


            {
                data: 'employee_name',

                name: 'employee_name',

                defaultContent: '-'

            },


            {
                data: 'user_id',

                name: 'user_id',

                defaultContent: '-'

            },


            {
                data: 'salary',

                name: 'salary',

                defaultContent: '-'

            },


            {
                data: 'Created_date',

                name: 'Created_date',

                defaultContent: '-'

            },


            {
                data: 'Paid_date',

                name: 'Paid_date',

                defaultContent: '-'

            },


            {
                data: 'action',

                name: 'action',

                orderable: false,

                searchable: false,

                defaultContent: '-'

            }

        ]

    });


    /*
    |--------------------------------------------------------------------------
    | Search
    |--------------------------------------------------------------------------
    */

    $('#searchInput').on('keyup', function () {

        table.search(this.value).draw();

    });


    /*
    |--------------------------------------------------------------------------
    | Page Length
    |--------------------------------------------------------------------------
    */

    $('#pageLength').on('change', function () {

        table
            .page
            .len(this.value)
            .draw();

    });

});

</script>

@endsection