<?php
require_once __DIR__ . '/helpers.php';
requireLogin();
?>
<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>পেমেন্ট - Steadfast</title>
    <link rel="stylesheet" href="style.css">
</head>
<body class="standalone-page">
<div class="container">
    <div class="nav-wrap">
    <nav id="main-nav">
        <a href="index.php">হোম</a>
        <a href="order.php">অর্ডার</a>
        <a href="status.php">স্ট্যাটাস</a>
        <a href="balance.php">ব্যালেন্স</a>
        <a href="payments.php" class="active">পেমেন্ট</a>
        <a href="returns.php">রিটার্ন</a>
        <a href="return_create.php">রিটার্ন রিকোয়েস্ট</a>
        <a href="police.php">পুলিশ স্টেশন</a>
        <a href="settings.php">সেটিংস</a>
        <span class="nav-user"><?php echo htmlspecialchars($_SESSION['user_email']); ?></span>
        <a href="auth.php?action=logout" class="nav-logout">লগআউট</a>
        <button type="button" class="nav-toggle" id="nav-toggle" aria-label="মেনু">☰</button>
    </nav>
    </div>
    <script>(function(){ var t=document.getElementById('nav-toggle'); var n=document.getElementById('main-nav'); if(t&&n) t.addEventListener('click',function(){ n.classList.toggle('open'); }); })();</script>
    <h1>পেমেন্ট তালিকা</h1>
    <div id="payments-msg" class="msg" style="display:none;"></div>
    <button type="button" id="btn-payments">পেমেন্ট লোড করুন</button>
    <div id="payments-loading" class="loading-wrap" style="display:none;"><div class="loading-spinner"></div><p>লোড হচ্ছে...</p></div>
    <div id="payments-result"></div>
</div>
<script>
document.getElementById('btn-payments').addEventListener('click', loadPayments);
function loadPayments() {
    var msg = document.getElementById('payments-msg');
    var loading = document.getElementById('payments-loading');
    var resultDiv = document.getElementById('payments-result');
    msg.style.display = 'none';
    resultDiv.innerHTML = '';
    loading.style.display = 'block';
    fetch('api.php?action=payments').then(function(r) { return r.json(); }).then(function(data) {
        loading.style.display = 'none';
        if (data.message) {
            msg.style.display = 'block';
            msg.className = 'msg error';
            msg.textContent = data.message;
            return;
        }
        var arr = Array.isArray(data) ? data : (data.data || []);
        if (arr.length > 0) {
            var table = '<table class="data-table"><thead><tr><th>#</th><th>আইডি</th><th>তারিখ</th><th>পরিমাণ</th></tr></thead><tbody>';
            arr.slice(0, 50).forEach(function(row, i) {
                table += '<tr><td>' + (i+1) + '</td><td>' + (row.id || row.payment_id || '-') + '</td><td>' + (row.date || row.created_at || '-') + '</td><td>' + (row.amount || row.total || '-') + '</td></tr>';
            });
            table += '</tbody></table>';
            if (arr.length > 50) table += '<p>' + arr.length + 'টি রেকর্ডের মধ্যে ৫০টি দেখানো হয়েছে।</p>';
            resultDiv.innerHTML = table + '<p class="toggle-raw" id="pay-raw-toggle">Raw JSON দেখুন</p><pre id="pay-raw" class="pre-wrap" style="display:none;"></pre>';
            document.getElementById('pay-raw').textContent = JSON.stringify(data, null, 2);
            document.getElementById('pay-raw-toggle').onclick = function() {
                var pre = document.getElementById('pay-raw');
                pre.style.display = pre.style.display === 'none' ? 'block' : 'none';
                this.textContent = pre.style.display === 'none' ? 'Raw JSON দেখুন' : 'Raw JSON লুকান';
            };
        } else {
            resultDiv.innerHTML = '<p class="msg info">কোন পেমেন্ট নেই বা ডাটা অন্যভাবে আসছে।</p><pre class="pre-wrap">' + JSON.stringify(data, null, 2) + '</pre>';
        }
    }).catch(function() {
        loading.style.display = 'none';
        msg.style.display = 'block';
        msg.className = 'msg error';
        msg.textContent = 'নেটওয়ার্ক ত্রুটি। আবার চেষ্টা করুন।';
    });
}
</script>
</body>
</html>
