<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>شيكات الأقساط — <?= e($plan['member_name']) ?><?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/installments/<?= (int) $plan['id'] ?>" class="btn btn-outline"><i data-lucide="arrow-right" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> خطة التقسيط</a>
<a href="/members/<?= (int) $plan['member_id'] ?>" class="btn btn-outline"><i data-lucide="user" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> العضو</a>
<?php $__template->endSection(); ?>

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

<!-- Status Banner -->
<?php if ($allSubmitted && $plan['member_status'] === 'active'): ?>
<div style="background:#DCFCE7;border:1px solid #86EFAC;border-radius:8px;padding:15px 20px;margin-bottom:20px;display:flex;align-items:center;gap:10px;">
    <i data-lucide="check-circle" style="width:24px;height:24px;color:#16A34A;"></i>
    <div>
        <div style="font-weight:700;color:#15803D;">تم تسليم جميع الشيكات وتفعيل العضوية</div>
        <div style="font-size:13px;color:#166534;">رقم العضوية: <?= e($plan['membership_number'] ?? '—') ?></div>
    </div>
</div>
<?php elseif ($plan['member_status'] === 'pending_cheques'): ?>
<div style="background:#FEF3C7;border:1px solid #FCD34D;border-radius:8px;padding:15px 20px;margin-bottom:20px;display:flex;align-items:center;gap:10px;">
    <i data-lucide="alert-circle" style="width:24px;height:24px;color:#D97706;"></i>
    <div>
        <div style="font-weight:700;color:#92400E;">العضوية معلقة — في انتظار تسليم الشيكات</div>
        <div style="font-size:13px;color:#78350F;">المطلوب: <?= $requiredCount ?> شيك | تم رفع: <?= $uploadedCount ?> | المتبقي: <strong><?= $remainingCount ?></strong></div>
    </div>
</div>
<?php endif; ?>

<!-- Progress -->
<div class="card" style="padding:20px;margin-bottom:20px;">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
        <span style="font-size:14px;font-weight:600;color:#374151;">التقدم</span>
        <span style="font-size:14px;color:#6B7280;"><?= $uploadedCount ?> / <?= $requiredCount ?></span>
    </div>
    <div style="background:#E5E7EB;border-radius:999px;height:10px;overflow:hidden;">
        <?php $pct = $requiredCount > 0 ? round(($uploadedCount / $requiredCount) * 100) : 0; ?>
        <div style="background:<?= $pct >= 100 ? '#16A34A' : '#0D7377' ?>;height:100%;width:<?= $pct ?>%;transition:width 0.3s;border-radius:999px;"></div>
    </div>
</div>

<div style="display:grid;grid-template-columns:<?= $remainingCount > 0 ? '1fr 1fr' : '1fr' ?>;gap:20px;">
    <!-- Upload Form -->
    <?php if ($remainingCount > 0): ?>
    <div class="card">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
            <i data-lucide="upload" style="width:18px;height:18px;color:#0D7377;"></i>
            <h3 style="margin:0;color:#0D7377;font-size:15px;">رفع شيك جديد</h3>
        </div>
        <form method="POST" action="/installments/<?= (int) $plan['id'] ?>/cheques" enctype="multipart/form-data" style="padding:20px;">
            <?= csrf_field() ?>
            <div class="form-group" style="margin-bottom:15px;">
                <label class="form-label">رقم الشيك <span style="color:#DC2626;">*</span></label>
                <input type="text" name="cheque_number" class="form-input" required maxlength="50" value="<?= e(old('cheque_number') ?? '') ?>" placeholder="مثال: 123456789">
            </div>
            <div class="form-group" style="margin-bottom:15px;">
                <label class="form-label">البنك <span style="color:#DC2626;">*</span></label>
                <input type="text" name="bank_name" class="form-input" required maxlength="200" value="<?= e(old('bank_name') ?? '') ?>" placeholder="مثال: البنك الأهلي المصري">
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:15px;">
                <div class="form-group">
                    <label class="form-label">تاريخ الشيك <span style="color:#DC2626;">*</span></label>
                    <input type="date" name="cheque_date" class="form-input" required value="<?= e(old('cheque_date') ?? '') ?>">
                </div>
                <div class="form-group">
                    <label class="form-label">مبلغ الشيك <span style="color:#DC2626;">*</span></label>
                    <input type="number" name="cheque_amount" class="form-input" required step="0.01" min="0.01" value="<?= e(old('cheque_amount') ?? $plan['monthly_payment'] ?? '') ?>" placeholder="0.00">
                </div>
            </div>
            <div class="form-group" style="margin-bottom:15px;">
                <label class="form-label">صورة/مسح الشيك <span style="color:#DC2626;">*</span></label>
                <input type="file" name="scan_file" class="form-input" required accept=".jpg,.jpeg,.png,.webp,.pdf">
                <small style="color:#6B7280;font-size:12px;">JPG, PNG, WebP, PDF — الحد الأقصى 10 ميجابايت</small>
            </div>
            <div class="form-group" style="margin-bottom:15px;">
                <label class="form-label">ملاحظات</label>
                <input type="text" name="notes" class="form-input" maxlength="500" value="<?= e(old('notes') ?? '') ?>">
            </div>
            <button type="submit" class="btn btn-primary" style="width:100%;"><i data-lucide="upload" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> رفع الشيك</button>
        </form>
    </div>
    <?php endif; ?>

    <!-- Uploaded Cheques -->
    <div class="card">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
            <i data-lucide="file-check" style="width:18px;height:18px;color:#059669;"></i>
            <h3 style="margin:0;color:#059669;font-size:15px;">الشيكات المُسلمة (<?= $uploadedCount ?>)</h3>
        </div>
        <?php if (!empty($cheques)): ?>
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr><th>#</th><th>رقم الشيك</th><th>البنك</th><th>التاريخ</th><th>المبلغ</th><th>الملف</th><th>رفع بواسطة</th></tr>
                </thead>
                <tbody>
                    <?php foreach ($cheques as $i => $chq): ?>
                    <tr>
                        <td><?= $i + 1 ?></td>
                        <td style="font-weight:600;"><code style="background:#F3F4F6;padding:2px 6px;border-radius:4px;"><?= e($chq['cheque_number']) ?></code></td>
                        <td><?= e($chq['bank_name']) ?></td>
                        <td><?= e($chq['cheque_date']) ?></td>
                        <td style="font-weight:600;color:#059669;"><?= money($chq['cheque_amount']) ?></td>
                        <td><a href="/<?= e($chq['scan_path']) ?>" target="_blank" style="color:#0D7377;"><i data-lucide="eye" style="width:14px;height:14px;vertical-align:middle;"></i> عرض</a></td>
                        <td style="font-size:12px;color:#6B7280;"><?= e($chq['uploaded_by_name'] ?? '—') ?></td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
        <?php else: ?>
        <div style="padding:40px 20px;text-align:center;">
            <i data-lucide="file-x" style="width:40px;height:40px;color:#D1D5DB;margin-bottom:10px;"></i>
            <p style="color:#6B7280;margin:0;">لم يتم رفع أي شيكات بعد</p>
        </div>
        <?php endif; ?>
    </div>
</div>

<script>document.addEventListener('DOMContentLoaded',function(){if(typeof lucide!=='undefined')lucide.createIcons();});</script>
<?php $__template->endSection(); ?>
