<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>العلامة التجارية<?php $__template->endSection(); ?>

<?php $__template->section('styles'); ?>
<link rel="stylesheet" href="<?= url('assets/css/branding.css') ?>">
<?php $__template->endSection(); ?>

<?php $__template->section('content'); ?>
<?php
use App\Core\CSRF;
$cd = $carnetDesign;
$rd = $receiptDesign;
?>

<!-- Tabs -->
<div class="branding-tabs">
    <button class="branding-tab active" data-tab="identity" onclick="switchTab(this)">
        <i data-lucide="image"></i>
        <span>الشعار والهوية</span>
    </button>
    <button class="branding-tab" data-tab="carnet" onclick="switchTab(this)">
        <i data-lucide="id-card"></i>
        <span>تصميم الكارنيه</span>
    </button>
    <button class="branding-tab" data-tab="receipt" onclick="switchTab(this)">
        <i data-lucide="receipt"></i>
        <span>تصميم الإيصال</span>
    </button>
</div>

<!-- ============================================ -->
<!-- TAB 1: Logo & Identity                       -->
<!-- ============================================ -->
<div class="tab-panel active" id="tab-identity">
    <form method="POST" action="/settings/branding/logo" enctype="multipart/form-data">
        <input type="hidden" name="_csrf_token" value="<?= e(CSRF::token()) ?>">

        <div class="branding-grid">
            <!-- Logo Upload Card -->
            <div class="card branding-card">
                <div class="card-header">
                    <h3><i data-lucide="upload"></i> شعار النادي</h3>
                </div>
                <div class="card-body">
                    <div class="logo-upload-area" id="logo-upload-area">
                        <div id="logo-display">
                            <?php if ($logo): ?>
                                <div class="logo-preview" id="logo-preview">
                                    <img src="<?= e($logo) ?>" alt="شعار النادي" id="logo-preview-img">
                                    <div class="logo-preview-overlay">
                                        <button type="button" class="btn btn-sm btn-danger" onclick="removeLogo()">
                                            <i data-lucide="trash-2"></i> حذف
                                        </button>
                                    </div>
                                </div>
                            <?php else: ?>
                                <div class="logo-placeholder" id="logo-placeholder" onclick="document.getElementById('logo_file').click()">
                                    <i data-lucide="image-plus"></i>
                                    <p>اضغط لرفع الشعار</p>
                                    <small>PNG, JPG, SVG, WebP — أقصى حجم 2MB</small>
                                </div>
                            <?php endif; ?>
                        </div>
                        <input type="file" name="logo_file" id="logo_file" accept="image/png,image/jpeg,image/svg+xml,image/webp" style="display:none;" onchange="previewLogo(this)">
                        <input type="hidden" name="remove_logo" id="remove_logo" value="0">
                    </div>
                </div>
            </div>

            <!-- Club Name Card -->
            <div class="card branding-card">
                <div class="card-header">
                    <h3><i data-lucide="type"></i> بيانات النادي</h3>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label class="form-label">اسم النادي بالعربية</label>
                        <input type="text" name="club_name_ar" class="form-input" value="<?= e($clubNameAr) ?>" placeholder="نادي النادي شيراتون" dir="rtl">
                    </div>
                    <div class="form-group">
                        <label class="form-label">اسم النادي بالإنجليزية</label>
                        <input type="text" name="club_name_en" class="form-input" value="<?= e($clubNameEn) ?>" placeholder="THE CLUB Sheraton" dir="ltr" style="text-align:left;">
                    </div>
                    <div class="form-group">
                        <label class="form-label">العنوان الفرعي</label>
                        <input type="text" name="club_subtitle" class="form-input" value="<?= e($subtitle) ?>" placeholder="SPORTS CITY" dir="ltr" style="text-align:left;">
                    </div>
                </div>
            </div>
        </div>

        <?php if (can('settings.edit')): ?>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">
                <i data-lucide="save"></i>
                حفظ الهوية البصرية
            </button>
        </div>
        <?php endif; ?>
    </form>
</div>

<!-- ============================================ -->
<!-- TAB 2: Carnet Designer                       -->
<!-- ============================================ -->
<div class="tab-panel" id="tab-carnet">
    <form method="POST" action="/settings/branding/carnet">
        <input type="hidden" name="_csrf_token" value="<?= e(CSRF::token()) ?>">

        <div class="designer-layout">
            <!-- Settings Panel -->
            <div class="designer-settings">
                <!-- Front Card Settings -->
                <div class="card branding-card">
                    <div class="card-header">
                        <h3><i data-lucide="credit-card"></i> الوجه الأمامي</h3>
                    </div>
                    <div class="card-body">
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">لون الخلفية</label>
                                <div class="color-input-wrap">
                                    <input type="color" name="front_bg_color" value="<?= e($cd['front_bg_color']) ?>" id="front_bg_color" onchange="updateCarnetPreview()">
                                    <input type="text" class="form-input form-input-sm color-hex" value="<?= e($cd['front_bg_color']) ?>" onchange="this.previousElementSibling.value=this.value;updateCarnetPreview()" dir="ltr">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="form-label">لون النص</label>
                                <div class="color-input-wrap">
                                    <input type="color" name="front_text_color" value="<?= e($cd['front_text_color']) ?>" id="front_text_color" onchange="updateCarnetPreview()">
                                    <input type="text" class="form-input form-input-sm color-hex" value="<?= e($cd['front_text_color']) ?>" onchange="this.previousElementSibling.value=this.value;updateCarnetPreview()" dir="ltr">
                                </div>
                            </div>
                        </div>

                        <div class="toggle-group">
                            <label class="toggle-label">
                                <input type="hidden" name="front_show_subtitle" value="0">
                                <input type="checkbox" name="front_show_subtitle" value="1" <?= $cd['front_show_subtitle'] ? 'checked' : '' ?> onchange="updateCarnetPreview()">
                                <span class="toggle-switch"></span>
                                <span>إظهار العنوان الفرعي</span>
                            </label>
                            <label class="toggle-label">
                                <input type="hidden" name="front_show_english_name" value="0">
                                <input type="checkbox" name="front_show_english_name" value="1" <?= $cd['front_show_english_name'] ? 'checked' : '' ?> onchange="updateCarnetPreview()">
                                <span class="toggle-switch"></span>
                                <span>إظهار الاسم الإنجليزي</span>
                            </label>
                            <label class="toggle-label">
                                <input type="hidden" name="front_show_member_type" value="0">
                                <input type="checkbox" name="front_show_member_type" value="1" <?= $cd['front_show_member_type'] ? 'checked' : '' ?> onchange="updateCarnetPreview()">
                                <span class="toggle-switch"></span>
                                <span>إظهار نوع العضوية</span>
                            </label>
                            <label class="toggle-label">
                                <input type="hidden" name="front_show_qr" value="0">
                                <input type="checkbox" name="front_show_qr" value="1" <?= $cd['front_show_qr'] ? 'checked' : '' ?> onchange="updateCarnetPreview()">
                                <span class="toggle-switch"></span>
                                <span>إظهار QR Code</span>
                            </label>
                        </div>

                        <div class="form-group">
                            <label class="form-label">موضع QR Code</label>
                            <select name="front_qr_position" class="form-input" id="front_qr_position" onchange="updateCarnetPreview()">
                                <option value="bottom-left" <?= $cd['front_qr_position'] === 'bottom-left' ? 'selected' : '' ?>>أسفل يسار</option>
                                <option value="bottom-right" <?= $cd['front_qr_position'] === 'bottom-right' ? 'selected' : '' ?>>أسفل يمين</option>
                                <option value="top-left" <?= $cd['front_qr_position'] === 'top-left' ? 'selected' : '' ?>>أعلى يسار</option>
                                <option value="top-right" <?= $cd['front_qr_position'] === 'top-right' ? 'selected' : '' ?>>أعلى يمين</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="form-label">موضع الشعار</label>
                            <select name="front_logo_position" class="form-input" id="front_logo_position" onchange="updateCarnetPreview()">
                                <option value="top-center" <?= $cd['front_logo_position'] === 'top-center' ? 'selected' : '' ?>>أعلى الوسط</option>
                                <option value="top-right" <?= $cd['front_logo_position'] === 'top-right' ? 'selected' : '' ?>>أعلى يمين</option>
                                <option value="top-left" <?= $cd['front_logo_position'] === 'top-left' ? 'selected' : '' ?>>أعلى يسار</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Back Card Settings -->
                <div class="card branding-card">
                    <div class="card-header">
                        <h3><i data-lucide="flip-horizontal"></i> الوجه الخلفي</h3>
                    </div>
                    <div class="card-body">
                        <div class="toggle-group">
                            <label class="toggle-label">
                                <input type="hidden" name="back_show_branch_strip" value="0">
                                <input type="checkbox" name="back_show_branch_strip" value="1" <?= $cd['back_show_branch_strip'] ? 'checked' : '' ?> onchange="updateCarnetPreview()">
                                <span class="toggle-switch"></span>
                                <span>إظهار شريط الفرع</span>
                            </label>
                            <label class="toggle-label">
                                <input type="hidden" name="back_show_instructions" value="0">
                                <input type="checkbox" name="back_show_instructions" value="1" <?= $cd['back_show_instructions'] ? 'checked' : '' ?> onchange="updateCarnetPreview()">
                                <span class="toggle-switch"></span>
                                <span>إظهار التعليمات</span>
                            </label>
                        </div>

                        <div class="form-group">
                            <label class="form-label">لون شريط الفرع</label>
                            <div class="color-input-wrap">
                                <input type="color" name="back_strip_color" value="<?= e($cd['back_strip_color']) ?>" id="back_strip_color" onchange="updateCarnetPreview()">
                                <input type="text" class="form-input form-input-sm color-hex" value="<?= e($cd['back_strip_color']) ?>" onchange="this.previousElementSibling.value=this.value;updateCarnetPreview()" dir="ltr">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="form-label">نص التعليمات</label>
                            <textarea name="back_instructions_text" class="form-input" rows="2" onchange="updateCarnetPreview()" id="back_instructions_text"><?= e($cd['back_instructions_text']) ?></textarea>
                        </div>

                        <div class="form-group">
                            <label class="form-label">حقول الوجه الخلفي</label>
                            <?php
                            $allFields = [
                                'full_name_ar' => 'الاسم بالعربية',
                                'full_name_en' => 'الاسم بالإنجليزية',
                                'membership_number' => 'رقم العضوية',
                                'branch_name' => 'الفرع',
                                'issued_at' => 'تاريخ الإصدار',
                                'national_id' => 'الرقم القومي',
                                'phone' => 'الهاتف',
                            ];
                            $selectedFields = $cd['back_fields'] ?? [];
                            ?>
                            <div class="checkbox-grid">
                                <?php foreach ($allFields as $fieldKey => $fieldLabel): ?>
                                    <label class="checkbox-label">
                                        <input type="checkbox" name="back_fields[]" value="<?= e($fieldKey) ?>" <?= in_array($fieldKey, $selectedFields) ? 'checked' : '' ?> onchange="updateCarnetPreview()">
                                        <span class="checkbox-box"></span>
                                        <span><?= e($fieldLabel) ?></span>
                                    </label>
                                <?php endforeach; ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Live Preview -->
            <div class="designer-preview">
                <div class="preview-sticky">
                    <h3 class="preview-title"><i data-lucide="eye"></i> معاينة حية</h3>

                    <!-- Front Preview -->
                    <div class="preview-label">الوجه الأمامي</div>
                    <div class="carnet-preview-front" id="carnet-front-preview">
                        <div class="cpf-club-name"><?= e($clubNameAr) ?> — <?= e($clubNameEn) ?></div>
                        <div class="cpf-subtitle" id="cpf-subtitle"><?= e($subtitle) ?></div>
                        <div class="cpf-member-name">أحمد محمد عبدالله</div>
                        <div class="cpf-member-name-en" id="cpf-name-en">Ahmed Mohamed Abdullah</div>
                        <div class="cpf-member-number">2024-001234</div>
                        <div class="cpf-member-type" id="cpf-member-type">عضو عامل</div>
                        <div class="cpf-qr" id="cpf-qr">
                            <svg viewBox="0 0 40 40" fill="#000"><rect x="2" y="2" width="8" height="8"/><rect x="12" y="2" width="4" height="4"/><rect x="18" y="2" width="4" height="8"/><rect x="30" y="2" width="8" height="8"/><rect x="2" y="12" width="4" height="4"/><rect x="10" y="14" width="4" height="4"/><rect x="18" y="12" width="8" height="4"/><rect x="30" y="12" width="4" height="4"/><rect x="2" y="18" width="8" height="4"/><rect x="14" y="18" width="4" height="4"/><rect x="22" y="18" width="4" height="4"/><rect x="30" y="18" width="8" height="4"/><rect x="2" y="30" width="8" height="8"/><rect x="14" y="30" width="4" height="4"/><rect x="22" y="28" width="4" height="6"/><rect x="30" y="30" width="8" height="8"/></svg>
                        </div>
                        <div class="cpf-carnet-num">CRN-2024-0001</div>
                    </div>

                    <!-- Back Preview -->
                    <div class="preview-label" style="margin-top:16px;">الوجه الخلفي</div>
                    <div class="carnet-preview-back" id="carnet-back-preview">
                        <div class="cpb-branch-strip" id="cpb-branch-strip">فرع شيراتون</div>
                        <div class="cpb-header">
                            <div class="cpb-logo-text"><?= e($clubNameEn) ?><br><?= e($clubNameAr) ?></div>
                        </div>
                        <div class="cpb-info" id="cpb-info">
                            <div><strong>الاسم:</strong> أحمد محمد عبدالله</div>
                            <div><strong>رقم العضوية:</strong> 2024-001234</div>
                            <div><strong>الفرع:</strong> فرع شيراتون</div>
                            <div><strong>تاريخ الإصدار:</strong> 2024-01-15</div>
                        </div>
                        <div class="cpb-instructions" id="cpb-instructions"><?= e($cd['back_instructions_text']) ?></div>
                    </div>
                </div>
            </div>
        </div>

        <?php if (can('settings.edit')): ?>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">
                <i data-lucide="save"></i>
                حفظ تصميم الكارنيه
            </button>
        </div>
        <?php endif; ?>
    </form>
</div>

<!-- ============================================ -->
<!-- TAB 3: Receipt Designer                      -->
<!-- ============================================ -->
<div class="tab-panel" id="tab-receipt">
    <form method="POST" action="/settings/branding/receipt">
        <input type="hidden" name="_csrf_token" value="<?= e(CSRF::token()) ?>">

        <div class="designer-layout">
            <!-- Settings Panel -->
            <div class="designer-settings">
                <div class="card branding-card">
                    <div class="card-header">
                        <h3><i data-lucide="receipt"></i> إعدادات الإيصال</h3>
                    </div>
                    <div class="card-body">
                        <div class="toggle-group">
                            <label class="toggle-label">
                                <input type="hidden" name="show_logo" value="0">
                                <input type="checkbox" name="show_logo" value="1" <?= $rd['show_logo'] ? 'checked' : '' ?> onchange="updateReceiptPreview()">
                                <span class="toggle-switch"></span>
                                <span>إظهار الشعار في الرأس</span>
                            </label>
                            <label class="toggle-label">
                                <input type="hidden" name="show_watermark" value="0">
                                <input type="checkbox" name="show_watermark" value="1" <?= $rd['show_watermark'] ? 'checked' : '' ?> onchange="updateReceiptPreview()">
                                <span class="toggle-switch"></span>
                                <span>إظهار العلامة المائية</span>
                            </label>
                            <label class="toggle-label">
                                <input type="hidden" name="show_footer_print_info" value="0">
                                <input type="checkbox" name="show_footer_print_info" value="1" <?= $rd['show_footer_print_info'] ? 'checked' : '' ?> onchange="updateReceiptPreview()">
                                <span class="toggle-switch"></span>
                                <span>إظهار معلومات الطباعة</span>
                            </label>
                        </div>

                        <div class="form-group">
                            <label class="form-label">نص العلامة المائية</label>
                            <input type="text" name="watermark_text" class="form-input" value="<?= e($rd['watermark_text']) ?>" id="watermark_text" onchange="updateReceiptPreview()">
                        </div>

                        <div class="form-group">
                            <label class="form-label">شفافية العلامة المائية: <span id="opacity-value"><?= number_format($rd['watermark_opacity'], 2) ?></span></label>
                            <input type="range" name="watermark_opacity" class="form-range" min="0.01" max="0.20" step="0.01" value="<?= e($rd['watermark_opacity']) ?>" id="watermark_opacity" oninput="document.getElementById('opacity-value').textContent=parseFloat(this.value).toFixed(2);updateReceiptPreview()">
                        </div>

                        <div class="form-group">
                            <label class="form-label">لون الرأس</label>
                            <div class="color-input-wrap">
                                <input type="color" name="header_color" value="<?= e($rd['header_color']) ?>" id="receipt_header_color" onchange="updateReceiptPreview()">
                                <input type="text" class="form-input form-input-sm color-hex" value="<?= e($rd['header_color']) ?>" onchange="this.previousElementSibling.value=this.value;updateReceiptPreview()" dir="ltr">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Receipt Preview -->
            <div class="designer-preview">
                <div class="preview-sticky">
                    <h3 class="preview-title"><i data-lucide="eye"></i> معاينة حية</h3>
                    <div class="receipt-preview" id="receipt-preview">
                        <div class="rp-watermark" id="rp-watermark"><?= e($rd['watermark_text']) ?></div>
                        <?php if ($logo): ?>
                        <div class="rp-logo" id="rp-logo"><img src="<?= e($logo) ?>" alt="Logo"></div>
                        <?php else: ?>
                        <div class="rp-logo" id="rp-logo" style="display:none;"></div>
                        <?php endif; ?>
                        <div class="rp-header" id="rp-header">
                            <h2><?= e($clubNameAr) ?></h2>
                            <p><?= e($clubNameEn) ?></p>
                            <h3>إيصال تحصيل</h3>
                        </div>
                        <div class="rp-body">
                            <table>
                                <tr><td class="rp-label">رقم الإيصال</td><td class="rp-value">RCP-2024-0001</td></tr>
                                <tr><td class="rp-label">التاريخ</td><td class="rp-value">2024-01-15</td></tr>
                                <tr><td class="rp-label">اسم العضو</td><td class="rp-value">أحمد محمد عبدالله</td></tr>
                                <tr><td class="rp-label">المبلغ</td><td class="rp-value rp-amount">1,500.00 ج.م</td></tr>
                            </table>
                        </div>
                        <div class="rp-signatures">
                            <div>توقيع المستلم</div>
                            <div>أمين الخزينة</div>
                            <div>المدير المالي</div>
                        </div>
                        <div class="rp-footer" id="rp-footer">طبع بتاريخ: <?= date('Y-m-d H:i') ?></div>
                    </div>
                </div>
            </div>
        </div>

        <?php if (can('settings.edit')): ?>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">
                <i data-lucide="save"></i>
                حفظ تصميم الإيصال
            </button>
        </div>
        <?php endif; ?>
    </form>
</div>

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

<?php $__template->section('scripts'); ?>
<script>
// Tab switching
function switchTab(btn) {
    document.querySelectorAll('.branding-tab').forEach(function(t) { t.classList.remove('active'); });
    document.querySelectorAll('.tab-panel').forEach(function(p) { p.classList.remove('active'); });
    btn.classList.add('active');
    document.getElementById('tab-' + btn.dataset.tab).classList.add('active');
    lucide.createIcons();
}

// Logo preview
function previewLogo(input) {
    if (!input.files || !input.files[0]) return;
    var file = input.files[0];
    if (file.size > 2 * 1024 * 1024) {
        alert('حجم الملف يتجاوز 2 ميجا');
        input.value = '';
        return;
    }
    var reader = new FileReader();
    reader.onload = function(e) {
        var display = document.getElementById('logo-display');
        display.innerHTML = '<div class="logo-preview" id="logo-preview">' +
            '<img src="' + e.target.result + '" alt="معاينة" id="logo-preview-img">' +
            '<div class="logo-preview-overlay">' +
            '<button type="button" class="btn btn-sm btn-danger" onclick="removeLogo()">' +
            '<i data-lucide="trash-2"></i> حذف</button></div></div>';
        document.getElementById('remove_logo').value = '0';
        lucide.createIcons();
    };
    reader.readAsDataURL(file);
}

function removeLogo() {
    var display = document.getElementById('logo-display');
    display.innerHTML = '<div class="logo-placeholder" id="logo-placeholder" onclick="document.getElementById(\'logo_file\').click()">' +
        '<i data-lucide="image-plus"></i>' +
        '<p>اضغط لرفع الشعار</p>' +
        '<small>PNG, JPG, SVG, WebP — أقصى حجم 2MB</small></div>';
    document.getElementById('logo_file').value = '';
    document.getElementById('remove_logo').value = '1';
    lucide.createIcons();
}

// Carnet live preview
function updateCarnetPreview() {
    var front = document.getElementById('carnet-front-preview');
    var bgColor = document.getElementById('front_bg_color').value;
    var textColor = document.getElementById('front_text_color').value;
    front.style.background = bgColor;
    front.style.color = textColor;

    var showSub = document.querySelector('[name="front_show_subtitle"][type="checkbox"]').checked;
    var showEn = document.querySelector('[name="front_show_english_name"][type="checkbox"]').checked;
    var showType = document.querySelector('[name="front_show_member_type"][type="checkbox"]').checked;
    var showQr = document.querySelector('[name="front_show_qr"][type="checkbox"]').checked;

    document.getElementById('cpf-subtitle').style.display = showSub ? '' : 'none';
    document.getElementById('cpf-name-en').style.display = showEn ? '' : 'none';
    document.getElementById('cpf-member-type').style.display = showType ? '' : 'none';
    document.getElementById('cpf-qr').style.display = showQr ? '' : 'none';

    // QR position
    var qrPos = document.getElementById('front_qr_position').value;
    var qr = document.getElementById('cpf-qr');
    qr.style.top = ''; qr.style.bottom = ''; qr.style.left = ''; qr.style.right = '';
    if (qrPos === 'bottom-left') { qr.style.bottom = '10px'; qr.style.left = '10px'; }
    else if (qrPos === 'bottom-right') { qr.style.bottom = '10px'; qr.style.right = '10px'; }
    else if (qrPos === 'top-left') { qr.style.top = '10px'; qr.style.left = '10px'; }
    else if (qrPos === 'top-right') { qr.style.top = '10px'; qr.style.right = '10px'; }

    // Back
    var stripColor = document.getElementById('back_strip_color').value;
    var showStrip = document.querySelector('[name="back_show_branch_strip"][type="checkbox"]').checked;
    var showInstr = document.querySelector('[name="back_show_instructions"][type="checkbox"]').checked;
    var instrText = document.getElementById('back_instructions_text').value;

    var strip = document.getElementById('cpb-branch-strip');
    strip.style.display = showStrip ? '' : 'none';
    strip.style.background = stripColor;

    document.getElementById('cpb-instructions').style.display = showInstr ? '' : 'none';
    document.getElementById('cpb-instructions').textContent = instrText;

    // Back fields
    var checked = [];
    document.querySelectorAll('[name="back_fields[]"]:checked').forEach(function(cb) { checked.push(cb.value); });
    var fieldLabels = {
        'full_name_ar': 'الاسم',
        'full_name_en': 'Name',
        'membership_number': 'رقم العضوية',
        'branch_name': 'الفرع',
        'issued_at': 'تاريخ الإصدار',
        'national_id': 'الرقم القومي',
        'phone': 'الهاتف'
    };
    var fieldValues = {
        'full_name_ar': 'أحمد محمد عبدالله',
        'full_name_en': 'Ahmed M. Abdullah',
        'membership_number': '2024-001234',
        'branch_name': 'فرع شيراتون',
        'issued_at': '2024-01-15',
        'national_id': '29001010123456',
        'phone': '01012345678'
    };
    var infoHtml = '';
    for (var i = 0; i < checked.length; i++) {
        var k = checked[i];
        infoHtml += '<div><strong>' + (fieldLabels[k] || k) + ':</strong> ' + (fieldValues[k] || '—') + '</div>';
    }
    document.getElementById('cpb-info').innerHTML = infoHtml;
}

// Receipt live preview
function updateReceiptPreview() {
    var showWatermark = document.querySelector('[name="show_watermark"][type="checkbox"]').checked;
    var showLogo = document.querySelector('[name="show_logo"][type="checkbox"]').checked;
    var showFooter = document.querySelector('[name="show_footer_print_info"][type="checkbox"]').checked;
    var watermarkText = document.getElementById('watermark_text').value;
    var opacity = parseFloat(document.getElementById('watermark_opacity').value);
    var headerColor = document.getElementById('receipt_header_color').value;

    var wm = document.getElementById('rp-watermark');
    wm.style.display = showWatermark ? '' : 'none';
    wm.textContent = watermarkText;
    wm.style.opacity = opacity;

    var logo = document.getElementById('rp-logo');
    logo.style.display = showLogo ? '' : 'none';

    var footer = document.getElementById('rp-footer');
    footer.style.display = showFooter ? '' : 'none';

    var header = document.getElementById('rp-header');
    header.style.borderBottomColor = headerColor;
    header.querySelector('h2').style.color = headerColor;
}

// Sync color hex inputs
document.querySelectorAll('.color-input-wrap input[type="color"]').forEach(function(colorInput) {
    colorInput.addEventListener('input', function() {
        var hex = this.nextElementSibling;
        if (hex) hex.value = this.value;
    });
});

// Initialize previews on page load
document.addEventListener('DOMContentLoaded', function() {
    updateCarnetPreview();
    updateReceiptPreview();
});
</script>
<?php $__template->endSection(); ?>
