Untitled

@section Scripts {
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            // Initialize Tabulator
            var table = new Tabulator("#resignRequestTable", {
                ajaxURL: "@Url.Action("GetResignRequests", "ResignRequest")",
                ajaxConfig: "GET",
                ajaxContentType: "json",
                ajaxResponse: function (url, params, response) {
                    // Handle the response
                    if (response.success) {
                        // If successful, return the data array
                        return response.data;
                    } else {
                        // If failed, show error message and return empty array
                        console.error(response.message);
                        return [];
                    }
                },
                layout: "fitColumns",
                responsiveLayout: true,
                pagination: "local",
                movableColumns: true,
                pagination: false,
                columns: [
                    { title: "SL", formatter: "rownum", width: 45, headerSort: false },
                    {
                        title: "Employee Name",
                        field: "employeeName",
                        width: 180,
                        formatter: function (cell) {
                            var data = cell.getData();
                            return `<div class="employee-info">
                                                <img src="${data.profileImage || '/images/default-profile.png'}" class="profile-image" alt="${data.employeeName}"/>
                                                <div>
                                                    <p class="employee-name">${data.employeeName}</p>
                                                    <p class="employee-position">${data.position || 'N/A'}</p>
                                                </div>
                                            </div>`;
                        }
                    },
                    {
                        title: "Resign Date",
                        field: "resignDate",
                        width: 135,
                        formatter: function (cell) {
                            const date = new Date(cell.getValue());
                            return date.toLocaleDateString('en-GB', {
                                day: '2-digit',
                                month: 'short',
                                year: 'numeric'
                            });
                        }
                    },
                    {
                        title: "Last Workday",
                        field: "lastWorkday",
                        width: 160,
                        formatter: function (cell) {
                            const date = new Date(cell.getValue());
                            return date.toLocaleDateString('en-GB', {
                                day: '2-digit',
                                month: 'short',
                                year: 'numeric'
                            });
                        }
                    },
                    {
                        title: "Resignation Reason",
                        field: "reason",
                        width: 200
                    },
                    {
                        title: "Personal Email",
                        field: "email",
                        width: 160
                    },
                    {
                        title: "Resign Letter",
                        width: 130,
                        formatter: function (cell) {
                            var data = cell.getData();
                            return data.resignLetter ?
                                `<a href="${data.resignLetter}" class="view-link" target="_blank">
                        View <i class="fa-regular fa-file-pdf" style="color: #ff0000;"></i>
                    </a>` :
                                'N/A';
                        },
                        headerSort: false
                    },
                    {
                        title: "Document",
                        width: 110,
                        formatter: function (cell) {
                            var data = cell.getData();
                            return data.document ?
                                `<a href="${data.document}" class="view-link" target="_blank">
                        View <i class="fa-regular fa-file-pdf" style="color: #ff0000;"></i>
                    </a>` :
                                'N/A';
                        },
                        headerSort: false
                    },
                    {
                        title: "Status",
                        field: "status",
                        width: 90,
                        formatter: function (cell) {
                            var value = cell.getValue();
                            var className = '';
                            switch (value.toLowerCase()) {
                                case 'pending':
                                    className = 'status-pending';
                                    break;
                                case 'approved':
                                    className = 'status-approved';
                                    break;
                                case 'rejected':
                                    className = 'status-rejected';
                                    break;
                            }
                            return `<button class="status-button ${className}">${value}</button>`;
                        },
                        headerSort: false
                    }
                ]
            });
        });
    </script>
}