@extends('layouts.app')

@section('title', 'Account Holder Details')

@section('content')
<style>
    .clickable-card {
        transition: all 0.3s ease;
        text-decoration: none;
    }
    .clickable-card:hover .card {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }
    
    /* Button Styling */
    .btn {
        margin-left: 0.5rem;
        transition: all 0.3s ease;
    }
    
    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    
    /* Mobile Responsive Buttons */
    @media (max-width: 768px) {
        .card-header .d-flex {
            flex-direction: column;
            align-items: flex-start !important;
        }
        
        .card-header .d-flex > div {
            margin-top: 0.5rem;
            width: 100%;
        }
        
        .btn {
            margin-left: 0;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
            width: 100%;
        }
    }
    
    @media (max-width: 576px) {
        .btn {
            font-size: 0.9rem;
            padding: 0.5rem 1rem;
        }
    }
</style>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title">
                        <i class="fas fa-user"></i> Account Holder Details
                    </h3>
                    <div>
                        <a href="{{ route('account-holders.edit', $accountHolder) }}" class="btn btn-warning">
                            <i class="fas fa-edit"></i> Edit
                        </a>
                        <a href="{{ route('bank-information.create', ['account_holder_id' => $accountHolder->id]) }}" class="btn btn-success">
                            <i class="fas fa-plus"></i> Add New Bank Account
                        </a>
                        <a href="{{ route('account-holders.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back to List
                        </a>
                    </div>
                </div>
                
                <div class="card-body">
                    <!-- Financial Summary -->
                    <h5>Financial Summary</h5>
                    <div class="row mb-4">
                        <div class="col-md-2">
                            <div class="card bg-primary text-white">
                                <div class="card-body text-center py-3">
                                    <h4 class="mb-1">{{ $financialSummary['total_accounts'] }}</h4>
                                    <small>Total Accounts</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card bg-success text-white">
                                <div class="card-body text-center py-3">
                                    <h4 class="mb-1">{{ $financialSummary['active_accounts'] }}</h4>
                                    <small>Active Accounts</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-info text-white">
                                <div class="card-body text-center py-3">
                                    <h5 class="mb-1">৳{{ number_format($financialSummary['total_current_balance'], 2) }}</h5>
                                    <small>Current Balance</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <a href="#transactions-section" class="clickable-card text-decoration-none">
                                <div class="card bg-warning text-white">
                                    <div class="card-body text-center py-3">
                                        <h4 class="mb-1">{{ $financialSummary['total_transactions'] }}</h4>
                                        <small><i class="fas fa-eye me-1"></i>Transactions</small>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-secondary text-white">
                                <div class="card-body text-center py-3">
                                    <h5 class="mb-1">৳{{ number_format($financialSummary['total_deposits'] - $financialSummary['total_withdrawals'], 2) }}</h5>
                                    <small>Net Balance Change</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    @if($accountHolder->bankAccounts->count() > 0)
                        <hr id="transactions-section">
                        <h5>Bank Accounts Details ({{ $accountHolder->bankAccounts->count() }})</h5>
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead class="thead-dark">
                                    <tr>
                                        <th>Bank Name</th>
                                        <th>Account Number</th>
                                        <th>Account Type</th>
                                        <th>Branch</th>
                                        <th>Opening Balance</th>
                                        <th>Deposits</th>
                                        <th>Withdrawals</th>
                                        <th>Current Balance</th>
                                        <th>Transactions</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($accountHolder->bankAccounts as $account)
                                        <tr>
                                            <td><strong>{{ $account->bank_name }}</strong></td>
                                            <td>{{ $account->account_number }}</td>
                                            <td>{{ ucfirst($account->account_type ?? 'N/A') }}</td>
                                            <td>{{ $account->branch_name ?? 'N/A' }}</td>
                                            <td>
                                                <span class="text-info">৳{{ number_format($account->opening_balance, 2) }}</span>
                                            </td>
                                            <td>
                                            <span class="text-success">+৳{{ number_format($account->bankTransactions->sum('deposit_balance'), 2) }}</span>
                                            </td>
                                            <td>
                                            <span class="text-danger">-৳{{ number_format($account->bankTransactions->sum('withdraw_balance'), 2) }}</span>
                                            </td>
                                            <td>
                                                @php
                                                    $accDeposits = $account->bankTransactions->sum('deposit_balance');
                                                    $accWithdrawals = $account->bankTransactions->sum('withdraw_balance');
                                                    $accCurrent = ($account->opening_balance ?? 0) + $accDeposits - $accWithdrawals;
                                                @endphp
                                                <strong class="text-success">৳{{ number_format($accCurrent, 2) }}</strong>
                                            </td>
                                            <td>
                                                <span class="badge badge-primary">{{ $account->bankTransactions->count() }} txns</span>
                                            </td>
                                            <td>
                                                @if($account->is_active)
                                                    <span class="badge badge-success">Active</span>
                                                @else
                                                    <span class="badge badge-secondary">Inactive</span>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="btn-group" role="group">
                                                    <a href="{{ route('bank-information.show', $account) }}" 
                                                       class="btn btn-sm btn-info" title="View Details">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                    <a href="{{ route('bank-information.transactions', $account) }}" 
                                                       class="btn btn-sm btn-primary" title="View Transactions">
                                                        <i class="fas fa-exchange-alt"></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot class="bg-light">
                                    <tr>
                                        <th colspan="4" class="text-right">Total:</th>
                                        <th>
                                            <span class="text-info">৳{{ number_format($financialSummary['total_opening_balance'], 2) }}</span>
                                        </th>
                                        <th>
                                            <span class="text-success">+৳{{ number_format($financialSummary['total_deposits'], 2) }}</span>
                                        </th>
                                        <th>
                                            <span class="text-danger">-৳{{ number_format($financialSummary['total_withdrawals'], 2) }}</span>
                                        </th>
                                        <th>
                                            <strong class="text-success">৳{{ number_format($financialSummary['total_current_balance'], 2) }}</strong>
                                        </th>
                                        <th>
                                            <span class="badge badge-primary">{{ $financialSummary['total_transactions'] }} txns</span>
                                        </th>
                                        <th colspan="2"></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        
                        <!-- Detailed Transactions Section -->
                        <hr>
                        <h5 class="mt-4 mb-3">All Transactions Details</h5>
                        
                        <!-- Filters -->
                        <div class="card mb-3">
                            <div class="card-header bg-light">
                                <h6 class="mb-0"><i class="fas fa-filter me-2"></i>Filters</h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label"><strong>Bank Account</strong></label>
                                        <select class="form-control" id="filterBankAccount">
                                            <option value="">All Accounts</option>
                                            @foreach($accountHolder->bankAccounts as $account)
                                                <option value="{{ $account->id }}">{{ $account->bank_name }} - {{ $account->account_number }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label"><strong>Type</strong></label>
                                        <select class="form-control" id="filterType">
                                            <option value="">All Types</option>
                                            <option value="deposit">Deposit</option>
                                            <option value="withdrawal">Withdrawal</option>
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label"><strong>Category</strong></label>
                                        <select class="form-control" id="filterCategory">
                                            <option value="">All Categories</option>
                                            @php
                                                $categories = collect();
                                                foreach($accountHolder->bankAccounts as $account) {
                                                    foreach($account->bankTransactions as $transaction) {
                                                        if($transaction->category) {
                                                            $categories->push($transaction->category);
                                                        }
                                                    }
                                                }
                                                $categories = $categories->unique()->sort();
                                            @endphp
                                            @foreach($categories as $category)
                                                <option value="{{ $category }}">{{ $category }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label"><strong>From Date</strong></label>
                                        <input type="date" class="form-control" id="filterFromDate">
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label"><strong>To Date</strong></label>
                                        <input type="date" class="form-control" id="filterToDate">
                                    </div>
                                    <div class="col-md-1 d-flex align-items-end">
                                        <button class="btn btn-secondary btn-sm w-100" id="clearFilters">
                                            <i class="fas fa-redo me-1"></i>Reset
                                        </button>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-12">
                                        <div class="alert alert-info mb-0 py-2" id="filterStats">
                                            <small><strong>Showing:</strong> <span id="filteredCount">0</span> transactions | <strong>Total Amount:</strong> <span id="filteredAmount">৳0.00</span></small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        @php
                            // Collect all transactions from all accounts
                            $allTransactions = collect();
                            foreach($accountHolder->bankAccounts as $account) {
                                foreach($account->bankTransactions as $transaction) {
                                    $allTransactions->push([
                                        'transaction' => $transaction,
                                        'bank_name' => $account->bank_name,
                                        'account_number' => $account->account_number,
                                        'account_id' => $account->id
                                    ]);
                                }
                            }
                            // Sort by transaction date descending (most recent first)
                            $allTransactions = $allTransactions->sortByDesc(function($item) {
                                return $item['transaction']->transaction_date;
                            });
                        @endphp
                        
                        <div class="card">
                            <div class="card-body p-0">
                                @if($allTransactions->count() > 0)
                                    <div class="table-responsive">
                                        <table class="table table-striped table-hover mb-0" id="transactionsTable">
                                            <thead class="thead-dark">
                                                <tr>
                                                    <th>Date</th>
                                                    <th>Bank Account</th>
                                                    <th>Type</th>
                                                    <th>Category</th>
                                                    <th>Description</th>
                                                    <th class="text-right">Amount</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody id="transactionsTableBody">
                                                @foreach($allTransactions as $item)
                                                    @php
                                                        $transaction = $item['transaction'];
                                                    @endphp
                                                    <tr class="transaction-row" 
                                                        data-account-id="{{ $item['account_id'] }}"
                                                        data-type="{{ $transaction->transaction_type }}"
                                                        data-category="{{ $transaction->category ?? '' }}"
                                                        data-date="{{ \Carbon\Carbon::parse($transaction->transaction_date)->format('Y-m-d') }}"
                                                        data-amount="{{ $transaction->transaction_type == 'deposit' ? ($transaction->deposit_balance ?? 0) : ($transaction->withdraw_balance ?? 0) }}">
                                                        <td>
                                                            <strong>{{ \Carbon\Carbon::parse($transaction->transaction_date)->format('M d, Y') }}</strong>
                                                            <br>
                                                            <small class="text-muted">{{ \Carbon\Carbon::parse($transaction->transaction_date)->format('h:i A') }}</small>
                                                        </td>
                                                        <td>
                                                            <strong>{{ $item['bank_name'] }}</strong>
                                                            <br>
                                                            <small class="text-muted">{{ $item['account_number'] }}</small>
                                                        </td>
                                                        <td>
                                                            @if($transaction->transaction_type == 'deposit')
                                                                <span class="badge badge-success"><i class="fas fa-arrow-down me-1"></i>Deposit</span>
                                                            @else
                                                                <span class="badge badge-danger"><i class="fas fa-arrow-up me-1"></i>Withdrawal</span>
                                                            @endif
                                                        </td>
                                                        <td>
                                                            <span class="badge badge-secondary">{{ $transaction->category ?? 'N/A' }}</span>
                                                            @if($transaction->subcategory)
                                                                <br><small class="text-muted">{{ $transaction->subcategory }}</small>
                                                            @endif
                                                        </td>
                                                        <td>{{ $transaction->description ?? 'N/A' }}</td>
                                                        <td class="text-right">
                                                            @if($transaction->transaction_type == 'deposit')
                                                                <strong class="text-success" style="font-size: 1.1em;">+৳{{ number_format($transaction->deposit_balance ?? 0, 2) }}</strong>
                                                            @else
                                                                <strong class="text-danger" style="font-size: 1.1em;">-৳{{ number_format($transaction->withdraw_balance ?? 0, 2) }}</strong>
                                                            @endif
                                                        </td>
                                                        <td>
                                                            <div class="btn-group" role="group">
                                                                <a href="{{ route('bank-transactions.show', $transaction->id) }}" 
                                                                   class="btn btn-sm btn-primary" title="View Transaction Details">
                                                                    <i class="fas fa-eye"></i>
                                                                </a>
                                                                <a href="{{ route('bank-information.transactions', $item['account_id']) }}" 
                                                                   class="btn btn-sm btn-info" title="View Account Transactions">
                                                                    <i class="fas fa-list"></i>
                                                                </a>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                            <tfoot class="bg-light">
                                                <tr>
                                                    <th colspan="5" class="text-right">Total:</th>
                                                    <th class="text-right">
                                                        <span class="text-success">+৳{{ number_format($financialSummary['total_deposits'], 2) }}</span>
                                                        <br>
                                                        <span class="text-danger">-৳{{ number_format($financialSummary['total_withdrawals'], 2) }}</span>
                                                    </th>
                                                    <th></th>
                                                </tr>
                                                <tr>
                                                    <th colspan="5" class="text-right">Net Balance Change:</th>
                                                    <th class="text-right">
                                                        <strong class="text-primary" style="font-size: 1.2em;">
                                                            ৳{{ number_format($financialSummary['total_deposits'] - $financialSummary['total_withdrawals'], 2) }}
                                                        </strong>
                                                    </th>
                                                    <th></th>
                                                </tr>
                                            </tfoot>
                                            </table>
                                        </div>
                                        
                                        <!-- Pagination Controls -->
                                        <div class="card-footer bg-white">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div>
                                                    <small class="text-muted">
                                                        Showing <strong><span id="showingFrom">1</span></strong> to <strong><span id="showingTo">25</span></strong> of <strong><span id="totalVisible">0</span></strong> transactions
                                                    </small>
                                                </div>
                                                <nav>
                                                    <ul class="pagination pagination-sm mb-0" id="paginationControls">
                                                        <!-- Pagination buttons will be inserted here by JavaScript -->
                                                    </ul>
                                                </nav>
                                            </div>
                                        </div>
                                    @else
                                        <div class="text-center py-5">
                                            <i class="fas fa-exchange-alt fa-3x text-muted mb-3"></i>
                                            <p class="text-muted">No transactions found for this account holder.</p>
                                        </div>
                                    @endif
                                </div>
                            </div>
                    @else
                        <hr>
                        <div class="text-center py-3">
                            <i class="fas fa-university fa-2x text-muted mb-2"></i>
                            <p class="text-muted">No bank accounts associated with this account holder.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Smooth scroll to transactions section
    document.addEventListener('DOMContentLoaded', function() {
        const transactionLinks = document.querySelectorAll('a[href="#transactions-section"]');
        transactionLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const target = document.getElementById('transactions-section');
                if (target) {
                    target.scrollIntoView({ 
                        behavior: 'smooth',
                        block: 'start'
                    });
                    // Add highlight effect
                    target.style.backgroundColor = '#fff3cd';
                    setTimeout(() => {
                        target.style.backgroundColor = '';
                    }, 2000);
                }
            });
        });

        // Filtering functionality
        const filterBankAccount = document.getElementById('filterBankAccount');
        const filterType = document.getElementById('filterType');
        const filterCategory = document.getElementById('filterCategory');
        const filterFromDate = document.getElementById('filterFromDate');
        const filterToDate = document.getElementById('filterToDate');
        const clearFiltersBtn = document.getElementById('clearFilters');
        const transactionRows = document.querySelectorAll('.transaction-row');

        // Pagination variables
        let currentPage = 1;
        const itemsPerPage = 25;
        let visibleRows = [];

        // Set default to show only today's transactions
        let isInitialLoad = true;
        const today = new Date().toISOString().split('T')[0];

        function applyFilters() {
            const accountId = filterBankAccount.value;
            const type = filterType.value;
            const category = filterCategory.value;
            let fromDate = filterFromDate.value;
            let toDate = filterToDate.value;

            // On initial load, filter by today's date if no date is set
            if (isInitialLoad && !fromDate && !toDate) {
                fromDate = today;
                toDate = today;
            }

            let totalDeposits = 0;
            let totalWithdrawals = 0;
            visibleRows = [];

            // First, collect all rows that match filters
            transactionRows.forEach(row => {
                const rowAccountId = row.getAttribute('data-account-id');
                const rowType = row.getAttribute('data-type');
                const rowCategory = row.getAttribute('data-category');
                const rowDate = row.getAttribute('data-date');
                const rowAmount = parseFloat(row.getAttribute('data-amount'));

                let show = true;

                // Filter by account
                if (accountId && rowAccountId !== accountId) {
                    show = false;
                }

                // Filter by type
                if (type && rowType !== type) {
                    show = false;
                }

                // Filter by category
                if (category && rowCategory !== category) {
                    show = false;
                }

                // Filter by date range
                if (fromDate && rowDate < fromDate) {
                    show = false;
                }
                if (toDate && rowDate > toDate) {
                    show = false;
                }

                // Collect visible rows
                if (show) {
                    visibleRows.push({row: row, type: rowType, amount: rowAmount});
                    if (rowType === 'deposit') {
                        totalDeposits += rowAmount;
                    } else {
                        totalWithdrawals += rowAmount;
                    }
                }
            });

            // Reset to page 1 when filters change
            currentPage = 1;
            
            // Apply pagination
            updatePagination();
            
            const visibleCount = visibleRows.length;

            // Update filter stats
            const netAmount = totalDeposits - totalWithdrawals;
            
            // Update message based on filter state
            const statsContainer = document.getElementById('filterStats');
            let statsMessage = '<small>';
            
            // Check if showing all (no filters applied)
            const isShowingAll = !accountId && !type && !category && !fromDate && !toDate;
            
            if (isInitialLoad) {
                const todayDate = new Date(today);
                const formattedToday = todayDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
                statsMessage += '<i class="fas fa-calendar-day me-2"></i><strong>Showing Today\'s Transactions (' + formattedToday + '):</strong> ';
            } else if (isShowingAll) {
                statsMessage += '<i class="fas fa-list me-2"></i><strong>Showing All Transactions:</strong> ';
            } else {
                statsMessage += '<i class="fas fa-filter me-2"></i><strong>Filtered Results:</strong> ';
            }
            
            statsMessage += visibleCount + ' transactions | <strong>Amount:</strong> ' +
                '<span class="text-success">+৳' + totalDeposits.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</span> | ' +
                '<span class="text-danger">-৳' + totalWithdrawals.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</span> | ' +
                '<span class="text-primary"><strong>Net: ৳' + netAmount.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</strong></span>';
            statsMessage += '</small>';
            
            statsContainer.innerHTML = statsMessage;
        }

        // Pagination function
        function updatePagination() {
            // Hide all rows first
            transactionRows.forEach(row => row.style.display = 'none');

            // Calculate pagination
            const totalPages = Math.ceil(visibleRows.length / itemsPerPage);
            const startIndex = (currentPage - 1) * itemsPerPage;
            const endIndex = Math.min(startIndex + itemsPerPage, visibleRows.length);

            // Show only rows for current page
            for (let i = startIndex; i < endIndex; i++) {
                visibleRows[i].row.style.display = '';
            }

            // Update pagination info
            document.getElementById('totalVisible').textContent = visibleRows.length;
            document.getElementById('showingFrom').textContent = visibleRows.length > 0 ? startIndex + 1 : 0;
            document.getElementById('showingTo').textContent = endIndex;

            // Render pagination buttons
            renderPaginationButtons(totalPages);
        }

        // Render pagination buttons
        function renderPaginationButtons(totalPages) {
            const paginationControls = document.getElementById('paginationControls');
            paginationControls.innerHTML = '';

            if (totalPages <= 1) return;

            // Previous button
            const prevLi = document.createElement('li');
            prevLi.className = 'page-item' + (currentPage === 1 ? ' disabled' : '');
            prevLi.innerHTML = '<a class="page-link" href="#" data-page="prev"><i class="fas fa-chevron-left"></i></a>';
            paginationControls.appendChild(prevLi);

            // Page numbers
            let startPage = Math.max(1, currentPage - 2);
            let endPage = Math.min(totalPages, currentPage + 2);

            if (startPage > 1) {
                const firstLi = document.createElement('li');
                firstLi.className = 'page-item';
                firstLi.innerHTML = '<a class="page-link" href="#" data-page="1">1</a>';
                paginationControls.appendChild(firstLi);

                if (startPage > 2) {
                    const dotsLi = document.createElement('li');
                    dotsLi.className = 'page-item disabled';
                    dotsLi.innerHTML = '<span class="page-link">...</span>';
                    paginationControls.appendChild(dotsLi);
                }
            }

            for (let i = startPage; i <= endPage; i++) {
                const li = document.createElement('li');
                li.className = 'page-item' + (i === currentPage ? ' active' : '');
                li.innerHTML = '<a class="page-link" href="#" data-page="' + i + '">' + i + '</a>';
                paginationControls.appendChild(li);
            }

            if (endPage < totalPages) {
                if (endPage < totalPages - 1) {
                    const dotsLi = document.createElement('li');
                    dotsLi.className = 'page-item disabled';
                    dotsLi.innerHTML = '<span class="page-link">...</span>';
                    paginationControls.appendChild(dotsLi);
                }

                const lastLi = document.createElement('li');
                lastLi.className = 'page-item';
                lastLi.innerHTML = '<a class="page-link" href="#" data-page="' + totalPages + '">' + totalPages + '</a>';
                paginationControls.appendChild(lastLi);
            }

            // Next button
            const nextLi = document.createElement('li');
            nextLi.className = 'page-item' + (currentPage === totalPages ? ' disabled' : '');
            nextLi.innerHTML = '<a class="page-link" href="#" data-page="next"><i class="fas fa-chevron-right"></i></a>';
            paginationControls.appendChild(nextLi);

            // Add event listeners to pagination buttons
            paginationControls.querySelectorAll('a').forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const page = this.getAttribute('data-page');
                    
                    if (page === 'prev' && currentPage > 1) {
                        currentPage--;
                    } else if (page === 'next' && currentPage < totalPages) {
                        currentPage++;
                    } else if (page !== 'prev' && page !== 'next') {
                        currentPage = parseInt(page);
                    }
                    
                    updatePagination();
                    
                    // Scroll to table top
                    document.getElementById('transactionsTable').scrollIntoView({ behavior: 'smooth', block: 'start' });
                });
            });
        }

        // Add event listeners
        filterBankAccount.addEventListener('change', function() {
            isInitialLoad = false;
            applyFilters();
        });
        filterType.addEventListener('change', function() {
            isInitialLoad = false;
            applyFilters();
        });
        filterCategory.addEventListener('change', function() {
            isInitialLoad = false;
            applyFilters();
        });
        filterFromDate.addEventListener('change', function() {
            isInitialLoad = false;
            applyFilters();
        });
        filterToDate.addEventListener('change', function() {
            isInitialLoad = false;
            applyFilters();
        });

        // Clear filters (show all)
        clearFiltersBtn.addEventListener('click', function() {
            isInitialLoad = false;
            filterBankAccount.value = '';
            filterType.value = '';
            filterCategory.value = '';
            filterFromDate.value = '';
            filterToDate.value = '';
            applyFilters();
        });

        // Initialize filter stats
        applyFilters();
    });
</script>

@endsection