<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ক্যাশ ব্যালেন্স - জুয়েলারি ERP</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        body { background-color: #f4f7f6; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        .card { border-radius: 15px; border: none; transition: transform 0.2s; }
        .card:active { transform: scale(0.98); }
        .balance-amount { font-size: 1.8rem; font-weight: bold; color: #2c3e50; }
        .account-name { color: #7f8c8d; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; }
    </style>
</head>
<body>
    <div class="container py-4">
        <div class="text-center mb-4">
            <span style="font-size: 3rem;">💰</span>
            <h4 class="mt-2 fw-bold text-dark">ক্যাশ ব্যালেন্স (লাইভ)</h4>
        </div>
        
        <div id="cash-list" class="row">
            <!-- Loader -->
            <div class="col-12 text-center py-5">
                <div class="spinner-border text-primary" role="status"></div>
                <p class="mt-2 text-muted">ডাটা লোড হচ্ছে...</p>
            </div>
        </div>
        
        <div class="mt-4 d-grid gap-2">
            <button onclick="loadCash()" class="btn btn-primary btn-lg shadow-sm">🔄 রিফ্রেশ করুন</button>
            <a href="index.php" class="btn btn-light btn-lg border shadow-sm">🏠 হোম পেজে ফিরুন</a>
        </div>
    </div>

    <script>
    function loadCash() {
        const listDiv = document.getElementById('cash-list');
        listDiv.innerHTML = '<div class="col-12 text-center py-5"><div class="spinner-border text-primary"></div></div>';

        // সরাসরি API কল করা হচ্ছে
        fetch('api/get_cash_summary.php')
            .then(res => res.json())
            .then(data => {
                let html = '';
                if (data.error) {
                    html = `<div class="alert alert-danger mx-2">${data.error}</div>`;
                } else if (data.length === 0) {
                    html = '<div class="alert alert-warning mx-2">কোনো ক্যাশ অ্যাকাউন্ট পাওয়া যায়নি।</div>';
                } else {
                    data.forEach(acc => {
                        html += `
                        <div class="col-12 mb-3">
                            <div class="card shadow-sm border-start border-success border-5">
                                <div class="card-body">
                                    <div class="account-name mb-1">${acc.account_name}</div>
                                    <div class="balance-amount">৳ ${new Intl.NumberFormat('en-IN').format(acc.current_balance)}</div>
                                </div>
                            </div>
                        </div>`;
                    });
                }
                listDiv.innerHTML = html;
            })
            .catch(err => {
                listDiv.innerHTML = `<div class="alert alert-danger mx-2">সার্ভার সমস্যা: এপিআই পাওয়া যাচ্ছে না।</div>`;
            });
    }

    // শুরুতে লোড হবে
    loadCash();
    </script>
</body>
</html>
