<x-layouts.admin title="Transactions | Admin Suite" activePage="admin-transactions">
<div class="space-y-8">
    <div class="flex justify-between items-end">
        <div>
            <h2 class="font-serif text-3xl text-on-surface">Transaction Oversight</h2>
            <p class="text-on-surface-variant text-sm mt-1">Browse, filter and create transactions across all accounts.</p>
        </div>
    </div>

    <!-- Filters -->
    <form method="GET" action="{{ route('admin.transactions') }}" class="bg-surface-container-lowest p-6 space-y-4">
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
            <div>
                <label class="block text-[10px] font-label uppercase tracking-widest text-on-surface-variant mb-1">Account</label>
                <select name="account_id" class="w-full bg-surface-container-high border-none rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-secondary">
                    <option value="">All Accounts</option>
                    @foreach($accounts as $account)
                        <option value="{{ $account->id }}" {{ request('account_id') == $account->id ? 'selected' : '' }}>
                            {{ $account->account_number }} ({{ $account->user?->first_name }})
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-[10px] font-label uppercase tracking-widest text-on-surface-variant mb-1">Type</label>
                <select name="type" class="w-full bg-surface-container-high border-none rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-secondary">
                    <option value="">All Types</option>
                    @foreach(\App\Enums\TransactionType::cases() as $type)
                        <option value="{{ $type->value }}" {{ request('type') === $type->value ? 'selected' : '' }}>{{ ucfirst($type->value) }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-[10px] font-label uppercase tracking-widest text-on-surface-variant mb-1">Status</label>
                <select name="status" class="w-full bg-surface-container-high border-none rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-secondary">
                    <option value="">All Statuses</option>
                    @foreach(\App\Enums\TransactionStatus::cases() as $status)
                        <option value="{{ $status->value }}" {{ request('status') === $status->value ? 'selected' : '' }}>{{ ucfirst($status->value) }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-[10px] font-label uppercase tracking-widest text-on-surface-variant mb-1">Category</label>
                <select name="category" class="w-full bg-surface-container-high border-none rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-secondary">
                    <option value="">All Categories</option>
                    @foreach(\App\Enums\TransactionCategory::cases() as $cat)
                        <option value="{{ $cat->value }}" {{ request('category') === $cat->value ? 'selected' : '' }}>{{ ucfirst($cat->value) }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-[10px] font-label uppercase tracking-widest text-on-surface-variant mb-1">Date From</label>
                <input type="date" name="date_from" value="{{ request('date_from') }}"
                       class="w-full bg-surface-container-high border-none rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-secondary">
            </div>
            <div>
                <label class="block text-[10px] font-label uppercase tracking-widest text-on-surface-variant mb-1">Date To</label>
                <input type="date" name="date_to" value="{{ request('date_to') }}"
                       class="w-full bg-surface-container-high border-none rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-secondary">
            </div>
        </div>
        <div class="flex gap-3">
            <button type="submit" class="bg-secondary text-on-secondary px-6 py-2 rounded-md text-sm font-label font-medium">Filter</button>
            <a href="{{ route('admin.transactions') }}" class="px-6 py-2 text-sm text-on-surface-variant hover:text-primary transition-colors">Clear</a>
        </div>
    </form>

    <!-- Create Transaction -->
    <div class="bg-surface-container-lowest p-6" x-data="{ open: false }">
        <button @click="open = !open" class="flex items-center gap-2 text-sm font-label font-bold text-primary">
            <span class="material-symbols-outlined text-sm" x-text="open ? 'expand_less' : 'expand_more'"></span>
            Create Manual Transaction
        </button>
        <div x-show="open" x-cloak class="mt-6">
            <form method="POST" action="{{ route('admin.transactions.store') }}" class="grid grid-cols-2 md:grid-cols-4 gap-4">
                @csrf
                <div>
                    <label class="block text-[10px] font-label uppercase tracking-widest text-on-surface-variant mb-1">Account</label>
                    <select name="account_id" required class="w-full bg-surface-container-high border-none rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-secondary">
                        <option value="">Select Account</option>
                        @foreach($accounts as $account)
                            <option value="{{ $account->id }}">{{ $account->account_number }} ({{ $account->user?->first_name }})</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-[10px] font-label uppercase tracking-widest text-on-surface-variant mb-1">Type</label>
                    <select name="type" required class="w-full bg-surface-container-high border-none rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-secondary">
                        @foreach(\App\Enums\TransactionType::cases() as $type)
                            <option value="{{ $type->value }}">{{ ucfirst($type->value) }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-[10px] font-label uppercase tracking-widest text-on-surface-variant mb-1">Amount</label>
                    <input type="number" name="amount" step="0.01" min="0.01" required
                           class="w-full bg-surface-container-high border-none rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-secondary">
                </div>
                <div>
                    <label class="block text-[10px] font-label uppercase tracking-widest text-on-surface-variant mb-1">Category</label>
                    <select name="category" required class="w-full bg-surface-container-high border-none rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-secondary">
                        @foreach(\App\Enums\TransactionCategory::cases() as $cat)
                            <option value="{{ $cat->value }}">{{ ucfirst($cat->value) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-span-2 md:col-span-3">
                    <label class="block text-[10px] font-label uppercase tracking-widest text-on-surface-variant mb-1">Description</label>
                    <input type="text" name="description" required placeholder="Transaction description"
                           class="w-full bg-surface-container-high border-none rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-secondary">
                </div>
                <div class="flex items-end">
                    <button type="submit" class="w-full bg-primary text-on-primary py-2.5 rounded-md text-sm font-label font-medium">Create</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Transactions Table -->
    <div class="bg-surface-container-lowest overflow-x-auto">
        <table class="w-full text-left border-collapse min-w-[800px]">
            <thead>
                <tr class="bg-surface-container-low text-on-surface-variant uppercase text-[10px] tracking-widest font-bold">
                    <th class="px-6 py-4">Reference</th>
                    <th class="px-6 py-4">User / Account</th>
                    <th class="px-6 py-4">Type</th>
                    <th class="px-6 py-4">Amount</th>
                    <th class="px-6 py-4">Category</th>
                    <th class="px-6 py-4">Source</th>
                    <th class="px-6 py-4">Status</th>
                    <th class="px-6 py-4">Date</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-surface-container">
                @forelse($transactions as $txn)
                <tr class="hover:bg-surface-container-low transition-colors">
                    <td class="px-6 py-4 text-xs font-mono">{{ $txn->reference }}</td>
                    <td class="px-6 py-4">
                        <div class="text-sm font-semibold">{{ $txn->account?->user?->first_name }} {{ $txn->account?->user?->last_name }}</div>
                        <div class="text-[10px] text-on-surface-variant">{{ $txn->account?->account_number }}</div>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-[10px] font-bold uppercase {{ $txn->type->value === 'credit' ? 'text-secondary' : 'text-on-surface-variant' }}">{{ $txn->type->value }}</span>
                    </td>
                    <td class="px-6 py-4 font-serif font-semibold {{ $txn->type->value === 'credit' ? 'text-primary' : 'text-on-surface' }}">{{ $txn->account?->currency?->symbol() ?? '$' }}{{ number_format($txn->amount, 2) }}</td>
                    <td class="px-6 py-4 text-xs capitalize">{{ $txn->category->value }}</td>
                    <td class="px-6 py-4 text-xs capitalize text-on-surface-variant">{{ str_replace('_', ' ', $txn->source->value) }}</td>
                    <td class="px-6 py-4">
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-[10px] font-bold uppercase tracking-tighter
                            @if($txn->status->value === 'completed') bg-secondary-container text-secondary
                            @elseif($txn->status->value === 'pending') bg-surface-container-highest text-on-surface-variant
                            @elseif($txn->status->value === 'failed') bg-error-container text-on-error-container
                            @else bg-surface-container text-on-surface-variant @endif
                        ">{{ $txn->status->value }}</span>
                    </td>
                    <td class="px-6 py-4 text-xs text-on-surface-variant">{{ $txn->created_at->format('M d, H:i') }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="px-6 py-12 text-center text-on-surface-variant text-sm">No transactions found.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-6">
        {{ $transactions->links() }}
    </div>
</div>
</x-layouts.admin>
