<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>تسجيل دفعة — <?= e($member['full_name_ar']) ?><?php $__template->endSection(); ?>
<?php $__template->section('content'); ?>

<!-- Member Info Banner -->
<div class="card" style="margin-bottom:20px;padding:20px;display:flex;justify-content:space-between;align-items:center;">
    <div>
        <strong style="font-size:18px;"><?= e($member['full_name_ar']) ?></strong>
        <div style="font-size:13px;color:#6B7280;margin-top:5px;">
            📋 استمارة: <?= e($member['form_number'] ?? '—') ?>
            <?php if ($member['membership_number']): ?>
                &nbsp;|&nbsp; 🪪 عضوية: <?= e($member['membership_number']) ?>
            <?php endif; ?>
            &nbsp;|&nbsp; الحالة: <strong style="color:<?= match($member['status']) { 'active' => '#059669', 'accepted' => '#059669', default => '#D97706' } ?>;"><?= e($member['status']) ?></strong>
        </div>
    </div>
    <a href="/members/<?= (int) $member['id'] ?>" class="btn btn-outline">← العودة للعضو</a>
</div>

<!-- Financial Summary -->
<div style="display:grid;grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));gap:15px;margin-bottom:20px;">
    <div class="card" style="padding:15px;text-align:center;border-right:4px solid #0D7377;">
        <div style="font-size:20px;font-weight:700;color:#0D7377;"><?= money($summary['membership_value'] ?? '0') ?></div>
        <div style="font-size:11px;color:#6B7280;">قيمة العضوية</div>
    </div>
    <div class="card" style="padding:15px;text-align:center;border-right:4px solid #059669;">
        <div style="font-size:20px;font-weight:700;color:#059669;"><?= money($summary['total_paid'] ?? '0') ?></div>
        <div style="font-size:11px;color:#6B7280;">إجمالي المدفوع</div>
    </div>
    <div class="card" style="padding:15px;text-align:center;border-right:4px solid #DC2626;">
        <div style="font-size:20px;font-weight:700;color:#DC2626;"><?= money($summary['total_outstanding'] ?? '0') ?></div>
        <div style="font-size:11px;color:#6B7280;">إجمالي المتبقي</div>
    </div>
    <div class="card" style="padding:15px;text-align:center;border-right:4px solid <?= $summary['form_fee_paid'] ? '#059669' : '#DC2626' ?>;">
        <div style="font-size:20px;font-weight:700;color:<?= $summary['form_fee_paid'] ? '#059669' : '#DC2626' ?>;">
            <?= $summary['form_fee_paid'] ? '✅' : '❌' ?>
        </div>
        <div style="font-size:11px;color:#6B7280;">رسوم الاستمارة</div>
    </div>
</div>

<!-- Payment Options -->
<div class="card" style="margin-bottom:20px;">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;">
        <h3 style="margin:0;color:#0D7377;">💰 اختر نوع الدفعة</h3>
    </div>
    <div style="padding:20px;">
        <?php foreach ($paymentOptions as $i => $opt): ?>
        <div style="border:2px solid #E5E7EB;border-radius:10px;padding:20px;margin-bottom:15px;<?= $opt['required'] ?? false ? 'border-color:#DC2626;background:#FEF2F2;' : '' ?>">
            <form method="POST" action="/payments/process/<?= (int) $member['id'] ?>">
                <?= csrf_field() ?>
                <input type="hidden" name="payment_type" value="<?= e($opt['type']) ?>">

                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;">
                    <div>
                        <h4 style="margin:0;color:#1A1A2E;"><?= e($opt['label']) ?></h4>
                        <p style="margin:3px 0 0;font-size:13px;color:#6B7280;"><?= e($opt['description']) ?></p>
                        <?php if ($opt['required'] ?? false): ?>
                            <span style="color:#DC2626;font-size:12px;font-weight:600;">⚠ مطلوب</span>
                        <?php endif; ?>
                    </div>
                    <div style="text-align:left;">
                        <div style="font-size:24px;font-weight:700;color:#0D7377;">
                            <?= money($opt['amount']) ?>
                        </div>
                    </div>
                </div>

                <div style="display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;align-items:end;">
                    <!-- Amount -->
                    <div class="form-group">
                        <label class="form-label">المبلغ</label>
                        <?php if (!empty($opt['is_variable'])): ?>
                            <input type="number" name="amount" value="<?= e($opt['amount']) ?>" class="form-input" step="0.01" min="<?= e($opt['min_amount'] ?? '0.01') ?>" required style="direction:ltr;text-align:left;font-weight:700;">
                        <?php else: ?>
                            <input type="number" name="amount" value="<?= e($opt['amount']) ?>" class="form-input" step="0.01" readonly style="direction:ltr;text-align:left;font-weight:700;background:#F3F4F6;">
                        <?php endif; ?>
                    </div>

                    <!-- Payment Method -->
                    <div class="form-group">
                        <label class="form-label">طريقة الدفع</label>
                        <select name="payment_method" class="form-select">
                            <option value="cash">نقدي 💵</option>
                            <option value="visa">فيزا 💳</option>
                            <option value="bank_transfer">تحويل بنكي 🏦</option>
                            <option value="check">شيك 📄</option>
                        </select>
                    </div>

                    <!-- Notes -->
                    <div class="form-group">
                        <label class="form-label">ملاحظات</label>
                        <input type="text" name="notes" class="form-input" placeholder="اختياري">
                    </div>

                    <!-- Submit -->
                    <button type="submit" class="btn btn-primary" style="padding:9px 20px;white-space:nowrap;" onclick="return confirm('تأكيد دفع <?= e(money($opt['amount'])) ?>؟')">
                        💰 سجّل الدفع
                    </button>
                </div>
            </form>
        </div>
        <?php endforeach; ?>
    </div>
</div>

<!-- Quick links -->
<div style="display:flex;gap:10px;">
    <a href="/payments/member/<?= (int) $member['id'] ?>" class="btn btn-outline">📜 سجل المدفوعات</a>
    <a href="/members/<?= (int) $member['id'] ?>" class="btn btn-outline">← العضو</a>
</div>

<?php $__template->endSection(); ?>