@extends('layouts.app')
@section('title', 'Cash Recon')
@section('content')

@php
    $isAdmin = auth()->user()->hasAnyRole('Super Admin', 'Hospital Admin');
@endphp

<div class="max-w-5xl mx-auto">
    <div class="flex flex-wrap items-baseline justify-between gap-3 mb-4">
        <div>
            <h1 class="text-lg font-bold text-gray-900">Cash Recon</h1>
            <p class="text-xs text-gray-400">Daily cash reconciliation by shift · {{ now()->format('l, d M Y · H:i') }}</p>
        </div>
    </div>

    {{-- Date + Shift selector form. GET so URL stays bookmarkable.
         Defaults to today + current shift; receptionist can change to any
         past date for backfills. (Issue #17 — May 2 2026) --}}
    <form method="GET" class="bg-white border border-gray-200 rounded-lg p-3 mb-4 flex flex-wrap items-end gap-3">
        <div>
            <label class="block text-[10px] text-gray-500 font-semibold uppercase mb-1">Date</label>
            <input type="date" name="date" value="{{ $shiftDate }}"
                   max="{{ today()->format('Y-m-d') }}"
                   class="form-input text-sm w-40">
        </div>
        <div>
            <label class="block text-[10px] text-gray-500 font-semibold uppercase mb-1">Shift</label>
            <select name="shift" class="form-input text-sm w-32">
                <option value="day"   {{ $shiftLabel === 'day'   ? 'selected' : '' }}>☀ Day</option>
                <option value="night" {{ $shiftLabel === 'night' ? 'selected' : '' }}>☾ Night</option>
            </select>
        </div>
        <button type="submit" class="btn-primary px-4 py-2 text-sm">Load Shift</button>
        @if(request()->hasAny(['date', 'shift']))
            <a href="{{ route('billing.cashier.closing') }}" class="btn-secondary px-4 py-2 text-sm">Back to Today</a>
        @endif
    </form>

    @if(session('success'))
    <div class="bg-green-50 border border-green-200 rounded-lg px-3 py-2 mb-3 text-xs text-green-800 flex items-center justify-between gap-3">
        <span>{{ session('success') }}</span>
        @if($nextMissing)
        <a href="{{ route('billing.cashier.closing', ['date' => $nextMissing->date->format('Y-m-d'), 'shift' => $nextMissing->shift]) }}"
           class="text-xs font-bold text-green-800 hover:text-green-900 whitespace-nowrap">
            Next Missing: {{ $nextMissing->label }} →
        </a>
        @endif
    </div>
    @endif

    {{-- Shift window banner --}}
    <div class="bg-blue-50 border border-blue-200 rounded-lg px-4 py-2 mb-4 text-xs text-blue-800 flex items-center gap-3 flex-wrap">
        <span class="font-bold uppercase tracking-wide">{{ ucfirst($shiftLabel) }} Shift</span>
        <span>·</span>
        <span>Anchor date: <strong>{{ \Carbon\Carbon::parse($shiftDate)->format('d M Y') }}</strong></span>
        <span>·</span>
        <span>Window: {{ $startsAt->format('d M, H:i') }} → {{ $endsAt->format('d M, H:i') }}</span>
    </div>

    @if($existingClosing)
    <div class="bg-amber-50 border border-amber-200 rounded-lg px-4 py-3 mb-4 text-sm text-amber-800">
        <p class="font-bold mb-1">⚠ A closing has already been submitted for this shift.</p>
        <p class="text-xs">
            Submitted by {{ $existingClosing->cashier->name ?? '—' }} on {{ $existingClosing->created_at->format('d M, H:i') }}.
            Cash collected: KES {{ number_format($existingClosing->cash_collected, 2) }};
            deposited: KES {{ number_format($existingClosing->amount_deposited, 2) }};
            variance: <strong>{{ $existingClosing->variance >= 0 ? '+' : '' }}{{ number_format($existingClosing->variance, 2) }}</strong>.
        </p>
        <p class="text-xs mt-1">Submitting again will create a second row (rare scenarios like split shifts may need this).</p>
    </div>
    @endif

    {{-- Recon panel --}}
    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden mb-5">
        <div class="px-5 py-3 border-b bg-gray-50">
            <h3 class="text-sm font-bold text-gray-800">Reconciliation</h3>
            <p class="text-[11px] text-gray-500 mt-0.5">Cash collected and expenses are computed live from the system.</p>
        </div>
        <table class="w-full text-sm">
            <tbody class="divide-y divide-gray-100">
                <tr>
                    <td class="px-5 py-2.5 text-gray-600">Cash collected (system)</td>
                    <td class="px-5 py-2.5 text-right font-mono text-emerald-700">{{ number_format($cashCollected, 2) }}</td>
                </tr>
                {{-- Cash expenses row: clickable to expand the breakdown.
                     Expense payments are usually 0–3 per shift but receptionists
                     have asked to see them line-by-line so they can confirm
                     against physical receipts before submitting the deposit. --}}
                <tr class="cursor-pointer hover:bg-gray-50" onclick="toggleCashExpenseList()" id="cashExpRow">
                    <td class="px-5 py-2.5 text-gray-600 flex items-center gap-2">
                        <svg id="cashExpChevron" class="w-3 h-3 text-gray-400 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                        − Cash expenses paid
                        <span class="text-[10px] text-gray-400 font-normal">({{ $cashExpensePayments->count() }} item{{ $cashExpensePayments->count() === 1 ? '' : 's' }})</span>
                    </td>
                    <td class="px-5 py-2.5 text-right font-mono text-red-600">{{ number_format($cashExpenses, 2) }}</td>
                </tr>
                {{-- Expandable detail row. Hidden by default so the panel stays
                     compact for the 90 % case where the deduction is small or zero. --}}
                <tr id="cashExpDetail" class="hidden bg-red-50/30">
                    <td colspan="2" class="px-5 py-3">
                        @if($cashExpensePayments->isEmpty())
                            <p class="text-xs text-gray-400 italic">No cash expenses paid during this shift window.</p>
                        @else
                            <table class="w-full text-xs">
                                <thead>
                                    <tr class="text-[10px] uppercase text-gray-500 font-semibold">
                                        <th class="text-left pb-1">Time</th>
                                        <th class="text-left pb-1">Expense</th>
                                        <th class="text-left pb-1">Supplier</th>
                                        <th class="text-left pb-1">Reference</th>
                                        <th class="text-right pb-1">Amount</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-red-100">
                                    @foreach($cashExpensePayments as $cep)
                                    <tr>
                                        <td class="py-1.5 text-gray-500 font-mono">{{ $cep->created_at->format('H:i') }}</td>
                                        <td class="py-1.5 text-gray-700 truncate max-w-[200px]">{{ $cep->expense->description ?? '—' }}</td>
                                        <td class="py-1.5 text-gray-600">{{ $cep->expense->vendor ?? '—' }}</td>
                                        <td class="py-1.5 text-gray-500 font-mono">{{ $cep->reference_number ?? '—' }}</td>
                                        <td class="py-1.5 text-right font-mono text-red-700 font-semibold">{{ number_format($cep->amount, 2) }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr class="border-t-2 border-red-200">
                                        <td colspan="4" class="pt-1.5 text-right text-[10px] uppercase text-gray-500 font-semibold">Total</td>
                                        <td class="pt-1.5 text-right font-mono text-red-700 font-bold">{{ number_format($cashExpenses, 2) }}</td>
                                    </tr>
                                </tfoot>
                            </table>
                        @endif
                    </td>
                </tr>
                <tr class="bg-blue-50/50">
                    <td class="px-5 py-2.5 font-bold text-gray-800">Expected to deposit</td>
                    <td class="px-5 py-2.5 text-right font-mono font-bold text-blue-700 text-base">{{ number_format($expectedToDeposit, 2) }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        function toggleCashExpenseList() {
            const row = document.getElementById('cashExpDetail');
            const chev = document.getElementById('cashExpChevron');
            const isHidden = row.classList.toggle('hidden');
            // Rotate chevron 90° when expanded so it acts as a disclosure
            // indicator. CSS transition handles the smoothness.
            chev.style.transform = isHidden ? '' : 'rotate(90deg)';
        }
    </script>

    {{-- Outstanding shifts block (Q2-C policy)
         If the cashier has earlier shifts that were submitted without a
         deposit, they can't record a new one until those are cleared. Admin
         roles bypass this check on the controller side, so for them this
         panel still renders but the button stays enabled. --}}
    @if(isset($outstandingShifts) && $outstandingShifts->isNotEmpty())
    @php $isAdminBypass = Auth::user()->hasAnyRole('Super Admin', 'Hospital Admin', 'Finance User'); @endphp
    <div class="bg-red-50 border-2 border-red-300 rounded-xl p-4 mb-5">
        <div class="flex items-start gap-3">
            <svg class="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.72-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
            <div class="flex-1">
                <p class="font-bold text-red-900 text-sm">
                    {{ $outstandingShifts->count() }} undeposited shift{{ $outstandingShifts->count() === 1 ? '' : 's' }} must be cleared first
                </p>
                <p class="text-xs text-red-700 mt-1">
                    @if($isAdminBypass)
                        (You are an admin — you can still submit, but the cashier responsible needs to deposit these.)
                    @else
                        Record the deposit for these earlier shifts before submitting a new one. Click any row to jump there.
                    @endif
                </p>
                <ul class="mt-2 space-y-1">
                    @foreach($outstandingShifts as $o)
                    <li class="text-xs">
                        <a href="{{ route('billing.cashier.closing', ['shift' => $o->shift, 'date' => $o->date->format('Y-m-d')]) }}" class="text-red-700 underline hover:text-red-900 font-mono">
                            {{ $o->date->format('d M Y') }} · {{ ucfirst($o->shift) }}
                        </a>
                        <span class="text-red-600">·</span>
                        <span class="text-red-800">{{ $o->cashier->name ?? '—' }}</span>
                        <span class="text-red-600">·</span>
                        <span class="text-red-800">expected KES {{ number_format($o->expectedToDeposit(), 0) }}</span>
                    </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
    @endif

    {{-- Submit form --}}
    <div class="bg-white rounded-xl border border-gray-200 p-5 mb-5">
        <h3 class="text-sm font-bold text-gray-800 mb-3">Record Deposit</h3>

        @if($errors->any())
            <div class="bg-red-50 border border-red-200 rounded-lg p-3 mb-4">
                <ul class="text-xs text-red-700 list-disc pl-5">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
            </div>
        @endif

        <form method="POST" action="{{ route('billing.cashier.store') }}">
            @csrf
            <input type="hidden" name="shift" value="{{ $shiftLabel }}">
            <input type="hidden" name="shift_date" value="{{ $shiftDate }}">

            {{-- Time-window banner. Always shown — green if open, amber if
                 not-yet-open, red if closed. Admins see "admin override
                 active" so they know normal cashiers wouldn't see this
                 as submittable right now. --}}
            @php
                $isAdmin       = auth()->user()->hasAnyRole('Super Admin','Hospital Admin');
                $windowOpen    = $submitWindow['allowed'] ?? true;
                $opensAt       = $submitWindow['opens_at'] ?? null;
                $closesAt      = $submitWindow['closes_at'] ?? null;
                $windowReason  = $submitWindow['reason'] ?? '';
                // For admins, $windowOpen is always true. We still want to
                // visually convey whether a normal cashier could submit
                // right now, so recompute the unprivileged version.
                $now = now();
                $cashierWouldBeBlocked = $opensAt && $closesAt && ($now->lt($opensAt) || $now->gt($closesAt));
            @endphp

            @if($opensAt && $closesAt)
                @if($isAdmin && $cashierWouldBeBlocked)
                    <div class="bg-purple-50 border border-purple-200 rounded-lg px-3 py-2 mb-4 text-xs text-purple-900 flex items-start gap-2">
                        <svg class="w-4 h-4 text-purple-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                        <div>
                            <strong>Admin override active.</strong> Outside cashier window
                            (open {{ $opensAt->format('H:i, d M') }} – {{ $closesAt->format('H:i, d M') }}).
                            A cashier wouldn't be able to submit this right now.
                        </div>
                    </div>
                @elseif(!$windowOpen)
                    <div class="bg-amber-50 border border-amber-300 rounded-lg px-3 py-2 mb-4 text-xs text-amber-900 flex items-start gap-2">
                        <svg class="w-4 h-4 text-amber-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        <div>
                            <strong>Cash recon locked.</strong> {{ $windowReason }}
                        </div>
                    </div>
                @else
                    <div class="bg-emerald-50 border border-emerald-200 rounded-lg px-3 py-2 mb-4 text-xs text-emerald-900 flex items-start gap-2">
                        <svg class="w-4 h-4 text-emerald-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        <div>
                            Recon window open until <strong>{{ $closesAt->format('H:i, d M') }}</strong>.
                        </div>
                    </div>
                @endif
            @endif

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="form-label">Amount Deposited (KES) <span class="text-red-500">*</span></label>
                    <input type="number" name="amount_deposited" step="0.01" min="0"
                           value="{{ old('amount_deposited', $expectedToDeposit) }}"
                           required class="form-input text-sm" id="amtDeposited"
                           oninput="recomputeVariance()">
                    <p class="text-[11px] text-gray-400 mt-1">Pre-filled with expected; edit to actual deposited amount.</p>
                </div>
                <div>
                    <label class="form-label">M-Pesa Reference Code <span class="text-red-500">*</span></label>
                    <input type="text" name="mpesa_deposit_code" value="{{ old('mpesa_deposit_code') }}"
                           required class="form-input text-sm uppercase" placeholder="e.g. SAB1XYZ987">
                </div>
                <div>
                    <label class="form-label">Deposited By (optional)</label>
                    <input type="text" name="deposited_by" value="{{ old('deposited_by') }}"
                           class="form-input text-sm" placeholder="Name or initials">
                </div>
                <div>
                    <label class="form-label">Variance (computed)</label>
                    <p class="text-base font-mono font-bold mt-1" id="varianceDisplay">—</p>
                    <p class="text-[11px] text-gray-400">Positive = shortage. Negative = over-deposit.</p>
                </div>
            </div>

            <div class="mt-4">
                <label class="form-label">Variance Reason (required if non-zero)</label>
                <textarea name="variance_reason" rows="2" class="form-input text-sm" placeholder="Explain any discrepancy.">{{ old('variance_reason') }}</textarea>
            </div>

            <div class="mt-3">
                <label class="form-label">Notes (optional)</label>
                <textarea name="notes" rows="2" class="form-input text-sm">{{ old('notes') }}</textarea>
            </div>

            @php
                $hasOutstanding = isset($outstandingShifts)
                    && $outstandingShifts->isNotEmpty()
                    && !Auth::user()->hasAnyRole('Super Admin', 'Hospital Admin', 'Finance User');
                // Submit is blocked if EITHER outstanding shifts exist OR the
                // time window is closed for this user. Admin bypasses both.
                $blockSubmit = $hasOutstanding || !$windowOpen;
                $blockReason = !$windowOpen
                    ? $windowReason
                    : ($hasOutstanding ? 'Clear the outstanding shifts above first' : '');
            @endphp
            <button type="submit"
                    class="btn-success px-6 py-2.5 mt-5 {{ $blockSubmit ? 'opacity-40 cursor-not-allowed' : '' }}"
                    {{ $blockSubmit ? 'disabled' : '' }}
                    title="{{ $blockReason }}">
                Submit Cash Recon
            </button>
        </form>
    </div>

    {{-- Missing Closings panel — shifts with cash activity but no recon row.
         Always rendered if any are detected. (Issue #17 May 2 2026) --}}
    @if($missingShifts->isNotEmpty())
    <div class="bg-white rounded-xl border border-amber-300 overflow-hidden mb-5">
        <div class="px-5 py-3 border-b bg-amber-50 flex items-baseline justify-between gap-2 flex-wrap">
            <div>
                <h3 class="text-sm font-bold text-amber-900">Missing Closings</h3>
                <p class="text-[11px] text-amber-700">
                    {{ $missingShifts->count() }} shift(s) had cash activity but no recon was submitted. Click any row to load its window.
                </p>
            </div>
            <span class="text-[11px] text-amber-600">Click a row → form fills in for that shift.</span>
        </div>
        <div class="max-h-80 overflow-y-auto">
            <table class="w-full text-xs">
                <thead class="bg-amber-50/60 sticky top-0">
                    <tr>
                        <th class="table-header">Date</th>
                        <th class="table-header">Shift</th>
                        <th class="table-header text-right">Expected to Deposit</th>
                        <th class="table-header"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-amber-100">
                    @foreach($missingShifts as $m)
                    <tr class="hover:bg-amber-50">
                        <td class="table-cell">{{ $m->date->format('d M Y') }} <span class="text-gray-400 text-[10px]">{{ $m->date->format('D') }}</span></td>
                        <td class="table-cell">
                            <span class="inline-block px-2 py-0.5 rounded text-[10px] uppercase font-bold {{ $m->shift === 'day' ? 'bg-emerald-50 text-emerald-700' : 'bg-indigo-50 text-indigo-700' }}">
                                {{ $m->shift === 'day' ? '☀ Day' : '☾ Night' }}
                            </span>
                        </td>
                        <td class="table-cell text-right font-mono font-semibold">KES {{ number_format($m->expected, 2) }}</td>
                        <td class="table-cell text-right">
                            <a href="{{ route('billing.cashier.closing', ['date' => $m->date->format('Y-m-d'), 'shift' => $m->shift]) }}"
                               class="text-amber-700 hover:text-amber-900 text-xs font-bold">Load →</a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @else
    <div class="bg-emerald-50 border border-emerald-200 rounded-lg px-4 py-3 mb-5 text-xs text-emerald-800">
        ✓ All shifts with cash activity have been recon'd. No backfills needed.
    </div>
    @endif

    {{-- Recent closings --}}
    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
        <div class="px-5 py-3 border-b bg-gray-50">
            <h3 class="text-sm font-bold text-gray-800">Recent Closings</h3>
        </div>
        @if($recentClosings->isEmpty())
            <div class="text-center py-6 text-sm text-gray-400">No closings recorded yet.</div>
        @else
        @php
            // Admin tick: only Hospital Admin and Super Admin can verify
            // a cashier's submitted deposit. We compute once and reuse so
            // the per-row check is cheap.
            $canVerifyDeposits = auth()->user()->hasAnyRole('Super Admin', 'Hospital Admin');
        @endphp
        <table class="w-full text-xs">
            <thead class="bg-gray-50">
                <tr>
                    <th class="table-header">Date</th>
                    <th class="table-header">Shift</th>
                    <th class="table-header">Cashier</th>
                    <th class="table-header text-right">Collected</th>
                    <th class="table-header text-right">Expenses</th>
                    <th class="table-header text-right">Expected</th>
                    <th class="table-header text-right">Deposited</th>
                    <th class="table-header text-right">Variance</th>
                    <th class="table-header">M-Pesa Ref</th>
                    <th class="table-header text-center">Verified</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @foreach($recentClosings as $c)
                @php $expected = (float) $c->cash_collected - (float) $c->cash_expenses; @endphp
                <tr class="hover:bg-gray-50">
                    <td class="table-cell">{{ $c->date->format('d M') }}</td>
                    <td class="table-cell">
                        <span class="inline-block px-2 py-0.5 rounded text-[10px] uppercase font-bold {{ $c->shift === 'day' ? 'bg-emerald-50 text-emerald-700' : 'bg-indigo-50 text-indigo-700' }}">
                            {{ $c->shift }}
                        </span>
                    </td>
                    <td class="table-cell">{{ $c->cashier->name ?? '—' }}</td>
                    <td class="table-cell text-right font-mono">{{ number_format($c->cash_collected, 2) }}</td>
                    <td class="table-cell text-right font-mono">{{ number_format($c->cash_expenses, 2) }}</td>
                    <td class="table-cell text-right font-mono font-semibold">{{ number_format($expected, 2) }}</td>
                    <td class="table-cell text-right font-mono">{{ number_format($c->amount_deposited, 2) }}</td>
                    <td class="table-cell text-right font-mono font-bold {{ abs($c->variance) < 0.01 ? 'text-gray-600' : ($c->variance > 0 ? 'text-red-600' : 'text-blue-600') }}">
                        {{ $c->variance >= 0 ? '+' : '' }}{{ number_format($c->variance, 2) }}
                    </td>
                    <td class="table-cell font-mono text-[11px]">{{ $c->mpesa_deposit_code ?: $c->deposit_reference ?: '—' }}</td>
                    <td class="table-cell text-center">
                        @if($c->verified_at)
                            @if($canVerifyDeposits)
                                {{-- Admin view: green "Verified" badge with hover tooltip
                                     showing who verified and when. --}}
                                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-700 text-[10px] font-bold uppercase border border-emerald-200"
                                      title="Verified by {{ $c->verifier->name ?? 'admin' }} on {{ $c->verified_at->format('d M Y, H:i') }}">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                                    Verified
                                </span>
                            @else
                                {{-- Receptionist view post-verification: small grey
                                     confirmation so they know it was reviewed, but
                                     nothing they can act on. Tooltip carries the
                                     who/when so they can answer questions if asked. --}}
                                <span class="inline-flex items-center gap-1 text-gray-400 text-[10px] font-medium"
                                      title="Verified by admin on {{ $c->verified_at->format('d M Y, H:i') }}">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                                    Verified
                                </span>
                            @endif
                        @else
                            @if($canVerifyDeposits)
                                {{-- Admin view: yellow clickable tick button.
                                     Confirms on submit so admin can't fat-finger an
                                     entire shift's deposits by accident. --}}
                                <form method="POST" action="{{ route('billing.cashier.verify', $c) }}" class="inline">
                                    @csrf
                                    <button type="submit"
                                            class="inline-flex items-center justify-center w-7 h-7 rounded-full bg-amber-100 text-amber-700 hover:bg-amber-500 hover:text-white transition-colors border border-amber-300 hover:border-amber-500"
                                            title="Pending — click to verify this deposit"
                                            onclick="return confirm('Confirm deposit of KES {{ number_format($c->amount_deposited, 2) }} by {{ $c->cashier->name ?? '—' }}?\nRef: {{ $c->mpesa_deposit_code ?: $c->deposit_reference ?: 'none' }}');">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                                    </button>
                                </form>
                            @else
                                {{-- Receptionist view pre-verification: yellow
                                     non-clickable pill so they can see it's
                                     pending but not act on it. Disappears
                                     into a small grey badge once admin
                                     verifies (see the branch above). --}}
                                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-amber-50 text-amber-700 text-[10px] font-bold uppercase border border-amber-200"
                                      title="Awaiting admin verification">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                    Pending
                                </span>
                            @endif
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        @endif
    </div>
</div>

@push('scripts')
<script>
const expected = parseFloat({{ $expectedToDeposit }});
function recomputeVariance() {
    const dep = parseFloat(document.getElementById('amtDeposited').value);
    const el = document.getElementById('varianceDisplay');
    if (isNaN(dep)) { el.textContent = '—'; el.className = 'text-base font-mono font-bold mt-1 text-gray-500'; return; }
    const v = expected - dep;
    const sign = v >= 0 ? '+' : '';
    el.textContent = 'KES ' + sign + v.toLocaleString(undefined, {minimumFractionDigits:2, maximumFractionDigits:2});
    if (Math.abs(v) < 0.01) {
        el.className = 'text-base font-mono font-bold mt-1 text-gray-700';
    } else if (v > 0) {
        el.className = 'text-base font-mono font-bold mt-1 text-red-600';
    } else {
        el.className = 'text-base font-mono font-bold mt-1 text-blue-600';
    }
}
document.addEventListener('DOMContentLoaded', recomputeVariance);
</script>
@endpush
@endsection