@extends('layouts.admin', ['title' => 'Payroll'])

@section('content')
    <div x-data="payrollPage()" x-cloak>
        <h1 class="text-2xl font-semibold text-slate-900 mb-6">Payroll</h1>
        {{-- Controls --}}
        <div class="rounded-2xl border border-slate-200/80 bg-white/85 p-8 shadow-lg shadow-slate-200/30 backdrop-blur-xl">
            <div class="flex flex-col gap-6 sm:flex-row sm:items-start sm:justify-between">
                <div class="space-y-2">
                    <span class="inline-block rounded-full bg-amber-100 px-4 py-1 text-xs font-bold uppercase tracking-widest text-amber-800">
                        Payroll · <span x-text="new Date(filterYear, filterMonth-1).toLocaleString('default', { month: 'long' }) + ' ' + filterYear"></span>
                    </span>
                    <h2 class="text-3xl font-bold tracking-tight text-slate-900">Salary Sheet</h2>
                    <p class="text-base text-slate-500">
                        Bin Mishal Global Service Co. Ltd. · Period <span x-text="new Date(filterYear, filterMonth-1).toLocaleString('default', { month: 'long' }) + '&rsquo;' + String(filterYear).slice(2)"></span>
                    </p>
                </div>
                <div class="flex flex-wrap items-center gap-3">
                    <input type="text" x-model="searchQuery" @input.debounce.300ms="loadFiltered()"
                           placeholder="Search by ID or name..."
                           class="w-48 rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-700 shadow-sm outline-none transition-all hover:border-amber-300 focus:border-amber-400">
                    <div class="w-px h-8 bg-slate-200"></div>
                    <select x-model="filterMonth"
                            class="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 shadow-sm outline-none transition-all hover:border-amber-300 focus:border-amber-400">
                        <template x-for="m in 12" :key="m">
                            <option :value="m" x-text="new Date(filterYear, m-1).toLocaleString('default', { month: 'long' })"></option>
                        </template>
                    </select>
                    <select x-model="filterYear"
                            class="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 shadow-sm outline-none transition-all hover:border-amber-300 focus:border-amber-400">
                        <template x-for="y in yearRange" :key="y">
                            <option :value="y" x-text="y"></option>
                        </template>
                    </select>
                    <button @click="loadFiltered()"
                            class="rounded-xl bg-slate-900 px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-800">
                        Load
                    </button>
                    <div class="w-px h-8 bg-slate-200"></div>
                    <select x-model="selectedBranch"
                            class="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 shadow-sm outline-none transition-all hover:border-amber-300 focus:border-amber-400">
                        <option value="">All Branches</option>
                        <template x-for="b in branches" :key="b">
                            <option :value="b" x-text="b"></option>
                        </template>
                    </select>
                    <select x-model="selectedDesignation"
                            class="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 shadow-sm outline-none transition-all hover:border-amber-300 focus:border-amber-400">
                        <option value="">All Designations</option>
                        <template x-for="d in designations" :key="d">
                            <option :value="d" x-text="d"></option>
                        </template>
                    </select>
                    <div class="w-px h-8 bg-slate-200"></div>
                    <button @click="generate()" :disabled="generating"
                            :class="generating ? 'opacity-50 cursor-not-allowed' : 'hover:-translate-y-0.5 hover:shadow-lg hover:shadow-amber-200'"
                            class="rounded-xl bg-gradient-to-r from-amber-600 to-amber-500 px-5 py-2.5 text-sm font-semibold text-white transition-all">
                        <span x-show="!generating">Generate Payroll</span>
                        <span x-show="generating">Generating...</span>
                    </button>
                    <button @click="loadAll()" class="text-sm font-medium text-slate-500 hover:text-slate-700 transition-colors">Show All</button>
                </div>
            </div>

            {{-- Success --}}
            <div x-show="success" x-transition class="rounded-xl bg-green-50 border border-green-200 px-4 py-3 mt-6">
                <p class="text-sm text-green-700" x-text="success"></p>
            </div>

            {{-- Error --}}
            <div x-show="error" x-transition class="rounded-xl bg-red-50 border border-red-200 px-4 py-3 mt-6">
                <p class="text-sm text-red-600" x-text="error"></p>
            </div>

            {{-- Table --}}
            <div x-show="!loading" class="mt-6 -mx-8">
                <div class="overflow-auto max-h-[calc(100vh-300px)]">
                    <table class="w-full border-separate border-spacing-0 text-sm">
                        <colgroup>
                            <col class="w-[100px]">
                            <col class="w-[180px]">
                        </colgroup>
                        <thead class="sticky top-0 z-20">
                            {{-- Group headers --}}
                            <tr>
                                <th colspan="6" class="sticky left-0 z-30 border-r border-slate-700 bg-slate-900 px-4 py-3 text-center text-xs font-bold uppercase tracking-widest text-slate-300">Employee</th>
                                <th colspan="6" class="border-r border-slate-700 bg-slate-900 px-4 py-3 text-center text-xs font-bold uppercase tracking-widest text-slate-300">Attendance</th>
                                <th colspan="6" class="border-r border-emerald-800/40 bg-emerald-900 px-4 py-3 text-center text-xs font-bold uppercase tracking-widest text-emerald-200">Earnings</th>
                                <th colspan="5" class="border-r border-rose-800/40 bg-rose-900 px-4 py-3 text-center text-xs font-bold uppercase tracking-widest text-rose-200">Deductions</th>
                                <th colspan="5" class="bg-indigo-900 px-4 py-3 text-center text-xs font-bold uppercase tracking-widest text-indigo-200">Net Payable</th>
                            </tr>
                            {{-- Sub-headers --}}
                            <tr>
                                <th class="sticky left-0 z-30 bg-slate-100 px-3 py-3 text-center text-xs font-bold uppercase tracking-widest text-slate-500">Employee ID</th>
                                <th class="sticky left-[100px] z-30 bg-slate-100 px-4 py-3 text-left text-xs font-bold uppercase tracking-widest text-slate-500">Staff Name</th>
                                <th class="bg-slate-100 px-4 py-3 text-left text-xs font-bold uppercase tracking-widest text-slate-500">Joining Date</th>
                                <th class="bg-slate-100 px-4 py-3 text-left text-xs font-bold uppercase tracking-widest text-slate-500">Designation</th>
                                <th class="bg-slate-100 px-3 py-3 text-left text-xs font-bold uppercase tracking-widest text-slate-500">Kafala</th>
                                <th class="border-r border-slate-200 bg-slate-100 px-3 py-3 text-left text-xs font-bold uppercase tracking-widest text-slate-500">Branch</th>

                                <th class="bg-slate-100 px-4 py-3 text-center text-xs font-bold uppercase tracking-widest text-slate-500">Work Days</th>
                                <th class="bg-slate-100 px-4 py-3 text-center text-xs font-bold uppercase tracking-widest text-slate-500">Absent</th>
                                <th class="bg-slate-100 px-4 py-3 text-center text-xs font-bold uppercase tracking-widest text-slate-500">Present</th>
                                <th class="bg-slate-100 px-4 py-3 text-center text-xs font-bold uppercase tracking-widest text-slate-500">Per Day</th>
                                <th class="border-r border-slate-200 bg-slate-100 px-4 py-3 text-center text-xs font-bold uppercase tracking-widest text-slate-500">OT Hrs</th>
                                <th class="border-r border-amber-200 bg-amber-50 px-4 py-3 text-center text-xs font-bold uppercase tracking-widest text-amber-700">Adv. Loan</th>

                                <th class="bg-emerald-50 px-4 py-3 text-center text-xs font-bold uppercase tracking-widest text-emerald-700">Basic</th>
                                <th class="bg-emerald-50 px-4 py-3 text-center text-xs font-bold uppercase tracking-widest text-emerald-700">H.Rent</th>
                                <th class="bg-emerald-50 px-4 py-3 text-center text-xs font-bold uppercase tracking-widest text-emerald-700">Food</th>
                                <th class="bg-emerald-50 px-4 py-3 text-center text-xs font-bold uppercase tracking-widest text-emerald-700">Comm.</th>
                                <th class="bg-emerald-50 px-4 py-3 text-center text-xs font-bold uppercase tracking-widest text-emerald-700">O.T Pay</th>
                                <th class="border-r border-emerald-200 bg-emerald-100 px-4 py-3 text-center text-xs font-bold uppercase tracking-widest text-emerald-800">Gross</th>

                                <th class="bg-rose-50 px-4 py-3 text-center text-xs font-bold uppercase tracking-widest text-rose-700">Loan Adj.</th>
                                <th class="bg-rose-50 px-4 py-3 text-center text-xs font-bold uppercase tracking-widest text-rose-700">Absent Cost</th>
                                <th class="bg-rose-50 px-4 py-3 text-center text-xs font-bold uppercase tracking-widest text-rose-700">Iqama</th>
                                <th class="bg-rose-50 px-4 py-3 text-center text-xs font-bold uppercase tracking-widest text-rose-700">Fine</th>
                                <th class="border-r border-rose-200 bg-rose-100 px-4 py-3 text-center text-xs font-bold uppercase tracking-widest text-rose-800">Total Ded.</th>

                                <th class="bg-indigo-50 px-4 py-3 text-center text-xs font-bold uppercase tracking-widest text-indigo-700">Net Payable</th>
                                <th class="bg-indigo-50 px-4 py-3 text-center text-xs font-bold uppercase tracking-widest text-indigo-700">Rem. Loan</th>
                                <th class="bg-indigo-50 px-4 py-3 text-center text-xs font-bold uppercase tracking-widest text-indigo-700">Bank Pay</th>
                                <th class="bg-indigo-50 px-4 py-3 text-center text-xs font-bold uppercase tracking-widest text-indigo-700">Payment Status</th>
                                <th class="bg-indigo-50 px-3 py-3 text-center text-xs font-bold uppercase tracking-widest text-indigo-500">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <template x-for="(row, idx) in filteredEntries" :key="row.id">
                                <tr :class="idx % 2 === 0 ? 'bg-white' : 'bg-slate-50/40'" class="transition-colors hover:bg-amber-50/40">
                                    <td class="sticky left-0 z-10 border-b border-slate-100 px-3 py-3 text-center text-slate-400 font-mono text-xs" :class="idx % 2 === 0 ? 'bg-white' : 'bg-slate-50'" x-text="row.employee?.employee_id || (idx + 1)"></td>
                                    <td class="sticky left-[100px] z-10 border-b border-slate-100 px-4 py-3 font-bold text-slate-900 whitespace-nowrap text-sm" :class="idx % 2 === 0 ? 'bg-white' : 'bg-slate-50'" x-text="row.employee?.name"></td>
                                    <td class="border-b border-slate-100 px-4 py-3 text-slate-500 whitespace-nowrap text-sm font-mono">
                                        <span x-text="row.employee?.joining_date ? new Date(row.employee.joining_date).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }) : '&mdash;'"></span>
                                    </td>
                                    <td class="border-b border-slate-100 px-4 py-3 text-slate-600 whitespace-nowrap text-sm" x-text="row.employee?.designation"></td>
                                    <td class="border-b border-slate-100 px-3 py-3 text-slate-500 text-sm" x-text="row.employee?.kafala_status"></td>
                                    <td class="border-b border-r border-slate-100 px-3 py-3 text-slate-600 whitespace-nowrap text-sm" x-text="row.employee?.branch_name"></td>

                                    <td class="border-b border-slate-100 px-4 py-3 text-right font-mono tabular-nums text-slate-800 text-sm" x-text="row.working_days"></td>
                                    <td class="border-b border-slate-100 px-4 py-3 text-right font-mono tabular-nums text-rose-600 text-sm" x-text="row.absent_days"></td>
                                    <td class="border-b border-slate-100 px-4 py-3 text-right font-semibold text-slate-800 text-sm" x-text="row.present_days"></td>
                                    <td class="border-b border-slate-100 px-4 py-3 text-right font-mono tabular-nums text-slate-500 text-sm" x-text="parseFloat(row.per_days_salary || 0).toFixed(2)"></td>
                                    <td class="border-b border-r border-slate-100 px-4 py-3 text-right font-mono tabular-nums text-slate-800 text-sm" x-text="row.ot_hours"></td>
                                    <td class="border-b border-r border-amber-100 bg-amber-50/20 px-4 py-3 text-right font-mono tabular-nums text-amber-700 text-sm" x-text="parseFloat(row.advance_loan || 0).toFixed(2)"></td>

                                    <td class="border-b border-slate-100 px-4 py-3 text-right font-mono tabular-nums text-emerald-700 text-sm" x-text="parseFloat(row.basic || 0).toFixed(2)"></td>
                                    <td class="border-b border-slate-100 px-4 py-3 text-right font-mono tabular-nums text-emerald-700 text-sm" x-text="parseFloat(row.house_rent || 0).toFixed(2)"></td>
                                    <td class="border-b border-slate-100 px-4 py-3 text-right font-mono tabular-nums text-emerald-700 text-sm" x-text="parseFloat(row.food || 0).toFixed(2)"></td>
                                    <td class="border-b border-slate-100 px-4 py-3 text-right font-mono tabular-nums text-emerald-700 text-sm" x-text="parseFloat(row.commission || 0).toFixed(2)"></td>
                                    <td class="border-b border-slate-100 px-4 py-3 text-right font-mono tabular-nums text-emerald-700 text-sm" x-text="parseFloat(row.over_time || 0).toFixed(2)"></td>
                                    <td class="border-b border-r border-emerald-100 bg-emerald-50/30 px-4 py-3 text-right font-bold font-mono tabular-nums text-emerald-800 text-sm" x-text="parseFloat(row.gross_salary || 0).toFixed(2)"></td>

                                    <td class="border-b border-slate-100 px-4 py-3 text-right font-mono tabular-nums text-amber-700 text-sm" x-text="parseFloat(row.loan_adjust || 0).toFixed(2)"></td>
                                    <td class="border-b border-slate-100 px-4 py-3 text-right font-mono tabular-nums text-rose-600 text-sm" x-text="parseFloat(row.absent_cost || 0).toFixed(2)"></td>
                                    <td class="border-b border-slate-100 px-4 py-3 text-right font-mono tabular-nums text-rose-700 text-sm" x-text="parseFloat(row.iqama_cost || 0).toFixed(2)"></td>
                                    <td class="border-b border-slate-100 px-4 py-3 text-right font-mono tabular-nums text-rose-700 text-sm" x-text="parseFloat(row.fine || 0).toFixed(2)"></td>
                                    <td class="border-b border-r border-rose-100 bg-rose-50/30 px-4 py-3 text-right font-bold font-mono tabular-nums text-rose-800 text-sm" x-text="parseFloat(row.total_deduction || 0).toFixed(2)"></td>

                                    <td class="border-b border-slate-100 bg-indigo-50/30 px-4 py-3 text-right font-bold font-mono tabular-nums text-indigo-900 text-base" x-text="parseFloat(row.net_salary || 0).toFixed(2)"></td>
                                    <td class="border-b border-slate-100 px-4 py-3 text-right font-mono tabular-nums text-amber-700 text-sm" x-text="parseFloat(row.remaining_loan || 0).toFixed(2)"></td>
                                    <td class="border-b border-slate-100 px-4 py-3 text-right font-mono tabular-nums text-slate-800 text-sm" x-text="parseFloat(row.bank_pay || 0).toFixed(2)"></td>
                                    <td class="border-b border-slate-100 px-3 py-3 text-center whitespace-nowrap">
                                        <select :value="row.payment_status || 'unpaid'"
                                                @change="handlePaymentStatusChange(row.id, $event.target.value)"
                                                :class="row.payment_status === 'paid' ? 'bg-emerald-50 text-emerald-700 border-emerald-200' : 'bg-amber-50 text-amber-700 border-amber-200'"
                                                class="rounded-lg px-2 py-1 text-xs font-semibold border outline-none">
                                            <option value="unpaid">Unpaid</option>
                                            <option value="paid">Paid</option>
                                        </select>
                                        <template x-if="row.payment_status === 'paid'">
                                            <span>
                                                <button type="button" @click="handlePrintInvoice(row)" class="ml-1.5 rounded-md p-1.5 text-indigo-400 transition-colors hover:bg-indigo-100 hover:text-indigo-700" title="Print invoice">
                                                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0110.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0l.229 2.523a1.125 1.125 0 01-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.318 0h1.091A2.25 2.25 0 0021 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 00-1.913-.247M6.34 18H5.25A2.25 2.25 0 013 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 011.913-.247m10.5 0a48.536 48.536 0 00-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.659M18 10.5h.008v.008H18V10.5zm-3 0h.008v.008H15V10.5z"/></svg>
                                                </button>
                                                <button type="button" @click="handleDownloadInvoice(row)" class="ml-1 rounded-md p-1.5 text-emerald-400 transition-colors hover:bg-emerald-100 hover:text-emerald-700" title="Download invoice">
                                                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg>
                                                </button>
                                            </span>
                                        </template>
                                    </td>
                                    <td class="border-b border-slate-100 px-3 py-3 text-center">
                                        <div class="flex items-center justify-center gap-1">
                                            <button type="button" @click="handleEditOpen(row)" class="rounded-md p-1.5 text-slate-400 transition-colors hover:bg-amber-100 hover:text-amber-700" title="Edit entry">
                                                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg>
                                            </button>
                                            <button type="button" @click="confirmDeleteId = row.id" class="rounded-md p-1.5 text-slate-300 transition-colors hover:bg-rose-100 hover:text-rose-600" title="Remove entry">
                                                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/></svg>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </template>
                            <tr x-show="filteredEntries.length === 0">
                                <td colspan="29" class="px-6 py-12 text-center text-sm text-slate-500">No payroll entries found.</td>
                            </tr>
                        </tbody>
                        {{-- Footer --}}
                        <tfoot class="sticky bottom-0 z-20">
                            <tr class="bg-gradient-to-r from-slate-100 via-slate-50 to-slate-100">
                                <td class="sticky left-0 z-30 bg-gradient-to-r from-slate-100 via-slate-50 to-slate-100 border-t-2 border-slate-300 px-3 py-4"></td>
                                <td class="sticky left-[100px] z-30 bg-gradient-to-r from-slate-100 via-slate-50 to-slate-100 border-t-2 border-slate-300 px-3 py-4"></td>
                                <td colspan="4" class="border-t-2 border-slate-300 px-4 py-4 text-right text-xs font-bold uppercase tracking-wider text-slate-600">
                                    <span x-text="filteredEntries.length"></span> employees &middot; Total
                                </td>

                                <td class="border-t-2 border-slate-300 px-4 py-4 text-right font-bold text-slate-800 text-sm" x-text="totals.working_days"></td>
                                <td class="border-t-2 border-slate-300 px-4 py-4 text-right font-bold text-rose-700 text-sm" x-text="totals.absent_days"></td>
                                <td class="border-t-2 border-slate-300 px-4 py-4 text-right font-bold text-slate-800 text-sm" x-text="totals.present_days"></td>
                                <td class="border-t-2 border-slate-300 px-4 py-4 text-right text-slate-400 text-sm">&mdash;</td>
                                <td class="border-t-2 border-r border-slate-300 px-4 py-4 text-right font-bold text-slate-800 text-sm" x-text="totals.ot_hours"></td>
                                <td class="border-t-2 border-r border-amber-200 bg-amber-50/30 px-4 py-4 text-right font-bold font-mono tabular-nums text-amber-800 text-sm" x-text="totals.advance_loan.toFixed(2)"></td>

                                <td class="border-t-2 border-slate-300 px-4 py-4 text-right font-bold font-mono tabular-nums text-emerald-800 text-sm" x-text="totals.basic.toFixed(2)"></td>
                                <td class="border-t-2 border-slate-300 px-4 py-4 text-right font-bold font-mono tabular-nums text-emerald-800 text-sm" x-text="totals.house_rent.toFixed(2)"></td>
                                <td class="border-t-2 border-slate-300 px-4 py-4 text-right font-bold font-mono tabular-nums text-emerald-800 text-sm" x-text="totals.food.toFixed(2)"></td>
                                <td class="border-t-2 border-slate-300 px-4 py-4 text-right font-bold font-mono tabular-nums text-emerald-800 text-sm" x-text="totals.commission.toFixed(2)"></td>
                                <td class="border-t-2 border-slate-300 px-4 py-4 text-right font-bold font-mono tabular-nums text-emerald-800 text-sm" x-text="totals.over_time.toFixed(2)"></td>
                                <td class="border-t-2 border-emerald-300 bg-emerald-100/50 px-4 py-4 text-right font-bold font-mono tabular-nums text-emerald-900 text-sm" x-text="totals.gross_salary.toFixed(2)"></td>

                                <td class="border-t-2 border-slate-300 px-4 py-4 text-right font-bold font-mono tabular-nums text-amber-800 text-sm" x-text="totals.loan_adjust.toFixed(2)"></td>
                                <td class="border-t-2 border-slate-300 px-4 py-4 text-right font-bold font-mono tabular-nums text-rose-700 text-sm" x-text="totals.absent_cost.toFixed(2)"></td>
                                <td class="border-t-2 border-slate-300 px-4 py-4 text-right font-bold font-mono tabular-nums text-rose-700 text-sm" x-text="totals.iqama_cost.toFixed(2)"></td>
                                <td class="border-t-2 border-slate-300 px-4 py-4 text-right font-bold font-mono tabular-nums text-rose-700 text-sm" x-text="totals.fine.toFixed(2)"></td>
                                <td class="border-t-2 border-rose-300 bg-rose-100/50 px-4 py-4 text-right font-bold font-mono tabular-nums text-rose-900 text-sm" x-text="totals.total_deduction.toFixed(2)"></td>

                                <td class="border-t-2 border-indigo-300 bg-indigo-100/50 px-4 py-4 text-right font-bold font-mono tabular-nums text-indigo-900 text-base" x-text="totals.net_salary.toFixed(2)"></td>
                                <td class="border-t-2 border-slate-300 px-4 py-4 text-right font-bold font-mono tabular-nums text-amber-800 text-sm" x-text="totals.remaining_loan.toFixed(2)"></td>
                                <td class="border-t-2 border-slate-300 px-4 py-4 text-right font-bold font-mono tabular-nums text-slate-800 text-sm" x-text="totals.bank_pay.toFixed(2)"></td>
                                <td class="border-t-2 border-slate-300 px-3 py-4 text-center text-xs text-slate-400">&mdash;</td>
                                <td class="border-t-2 border-slate-300"></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

            {{-- Loading --}}
            <div x-show="loading" class="flex items-center justify-center py-20">
                <div class="h-8 w-8 animate-spin rounded-full border-4 border-amber-200 border-t-amber-600"></div>
            </div>

            {{-- Summary Cards --}}
            <template x-if="!loading && filteredEntries.length > 0">
                <div class="mt-6 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
                    <div class="rounded-xl border border-emerald-200 bg-gradient-to-br from-emerald-50 to-white p-5">
                        <p class="text-xs font-bold uppercase tracking-widest text-emerald-600">Total Earnings</p>
                        <p class="mt-2 text-2xl font-bold text-emerald-900 font-mono tabular-nums" x-text="totals.gross_salary.toFixed(2)"></p>
                        <p class="mt-1 text-sm text-emerald-600">Gross salary before deductions</p>
                    </div>
                    <div class="rounded-xl border border-rose-200 bg-gradient-to-br from-rose-50 to-white p-5">
                        <p class="text-xs font-bold uppercase tracking-widest text-rose-600">Total Deductions</p>
                        <p class="mt-2 text-2xl font-bold text-rose-900 font-mono tabular-nums" x-text="totals.total_deduction.toFixed(2)"></p>
                        <p class="mt-1 text-sm text-rose-600">Loan, absent, iqama, fines</p>
                    </div>
                    <div class="rounded-xl border border-indigo-200 bg-gradient-to-br from-indigo-50 to-white p-5">
                        <p class="text-xs font-bold uppercase tracking-widest text-indigo-600">Total Net Payable</p>
                        <p class="mt-2 text-2xl font-bold text-indigo-900 font-mono tabular-nums" x-text="totals.net_salary.toFixed(2)"></p>
                        <p class="mt-1 text-sm text-indigo-600">After all deductions &amp; bank pay</p>
                    </div>
                    <div class="rounded-xl border border-amber-200 bg-gradient-to-br from-amber-50 to-white p-5">
                        <p class="text-xs font-bold uppercase tracking-widest text-amber-600">Remaining Loans</p>
                        <p class="mt-2 text-2xl font-bold text-amber-900 font-mono tabular-nums" x-text="totals.remaining_loan.toFixed(2)"></p>
                        <p class="mt-1 text-sm text-amber-600">Total outstanding loan balance</p>
                    </div>
                </div>
            </template>

            {{-- Calculation Rules --}}
            <div class="mt-6 rounded-xl border border-slate-200 bg-slate-50 p-5">
                <div class="flex items-center gap-2.5 text-slate-600">
                    <svg class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"/></svg>
                    <span class="text-xs font-semibold uppercase tracking-widest text-slate-500">Calculation Rules</span>
                </div>
                <div class="mt-3 grid gap-x-10 gap-y-1.5 text-sm text-slate-500 sm:grid-cols-2 lg:grid-cols-4">
                    <span>Present Days = Working Days − Absent Days</span>
                    <span>Per Day Salary = Per Day Payment or Basic / Month Days</span>
                    <span>O.T = Manually entered by admin</span>
                    <span>Gross = Basic + H.Rent + Food + Comm. + O.T</span>
                    <span>Absent Cost = Absent Days × Per Day Salary</span>
                    <span>Total Ded. = Loan Adj. + Absent Cost + Iqama + Fine</span>
                    <span>Net Payable = Gross − Total Ded. − Bank Pay</span>
                    <span>Rem. Loan = Advance Loan − Loan Adjust</span>
                </div>
            </div>
        </div>

        {{-- Edit Modal --}}
        <div x-show="editingRow && editForm" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm" @click="handleEditCancel()">
            <div class="max-h-[90vh] w-full max-w-3xl overflow-y-auto rounded-2xl border border-slate-200 bg-white p-8 shadow-2xl" @click.stop>
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <svg class="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg>
                        <span class="text-xl font-bold text-slate-900"><span x-text="editForm?.employee?.name"></span> &mdash; Edit Salary Entry</span>
                    </div>
                    <button @click="handleEditCancel()" class="rounded-lg p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-600">
                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>
                </div>

                <div class="mt-6 grid gap-6 sm:grid-cols-3">
                    {{-- Attendance --}}
                    <div class="space-y-3 rounded-xl border border-slate-200 bg-slate-50 p-4">
                        <p class="text-xs font-bold uppercase tracking-widest text-slate-500">Attendance</p>
                        <div>
                            <label class="mb-1 block text-xs font-semibold text-slate-500">Work Days</label>
                            <input type="number" :value="editForm?.working_days || ''" @input="handleEditFormChange('working_days', Math.max(0, Number($event.target.value)))" class="w-full rounded-lg border border-slate-200 px-4 py-2.5 text-sm outline-none focus:border-amber-400 focus:ring-2 focus:ring-amber-200/50">
                        </div>
                        <div>
                            <label class="mb-1 block text-xs font-semibold text-slate-500">Absent Days</label>
                            <input type="number" :value="editForm?.absent_days || ''" @input="handleEditFormChange('absent_days', Math.max(0, Number($event.target.value)))" class="w-full rounded-lg border border-slate-200 px-4 py-2.5 text-sm outline-none focus:border-rose-400 focus:ring-2 focus:ring-rose-200/50">
                        </div>
                        <div>
                            <label class="mb-1 block text-xs font-semibold text-slate-500">OT Hours</label>
                            <input type="number" step="any" :value="editForm?.ot_hours || ''" @input="handleEditFormChange('ot_hours', Math.max(0, Number($event.target.value)))" class="w-full rounded-lg border border-slate-200 px-4 py-2.5 text-sm outline-none focus:border-amber-400 focus:ring-2 focus:ring-amber-200/50">
                        </div>
                        <div>
                            <label class="mb-1 block text-xs font-semibold text-slate-500">Advance Loan</label>
                            <input type="number" step="any" :value="editForm?.advance_loan || ''" @input="handleEditFormChange('advance_loan', Math.max(0, Number($event.target.value)))" class="w-full rounded-lg border border-amber-200 px-4 py-2.5 text-sm outline-none focus:border-amber-400 focus:ring-2 focus:ring-amber-200/50">
                        </div>
                    </div>

                    {{-- Earnings --}}
                    <div class="space-y-3 rounded-xl border border-emerald-200 bg-emerald-50/30 p-4">
                        <p class="text-xs font-bold uppercase tracking-widest text-emerald-600">Earnings</p>
                        <div>
                            <label class="mb-1 block text-xs font-semibold text-emerald-600">Basic</label>
                            <input type="number" step="any" :value="editForm?.basic || ''" @input="handleEditFormChange('basic', Math.max(0, Number($event.target.value)))" class="w-full rounded-lg border border-emerald-200 px-4 py-2.5 text-sm outline-none focus:border-emerald-400 focus:ring-2 focus:ring-emerald-200/50">
                        </div>
                        <div>
                            <label class="mb-1 block text-xs font-semibold text-emerald-600">House Rent</label>
                            <input type="number" step="any" :value="editForm?.house_rent || ''" @input="handleEditFormChange('house_rent', Math.max(0, Number($event.target.value)))" class="w-full rounded-lg border border-emerald-200 px-4 py-2.5 text-sm outline-none focus:border-emerald-400 focus:ring-2 focus:ring-emerald-200/50">
                        </div>
                        <div>
                            <label class="mb-1 block text-xs font-semibold text-emerald-600">Food</label>
                            <input type="number" step="any" :value="editForm?.food || ''" @input="handleEditFormChange('food', Math.max(0, Number($event.target.value)))" class="w-full rounded-lg border border-emerald-200 px-4 py-2.5 text-sm outline-none focus:border-emerald-400 focus:ring-2 focus:ring-emerald-200/50">
                        </div>
                        <div>
                            <label class="mb-1 block text-xs font-semibold text-emerald-600">Commission</label>
                            <input type="number" step="any" :value="editForm?.commission || ''" @input="handleEditFormChange('commission', Math.max(0, Number($event.target.value)))" class="w-full rounded-lg border border-emerald-200 px-4 py-2.5 text-sm outline-none focus:border-emerald-400 focus:ring-2 focus:ring-emerald-200/50">
                        </div>
                        <div>
                            <label class="mb-1 block text-xs font-semibold text-emerald-600">O.T Pay</label>
                            <input type="number" step="any" :value="editForm?.over_time || ''" @input="handleEditFormChange('over_time', Math.max(0, Number($event.target.value)))" class="w-full rounded-lg border border-emerald-200 px-4 py-2.5 text-sm outline-none focus:border-emerald-400 focus:ring-2 focus:ring-emerald-200/50">
                        </div>
                    </div>

                    {{-- Deductions --}}
                    <div class="space-y-3 rounded-xl border border-rose-200 bg-rose-50/30 p-4">
                        <p class="text-xs font-bold uppercase tracking-widest text-rose-600">Deductions</p>
                        <div>
                            <label class="mb-1 block text-xs font-semibold text-rose-600">Loan Adjust</label>
                            <input type="number" step="any" :value="editForm?.loan_adjust || ''" @input="handleEditFormChange('loan_adjust', Math.max(0, Number($event.target.value)))" class="w-full rounded-lg border border-rose-200 px-4 py-2.5 text-sm outline-none focus:border-rose-400 focus:ring-2 focus:ring-rose-200/50">
                        </div>
                        <div>
                            <label class="mb-1 block text-xs font-semibold text-rose-600">Iqama Cost</label>
                            <input type="number" step="any" :value="editForm?.iqama_cost || ''" @input="handleEditFormChange('iqama_cost', Math.max(0, Number($event.target.value)))" class="w-full rounded-lg border border-rose-200 px-4 py-2.5 text-sm outline-none focus:border-rose-400 focus:ring-2 focus:ring-rose-200/50">
                        </div>
                        <div>
                            <label class="mb-1 block text-xs font-semibold text-rose-600">Fine</label>
                            <input type="number" step="any" :value="editForm?.fine || ''" @input="handleEditFormChange('fine', Math.max(0, Number($event.target.value)))" class="w-full rounded-lg border border-rose-200 px-4 py-2.5 text-sm outline-none focus:border-rose-400 focus:ring-2 focus:ring-rose-200/50">
                        </div>
                        <div>
                            <label class="mb-1 block text-xs font-semibold text-rose-600">Bank Pay</label>
                            <input type="number" step="any" :value="editForm?.bank_pay || ''" @input="handleEditFormChange('bank_pay', Math.max(0, Number($event.target.value)))" class="w-full rounded-lg border border-rose-200 px-4 py-2.5 text-sm outline-none focus:border-rose-400 focus:ring-2 focus:ring-rose-200/50">
                        </div>
                    </div>
                </div>

                {{-- Computed values in modal --}}
                <div class="mt-4 grid gap-4 rounded-xl border border-indigo-200 bg-indigo-50/30 p-4 sm:grid-cols-4">
                    <div>
                        <p class="text-xs font-semibold text-indigo-500">Present Days</p>
                        <p class="text-lg font-bold text-indigo-900 font-mono" x-text="editForm?.present_days"></p>
                    </div>
                    <div>
                        <p class="text-xs font-semibold text-indigo-500">Gross Salary</p>
                        <p class="text-lg font-bold text-indigo-900 font-mono" x-text="editForm?.gross_salary?.toFixed(2)"></p>
                    </div>
                    <div>
                        <p class="text-xs font-semibold text-indigo-500">Total Deduction</p>
                        <p class="text-lg font-bold text-rose-700 font-mono" x-text="editForm?.total_deduction?.toFixed(2)"></p>
                    </div>
                    <div>
                        <p class="text-xs font-semibold text-indigo-500">Net Payable</p>
                        <p class="text-lg font-bold text-indigo-900 font-mono" x-text="editForm?.net_salary?.toFixed(2)"></p>
                    </div>
                </div>

                {{-- Modal actions --}}
                <div class="mt-6 flex items-center justify-end gap-3">
                    <button @click="handleEditCancel()" class="rounded-lg px-5 py-2.5 text-sm font-semibold text-slate-500 transition-all hover:bg-slate-100">Cancel</button>
                    <button @click="handleEditSave()" class="inline-flex items-center gap-2 rounded-lg bg-amber-600 px-6 py-2.5 text-sm font-semibold text-white shadow-md transition-all hover:bg-amber-700 hover:shadow-lg">
                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
                        Save Changes
                    </button>
                </div>
            </div>
        </div>

        {{-- Delete Modal --}}
        <div x-show="confirmDeleteId" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40" @click.self="confirmDeleteId = null">
            <div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-2xl">
                <h3 class="text-lg font-bold text-slate-900">Delete Entry</h3>
                <p class="mt-2 text-sm text-slate-600">Are you sure? This cannot be undone.</p>
                <div class="mt-6 flex items-center gap-3 justify-end">
                    <button @click="confirmDeleteId = null" class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50 transition-colors">Cancel</button>
                    <button @click="handleDeleteEntry(filteredEntries.find(e => e.id === confirmDeleteId))" :disabled="deleting"
                            :class="deleting ? 'opacity-50 cursor-not-allowed' : ''"
                            class="rounded-xl bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-red-700 transition-colors">
                        <span x-show="!deleting">Delete</span>
                        <span x-show="deleting">Deleting...</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection