@php
    /**
     * Provided vars:
     * $financial_year, $emp_id, $employee, $salarytypeDetails, $payroll_heads, $finalcialMonths, $type
     */
    $stdByHeadId = collect($salarytypeDetails ?? [])->keyBy('head_id');

    $computeDefault = function ($head) use ($stdByHeadId, $employee) {
        $std = $stdByHeadId->get($head['id'] ?? null);
        if (!$std) {
            return 0;
        }
        $fixed = (float) ($std->amount ?? 0);
        $pct = (float) ($std->parcentage ?? 0);
        $base = (float) ($employee->gross_salary ?? 0);
        return $pct > 0 ? round(($base * $pct) / 100, 2) : round($fixed, 2);
    };

    $monthClass = [
        'january' => 'january',
        'february' => 'february',
        'march' => 'march',
        'april' => 'april',
        'may' => 'may',
        'june' => 'june',
        'july' => 'july',
        'august' => 'august',
        'september' => 'september',
        'october' => 'october',
        'november' => 'november',
        'december' => 'december',
    ];

    $dataTypeFor = function ($head) {
        $op = strtolower((string) ($head['operation_type'] ?? 'pay'));
        return $op === 'pay' ? 'pay' : 'deduct';
    };
@endphp

<style>
    /* === Excel-ish look === */
    .excel-wrap {
        border: 1px solid #d1d5db;
        border-radius: 6px;
        overflow: auto;
        position: relative;
        max-height: 70vh;
    }

    .table.excel-grid {
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
        font-size: 14px;
    }

    .excel-grid thead th,
    .excel-grid tfoot th,
    .excel-grid tfoot td {
        position: sticky;
        z-index: 3;
        background: #f3f4f6;
    }

    .excel-grid thead th {
        top: 0;
    }

    .excel-grid tfoot tr {
        bottom: 0;
    }

    .excel-grid th,
    .excel-grid td {
        border: 1px solid #e5e7eb !important;
        padding: 4px 6px !important;
        vertical-align: middle;
        white-space: nowrap;
    }

    .excel-grid tbody tr:nth-child(even) {
        background: #fafafa;
    }

    .excel-grid tbody tr:hover {
        background: #fefce8;
    }

    /* soft yellow */
    .excel-grid .sticky-col-0 {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #fff;
    }

    .excel-grid .sticky-col-last {
        position: sticky;
        right: 0;
        z-index: 2;
        background: #fff;
    }

    .excel-grid thead .sticky-col-0,
    .excel-grid thead .sticky-col-last,
    .excel-grid tfoot .sticky-col-0,
    .excel-grid tfoot .sticky-col-last {
        z-index: 4;
        background: #f3f4f6;
    }

    input.form-control.income {
        height: 28px;
        padding: 2px 6px !important;
        border: none !important;
        border-radius: 0 !important;
        text-align: right;
        font-variant-numeric: tabular-nums;
        box-shadow: none !important;
        background: transparent;
    }

    input.form-control.income:focus {
        outline: 2px solid #60a5fa;
        /* blue-400 */
        background: #ffffff;
    }

    .excel-col-hover {
        background: #eef2ff !important;
    }

    /* light indigo */
    .excel-head {
        display: flex;
        flex-direction: column;
    }

    .excel-head small {
        color: #6b7280;
        font-size: 12px;
    }

    tfoot .excel-grand {
        font-weight: 700;
    }
</style>

<div class="excel-wrap">
    <table class="table excel-grid align-middle payrol_table mb-0">
        <thead>
            <tr>
                <th class="sticky-col-0" style="min-width:220px">Head</th>
                @foreach ($finalcialMonths as $colIdx => $m)
                    <th class="text-center text-capitalize" data-col="{{ $colIdx }}">{{ $m }}</th>
                @endforeach
                <th class="text-end sticky-col-last" style="min-width:110px">Row Total</th>
            </tr>
        </thead>

        <tbody>
            <input type="hidden" name="employee_id" value="{{ $emp_id }}">
            <input type="hidden" name="financial_year" value="{{ $financial_year }}">
            <input type="hidden" name="salary" value="{{ $employee->gross_salary }}">

            @foreach ($payroll_heads as $rowIdx => $head)
                @php
                    $defaultPerMonth = $computeDefault($head);
                    $dtype = $dataTypeFor($head);
                @endphp
                <tr>
                    <td class="sticky-col-0">
                        <div class="excel-head">
                            <strong>{{ $head['head_name'] }}</strong>
                            <small>
                                {{ ucfirst($head['header_type'] ?? '') }}
                                @if (!empty($head['pay_code']))
                                    · {{ $head['pay_code'] }}
                                @endif
                            </small>
                        </div>
                        <input type="hidden" name="head[]" value="{{ $head['head_name'] }}">
                        <input type="hidden" name="head_id[]" value="{{ $head['id'] }}">
                        <input type="hidden" name="total[]" class="all_total" value="0">
                    </td>

                    @foreach ($finalcialMonths as $colIdx => $m)
                        @php $cls = $monthClass[$m] ?? $m; @endphp
                        <td class="text-center" data-col="{{ $colIdx }}">
                            <input type="number" step="any" class="form-control income {{ $cls }}"
                                name="row[{{ $rowIdx }}][{{ $m }}]"
                                value="{{ number_format($defaultPerMonth, 2, '.', '') }}"
                                data-type="{{ $dtype }}" data-row="{{ $rowIdx }}"
                                data-col="{{ $colIdx }}" autocomplete="off">
                        </td>
                    @endforeach

                    <td class="text-end fw-semibold sticky-col-last">
                        <span class="total">0.00</span>
                    </td>
                </tr>
            @endforeach
        </tbody>

        <tfoot>
            <tr>
                <th class="text-end sticky-col-0">Month Totals</th>
                @foreach ($finalcialMonths as $colIdx => $m)
                    @php $id = $monthClass[$m] ?? $m; @endphp
                    <th class="text-center" data-col="{{ $colIdx }}"><span id="{{ $id }}">0.00</span>
                    </th>
                @endforeach
                <th class="text-end sticky-col-last excel-grand"><span id="alltotal">0.00</span></th>
            </tr>
        </tfoot>
    </table>
</div>

<div class="mt-2 small text-muted">
    Tip: Values prefill from <code>Pay Grades</code>. Percentage entries are calculated from current gross salary
    ({{ number_format($employee->gross_salary, 2) }}). Use arrow keys to move between cells; Enter moves down.
</div>

{{-- Mini JS to enhance "Excel-like" behavior (works alongside your existing script) --}}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const grid = document.querySelector('.excel-wrap');
        if (!grid) return;

        const inputs = () => Array.from(grid.querySelectorAll('input.income'));

        // Auto-select on focus
        grid.addEventListener('focusin', function(e) {
            if (e.target.matches('input.income')) {
                e.target.select();
                highlightColumn(e.target.dataset.col);
            }
        });

        // Arrow-key / Enter navigation
        grid.addEventListener('keydown', function(e) {
            if (!e.target.matches('input.income')) return;
            const r = parseInt(e.target.dataset.row, 10);
            const c = parseInt(e.target.dataset.col, 10);
            let next;

            const findCell = (row, col) =>
                grid.querySelector('input.income[data-row="' + row + '"][data-col="' + col + '"]');

            if (e.key === 'ArrowRight') {
                next = findCell(r, c + 1);
            } else if (e.key === 'ArrowLeft') {
                next = findCell(r, c - 1);
            } else if (e.key === 'ArrowDown' || (e.key === 'Enter' && !e.shiftKey)) {
                e.preventDefault();
                next = findCell(r + 1, c);
            } else if (e.key === 'ArrowUp' || (e.key === 'Enter' && e.shiftKey)) {
                e.preventDefault();
                next = findCell(r - 1, c);
            }

            if (next) {
                next.focus();
                next.select();
            }
        });

        // Column highlight on hover/focus
        function highlightColumn(colIndex) {
            clearColumnHighlights();
            if (colIndex == null) return;
            grid.querySelectorAll('[data-col="' + colIndex + '"]').forEach(el => {
                el.classList.add('excel-col-hover');
            });
        }

        function clearColumnHighlights() {
            grid.querySelectorAll('.excel-col-hover').forEach(el => el.classList.remove('excel-col-hover'));
        }
        grid.addEventListener('mousemove', function(e) {
            const cell = e.target.closest('[data-col]');
            if (cell) highlightColumn(cell.getAttribute('data-col'));
        });
        grid.addEventListener('mouseleave', clearColumnHighlights);
    });
</script>