@extends('layouts.app')
@section('title', 'Expenses')
@section('styles')
<style>.ex-tabs{display:flex;gap:2px;border-bottom:2px solid #e5e7eb;padding:0 4px}.ex-tab{padding:10px 16px;font-size:12px;font-weight:600;color:#6b7280;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;background:none;border-top:none;border-left:none;border-right:none;display:flex;align-items:center;gap:5px}.ex-tab:hover{color:#0069c9;background:#f0f7ff}.ex-tab.active{color:#0069c9;border-bottom-color:#0069c9}.ex-tab .tc{background:#e5e7eb;color:#4b5563;font-size:12px;padding:1px 7px;border-radius:99px;font-weight:700}.ex-tab.active .tc{background:#dbeafe;color:#1e40af}.ex-panel{display:none}.ex-panel.active{display:block}</style>
@endsection
@section('content')

@php
    $isSuperAdmin = auth()->user()->hasRole('Super Admin');
@endphp

<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
    <div><h1 class="text-lg font-bold text-gray-900">Expenses</h1><p class="text-xs text-gray-400">Record obligations, track payments, monitor overdue items</p></div>
    <div class="flex gap-2">
        @if($suppliers->isEmpty())
            <a href="{{ route('expenses.index') }}#suppliers" class="text-xs text-amber-700 bg-amber-50 border border-amber-300 rounded px-3 py-1.5 hover:bg-amber-100">
                No suppliers yet — add one →
            </a>
        @endif
        <button onclick="document.getElementById('addExpenseModal').classList.remove('hidden')" class="btn-primary text-xs flex items-center gap-1">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
            Add Expense
        </button>
    </div>
</div>

@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">{{ session('success') }}</div>
@endif
@if(session('warning'))
<div class="bg-amber-50 border border-amber-200 rounded-lg px-3 py-2 mb-3 text-xs text-amber-800">{{ session('warning') }}</div>
@endif

{{-- Stats cards removed per round 5 iteration. The numbers were duplicated
     elsewhere (Reports + Dashboard) and added noise to the Expenses page. --}}

<div class="bg-white rounded-xl border shadow-sm">
    <div class="ex-tabs">
        <button class="ex-tab active" onclick="exTab(this,'all')">All Expenses</button>
        <button class="ex-tab" onclick="exTab(this,'unpaid')">Unpaid Expenses <span class="tc">{{ $unpaidExpenses->count() }}</span></button>
        <button class="ex-tab" onclick="exTab(this,'history')">Payment History</button>
        <button class="ex-tab" onclick="exTab(this,'suppliers')">Suppliers <span class="tc">{{ $supplierCounts['active'] ?? 0 }}</span></button>
    </div>

    {{-- TAB: All Expenses --}}
    <div id="ex-all" class="ex-panel active">
        <div class="px-5 py-3 border-b bg-gray-50/50">
            <form method="GET" class="flex flex-wrap gap-2 items-end">
                <select name="status" class="form-input text-xs w-32"><option value="">All Status</option>@foreach(['pending','partially_paid','paid','overdue','cancelled'] as $s)<option value="{{ $s }}" {{ request('status')===$s?'selected':'' }}>{{ ucfirst(str_replace('_',' ',$s)) }}</option>@endforeach</select>
                <select name="category" class="form-input text-xs w-36"><option value="">All Categories</option>@foreach(['Utilities','Medical Supplies','Drugs/Pharmacy','Salaries/Locum','Repairs','Transport','Rent','Food/Catering','Insurance','Other'] as $c)<option value="{{ $c }}" {{ request('category')===$c?'selected':'' }}>{{ $c }}</option>@endforeach</select>
                <select name="supplier_id" class="form-input text-xs w-40">
                    <option value="">All Suppliers</option>
                    @foreach($suppliers as $s)
                    <option value="{{ $s->id }}" {{ (string)request('supplier_id')===(string)$s->id ? 'selected':'' }}>{{ $s->name }}</option>
                    @endforeach
                </select>
                <select name="payment_method" class="form-input text-xs w-32"><option value="">All Methods</option>@foreach(['cash'=>'Cash','mpesa'=>'M-Pesa','bank_transfer'=>'Bank Transfer','cheque'=>'Cheque'] as $v=>$l)<option value="{{ $v }}" {{ request('payment_method')===$v?'selected':'' }}>{{ $l }}</option>@endforeach</select>
                <input type="date" name="from" value="{{ request('from') }}" class="form-input text-xs w-32 no-flatpickr">
                <input type="date" name="to" value="{{ request('to') }}" class="form-input text-xs w-32 no-flatpickr">
                <label class="text-xs text-gray-500 flex items-center gap-1 ml-1" title="Show every expense with full pagination (default landing view shows pending + latest 15)">
                    <input type="checkbox" name="show_all" value="1" {{ request('show_all') ? 'checked' : '' }}>
                    Show full history
                </label>
                <button class="btn-primary text-xs">Filter</button>
                @if(request()->hasAny(['status','category','supplier_id','payment_method','from','to','show_all']))<a href="{{ route('expenses.index') }}" class="btn-secondary text-xs">Clear</a>@endif
            </form>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full"><thead><tr class="bg-gray-50">
                {{-- Department + Due Date columns removed per May 2 simplification.
                     Category column removed per round 5 (filter dropdown above still works).
                     Edit column shown only for Super Admin. --}}
                <th class="table-header">Date</th>
                <th class="table-header">Supplier / Payee</th>
                <th class="table-header">Description</th>
                <th class="table-header text-right">Amount</th>
                <th class="table-header text-right">Paid</th>
                <th class="table-header">Method</th>
                <th class="table-header text-right">Balance</th>
                <th class="table-header">Status</th>
                <th class="table-header">Actions</th>
            </tr></thead>
            <tbody>
            @php
                // Span the date cell only over CONTIGUOUS same-date rows.
                // The list isn't always ordered strictly by date (e.g. a paid
                // item can sit between two unpaid ones), so counting every
                // same-date row globally made the rowspan bleed into the next
                // day and shove that row's cells one column to the right —
                // suppliers ended up under the Date column.
                $expIterable = method_exists($expenses, 'getCollection') ? $expenses->getCollection() : $expenses;
                $expRows = collect($expIterable)->values();
                $expRunSize = [];
                $expCnt = $expRows->count();
                for ($i = 0; $i < $expCnt; ) {
                    $d = optional($expRows[$i]->date)->format('Y-m-d');
                    $j = $i + 1;
                    while ($j < $expCnt && optional($expRows[$j]->date)->format('Y-m-d') === $d) { $j++; }
                    $expRunSize[$i] = $j - $i;
                    $i = $j;
                }
                $prevExpDate = null;
            @endphp
            @forelse($expenses as $ex)
            @php
                $esc=['pending'=>'badge-warning','partially_paid'=>'badge-info','paid'=>'badge-success','overdue'=>'badge-danger','cancelled'=>'badge-gray'];
                // Resolve payment method for display:
                //  - no payments yet            → '—'
                //  - one method across payments → that method
                //  - more than one              → 'Mixed' (rare; partial-pay scenarios)
                $methods = $ex->payments->pluck('payment_method')->filter()->unique();
                if ($methods->count() === 0) {
                    $methodLabel = '—';
                    $methodClass = 'text-gray-300';
                } elseif ($methods->count() === 1) {
                    $methodLabel = ['cash'=>'Cash','mpesa'=>'M-Pesa','bank_transfer'=>'Bank','cheque'=>'Cheque'][$methods->first()] ?? ucfirst($methods->first());
                    // Highlight cash so it's visually scannable on the page
                    // — cash recon literally only cares about this one.
                    $methodClass = $methods->first() === 'cash' ? 'text-orange-600 font-semibold' : 'text-gray-600';
                } else {
                    $methodLabel = 'Mixed';
                    $methodClass = 'text-purple-600 font-semibold';
                }
                // Latest payment for the edit modal — Super Admin only.
                $latestPayment = $ex->payments->sortByDesc('id')->first();
                $editPaymentPayload = $latestPayment ? [
                    'expense_id'       => $ex->id,
                    'description'      => $ex->description,
                    'supplier'         => $ex->supplier->name ?? $ex->vendor ?? null,
                    'amount'           => $latestPayment->amount,
                    'payment_method'   => $latestPayment->payment_method,
                    'reference_number' => $latestPayment->reference_number,
                    'payment_date'     => optional($latestPayment->payment_date)->format('d M Y'),
                ] : [];

                // Date-merge logic: only render the Date <td> on the first
                // row of each day, with rowspan = count of that day's rows.
                $thisExpDate    = $ex->date->format('Y-m-d');
                $isFirstOfDay   = $thisExpDate !== $prevExpDate;
                $expGroupSize   = $expRunSize[$loop->index] ?? 1;
                $prevExpDate    = $thisExpDate;
            @endphp
            <tr class="{{ $isFirstOfDay ? 'border-t-2 border-gray-200' : 'border-b border-gray-50' }}" data-row-href="{{ route('expenses.show', $ex) }}">
                @if($isFirstOfDay)
                <td rowspan="{{ $expGroupSize }}" class="table-cell text-xs text-gray-500 font-medium align-top bg-gray-50/30 border-r border-gray-100">{{ $ex->date->format('d M Y') }}</td>
                @endif
                {{-- Category column removed (round 5). Filter dropdown above still works. --}}
                {{-- Prefer linked supplier name; fall back to legacy 'vendor'
                     string for old rows that pre-date the suppliers tab. --}}
                <td class="table-cell text-xs font-medium">{{ $ex->supplier->name ?? $ex->vendor ?? '-' }}</td>
                <td class="table-cell text-xs truncate max-w-[180px]">{{ $ex->description }}</td>
                <td class="table-cell text-xs text-right font-semibold">{{ number_format($ex->amount) }}</td>
                <td class="table-cell text-xs text-right text-green-600">{{ number_format($ex->amount_paid ?? 0) }}</td>
                <td class="table-cell text-xs {{ $methodClass }}">{{ $methodLabel }}</td>
                <td class="table-cell text-xs text-right {{ ($ex->balance ?? $ex->amount) > 0 ? 'text-red-600 font-bold' : '' }}">{{ number_format($ex->balance ?? $ex->amount) }}</td>
                <td class="table-cell"><span class="badge {{ $esc[$ex->status ?? 'pending'] ?? 'badge-gray' }}">{{ ucfirst(str_replace('_',' ',$ex->status ?? 'pending')) }}</span></td>
                <td class="table-cell">
                    <div class="flex flex-wrap gap-1">
                        @if(($ex->status ?? 'pending') !== 'paid' && ($ex->status ?? 'pending') !== 'cancelled')
                        <button onclick="openExpPayModal({{ $ex->id }}, {{ $ex->balance ?? $ex->amount }})" class="text-xs text-green-600 bg-green-50 px-2 py-0.5 rounded hover:bg-green-100 font-medium">Pay</button>
                        @endif
                        @if($isSuperAdmin && $latestPayment)
                        {{-- Super Admin only: edit the most recent payment's
                             method/reference. Backfill mechanism for
                             expenses logged before payment_method was a
                             required field. --}}
                        <button
                            onclick='openEditPaymentModal(@json($editPaymentPayload))'
                            class="text-xs text-purple-600 bg-purple-50 px-2 py-0.5 rounded hover:bg-purple-100 font-medium">Edit</button>
                        @endif
                    </div>
                </td>
            </tr>
            @empty
            <tr><td colspan="9" class="table-cell text-center text-gray-400 py-8">No expenses recorded. Click <strong>+ Add Expense</strong> to create one.</td></tr>
            @endforelse
            </tbody></table>
        </div>
        @if($expenses->hasPages())<div class="px-4 py-3 border-t">{{ $expenses->links() }}</div>@endif
    </div>

    {{-- TAB: Unpaid / Overdue --}}
    <div id="ex-unpaid" class="ex-panel">
        <div class="overflow-x-auto">
            <table class="w-full"><thead><tr class="bg-gray-50">
                {{-- Due Date column kept here because overdue tracking is
                     the whole point of this tab; only the All Expenses
                     table dropped it. --}}
                <th class="table-header">Date</th>
                <th class="table-header">Category</th>
                <th class="table-header">Supplier</th>
                <th class="table-header">Description</th>
                <th class="table-header text-right">Amount</th>
                <th class="table-header text-right">Balance</th>
                <th class="table-header">Due Date</th>
                <th class="table-header">Status</th>
                <th class="table-header">Action</th>
            </tr></thead>
            <tbody>
            @php
                // Date-merge helper for the unpaid table (contiguous runs).
                $unpaidRows = ($unpaidExpenses ?? collect())->values();
                $unpaidRunSize = [];
                $uCnt = $unpaidRows->count();
                for ($i = 0; $i < $uCnt; ) {
                    $d = optional($unpaidRows[$i]->date)->format('Y-m-d');
                    $j = $i + 1;
                    while ($j < $uCnt && optional($unpaidRows[$j]->date)->format('Y-m-d') === $d) { $j++; }
                    $unpaidRunSize[$i] = $j - $i;
                    $i = $j;
                }
                $prevUnpaidDate = null;
                // Running total of balances for the tfoot row.
                $totalUnpaid = ($unpaidExpenses ?? collect())->sum(fn($e) => $e->balance ?? $e->amount);
            @endphp
            @forelse($unpaidExpenses ?? [] as $ex)
            @php
                $thisUnpaidDate  = $ex->date->format('Y-m-d');
                $isFirstOfDayU   = $thisUnpaidDate !== $prevUnpaidDate;
                $unpaidGroupSize = $unpaidRunSize[$loop->index] ?? 1;
                $prevUnpaidDate  = $thisUnpaidDate;
            @endphp
            <tr class="{{ $isFirstOfDayU ? 'border-t-2 border-gray-200' : 'border-b border-gray-50' }} {{ ($ex->is_overdue ?? false) ? 'bg-red-50/30' : '' }}" data-row-href="{{ route('expenses.show', $ex) }}">
                @if($isFirstOfDayU)
                <td rowspan="{{ $unpaidGroupSize }}" class="table-cell text-xs text-gray-500 font-medium align-top bg-gray-50/30 border-r border-gray-100">{{ $ex->date->format('d M Y') }}</td>
                @endif
                <td class="table-cell text-xs">{{ $ex->category }}</td>
                <td class="table-cell text-xs font-medium">{{ $ex->supplier->name ?? $ex->vendor ?? '-' }}</td>
                <td class="table-cell text-xs truncate max-w-[160px]">{{ $ex->description }}</td>
                <td class="table-cell text-xs text-right">{{ number_format($ex->amount) }}</td>
                <td class="table-cell text-xs text-right text-red-600 font-bold">{{ number_format($ex->balance ?? $ex->amount) }}</td>
                <td class="table-cell text-xs {{ ($ex->is_overdue ?? false) ? 'text-red-600 font-bold' : '' }}">{{ $ex->due_date?->format('d M Y') ?? '-' }}</td>
                <td class="table-cell"><span class="badge {{ ($ex->is_overdue ?? false) ? 'badge-danger' : 'badge-warning' }}">{{ ($ex->is_overdue ?? false) ? 'Overdue' : ucfirst(str_replace('_',' ',$ex->status ?? 'pending')) }}</span></td>
                <td class="table-cell"><button onclick="openExpPayModal({{ $ex->id }}, {{ $ex->balance ?? $ex->amount }})" class="text-xs text-green-600 bg-green-50 px-2 py-0.5 rounded hover:bg-green-100 font-medium">Pay</button></td>
            </tr>
            @empty
            <tr><td colspan="9" class="table-cell text-center text-gray-400 py-8">No unpaid or overdue expenses.</td></tr>
            @endforelse
            </tbody>
            {{-- Total Unpaid footer — sum of all balances across visible rows. --}}
            @if(($unpaidExpenses ?? collect())->count() > 0)
            <tfoot>
                <tr class="bg-amber-50 border-t-2 border-amber-200">
                    <td colspan="5" class="table-cell text-xs text-right font-bold text-gray-700 uppercase tracking-wide">Total Unpaid</td>
                    <td class="table-cell text-xs text-right font-extrabold text-red-700">KES {{ number_format($totalUnpaid) }}</td>
                    <td colspan="3" class="table-cell"></td>
                </tr>
            </tfoot>
            @endif
            </table>
        </div>
    </div>

    {{-- TAB: Payment History --}}
    <div id="ex-history" class="ex-panel">
        <div class="overflow-x-auto">
            <table class="w-full"><thead><tr class="bg-gray-50">
                <th class="table-header">Date</th><th class="table-header">Expense</th><th class="table-header">Supplier</th><th class="table-header text-right">Amount Paid</th><th class="table-header">Method</th><th class="table-header">Reference</th><th class="table-header">Paid By</th><th class="table-header">Shift</th>
            </tr></thead>
            <tbody>
            @php
                // Date-merge helper for the payment history table —
                // grouped by payment_date (contiguous runs).
                $payRows = ($expensePayments ?? collect())->values();
                $payRunSize = [];
                $pCnt = $payRows->count();
                for ($i = 0; $i < $pCnt; ) {
                    $d = optional($payRows[$i]->payment_date)->format('Y-m-d');
                    $j = $i + 1;
                    while ($j < $pCnt && optional($payRows[$j]->payment_date)->format('Y-m-d') === $d) { $j++; }
                    $payRunSize[$i] = $j - $i;
                    $i = $j;
                }
                $prevPayDate = null;
            @endphp
            @forelse($expensePayments ?? [] as $ep)
            @php
                $thisPayDate    = $ep->payment_date?->format('Y-m-d');
                $isFirstOfDayP  = $thisPayDate !== $prevPayDate;
                $payGroupSize   = $payRunSize[$loop->index] ?? 1;
                $prevPayDate    = $thisPayDate;
            @endphp
            <tr class="{{ $isFirstOfDayP ? 'border-t-2 border-gray-200' : 'border-b border-gray-50' }}">
                @if($isFirstOfDayP)
                <td rowspan="{{ $payGroupSize }}" class="table-cell text-xs text-gray-500 font-medium align-top bg-gray-50/30 border-r border-gray-100">{{ $ep->payment_date->format('d M Y') }}</td>
                @endif
                <td class="table-cell text-xs">{{ $ep->expense->description ?? '' }}</td>
                <td class="table-cell text-xs font-medium">{{ $ep->expense->supplier->name ?? $ep->expense->vendor ?? '-' }}</td>
                <td class="table-cell text-xs text-right font-semibold text-green-600">KES {{ number_format($ep->amount) }}</td>
                <td class="table-cell text-xs capitalize">{{ str_replace('_',' ',$ep->payment_method) }}</td>
                <td class="table-cell text-xs font-mono">{{ $ep->reference_number ?? '-' }}</td>
                <td class="table-cell text-xs">{{ $ep->payer->name ?? '-' }}</td>
                <td class="table-cell text-xs capitalize">{{ $ep->shift ?? '-' }}</td>
            </tr>
            @empty
            <tr><td colspan="8" class="table-cell text-center text-gray-400 py-8">No expense payments recorded yet.</td></tr>
            @endforelse
            </tbody></table>
        </div>
    </div>

    {{-- TAB: Suppliers (May 12 2026 — folded in from the standalone
         Suppliers sidebar entry so receptionists & finance can manage
         the payee list without leaving the Expenses module). --}}
    @php $supAdmin = auth()->user()->hasAnyRole('Super Admin', 'Hospital Admin'); @endphp
    <div id="ex-suppliers" class="ex-panel">
        <div class="px-5 py-3 border-b bg-gray-50/50 flex flex-wrap items-end justify-between gap-3">
            <form method="GET" class="flex flex-wrap gap-2 items-end flex-1">
                {{-- Preserve any expense-tab filters so switching tabs
                     doesn't blow them away. --}}
                @foreach(['status','category','supplier_id','payment_method','from','to'] as $k)
                    @if(request($k))<input type="hidden" name="{{ $k }}" value="{{ request($k) }}">@endif
                @endforeach
                <input type="text" name="sup_q" value="{{ request('sup_q') }}" placeholder="Search name, phone, KRA pin, contact..." class="form-input text-xs flex-1 min-w-[200px]">
                <div class="flex gap-1 text-xs">
                    @foreach([
                        ['active','Active', $supplierCounts['active']],
                        ['inactive','Inactive', $supplierCounts['inactive']],
                        ['all','All', $supplierCounts['active']+$supplierCounts['inactive']],
                    ] as [$val,$label,$count])
                    <button type="submit" name="sup_show" value="{{ $val }}"
                       class="px-3 py-1.5 rounded border {{ $supShow===$val ? 'bg-blue-600 text-white border-blue-600 font-semibold' : 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50' }}">
                        {{ $label }} <span class="opacity-70">({{ $count }})</span>
                    </button>
                    @endforeach
                </div>
                <button class="btn-primary text-xs">Search</button>
                @if(request()->hasAny(['sup_q','sup_show']))<a href="{{ route('expenses.index') }}#suppliers" class="btn-secondary text-xs">Clear</a>@endif
            </form>
            @if($supAdmin)
            <button onclick="openSupplierModal()" class="btn-primary text-xs flex items-center gap-1">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                Add Supplier
            </button>
            @endif
        </div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead><tr class="bg-gray-50">
                    <th class="table-header">Name</th>
                    <th class="table-header">Contact Person</th>
                    <th class="table-header">Phone</th>
                    <th class="table-header">KRA PIN</th>
                    <th class="table-header">Category</th>
                    <th class="table-header">Status</th>
                    @if($supAdmin)<th class="table-header">Actions</th>@endif
                </tr></thead>
                <tbody>
                @forelse($suppliersList as $s)
                <tr class="border-b border-gray-50 {{ !$s->is_active ? 'bg-gray-50/40 text-gray-400' : '' }}">
                    <td class="table-cell text-xs font-medium">{{ $s->name }}</td>
                    <td class="table-cell text-xs">{{ $s->contact_person ?? '-' }}</td>
                    <td class="table-cell text-xs">{{ $s->phone ?? '-' }}</td>
                    <td class="table-cell text-xs font-mono">{{ $s->kra_pin ?? '-' }}</td>
                    <td class="table-cell text-xs">{{ $s->category ?? '-' }}</td>
                    <td class="table-cell">
                        @if($s->is_active)
                            <span class="badge badge-success">Active</span>
                        @else
                            <span class="badge badge-gray">Inactive</span>
                        @endif
                    </td>
                    @if($supAdmin)
                    <td class="table-cell">
                        <button onclick='openSupplierModal(@json($s))' class="text-xs text-blue-600 bg-blue-50 px-2 py-0.5 rounded hover:bg-blue-100 font-medium">Edit</button>
                        <form method="POST" action="{{ route('suppliers.toggle', $s) }}" class="inline" onsubmit="return confirm('{{ $s->is_active ? 'Deactivate' : 'Reactivate' }} {{ addslashes($s->name) }}?');">
                            @csrf
                            <button type="submit" class="text-xs {{ $s->is_active ? 'text-red-600 bg-red-50 hover:bg-red-100' : 'text-green-600 bg-green-50 hover:bg-green-100' }} px-2 py-0.5 rounded font-medium">
                                {{ $s->is_active ? 'Deactivate' : 'Reactivate' }}
                            </button>
                        </form>
                    </td>
                    @endif
                </tr>
                @empty
                <tr>
                    <td colspan="{{ $supAdmin ? 7 : 6 }}" class="table-cell text-center text-gray-400 py-8">
                        No suppliers found.
                        @if($supAdmin && !request('sup_q'))Click <strong>+ Add Supplier</strong> to create one.@endif
                    </td>
                </tr>
                @endforelse
                </tbody>
            </table>
        </div>
        @if($suppliersList->hasPages())<div class="px-4 py-3 border-t">{{ $suppliersList->links() }}</div>@endif
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════════════════ --}}
{{-- Add Expense Modal                                                    --}}
{{-- ═══════════════════════════════════════════════════════════════════ --}}
<div id="addExpenseModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-lg mx-4 p-6 max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-center mb-4"><h3 class="font-bold text-gray-900">Add Expense</h3><button onclick="document.getElementById('addExpenseModal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600 text-xl">&times;</button></div>
        <form method="POST" action="{{ route('expenses.store') }}">@csrf
            {{-- Department, Due Date, and Notes were dropped from this
                 modal per May 2 2026 simplification. Reception found
                 these fields irrelevant for daily petty-cash entry. --}}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div><label class="form-label">Expense Date *</label><input type="date" name="date" value="{{ date('Y-m-d') }}" required class="form-input"></div>
                <div><label class="form-label">Category *</label>
                    <select name="category" required class="form-input">
                        <option value="">Select…</option>
                        @foreach(['Utilities','Medical Supplies','Drugs/Pharmacy','Salaries/Locum','Repairs','Transport','Rent','Food/Catering','Insurance','Other'] as $c)
                        <option>{{ $c }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="md:col-span-2">
                    <label class="form-label">Supplier / Payee</label>
                    <select name="supplier_id" class="form-input">
                        <option value="">Select supplier…</option>
                        @foreach($suppliers as $s)
                        <option value="{{ $s->id }}">{{ $s->name }}</option>
                        @endforeach
                    </select>
                    @if($suppliers->isEmpty())
                        <p class="text-[11px] text-amber-600 mt-1">No active suppliers — <a href="{{ route('expenses.index') }}#suppliers" class="underline">add one in the Suppliers tab</a> before posting expenses.</p>
                    @else
                        <p class="text-[11px] text-gray-400 mt-1">Need a new supplier? <a href="{{ route('expenses.index') }}#suppliers" class="underline text-blue-600">Add it in the Suppliers tab</a> first.</p>
                    @endif
                </div>
                <div class="md:col-span-2"><label class="form-label">Description *</label><textarea name="description" required class="form-input" rows="2"></textarea></div>
                <div><label class="form-label">Amount (KES) *</label><input type="number" step="0.01" name="amount" required class="form-input"></div>
                <div><label class="form-label">Invoice / Reference No.</label><input type="text" name="invoice_reference" class="form-input"></div>
            </div>

            {{-- Payment status at entry --}}
            <div class="mt-4 p-3 bg-gray-50 rounded-lg border border-gray-200">
                <label class="form-label mb-2">Payment Status</label>
                <div class="flex gap-2">
                    <label class="flex-1 cursor-pointer">
                        <input type="radio" name="paid_on_entry" value="0" class="peer sr-only" checked onchange="togglePaidFields(false)">
                        <div class="p-2.5 text-center text-xs rounded-lg border-2 border-gray-200 peer-checked:border-amber-500 peer-checked:bg-amber-50 peer-checked:text-amber-800 font-semibold">
                            Pending (to be paid later)
                        </div>
                    </label>
                    <label class="flex-1 cursor-pointer">
                        <input type="radio" name="paid_on_entry" value="1" class="peer sr-only" onchange="togglePaidFields(true)">
                        <div class="p-2.5 text-center text-xs rounded-lg border-2 border-gray-200 peer-checked:border-emerald-500 peer-checked:bg-emerald-50 peer-checked:text-emerald-800 font-semibold">
                            Paid now
                        </div>
                    </label>
                </div>

                {{-- Shown only when "Paid now" is selected --}}
                <div id="paidFields" class="hidden grid grid-cols-1 md:grid-cols-2 gap-3 mt-3">
                    <div>
                        <label class="form-label">Payment Method</label>
                        <select name="payment_method" class="form-input">
                            <option value="cash">Cash</option>
                            <option value="mpesa">M-Pesa</option>
                            <option value="bank_transfer">Bank Transfer</option>
                            <option value="cheque">Cheque</option>
                        </select>
                    </div>
                    <div>
                        <label class="form-label">Payment Ref No.</label>
                        <input type="text" name="payment_reference" class="form-input" placeholder="M-Pesa code, cheque #, etc.">
                    </div>
                    {{-- Paid By (round 5) — same dropdown as the Pay modal. --}}
                    <div class="md:col-span-2">
                        <label class="form-label">Paid By</label>
                        <select name="paid_by" class="form-input">
                            @foreach($paidByCandidates as $u)
                                <option value="{{ $u->id }}" {{ $u->id === auth()->id() ? 'selected' : '' }}>{{ $u->name }}{{ $u->id === auth()->id() ? ' (me)' : '' }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <div class="flex justify-end gap-2 mt-4">
                <button type="button" onclick="document.getElementById('addExpenseModal').classList.add('hidden')" class="btn-secondary text-xs">Cancel</button>
                <button type="submit" class="btn-primary text-xs">Save Expense</button>
            </div>
        </form>
        <script>
            function togglePaidFields(show) {
                const panel = document.getElementById('paidFields');
                if (!panel) return;
                panel.classList.toggle('hidden', !show);
            }
        </script>
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════════════════ --}}
{{-- Record Expense Payment Modal (the "Pay" button on unpaid rows)       --}}
{{-- ═══════════════════════════════════════════════════════════════════ --}}
<div id="expPayModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-sm mx-4 p-6">
        <div class="flex justify-between items-center mb-3"><h3 class="font-bold text-gray-900">Record Payment</h3><button onclick="document.getElementById('expPayModal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600 text-xl">&times;</button></div>
        <form method="POST" action="{{ route('expenses.pay') }}" id="expPayForm">@csrf
            <input type="hidden" name="expense_id" id="expPayId">
            <div class="space-y-3">
                <div><label class="form-label">Amount *</label><input type="number" step="0.01" name="amount" id="expPayAmt" required class="form-input"></div>
                <div><label class="form-label">Payment Method *</label>
                    <select name="payment_method" required class="form-input text-xs"><option value="cash">Cash</option><option value="mpesa">M-Pesa</option><option value="bank_transfer">Bank Transfer</option><option value="cheque">Cheque</option></select>
                </div>
                {{-- Paid By dropdown (round 5). Captures who actually paid
                     out (the till, M-Pesa account, or bank account that
                     funded the payment), distinct from who is recording
                     the row. Defaults to the logged-in user. --}}
                <div><label class="form-label">Paid By *</label>
                    <select name="paid_by" required class="form-input text-xs">
                        @foreach($paidByCandidates as $u)
                            <option value="{{ $u->id }}" {{ $u->id === auth()->id() ? 'selected' : '' }}>{{ $u->name }}{{ $u->id === auth()->id() ? ' (me)' : '' }}</option>
                        @endforeach
                    </select>
                </div>
                <div><label class="form-label">Reference No.</label><input type="text" name="reference_number" class="form-input text-xs"></div>
                <div><label class="form-label">Notes</label><input type="text" name="notes" class="form-input text-xs"></div>
            </div>
            <div class="flex justify-end gap-2 mt-4"><button type="button" onclick="document.getElementById('expPayModal').classList.add('hidden')" class="btn-secondary text-xs">Cancel</button><button type="submit" class="btn-success text-xs">Record Payment</button></div>
        </form>
    </div>
</div>

@if($isSuperAdmin)
{{-- ═══════════════════════════════════════════════════════════════════ --}}
{{-- Edit Posted Expense Payment Modal — Super Admin only                 --}}
{{-- Used to backfill correct payment method on historical expenses so    --}}
{{-- cash recon reconciles backwards.                                     --}}
{{-- ═══════════════════════════════════════════════════════════════════ --}}
<div id="editPaymentModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4 p-6">
        <div class="flex justify-between items-center mb-3">
            <h3 class="font-bold text-gray-900">Edit Payment Method</h3>
            <button type="button" onclick="closeEditPaymentModal()" class="text-gray-400 hover:text-gray-600 text-xl">&times;</button>
        </div>
        <div class="bg-purple-50 border border-purple-200 rounded p-2.5 mb-3 text-[11px] text-purple-800">
            <strong>Super Admin override.</strong> This edits the most recent payment's method and reference.
            Use this to correct historical entries. The change is logged to audit with your reason.
        </div>

        {{-- Context summary so admin sees what they're editing --}}
        <div id="editPaymentContext" class="bg-gray-50 border border-gray-200 rounded p-3 mb-3 text-xs space-y-1">
            <div class="flex justify-between"><span class="text-gray-500">Expense:</span><span class="font-medium" id="epcDescription"></span></div>
            <div class="flex justify-between"><span class="text-gray-500">Supplier:</span><span class="font-medium" id="epcSupplier"></span></div>
            <div class="flex justify-between"><span class="text-gray-500">Payment date:</span><span class="font-mono" id="epcDate"></span></div>
            <div class="flex justify-between"><span class="text-gray-500">Amount:</span><span class="font-mono font-semibold" id="epcAmount"></span></div>
        </div>

        <form method="POST" id="editPaymentForm">
            @csrf
            <input type="hidden" name="_method" value="PUT">

            <div class="space-y-3">
                <div>
                    <label class="form-label">Payment Method *</label>
                    <select name="payment_method" id="epPaymentMethod" required class="form-input">
                        <option value="cash">Cash</option>
                        <option value="mpesa">M-Pesa</option>
                        <option value="bank_transfer">Bank Transfer</option>
                        <option value="cheque">Cheque</option>
                    </select>
                </div>
                <div>
                    <label class="form-label">Reference No.</label>
                    <input type="text" name="reference_number" id="epReference" maxlength="100" class="form-input" placeholder="M-Pesa code, cheque #, etc.">
                </div>
                <div>
                    <label class="form-label">Reason for edit *</label>
                    <textarea name="edit_reason" required minlength="5" maxlength="500" rows="2" class="form-input" placeholder="e.g. Was actually paid via M-Pesa, not cash. Confirmed with cashier."></textarea>
                    <p class="text-[10px] text-gray-400 mt-1">Required. Saved to audit log alongside the before/after values.</p>
                </div>
            </div>

            <div class="flex justify-end gap-2 mt-4">
                <button type="button" onclick="closeEditPaymentModal()" class="btn-secondary text-xs">Cancel</button>
                <button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white text-xs font-semibold px-4 py-2 rounded">Save Changes</button>
            </div>
        </form>
    </div>
</div>
@endif

{{-- ═══════════════════════════════════════════════════════════════════ --}}
{{-- Add / Edit Supplier Modal (Suppliers tab)                            --}}
{{-- ═══════════════════════════════════════════════════════════════════ --}}
@if($supAdmin)
<div id="supplierModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-lg mx-4 p-6 max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-center mb-4">
            <h3 class="font-bold text-gray-900" id="supplierModalTitle">Add Supplier</h3>
            <button onclick="closeSupplierModal()" class="text-gray-400 hover:text-gray-600 text-xl">&times;</button>
        </div>
        <form method="POST" id="supplierForm" action="{{ route('suppliers.store') }}">
            @csrf
            <input type="hidden" name="_method" id="supplierMethod" value="POST">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div class="md:col-span-2"><label class="form-label">Name *</label><input type="text" name="name" id="sup_name" required maxlength="150" class="form-input"></div>
                <div><label class="form-label">Contact Person</label><input type="text" name="contact_person" id="sup_contact_person" maxlength="100" class="form-input"></div>
                <div><label class="form-label">Phone</label><input type="text" name="phone" id="sup_phone" maxlength="30" class="form-input" placeholder="07XX XXX XXX"></div>
                <div><label class="form-label">Email</label><input type="email" name="email" id="sup_email" maxlength="100" class="form-input"></div>
                <div><label class="form-label">KRA PIN</label><input type="text" name="kra_pin" id="sup_kra_pin" maxlength="30" class="form-input font-mono uppercase" placeholder="P051234567X"></div>
                <div>
                    <label class="form-label">Category</label>
                    <select name="category" id="sup_category" class="form-input">
                        <option value="General">General</option>
                        <option value="Pharmaceutical">Pharmaceutical</option>
                        <option value="Medical Supplies">Medical Supplies</option>
                        <option value="Equipment">Equipment</option>
                        <option value="Utilities">Utilities</option>
                        <option value="Services">Services</option>
                    </select>
                </div>
                <div class="md:col-span-2"><label class="form-label">Address</label><input type="text" name="address" id="sup_address" maxlength="500" class="form-input"></div>
                <div class="md:col-span-2"><label class="form-label">Notes</label><textarea name="notes" id="sup_notes" rows="2" maxlength="500" class="form-input"></textarea></div>
            </div>
            <div class="flex justify-end gap-2 mt-4">
                <button type="button" onclick="closeSupplierModal()" class="btn-secondary text-xs">Cancel</button>
                <button type="submit" class="btn-primary text-xs">Save Supplier</button>
            </div>
        </form>
    </div>
</div>
@endif

@endsection
@section('scripts')
<script>
function exTab(btn, id) {
    document.querySelectorAll('.ex-tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.ex-panel').forEach(p => p.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById('ex-' + id).classList.add('active');
    // Keep the URL hash in sync so reloads / "Clear" links land back here.
    if (id === 'suppliers') {
        history.replaceState(null, '', window.location.pathname + window.location.search + '#suppliers');
    } else if (window.location.hash) {
        history.replaceState(null, '', window.location.pathname + window.location.search);
    }
}

// On load, jump to the Suppliers tab when the URL says so — either via
// the #suppliers hash (in-page navigation) or when a sup_* query string
// is present (search/pagination inside the suppliers tab).
document.addEventListener('DOMContentLoaded', function () {
    const params = new URLSearchParams(window.location.search);
    const wantSuppliers = window.location.hash === '#suppliers'
        || params.has('sup_q')
        || params.has('sup_show')
        || params.has('sup_page');
    if (wantSuppliers) {
        const btn = document.querySelector('.ex-tab[onclick*="suppliers"]');
        if (btn) exTab(btn, 'suppliers');
    }
});

function openExpPayModal(id, balance) {
    document.getElementById('expPayId').value = id;
    document.getElementById('expPayAmt').value = parseFloat(balance).toFixed(2);
    document.getElementById('expPayModal').classList.remove('hidden');
}

@if($supAdmin)
// ── Supplier add/edit modal (folded in from suppliers.index.blade) ──
const SUPPLIER_STORE_URL = "{{ route('suppliers.store') }}";
const SUPPLIER_UPDATE_URL_TPL = "{{ route('suppliers.update', ['supplier' => '__ID__']) }}";

function openSupplierModal(supplier = null) {
    const form = document.getElementById('supplierForm');
    const title = document.getElementById('supplierModalTitle');
    const method = document.getElementById('supplierMethod');

    ['name','contact_person','phone','email','kra_pin','address','notes'].forEach(f => {
        const el = document.getElementById('sup_' + f);
        if (el) el.value = '';
    });
    document.getElementById('sup_category').value = 'General';

    if (supplier) {
        title.textContent = 'Edit Supplier';
        method.value = 'PUT';
        form.action = SUPPLIER_UPDATE_URL_TPL.replace('__ID__', supplier.id);
        document.getElementById('sup_name').value           = supplier.name           || '';
        document.getElementById('sup_contact_person').value = supplier.contact_person || '';
        document.getElementById('sup_phone').value          = supplier.phone          || '';
        document.getElementById('sup_email').value          = supplier.email          || '';
        document.getElementById('sup_kra_pin').value        = supplier.kra_pin        || '';
        document.getElementById('sup_address').value        = supplier.address        || '';
        document.getElementById('sup_notes').value          = supplier.notes          || '';
        if (supplier.category) document.getElementById('sup_category').value = supplier.category;
    } else {
        title.textContent = 'Add Supplier';
        method.value = 'POST';
        form.action = SUPPLIER_STORE_URL;
    }
    document.getElementById('supplierModal').classList.remove('hidden');
}

function closeSupplierModal() {
    document.getElementById('supplierModal').classList.add('hidden');
}
@endif

@if($isSuperAdmin)
// Super Admin payment edit modal — pre-fills with current values, posts
// to expenses.payment.update via PUT.
const EXP_EDIT_PAYMENT_TPL = "{{ route('expenses.payment.update', ['expense' => '__ID__']) }}";

function openEditPaymentModal(payload) {
    const form = document.getElementById('editPaymentForm');
    form.action = EXP_EDIT_PAYMENT_TPL.replace('__ID__', payload.expense_id);

    document.getElementById('epcDescription').textContent = payload.description || '—';
    document.getElementById('epcSupplier').textContent    = payload.supplier    || '—';
    document.getElementById('epcDate').textContent        = payload.payment_date || '—';
    document.getElementById('epcAmount').textContent      = 'KES ' + Number(payload.amount).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});

    document.getElementById('epPaymentMethod').value = payload.payment_method || 'cash';
    document.getElementById('epReference').value     = payload.reference_number || '';
    // edit_reason is intentionally NOT pre-filled — admin must type a fresh reason every time.
    form.querySelector('textarea[name="edit_reason"]').value = '';

    document.getElementById('editPaymentModal').classList.remove('hidden');
}

function closeEditPaymentModal() {
    document.getElementById('editPaymentModal').classList.add('hidden');
}
@endif
</script>
@endsection