<?php
$page_title = 'Finance';
require_once __DIR__ . '/header.php';
?>
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;">
    <div>
        <h2 style="font-family:'Outfit',sans-serif; font-size:1.8rem; color:#0f172a; margin:0;"><i class="fas fa-wallet" style="color:#10b981; margin-right:10px;"></i>Finance</h2>
        <p style="color:#64748b; font-size:0.95rem; margin-top:5px;">EMI, BNPL, wallet cashback, reward redemption, invoice reconciliation.</p>
    </div>
</div>
<div class="grid-4" style="margin-bottom:24px;">
    <div class="card" style="margin-bottom:0; border-top:4px solid #10b981;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">WALLET</div>
        <div style="font-size:1.4rem; font-weight:700; color:#10b981;">₹12,400</div>
        <div style="color:#10b981; font-size:0.8rem; margin-top:5px;"><i class="fas fa-wallet"></i> Cashback Balance</div>
    </div>
    <div class="card" style="margin-bottom:0; border-top:4px solid #f59e0b;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">REWARDS</div>
        <div style="font-size:1.4rem; font-weight:700; color:#f59e0b;">4,800</div>
        <div style="color:#f59e0b; font-size:0.8rem; margin-top:5px;"><i class="fas fa-coins"></i> Points = ₹4,800</div>
    </div>
    <div class="card" style="margin-bottom:0; border-top:4px solid #3b82f6;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">ACTIVE EMI</div>
        <div style="font-size:1.4rem; font-weight:700; color:#0f172a;">₹32,725</div>
        <div style="color:#3b82f6; font-size:0.8rem; margin-top:5px;"><i class="fas fa-credit-card"></i> 4 of 6 paid</div>
    </div>
    <div class="card" style="margin-bottom:0; border-top:4px solid #8b5cf6;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">BNPL LIMIT</div>
        <div style="font-size:1.4rem; font-weight:700; color:#8b5cf6;">₹50,000</div>
        <div style="color:#8b5cf6; font-size:0.8rem; margin-top:5px;"><i class="fas fa-clock"></i> Buy Now Pay Later</div>
    </div>
</div>
<div class="grid-2">
    <div class="card">
        <h3 style="margin:0 0 15px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-file-invoice-dollar" style="color:#3b82f6; margin-right:8px;"></i>Invoice Reconciliation</h3>
        <?php
        $invoices = [
            ['INV-2024-0421', '₹25,300', 'Apr 20', 'Paid', '#10b981'],
            ['INV-2024-0398', '₹42,800', 'Apr 8', 'Paid', '#10b981'],
            ['INV-2024-0365', '₹12,400', 'Mar 22', 'Paid', '#10b981'],
            ['INV-2024-0340', '₹18,600', 'Mar 10', 'EMI Active', '#f59e0b'],
        ];
        foreach ($invoices as $inv): ?>
        <div style="display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #f1f5f9;">
            <div>
                <div style="font-weight:600; font-size:0.85rem; font-family:monospace;"><?= $inv[0] ?></div>
                <div style="font-size:0.75rem; color:#94a3b8;"><?= $inv[2] ?></div>
            </div>
            <div style="text-align:right;">
                <div style="font-weight:bold;"><?= $inv[1] ?></div>
                <span style="background:<?= $inv[4] ?>15; color:<?= $inv[4] ?>; padding:2px 8px; border-radius:4px; font-size:0.7rem; font-weight:bold;"><?= $inv[3] ?></span>
            </div>
        </div>
        <?php endforeach; ?>
        <button style="background:#f8fafc; color:#475569; border:1px solid #e2e8f0; padding:8px 16px; border-radius:6px; font-size:0.85rem; cursor:pointer; width:100%; margin-top:15px;"><i class="fas fa-download"></i> Export Statement (PDF/Excel)</button>
    </div>
    <div style="display:flex; flex-direction:column; gap:24px;">
        <div class="card" style="margin-bottom:0;">
            <h3 style="margin:0 0 15px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-gift" style="color:#f59e0b; margin-right:8px;"></i>Reward Redemption</h3>
            <div style="background:#fffbeb; border:1px solid #fde68a; padding:15px; border-radius:8px; text-align:center; margin-bottom:15px;">
                <div style="font-size:1.8rem; font-weight:bold; color:#b45309;">4,800 pts</div>
                <p style="margin:5px 0 0; font-size:0.8rem; color:#92400e;">₹1 = 1 point · Redeem on next order</p>
            </div>
            <button style="background:#f59e0b; color:#fff; border:none; padding:10px 20px; border-radius:8px; font-size:0.85rem; cursor:pointer; width:100%; font-weight:600;">Redeem Points Now</button>
        </div>
        <div class="card" style="margin-bottom:0; background:linear-gradient(135deg,#10b981,#059669); color:#fff;">
            <h3 style="margin:0 0 8px; font-size:1.1rem;"><i class="fas fa-plus-circle"></i> Top-Up Wallet</h3>
            <p style="margin:0 0 15px; font-size:0.85rem; opacity:0.85;">Add ₹10,000+ and get 3% extra cashback.</p>
            <div style="display:flex; gap:8px;">
                <button style="flex:1; background:rgba(255,255,255,0.2); color:#fff; border:1px solid rgba(255,255,255,0.3); padding:8px; border-radius:6px; cursor:pointer;">₹5,000</button>
                <button style="flex:1; background:#fff; color:#059669; border:none; padding:8px; border-radius:6px; cursor:pointer; font-weight:bold;">₹10,000</button>
                <button style="flex:1; background:rgba(255,255,255,0.2); color:#fff; border:1px solid rgba(255,255,255,0.3); padding:8px; border-radius:6px; cursor:pointer;">₹25,000</button>
            </div>
        </div>
    </div>
</div>
<?php require_once __DIR__ . '/../includes/footer.php'; ?>
