<?php
/** @var float $walletBalance */
/** @var float $totalRecharged */
/** @var float $totalSpent */
/** @var array $recentTxns */
/** @var string $csrfToken */
$bp = defined('BASE_PATH') ? BASE_PATH : '/gmind';
?>
<style>
.wallet-hero {
    background: linear-gradient(135deg, #0d3b3b, #16a085);
    color: #fff;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}
.wallet-hero h2 { margin: 0; font-size: 1.1rem; opacity: 0.9; }
.wallet-hero .balance { font-size: 3rem; font-weight: 700; margin: 5px 0; }
.stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-left: 4px solid #16a085;
}
.stat-card .val { font-size: 1.8rem; font-weight: 700; }
.stat-card .lbl { font-size: 0.8rem; color: #666; text-transform: uppercase; }
.txn-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.txn-table th { background: #f8f9fa; padding: 10px; text-align: left; border-bottom: 2px solid #dee2e6; }
.txn-table td { padding: 10px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.badge-credit { background: #d4edda; color: #155724; padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
.badge-debit { background: #f8d7da; color: #721c24; padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
.badge-offline { background: #fff3cd; color: #856404; padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
</style>

<div class="container-fluid py-4">
    
    <!-- Hero Section -->
    <div class="wallet-hero">
        <div>
            <h2><i class="fas fa-wallet"></i> Wallet Balance</h2>
            <div class="balance">₹<?= number_format($walletBalance, 2) ?></div>
            <div style="font-size:0.84rem;opacity:0.8;">
                Recharged: ₹<?= number_format($totalRecharged, 2) ?> · 
                Spent: ₹<?= number_format($totalSpent, 2) ?>
            </div>
        </div>
        <div>
            <a href="<?= $bp ?>/branch/wallet/history" class="btn btn-light btn-lg">
                <i class="fas fa-history"></i> View Full History
            </a>
        </div>
    </div>

    <!-- Recent Transactions -->
    <div class="card" style="border:none;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.06);">
        <div class="card-header" style="background:#fff;border-bottom:2px solid #f0f0f0;padding:15px 20px;">
            <h5 style="margin:0;color:#0d3b3b;font-weight:600;"><i class="fas fa-receipt"></i> Recent Activity</h5>
        </div>
        <div class="card-body p-0">
            <?php if (empty($recentTxns)): ?>
                <div style="text-align:center;padding:40px;color:#999;">
                    <i class="fas fa-inbox fa-3x mb-3"></i>
                    <p>No transactions yet</p>
                </div>
            <?php else: ?>
                <div style="overflow-x:auto;">
                    <table class="txn-table">
                        <thead>
                            <tr>
                                <th>Date & Time</th>
                                <th>Type</th>
                                <th>Mode</th>
                                <th>Amount</th>
                                <th>Description / Reference</th>
                                <th>Txn ID</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($recentTxns as $t): 
                                $isCredit = ($t['type'] ?? '') === 'credit';
                                $desc = $t['description'] ?? '';
                                if (!empty($t['certificate_no'])) {
                                    $desc .= " (<strong>" . htmlspecialchars($t['certificate_no']) . "</strong>)";
                                    if(!empty($t['student_name'])) $desc .= " - " . htmlspecialchars($t['student_name']);
                                }
                                // Determine mode badge
                                $modeBadge = '';
                                if (strpos($t['description'] ?? '', 'offline') !== false || strpos($t['description'] ?? '', 'Offline') !== false) {
                                    $modeBadge = '<span class="badge-offline">Offline</span>';
                                } elseif ($isCredit) {
                                    $modeBadge = '<span class="badge-credit">Recharge</span>';
                                } else {
                                    $modeBadge = '<span class="badge-debit">Wallet</span>';
                                }
                            ?>
                            <tr>
                                <td style="font-size:0.78rem;">
                                    <?= !empty($t['created_at']) ? date('d M Y, g:i A', strtotime($t['created_at'])) : '—' ?>
                                </td>
                                <td>
                                    <?php if ($isCredit): ?>
                                        <span class="badge-credit"><i class="fas fa-arrow-down"></i> Credit</span>
                                    <?php else: ?>
                                        <span class="badge-debit"><i class="fas fa-arrow-up"></i> Debit</span>
                                    <?php endif; ?>
                                </td>
                                <td><?= $modeBadge ?></td>
                                <td style="font-weight:700;color:<?= $isCredit ? '#16a085' : '#e84118' ?>;">
                                    <?= $isCredit ? '+' : '-' ?>₹<?= number_format((float)$t['amount'], 2) ?>
                                </td>
                                <td style="font-size:0.82rem;"><?= $desc ?></td>
                                <td style="font-size:0.72rem;font-family:monospace;"><?= htmlspecialchars($t['txn_id'] ?? '—') ?></td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            <?php endif; ?>
        </div>
    </div>
</div>
