<?php 
// Include session handling
try {
    include_once 'services/session.php';
} catch (Exception $e) {
    die("Error including session.php: " . $e->getMessage());
}

// Check if user is logged in
if (!isset($_SESSION['user']) || empty($_SESSION['user'])) {
    header('Location: auth-login.php?error=session_expired');
    exit();
}

// Get user details
$user_role = $_SESSION['role_name'] ?? 'Customer';
$user_id = $_SESSION['user_id'] ?? 0;
$user_name = $_SESSION['full_name'] ?? $_SESSION['user'];

// Only allow customers
if ($user_role !== 'Customer') {
    header('Location: auth-login.php?error=access_denied');
    exit();
}

// Include database connection
try {
    require_once 'layouts/dbconn.php';
} catch (Exception $e) {
    die("Error including database connection: " . $e->getMessage());
}

// Test database connection
if (!isset($conn) || $conn->connect_error) {
    die("Database connection failed: " . ($conn->connect_error ?? 'Connection object not found'));
}

// Function to safely execute queries
if (!function_exists('safeQuery')) {
    function safeQuery($conn, $query, $params = []) {
        try {
            $stmt = $conn->prepare($query);
            if (!$stmt) {
                throw new Exception("Prepare failed: " . $conn->error);
            }
            
            if (!empty($params)) {
                $types = str_repeat('s', count($params));
                $stmt->bind_param($types, ...$params);
            }
            
            $stmt->execute();
            $result = $stmt->get_result();
            $data = $result->fetch_all(MYSQLI_ASSOC);
            $stmt->close();
            
            return $data;
        } catch (Exception $e) {
            error_log("Query error: " . $e->getMessage());
            return [];
        }
    }
}

// Get specific transaction if ID provided
$transaction_id = $_GET['id'] ?? null;
$selectedTransaction = null;
$error_message = '';

if ($transaction_id) {
    $transaction_result = safeQuery($conn, "
        SELECT 
            p.payment_id,
            p.transaction_id,
            p.amount,
            p.currency,
            p.status,
            p.payment_method,
            p.created_at,
            p.updated_at,
            pr.name as product_name,
            pp.tier_name as plan_name,
            pp.price_usd as subtotal,
            l.license_key,
            l.license_id,
            u.full_name as customer_name,
            u.email as customer_email,
            u.company_name,
            0 as tax_amount,
            0 as discount_amount
        FROM payments p
        LEFT JOIN licenses l ON p.license_id = l.license_id
        LEFT JOIN products pr ON l.product_id = pr.product_id
        LEFT JOIN product_pricing pp ON l.pricing_id = pp.pricing_id
        LEFT JOIN users u ON p.user_id = u.user_id
        WHERE p.payment_id = ? AND p.user_id = ?
    ", [$transaction_id, $user_id]);
    
    if (!empty($transaction_result)) {
        $selectedTransaction = $transaction_result[0];
    } else {
        $error_message = "Transaction not found or access denied.";
    }
}

// Get all customer transactions for selection
$recentTransactions = safeQuery($conn, "
    SELECT 
        p.payment_id,
        p.transaction_id,
        p.amount,
        p.currency,
        p.status,
        p.created_at,
        pr.name as product_name
    FROM payments p
    LEFT JOIN licenses l ON p.license_id = l.license_id
    LEFT JOIN products pr ON l.product_id = pr.product_id
    WHERE p.user_id = ? AND p.status = 'completed'
    ORDER BY p.created_at DESC
    LIMIT 20
", [$user_id]);

// Function to display time ago
function timeAgo($datetime) {
    $time = time() - strtotime($datetime);
    
    if ($time < 60) return 'just now';
    if ($time < 3600) return floor($time/60) . ' minutes ago';
    if ($time < 86400) return floor($time/3600) . ' hours ago';
    if ($time < 2592000) return floor($time/86400) . ' days ago';
    if ($time < 31536000) return floor($time/2592000) . ' months ago';
    return floor($time/31536000) . ' years ago';
}

// Simple QR code generation placeholder
function generateQRCode($text) {
    return "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" . urlencode($text);
}
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <?php 
    $title = "Transaction Receipts";
    if (file_exists('partials/title-meta.php')) {
        try {
            include_once 'partials/title-meta.php';
        } catch (Exception $e) {
            echo "<title>$title - ConnectPay</title>\n";
        }
    } else {
        echo "<title>$title - ConnectPay</title>\n";
    }
    ?>
    
    <?php 
    if (file_exists('partials/head-css.php')) {
        try {
            include_once 'partials/head-css.php';
        } catch (Exception $e) {
            echo '<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">' . "\n";
        }
    } else {
        echo '<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">' . "\n";
    }
    ?>
    
    <style>
        body {
            background-color: #f8f9fa;
        }
        
        .receipt-container {
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        
        .receipt-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 8px 8px 0 0;
            color: white;
            padding: 2rem;
        }
        
        .receipt-content {
            padding: 2rem;
        }
        
        .transaction-card {
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            background: white;
            transition: all 0.2s ease;
            cursor: pointer;
        }
        
        .transaction-card:hover {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            transform: translateY(-1px);
        }
        
        .transaction-card.selected {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        
        .status-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 500;
            text-transform: uppercase;
        }
        
        .status-completed {
            background-color: #dcfce7;
            color: #166534;
        }
        
        .status-pending {
            background-color: #fef3c7;
            color: #92400e;
        }
        
        .status-failed {
            background-color: #fef2f2;
            color: #dc2626;
        }
        
        .status-refunded {
            background-color: #f0f9ff;
            color: #1e40af;
        }
        
        .info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 0;
            border-bottom: 1px solid #f3f4f6;
        }
        
        .info-row:last-child {
            border-bottom: none;
        }
        
        .info-label {
            color: #6b7280;
            font-weight: 500;
        }
        
        .info-value {
            color: #111827;
            font-weight: 600;
        }
        
        .btn-primary {
            background-color: #3b82f6;
            border-color: #3b82f6;
            border-radius: 6px;
            font-weight: 500;
        }
        
        .btn-primary:hover {
            background-color: #2563eb;
            border-color: #2563eb;
        }
        
        .btn-outline-secondary {
            border: 1px solid #d1d5db;
            color: #6b7280;
            border-radius: 6px;
        }
        
        .btn-outline-secondary:hover {
            background-color: #f9fafb;
            border-color: #9ca3af;
            color: #374151;
        }
        
        .qr-code {
            max-width: 150px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            padding: 0.5rem;
        }
        
        .page-title-box {
            background: white;
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            border: 1px solid #e2e8f0;
        }
        
        @media print {
            .no-print {
                display: none !important;
            }
            
            .receipt-container {
                box-shadow: none;
                border: 1px solid #000;
            }
            
            .receipt-header {
                background: #f3f4f6 !important;
                color: #000 !important;
            }
        }
    </style>
</head>

<body>

<div id="wrapper">
    <?php 
    $pagetitle = "Transaction Receipts"; 
    if (file_exists('partials/menu.php')) {
        try {
            include_once 'partials/menu.php';
        } catch (Exception $e) {
            echo '<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
                    <div class="container">
                        <a class="navbar-brand" href="customer-dashboard.php">ConnectPay</a>
                        <span class="navbar-text">Welcome, ' . htmlspecialchars($user_name) . '</span>
                    </div>
                  </nav>';
        }
    }
    ?>

    <div class="content-page">
        <div class="content">
            <div class="container-fluid">
                
                <!-- Page Title -->
                <div class="row no-print">
                    <div class="col-12">
                        <div class="page-title-box">
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="customer-dashboard.php">Dashboard</a></li>
                                    <li class="breadcrumb-item"><a href="payment-history.php">Payment History</a></li>
                                    <li class="breadcrumb-item active">Transaction Receipts</li>
                                </ol>
                            </div>
                            <h4 class="page-title">
                                <i class="fas fa-receipt me-2"></i>
                                Transaction Receipts
                            </h4>
                        </div>
                    </div>
                </div>
                
                <?php if (!empty($error_message)): ?>
                <div class="row no-print">
                    <div class="col-12">
                        <div class="alert alert-danger">
                            <i class="fas fa-exclamation-circle me-2"></i>
                            <?php echo htmlspecialchars($error_message); ?>
                        </div>
                    </div>
                </div>
                <?php endif; ?>
                
                <div class="row">
                    <!-- Transaction Selection -->
                    <?php if (!$selectedTransaction): ?>
                    <div class="col-12">
                        <div class="card no-print">
                            <div class="card-header border-bottom bg-light">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-list me-2"></i>
                                    Select Transaction
                                </h5>
                            </div>
                            <div class="card-body">
                                <?php if (empty($recentTransactions)): ?>
                                <div class="text-center py-5">
                                    <div class="mb-3">
                                        <i class="fas fa-receipt fa-4x text-muted"></i>
                                    </div>
                                    <h5 class="text-muted">No Transactions Found</h5>
                                    <p class="text-muted mb-4">You don't have any completed transactions yet.</p>
                                    <a href="browse-plugins.php" class="btn btn-primary">
                                        <i class="fas fa-shopping-cart me-2"></i>
                                        Browse Plugins
                                    </a>
                                </div>
                                <?php else: ?>
                                <div class="row">
                                    <?php foreach ($recentTransactions as $transaction): ?>
                                    <div class="col-md-6 col-lg-4 mb-3">
                                        <div class="transaction-card p-3 h-100" onclick="selectTransaction(<?php echo $transaction['payment_id']; ?>)">
                                            <div class="d-flex justify-content-between align-items-start mb-2">
                                                <span class="status-badge status-<?php echo $transaction['status']; ?>">
                                                    <?php echo ucfirst($transaction['status']); ?>
                                                </span>
                                                <small class="text-muted">
                                                    <?php echo date('M j, Y', strtotime($transaction['created_at'])); ?>
                                                </small>
                                            </div>
                                            
                                            <h6 class="mb-2"><?php echo htmlspecialchars($transaction['product_name'] ?? 'N/A'); ?></h6>
                                            
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div>
                                                    <h5 class="mb-0 text-primary">$<?php echo number_format($transaction['amount'], 2); ?></h5>
                                                    <small class="text-muted"><?php echo strtoupper($transaction['currency']); ?></small>
                                                </div>
                                                <div class="text-end">
                                                    <small class="text-muted d-block">Transaction ID</small>
                                                    <code class="small"><?php echo htmlspecialchars($transaction['transaction_id']); ?></code>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <?php endforeach; ?>
                                </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                    <?php else: ?>
                    
                    <!-- Receipt Display -->
                    <div class="col-lg-8">
                        <div class="receipt-container">
                            <!-- Receipt Header -->
                            <div class="receipt-header text-center">
                                <div class="mb-3">
                                    <h3>ConnectPay</h3>
                                </div>
                                <h3 class="mb-2">Transaction Receipt</h3>
                                <p class="mb-0 opacity-90">Official payment confirmation</p>
                            </div>
                            
                            <!-- Receipt Content -->
                            <div class="receipt-content">
                                <!-- Transaction Summary -->
                                <div class="mb-4">
                                    <h5 class="mb-3">
                                        <i class="fas fa-info-circle me-2"></i>
                                        Transaction Details
                                    </h5>
                                    
                                    <div class="info-row">
                                        <span class="info-label">Transaction ID</span>
                                        <span class="info-value">
                                            <?php echo htmlspecialchars($selectedTransaction['transaction_id']); ?>
                                        </span>
                                    </div>
                                    
                                    <div class="info-row">
                                        <span class="info-label">Date & Time</span>
                                        <span class="info-value">
                                            <?php echo date('F j, Y \a\t g:i A', strtotime($selectedTransaction['created_at'])); ?>
                                        </span>
                                    </div>
                                    
                                    <div class="info-row">
                                        <span class="info-label">Status</span>
                                        <span class="status-badge status-<?php echo $selectedTransaction['status']; ?>">
                                            <?php echo ucfirst($selectedTransaction['status']); ?>
                                        </span>
                                    </div>
                                    
                                    <div class="info-row">
                                        <span class="info-label">Payment Method</span>
                                        <span class="info-value">
                                            <i class="fas fa-mobile-alt me-1"></i>
                                            <?php echo htmlspecialchars($selectedTransaction['payment_method'] ?? 'Mobile Money'); ?>
                                        </span>
                                    </div>
                                </div>
                                
                                <!-- Product Information -->
                                <div class="mb-4">
                                    <h5 class="mb-3">
                                        <i class="fas fa-box me-2"></i>
                                        Product Information
                                    </h5>
                                    
                                    <div class="info-row">
                                        <span class="info-label">Product Name</span>
                                        <span class="info-value">
                                            <?php echo htmlspecialchars($selectedTransaction['product_name'] ?? 'N/A'); ?>
                                        </span>
                                    </div>
                                    
                                    <div class="info-row">
                                        <span class="info-label">License Type</span>
                                        <span class="info-value">
                                            <?php echo htmlspecialchars($selectedTransaction['plan_name'] ?? 'Standard'); ?>
                                        </span>
                                    </div>
                                    
                                    <?php if ($selectedTransaction['license_key']): ?>
                                    <div class="info-row">
                                        <span class="info-label">License Key</span>
                                        <span class="info-value">
                                            <code style="cursor: pointer;" onclick="copyToClipboard(this)" title="Click to copy">
                                                <?php echo htmlspecialchars($selectedTransaction['license_key']); ?>
                                            </code>
                                        </span>
                                    </div>
                                    <?php endif; ?>
                                    
                                    <?php if ($selectedTransaction['license_id']): ?>
                                    <div class="info-row">
                                        <span class="info-label">Download Available</span>
                                        <span class="info-value">
                                            <a href="download-plugins.php?license=<?php echo $selectedTransaction['license_id']; ?>" 
                                               class="btn btn-sm btn-outline-primary">
                                                <i class="fas fa-download me-1"></i>
                                                Download Plugin
                                            </a>
                                        </span>
                                    </div>
                                    <?php endif; ?>
                                </div>
                                
                                <!-- Payment Summary -->
                                <div class="mb-4">
                                    <h5 class="mb-3">
                                        <i class="fas fa-calculator me-2"></i>
                                        Payment Summary
                                    </h5>
                                    
                                    <div class="info-row">
                                        <span class="info-label">Subtotal</span>
                                        <span class="info-value">
                                            $<?php echo number_format($selectedTransaction['subtotal'] ?? $selectedTransaction['amount'], 2); ?>
                                        </span>
                                    </div>
                                    
                                    <?php if ($selectedTransaction['tax_amount'] > 0): ?>
                                    <div class="info-row">
                                        <span class="info-label">Tax</span>
                                        <span class="info-value">
                                            $<?php echo number_format($selectedTransaction['tax_amount'], 2); ?>
                                        </span>
                                    </div>
                                    <?php endif; ?>
                                    
                                    <?php if ($selectedTransaction['discount_amount'] > 0): ?>
                                    <div class="info-row">
                                        <span class="info-label">Discount</span>
                                        <span class="info-value text-success">
                                            -$<?php echo number_format($selectedTransaction['discount_amount'], 2); ?>
                                        </span>
                                    </div>
                                    <?php endif; ?>
                                    
                                    <div class="info-row border-top pt-3">
                                        <span class="info-label h6">Total Amount</span>
                                        <span class="info-value h5 text-primary">
                                            $<?php echo number_format($selectedTransaction['amount'], 2); ?>
                                            <small class="text-muted"><?php echo strtoupper($selectedTransaction['currency']); ?></small>
                                        </span>
                                    </div>
                                </div>
                                
                                <!-- Customer Information -->
                                <div class="mb-4">
                                    <h5 class="mb-3">
                                        <i class="fas fa-user me-2"></i>
                                        Customer Information
                                    </h5>
                                    
                                    <div class="info-row">
                                        <span class="info-label">Customer Name</span>
                                        <span class="info-value">
                                            <?php echo htmlspecialchars($selectedTransaction['customer_name']); ?>
                                        </span>
                                    </div>
                                    
                                    <div class="info-row">
                                        <span class="info-label">Email Address</span>
                                        <span class="info-value">
                                            <?php echo htmlspecialchars($selectedTransaction['customer_email']); ?>
                                        </span>
                                    </div>
                                    
                                    <?php if ($selectedTransaction['company_name']): ?>
                                    <div class="info-row">
                                        <span class="info-label">Company</span>
                                        <span class="info-value">
                                            <?php echo htmlspecialchars($selectedTransaction['company_name']); ?>
                                        </span>
                                    </div>
                                    <?php endif; ?>
                                </div>
                                
                                <!-- Footer -->
                                <div class="text-center pt-4 border-top">
                                    <p class="text-muted mb-2">
                                        <i class="fas fa-shield-check me-1"></i>
                                        This is an official receipt from ConnectPay Platform
                                    </p>
                                    <small class="text-muted">
                                        For support inquiries, please contact us at support@connectpay.ss
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Receipt Actions -->
                    <div class="col-lg-4">
                        <div class="card no-print">
                            <div class="card-header border-bottom bg-light">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-cog me-2"></i>
                                    Receipt Actions
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="d-grid gap-2">
                                    <button onclick="window.print()" class="btn btn-primary">
                                        <i class="fas fa-print me-2"></i>
                                        Print Receipt
                                    </button>
                                    
                                    <a href="download-invoice.php?transaction=<?php echo $selectedTransaction['payment_id']; ?>" 
                                       class="btn btn-outline-secondary">
                                        <i class="fas fa-file-pdf me-2"></i>
                                        Download PDF
                                    </a>
                                    
                                    <button onclick="emailReceipt(<?php echo $selectedTransaction['payment_id']; ?>)" class="btn btn-outline-info">
                                        <i class="fas fa-envelope me-2"></i>
                                        Email Receipt
                                    </button>
                                    
                                    <a href="transaction-receipts.php" class="btn btn-outline-secondary">
                                        <i class="fas fa-arrow-left me-2"></i>
                                        Back to List
                                    </a>
                                </div>
                            </div>
                        </div>
                        
                        <!-- QR Code -->
                        <div class="card no-print mt-4">
                            <div class="card-header border-bottom bg-light">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-qrcode me-2"></i>
                                    Verification
                                </h5>
                            </div>
                            <div class="card-body text-center">
                                <img src="<?php echo generateQRCode($selectedTransaction['transaction_id']); ?>" 
                                     alt="Transaction QR Code" 
                                     class="qr-code mb-3">
                                <p class="text-muted small mb-0">
                                    Scan to verify transaction authenticity
                                </p>
                            </div>
                        </div>
                        
                        <!-- Related Actions -->
                        <div class="card no-print mt-4">
                            <div class="card-header border-bottom bg-light">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-link me-2"></i>
                                    Related Actions
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="d-grid gap-2">
                                    <a href="my-licenses.php" class="btn btn-outline-primary btn-sm">
                                        <i class="fas fa-key me-2"></i>
                                        View License Details
                                    </a>
                                    
                                    <?php if ($selectedTransaction['license_id']): ?>
                                    <a href="download-plugins.php?license=<?php echo $selectedTransaction['license_id']; ?>" 
                                       class="btn btn-outline-success btn-sm">
                                        <i class="fas fa-download me-2"></i>
                                        Download Plugin
                                    </a>
                                    
                                    <a href="customization-settings.php?license=<?php echo $selectedTransaction['license_id']; ?>" 
                                       class="btn btn-outline-info btn-sm">
                                        <i class="fas fa-palette me-2"></i>
                                        Customize Plugin
                                    </a>
                                    <?php endif; ?>
                                    
                                    <?php if ($selectedTransaction['status'] === 'failed'): ?>
                                    <a href="retry-payment.php?transaction=<?php echo $selectedTransaction['payment_id']; ?>" 
                                       class="btn btn-outline-warning btn-sm">
                                        <i class="fas fa-refresh me-2"></i>
                                        Retry Payment
                                    </a>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <?php endif; ?>
                </div>
                
            </div>
        </div>
    </div>
</div>

<?php 
if (file_exists('partials/footer.php')) {
    try {
        include_once 'partials/footer.php';
    } catch (Exception $e) {
        echo '<footer class="bg-light text-center py-3 mt-5"><p>&copy; 2024 ConnectPay Platform</p></footer>';
    }
}
?>

<?php 
if (file_exists('partials/footer-scripts.php')) {
    try {
        include_once 'partials/footer-scripts.php';
    } catch (Exception $e) {
        echo '<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>' . "\n";
    }
}
?>

<script>
function selectTransaction(transactionId) {
    window.location.href = `transaction-receipts.php?id=${transactionId}`;
}

function emailReceipt(transactionId) {
    const btn = event.target;
    const originalText = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Sending...';
    btn.disabled = true;
    
    // Simulate API call (replace with actual implementation)
    fetch('api/email-receipt.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            transaction_id: transactionId
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            btn.innerHTML = '<i class="fas fa-check me-2"></i>Sent!';
            btn.className = 'btn btn-success';
        } else {
            btn.innerHTML = '<i class="fas fa-exclamation me-2"></i>Failed';
            btn.className = 'btn btn-danger';
        }
        
        setTimeout(() => {
            btn.innerHTML = originalText;
            btn.className = 'btn btn-outline-info';
            btn.disabled = false;
        }, 3000);
    })
    .catch(error => {
        btn.innerHTML = '<i class="fas fa-exclamation me-2"></i>Error';
        btn.className = 'btn btn-danger';
        
        setTimeout(() => {
            btn.innerHTML = originalText;
            btn.className = 'btn btn-outline-info';
            btn.disabled = false;
        }, 3000);
    });
}

function copyToClipboard(element) {
    const text = element.textContent.trim();
    navigator.clipboard.writeText(text).then(() => {
        const original = element.textContent;
        element.textContent = 'Copied!';
        element.style.color = '#16a34a';
        
        setTimeout(() => {
            element.textContent = original;
            element.style.color = '';
        }, 2000);
    }).catch(err => {
        console.error('Failed to copy text: ', err);
    });
}

// Copy transaction ID to clipboard on click
document.addEventListener('DOMContentLoaded', function() {
    const transactionCodes = document.querySelectorAll('code');
    transactionCodes.forEach(code => {
        if (!code.onclick) {
            code.style.cursor = 'pointer';
            code.title = 'Click to copy';
            
            code.addEventListener('click', function() {
                copyToClipboard(this);
            });
        }
    });
});
</script>

</body>
</html>