<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>تسوية مبكرة — خطة #<?= (int) $plan['id'] ?><?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/installments/<?= (int) $plan['id'] ?>" class="btn btn-outline">← خطة التقسيط</a>
<?php $__template->endSection(); ?>

<?php $__template->section('content'); ?>

<?php
$remaining      = (float) $calc['remaining_principal'];
$waived         = (float) $calc['total_interest_waived'];
$originalDue    = (float) $calc['total_original_due'];
$itemsCount     = (int)   $calc['items_count'];
$savingsPct     = $originalDue > 0 ? round($waived / $originalDue * 100, 1) : 0;
?>

<!-- ═══ Warning Banner ════════════════════════════════════════════════════════ -->
<div style="background:#FEF3C7;border:2px solid #F59E0B;border-radius:10px;padding:18px 22px;margin-bottom:20px;display:flex;align-items:flex-start;gap:14px;">
    <i data-lucide="alert-triangle" style="width:28px;height:28px;color:#D97706;flex-shrink:0;margin-top:2px;"></i>
    <div>
        <div style="font-size:15px;font-weight:700;color:#92400E;margin-bottom:4px;">تسوية مبكرة — إجراء لا يمكن التراجع عنه</div>
        <div style="font-size:13px;color:#78350F;">
            ستقوم بتسوية <strong><?= $itemsCount ?> قسط</strong> دفعةً واحدة. سيتم إسقاط جميع الفوائد المستقبلية
            (<strong><?= money($waived) ?></strong>) وتحصيل أصل الدين فقط (<strong><?= money($remaining) ?></strong>).
            لا يمكن التراجع عن هذا الإجراء بعد التأكيد.
        </div>
    </div>
</div>

<!-- ═══ Member & Plan Identity ═══════════════════════════════════════════════ -->
<div class="card" style="padding:16px 22px;margin-bottom:16px;">
    <div style="display:flex;align-items:center;gap:20px;flex-wrap:wrap;">
        <div>
            <div style="font-size:11px;color:#6B7280;">العضو</div>
            <div style="font-size:16px;font-weight:700;"><?= e($plan['member_name']) ?></div>
            <div style="font-size:12px;color:#6B7280;">استمارة: <?= e($plan['form_number'] ?? '—') ?></div>
        </div>
        <div style="width:1px;height:40px;background:#E5E7EB;"></div>
        <div>
            <div style="font-size:11px;color:#6B7280;">خطة التقسيط</div>
            <div style="font-size:16px;font-weight:700;">#<?= (int) $plan['id'] ?></div>
            <div style="font-size:12px;color:#6B7280;"><?= (int) $plan['number_of_months'] ?> شهر — <?= $plan['interest_rate'] ?>% سنوياً</div>
        </div>
        <div style="width:1px;height:40px;background:#E5E7EB;"></div>
        <div>
            <div style="font-size:11px;color:#6B7280;">الأقساط المراد تسويتها</div>
            <div style="font-size:22px;font-weight:800;color:#7C3AED;"><?= $itemsCount ?> قسط</div>
        </div>
    </div>
</div>

<!-- ═══ Financial Breakdown ═══════════════════════════════════════════════════ -->
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:20px;">

    <div class="card" style="padding:18px 20px;text-align:center;border-top:4px solid #DC2626;">
        <div style="font-size:11px;color:#6B7280;margin-bottom:6px;">الرصيد الأصلي المستحق</div>
        <div style="font-size:22px;font-weight:800;color:#DC2626;"><?= money($originalDue) ?></div>
        <div style="font-size:11px;color:#9CA3AF;margin-top:4px;"><?= $itemsCount ?> قسط × أصل + فائدة</div>
    </div>

    <div class="card" style="padding:18px 20px;text-align:center;border-top:4px solid #059669;">
        <div style="font-size:11px;color:#6B7280;margin-bottom:6px;">إجمالي الفائدة الساقطة ✂️</div>
        <div style="font-size:22px;font-weight:800;color:#059669;"><?= money($waived) ?></div>
        <div style="font-size:11px;color:#9CA3AF;margin-top:4px;">وفر <?= $savingsPct ?>% من الرصيد الأصلي</div>
    </div>

    <div class="card" style="padding:18px 20px;text-align:center;border-top:4px solid #7C3AED;background:linear-gradient(135deg,#F5F3FF,#EDE9FE);">
        <div style="font-size:11px;color:#6B7280;margin-bottom:6px;">المبلغ الواجب الدفع</div>
        <div style="font-size:26px;font-weight:900;color:#7C3AED;"><?= money($remaining) ?></div>
        <div style="font-size:11px;color:#7C3AED;margin-top:4px;font-weight:600;">أصل الدين فقط — بدون فوائد</div>
    </div>

</div>

<!-- ═══ Formula Ribbon ════════════════════════════════════════════════════════ -->
<div class="card" style="padding:12px 22px;margin-bottom:20px;background:#F0FDF4;border:1px solid #86EFAC;">
    <div style="display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center;font-size:14px;">
        <span style="color:#6B7280;">الرصيد الأصلي</span>
        <strong style="color:#DC2626;"><?= money($originalDue) ?></strong>
        <span style="color:#6B7280;">−</span>
        <span style="color:#6B7280;">الفائدة الساقطة</span>
        <strong style="color:#059669;"><?= money($waived) ?></strong>
        <span style="color:#6B7280;">=</span>
        <span style="color:#6B7280;">يدفع العضو</span>
        <strong style="color:#7C3AED;font-size:17px;"><?= money($remaining) ?></strong>
    </div>
</div>

<!-- ═══ Pending Items Preview ═════════════════════════════════════════════════ -->
<div class="card" style="margin-bottom:24px;">
    <div style="padding:12px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
        <i data-lucide="list" style="width:16px;height:16px;color:#7C3AED;"></i>
        <h3 style="margin:0;color:#7C3AED;font-size:14px;">الأقساط التي ستُسوَّى (<?= $itemsCount ?>)</h3>
    </div>
    <div class="table-responsive" style="max-height:320px;overflow-y:auto;">
        <table style="width:100%;border-collapse:collapse;font-size:13px;">
            <thead style="position:sticky;top:0;background:#F9FAFB;">
                <tr style="border-bottom:2px solid #E5E7EB;">
                    <th style="padding:8px 12px;text-align:right;color:#6B7280;">#</th>
                    <th style="padding:8px 12px;text-align:right;color:#6B7280;">تاريخ الاستحقاق</th>
                    <th style="padding:8px 12px;text-align:right;color:#6B7280;">المبلغ الأصلي</th>
                    <th style="padding:8px 12px;text-align:right;color:#6B7280;">أصل الدين</th>
                    <th style="padding:8px 12px;text-align:right;color:#D97706;">الفائدة الساقطة</th>
                    <th style="padding:8px 12px;text-align:right;color:#7C3AED;">يُدفع</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($calc['pending_items'] as $item): ?>
                <tr style="border-bottom:1px solid #F3F4F6;">
                    <td style="padding:7px 12px;font-weight:600;"><?= (int) $item['installment_number'] ?></td>
                    <td style="padding:7px 12px;color:<?= $item['due_date'] < date('Y-m-d') ? '#DC2626' : '#374151' ?>;font-weight:<?= $item['due_date'] < date('Y-m-d') ? '700' : '400' ?>;">
                        <?= e($item['due_date']) ?>
                        <?php if ($item['due_date'] < date('Y-m-d')): ?><span style="font-size:11px;margin-right:4px;">⚠️</span><?php endif; ?>
                    </td>
                    <td style="padding:7px 12px;color:#6B7280;"><?= money($item['amount']) ?></td>
                    <td style="padding:7px 12px;font-weight:600;"><?= money($item['principal']) ?></td>
                    <td style="padding:7px 12px;color:#D97706;">✂️ <?= money($item['interest']) ?></td>
                    <td style="padding:7px 12px;font-weight:700;color:#7C3AED;"><?= money($item['principal']) ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
            <tfoot>
                <tr style="background:#F0F9FF;font-weight:700;border-top:2px solid #E5E7EB;">
                    <td colspan="2" style="padding:8px 12px;color:#374151;">الإجمالي</td>
                    <td style="padding:8px 12px;color:#DC2626;"><?= money($originalDue) ?></td>
                    <td style="padding:8px 12px;"><?= money($remaining) ?></td>
                    <td style="padding:8px 12px;color:#D97706;">✂️ <?= money($waived) ?></td>
                    <td style="padding:8px 12px;color:#7C3AED;font-size:15px;"><?= money($remaining) ?></td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

<!-- ═══ Confirmation Form ═════════════════════════════════════════════════════ -->
<div class="card" style="padding:22px;border:2px solid #7C3AED;">
    <h3 style="margin:0 0 16px;color:#7C3AED;font-size:15px;">
        ✅ تأكيد التسوية المبكرة
    </h3>
    <form method="POST" action="/installments/<?= (int) $plan['id'] ?>/early-settlement" id="settlementForm">
        <?= csrf_field() ?>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;">
            <div class="form-group">
                <label class="form-label">طريقة الدفع <span style="color:#DC2626;">*</span></label>
                <select name="payment_method" class="form-select" required>
                    <option value="cash">نقدي</option>
                    <option value="check">شيك</option>
                    <option value="visa">بطاقة فيزا</option>
                    <option value="bank_transfer">تحويل بنكي</option>
                </select>
            </div>
            <div style="display:flex;align-items:center;background:#F5F3FF;border:1px solid #DDD6FE;border-radius:8px;padding:14px 18px;">
                <div>
                    <div style="font-size:11px;color:#7C3AED;margin-bottom:2px;">المبلغ الذي سيُحصَّل</div>
                    <div style="font-size:24px;font-weight:900;color:#7C3AED;"><?= money($remaining) ?></div>
                </div>
            </div>
        </div>

        <!-- Confirmation checkbox -->
        <div style="background:#FEF9C3;border:1px solid #FDE68A;border-radius:8px;padding:12px 16px;margin-bottom:18px;display:flex;align-items:flex-start;gap:10px;">
            <input type="checkbox" id="confirmCheck" name="confirmed" value="1" required
                   style="margin-top:3px;accent-color:#7C3AED;width:16px;height:16px;flex-shrink:0;">
            <label for="confirmCheck" style="font-size:13px;color:#78350F;cursor:pointer;">
                أؤكد أن العضو <strong><?= e($plan['member_name']) ?></strong> يرغب في تسوية جميع الأقساط المتبقية
                (<strong><?= $itemsCount ?> قسط</strong>) بمبلغ <strong><?= money($remaining) ?></strong> (أصل الدين فقط بدون فوائد).
                وأفهم أن الفائدة الساقطة (<strong><?= money($waived) ?></strong>) لن تُسترد وهذا الإجراء نهائي.
            </label>
        </div>

        <div style="display:flex;gap:12px;">
            <button type="submit" id="submitBtn" class="btn btn-primary"
                    style="background:#7C3AED;border-color:#7C3AED;font-size:15px;padding:10px 28px;"
                    disabled
                    onclick="return confirm('تأكيد التسوية المبكرة — سيُحصَّل <?= e(money($remaining)) ?> ولن يمكن التراجع؟')">
                ⚡ تأكيد التسوية المبكرة — <?= money($remaining) ?>
            </button>
            <a href="/installments/<?= (int) $plan['id'] ?>" class="btn btn-outline">إلغاء</a>
        </div>
    </form>
</div>

<script>
document.getElementById('confirmCheck').addEventListener('change', function () {
    document.getElementById('submitBtn').disabled = !this.checked;
});
document.addEventListener('DOMContentLoaded', function () {
    if (typeof lucide !== 'undefined') lucide.createIcons();
});
</script>

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