<?php include 'header.php'; ?>

<!-- Normal Sub Header -->
<?php include 'template-parts/sub-header-user.php'; ?>

<div class="uk-container">

    <!-- Page Header -->
    <div class="page-header uk-margin-medium-bottom">
        <div class="uk-grid uk-grid-small" uk-grid>

            <div class="uk-width-expand@s">
                <div class="header-left uk-flex uk-flex-middle gap-16">
                    <div class="header-icon">
                        <span uk-icon="icon: wallet; ratio: 1.4" class="uk-icon"></span>
                    </div>
                    <div>
                        <h1 class="header-title">My Wallet</h1>
                        <p class="header-subtitle uk-margin-remove">Manage your wallet balance and transactions</p>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- Wallet Balance Section -->
    <div class="wallet-section uk-margin-medium-bottom">
        <div class="uk-grid uk-grid-medium uk-child-width-1-1 uk-child-width-1-3@m uk-grid-match" uk-grid>

            <!-- Total Balance Card -->
            <div>
                <div class="wallet-card total-balance">
                    <div class="wallet-card-header">
                        <div class="wallet-icon total-icon">
                            <span uk-icon="icon: ryal; ratio: 1.2" class="uk-icon"></span>
                        </div>
                        <h3 class="wallet-card-title">Total Balance</h3>
                    </div>
                    <div class="wallet-balance">
                        <span class="balance-amount" id="totalBalance">450.00</span>
                        <span class="balance-currency">SAR</span>
                    </div>
                </div>
            </div>

            <!-- Withdrawable Balance -->
            <div>
                <div class="wallet-card withdrawable-balance">
                    <div class="wallet-card-header">
                        <div class="wallet-icon withdrawable-icon">
                            <span uk-icon="icon: withdraw-ico; ratio: 1.2" class="uk-icon"></span>
                        </div>
                        <h3 class="wallet-card-title">Withdrawable Balance</h3>
                    </div>
                    <div class="wallet-balance">
                        <span class="balance-amount" id="withdrawableBalance">350.00</span>
                        <span class="balance-currency">SAR</span>
                    </div>
                </div>
            </div>

            <!-- Non-Withdrawable Balance -->
            <div>
                <div class="wallet-card non-withdrawable-balance">
                    <div class="wallet-card-header">
                        <div class="wallet-icon non-withdrawable-icon">
                            <span uk-icon="icon: withdraw-ico-2; ratio: 1.2" class="uk-icon"></span>
                        </div>
                        <h3 class="wallet-card-title">Non-Withdrawable Balance</h3>
                    </div>
                    <div class="wallet-balance">
                        <span class="balance-amount" id="nonWithdrawableBalance">100.00</span>
                        <span class="balance-currency">SAR</span>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- Wallet Actions Section -->
    <div class="wallet-actions-section uk-margin-medium-bottom">
        <h2 class="uk-heading-line uk-h4 f600"><span>Wallet Actions</span></h2>

        <div class="uk-grid uk-grid-medium uk-child-width-1-2@m uk-child-width-1-1@s" uk-grid>

            <!-- Charge Wallet -->
            <div>
                <div class="action-card charge-wallet" onclick="openChargeWallet()">
                    <div class="action-icon">
                        <span uk-icon="icon: plus; ratio: 1.2" class="uk-icon"></span>
                    </div>
                    <div class="action-content">
                        <h3 class="action-title">Charge Wallet</h3>
                        <p class="action-description">Add money to your wallet using payment gateway</p>
                    </div>
                </div>
            </div>

            <!-- Withdraw Request -->
            <div>
                <div class="action-card withdraw-request" onclick="openWithdrawRequest()">
                    <div class="action-icon">
                        <span uk-icon="icon: withdraw-ico-2; ratio: 1.2" class="uk-icon"></span>
                    </div>
                    <div class="action-content">
                        <h3 class="action-title">Withdraw Request</h3>
                        <p class="action-description">Request to withdraw money to your bank account</p>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <h2 class="uk-heading-line uk-h4 f600"><span>Transactions</span></h2>

    <!-- Filter Section for Transactions -->
    <div class="filter-section uk-margin-small-bottom">


        <div class="filter-grid uk-grid uk-grid-small uk-flex-bottom" uk-grid>

            <div class="uk-width-expand@s">
                <div class="uk-grid uk-grid-small uk-child-width-1-3@s" uk-grid>

                    <div class="filter-group">
                        <label class="form-label" for="typeFilter">Transaction Type</label>
                        <select class="uk-select" id="typeFilter">
                            <option value="">All Transactions</option>
                            <option value="deposit">Deposits</option>
                            <option value="withdraw">Withdrawals</option>
                            <option value="payment">Payments</option>
                            <option value="refund">Refunds</option>
                        </select>
                    </div>

                    <div class="filter-group">
                        <label class="form-label" for="dateFrom">Date From</label>
                        <input type="date" class="uk-input" id="dateFrom">
                    </div>

                    <div class="filter-group">
                        <label class="form-label" for="dateTo">Date To</label>
                        <input type="date" class="uk-input" id="dateTo">
                    </div>
                </div>

            </div>

            <div class="uk-width-auto@s">
                <div class="filter-group">
                    <button
                        class="btn-filter uk-button uk-button-secondary uk-width-1-1 uk-flex uk-flex-middle uk-flex-center gap-8"
                        onclick="applyFilters()">
                        <span uk-icon="icon: filter; ratio: .7" class="uk-icon"></span>
                        <span>Filter</span>
                    </button>
                </div>
            </div>

        </div>
    </div>

    <!-- Transactions List -->
    <div class="user-profile-container">
        <div id="transactionsList">
            <!-- Transaction items will be populated here -->
        </div>
    </div>

</div><!-- .uk-container -->

<!-- Charge Wallet Modal -->
<div id="chargeWalletModal" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <button class="uk-modal-close-default" type="button" uk-close></button>

        <h2 class="uk-modal-title">Charge Wallet</h2>

        <form id="chargeWalletForm" class="uk-form-stacked">

            <div class="uk-margin">
                <label class="form-label" for="chargeAmount">Amount (SAR)</label>
                <div class="uk-form-controls">
                    <input class="uk-input" id="chargeAmount" type="number" min="10" max="5000"
                        placeholder="Enter amount" required>
                    <div class="uk-text-meta uk-margin-small-top">Minimum: 10 SAR, Maximum: 5,000 SAR</div>
                </div>
            </div>

            <div class="uk-margin">
                <h3 class="card-title uk-heading-line"><span>Payment Method</span></h3>
                <div class="payment-methods">

                    <div class="payment-method" data-method="visa" onclick="selectPaymentMethod('visa')">
                        <div class="payment-icon">
                            <img src="assets/images/payment/visa.jpg" alt="Visa">
                        </div>
                        <div class="payment-info">
                            <h4>Visa</h4>
                            <p>Credit or Debit Card</p>
                        </div>
                        <div class="uk-margin-left-auto">
                            <input class="uk-radio" type="radio" name="paymentMethod" value="visa" id="visa" required>
                        </div>
                    </div>

                    <div class="payment-method" data-method="mastercard" onclick="selectPaymentMethod('mastercard')">
                        <div class="payment-icon">
                            <img src="assets/images/payment/mastercard.jpg" alt="Master Card">
                        </div>
                        <div class="payment-info">
                            <h4>Mastercard</h4>
                            <p>Credit or Debit Card</p>
                        </div>
                        <div class="uk-margin-left-auto">
                            <input class="uk-radio" type="radio" name="paymentMethod" value="mastercard" id="mastercard"
                                required>
                        </div>
                    </div>

                    <div class="payment-method" data-method="mada" onclick="selectPaymentMethod('mada')">
                        <div class="payment-icon">
                            <img src="assets/images/payment/mada.jpg" alt="Mada">
                        </div>
                        <div class="payment-info">
                            <h4>MADA</h4>
                            <p>Saudi Payments Network</p>
                        </div>
                        <div class="uk-margin-left-auto">
                            <input class="uk-radio" type="radio" name="paymentMethod" value="mada" id="mada" required>
                        </div>
                    </div>

                    <div class="payment-method" data-method="tabby" onclick="selectPaymentMethod('tabby')">
                        <div class="payment-icon">
                            <img src="assets/images/payment/tabby.jpg" alt="Tabby">
                        </div>
                        <div class="payment-info">
                            <h4>Tabby</h4>
                            <p>Pay in 4 installments</p>
                        </div>
                        <div class="uk-margin-left-auto">
                            <input class="uk-radio" type="radio" name="paymentMethod" value="tabby" id="tabby" required>
                        </div>
                    </div>

                    <div class="payment-method" data-method="tamara" onclick="selectPaymentMethod('tamara')">
                        <div class="payment-icon">
                            <img src="assets/images/payment/tamara.jpg" alt="Tamara">
                        </div>
                        <div class="payment-info">
                            <h4>Tamara</h4>
                            <p>Buy now, pay later</p>
                        </div>
                        <div class="uk-margin-left-auto">
                            <input class="uk-radio" type="radio" name="paymentMethod" value="tamara" id="tamara"
                                required>
                        </div>
                    </div>

                </div>
            </div>

            <div class="uk-margin uk-flex uk-flex-right">
                <button class="uk-button uk-button-default uk-modal-close uk-margin-small-right"
                    type="button">Cancel</button>
                <button class="uk-button uk-button-primary" type="submit">Proceed to Payment</button>
            </div>

        </form>
    </div>
</div>

<!-- Withdraw Request Modal -->
<div id="withdrawRequestModal" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <button class="uk-modal-close-default" type="button" uk-close></button>

        <h2 class="uk-modal-title">Withdraw Request</h2>

        <div class="uk-alert-primary" uk-alert>
            <p><span uk-icon="icon: info; ratio: 0.8" class="uk-icon"></span> Available for withdrawal: <strong><span
                        id="modalWithdrawableBalance">350.00</span> SAR</strong></p>
        </div>

        <form id="withdrawRequestForm" class="uk-form-stacked">

            <div class="uk-margin">
                <label class="form-label" for="withdrawAmount">Amount (SAR)</label>
                <div class="uk-form-controls">
                    <input class="uk-input" id="withdrawAmount" type="number" min="50" placeholder="Enter amount"
                        required>
                    <div class="uk-text-meta uk-margin-small-top">Minimum withdrawal: 50 SAR</div>
                </div>
            </div>

            <div class="uk-margin">
                <label class="form-label" for="withdrawReason">Reason (Optional)</label>
                <div class="uk-form-controls">
                    <textarea class="uk-textarea" id="withdrawReason" rows="3"
                        placeholder="Enter reason for withdrawal"></textarea>
                </div>
            </div>

            <div class="uk-alert-warning" uk-alert>
                <p><span uk-icon="icon: warning; ratio: 0.8" class="uk-icon"></span> Withdrawal requests are processed
                    within 1-3 business days. A processing fee of 5 SAR will be deducted.</p>
            </div>

            <div class="uk-margin uk-flex uk-flex-right">
                <button class="uk-button uk-button-default uk-modal-close uk-margin-small-right"
                    type="button">Cancel</button>
                <button class="uk-button uk-button-primary" type="submit">Submit Request</button>
            </div>

        </form>
    </div>
</div>


<script>
    // Sample transaction data (keeping your existing transactions)
    const transactions = [{
            id: 'TXN-2024-001',
            type: 'deposit',
            amount: 200,
            description: 'Wallet top-up via Visa',
            status: 'completed',
            date: '2024-12-12T14:30:00Z',
            paymentMethod: 'Visa ••••• 4532'
        },
        {
            id: 'TXN-2024-002',
            type: 'payment',
            amount: -180,
            description: 'Session payment - Ahmed Al-Rashid',
            status: 'completed',
            date: '2024-12-11T10:15:00Z',
            orderReference: '#CS-2024-001245'
        },
        {
            id: 'TXN-2024-003',
            type: 'refund',
            amount: 150,
            description: 'Session cancellation refund',
            status: 'completed',
            date: '2024-12-10T16:45:00Z',
            orderReference: '#CS-2024-001243'
        },
        {
            id: 'TXN-2024-004',
            type: 'withdraw',
            amount: -100,
            description: 'Withdrawal to bank account',
            status: 'pending',
            date: '2024-12-09T09:20:00Z',
            bankReference: 'IBAN: SA03•••••••••••••4567'
        },
        {
            id: 'TXN-2024-005',
            type: 'deposit',
            amount: 500,
            description: 'Wallet top-up via MADA',
            status: 'completed',
            date: '2024-12-08T13:10:00Z',
            paymentMethod: 'MADA ••••• 7890'
        },
        {
            id: 'TXN-2024-006',
            type: 'payment',
            amount: -220,
            description: 'Session payment - Sara Mohammed',
            status: 'completed',
            date: '2024-12-07T11:30:00Z',
            orderReference: '#CS-2024-001240'
        },
        {
            id: 'TXN-2024-007',
            type: 'payment',
            amount: -150,
            description: 'Session payment - Omar Hassan',
            status: 'failed',
            date: '2024-12-06T15:20:00Z',
            orderReference: '#CS-2024-001238'
        },
        {
            id: 'TXN-2024-008',
            type: 'deposit',
            amount: 100,
            description: 'Wallet top-up via Tabby',
            status: 'completed',
            date: '2024-12-05T12:45:00Z',
            paymentMethod: 'Tabby (4 installments)'
        }
    ];

    let filteredTransactions = [...transactions];

    // Wallet balances
    const walletData = {
        total: 450.00,
        withdrawable: 350.00,
        nonWithdrawable: 100.00
    };

    // Transaction type configurations
    const transactionConfig = {
        deposit: {
            icon: 'deposit-ico',
            iconClass: 'deposit',
            title: 'Deposit'
        },
        withdraw: {
            icon: 'withdraw-ico',
            iconClass: 'withdraw',
            title: 'Withdrawal'
        },
        payment: {
            icon: 'payment-ico',
            iconClass: 'payment',
            title: 'Payment'
        },
        refund: {
            icon: 'refund-ico',
            iconClass: 'refund',
            title: 'Refund'
        }
    };

    // Format date
    function formatDate(dateString) {
        const date = new Date(dateString);
        return date.toLocaleDateString('en-US', {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        });
    }

    // Format amount
    function formatAmount(amount) {
        const isPositive = amount > 0;
        const formattedAmount = Math.abs(amount).toFixed(2);
        return {
            display: `${isPositive ? '+' : '-'}${formattedAmount} SAR`,
            class: isPositive ? 'positive' : 'negative'
        };
    }

    // Get transaction additional info
    function getTransactionDetails(transaction) {
        let additionalInfo = '';

        if (transaction.paymentMethod) {
            additionalInfo = transaction.paymentMethod;
        } else if (transaction.orderReference) {
            additionalInfo = transaction.orderReference;
        } else if (transaction.bankReference) {
            additionalInfo = transaction.bankReference;
        }

        return additionalInfo;
    }

    // Render transactions
    function renderTransactions(transactionsToRender = filteredTransactions) {
        const container = document.getElementById('transactionsList');

        if (transactionsToRender.length === 0) {
            container.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-icon">
                            <span uk-icon="icon: database; ratio: 3" class="uk-icon"></span>
                        </div>
                        <div class="empty-title">No transactions found</div>
                        <div class="empty-description">Try adjusting your filters</div>
                    </div>
                `;
            return;
        }

        container.innerHTML = transactionsToRender.map(transaction => {
            const config = transactionConfig[transaction.type];
            const amount = formatAmount(transaction.amount);
            const additionalInfo = getTransactionDetails(transaction);

            return `
                    <div class="transaction-item" onclick="showTransactionDetails('${transaction.id}')">
                        <div class="transaction-content">
                            <div class="transaction-left">
                                <div class="transaction-icon ${config.iconClass}">
                                    <span uk-icon="icon: ${config.icon}; ratio: 1.4" class="uk-icon"></span>
                                </div>
                                <div class="transaction-details">
                                    <div class="uk-card-title uk-text-secondary f600">${config.title}</div>
                                    <p>${transaction.description}</p>
                                    ${additionalInfo ? `<div class="transaction-meta">${additionalInfo}</div>` : ''}
                                </div>
                            </div>
                            <div class="transaction-right">
                                <div class="transaction-amount ${amount.class}">
                                    ${amount.display}
                                </div>
                                <div class="transaction-status status-${transaction.status}">
                                    ${transaction.status.charAt(0).toUpperCase() + transaction.status.slice(1)}
                                </div>
                                <div class="transaction-meta">
                                    ${formatDate(transaction.date)}
                                </div>
                            </div>
                        </div>
                    </div>
                `;
        }).join('');
    }

    // Apply filters
    function applyFilters() {
        const typeFilter = document.getElementById('typeFilter').value;
        const dateFrom = document.getElementById('dateFrom').value;
        const dateTo = document.getElementById('dateTo').value;

        filteredTransactions = transactions.filter(transaction => {
            // Type filter
            if (typeFilter && transaction.type !== typeFilter) {
                return false;
            }

            // Date filters
            const transactionDate = new Date(transaction.date);

            if (dateFrom) {
                const fromDate = new Date(dateFrom);
                if (transactionDate < fromDate) {
                    return false;
                }
            }

            if (dateTo) {
                const toDate = new Date(dateTo + 'T23:59:59');
                if (transactionDate > toDate) {
                    return false;
                }
            }

            return true;
        });

        renderTransactions(filteredTransactions);

        UIkit.notification({
            message: `Found ${filteredTransactions.length} transactions`,
            status: 'success',
            pos: 'top-center',
            timeout: 2000
        });
    }

    // Show transaction details
    function showTransactionDetails(transactionId) {
        const transaction = transactions.find(t => t.id === transactionId);
        if (!transaction) return;

        const config = transactionConfig[transaction.type];
        const amount = formatAmount(transaction.amount);

        let detailsHTML = `
                <div class="uk-text-center uk-margin-bottom">
                    <div class="transaction-icon ${config.iconClass}" style="margin: 0 auto 1rem; width: 80px; height: 80px; font-size: 2rem;">
                    <span uk-icon="icon: ${config.icon}; ratio: 1.4" class="uk-icon"></span>
                    </div>
                    <h3>${config.title}</h3>
                    <div class="transaction-amount ${amount.class}" style="font-size: 2rem; margin: 1rem 0;">
                        ${amount.display}
                    </div>
                </div>
                
                <div class="uk-grid-small" uk-grid>
                    <div class="uk-width-1-3@s"><strong>Transaction ID:</strong></div>
                    <div class="uk-width-2-3@s">${transaction.id}</div>
                    
                    <div class="uk-width-1-3@s"><strong>Status:</strong></div>
                    <div class="uk-width-2-3@s">
                        <span class="transaction-status status-${transaction.status}">
                            ${transaction.status.charAt(0).toUpperCase() + transaction.status.slice(1)}
                        </span>
                    </div>
                    
                    <div class="uk-width-1-3@s"><strong>Date:</strong></div>
                    <div class="uk-width-2-3@s">${formatDate(transaction.date)}</div>
                    
                    <div class="uk-width-1-3@s"><strong>Description:</strong></div>
                    <div class="uk-width-2-3@s">${transaction.description}</div>
            `;

        if (transaction.paymentMethod) {
            detailsHTML += `
                    <div class="uk-width-1-3@s"><strong>Payment Method:</strong></div>
                    <div class="uk-width-2-3@s">${transaction.paymentMethod}</div>
                `;
        }

        if (transaction.orderReference) {
            detailsHTML += `
                    <div class="uk-width-1-3@s"><strong>Order Reference:</strong></div>
                    <div class="uk-width-2-3@s">${transaction.orderReference}</div>
                `;
        }

        if (transaction.bankReference) {
            detailsHTML += `
                    <div class="uk-width-1-3@s"><strong>Bank Reference:</strong></div>
                    <div class="uk-width-2-3@s">${transaction.bankReference}</div>
                `;
        }

        detailsHTML += '</div>';

        UIkit.modal.dialog(detailsHTML, {
            bgClose: true,
            escClose: true,
            labels: {
                Ok: 'Close'
            }
        });
    }

    // Open charge wallet modal
    function openChargeWallet() {
        UIkit.modal('#chargeWalletModal').show();
    }

    // Open withdraw request modal
    function openWithdrawRequest() {
        // Update withdrawable balance in modal
        document.getElementById('modalWithdrawableBalance').textContent = walletData.withdrawable.toFixed(2);

        // Set max withdrawal amount
        const withdrawAmountInput = document.getElementById('withdrawAmount');
        withdrawAmountInput.max = walletData.withdrawable;

        UIkit.modal('#withdrawRequestModal').show();
    }

    // Select payment method
    function selectPaymentMethod(method) {
        // Remove selected class from all payment methods
        document.querySelectorAll('.payment-method').forEach(pm => {
            pm.classList.remove('selected');
        });

        // Add selected class to clicked method
        const selectedMethod = document.querySelector(`.payment-method[data-method="${method}"]`);
        if (selectedMethod) {
            selectedMethod.classList.add('selected');

            // Check the radio button
            const radio = selectedMethod.querySelector('input[type="radio"]');
            if (radio) {
                radio.checked = true;
            }
        }
    }

    // Handle charge wallet form submission
    document.getElementById('chargeWalletForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const amount = document.getElementById('chargeAmount').value;
        const paymentMethod = document.querySelector('input[name="paymentMethod"]:checked').value;

        // Simulate payment processing
        UIkit.modal('#chargeWalletModal').hide();

        UIkit.notification({
            message: 'Redirecting to payment gateway...',
            status: 'primary',
            pos: 'top-center',
            timeout: 3000
        });

        // Here you would redirect to the actual payment gateway
        setTimeout(() => {
            UIkit.notification({
                message: `Payment of ${amount} SAR initiated successfully`,
                status: 'success',
                pos: 'top-center',
                timeout: 3000
            });
        }, 2000);
    });

    // Handle withdraw request form submission
    document.getElementById('withdrawRequestForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const amount = parseFloat(document.getElementById('withdrawAmount').value);
        const reason = document.getElementById('withdrawReason').value;

        // Validate withdrawal amount
        if (amount > walletData.withdrawable) {
            UIkit.notification({
                message: 'Withdrawal amount exceeds available balance',
                status: 'danger',
                pos: 'top-center',
                timeout: 3000
            });
            return;
        }

        if (amount < 50) {
            UIkit.notification({
                message: 'Minimum withdrawal amount is 50 SAR',
                status: 'danger',
                pos: 'top-center',
                timeout: 3000
            });
            return;
        }

        // Simulate withdrawal request processing
        UIkit.modal('#withdrawRequestModal').hide();

        UIkit.notification({
            message: 'Withdrawal request submitted successfully',
            status: 'success',
            pos: 'top-center',
            timeout: 3000
        });

        // Reset form
        document.getElementById('withdrawRequestForm').reset();

        // Add the withdrawal transaction to the list
        const newTransaction = {
            id: 'TXN-' + Date.now(),
            type: 'withdraw',
            amount: -amount,
            description: 'Withdrawal request',
            status: 'pending',
            date: new Date().toISOString(),
            bankReference: 'IBAN: SA03•••••••••••••4567'
        };

        transactions.unshift(newTransaction);
        filteredTransactions = [...transactions];
        renderTransactions();
    });

    // Validate withdrawal amount in real-time
    document.getElementById('withdrawAmount').addEventListener('input', function(e) {
        const amount = parseFloat(e.target.value);
        const maxAmount = walletData.withdrawable;

        if (amount > maxAmount) {
            e.target.setCustomValidity(`Maximum withdrawal amount is ${maxAmount} SAR`);
        } else if (amount < 50 && amount > 0) {
            e.target.setCustomValidity('Minimum withdrawal amount is 50 SAR');
        } else {
            e.target.setCustomValidity('');
        }
    });

    // Update balance display
    function updateBalanceDisplay() {
        document.getElementById('totalBalance').textContent = walletData.total.toFixed(2);
        document.getElementById('withdrawableBalance').textContent = walletData.withdrawable.toFixed(2);
        document.getElementById('nonWithdrawableBalance').textContent = walletData.nonWithdrawable.toFixed(2);
    }

    // Initialize page
    document.addEventListener('DOMContentLoaded', function() {
        // Set default date range (last 30 days)
        const today = new Date();
        const thirtyDaysAgo = new Date(today.getTime() - (30 * 24 * 60 * 60 * 1000));

        document.getElementById('dateTo').value = today.toISOString().split('T')[0];
        document.getElementById('dateFrom').value = thirtyDaysAgo.toISOString().split('T')[0];

        // Update balance display
        updateBalanceDisplay();

        // Render initial transactions
        renderTransactions();
    });
</script>

<?php include 'footer.php'; ?>