<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>إنشاء خطة تقسيط — <?= e($member['full_name_ar']) ?><?php $__template->endSection(); ?>
<?php $__template->section('content'); ?>
<?php if ($existingActive): ?>
<div style="padding:15px;background:#FEF2F2;border:1px solid #FECACA;border-radius:8px;margin-bottom:20px;color:#DC2626;">
    <strong>⚠ يوجد خطة تقسيط نشطة بالفعل</strong> — خطة #<?= (int) $existingActive['id'] ?> بمبلغ <?= money($existingActive['total_with_interest']) ?>
    <a href="/installments/<?= (int) $existingActive['id'] ?>" style="color:#0D7377;margin-right:10px;">عرض الخطة</a>
</div>
<?php endif; ?>
<?php if (can('installment.create_plan')): ?>
<form method="POST" action="/installments/store/<?= (int) $member['id'] ?>" novalidate>
    <?= csrf_field() ?>
    <div class="card" style="padding:20px;margin-bottom:20px;">
        <div style="margin-bottom:15px;padding:10px;background:#EFF6FF;border:1px solid #BFDBFE;border-radius:8px;">
            <strong>العضو:</strong> <?= e($member['full_name_ar']) ?> — <strong>قيمة العضوية:</strong> <?= $member['membership_value'] ? money($member['membership_value']) : '—' ?>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;">
            <div class="form-group"><label class="form-label">المبلغ الإجمالي <span style="color:#DC2626;">*</span></label><input type="number" id="ci_total" name="total_amount" value="<?= e($member['membership_value'] ?? '') ?>" class="form-input" step="0.01" required style="direction:ltr;text-align:left;" oninput="ciRecalc()"></div>
            <div class="form-group"><label class="form-label">المقدم (≥25%) <span style="color:#DC2626;">*</span></label><input type="number" id="ci_down" name="down_payment" class="form-input" step="0.01" required style="direction:ltr;text-align:left;" placeholder="الحد الأدنى 25%" oninput="ciRecalc()"></div>
            <div class="form-group"><label class="form-label">عدد الأشهر (≤<?= (int) ($maxMonths ?? 30) ?>) <span style="color:#DC2626;">*</span></label><input type="number" id="ci_months" name="number_of_months" class="form-input" min="1" max="<?= (int) ($maxMonths ?? 30) ?>" required oninput="ciRecalc()"></div>
            <div class="form-group"><label class="form-label">تاريخ البداية <span style="color:#DC2626;">*</span></label><input type="date" name="start_date" value="<?= e(date('Y-m-d')) ?>" class="form-input" required></div>
            <div class="form-group"><label class="form-label">رقم إيصال المقدم</label><input type="text" name="down_payment_receipt" class="form-input"></div>
            <div class="form-group" style="grid-column:1/-1;"><label class="form-label">ملاحظات</label><textarea name="notes" class="form-textarea" rows="2"></textarea></div>
        </div>

        <!-- Live preview -->
        <div id="ciPreview" style="display:none;margin-top:16px;padding:14px 16px;background:#F0FDF4;border:1px solid #86EFAC;border-radius:8px;font-size:13px;">
            <strong style="color:#166534;display:block;margin-bottom:8px;">معاينة الخطة</strong>
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px;">
                <div style="background:#fff;padding:10px;border-radius:6px;border:1px solid #D1FAE5;">
                    <div style="font-size:11px;color:#6B7280;margin-bottom:2px;">المبلغ المتبقي</div>
                    <div id="ci_remaining" style="font-weight:700;color:#0284C7;"></div>
                </div>
                <div style="background:#fff;padding:10px;border-radius:6px;border:1px solid #D1FAE5;">
                    <div style="font-size:11px;color:#6B7280;margin-bottom:2px;">إجمالي الفائدة</div>
                    <div id="ci_interest" style="font-weight:700;color:#D97706;"></div>
                </div>
                <div style="background:#fff;padding:10px;border-radius:6px;border:1px solid #D1FAE5;">
                    <div style="font-size:11px;color:#6B7280;margin-bottom:2px;">الإجمالي مع الفائدة</div>
                    <div id="ci_total_wi" style="font-weight:700;color:#059669;"></div>
                </div>
                <div style="background:#fff;padding:10px;border-radius:6px;border:1px solid #D1FAE5;">
                    <div style="font-size:11px;color:#6B7280;margin-bottom:2px;">القسط الشهري</div>
                    <div id="ci_monthly" style="font-weight:700;color:#374151;font-size:15px;"></div>
                </div>
            </div>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">إنشاء خطة التقسيط</button>
    <a href="/members/<?= (int) $member['id'] ?>" class="btn btn-outline">إلغاء</a>
</form>
<script>
function ciRecalc() {
    const total  = parseFloat(document.getElementById('ci_total').value)  || 0;
    const down   = parseFloat(document.getElementById('ci_down').value)   || 0;
    const months = parseInt(document.getElementById('ci_months').value)   || 0;
    const rate   = <?= json_encode((float) ($interestRate ?? 22)) ?>;
    const preview = document.getElementById('ciPreview');
    if (!total || !down || !months || down >= total) { preview.style.display = 'none'; return; }
    const remaining      = total - down;
    const totalInterest  = Math.round(remaining * (rate / 100) * (months / 12) * 100) / 100;
    const totalWI        = remaining + totalInterest;
    const monthly        = Math.round((totalWI / months) * 100) / 100;
    const fmt = v => v.toLocaleString('ar-EG', {minimumFractionDigits:2});
    document.getElementById('ci_remaining').textContent = fmt(remaining) + ' ج.م';
    document.getElementById('ci_interest').textContent  = fmt(totalInterest) + ' ج.م';
    document.getElementById('ci_total_wi').textContent  = fmt(totalWI) + ' ج.م';
    document.getElementById('ci_monthly').textContent   = fmt(monthly) + ' ج.م';
    preview.style.display = '';
}
</script>
<?php endif; ?>
<?php $__template->endSection(); ?>