@extends('Admin.layout')

@section('content')

    {{-- PAGE HEADER --}}
    <div class="d-flex flex-row justify-content-between align-items-center mb-3 gap-2">

        <h3 class="mb-0 text-nowrap">
            Salary Management
        </h3>

    </div>


    {{-- MAIN CARD --}}
    <div class="card gold-management-card p-3">

        {{-- FILTERS --}}
        <div class="row g-2 align-items-center mb-4">

            {{-- PAGE LENGTH --}}
            <div class="col-6 col-sm-4 col-md-3 col-lg-1">

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

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

                </select>

            </div>


            {{-- SEARCH --}}
            <div class="col-12 col-sm-8 col-md-6 col-lg-4 ms-sm-auto">

                <input type="search"
                       id="salarySearch"
                       class="form-control"
                       placeholder="Search">

            </div>

        </div>


        {{-- TABLE --}}
        <div class="gold-table-wrapper table-responsive">

            <table id="salaryManagementTable"
                   class="table mb-0 w-100 text-nowrap">

                <thead>

                    <tr>

                        <th>SNO</th>

                        <th>EMPLOYEE NAME</th>

                        <th>SALARY MONTH</th>

                        <th>BASIC SALARY</th>

                        <th>PAYMENT STATUS</th>

                        <th>PAYMENT DATE</th>

                    </tr>

                </thead>

                <tbody></tbody>

            </table>

        </div>

    </div>


    {{-- DATATABLES CSS --}}
    <link rel="stylesheet"
          href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">


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


    {{-- DATATABLES JS --}}
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>


    <script>

        $(document).ready(function () {

            /* =========================
               SALARY DATA
            ========================== */

            const data = [

                {
                    id: 1,
                    employee_name: 'Arun Kumar',
                    salary_month: 'September 2026',
                    basic_salary: '₹25,000',
                    payment_status: 'Paid',
                    payment_date: '01-10-2026'
                },

                {
                    id: 2,
                    employee_name: 'Priya S',
                    salary_month: 'September 2026',
                    basic_salary: '₹30,000',
                    payment_status: 'Paid',
                    payment_date: '-'
                },

                {
                    id: 3,
                    employee_name: 'Rahul M',
                    salary_month: 'September 2026',
                    basic_salary: '₹28,000',
                    payment_status: 'Paid',
                    payment_date: '01-10-2026'
                },

                {
                    id: 4,
                    employee_name: 'Anitha R',
                    salary_month: 'September 2026',
                    basic_salary: '₹22,000',
                    payment_status: 'Paid',
                    payment_date: '02-10-2026'
                },

                {
                    id: 5,
                    employee_name: 'Suresh Kumar',
                    salary_month: 'September 2026',
                    basic_salary: '₹35,000',
                    payment_status: 'Paid',
                    payment_date: '-'
                },

                {
                    id: 6,
                    employee_name: 'Divya P',
                    salary_month: 'September 2026',
                    basic_salary: '₹27,500',
                    payment_status: 'Paid',
                    payment_date: '01-10-2026'
                }

            ];


            /* =========================
               DATATABLE
            ========================== */

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

                data: data,

                pageLength: 10,

                lengthChange: false,

                searching: true,

                ordering: true,

                order: [],

                info: true,

                autoWidth: false,

                dom: 'rtip',

                columns: [

                    {
                        data: null,

                        orderable: false,

                        searchable: false,

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

                            return meta.row + 1;

                        }
                    },

                    {
                        data: 'employee_name',

                        name: 'employee_name'
                    },

                    {
                        data: 'salary_month',

                        name: 'salary_month'
                    },

                    {
                        data: 'basic_salary',

                        name: 'basic_salary'
                    },

                    {
                        data: 'payment_status',

                        name: 'payment_status',

                        render: function (data) {

                            if (data === 'Paid') {

                                return `
                                    <span class="badge bg-success">
                                        Paid
                                    </span>
                                `;

                            }

                            return `
                                <span class="badge bg-warning text-dark">
                                    Pending
                                </span>
                            `;

                        }
                    },

                    {
                        data: 'payment_date',

                        name: 'payment_date'
                    }

                ]

            });


            /* =========================
               CUSTOM SEARCH
            ========================== */

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

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

            });


            /* =========================
               PAGE LENGTH
            ========================== */

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

                salaryTable
                    .page
                    .len(parseInt(this.value))
                    .draw();

            });

        });

    </script>

@endsection