@extends('layouts.admin')

@section('title', 'Petty Cash')

@section('page-title', 'Petty Cash Management')

@section('breadcrumbs')
    <span class="text-primary font-medium">Petty Cash</span>
@endsection

@section('content')
<div class="max-w-[1400px] mx-auto">
    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg flex items-center gap-3 petty-cash-session-flash">
            <span class="material-symbols-outlined text-green-600">check_circle</span>
            <p class="text-green-800">{{ session('success') }}</p>
        </div>
    @endif

    @if(session('error'))
        <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-3 petty-cash-session-flash">
            <span class="material-symbols-outlined text-red-600">error</span>
            <p class="text-red-800">{{ session('error') }}</p>
        </div>
    @endif

    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
        <h1 class="text-2xl font-bold text-gray-900">Petty Cash Management</h1>
        <div class="flex gap-3">
            <button onclick="openTopUpModal()" class="flex items-center gap-2 px-4 py-2 bg-yellow-400 text-gray-900 rounded-lg text-sm font-medium shadow-lg shadow-yellow-400/30 hover:bg-yellow-500 transition-colors">
                <span class="material-symbols-outlined text-lg">add_circle</span>
                <span>Top Up</span>
            </button>
            <button onclick="openAddModal()" class="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium shadow-lg shadow-primary/30 hover:bg-blue-600 transition-colors">
                <span class="material-symbols-outlined text-lg">add</span>
                <span>Add Petty Cash</span>
            </button>
            <button onclick="openReturnModal()" class="flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-medium shadow-lg shadow-green-600/30 hover:bg-green-700 transition-colors">
                <span class="material-symbols-outlined text-lg">undo</span>
                <span>Return</span>
            </button>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500">Total Petty Cash</p>
                    <p class="text-2xl font-bold text-gray-900 mt-1">{{ number_format($totalPettyCash ?? 0, 2) }}</p>
                </div>
                <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
                    <span class="material-symbols-outlined text-blue-600">account_balance_wallet</span>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500">Total Disbursed</p>
                    <p class="text-2xl font-bold text-red-600 mt-1">{{ number_format($totalDisbursed ?? 0, 2) }}</p>
                </div>
                <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center">
                    <span class="material-symbols-outlined text-red-600">arrow_downward</span>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500">Balance</p>
                    <p class="text-2xl font-bold text-green-600 mt-1">{{ number_format($balance ?? 0, 2) }}</p>
                </div>
                <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
                    <span class="material-symbols-outlined text-green-600">payments</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Transactions Table -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-bold text-gray-900">Petty Cash Transactions</h2>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">#</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">Date</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">Transaction #</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">Description</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">Given To</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-700">Type</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500 text-right">Amount</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-700">Status</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($transactions ?? [] as $index => $transaction)
                        <tr class="hover:bg-gray-50/50 transition-colors group">
                            <td class="py-4 px-6 text-sm text-gray-900 bg-white">{{ $index + 1 }}</td>
                            <td class="py-4 px-6 text-sm text-gray-900 whitespace-nowrap bg-white">
                                {{ $transaction->transaction_date->format('M d, Y') }}
                            </td>
                            <td class="py-4 px-6 text-sm font-mono text-primary bg-white">{{ $transaction->transaction_number }}</td>
                            <td class="py-4 px-6 text-sm text-gray-900 bg-white">
                                <div class="font-medium">{{ $transaction->description }}</div>
                                @if($transaction->notes)
                                    <div class="text-xs text-gray-500 mt-1">{{ Str::limit($transaction->notes, 50) }}</div>
                                @endif
                                @if($transaction->returnedFrom)
                                    <div class="text-xs text-blue-600 mt-1">Return for: {{ $transaction->returnedFrom->transaction_number }}</div>
                                @endif
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-900 bg-white">
                                {{ $transaction->given_to ?? '-' }}
                            </td>
                            <td class="py-4 px-6 bg-white">
                                @php
                                    $typeConfig = [
                                        'disbursement' => ['label' => 'Disbursement', 'class' => 'bg-red-50 text-red-700 border-red-100'],
                                        'return' => ['label' => 'Return', 'class' => 'bg-green-50 text-green-700 border-green-100'],
                                        'top_up' => ['label' => 'Top Up', 'class' => 'bg-blue-50 text-blue-700 border-blue-100'],
                                    ];
                                    $config = $typeConfig[$transaction->type] ?? $typeConfig['disbursement'];
                                @endphp
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $config['class'] }} border">
                                    {{ $config['label'] }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm font-medium text-gray-900 text-right tabular-nums bg-white">
                                {{ number_format($transaction->amount, 2) }}
                            </td>
                            <td class="py-4 px-6 bg-white">
                                @php
                                    $statusConfig = [
                                        'pending' => ['label' => 'Pending', 'class' => 'bg-yellow-50 text-yellow-700 border-yellow-100'],
                                        'approved' => ['label' => 'Approved', 'class' => 'bg-green-50 text-green-700 border-green-100'],
                                        'returned' => ['label' => 'Returned', 'class' => 'bg-blue-50 text-blue-700 border-blue-100'],
                                        'cancelled' => ['label' => 'Cancelled', 'class' => 'bg-gray-50 text-gray-700 border-gray-100'],
                                    ];
                                    $statusConf = $statusConfig[$transaction->status] ?? $statusConfig['pending'];
                                @endphp
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $statusConf['class'] }} border">
                                    {{ $statusConf['label'] }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-right bg-white">
                                <div class="relative inline-block text-left">
                                    <button type="button" data-admin-fixed-menu-trigger="action-menu-{{ $transaction->id }}" onclick="adminFixedActionMenuToggle(event || window.event, 'action-menu-{{ $transaction->id }}')" class="bg-yellow-500 text-gray-900 hover:bg-yellow-600 transition-colors px-3 py-1.5 rounded-lg" title="More actions">
                                        <span class="material-symbols-outlined text-xl">more_vert</span>
                                    </button>
                                    <div id="action-menu-{{ $transaction->id }}" data-admin-fixed-action-menu class="hidden w-48 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg">
                                        <div class="py-1">
                                            @if($transaction->type === 'disbursement' && $transaction->status === 'approved')
                                                <button type="button" onclick="openEditModal({{ $transaction->id }})" class="w-full flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors text-left">
                                                    <span class="material-symbols-outlined text-base">edit</span>
                                                    <span>Edit</span>
                                                </button>
                                            @endif
                                            <button type="button" onclick="openDeleteModal({{ $transaction->id }}, @js($transaction->transaction_number))" class="w-full flex items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors text-left @if($transaction->type === 'disbursement' && $transaction->status === 'approved') border-t border-gray-100 @endif">
                                                <span class="material-symbols-outlined text-base">delete</span>
                                                <span>Delete</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="py-12 px-6 text-center text-gray-500">
                            <span class="material-symbols-outlined text-4xl mb-2 block">payments</span>
                            <p>No petty cash transactions found</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Add Petty Cash Modal -->
<div id="addModal" data-admin-modal class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" onclick="closeAddModal()"></div>
    <div class="absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-2xl overflow-y-auto">
        <div class="flex flex-col h-full">
            <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 sticky top-0 bg-white">
                <h2 class="text-lg font-bold text-gray-900">Add Petty Cash</h2>
                <button onclick="closeAddModal()" class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <form method="POST" action="{{ route('admin.petty-cash.store') }}" id="addForm" class="flex-1 p-6 space-y-6">
                @csrf
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Amount <span class="text-red-500">*</span></label>
                    <input type="number" name="amount" step="0.01" min="0.01" required class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary" placeholder="0.00">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Given To <span class="text-red-500">*</span></label>
                    <input type="text" name="given_to" required class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary" placeholder="Employee name">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Description <span class="text-red-500">*</span></label>
                    <textarea name="description" rows="3" required class="w-full px-4 py-3 rounded-lg border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary resize-none" placeholder="Purpose of petty cash"></textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Date <span class="text-red-500">*</span></label>
                    <input type="date" name="date" value="{{ date('Y-m-d') }}" required class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Notes</label>
                    <textarea name="notes" rows="2" class="w-full px-4 py-3 rounded-lg border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary resize-none" placeholder="Additional notes"></textarea>
                </div>
            </form>
            <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-end gap-3 sticky bottom-0 bg-white">
                <button type="button" onclick="closeAddModal()" class="px-5 py-2.5 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition-colors">Cancel</button>
                <button type="submit" form="addForm" class="px-5 py-2.5 rounded-lg bg-primary text-white font-medium hover:bg-blue-600 shadow-sm transition-colors">Add Petty Cash</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Petty Cash Modal -->
<div id="editModal" data-admin-modal class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" onclick="closeEditModal()"></div>
    <div class="absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-2xl overflow-y-auto">
        <div class="flex flex-col h-full">
            <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 sticky top-0 bg-white">
                <h2 class="text-lg font-bold text-gray-900">Edit Petty Cash</h2>
                <button onclick="closeEditModal()" class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <form method="POST" id="editForm" class="flex-1 p-6 space-y-6">
                @csrf
                @method('PUT')
                <input type="hidden" name="transaction_id" id="edit-transaction-id">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Amount <span class="text-red-500">*</span></label>
                    <input type="number" name="amount" id="edit-amount" step="0.01" min="0.01" required class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary" placeholder="0.00">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Given To <span class="text-red-500">*</span></label>
                    <input type="text" name="given_to" id="edit-given-to" required class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary" placeholder="Employee name">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Description <span class="text-red-500">*</span></label>
                    <textarea name="description" id="edit-description" rows="3" required class="w-full px-4 py-3 rounded-lg border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary resize-none" placeholder="Purpose of petty cash"></textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Date <span class="text-red-500">*</span></label>
                    <input type="date" name="date" id="edit-date" required class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Notes</label>
                    <textarea name="notes" id="edit-notes" rows="2" class="w-full px-4 py-3 rounded-lg border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary resize-none" placeholder="Additional notes"></textarea>
                </div>
            </form>
            <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-end gap-3 sticky bottom-0 bg-white">
                <button type="button" onclick="closeEditModal()" class="px-5 py-2.5 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition-colors">Cancel</button>
                <button type="submit" form="editForm" class="px-5 py-2.5 rounded-lg bg-primary text-white font-medium hover:bg-blue-600 shadow-sm transition-colors">Update Petty Cash</button>
            </div>
        </div>
    </div>
</div>

<!-- Top Up Modal -->
<div id="topUpModal" data-admin-modal class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" onclick="closeTopUpModal()"></div>
    <div class="absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-2xl overflow-y-auto">
        <div class="flex flex-col h-full">
            <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 sticky top-0 bg-white">
                <h2 class="text-lg font-bold text-gray-900">Top Up Petty Cash</h2>
                <button onclick="closeTopUpModal()" class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <form method="POST" action="{{ route('admin.petty-cash.top-up') }}" id="topUpForm" class="flex-1 p-6 space-y-6">
                @csrf
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Amount <span class="text-red-500">*</span></label>
                    <input type="number" name="amount" step="0.01" min="0.01" required class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary" placeholder="0.00">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Bank Account <span class="text-red-500">*</span></label>
                    <select name="bank_account_id" required class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
                        <option value="">Select bank account</option>
                        @foreach($bankAccounts ?? [] as $account)
                            <option value="{{ $account->id }}">{{ $account->bank_name }} - {{ $account->account_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Description <span class="text-red-500">*</span></label>
                    <textarea name="description" rows="3" required class="w-full px-4 py-3 rounded-lg border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary resize-none" placeholder="Purpose of top-up"></textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Date <span class="text-red-500">*</span></label>
                    <input type="date" name="date" value="{{ date('Y-m-d') }}" required class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Notes</label>
                    <textarea name="notes" rows="2" class="w-full px-4 py-3 rounded-lg border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary resize-none" placeholder="Additional notes"></textarea>
                </div>
            </form>
            <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-end gap-3 sticky bottom-0 bg-white">
                <button type="button" onclick="closeTopUpModal()" class="px-5 py-2.5 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition-colors">Cancel</button>
                <button type="submit" form="topUpForm" class="px-5 py-2.5 rounded-lg bg-yellow-500 text-gray-900 font-medium hover:bg-yellow-600 shadow-sm transition-colors">Top Up</button>
            </div>
        </div>
    </div>
</div>

<!-- Return Petty Cash Modal -->
<div id="returnModal" data-admin-modal class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" onclick="closeReturnModal()"></div>
    <div class="absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-2xl overflow-y-auto">
        <div class="flex flex-col h-full">
            <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 sticky top-0 bg-white">
                <h2 class="text-lg font-bold text-gray-900">Return Petty Cash</h2>
                <button onclick="closeReturnModal()" class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <form method="POST" action="{{ route('admin.petty-cash.return') }}" id="returnForm" class="flex-1 p-6 space-y-6">
                @csrf
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Select Transaction <span class="text-red-500">*</span></label>
                    <select name="transaction_id" id="return-transaction-id" required onchange="updateReturnAmount()" class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
                        <option value="">Select a transaction</option>
                        @foreach($pendingTransactions ?? [] as $transaction)
                            <option value="{{ $transaction->id }}" data-amount="{{ $transaction->amount }}" data-returned="{{ $transaction->returns()->where('status', 'approved')->sum('returned_amount') }}">
                                {{ $transaction->transaction_number }} - {{ $transaction->description }} ({{ number_format($transaction->amount, 2) }})
                            </option>
                        @endforeach
                    </select>
                    <p id="return-balance-info" class="mt-1 text-xs text-gray-500 hidden"></p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Return Amount <span class="text-red-500">*</span></label>
                    <input type="number" name="return_amount" id="return-amount" step="0.01" min="0.01" required class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary" placeholder="0.00">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Notes</label>
                    <textarea name="notes" rows="3" class="w-full px-4 py-3 rounded-lg border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary resize-none" placeholder="Any additional notes"></textarea>
                </div>
            </form>
            <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-end gap-3 sticky bottom-0 bg-white">
                <button type="button" onclick="closeReturnModal()" class="px-5 py-2.5 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition-colors">Cancel</button>
                <button type="submit" form="returnForm" class="px-5 py-2.5 rounded-lg bg-green-600 text-white font-medium hover:bg-green-700 shadow-sm transition-colors">Return Petty Cash</button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="deleteModal" data-admin-modal class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" onclick="closeDeleteModal()"></div>
    <div class="absolute inset-0 flex items-center justify-center p-4">
        <div class="bg-white rounded-xl shadow-2xl max-w-md w-full p-6">
            <div class="flex items-center gap-4 mb-4">
                <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center">
                    <span class="material-symbols-outlined text-red-600">warning</span>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-900">Delete Transaction</h3>
                    <p class="text-sm text-gray-500">This action cannot be undone</p>
                </div>
            </div>
            <p class="text-gray-700 mb-6">
                Are you sure you want to delete transaction <span id="delete-transaction-number" class="font-mono font-semibold"></span>? This will permanently remove the transaction from the system.
            </p>
            <form method="POST" id="deleteForm" class="flex items-center justify-end gap-3">
                @csrf
                @method('DELETE')
                <button type="button" onclick="closeDeleteModal()" class="px-5 py-2.5 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition-colors">Cancel</button>
                <button type="submit" class="px-5 py-2.5 rounded-lg bg-red-600 text-white font-medium hover:bg-red-700 shadow-sm transition-colors">Delete</button>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Transaction data for editing
const transactionData = @json($transactions ?? []);

// Modal functions
    function openAddModal() {
        document.getElementById('addModal').classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    document.getElementById('addForm').reset();
    }

    function closeAddModal() {
        document.getElementById('addModal').classList.add('hidden');
        document.body.style.overflow = '';
    }

function openEditModal(id) {
    const transaction = transactionData.find(t => t.id === id);
    if (!transaction) return;

    if (typeof window.adminFixedActionMenuCloseAll === 'function') {
        window.adminFixedActionMenuCloseAll();
    }

    document.getElementById('edit-transaction-id').value = transaction.id;
    document.getElementById('edit-amount').value = transaction.amount;
    document.getElementById('edit-given-to').value = transaction.given_to || '';
    document.getElementById('edit-description').value = transaction.description;
    document.getElementById('edit-date').value = transaction.transaction_date;
    document.getElementById('edit-notes').value = transaction.notes || '';
    document.getElementById('editForm').action = '{{ route("admin.petty-cash.update", ":id") }}'.replace(':id', id);
    
    document.getElementById('editModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

function closeEditModal() {
    document.getElementById('editModal').classList.add('hidden');
    document.body.style.overflow = '';
}

function openTopUpModal() {
    document.getElementById('topUpModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
    document.getElementById('topUpForm').reset();
}

function closeTopUpModal() {
    document.getElementById('topUpModal').classList.add('hidden');
    document.body.style.overflow = '';
}

    function openReturnModal() {
        document.getElementById('returnModal').classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    document.getElementById('returnForm').reset();
    document.getElementById('return-balance-info').classList.add('hidden');
    }

    function closeReturnModal() {
        document.getElementById('returnModal').classList.add('hidden');
        document.body.style.overflow = '';
    }

function updateReturnAmount() {
    const select = document.getElementById('return-transaction-id');
    const option = select.options[select.selectedIndex];
    const balanceInfo = document.getElementById('return-balance-info');
    const amountInput = document.getElementById('return-amount');

    if (option.value) {
        const totalAmount = parseFloat(option.dataset.amount);
        const returnedAmount = parseFloat(option.dataset.returned) || 0;
        const remaining = totalAmount - returnedAmount;
        
        balanceInfo.textContent = `Original: ${totalAmount.toFixed(2)}, Already Returned: ${returnedAmount.toFixed(2)}, Remaining: ${remaining.toFixed(2)}`;
        balanceInfo.classList.remove('hidden');
        amountInput.max = remaining;
        amountInput.value = remaining > 0 ? remaining.toFixed(2) : '';
    } else {
        balanceInfo.classList.add('hidden');
        amountInput.value = '';
    }
}

function openDeleteModal(id, transactionNumber) {
    if (typeof window.adminFixedActionMenuCloseAll === 'function') {
        window.adminFixedActionMenuCloseAll();
    }
    document.getElementById('delete-transaction-number').textContent = transactionNumber;
    document.getElementById('deleteForm').action = '{{ route("admin.petty-cash.destroy", ":id") }}'.replace(':id', id);
    document.getElementById('deleteModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

function closeDeleteModal() {
    document.getElementById('deleteModal').classList.add('hidden');
    document.body.style.overflow = '';
}

// Auto-hide session flash banners only (.petty-cash-session-flash — never select .bg-green-50/.bg-red-50; table badges use those utilities)
setTimeout(function() {
    document.querySelectorAll('.petty-cash-session-flash').forEach(function (msg) {
        msg.style.transition = 'opacity 0.5s';
        msg.style.opacity = '0';
        setTimeout(function () {
            msg.remove();
        }, 500);
    });
}, 5000);
</script>
@endpush
@endsection