<?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'); ?>

<?php
$planTotal    = (float) ($planTotal    ?? 0);
$uploadedTotal= (float) ($uploadedTotal ?? 0);
$nextNum      = (int)   ($nextChequeNum ?? 1);
$monthlyPay   = (float) ($plan['monthly_payment'] ?? 0);
$uncoveredAmt = max(0, round($planTotal - $uploadedTotal, 2));
$coveragePct  = $planTotal > 0 ? min(100, round($uploadedTotal / $planTotal * 100)) : 100;
?>

<!-- ═══ 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; ?>

<!-- ═══ KPI Row ═════════════════════════════════════════════════════════════ -->
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;">
    <div class="card" style="padding:14px 16px;text-align:center;border-right:4px solid #7C3AED;">
        <div style="font-size:11px;color:#6B7280;margin-bottom:4px;">إجمالي التقسيط</div>
        <div style="font-size:17px;font-weight:800;color:#7C3AED;"><?= money($planTotal) ?></div>
    </div>
    <div class="card" style="padding:14px 16px;text-align:center;border-right:4px solid #059669;">
        <div style="font-size:11px;color:#6B7280;margin-bottom:4px;">إجمالي الشيكات المُسلمة</div>
        <div style="font-size:17px;font-weight:800;color:#059669;"><?= money($uploadedTotal) ?></div>
    </div>
    <div class="card" style="padding:14px 16px;text-align:center;border-right:4px solid <?= $uncoveredAmt > 0 ? '#DC2626' : '#059669' ?>;">
        <div style="font-size:11px;color:#6B7280;margin-bottom:4px;">الفرق غير المغطى</div>
        <div style="font-size:17px;font-weight:800;color:<?= $uncoveredAmt > 0 ? '#DC2626' : '#059669' ?>;">
            <?= $uncoveredAmt > 0 ? money($uncoveredAmt) : '✅ مغطى' ?>
        </div>
    </div>
    <div class="card" style="padding:14px 16px;text-align:center;border-right:4px solid #0284C7;">
        <div style="font-size:11px;color:#6B7280;margin-bottom:4px;">الشيكات <?= $uploadedCount ?> / <?= $requiredCount ?></div>
        <div style="font-size:17px;font-weight:800;color:#0284C7;"><?= $coveragePct ?>%</div>
        <div style="background:#E5E7EB;border-radius:99px;height:6px;margin-top:6px;overflow:hidden;">
            <div style="height:100%;background:<?= $coveragePct>=100?'#059669':'#0284C7' ?>;width:<?= $coveragePct ?>%;border-radius:99px;"></div>
        </div>
    </div>
</div>

<?php if ($remainingCount > 0): ?>
<!-- ═══ Auto-Generator ══════════════════════════════════════════════════════ -->
<div class="card" style="margin-bottom:20px;border:2px solid #0D7377;">
    <div style="padding:14px 20px;background:#F0FDFA;border-bottom:2px solid #0D7377;display:flex;align-items:center;gap:8px;">
        <i data-lucide="zap" style="width:18px;height:18px;color:#0D7377;"></i>
        <h3 style="margin:0;color:#0D7377;font-size:15px;">مولّد الشيكات التلقائي</h3>
        <span style="margin-right:auto;font-size:12px;color:#6B7280;">اكتب قيمة الشيك والبنك → الجهاز يولّد العدد المطلوب تلقائياً</span>
    </div>
    <div style="padding:20px;">
        <!-- Generator inputs -->
        <div style="display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:12px;align-items:end;margin-bottom:14px;">
            <div>
                <label style="font-size:12px;color:#374151;font-weight:600;display:block;margin-bottom:4px;">قيمة كل شيك <span style="color:#DC2626;">*</span></label>
                <input type="number" id="gen_amount" class="form-input" step="0.01" min="0.01"
                       value="<?= number_format($monthlyPay, 2, '.', '') ?>"
                       placeholder="0.00" oninput="genPreview()" style="direction:ltr;text-align:left;">
            </div>
            <div>
                <label style="font-size:12px;color:#374151;font-weight:600;display:block;margin-bottom:4px;">البنك الافتراضي <span style="color:#DC2626;">*</span></label>
                <input type="text" id="gen_bank" class="form-input" placeholder="البنك الأهلي المصري" oninput="genPreview()">
            </div>
            <div>
                <label style="font-size:12px;color:#374151;font-weight:600;display:block;margin-bottom:4px;">تاريخ أول شيك <span style="color:#DC2626;">*</span></label>
                <input type="date" id="gen_start_date" class="form-input"
                       value="<?= e(date('Y-m-d')) ?>" oninput="genPreview()">
            </div>
            <div>
                <button type="button" class="btn btn-primary" onclick="generateCheques()"
                        style="background:#0D7377;border-color:#0D7377;white-space:nowrap;">
                    ⚡ توليد الشيكات
                </button>
            </div>
        </div>

        <!-- Generator preview -->
        <div id="genPreviewBox" style="display:none;padding:10px 14px;background:#EFF6FF;border:1px solid #BFDBFE;border-radius:8px;font-size:13px;margin-bottom:12px;">
            سيتم توليد <strong id="genCount">—</strong> شيك |
            قيمة كل شيك: <strong id="genAmtDisplay">—</strong> |
            إجمالي: <strong id="genTotalDisplay">—</strong> |
            أرقام الشيكات: <strong id="genNumRange">—</strong>
        </div>

        <!-- Generated editable table -->
        <div id="genTableWrap" style="display:none;">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
                <span style="font-size:13px;font-weight:600;color:#374151;">الشيكات المولّدة — قابلة للتعديل قبل الحفظ</span>
                <button type="button" onclick="clearGenerated()" style="background:none;border:none;color:#DC2626;cursor:pointer;font-size:12px;">✕ مسح الكل</button>
            </div>

            <!-- Live total validation bar -->
            <div id="batchValidBar" style="display:none;padding:8px 12px;border-radius:6px;font-size:13px;margin-bottom:10px;"></div>

            <div class="table-responsive" style="max-height:420px;overflow-y:auto;">
                <table style="width:100%;border-collapse:collapse;font-size:13px;" id="genTable">
                    <thead style="position:sticky;top:0;background:#F9FAFB;z-index:1;">
                        <tr style="border-bottom:2px solid #E5E7EB;">
                            <th style="padding:8px 10px;text-align:right;color:#6B7280;">#</th>
                            <th style="padding:8px 10px;text-align:right;color:#6B7280;">رقم الشيك</th>
                            <th style="padding:8px 10px;text-align:right;color:#6B7280;">البنك</th>
                            <th style="padding:8px 10px;text-align:right;color:#6B7280;">التاريخ</th>
                            <th style="padding:8px 10px;text-align:right;color:#6B7280;">المبلغ</th>
                            <th style="padding:8px 10px;text-align:right;color:#6B7280;">ملاحظات</th>
                            <th style="padding:8px 10px;"></th>
                        </tr>
                    </thead>
                    <tbody id="genTableBody"></tbody>
                    <tfoot>
                        <tr style="border-top:2px solid #E5E7EB;background:#F9FAFB;font-weight:700;">
                            <td colspan="4" style="padding:8px 10px;color:#374151;">الإجمالي</td>
                            <td style="padding:8px 10px;" id="batchTotalCell">—</td>
                            <td colspan="2"></td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            <!-- Batch submit form -->
            <form id="batchForm" method="POST" action="/installments/<?= (int) $plan['id'] ?>/cheques/batch" novalidate>
                <?= csrf_field() ?>
                <div id="batchHiddenInputs"></div>
                <div style="margin-top:14px;display:flex;align-items:center;gap:12px;">
                    <button type="submit" id="batchSubmitBtn" class="btn btn-primary"
                            style="background:#0D7377;border-color:#0D7377;" disabled>
                        💾 حفظ جميع الشيكات
                    </button>
                    <span id="batchSubmitNote" style="font-size:12px;color:#DC2626;"></span>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- ═══ Single-Upload Form ═══════════════════════════════════════════════════ -->
<div class="card" style="margin-bottom:20px;">
    <div style="padding:14px 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;" novalidate>
        <?= csrf_field() ?>
        <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="text" name="cheque_number" class="form-input" required maxlength="50" value="<?= e(old('cheque_number') ?? $nextNum) ?>" placeholder="مثال: <?= $nextNum ?>">
            </div>
            <div class="form-group">
                <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 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') ?? number_format($monthlyPay, 2, '.', '')) ?>" style="direction:ltr;text-align:left;">
            </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; ?>

<!-- ═══ Existing Cheques ══════════════════════════════════════════════════════ -->
<div class="card">
    <div style="padding:14px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;justify-content:space-between;">
        <div style="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 ($uploadedTotal > 0): ?>
        <div style="font-size:13px;">
            الإجمالي: <strong style="color:<?= $uploadedTotal >= $planTotal - 0.009 ? '#059669' : '#DC2626' ?>;"><?= money($uploadedTotal) ?></strong>
            / <?= money($planTotal) ?>
            <?php if ($uploadedTotal < $planTotal - 0.009): ?>
            <span style="color:#DC2626;font-weight:700;margin-right:6px;">⚠️ غير مكتمل</span>
            <?php else: ?>
            <span style="color:#059669;font-weight:700;margin-right:6px;">✅ مغطى بالكامل</span>
            <?php endif; ?>
        </div>
        <?php endif; ?>
    </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 style="font-weight:600;"><?= $i + 1 ?></td>
                    <td><code style="background:#F3F4F6;padding:2px 6px;border-radius:4px;"><?= e($chq['cheque_number']) ?></code></td>
                    <td><?= e($chq['bank_name']) ?></td>
                    <td style="white-space:nowrap;"><?= e($chq['cheque_date']) ?></td>
                    <td style="font-weight:700;color:#059669;"><?= money($chq['cheque_amount']) ?></td>
                    <td>
                        <?php if ($chq['scan_path']): ?>
                        <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>
                        <?php else: ?>
                        <span style="color:#9CA3AF;font-size:12px;">بدون ملف</span>
                        <?php endif; ?>
                    </td>
                    <td style="font-size:12px;color:#6B7280;"><?= e($chq['uploaded_by_name'] ?? '—') ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
            <tfoot>
                <tr style="background:#F9FAFB;font-weight:700;">
                    <td colspan="4" style="padding:8px 12px;color:#374151;">الإجمالي</td>
                    <td style="padding:8px 12px;color:#059669;"><?= money($uploadedTotal) ?></td>
                    <td colspan="2"></td>
                </tr>
            </tfoot>
        </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>

<script>
(function () {
    // ── Constants injected from PHP ──────────────────────────────────────────
    var PLAN_TOTAL       = <?= json_encode(round($planTotal, 2)) ?>;
    var ALREADY_UPLOADED = <?= json_encode(round($uploadedTotal, 2)) ?>;
    var NEXT_NUM         = <?= json_encode($nextNum) ?>;
    var MONTHLY          = <?= json_encode(round($monthlyPay, 2)) ?>;

    var rows = [];   // Array of row objects currently in the generated table

    // ── Formatting helpers ──────────────────────────────────────────────────
    function fmt(v) {
        return parseFloat(v).toLocaleString('ar-EG', {minimumFractionDigits:2, maximumFractionDigits:2}) + ' ج.م';
    }
    function addMonths(dateStr, n) {
        var d = new Date(dateStr);
        d.setMonth(d.getMonth() + n);
        return d.toISOString().slice(0,10);
    }

    // ── Preview how many cheques will be generated ─────────────────────────
    window.genPreview = function () {
        var amt  = parseFloat(document.getElementById('gen_amount').value)      || 0;
        var bank = document.getElementById('gen_bank').value.trim();
        var box  = document.getElementById('genPreviewBox');
        if (!amt || amt <= 0) { box.style.display='none'; return; }

        var needed = Math.ceil((PLAN_TOTAL - ALREADY_UPLOADED) / amt);
        if (needed <= 0) needed = 1;
        var total = needed * amt;
        var endNum = NEXT_NUM + needed - 1;

        document.getElementById('genCount').textContent      = needed;
        document.getElementById('genAmtDisplay').textContent = fmt(amt);
        document.getElementById('genTotalDisplay').textContent = fmt(total);
        document.getElementById('genNumRange').textContent   = NEXT_NUM + ' → ' + endNum;
        box.style.display = '';
    };

    // ── Generate the editable rows ─────────────────────────────────────────
    window.generateCheques = function () {
        var amt       = parseFloat(document.getElementById('gen_amount').value)     || 0;
        var bank      = document.getElementById('gen_bank').value.trim();
        var startDate = document.getElementById('gen_start_date').value;

        if (!amt || amt <= 0)   { alert('أدخل قيمة الشيك أولاً'); return; }
        if (!bank)              { alert('أدخل اسم البنك أولاً');  return; }
        if (!startDate)         { alert('أدخل تاريخ أول شيك');    return; }

        var needed = Math.ceil((PLAN_TOTAL - ALREADY_UPLOADED) / amt);
        if (needed <= 0) needed = 1;

        rows = [];
        for (var i = 0; i < needed; i++) {
            rows.push({
                cheque_number: String(NEXT_NUM + i),
                bank_name:     bank,
                cheque_date:   addMonths(startDate, i),
                cheque_amount: (i === needed - 1)
                    ? Math.round((PLAN_TOTAL - ALREADY_UPLOADED - amt * (needed - 1)) * 100) / 100
                    : amt,
                notes: '',
            });
        }

        renderTable();
        document.getElementById('genTableWrap').style.display = '';
        document.getElementById('genPreviewBox').style.display = 'none';
    };

    // ── Render the editable table ───────────────────────────────────────────
    function renderTable() {
        var tbody = document.getElementById('genTableBody');
        tbody.innerHTML = '';
        rows.forEach(function (row, idx) {
            var tr = document.createElement('tr');
            tr.style.borderBottom = '1px solid #F3F4F6';
            tr.innerHTML =
                '<td style="padding:6px 8px;color:#6B7280;width:36px;">' + (idx+1) + '</td>' +
                '<td style="padding:4px 6px;"><input class="form-input" style="min-width:90px;" value="' + esc(row.cheque_number) + '" oninput="updateRow('+idx+',\'cheque_number\',this.value)"></td>' +
                '<td style="padding:4px 6px;"><input class="form-input" style="min-width:140px;" value="' + esc(row.bank_name) + '" oninput="updateRow('+idx+',\'bank_name\',this.value)"></td>' +
                '<td style="padding:4px 6px;"><input type="date" class="form-input" value="' + esc(row.cheque_date) + '" oninput="updateRow('+idx+',\'cheque_date\',this.value)"></td>' +
                '<td style="padding:4px 6px;"><input type="number" class="form-input" step="0.01" style="min-width:100px;direction:ltr;text-align:left;" value="' + row.cheque_amount + '" oninput="updateRow('+idx+',\'cheque_amount\',parseFloat(this.value)||0)"></td>' +
                '<td style="padding:4px 6px;"><input class="form-input" style="min-width:100px;" value="' + esc(row.notes) + '" oninput="updateRow('+idx+',\'notes\',this.value)" placeholder="اختياري"></td>' +
                '<td style="padding:4px 6px;"><button type="button" onclick="removeRow('+idx+')" style="background:none;border:none;color:#DC2626;cursor:pointer;font-size:16px;" title="حذف">✕</button></td>';
            tbody.appendChild(tr);
        });
        updateValidation();
    }

    // ── Edit a row field ────────────────────────────────────────────────────
    window.updateRow = function (idx, field, val) {
        rows[idx][field] = val;
        updateValidation();
    };

    // ── Remove a row ─────────────────────────────────────────────────────────
    window.removeRow = function (idx) {
        rows.splice(idx, 1);
        renderTable();
    };

    // ── Clear all ────────────────────────────────────────────────────────────
    window.clearGenerated = function () {
        rows = [];
        document.getElementById('genTableWrap').style.display = 'none';
    };

    // ── Live validation + footer total + submit button state ────────────────
    function updateValidation() {
        var batchTotal = rows.reduce(function(s, r){ return s + (parseFloat(r.cheque_amount)||0); }, 0);
        batchTotal = Math.round(batchTotal * 100) / 100;
        var grandTotal = Math.round((ALREADY_UPLOADED + batchTotal) * 100) / 100;

        document.getElementById('batchTotalCell').textContent = fmt(batchTotal);

        var bar  = document.getElementById('batchValidBar');
        var btn  = document.getElementById('batchSubmitBtn');
        var note = document.getElementById('batchSubmitNote');

        var covered = grandTotal >= PLAN_TOTAL - 0.009;

        bar.style.display = '';
        if (covered) {
            bar.style.background = '#DCFCE7';
            bar.style.border = '1px solid #86EFAC';
            bar.style.color = '#166534';
            bar.innerHTML = '✅ إجمالي الشيكات (<strong>' + fmt(grandTotal) + '</strong>) يغطي إجمالي التقسيط (<strong>' + fmt(PLAN_TOTAL) + '</strong>)';
            btn.disabled = false;
            btn.style.opacity = '1';
            note.textContent = '';
        } else {
            bar.style.background = '#FEF2F2';
            bar.style.border = '1px solid #FECACA';
            bar.style.color = '#991B1B';
            var short = Math.round((PLAN_TOTAL - grandTotal) * 100) / 100;
            bar.innerHTML = '⚠️ الإجمالي الحالي <strong>' + fmt(grandTotal) + '</strong> — ينقص <strong>' + fmt(short) + '</strong> لتغطية إجمالي التقسيط (<strong>' + fmt(PLAN_TOTAL) + '</strong>)';
            btn.disabled = true;
            btn.style.opacity = '0.5';
            note.textContent = 'لا يمكن الحفظ حتى تتساوى القيمة أو تزيد عن إجمالي التقسيط';
        }

        // Rebuild hidden inputs for the form
        buildHiddenInputs();
    }

    // ── Build hidden inputs mirroring the editable rows ────────────────────
    function buildHiddenInputs() {
        var container = document.getElementById('batchHiddenInputs');
        container.innerHTML = '';
        rows.forEach(function (row, idx) {
            ['cheque_number','bank_name','cheque_date','cheque_amount','notes'].forEach(function (field) {
                var inp = document.createElement('input');
                inp.type = 'hidden';
                inp.name = 'cheques[' + idx + '][' + field + ']';
                inp.value = row[field] ?? '';
                container.appendChild(inp);
            });
        });
    }

    // ── HTML escape helper ──────────────────────────────────────────────────
    function esc(s) {
        return String(s).replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    }

    // ── Init Lucide icons ────────────────────────────────────────────────────
    document.addEventListener('DOMContentLoaded', function () {
        if (typeof lucide !== 'undefined') lucide.createIcons();
        genPreview();
    });
})();
</script>

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