<?php $title = 'Make Payment - Ghana Anaesthesiologists Society'; ?>
<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-credit-card mr-2"></i>Make Payment</h1>
    <a href="<?= $baseUrl ?>/contributions/member" class="glass-btn"><i class="fas fa-history mr-1"></i>Payment History</a>
</div>

<div class="row">
    <div class="col-lg-8">
        <div class="glass-card">
            <h5 class="font-weight-bold mb-3"><i class="fas fa-list mr-2"></i>Outstanding Obligations</h5>
            <?php if (!empty($obligations)): ?>
            <div class="glass-table">
                <table class="table" style="color: rgba(255,255,255,0.95);">
                    <thead>
                        <tr>
                            <th style="color: #fff; border-color: rgba(255,255,255,0.12);">Type</th>
                            <th style="color: #fff; border-color: rgba(255,255,255,0.12);">Month</th>
                            <th style="color: #fff; border-color: rgba(255,255,255,0.12);">Expected</th>
                            <th style="color: #fff; border-color: rgba(255,255,255,0.12);">Paid</th>
                            <th style="color: #fff; border-color: rgba(255,255,255,0.12);">Balance</th>
                            <th style="color: #fff; border-color: rgba(255,255,255,0.12);">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($obligations as $o): ?>
                        <tr>
                            <td style="color: rgba(255,255,255,0.9);"><?= htmlspecialchars($o->contribution_type_name) ?></td>
                            <td style="color: rgba(255,255,255,0.9);"><?= date('M Y', strtotime($o->paid_month . '-01')) ?></td>
                            <td style="color: rgba(255,255,255,0.9);">GHS <?= number_format($o->total_amount, 2) ?></td>
                            <td style="color: rgba(255,255,255,0.9);">GHS <?= number_format($o->total_paid, 2) ?></td>
                            <td><strong style="color: #ffd166; font-weight: 700;">GHS <?= number_format($o->balance, 2) ?></strong></td>
                            <td><span class="glass-badge" style="background: rgba(255,255,255,0.12); color: #ffffff; border: 1px solid rgba(255,255,255,0.18);"><?= $o->payment_count ?> payment(s)</span></td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                    <tfoot>
                        <tr style="font-weight: bold;">
                            <td colspan="4" class="text-right" style="color: rgba(255,255,255,0.9);">Total Outstanding:</td>
                            <td style="color: #ffd166; font-size: 1.1rem;">GHS <?= number_format($totalArrears, 2) ?></td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <?php else: ?>
            <div class="empty-state">
                <i class="fas fa-check-circle" style="color: #1cc88a;"></i>
                <p>You have no outstanding obligations. All contributions are up to date!</p>
            </div>
            <?php endif; ?>

            <?php if (!empty($gateways)): ?>
            <hr style="border-color: rgba(255,255,255,0.1);">
            <h5 class="font-weight-bold mb-3"><i class="fas fa-credit-card mr-2"></i>Make a Payment</h5>
            <form method="POST" action="<?= $baseUrl ?>/payment/init" id="paymentForm">
                <div class="row">
                    <div class="col-md-6 form-group">
                        <label style="color: rgba(255,255,255,0.7);">Contribution Type</label>
                        <select name="contribution_type_id" class="form-control glass-input" required>
                            <option value="">Select type</option>
                            <?php foreach ($types as $t): ?>
                            <option value="<?= $t->id ?>" data-amount="<?= $t->amount ?>"><?= htmlspecialchars($t->name) ?> (GHS <?= number_format($t->amount, 2) ?>)</option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="col-md-6 form-group">
                        <label style="color: rgba(255,255,255,0.7);">Payment Month</label>
                        <input type="month" name="paid_month" class="form-control glass-input" value="<?= date('Y-m') ?>">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 form-group">
                        <label style="color: rgba(255,255,255,0.7);">Amount (GHS)</label>
                        <input type="number" step="0.01" name="amount" id="payAmount" class="form-control glass-input" placeholder="0.00" required min="1">
                    </div>
                    <div class="col-md-6 form-group">
                        <label style="color: rgba(255,255,255,0.7);">Payment Gateway</label>
                        <div class="d-flex gap-2" style="gap: 8px;">
                            <?php foreach ($gateways as $gw): ?>
                            <label class="gateway-option glass-btn" style="cursor: pointer; flex: 1; text-align: center; <?= $gw === 'paystack' ? 'border-color: #0ba37f;' : 'border-color: #6b21a8;' ?>">
                                <input type="radio" name="gateway" value="<?= $gw ?>" class="gateway-radio" required>
                                <div>
                                    <?php if ($gw === 'paystack'): ?>
                                    <i class="fab fa-cc-stripe" style="font-size: 1.5rem; color: #0ba37f;"></i>
                                    <?php else: ?>
                                    <i class="fas fa-mobile-alt" style="font-size: 1.5rem; color: #6b21a8;"></i>
                                    <?php endif; ?>
                                    <div style="font-size: 0.85rem;"><?= ucfirst($gw) ?></div>
                                </div>
                            </label>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label style="color: rgba(255,255,255,0.7);">Description (optional)</label>
                    <input type="text" name="description" class="form-control glass-input" value="Membership Contribution">
                </div>
                <div class="text-right">
                    <button type="submit" class="glass-btn glass-btn-primary btn-lg" id="payBtn"><i class="fas fa-lock mr-1"></i>Proceed to Payment</button>
                </div>
            </form>
            <?php else: ?>
            <div class="empty-state mt-3">
                <i class="fas fa-credit-card"></i>
                <p>Online payment is not currently enabled. Please contact the secretariat for payment options.</p>
            </div>
            <?php endif; ?>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="glass-card mb-4">
            <h5 class="font-weight-bold mb-3"><i class="fas fa-chart-pie mr-2"></i>Payment Summary</h5>
            <div style="padding: 12px; background: rgba(28,200,138,0.1); border-radius: 8px; margin-bottom: 10px;">
                <div style="color: rgba(255,255,255,0.6); font-size: 0.85rem;">Total Paid</div>
                <div style="font-size: 1.5rem; font-weight: 700; color: #1cc88a;">GHS <?= number_format($summary->total_paid, 2) ?></div>
            </div>
            <div style="padding: 12px; background: rgba(231,74,59,0.1); border-radius: 8px; margin-bottom: 10px;">
                <div style="color: rgba(255,255,255,0.6); font-size: 0.85rem;">Outstanding</div>
                <div style="font-size: 1.5rem; font-weight: 700; color: #e74a3b;">GHS <?= number_format($totalArrears, 2) ?></div>
            </div>
            <div style="padding: 12px; background: rgba(78,115,223,0.1); border-radius: 8px;">
                <div style="color: rgba(255,255,255,0.6); font-size: 0.85rem;">Total Payments Made</div>
                <div style="font-size: 1.5rem; font-weight: 700; color: #4e73df;"><?= $summary->total_contributions ?></div>
            </div>
        </div>
    </div>
</div>

<script>
document.querySelectorAll('select[name="contribution_type_id"]').forEach(function(el) {
    el.addEventListener('change', function() {
        var opt = this.options[this.selectedIndex];
        var amountInput = document.getElementById('payAmount');
        if (opt && opt.dataset.amount && !amountInput.value) {
            amountInput.value = opt.dataset.amount;
        }
    });
});
</script>
