<?php
/**
 * WALLET SIDEBAR WIDGET
 * Shows wallet info in sidebar navigation
 */

require_once(__DIR__ . '/../classes/Database.php');

if (!isset($_SESSION['user_id'])) {
    return;
}

$userId = $_SESSION['user_id'];
$db = Database::getInstance();

// Get wallet balance
$wallet = $db->fetch('SELECT balance FROM wallets WHERE user_id = ?', [$userId]);
$balance = $wallet ? $wallet['balance'] : 0;

// Get last 5 transactions
$transactions = $db->fetchAll(
    'SELECT * FROM transactions WHERE user_id = ? ORDER BY created_at DESC LIMIT 5',
    [$userId]
);
?>

<style>
    .wallet-widget {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 12px 16px;
        border-radius: 8px;
        margin-bottom: 15px;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .wallet-widget-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .wallet-widget-icon {
        font-size: 24px;
    }

    .wallet-widget-info {
        flex: 1;
    }

    .wallet-widget-label {
        font-size: 11px;
        opacity: 0.9;
        margin-bottom: 2px;
    }

    .wallet-widget-amount {
        font-size: 18px;
        font-weight: 700;
        margin: 0;
    }

    .wallet-warning {
        display: none;
        background: #fef3c7;
        border-left: 4px solid #f59e0b;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 11px;
        color: #b45309;
        margin-bottom: 12px;
    }

    .wallet-warning.show {
        display: block;
    }

    .wallet-txn-container {
        display: none;
        background: white;
        border-radius: 8px;
        margin-top: 12px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .wallet-txn-container.show {
        display: block;
    }

    .wallet-txn-header {
        padding: 12px;
        background: #f8f9fa;
        border-bottom: 1px solid #e0e0e0;
        font-weight: 600;
        font-size: 12px;
        color: #333;
    }

    .wallet-txn-list {
        max-height: 200px;
        overflow-y: auto;
    }

    .wallet-txn-item {
        display: flex;
        align-items: center;
        padding: 10px 12px;
        border-bottom: 1px solid #f0f0f0;
        font-size: 11px;
    }

    .wallet-txn-item:last-child {
        border-bottom: none;
    }

    .wallet-txn-icon {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 8px;
        font-weight: 600;
        color: white;
        font-size: 10px;
        flex-shrink: 0;
    }

    .wallet-txn-icon.credit {
        background: #10b981;
    }

    .wallet-txn-icon.debit {
        background: #ef4444;
    }

    .wallet-txn-details {
        flex: 1;
    }

    .wallet-txn-desc {
        font-weight: 600;
        color: #333;
        margin-bottom: 2px;
    }

    .wallet-txn-time {
        color: #999;
        font-size: 10px;
    }

    .wallet-txn-amount {
        text-align: right;
        font-weight: 700;
        white-space: nowrap;
    }

    .wallet-txn-amount.credit {
        color: #10b981;
    }

    .wallet-txn-amount.debit {
        color: #ef4444;
    }

    .wallet-empty {
        text-align: center;
        padding: 20px 12px;
        color: #999;
        font-size: 11px;
    }
</style>

<!-- Low Balance Warning -->
<div class="wallet-warning <?php echo $balance < 5 ? 'show' : ''; ?>">
    <i class="fas fa-exclamation-triangle"></i> Low balance! Add credits via the Wallet section.
</div>

<!-- Wallet Widget -->
<div class="wallet-widget" onclick="toggleWalletTransactions()">
    <div class="wallet-widget-content">
        <div class="wallet-widget-icon">💳</div>
        <div class="wallet-widget-info">
            <div class="wallet-widget-label">My Wallet</div>
            <p class="wallet-widget-amount">₹<?php echo number_format($balance, 2); ?></p>
        </div>
        <div style="font-size: 18px;">
            <i class="fas fa-chevron-down" id="wallet-toggle-icon"></i>
        </div>
    </div>
</div>

<!-- Transactions Container -->
<div class="wallet-txn-container" id="wallet-txn-container">
    <div class="wallet-txn-header">
        <i class="fas fa-receipt"></i> Recent Transactions
    </div>
    <div class="wallet-txn-list">
        <?php if (count($transactions) > 0): ?>
            <?php foreach ($transactions as $txn): ?>
            <div class="wallet-txn-item">
                <div class="wallet-txn-icon <?php echo $txn['type']; ?>">
                    <?php echo $txn['type'] === 'credit' ? '+' : '−'; ?>
                </div>
                <div class="wallet-txn-details">
                    <div class="wallet-txn-desc"><?php echo htmlspecialchars(substr($txn['description'], 0, 20)); ?></div>
                    <div class="wallet-txn-time"><?php echo date('d M, H:i', strtotime($txn['created_at'])); ?></div>
                </div>
                <div class="wallet-txn-amount <?php echo $txn['type']; ?>">
                    <?php echo $txn['type'] === 'credit' ? '+' : '−'; ?>₹<?php echo number_format($txn['amount'], 1); ?>
                </div>
            </div>
            <?php endforeach; ?>
        <?php else: ?>
        <div class="wallet-empty">
            <i class="fas fa-inbox" style="font-size: 20px; display: block; margin-bottom: 8px; opacity: 0.5;"></i>
            No transactions
        </div>
        <?php endif; ?>
    </div>
</div>

<script>
    function toggleWalletTransactions() {
        const container = document.getElementById('wallet-txn-container');
        const icon = document.getElementById('wallet-toggle-icon');
        
        if (container.classList.contains('show')) {
            container.classList.remove('show');
            icon.style.transform = 'rotate(0deg)';
        } else {
            container.classList.add('show');
            icon.style.transform = 'rotate(180deg)';
        }
    }
</script>


