<?php
ob_start();
session_start();
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);

include("header.php");
require_once("../config/topup_helpers.php");

if (!isset($_SESSION['customerid'])) {
    header('Location: login.php?error=nologin');
    exit;
}

ensureTopupSchema($con);

$flash = null;
if (isset($_SESSION['topup_flash'])) {
    $flash = $_SESSION['topup_flash'];
    unset($_SESSION['topup_flash']);
}
$customerId = (int) $_SESSION['customerid'];

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['submit_topup'])) {
    $methodId = isset($_POST['method_id']) ? (int) $_POST['method_id'] : 0;
    $amount = isset($_POST['amount']) ? (float) str_replace(',', '', $_POST['amount']) : 0;
    $note = trim($_POST['note'] ?? '');

    $stmtMethod = $con->prepare("SELECT * FROM payment_methods WHERE id = ? AND is_active = 1 LIMIT 1");
    $stmtMethod->bind_param("i", $methodId);
    $stmtMethod->execute();
    $method = $stmtMethod->get_result()->fetch_assoc();
    $stmtMethod->close();

    if (!$method) {
        $flash = ['type' => 'error', 'text' => 'Selected top up method is not available.'];
    } elseif ($amount <= 0) {
        $flash = ['type' => 'error', 'text' => 'Please enter a valid top up amount.'];
    } else {
        $receiptPath = null;
        $requiresReceipt = (int) $method['require_receipt'] === 1;

        if ($requiresReceipt) {
            if (!isset($_FILES['receipt_file']) || $_FILES['receipt_file']['error'] !== UPLOAD_ERR_OK) {
                $flash = ['type' => 'error', 'text' => 'Proof of payment is required for this method.'];
            }
        }

        if (!$flash && isset($_FILES['receipt_file']) && $_FILES['receipt_file']['error'] === UPLOAD_ERR_OK) {
            $allowedExt = ['jpg', 'jpeg', 'png', 'webp', 'pdf'];
            $fileName = $_FILES['receipt_file']['name'];
            $fileExt = strtolower(pathinfo($fileName, PATHINFO_EXTENSION));
            $fileSize = (int) $_FILES['receipt_file']['size'];

            if (!in_array($fileExt, $allowedExt, true)) {
                $flash = ['type' => 'error', 'text' => 'Receipt must be JPG, PNG, WEBP, or PDF.'];
            } elseif ($fileSize > (5 * 1024 * 1024)) {
                $flash = ['type' => 'error', 'text' => 'Receipt file is too large. Maximum allowed size is 5MB.'];
            } else {
                $uploadDir = __DIR__ . "/assets/images/topups/";
                if (!is_dir($uploadDir)) {
                    mkdir($uploadDir, 0755, true);
                }
                $safeFile = 'topup_' . time() . '_' . mt_rand(1000, 9999) . '.' . $fileExt;
                $targetPath = $uploadDir . $safeFile;
                if (!move_uploaded_file($_FILES['receipt_file']['tmp_name'], $targetPath)) {
                    $flash = ['type' => 'error', 'text' => 'Unable to upload receipt. Please try again.'];
                } else {
                    $receiptPath = 'assets/images/topups/' . $safeFile;
                }
            }
        }

        if (!$flash) {
            $reference = generateTopupReference();

            $stmtInsert = $con->prepare("
                INSERT INTO topup_requests (customerid, method_id, amount, reference, note, receipt_path, status)
                VALUES (?, ?, ?, ?, ?, ?, 'pending')
            ");
            $stmtInsert->bind_param("iidsss", $customerId, $methodId, $amount, $reference, $note, $receiptPath);
            $stmtInsert->execute();
            $stmtInsert->close();

            $stmtCustomer = $con->prepare("SELECT firstname, lastname, email FROM customers WHERE customerid = ? LIMIT 1");
            $stmtCustomer->bind_param("i", $customerId);
            $stmtCustomer->execute();
            $customer = $stmtCustomer->get_result()->fetch_assoc();
            $stmtCustomer->close();

            if ($customer && !empty($customer['email'])) {
                $customerName = trim(($customer['firstname'] ?? '') . ' ' . ($customer['lastname'] ?? ''));
                $customerName = $customerName !== '' ? htmlspecialchars($customerName) : 'Customer';
                $formattedAmount = htmlspecialchars($cur) . number_format($amount, 2);
                $methodName = htmlspecialchars($method['method_name']);
                $topupDate = date("M d, Y h:i A");
                $currentYear = date('Y');

                $subject = "Top Up Request Received - " . $reference;
                $body = "
                <!DOCTYPE html>
                <html>
                <head><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0'></head>
                <body style='margin:0;padding:0;background:#f8fafc;font-family:Arial,sans-serif;'>
                    <table width='100%' cellpadding='0' cellspacing='0' style='padding:30px 15px;'>
                        <tr><td align='center'>
                            <table width='100%' cellpadding='0' cellspacing='0' style='max-width:600px;background:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,0.05);'>
                                <tr>
                                    <td style='background:linear-gradient(135deg,#003399 0%,#005D9D 100%);padding:26px;text-align:center;color:#fff;'>
                                        <h2 style='margin:0;'>Top Up Request Received</h2>
                                    </td>
                                </tr>
                                <tr>
                                    <td style='padding:28px;color:#0f172a;line-height:1.6;'>
                                        <p>Hello {$customerName},</p>
                                        <p>Your top up request has been submitted successfully and is currently pending admin review.</p>
                                        <div style='background:#e6efff;border-left:4px solid #003399;padding:16px;border-radius:0 8px 8px 0;'>
                                            <p style='margin:0 0 6px;'><strong>Reference:</strong> " . htmlspecialchars($reference) . "</p>
                                            <p style='margin:0 0 6px;'><strong>Method:</strong> {$methodName}</p>
                                            <p style='margin:0 0 6px;'><strong>Amount:</strong> {$formattedAmount}</p>
                                            <p style='margin:0;'><strong>Date:</strong> {$topupDate}</p>
                                        </div>
                                        <p style='margin-top:20px;'>We will notify you once this request has been processed.</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td style='padding:18px;text-align:center;font-size:12px;color:#94a3b8;background:#f1f5f9;'>
                                        &copy; {$currentYear} " . htmlspecialchars($sbank) . ". All rights reserved.
                                    </td>
                                </tr>
                            </table>
                        </td></tr>
                    </table>
                </body>
                </html>
                ";
                sendMail($customer['email'], $subject, $body);
            }

            $_SESSION['topup_flash'] = ['type' => 'success', 'text' => 'Top up request submitted successfully.'];
            header('Location: topup.php');
            exit;
        }
    }
}

$methods = [];
$resMethods = $con->query("SELECT * FROM payment_methods WHERE is_active = 1 ORDER BY id DESC");
while ($row = $resMethods->fetch_assoc()) {
    $methods[] = $row;
}

$requests = [];
$stmtRequests = $con->prepare("
    SELECT tr.*, pm.method_name
    FROM topup_requests tr
    INNER JOIN payment_methods pm ON pm.id = tr.method_id
    WHERE tr.customerid = ?
    ORDER BY tr.created_at DESC
    LIMIT 20
");
$stmtRequests->bind_param("i", $customerId);
$stmtRequests->execute();
$resultRequests = $stmtRequests->get_result();
while ($row = $resultRequests->fetch_assoc()) {
    $requests[] = $row;
}
$stmtRequests->close();
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Top Up | <?php echo htmlspecialchars($sbank); ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/app.min.css" rel="stylesheet" type="text/css" />
    <style>
        /* --- PREMIUM BLUE THEME (matching bank transfer) --- */
        :root {
            --primary-purple: #003399;
            --dark-purple: #005D9D;
            --deep-bg: #001a4d;
            --soft-purple-bg: #e6efff;
            --bg-body: #f8fafc;
            --card-surface: #ffffff;
            --text-main: #000000;
            --text-secondary: #000000;
            --border-light: #e2e8f0;
            --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

        body {
            background-color: var(--bg-body);
            font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
            color: var(--text-main);
        }

        .page-content { padding-top: 80px; padding-bottom: 60px; }

        /* --- Transfer Card Styling --- */
        .transfer-card {
            background: white;
            border-radius: 24px;
            border: none;
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            height: 100%;
        }

        .transfer-header {
            background: linear-gradient(135deg, var(--deep-bg) 0%, var(--primary-purple) 100%);
            padding: 40px;
            color: white;
            position: relative;
        }

        .transfer-header::before {
            content: '';
            position: absolute;
            top: -50%; right: -5%;
            width: 400px; height: 400px;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
            border-radius: 50%;
        }

        .balance-pill {
            background: rgba(255,255,255,0.2);
            backdrop-filter: blur(5px);
            padding: 8px 20px;
            border-radius: 50px;
            display: inline-block;
            margin-top: 10px;
            border: 1px solid rgba(255,255,255,0.1);
            font-size: 1rem;
        }

        /* --- Form Styling --- */
        .card-body { padding: 40px; }

        .form-floating > .form-control,
        .form-floating > .form-select {
            border: 1px solid var(--border-light);
            border-radius: 12px;
            height: 58px;
            color: #000000 !important;
            font-weight: 700 !important;
        }

        .form-floating > .form-control:focus,
        .form-floating > .form-select:focus {
            border-color: var(--primary-purple);
            box-shadow: 0 0 0 4px var(--soft-purple-bg);
        }

        .form-floating > label {
            color: #000000 !important;
            font-weight: 700 !important;
        }

        .text-purple { color: var(--primary-purple) !important; }

        .security-notice {
            background: #fffbeb;
            border: 1px solid #fcd34d;
            color: #92400e;
            padding: 15px;
            border-radius: 12px;
            font-size: 0.9rem;
            display: flex;
            gap: 15px;
            align-items: center;
            margin-bottom: 30px;
        }

        /* --- Method Info Box --- */
        .method-info { background: #e6efff; border-left: 4px solid #003399; border-radius: 0 10px 10px 0; padding: 14px; }
        .label-muted { color: #64748b; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; font-weight: 700; }
        .value-dark { color: #0f172a; font-weight: 700; }
        .method-line { margin-bottom: 8px; color: #0f172a; font-weight: 600; }

        .wallet-chip {
            background: #ffffff;
            border: 1px solid #cfd8ea;
            border-radius: 12px;
            padding: 10px 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 10px;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
        }
        .wallet-chip-value {
            font-family: Consolas, Monaco, "Courier New", monospace;
            font-size: 13px;
            font-weight: 700;
            color: #0f172a;
            overflow-wrap: anywhere;
            line-height: 1.5;
            flex: 1 1 auto;
        }
        .wallet-copy-btn {
            border: 1px solid #003399;
            background: #fff;
            color: #003399;
            border-radius: 999px;
            min-width: 40px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all .2s ease;
            flex: 0 0 auto;
        }
        .wallet-copy-btn:hover { background: #003399; color: #fff; }
        .wallet-copy-btn.copied { background: #0f9d58; border-color: #0f9d58; color: #fff; }

        /* --- Receipt File Input --- */
        .file-upload-zone {
            border: 2px dashed var(--border-light);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
            background: #fafbfc;
        }
        .file-upload-zone:hover { border-color: var(--primary-purple); background: var(--soft-purple-bg); }
        .file-upload-zone i { font-size: 2rem; color: #94a3b8; margin-bottom: 6px; }
        .file-upload-zone.has-file { border-color: #0f9d58; background: #f0fdf4; }
        .file-upload-zone.has-file i { color: #0f9d58; }

        /* --- Submit Button --- */
        .btn-topup-submit {
            border-radius: 12px;
            padding: 16px;
            border: none;
            font-weight: 700;
            font-size: 1.1rem;
            letter-spacing: 0.5px;
            background: #003399;
            color: #ffffff;
            box-shadow: 0 4px 12px rgba(0, 51, 153, 0.3);
            transition: all 0.3s;
        }
        .btn-topup-submit:hover,
        .btn-topup-submit:focus {
            color: #ffffff;
            background: #005D9D;
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0, 51, 153, 0.4);
        }

        /* --- Status Badge --- */
        .status-badge { padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: capitalize; }
        .status-pending { background: #fff3cd; color: #946200; }
        .status-approved { background: #d1e7dd; color: #0f5132; }
        .status-rejected { background: #f8d7da; color: #842029; }

        /* --- History Card --- */
        .topup-history-card {
            background: white;
            border-radius: 24px;
            border: none;
            overflow: hidden;
            box-shadow: var(--shadow-lg);
        }
        .topup-history-card .card-body { padding: 30px; }

        @media (max-width: 768px) {
            .transfer-header { padding: 28px 20px; }
            .card-body { padding: 24px 18px; }
            .topup-history-card .card-body { padding: 20px 14px; }
            .balance-pill { font-size: 0.85rem; padding: 6px 14px; }
        }
    </style>
</head>
<body data-sidebar="colored">
<div id="layout-wrapper">
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid">
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <h4 class="mb-1 fw-bold text-dark">Top Up Account</h4>
                                <p class="text-secondary mb-0">Choose a payment method and submit your top up request.</p>
                            </div>
                            <div class="d-none d-md-block">
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb m-0">
                                        <li class="breadcrumb-item"><a href="dashboard.php" class="text-decoration-none text-muted">Dashboard</a></li>
                                        <li class="breadcrumb-item active text-purple fw-bold">Top Up</li>
                                    </ol>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>

                <?php if ($flash): ?>
                    <div class="alert alert-<?php echo $flash['type'] === 'success' ? 'success' : 'danger'; ?>">
                        <?php echo htmlspecialchars($flash['text']); ?>
                    </div>
                <?php endif; ?>

                <div class="row g-4">
                    <div class="col-xl-7">
                        <div class="transfer-card">
                            <div class="transfer-header text-center">
                                <h4 class="text-white mb-2 fw-bold">Top Up Your Account</h4>
                                <p class="text-white-50 mb-0">Fund your wallet using any available payment method below.</p>
                            </div>

                            <div class="card-body">
                                <?php if (empty($methods)): ?>
                                    <div class="alert alert-warning mb-0">No active payment method is available right now. Please contact support.</div>
                                <?php else: ?>
                                    <form method="POST" enctype="multipart/form-data">
                                        <div class="row g-4">
                                            <div class="col-12">
                                                <div class="form-floating">
                                                    <select class="form-select" name="method_id" id="method_id" required>
                                                        <option value="">Select method</option>
                                                        <?php foreach ($methods as $m): ?>
                                                            <option
                                                                value="<?php echo (int) $m['id']; ?>"
                                                                data-type="<?php echo htmlspecialchars($m['method_type']); ?>"
                                                                data-wallet="<?php echo htmlspecialchars($m['wallet_address'] ?? ''); ?>"
                                                                data-network="<?php echo htmlspecialchars($m['network_type'] ?? ''); ?>"
                                                                data-bank="<?php echo htmlspecialchars($m['bank_name'] ?? ''); ?>"
                                                                data-account-name="<?php echo htmlspecialchars($m['account_name'] ?? ''); ?>"
                                                                data-account-number="<?php echo htmlspecialchars($m['account_number'] ?? ''); ?>"
                                                                data-instructions="<?php echo htmlspecialchars($m['instructions'] ?? ''); ?>"
                                                                data-receipt="<?php echo (int) $m['require_receipt']; ?>"
                                                            >
                                                                <?php echo htmlspecialchars($m['method_name']); ?>
                                                            </option>
                                                        <?php endforeach; ?>
                                                    </select>
                                                    <label for="method_id">Payment Method</label>
                                                </div>
                                            </div>

                                            <div class="col-12 d-none" id="methodInfoBox">
                                                <div class="method-info">
                                                    <div class="label-muted">Method Details</div>
                                                    <div class="value-dark" id="methodDetailsText"></div>
                                                </div>
                                            </div>

                                            <div class="col-12">
                                                <div class="form-floating">
                                                    <input type="number" class="form-control" name="amount" id="topup_amount" min="1" step="0.01" placeholder="Enter amount" required>
                                                    <label for="topup_amount">Amount (<?php echo htmlspecialchars($cur); ?>)</label>
                                                </div>
                                            </div>

                                            <div class="col-12">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control" name="note" id="topup_note" placeholder="e.g. TX hash, sender details, narration">
                                                    <label for="topup_note">Transaction Note / Reference (optional)</label>
                                                </div>
                                            </div>

                                            <div class="col-12">
                                                <label class="form-label fw-bold mb-2" style="color: #000;">Proof of Payment</label>
                                                <div class="file-upload-zone" id="fileDropZone" onclick="document.getElementById('receipt_file').click();">
                                                    <i class="bx bx-cloud-upload d-block"></i>
                                                    <span class="d-block fw-bold" id="fileLabel">Click to upload file</span>
                                                    <small class="text-muted d-block mt-1">JPG, PNG, WEBP, PDF (Max 5MB)</small>
                                                </div>
                                                <input type="file" class="d-none" id="receipt_file" name="receipt_file" accept=".jpg,.jpeg,.png,.webp,.pdf">
                                            </div>
                                        </div>

                                        <div class="mt-4 d-grid">
                                            <button type="submit" name="submit_topup" class="btn btn-lg btn-topup-submit">
                                                <i class="bx bxs-paper-plane me-2"></i>Top Up Now
                                            </button>
                                        </div>
                                    </form>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-5">
                        <div class="topup-history-card">
                            <div class="card-body">
                                <h5 class="fw-bold mb-3">Recent Top Up Requests</h5>
                                <?php if (empty($requests)): ?>
                                    <p class="text-muted mb-0">No top up request found yet.</p>
                                <?php else: ?>
                                    <div class="table-responsive">
                                        <table class="table align-middle mb-0">
                                            <thead>
                                                <tr>
                                                    <th>Reference</th>
                                                    <th>Method</th>
                                                    <th>Amount</th>
                                                    <th>Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <?php foreach ($requests as $req): ?>
                                                    <tr>
                                                        <td>
                                                            <div class="fw-bold"><?php echo htmlspecialchars($req['reference']); ?></div>
                                                            <small class="text-muted"><?php echo date("d M Y H:i", strtotime($req['created_at'])); ?></small>
                                                        </td>
                                                        <td><?php echo htmlspecialchars($req['method_name']); ?></td>
                                                        <td><?php echo htmlspecialchars($cur) . number_format((float) $req['amount'], 2); ?></td>
                                                        <td>
                                                            <span class="status-badge status-<?php echo htmlspecialchars($req['status']); ?>">
                                                                <?php echo htmlspecialchars($req['status']); ?>
                                                            </span>
                                                        </td>
                                                    </tr>
                                                <?php endforeach; ?>
                                            </tbody>
                                        </table>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <?php include 'footer.php'; ?>
    </div>
</div>

<script src="assets/libs/jquery/jquery.min.js"></script>
<script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/app.js"></script>
<script>
    (function () {
        const methodSelect = document.getElementById('method_id');
        const infoBox = document.getElementById('methodInfoBox');
        const detailsText = document.getElementById('methodDetailsText');
        const receiptInput = document.getElementById('receipt_file');

        if (!methodSelect) {
            return;
        }

        const escapeHtml = (value) => {
            const div = document.createElement('div');
            div.textContent = value == null ? '' : String(value);
            return div.innerHTML;
        };

        const renderMethodInfo = () => {
            const selected = methodSelect.options[methodSelect.selectedIndex];
            if (!selected || !selected.value) {
                infoBox.classList.add('d-none');
                detailsText.innerHTML = '';
                receiptInput.required = false;
                return;
            }

            const type = selected.dataset.type || 'other';
            let html = '';
            if (type === 'crypto') {
                const wallet = (selected.dataset.wallet || '').trim();
                const network = (selected.dataset.network || '').trim();

                if (wallet) {
                    html += `
                        <div class="wallet-chip">
                            <div class="wallet-chip-value">${escapeHtml(wallet)}</div>
                            <button type="button" class="wallet-copy-btn" data-copy-wallet="${escapeHtml(wallet)}" title="Copy wallet address">
                                <i class="bx bx-copy"></i>
                            </button>
                        </div>
                    `;
                }
                if (network) {
                    html += `<div class="method-line"><strong>Network:</strong> ${escapeHtml(network)}</div>`;
                }
            } else {
                if (selected.dataset.bank) html += `<div class="method-line"><strong>Bank:</strong> ${escapeHtml(selected.dataset.bank)}</div>`;
                if (selected.dataset.accountName) html += `<div class="method-line"><strong>Account Name:</strong> ${escapeHtml(selected.dataset.accountName)}</div>`;
                if (selected.dataset.accountNumber) html += `<div class="method-line"><strong>Account Number:</strong> ${escapeHtml(selected.dataset.accountNumber)}</div>`;
            }
            if (selected.dataset.instructions) html += `<div class="method-line"><strong>Instructions:</strong> ${escapeHtml(selected.dataset.instructions)}</div>`;
            if (!html) html = '<div class="method-line mb-0">No additional method details provided.</div>';

            detailsText.innerHTML = html;
            infoBox.classList.remove('d-none');
            receiptInput.required = selected.dataset.receipt === '1';
        };

        const copyToClipboard = async (text) => {
            if (navigator.clipboard && window.isSecureContext) {
                await navigator.clipboard.writeText(text);
                return;
            }

            const textArea = document.createElement('textarea');
            textArea.value = text;
            textArea.style.position = 'fixed';
            textArea.style.left = '-9999px';
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();
            document.execCommand('copy');
            document.body.removeChild(textArea);
        };

        infoBox.addEventListener('click', async (event) => {
            const button = event.target.closest('[data-copy-wallet]');
            if (!button) return;

            const wallet = button.getAttribute('data-copy-wallet') || '';
            if (!wallet) return;

            try {
                await copyToClipboard(wallet);
                button.classList.add('copied');
                button.innerHTML = '<i class="bx bx-check"></i>';
                setTimeout(() => {
                    button.classList.remove('copied');
                    button.innerHTML = '<i class="bx bx-copy"></i>';
                }, 1200);
            } catch (error) {
                button.innerHTML = '<i class="bx bx-error"></i>';
                setTimeout(() => {
                    button.innerHTML = '<i class="bx bx-copy"></i>';
                }, 1200);
            }
        });

        methodSelect.addEventListener('change', renderMethodInfo);
        renderMethodInfo();

        // File upload zone
        const fileInput = document.getElementById('receipt_file');
        const fileZone = document.getElementById('fileDropZone');
        const fileLabel = document.getElementById('fileLabel');

        if (fileInput && fileZone) {
            fileInput.addEventListener('change', function () {
                if (this.files && this.files.length > 0) {
                    fileLabel.textContent = this.files[0].name;
                    fileZone.classList.add('has-file');
                } else {
                    fileLabel.textContent = 'Click to upload file';
                    fileZone.classList.remove('has-file');
                }
            });
        }
    })();
</script>
</body>
</html>

