<?php $title = 'My Contributions'; ?>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-white font-weight-bold"><i class="fas fa-hand-holding-usd mr-2"></i>My Contributions</h1>
    <a href="<?= $baseUrl ?>/receipts" class="glass-btn"><i class="fas fa-receipt mr-1"></i>My Receipts</a>
</div>

<?php if (($summary->total_balance ?? 0) > 0): ?>
<div class="reminder-banner" style="background: rgba(231,74,59,0.15); border: 1px solid rgba(231,74,59,0.3);">
    <i class="fas fa-exclamation-triangle" style="color: #e74a3b;"></i>
    <div class="flex-grow-1">
        <strong>You have an outstanding balance of GHS <?= number_format($summary->total_balance, 2) ?>.</strong>
        Please complete your payment to avoid any disruption in your membership status.
    </div>
    <a href="<?= $baseUrl ?>/payment/make" class="glass-btn glass-btn-primary btn-sm"><i class="fas fa-credit-card mr-1"></i>Pay Now</a>
</div>
<?php endif; ?>

<div class="row mb-4">
    <div class="col-md-3 mb-3">
        <div class="glass-card text-center">
            <div style="font-size: 2rem; color: #1cc88a; font-weight: 700;">GHS <?= number_format($summary->total_paid, 2) ?></div>
            <div style="color: rgba(255,255,255,0.5); font-size: 0.85rem;">Total Paid</div>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="glass-card text-center">
            <div style="font-size: 2rem; color: #f6c23e; font-weight: 700;">GHS <?= number_format($summary->total_pending, 2) ?></div>
            <div style="color: rgba(255,255,255,0.5); font-size: 0.85rem;">Pending</div>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="glass-card text-center">
            <div style="font-size: 2rem; color: #e74a3b; font-weight: 700;">GHS <?= number_format($summary->total_balance ?? 0, 2) ?></div>
            <div style="color: rgba(255,255,255,0.5); font-size: 0.85rem;">Outstanding Balance</div>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="glass-card text-center">
            <div style="font-size: 2rem; color: #4e73df; font-weight: 700;"><?= $summary->total_contributions ?></div>
            <div style="color: rgba(255,255,255,0.5); font-size: 0.85rem;">Total Payments</div>
        </div>
    </div>
</div>

<?php if (!empty($obligations)): ?>
<div class="glass-card mb-4">
    <h5 class="font-weight-bold mb-3"><i class="fas fa-tasks mr-2"></i>My Obligations</h5>
    <div class="glass-table">
        <table class="table">
            <thead><tr><th>Month</th><th>Type</th><th>Expected</th><th>Paid</th><th>Progress</th><th>Balance</th><th>Status</th></tr></thead>
            <tbody>
                <?php foreach ($obligations as $o): ?>
                <tr>
                    <td><?= date('M Y', strtotime($o->paid_month . '-01')) ?></td>
                    <td><?= htmlspecialchars($o->contribution_type_name) ?></td>
                    <td>GHS <?= number_format($o->total_amount, 2) ?></td>
                    <td>GHS <?= number_format($o->total_paid, 2) ?></td>
                    <td style="min-width: 150px;">
                        <div class="progress" style="height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px;">
                            <div class="progress-bar" style="width: <?= $o->progress_pct ?>%; background: <?= $o->is_fully_paid ? '#1cc88a' : ($o->is_partial ? '#f6c23e' : '#4e73df') ?>; border-radius: 4px;"></div>
                        </div>
                        <small style="color: rgba(255,255,255,0.5);"><?= $o->progress_pct ?>%</small>
                    </td>
                    <td><strong style="color: <?= $o->balance > 0 ? '#e74a3b' : '#1cc88a' ?>;">GHS <?= number_format($o->balance, 2) ?></strong></td>
                    <td>
                        <?php if ($o->is_fully_paid): ?>
                        <span class="glass-badge" style="background: rgba(28,200,138,0.2); color: #1cc88a;"><i class="fas fa-check-circle mr-1"></i>Paid</span>
                        <?php elseif ($o->is_partial): ?>
                        <span class="glass-badge" style="background: rgba(246,194,62,0.2); color: #f6c23e;"><i class="fas fa-hourglass-half mr-1"></i>Partial (<?= $o->payment_count ?> payments)</span>
                        <?php else: ?>
                        <span class="glass-badge" style="background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5);">Pending</span>
                        <?php endif; ?>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>
<?php endif; ?>

<div class="row">
    <div class="col-lg-8">
        <div class="glass-card">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="font-weight-bold mb-0"><i class="fas fa-list mr-2"></i>Payment History</h5>
                <form method="GET" class="form-inline">
                    <input type="month" name="from" class="form-control glass-input" style="width: 160px;" value="<?= htmlspecialchars($from) ?>">
                    <span style="color: rgba(255,255,255,0.4); margin: 0 8px;">to</span>
                    <input type="month" name="to" class="form-control glass-input" style="width: 160px;" value="<?= htmlspecialchars($to) ?>">
                    <select name="status" class="form-control glass-input ml-2" style="width: 120px;">
                        <option value="">All</option>
                        <option value="completed" <?= $status === 'completed' ? 'selected' : '' ?>>Completed</option>
                        <option value="partial" <?= $status === 'partial' ? 'selected' : '' ?>>Partial</option>
                        <option value="pending" <?= $status === 'pending' ? 'selected' : '' ?>>Pending</option>
                    </select>
                    <button type="submit" class="glass-btn btn-sm ml-2"><i class="fas fa-filter mr-1"></i>Filter</button>
                </form>
            </div>
            <div class="glass-table">
                <table class="table">
                    <thead><tr><th>Date</th><th>Type</th><th>Amount</th><th>Method</th><th>Month</th><th>Status</th><th>Receipt</th></tr></thead>
                    <tbody>
                        <?php if (!empty($contributions)): ?>
                            <?php foreach ($contributions as $c): ?>
                            <tr>
                                <td><?= date('M d, Y', strtotime($c->payment_date)) ?></td>
                                <td><?= htmlspecialchars($c->contribution_type_name ?? 'N/A') ?></td>
                                <td><strong>GHS <?= number_format($c->amount, 2) ?></strong></td>
                                <td><?= htmlspecialchars(ucwords(str_replace('_', ' ', $c->payment_method ?? '-'))) ?></td>
                                <td><?= htmlspecialchars($c->paid_month ?? '-') ?></td>
                                <td>
                                    <?php if ($c->status === 'completed'): ?>
                                    <span class="glass-badge" style="background: rgba(28,200,138,0.2); color: #1cc88a;">Completed</span>
                                    <?php elseif ($c->status === 'partial'): ?>
                                    <span class="glass-badge" style="background: rgba(246,194,62,0.2); color: #f6c23e;">Partial</span>
                                    <?php else: ?>
                                    <span class="glass-badge" style="background: rgba(246,194,62,0.2); color: #f6c23e;">Pending</span>
                                    <?php endif; ?>
                                </td>
                                <td><?php if (!empty($c->receipt_id)): ?><a href="<?= $baseUrl ?>/contributions/receipt/<?= $c->receipt_id ?>/download" class="glass-btn btn-sm" target="_blank" title="Download Receipt"><i class="fas fa-receipt"></i></a><?php else: ?><span style="color: rgba(255,255,255,0.3);">-</span><?php endif; ?></td>
                            </tr>
                            <?php endforeach; ?>
                        <?php else: ?>
                            <tr><td colspan="7" class="text-center" style="color: rgba(255,255,255,0.5);">No contributions found for this period</td></tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="glass-card">
            <h5 class="font-weight-bold mb-3"><i class="fas fa-clock mr-2"></i>Payment Timeline</h5>
            <?php if (!empty($timeline)): ?>
                <div style="position: relative; padding-left: 30px;">
                    <div style="position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, #4e73df, #1cc88a);"></div>
                    <?php foreach ($timeline as $tl): ?>
                    <div style="position: relative; margin-bottom: 20px;">
                        <div style="position: absolute; left: -24px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: <?= $tl->total > 0 ? '#1cc88a' : '#f6c23e' ?>; border: 2px solid rgba(255,255,255,0.2);"></div>
                        <div>
                            <strong style="color: #fff;"><?= date('F Y', strtotime($tl->month . '-01')) ?></strong>
                            <div style="display: flex; justify-content: space-between; color: rgba(255,255,255,0.6); font-size: 0.85rem;">
                                <span><?= $tl->count ?> payment(s)</span>
                                <span style="color: #1cc88a; font-weight: 600;">GHS <?= number_format($tl->total, 2) ?></span>
                            </div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            <?php else: ?>
                <p style="color: rgba(255,255,255,0.4); text-align: center;">No payment history yet</p>
            <?php endif; ?>
        </div>
    </div>
</div>
