@extends('layouts.app')

@section('content')
    <div class="container mx-auto px-4 py-8 max-w-7xl">
        <!-- Page Header -->
        <div class="mb-8">
            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 tracking-tight">Transactions
                    </h1>
                    <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400">Manage your financial transactions</p>
                </div>

                <div class="flex items-center gap-2 sm:gap-3">
                    <a href="{{ route('transactions.create') }}"
                        class="inline-flex items-center gap-2 px-3 sm:px-4 py-2 rounded-xl bg-blue-600 text-white font-medium hover:bg-blue-500 active:scale-[.98] focus-visible:ring-2 focus-visible:ring-blue-500 transition"
                        aria-label="Add transaction">
                        <i class="fas fa-plus"></i><span class="hidden xs:inline">Add Transaction</span>
                    </a>

                    <button onclick="exportTransactions()"
                        class="inline-flex items-center gap-2 px-3 sm:px-4 py-2 rounded-xl bg-emerald-600 text-white font-medium hover:bg-emerald-500 active:scale-[.98] focus-visible:ring-2 focus-visible:ring-emerald-500 transition"
                        aria-label="Export transactions">
                        <i class="fas fa-download"></i><span class="hidden xs:inline">Export</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- Rest of your existing content remains the same -->
        <!-- Alerts -->
        @if (session('success'))
            <div
                class="mb-6 rounded-xl border border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-900/40 dark:bg-emerald-900/20 dark:text-emerald-200 p-4">
                <div class="flex items-center gap-3">
                    <i class="fas fa-check-circle"></i>
                    <p class="font-medium">{{ session('success') }}</p>
                </div>
            </div>
        @endif

        @if (session('error'))
            <div
                class="mb-6 rounded-xl border border-red-200 bg-red-50 text-red-800 dark:border-red-900/40 dark:bg-red-900/20 dark:text-red-200 p-4">
                <div class="flex items-center gap-3">
                    <i class="fas fa-exclamation-circle"></i>
                    <p class="font-medium">{{ session('error') }}</p>
                </div>
            </div>
        @endif

        <!-- Summary Cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <!-- Income -->
            <div
                class="rounded-2xl bg-white dark:bg-gray-900/60 backdrop-blur border border-gray-100 dark:border-gray-800 p-6 shadow-sm">
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Total Income</p>
                        <div class="space-y-1">
                            <p class="text-2xl font-bold text-emerald-600">
                                ${{ number_format($summary['total_income_usd'] ?? 0, 2) }}
                            </p>
                            @if (($summary['total_income_khr'] ?? 0) > 0)
                                <p class="text-lg font-semibold text-emerald-500">
                                    ៛{{ number_format($summary['total_income_khr'] ?? 0, 2) }}
                                </p>
                            @endif
                        </div>
                    </div>
                    <div
                        class="w-12 h-12 rounded-full bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center">
                        <i class="fas fa-arrow-up text-emerald-600"></i>
                    </div>
                </div>
            </div>

            <!-- Expenses -->
            <div
                class="rounded-2xl bg-white dark:bg-gray-900/60 backdrop-blur border border-gray-100 dark:border-gray-800 p-6 shadow-sm">
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Total Expenses</p>
                        <div class="space-y-1">
                            <p class="text-2xl font-bold text-rose-600">
                                ${{ number_format($summary['total_expenses_usd'] ?? 0, 2) }}
                            </p>
                            @if (($summary['total_expenses_khr'] ?? 0) > 0)
                                <p class="text-lg font-semibold text-rose-500">
                                    ៛{{ number_format($summary['total_expenses_khr'] ?? 0, 2) }}
                                </p>
                            @endif
                        </div>
                    </div>
                    <div class="w-12 h-12 rounded-full bg-rose-100 dark:bg-rose-900/30 flex items-center justify-center">
                        <i class="fas fa-arrow-down text-rose-600"></i>
                    </div>
                </div>
            </div>

            <!-- Net Balance -->
            <div
                class="rounded-2xl bg-white dark:bg-gray-900/60 backdrop-blur border border-gray-100 dark:border-gray-800 p-6 shadow-sm">
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Net Balance</p>
                        <div class="space-y-1">
                            <p
                                class="text-2xl font-bold {{ ($summary['net_balance_usd'] ?? 0) >= 0 ? 'text-emerald-600' : 'text-rose-600' }}">
                                ${{ number_format($summary['net_balance_usd'] ?? 0, 2) }}
                            </p>
                            @if (($summary['total_income_khr'] ?? 0) > 0 || ($summary['total_expenses_khr'] ?? 0) > 0)
                                <p
                                    class="text-lg font-semibold {{ ($summary['net_balance_khr'] ?? 0) >= 0 ? 'text-emerald-500' : 'text-rose-500' }}">
                                    ៛{{ number_format($summary['net_balance_khr'] ?? 0, 2) }}
                                </p>
                            @endif
                        </div>
                    </div>
                    <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
                        <i class="fas fa-balance-scale text-blue-600"></i>
                    </div>
                </div>
            </div>

            <!-- Count -->
            <div
                class="rounded-2xl bg-white dark:bg-gray-900/60 backdrop-blur border border-gray-100 dark:border-gray-800 p-6 shadow-sm">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Total Transactions</p>
                        <p class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ $summary['total_count'] ?? 0 }}
                        </p>
                    </div>
                    <div
                        class="w-12 h-12 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
                        <i class="fas fa-list text-purple-600"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filters -->
        <form action="">
            <div
                class="rounded-2xl bg-white dark:bg-gray-900/60 border border-gray-100 dark:border-gray-800 p-4 sm:p-6 mb-8 shadow-sm">
                <details class="group sm:open">
                    <summary class="flex items-center justify-between cursor-pointer list-none">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Filters</h3>
                        <div class="flex items-center gap-3">
                            <button type="button" onclick="resetFilters()"
                                class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 inline-flex items-center gap-2">
                                <i class="fas fa-undo"></i>Reset
                            </button>
                            <i
                                class="fa-solid fa-chevron-down text-gray-500 dark:text-gray-400 transition-transform group-open:rotate-180"></i>
                        </div>
                    </summary>

                    <!-- Type -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Type</label>
                        <select name="type"
                            class="w-full rounded-lg px-3 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">All Types</option>
                            <option value="income" {{ request('type') == 'income' ? 'selected' : '' }}>Income</option>
                            <option value="expense" {{ request('type') == 'expense' ? 'selected' : '' }}>Expense</option>
                            <option value="transfer" {{ request('type') == 'transfer' ? 'selected' : '' }}>Transfer
                            </option>
                        </select>
                    </div>

                    <!-- Account -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Account</label>
                        <select name="account_id"
                            class="w-full rounded-lg px-3 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">All Accounts</option>
                            @foreach ($accounts as $account)
                                <option value="{{ $account->id }}"
                                    {{ request('account_id') == $account->id ? 'selected' : '' }}>
                                    {{ $account->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Category -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Category</label>
                        <select name="category_id"
                            class="w-full rounded-lg px-3 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">All Categories</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}"
                                    {{ request('category_id') == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Date From -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Date From</label>
                        <input type="date" name="date_from" value="{{ request('date_from') }}"
                            class="w-full rounded-lg px-3 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>

                    <!-- Date To -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Date To</label>
                        <input type="date" name="date_to" value="{{ request('date_to') }}"
                            class="w-full rounded-lg px-3 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>

                    <!-- Payment Method -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Payment
                            Method</label>
                        <select name="payment_method"
                            class="w-full rounded-lg px-3 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">All Methods</option>
                            <option value="cash" {{ request('payment_method') == 'cash' ? 'selected' : '' }}>Cash
                            </option>
                            <option value="card" {{ request('payment_method') == 'card' ? 'selected' : '' }}>Card
                            </option>
                            <option value="bank_transfer"
                                {{ request('payment_method') == 'bank_transfer' ? 'selected' : '' }}>Bank Transfer</option>
                            <option value="check" {{ request('payment_method') == 'check' ? 'selected' : '' }}>Check
                            </option>
                            <option value="mobile_payment"
                                {{ request('payment_method') == 'mobile_payment' ? 'selected' : '' }}>Mobile Payment
                            </option>
                            <option value="other" {{ request('payment_method') == 'other' ? 'selected' : '' }}>Other
                            </option>
                        </select>
                    </div>

                    <!-- Status -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Status</label>
                        <select name="status"
                            class="w-full rounded-lg px-3 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">All Status</option>
                            <option value="cleared" {{ request('status') == 'cleared' ? 'selected' : '' }}>Cleared
                            </option>
                            <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending
                            </option>
                            <option value="reconciled" {{ request('status') == 'reconciled' ? 'selected' : '' }}>
                                Reconciled</option>
                        </select>
                    </div>
                    {{-- </div> --}}

                    <div class="flex justify-end pt-2">
                        <button type="submit"
                            class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-600 text-white font-medium hover:bg-blue-500 active:scale-[.98] focus-visible:ring-2 focus-visible:ring-blue-500 transition">
                            <i class="fas fa-search"></i>Apply Filters
                        </button>
                    </div>
                </details>
            </div>
        </form>

        <!-- Transactions -->
        <div
            class="rounded-2xl bg-white dark:bg-gray-900/60 border border-gray-100 dark:border-gray-800 overflow-hidden shadow-sm">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-800">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Recent Transactions</h3>
                    <div class="text-sm text-gray-500 dark:text-gray-400">
                        {{ $transactions->firstItem() ?? 0 }}–{{ $transactions->lastItem() ?? 0 }} of
                        {{ $transactions->total() ?? 0 }}
                    </div>
                </div>
            </div>

            @if ($transactions->count() > 0)
                <!-- Desktop Table -->
                <div class="hidden lg:block overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-50 dark:bg-gray-800/60 sticky top-0 z-10">
                            <tr class="text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase">
                                <th class="px-6 py-3">Date</th>
                                <th class="px-6 py-3">Type</th>
                                <th class="px-6 py-3">Description</th>
                                <th class="px-6 py-3">Account</th>
                                <th class="px-6 py-3">Category</th>
                                <th class="px-6 py-3 text-right">Amount</th>
                                <th class="px-6 py-3 text-center">Status</th>
                                <th class="px-6 py-3 text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 dark:divide-gray-800">
                            @foreach ($transactions as $transaction)
                                <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-gray-900 dark:text-gray-100">
                                            {{ $transaction->transaction_date->format('M d, Y') }}</div>
                                        @if ($transaction->transaction_time)
                                            <div class="text-xs text-gray-500 dark:text-gray-400">
                                                {{ $transaction->transaction_time->format('H:i') }}
                                            </div>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        @if ($transaction->type == 'income')
                                            <span
                                                class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300">
                                                <i class="fas fa-arrow-up"></i>Income
                                            </span>
                                        @elseif($transaction->type == 'expense')
                                            <span
                                                class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-rose-100 text-rose-800 dark:bg-rose-900/30 dark:text-rose-300">
                                                <i class="fas fa-arrow-down"></i>Expense
                                            </span>
                                        @else
                                            <span
                                                class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
                                                <i class="fas fa-arrows-alt-h"></i>Transfer
                                            </span>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="font-medium text-gray-900 dark:text-gray-100">
                                            {{ $transaction->description ?: 'No description' }}</div>
                                        @if ($transaction->payee)
                                            <div class="text-xs text-gray-500 dark:text-gray-400">
                                                {{ $transaction->payee }}</div>
                                        @endif
                                        @if ($transaction->tags && count($transaction->tags) > 0)
                                            <div class="flex flex-wrap gap-1 mt-1">
                                                @foreach (array_slice($transaction->tags, 0, 3) as $tag)
                                                    <span
                                                        class="inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300">#{{ $tag }}</span>
                                                @endforeach
                                                @if (count($transaction->tags) > 3)
                                                    <span
                                                        class="text-xs text-gray-500 dark:text-gray-400">+{{ count($transaction->tags) - 3 }}
                                                        more</span>
                                                @endif
                                            </div>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-gray-900 dark:text-gray-100">
                                        {{ $transaction->account->name ?? 'N/A' }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-gray-900 dark:text-gray-100">
                                        {{ $transaction->category->name ?? 'Uncategorized' }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right">
                                        @if ($transaction->amount_usd)
                                            <div
                                                class="font-semibold {{ $transaction->type == 'income' ? 'text-emerald-600' : ($transaction->type == 'expense' ? 'text-rose-600' : 'text-blue-600') }}">
                                                ${{ number_format($transaction->amount_usd, 2) }}
                                            </div>
                                        @endif
                                        @if ($transaction->amount_khr)
                                            <div class="text-xs text-gray-500 dark:text-gray-400">
                                                ៛{{ number_format($transaction->amount_khr, 2) }}
                                            </div>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-center">
                                        <div class="flex flex-col gap-1 items-center">
                                            @if ($transaction->is_cleared)
                                                <span
                                                    class="inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300">
                                                    <i class="fas fa-check"></i>Cleared
                                                </span>
                                            @else
                                                <span
                                                    class="inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300">
                                                    <i class="fas fa-clock"></i>Pending
                                                </span>
                                            @endif

                                            @if ($transaction->is_reconciled)
                                                <span
                                                    class="inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
                                                    <i class="fas fa-balance-scale"></i>Reconciled
                                                </span>
                                            @endif

                                            @if ($transaction->is_recurring)
                                                <span
                                                    class="inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300">
                                                    <i class="fas fa-repeat"></i>Recurring
                                                </span>
                                            @endif
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-center">
                                        <div class="flex items-center justify-center gap-3">
                                            <a href="{{ route('transactions.show', $transaction) }}"
                                                aria-label="View transaction"
                                                class="text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 focus-visible:ring-2 focus-visible:ring-blue-500 rounded-lg p-2">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ route('transactions.edit', $transaction) }}"
                                                class="text-emerald-600 hover:text-emerald-500 dark:text-emerald-400 dark:hover:text-emerald-300"
                                                title="Edit">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <button onclick="deleteTransaction({{ $transaction->id }})"
                                                class="text-rose-600 hover:text-rose-500 dark:text-rose-400 dark:hover:text-rose-300"
                                                title="Delete">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                            @if (!empty($transaction->attachments))
                                                <button onclick="viewAttachments({{ $transaction->id }})"
                                                    class="text-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300"
                                                    title="View Attachments">
                                                    <i class="fas fa-paperclip"></i>
                                                </button>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Mobile Cards -->
                <div class="lg:hidden divide-y divide-gray-200 dark:divide-gray-800">
                    @foreach ($transactions as $transaction)
                        <div class="p-6 hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
                            <div class="flex items-start justify-between mb-3">
                                <div>
                                    <div class="text-sm font-medium text-gray-900 dark:text-gray-100">
                                        {{ $transaction->description ?: 'No description' }}
                                    </div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                        {{ $transaction->transaction_date->format('M d, Y') }}
                                    </div>
                                </div>
                                <div class="text-right">
                                    @if ($transaction->amount_usd)
                                        <div
                                            class="text-sm font-semibold {{ $transaction->type == 'income' ? 'text-emerald-500' : ($transaction->type == 'expense' ? 'text-rose-500' : 'text-blue-500') }}">
                                            ${{ number_format($transaction->amount_usd, 2) }}
                                        </div>
                                    @endif
                                    @if ($transaction->amount_khr)
                                        <div class="text-xs text-gray-500 dark:text-gray-400">
                                            ៛{{ number_format($transaction->amount_khr, 2) }}
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-2">
                                    @if ($transaction->type == 'income')
                                        <span
                                            class="inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300">
                                            <i class="fas fa-arrow-up"></i>Income
                                        </span>
                                    @elseif($transaction->type == 'expense')
                                        <span
                                            class="inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium bg-rose-100 text-rose-800 dark:bg-rose-900/30 dark:text-rose-300">
                                            <i class="fas fa-arrow-down"></i>Expense
                                        </span>
                                    @else
                                        <span
                                            class="inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
                                            <i class="fas fa-arrows-alt-h"></i>Transfer
                                        </span>
                                    @endif

                                    @if ($transaction->is_cleared)
                                        <span
                                            class="inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300">
                                            <i class="fas fa-check"></i>Cleared
                                        </span>
                                    @endif
                                </div>

                                <div class="flex items-center gap-3">
                                    <a href="{{ route('transactions.show', $transaction) }}"
                                        class="text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{{ route('transactions.edit', $transaction) }}"
                                        class="text-emerald-600 hover:text-emerald-500 dark:text-emerald-400 dark:hover:text-emerald-300">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <button onclick="deleteTransaction({{ $transaction->id }})"
                                        class="text-rose-600 hover:text-rose-500 dark:text-rose-400 dark:hover:text-rose-300">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                                {{ $transaction->account->name ?? 'N/A' }} •
                                {{ $transaction->category->name ?? 'Uncategorized' }}
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Pagination -->
                <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-800">
                    {{ $transactions->appends(request()->query())->links() }}
                </div>
            @else
                <!-- Empty State -->
                <div class="px-6 py-12 text-center">
                    <div
                        class="w-16 h-16 mx-auto rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-4">
                        <i class="fas fa-receipt text-gray-400 text-2xl"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">No transactions found</h3>
                    <p class="text-gray-500 dark:text-gray-400 mb-6">Get started by adding your first transaction.</p>
                    <a href="{{ route('transactions.create') }}"
                        class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-blue-600 text-white font-medium hover:bg-blue-500 active:scale-[.98] transition">
                        <i class="fas fa-plus"></i>Add Transaction
                    </a>
                </div>
            @endif
        </div>
    </div>

    <!-- Delete Modal -->
    <div id="deleteModal" class="hidden fixed inset-0 bg-gray-900/50 backdrop-blur-sm overflow-y-auto h-full w-full z-50">
        <div class="relative top-24 mx-auto w-full max-w-md p-5">
            <div class="rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-xl">
                <div class="p-6 text-center">
                    <div
                        class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-rose-100 dark:bg-rose-900/30">
                        <i class="fas fa-exclamation-triangle text-rose-600"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Delete Transaction</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
                        Are you sure you want to delete this transaction? This action cannot be undone.
                    </p>
                    <div class="flex gap-3">
                        <button onclick="closeDeleteModal()"
                            class="flex-1 px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition">
                            Cancel
                        </button>
                        <form id="deleteForm" method="POST" class="flex-1">
                            @csrf
                            @method('DELETE')
                            <button type="submit"
                                class="w-full px-4 py-2 rounded-lg bg-rose-600 text-white hover:bg-rose-500 active:scale-[.98] transition">
                                Delete
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- Continue with your existing summary cards, filters, and transaction table... -->
        <!-- [Rest of your existing content] -->

    </div>
@endsection

@push('scripts')
    <script>
        /** theme boot + toggle (class-based dark mode) */
        (function initTheme() {
            const root = document.documentElement;
            const stored = localStorage.getItem('theme');
            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            const set = (mode) => {
                if (mode === 'dark') {
                    root.classList.add('dark');
                } else {
                    root.classList.remove('dark');
                }
                localStorage.setItem('theme', mode);
            };
            if (stored) set(stored);
            else set(prefersDark ? 'dark' : 'light');
            document.getElementById('themeToggle')?.addEventListener('click', () => {
                const isDark = root.classList.contains('dark');
                set(isDark ? 'light' : 'dark');
            });
        })();

        // Your existing JavaScript functions...
        function deleteTransaction(transactionId) {
            document.getElementById('deleteForm').action = `/transactions/${transactionId}`;
            document.getElementById('deleteModal').classList.remove('hidden');
        }

        function closeDeleteModal() {
            document.getElementById('deleteModal').classList.add('hidden');
        }

        function resetFilters() {
            window.location.href = '{{ route('transactions.index') }}';
        }

        function exportTransactions() {
            const params = new URLSearchParams(window.location.search);
            params.set('export', 'csv');
            window.location.href = '{{ route('transactions.index') }}?' + params.toString();
        }

        function viewAttachments(transactionId) {
            window.open(`/transactions/${transactionId}/attachments`, '_blank');
        }
    </script>
@endpush