@extends('admin.admin_dashboard')
@section('customcss')

<style>
    .salary-column-toggle-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }

    .salary-column-toggle-title {
        font-size: 13px;
        font-weight: 700;
        color: #495057;
        margin-right: 4px;
    }

    .salary-column-toggle-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        background: #f8f9fa;
        font-size: 12px;
        font-weight: 600;
        color: #212529;
        cursor: pointer;
        user-select: none;
    }

    .salary-column-toggle-item input[type="checkbox"] {
        margin: 0;
        cursor: pointer;
    }

    .salary-hidden-col {
        display: none !important;
    }
</style>

@endsection

@section('admin')

<div class="content-body">
    <div class="container-fluid">
        <div class="row page-titles">
            <div class="col-md-9">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item active"><a href="javascript:void(0)">Home </a></li>
                    <li class="breadcrumb-item"><a href="javascript:void(0)">Employee Salary </a></li>
                </ol>
            </div>
        </div>

        <div class="card shadow-sm mb-3">
            <div class="card-header"><strong>Salary Payment</strong></div>
            <div class="card-body">
                <div class="row g-3 align-items-end">
                    <div class="col-md-4">
                        <label class="form-label">Select Month</label>
                        <input type="month" id="monthPicker" class="form-control" value="{{ now()->format('Y-m') }}">
                    </div>
                    <div class="col-md-3">
                        <button id="loadBtn" class="btn btn-primary">Load Employees</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="card shadow-sm" id="tableCard" style="display:none;">
            <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                <strong>Employees for <span id="tableMonthText"></span></strong>
                <small class="text-muted">Already paid rows are read-only.</small>
            </div>

            <div class="card-body">
                <form method="POST" action="{{ route('admin.employee.salary.store') }}" id="salaryForm" onsubmit="return handleSalarySubmit(event);">
                    @csrf
                    <input type="hidden" name="month" id="formMonth">

                    <div id="tableContainer" class="table-responsive"></div>

                    <div class="mt-3 d-flex justify-content-end gap-2">
                        <button type="submit" class="btn btn-success">Save Payments</button>
                        <a href="{{ route('admin.employee.salary.index') }}" class="btn btn-light">Cancel</a>
                    </div>
                </form>
            </div>
        </div>

        <div class="modal fade" id="salaryIncrementModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <form id="salaryIncrementForm">
                        @csrf
                        <div class="modal-header">
                            <h5 class="modal-title">Increase Salary</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <input type="hidden" id="inc_employee_id" name="employee_id">

                            <div class="mb-2">
                                <label class="form-label mb-1">Employee</label>
                                <input type="text" id="inc_employee_name" class="form-control" readonly>
                            </div>

                            <div class="mb-2">
                                <label class="form-label mb-1">Current Salary</label>
                                <input type="text" id="inc_old_salary" class="form-control" readonly>
                            </div>

                            <div class="mb-2">
                                <label class="form-label mb-1">Increase Type</label>
                                <select class="form-select" id="inc_type" name="increment_type" required>
                                    <option value="amount">Amount</option>
                                    <option value="percent">Percent (%)</option>
                                </select>
                            </div>

                            <div class="mb-2">
                                <label class="form-label mb-1">Increase Value</label>
                                <input type="number" step="0.01" min="0.01" id="inc_value" name="increment_value" class="form-control" required>
                            </div>

                            <div class="mb-2">
                                <label class="form-label mb-1">Effective Month</label>
                                <input type="month" id="inc_effective_month" name="effective_month" class="form-control" value="{{ now()->format('Y-m') }}">
                            </div>

                            <div class="mb-2">
                                <label class="form-label mb-1">Reason</label>
                                <textarea class="form-control" id="inc_reason" name="reason" rows="2" required></textarea>
                            </div>

                            <div class="alert alert-light border mt-3 mb-0">
                                <div class="small text-muted">Preview</div>
                                <div class="fw-semibold" id="inc_preview">New Salary: 0</div>
                                <div class="small text-muted mt-1" id="inc_impact_note"></div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary" id="inc_submit_btn">Apply Increment</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection

@section('customjs')

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
const tableContainer = document.getElementById('tableContainer');
const monthPicker = document.getElementById('monthPicker');
const loadBtn = document.getElementById('loadBtn');
const salaryForm = document.getElementById('salaryForm');

const SALARY_COLUMN_STORAGE_KEY = 'salary_table_column_visibility';
const SALARY_TOOLS_COLLAPSE_KEY = 'salary_quick_tools_collapsed';

const salaryColumnDefaults = {
    bonus: false,
    extra: false,
    action: false,
};

function getColumnVisibilityConfig() {
    try {
        const saved = JSON.parse(localStorage.getItem(SALARY_COLUMN_STORAGE_KEY) || '{}');
        return {
            bonus: typeof saved.bonus === 'boolean' ? saved.bonus : salaryColumnDefaults.bonus,
            extra: typeof saved.extra === 'boolean' ? saved.extra : salaryColumnDefaults.extra,
            action: typeof saved.action === 'boolean' ? saved.action : salaryColumnDefaults.action,
        };
    } catch (error) {
        return { ...salaryColumnDefaults };
    }
}

function setColumnVisibilityConfig(config) {
    localStorage.setItem(SALARY_COLUMN_STORAGE_KEY, JSON.stringify(config));
}

function toggleSingleSalaryColumn(colKey, isVisible) {
    tableContainer.querySelectorAll('[data-col-key="' + colKey + '"]').forEach((element) => {
        if (isVisible) {
            element.classList.remove('salary-hidden-col');
        } else {
            element.classList.add('salary-hidden-col');
        }
    });
}

function applySalaryColumnVisibility() {
    const config = getColumnVisibilityConfig();

    tableContainer.querySelectorAll('.salary-column-toggle').forEach((checkbox) => {
        const colKey = checkbox.dataset.col;
        const isVisible = !!config[colKey];
        checkbox.checked = isVisible;
        toggleSingleSalaryColumn(colKey, isVisible);
    });
}

function initializeSalaryToolsCollapse() {
    const toolsBody = tableContainer.querySelector('#salaryToolsBody');
    const toggleBtn = tableContainer.querySelector('#salaryToolsToggleBtn');

    if (!toolsBody || !toggleBtn) return;

    let isCollapsed = true; // default hide

    try {
        const savedState = localStorage.getItem(SALARY_TOOLS_COLLAPSE_KEY);
        if (savedState === null) {
            isCollapsed = true;
        } else {
            isCollapsed = savedState === '1';
        }
    } catch (e) {
        isCollapsed = true;
    }

    function applyState() {
        if (isCollapsed) {
            toolsBody.classList.add('is-collapsed');
            toggleBtn.textContent = 'Expand';
            toggleBtn.classList.remove('btn-outline-secondary');
            toggleBtn.classList.add('btn-outline-primary');
        } else {
            toolsBody.classList.remove('is-collapsed');
            toggleBtn.textContent = 'Minimize';
            toggleBtn.classList.remove('btn-outline-primary');
            toggleBtn.classList.add('btn-outline-secondary');
        }
    }

    applyState();

    toggleBtn.onclick = function () {
        isCollapsed = !isCollapsed;
        applyState();

        try {
            localStorage.setItem(SALARY_TOOLS_COLLAPSE_KEY, isCollapsed ? '1' : '0');
        } catch (e) {}
    };
}

document.addEventListener('change', function(event) {
    const checkbox = event.target.closest('.salary-column-toggle');
    if (!checkbox) return;

    const colKey = checkbox.dataset.col;
    const config = getColumnVisibilityConfig();
    config[colKey] = checkbox.checked;
    setColumnVisibilityConfig(config);
    toggleSingleSalaryColumn(colKey, checkbox.checked);
});

function unlockSubmitButton() {
    const submitBtn = salaryForm ? salaryForm.querySelector('button[type="submit"]') : null;
    if (!submitBtn) return;

    submitBtn.disabled = false;
    submitBtn.textContent = 'Save Payments';
}

async function handleSalarySubmit(event) {
    if (event) {
        event.preventDefault();
    }

    const submitBtn = salaryForm ? salaryForm.querySelector('button[type="submit"]') : null;
    if (submitBtn) {
        submitBtn.disabled = true;
        submitBtn.textContent = 'Processing...';
    }

    const monthToKeep = monthPicker ? monthPicker.value : '';
    if (!monthToKeep) {
        showSwalInfo('Please select a month first.');
        unlockSubmitButton();
        return false;
    }

    const monthInput = document.getElementById('formMonth');
    if (monthInput) {
        monthInput.value = monthToKeep;
    }

    try {
        const formData = new FormData(salaryForm);
        const response = await fetch(salaryForm.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        });

        let payload = null;
        try {
            payload = await response.json();
        } catch (_) {
            payload = null;
        }

        if (!response.ok || !payload || payload.success === false) {
            const message = payload?.message || 'Salary submission failed.';
            const errorItems = Array.isArray(payload?.errors) ? payload.errors : [];

            if (errorItems.length > 0) {
                showSwalErrorList('Payment Could Not Be Completed', message, errorItems);
            } else {
                showSwalError(message);
            }
            return false;
        }

        const fallbackPrintUrl = `{{ route('admin.employee.salary.print') }}?month=${encodeURIComponent(monthToKeep)}`;
        const printUrl = payload?.print_url || fallbackPrintUrl;

        window.open(printUrl, '_blank');
        showSuccessToast(payload?.message || 'Salary submitted successfully.');
        loadEmployeesTable();
    } catch (error) {
        showSwalError(error.message || 'Failed to submit salary.');
    } finally {
        unlockSubmitButton();
    }

    return false;
}

function showSwalErrorList(title, message, errors) {
    const cleanedErrors = (errors || [])
        .map((item) => String(item || '').trim())
        .filter((item) => item.length > 0);

    if (window.Swal) {
        const listHtml = cleanedErrors.length
            ? `<ul style="text-align:left; margin:0; padding-left:18px;">${cleanedErrors.map((item) => `<li>${item}</li>`).join('')}</ul>`
            : '';

        Swal.fire({
            icon: 'error',
            title,
            text: message,
            html: listHtml,
            confirmButtonText: 'OK'
        });
        return;
    }

    const suffix = cleanedErrors.length ? `\n- ${cleanedErrors.join('\n- ')}` : '';
    alert(`${message}${suffix}`);
}

function showSwalError(message) {
    if (window.Swal) {
        Swal.fire({
            icon: 'error',
            title: 'Oops',
            text: message,
            confirmButtonText: 'OK'
        });
        return;
    }
    alert(message);
}

function showSwalInfo(message) {
    if (window.Swal) {
        Swal.fire({
            icon: 'info',
            title: 'Notice',
            text: message,
            confirmButtonText: 'OK'
        });
        return;
    }
    alert(message);
}

function showSuccessToast(message) {
    if (window.toastr) {
        toastr.success(message);
        return;
    }
    if (window.Swal) {
        Swal.fire({
            icon: 'success',
            title: 'Success',
            text: message,
            timer: 1800,
            showConfirmButton: false
        });
        return;
    }
    alert(message);
}

function loadEmployeesTable() {
    const month = monthPicker.value;
    if (!month) return;

    fetch(`{{ route('admin.employee.salary.table') }}?month=${encodeURIComponent(month)}`)
        .then(r => r.text())
        .then(html => {
            tableContainer.innerHTML = html;
            document.getElementById('tableCard').style.display = 'block';
            document.getElementById('formMonth').value = month;
            document.getElementById('tableMonthText').innerText =
                new Date(month + '-01').toLocaleString('en', { month: 'long', year: 'numeric' });
            initializeDynamicSalaryUi();
        })
        .catch(() => {
            showSwalError('Failed to load employees.');
        });
}

loadBtn.addEventListener('click', loadEmployeesTable);

const queryParams = new URLSearchParams(window.location.search);
const queryMonth = queryParams.get('month');
const defaultMonth = monthPicker ? monthPicker.value : '';
const initialMonth = queryMonth || defaultMonth;

if (initialMonth && monthPicker) {
    monthPicker.value = initialMonth;
    loadEmployeesTable();
}

function toNumber(value) {
    const normalized = String(value ?? '').replace(/,/g, '').trim();
    const parsed = parseFloat(normalized);
    return Number.isFinite(parsed) ? parsed : 0;
}

function formatMoney(value) {
    return Number(value || 0).toFixed(2).replace(/\.00$/, '').replace(/(\.\d*[1-9])0$/, '$1');
}

function updateRowNet(row) {
    if (!row) return;
    if (row.dataset.paid === '1') return;

    const baseSalary = toNumber(row.querySelector('.base-salary-cell')?.dataset.baseSalary);
    const bonusValueEl = row.querySelector('.bonus-value-input');
    const extraAmountEl = row.querySelector('.extra-amount-input');
    const pfInputEl = row.querySelector('.pf-input');
    const pfDisplayEl = row.querySelector('.pf-display-cell');
    const netEl = row.querySelector('.next-payable-cell');
    const payAmountEl = row.querySelector('.pay-amount-input');

    if (!netEl || !bonusValueEl) return;

    const bonusValue = Math.max(0, toNumber(bonusValueEl.value));
    const bonusAmount = bonusValue;
    const extraAmount = Math.max(0, toNumber(extraAmountEl?.value || 0));
    const pf = pfInputEl ? toNumber(pfInputEl.value) : toNumber(pfDisplayEl?.textContent || 0);
    const net = Math.max(0, (baseSalary + bonusAmount + extraAmount) - pf);

    netEl.dataset.nextPayable = net.toFixed(2);
    netEl.textContent = formatMoney(net);

    if (payAmountEl && row.dataset.partial !== '1') {
        payAmountEl.value = net.toFixed(2);
    }
}

function recalculateSummaryFromTable() {
    let totalSalary = 0;
    let totalBonus = 0;
    let totalExtra = 0;
    let totalGross = 0;
    let totalPf = 0;
    let totalNet = 0;
    let totalPaid = 0;

    tableContainer.querySelectorAll('tbody tr').forEach((row) => {
        if (!row.classList.contains('salary-row')) return;

        const baseSalary = toNumber(row.querySelector('.base-salary-cell')?.dataset.baseSalary);
        const isPaid = row.dataset.paid === '1';
        const isPartial = row.dataset.partial === '1';

        const bonusValue = toNumber(row.querySelector('.bonus-value-input')?.value);
        const bonusAmount = isPaid ? toNumber(row.dataset.bonusAmount) : bonusValue;

        const extraAmount = isPaid
            ? toNumber(row.dataset.extraAmount)
            : toNumber(row.querySelector('.extra-amount-input')?.value || 0);

        const pf = row.querySelector('.pf-input')
            ? toNumber(row.querySelector('.pf-input')?.value || 0)
            : toNumber(row.querySelector('.pf-display-cell')?.textContent || 0);

        const nextPayable = isPaid
            ? toNumber(row.dataset.nextPayable)
            : toNumber(row.querySelector('.next-payable-cell')?.dataset.nextPayable || 0);

        const alreadyPaid = isPaid || isPartial ? toNumber(row.dataset.alreadyPaid) : 0;

        totalSalary += baseSalary;
        totalBonus += bonusAmount;
        totalExtra += extraAmount;
        totalGross += (baseSalary + bonusAmount + extraAmount);
        totalPf += pf;
        totalNet += nextPayable;
        totalPaid += alreadyPaid;
    });

    const remaining = Math.max(0, totalNet - totalPaid);

    const setText = (id, value) => {
        const el = document.getElementById(id);
        if (el) {
            el.textContent = formatMoney(value);
        }
    };

    setText('summaryTotalSalary', totalSalary);
    setText('summaryTotalBonus', totalBonus);
    setText('summaryTotalExtra', totalExtra);
    setText('summaryGrossPayable', totalGross);
    setText('summaryTotalPF', totalPf);
    setText('summaryTotalNet', totalNet);
    setText('summaryTotalPaid', totalPaid);
    setText('summaryRemaining', remaining);
}

function initializeDynamicSalaryUi() {
    tableContainer.querySelectorAll('tbody tr.salary-row').forEach((row) => updateRowNet(row));
    recalculateSummaryFromTable();
    applySalaryColumnVisibility();
    initializeSalaryToolsCollapse();
}

tableContainer.addEventListener('input', function(e) {
    const row = e.target.closest('tr');
    if (!row) return;

    if (
        !e.target.classList.contains('pf-input') &&
        !e.target.classList.contains('bonus-value-input') &&
        !e.target.classList.contains('extra-amount-input') &&
        !e.target.classList.contains('pay-amount-input')
    ) return;

    if (!e.target.classList.contains('pay-amount-input')) {
        updateRowNet(row);
    }

    recalculateSummaryFromTable();
});

tableContainer.addEventListener('click', function(e) {
    if (e.target.id === 'applyQuickBonusBtn') {
        const quickBonusValue = toNumber(tableContainer.querySelector('#quickBonusValue')?.value);

        tableContainer.querySelectorAll('tbody tr.salary-row').forEach((row) => {
            if (row.dataset.paid === '1' || row.dataset.partial === '1') return;
            const valueEl = row.querySelector('.bonus-value-input');
            if (!valueEl) return;
            valueEl.value = quickBonusValue.toFixed(2);
            updateRowNet(row);
        });

        recalculateSummaryFromTable();
        showSuccessToast('Bonus applied to all editable employees.');
        return;
    }

    if (e.target.id === 'clearQuickBonusBtn') {
        tableContainer.querySelectorAll('tbody tr.salary-row').forEach((row) => {
            if (row.dataset.paid === '1' || row.dataset.partial === '1') return;
            const valueEl = row.querySelector('.bonus-value-input');
            if (!valueEl) return;
            valueEl.value = '0.00';
            updateRowNet(row);
        });

        const quickBonusValue = tableContainer.querySelector('#quickBonusValue');
        if (quickBonusValue) quickBonusValue.value = '';

        recalculateSummaryFromTable();
        showSwalInfo('Bonus cleared from editable employees.');
        return;
    }

    if (e.target.id === 'applyQuickExtraBtn') {
        const quickExtraValue = toNumber(tableContainer.querySelector('#quickExtraValue')?.value);

        tableContainer.querySelectorAll('tbody tr.salary-row').forEach((row) => {
            if (row.dataset.paid === '1' || row.dataset.partial === '1') return;
            const valueEl = row.querySelector('.extra-amount-input');
            if (!valueEl) return;
            valueEl.value = quickExtraValue.toFixed(2);
            updateRowNet(row);
        });

        recalculateSummaryFromTable();
        showSuccessToast('Extra amount applied to all editable employees.');
        return;
    }

    if (e.target.id === 'clearQuickExtraBtn') {
        tableContainer.querySelectorAll('tbody tr.salary-row').forEach((row) => {
            if (row.dataset.paid === '1' || row.dataset.partial === '1') return;
            const valueEl = row.querySelector('.extra-amount-input');
            if (!valueEl) return;
            valueEl.value = '0.00';
            updateRowNet(row);
        });

        const quickExtraValue = tableContainer.querySelector('#quickExtraValue');
        if (quickExtraValue) quickExtraValue.value = '';

        recalculateSummaryFromTable();
        showSwalInfo('Extra amount cleared from editable employees.');
        return;
    }

    if (e.target.id === 'applyQuickRemarksBtn') {
        const text = (tableContainer.querySelector('#quickRemarksText')?.value || '').trim();
        tableContainer.querySelectorAll('.remarks-input').forEach((input) => {
            if (input.readOnly) return;
            input.value = text;
        });
        showSuccessToast('Remarks applied to all editable employees.');
        return;
    }

    if (e.target.id === 'clearQuickRemarksBtn') {
        tableContainer.querySelectorAll('.remarks-input').forEach((input) => {
            if (input.readOnly) return;
            input.value = '';
        });
        const quickRemarks = tableContainer.querySelector('#quickRemarksText');
        if (quickRemarks) quickRemarks.value = '';
        showSwalInfo('Remarks cleared from editable employees.');
        return;
    }

    const incrementBtn = e.target.closest('.open-increment-modal');
    if (incrementBtn) {
        if (!incrementModal) {
            showSwalInfo('Increment modal is not available. Please refresh the page.');
            return;
        }

        const employeeId = incrementBtn.dataset.employeeId;
        const employeeName = incrementBtn.dataset.employeeName || '';
        const employeeCode = incrementBtn.dataset.employeeCode || '';
        const currentSalary = parseFloat(incrementBtn.dataset.currentSalary || '0') || 0;

        incEmployeeId.value = employeeId;
        incEmployeeName.value = `${employeeName} (${employeeCode})`;
        incOldSalary.value = currentSalary.toFixed(2);
        incType.value = 'amount';
        incValue.value = '';
        incReason.value = '';
        incEffectiveMonth.value = monthPicker.value || incEffectiveMonth.value;
        refreshIncrementPreview();
        incrementModal.show();
    }
});

const incrementModalEl = document.getElementById('salaryIncrementModal');
const incrementModal = (incrementModalEl && window.bootstrap)
    ? new bootstrap.Modal(incrementModalEl)
    : null;

const incEmployeeId = document.getElementById('inc_employee_id');
const incEmployeeName = document.getElementById('inc_employee_name');
const incOldSalary = document.getElementById('inc_old_salary');
const incType = document.getElementById('inc_type');
const incValue = document.getElementById('inc_value');
const incPreview = document.getElementById('inc_preview');
const incImpactNote = document.getElementById('inc_impact_note');
const incEffectiveMonth = document.getElementById('inc_effective_month');
const incReason = document.getElementById('inc_reason');
const incForm = document.getElementById('salaryIncrementForm');
const incSubmitBtn = document.getElementById('inc_submit_btn');

function refreshIncrementPreview() {
    const oldSalary = parseFloat(incOldSalary.value || '0') || 0;
    const value = parseFloat(incValue.value || '0') || 0;
    const delta = incType.value === 'percent' ? (oldSalary * value) / 100 : value;
    const newSalary = Math.max(0, oldSalary + delta);

    incPreview.innerText = `New Salary: ${formatMoney(newSalary)} (Increase: ${formatMoney(delta)})`;

    const payrollMonth = monthPicker.value || '';
    const effectiveMonth = incEffectiveMonth.value || '';

    if (payrollMonth && effectiveMonth) {
        if (effectiveMonth > payrollMonth) {
            incImpactNote.innerText = `This increment will NOT apply to payroll month ${payrollMonth}. It starts from ${effectiveMonth}.`;
        } else {
            incImpactNote.innerText = `This increment will apply to payroll month ${payrollMonth}.`;
        }
    } else {
        incImpactNote.innerText = '';
    }
}

incType.addEventListener('change', refreshIncrementPreview);
incValue.addEventListener('input', refreshIncrementPreview);
incEffectiveMonth.addEventListener('change', refreshIncrementPreview);

incForm.addEventListener('submit', async function(e) {
    e.preventDefault();

    if (window.Swal) {
        const confirmResult = await Swal.fire({
            icon: 'question',
            title: 'Apply Salary Increment?',
            text: 'This will update the employee salary settings.',
            showCancelButton: true,
            confirmButtonText: 'Yes, Apply',
            cancelButtonText: 'Cancel'
        });

        if (!confirmResult.isConfirmed) {
            return;
        }
    }

    incSubmitBtn.disabled = true;

    const payload = {
        employee_id: incEmployeeId.value,
        increment_type: incType.value,
        increment_value: incValue.value,
        effective_month: incEffectiveMonth.value,
        reason: incReason.value,
    };

    fetch(`{{ route('admin.employee.salary.increment') }}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        },
        body: JSON.stringify(payload),
    })
    .then(async (response) => {
        const data = await response.json();
        if (!response.ok) {
            const firstError = data?.errors ? Object.values(data.errors)[0]?.[0] : null;
            throw new Error(firstError || data.message || 'Failed to apply increment');
        }
        return data;
    })
    .then((data) => {
        incrementModal.hide();
        showSuccessToast(data.message || 'Salary increased successfully.');
        loadEmployeesTable();
    })
    .catch((error) => {
        showSwalError(error.message || 'Failed to apply increment.');
    })
    .finally(() => {
        incSubmitBtn.disabled = false;
    });
});
</script>
@endsection