<?php

use Core\App\Models\HomeSections;
use Core\App\Models\CategoryModel;

$sectionsModel = new HomeSections();
$categories    = (new CategoryModel())->getAll();

/** @var int $id */
$id      = (int)($id ?? 0);
$section = $sectionsModel->getById($id);

if (!$section) {
    echo '<div class="alert alert-danger">' . __('homepage.section_not_found', 'Section not found.') . '</div>';
    return;
}

$settings = $section['settings'] ?? [];
$type     = $section['section_type'] ?? '';
$slides   = $settings['slides'] ?? [];
$items    = is_array($settings['items'] ?? null) ? $settings['items'] : [];
$ads      = $settings['ads'] ?? [];
$ad1      = $ads[0] ?? [];
$ad2      = $ads[1] ?? [];

include __DIR__ . '/../header.php';
?>

<div class="admin-page container-fluid py-3" style="max-width:860px;">

    <div class="d-flex align-items-center gap-3 mb-4">
        <a href="/admin/home-sections" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-arrow-right"></i>
        </a>
        <h1 class="h5 mb-0 fw-bold"><?= __('homepage.edit_section', 'Edit Section') ?></h1>
    </div>

    <form method="post"
          action="/admin/home-sections/update/<?= (int)$section['id'] ?>"
          enctype="multipart/form-data"
          id="hsEditForm">
        <?= \Core\System\Csrf::field(); ?>

        <!-- ══ Enable ════════════════════════════════════════════════════ -->
        <div class="card mb-4 shadow-sm">
            <div class="card-body">
                <div class="d-flex align-items-center gap-3">
                    <div class="form-check form-switch mb-0">
                        <input class="form-check-input" type="checkbox" name="is_enabled" value="1"
                               id="hsEnabled" <?= (int)$section['is_enabled'] === 1 ? 'checked' : '' ?>>
                        <label class="form-check-label fw-semibold" for="hsEnabled">
                            <?= __('homepage.section_enabled', 'Enable Section') ?>
                        </label>
                    </div>
                    <span class="badge bg-secondary"><?= htmlspecialchars($type, ENT_QUOTES) ?></span>
                </div>
            </div>
        </div>

        <!-- ══════════════════════════════════════════════════════════════
             TOP BAR
        ═══════════════════════════════════════════════════════════════ -->
        <?php if ($type === 'top_bar'): ?>
        <div class="card shadow-sm mb-4">
            <div class="card-header fw-semibold bg-light">
                <i class="bi bi-bar-chart-steps me-2 text-primary"></i>
                <?= __('homepage.top_bar.settings', 'Top Bar Settings') ?>
            </div>
            <div class="card-body">
                <label class="form-label"><?= __('homepage.top_bar.messages', 'Messages (one per line)') ?></label>
                <textarea name="settings[messages]" class="form-control font-monospace" rows="6"
                ><?= htmlspecialchars(implode("\n", $settings['messages'] ?? []), ENT_QUOTES) ?></textarea>
            </div>
        </div>
        <?php endif; ?>

        <!-- ══════════════════════════════════════════════════════════════
             HERO / SLIDER
        ═══════════════════════════════════════════════════════════════ -->
        <?php if ($type === 'hero_slider'): ?>
        <div class="card shadow-sm mb-4">
            <div class="card-header fw-semibold bg-light">
                <i class="bi bi-images me-2 text-primary"></i>
                <?= __('homepage.hero.settings', 'Hero / Slider Slides') ?>
            </div>
            <div class="card-body p-3">

                <div id="hsSlidesList">
                    <?php foreach ($slides as $si => $slide): ?>
                    <div class="border rounded p-3 mb-3 hs-slide">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="fw-semibold small"><?= __('homepage.hero.slide','Slide') ?> #<?= $si + 1 ?></span>
                            <button type="button" class="btn btn-sm btn-outline-danger hs-rm-slide">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label"><?= __('homepage.hero.title','Title') ?></label>
                                <input type="text"
                                       name="settings[slides][<?= $si ?>][title]"
                                       value="<?= htmlspecialchars($slide['title'] ?? '', ENT_QUOTES) ?>"
                                       class="form-control">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><?= __('homepage.hero.image','Image') ?></label>
                                <div class="mb-3">
                                    <div class="hs-img-wrap mb-2"<?= empty($slide['image']) ? ' style="display:none"' : '' ?>>
                                        <img src="<?= htmlspecialchars($slide['image'] ?? '', ENT_QUOTES) ?>"
                                             class="hs-preview rounded"
                                             style="max-height:90px;border:1px solid #dee2e6;padding:3px;">
                                    </div>
                                    <input type="file"
                                           name="slides_images[<?= $si ?>]"
                                           class="form-control mb-2 hs-file"
                                           accept="image/*">
                                    <input type="text"
                                           name="settings[slides][<?= $si ?>][image]"
                                           value="<?= htmlspecialchars($slide['image'] ?? '', ENT_QUOTES) ?>"
                                           class="form-control hs-url"
                                           placeholder="<?= __('homepage.hero.image_url','Or image URL') ?>">
                                </div>
                            </div>
                            <div class="col-12">
                                <label class="form-label"><?= __('homepage.hero.subtitle','Subtitle') ?></label>
                                <textarea name="settings[slides][<?= $si ?>][subtitle]"
                                          class="form-control" rows="2"><?= htmlspecialchars($slide['subtitle'] ?? '', ENT_QUOTES) ?></textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><?= __('homepage.hero.button_text','Button Text') ?></label>
                                <input type="text"
                                       name="settings[slides][<?= $si ?>][button_text]"
                                       value="<?= htmlspecialchars($slide['button_text'] ?? '', ENT_QUOTES) ?>"
                                       class="form-control">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><?= __('homepage.hero.button_url','Button URL') ?></label>
                                <input type="text"
                                       name="settings[slides][<?= $si ?>][button_url]"
                                       value="<?= htmlspecialchars($slide['button_url'] ?? '', ENT_QUOTES) ?>"
                                       class="form-control">
                            </div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>

                <button type="button" class="btn btn-outline-primary btn-sm" id="hsAddSlide">
                    <i class="bi bi-plus-lg me-1"></i><?= __('homepage.hero.add_slide', 'Add Slide') ?>
                </button>

            </div>
        </div>
        <?php endif; ?>

        <!-- ══════════════════════════════════════════════════════════════
             PRODUCTS SECTION
        ═══════════════════════════════════════════════════════════════ -->
        <?php if ($type === 'products_section'): ?>
        <div class="card shadow-sm mb-4">
            <div class="card-header fw-semibold bg-light">
                <i class="bi bi-grid me-2 text-primary"></i>
                <?= __('homepage.products.settings', 'Products Section Settings') ?>
            </div>
            <div class="card-body">

                <div class="mb-3">
                    <label class="form-label"><?= __('homepage.products.title', 'Section Title') ?></label>
                    <input type="text" name="settings[title]"
                           value="<?= htmlspecialchars($settings['title'] ?? '', ENT_QUOTES) ?>"
                           class="form-control" required>
                </div>

                <div class="mb-3">
                    <label class="form-label"><?= __('homepage.products.subtitle', 'Section Subtitle') ?></label>
                    <input type="text" name="settings[subtitle]"
                           value="<?= htmlspecialchars($settings['subtitle'] ?? '', ENT_QUOTES) ?>"
                           class="form-control">
                </div>

                <div class="mb-3">
                    <label class="form-label"><?= __('homepage.products.source', 'Products Source') ?></label>
                    <select name="settings[source]" class="form-select" id="hsProdSource" required>
                        <option value="latest"   <?= ($settings['source'] ?? '') === 'latest'   ? 'selected' : '' ?>><?= __('homepage.products.source.latest',   'Latest Products') ?></option>
                        <option value="featured" <?= ($settings['source'] ?? '') === 'featured' ? 'selected' : '' ?>><?= __('homepage.products.source.featured', 'Featured Products') ?></option>
                        <option value="category" <?= ($settings['source'] ?? '') === 'category' ? 'selected' : '' ?>><?= __('homepage.products.source.category', 'From Category') ?></option>
                    </select>
                </div>

                <div class="mb-3" id="hsProdCategoryWrap">
                    <label class="form-label"><?= __('homepage.products.category', 'Category') ?></label>
                    <select name="settings[category_id]" class="form-select" id="hsProdCategorySelect">
                        <option value=""><?= __('homepage.products.category_optional', 'Select category') ?></option>
                        <?php foreach ($categories as $cat): ?>
                            <?php if (($cat['status'] ?? 'active') !== 'active') continue; ?>
                            <option value="<?= (int)$cat['id'] ?>"
                                <?= (int)($settings['category_id'] ?? 0) === (int)$cat['id'] ? 'selected' : '' ?>>
                                <?= htmlspecialchars($cat['name'], ENT_QUOTES) ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>

            </div>
        </div>
        <?php endif; ?>

        <!-- ══════════════════════════════════════════════════════════════
             ADS SECTION
        ═══════════════════════════════════════════════════════════════ -->
        <?php if ($type === 'ads_section'): ?>
        <div class="card shadow-sm mb-4">
            <div class="card-header fw-semibold bg-light">
                <i class="bi bi-megaphone me-2 text-primary"></i>
                <?= __('homepage.ads.settings', 'Ads Section Settings') ?>
            </div>
            <div class="card-body p-3">

                <!-- Ad #1 -->
                <div class="border rounded p-3 mb-3">
                    <div class="fw-semibold small mb-3"><?= __('homepage.ads.ad','Ad') ?> #1</div>
                    <?= hs_ad_fields_edit(0, $ad1) ?>
                </div>

                <!-- زر إضافة الإعلان الثاني -->
                <?php if (empty($ad2)): ?>
                <div id="hsAddAd2Wrap">
                    <button type="button" class="btn btn-outline-secondary btn-sm mb-3" id="hsAddAd2">
                        <i class="bi bi-plus-lg me-1"></i><?= __('homepage.ads.add_second', 'Add second ad') ?>
                    </button>
                </div>
                <?php endif; ?>

                <!-- Ad #2 -->
                <div id="hsAd2Block" <?= empty($ad2) ? 'hidden' : '' ?>>
                    <div class="border rounded p-3">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="fw-semibold small"><?= __('homepage.ads.ad','Ad') ?> #2</span>
                            <button type="button" class="btn btn-sm btn-outline-danger" id="hsRemoveAd2">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                        <?= hs_ad_fields_edit(1, $ad2) ?>
                    </div>
                </div>

            </div>
        </div>
        <?php endif; ?>

        <!-- ══════════════════════════════════════════════════════════════
             FAQ SECTION
        ═══════════════════════════════════════════════════════════════ -->
        <?php if ($type === 'faq_section'): ?>
        <div class="card shadow-sm mb-4">
            <div class="card-header fw-semibold bg-light">
                <i class="bi bi-question-circle me-2 text-primary"></i>
                <?= __('homepage.faq.settings', 'FAQ Settings') ?>
            </div>
            <div class="card-body">

                <div class="mb-3">
                    <label class="form-label"><?= __('homepage.faq.subtitle', 'Section Description') ?></label>
                    <input type="text" name="settings[subtitle]"
                           value="<?= htmlspecialchars($settings['subtitle'] ?? '', ENT_QUOTES) ?>"
                           class="form-control">
                </div>

                <div id="hsFaqList">
                    <?php foreach ($items as $qi => $item): ?>
                    <div class="border rounded p-3 mb-3 hs-faq">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="fw-semibold small"><?= __('homepage.faq.question','Question') ?> #<?= $qi + 1 ?></span>
                            <button type="button" class="btn btn-sm btn-outline-danger hs-rm-faq">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                        <div class="mb-3">
                            <label class="form-label"><?= __('homepage.faq.question','Question') ?></label>
                            <input type="text"
                                   name="settings[items][<?= $qi ?>][question]"
                                   value="<?= htmlspecialchars($item['question'] ?? '', ENT_QUOTES) ?>"
                                   class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label"><?= __('homepage.faq.answer','Answer') ?></label>
                            <textarea name="settings[items][<?= $qi ?>][answer]"
                                      class="form-control" rows="4"
                                      required><?= htmlspecialchars($item['answer'] ?? '', ENT_QUOTES) ?></textarea>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>

                <button type="button" class="btn btn-outline-primary btn-sm" id="hsAddFaq">
                    <i class="bi bi-plus-lg me-1"></i><?= __('homepage.faq.add_question', 'Add Question') ?>
                </button>

            </div>
        </div>
        <?php endif; ?>

        <!-- ══ Buttons ═══════════════════════════════════════════════════ -->
        <div class="d-flex gap-2 mt-2">
            <button type="submit" class="btn btn-primary px-4">
                <i class="bi bi-check-lg me-1"></i><?= __('common.save_changes', 'Save Changes') ?>
            </button>
            <a href="/admin/home-sections" class="btn btn-outline-secondary">
                <?= __('common.cancel', 'Cancel') ?>
            </a>
        </div>

    </form>
</div>

<?php
function hs_ad_fields_edit(int $i, array $ad): string {
    $headline   = htmlspecialchars($ad['headline'] ?? '', ENT_QUOTES);
    $image      = htmlspecialchars($ad['image'] ?? '', ENT_QUOTES);
    $animated   = htmlspecialchars(implode("\n", $ad['animated_texts'] ?? []), ENT_QUOTES);
    $btn_url    = htmlspecialchars($ad['button_url'] ?? '#', ENT_QUOTES);
    $has_img    = !empty($ad['image']);
    $img_url_ph = __('homepage.ads.image_url', 'Or image URL');
    return "
        <div class='mb-3'>
            <label class='form-label'>" . __('homepage.ads.headline','Headline') . "</label>
            <input type='text' name='settings[ads][{$i}][headline]' class='form-control' value='{$headline}'>
        </div>
        <div class='mb-3'>
            <label class='form-label'>" . __('homepage.ads.image','Image') . "</label>
            <div class='hs-img-wrap mb-2'" . ($has_img ? '' : " style='display:none'") . ">
                <img src='{$image}' class='hs-preview rounded' style='max-height:100px;border:1px solid #dee2e6;padding:3px;'>
            </div>
            <input type='file' name='ads_images[{$i}]' class='form-control mb-2 hs-file' accept='image/*'>
            <input type='text' name='settings[ads][{$i}][image]' class='form-control hs-url' value='{$image}' placeholder='{$img_url_ph}'>
        </div>
        <div class='mb-3'>
            <label class='form-label'>" . __('homepage.ads.animated_texts','Animated Texts (one per line)') . "</label>
            <textarea name='settings[ads][{$i}][animated_texts]' class='form-control' rows='3'>{$animated}</textarea>
        </div>
        <div class='mb-3'>
            <label class='form-label'>" . __('homepage.ads.button_url','Button URL') . "</label>
            <input type='text' name='settings[ads][{$i}][button_url]' class='form-control' value='{$btn_url}'>
        </div>
    ";
}
?>

<script>
(function () {
'use strict';

/* ══ 1. ضغط الصورة client-side ══════════════════════════════════════ */
function compressImage(file, cb) {
    var MAX = 4 * 1024 * 1024;
    if (file.size <= MAX) { cb(file); return; }
    var reader = new FileReader();
    reader.onload = function (e) {
        var img = new Image();
        img.onload = function () {
            var D = 1920, w = img.width, h = img.height;
            if (w > D || h > D) {
                if (w > h) { h = Math.round(h * D / w); w = D; }
                else       { w = Math.round(w * D / h); h = D; }
            }
            var c = document.createElement('canvas');
            c.width = w; c.height = h;
            c.getContext('2d').drawImage(img, 0, 0, w, h);
            (function tryQ(q) {
                c.toBlob(function (blob) {
                    if (!blob) { cb(file); return; }
                    if (blob.size > MAX && q > 0.4) { tryQ(+(q - 0.08).toFixed(2)); return; }
                    cb(new File([blob], file.name, { type: blob.type, lastModified: Date.now() }));
                }, 'image/jpeg', q);
            })(0.82);
        };
        img.src = e.target.result;
    };
    reader.readAsDataURL(file);
}

/* ══ 2. ربط المعاينة + الضغط ══════════════════════════════════════════
   التسلسل الثابت داخل .mb-3:
     .hs-img-wrap > img.hs-preview
     input.hs-file
     input.hs-url
══════════════════════════════════════════════════════════════════════ */
function bindFileInput(input) {
    if (input._hsBound) return;
    input._hsBound = true;

    var mb3     = input.closest('.mb-3');
    var wrap    = mb3 && mb3.querySelector('.hs-img-wrap');
    var preview = wrap && wrap.querySelector('.hs-preview');
    var urlInp  = mb3 && mb3.querySelector('.hs-url');

    function show(src) {
        if (!wrap || !preview) return;
        if (src) { preview.src = src; wrap.style.display = ''; }
        else     { wrap.style.display = 'none'; preview.src = ''; }
    }

    input.addEventListener('change', function () {
        var f = this.files && this.files[0];
        if (!f) { show(urlInp ? urlInp.value.trim() : ''); return; }
        if (urlInp) urlInp.value = '';
        compressImage(f, function (compressed) {
            if (compressed !== f) {
                var dt = new DataTransfer();
                dt.items.add(compressed);
                input.files = dt.files;
            }
            var r = new FileReader();
            r.onload = function (ev) { show(ev.target.result); };
            r.readAsDataURL(compressed);
        });
    });

    if (urlInp) {
        urlInp.addEventListener('input', function () {
            if (!input.files || !input.files[0]) show(this.value.trim());
        });
        if (urlInp.value.trim()) show(urlInp.value.trim());
    }
}

function bindAll(root) {
    (root || document).querySelectorAll('.hs-file').forEach(bindFileInput);
}

/* ══ 3. Hero: إضافة slides جديدة ════════════════════════════════════ */
var slideList  = document.getElementById('hsSlidesList');
var addSlideBtn = document.getElementById('hsAddSlide');

if (slideList && addSlideBtn) {
    var slideCount = slideList.querySelectorAll('.hs-slide').length;

    addSlideBtn.addEventListener('click', function () {
        var i = slideCount++;
        var div = document.createElement('div');
        div.innerHTML =
            '<div class="border rounded p-3 mb-3 hs-slide">' +
                '<div class="d-flex justify-content-between align-items-center mb-3">' +
                    '<span class="fw-semibold small"><?= __('homepage.hero.slide','Slide') ?> #' + (i + 1) + '</span>' +
                    '<button type="button" class="btn btn-sm btn-outline-danger hs-rm-slide"><i class="bi bi-trash"></i></button>' +
                '</div>' +
                '<div class="row g-3">' +
                    '<div class="col-md-6">' +
                        '<label class="form-label"><?= __('homepage.hero.title','Title') ?></label>' +
                        '<input type="text" name="settings[slides][' + i + '][title]" class="form-control">' +
                    '</div>' +
                    '<div class="col-md-6">' +
                        '<label class="form-label"><?= __('homepage.hero.image','Image') ?></label>' +
                        '<div class="mb-3">' +
                            '<div class="hs-img-wrap mb-2" style="display:none"><img src="" class="hs-preview rounded" style="max-height:90px;border:1px solid #dee2e6;padding:3px;"></div>' +
                            '<input type="file" name="slides_images[' + i + ']" class="form-control mb-2 hs-file" accept="image/*">' +
                            '<input type="text" name="settings[slides][' + i + '][image]" class="form-control hs-url" placeholder="<?= __('homepage.hero.image_url','Or image URL') ?>">' +
                        '</div>' +
                    '</div>' +
                    '<div class="col-12">' +
                        '<label class="form-label"><?= __('homepage.hero.subtitle','Subtitle') ?></label>' +
                        '<textarea name="settings[slides][' + i + '][subtitle]" class="form-control" rows="2"></textarea>' +
                    '</div>' +
                    '<div class="col-md-6">' +
                        '<label class="form-label"><?= __('homepage.hero.button_text','Button Text') ?></label>' +
                        '<input type="text" name="settings[slides][' + i + '][button_text]" class="form-control">' +
                    '</div>' +
                    '<div class="col-md-6">' +
                        '<label class="form-label"><?= __('homepage.hero.button_url','Button URL') ?></label>' +
                        '<input type="text" name="settings[slides][' + i + '][button_url]" class="form-control">' +
                    '</div>' +
                '</div>' +
            '</div>';
        var node = div.firstElementChild;
        slideList.appendChild(node);
        bindAll(node);
    });

    slideList.addEventListener('click', function (e) {
        var btn = e.target.closest('.hs-rm-slide');
        if (btn) btn.closest('.hs-slide').remove();
    });
}

/* ══ 4. Products: إظهار التصنيف ═════════════════════════════════════ */
var prodSource  = document.getElementById('hsProdSource');
var prodCatWrap = document.getElementById('hsProdCategoryWrap');
var prodCatSel  = document.getElementById('hsProdCategorySelect');

if (prodSource) {
    function toggleCat() {
        var isCat = prodSource.value === 'category';
        prodCatWrap.hidden = !isCat;
        if (isCat) { prodCatSel.setAttribute('required','required'); }
        else       { prodCatSel.removeAttribute('required'); prodCatSel.value = ''; }
    }
    prodSource.addEventListener('change', toggleCat);
    toggleCat();

    document.getElementById('hsEditForm').addEventListener('submit', function (e) {
        if (prodSource.value === 'category' && prodCatSel && !prodCatSel.value) {
            e.preventDefault();
            alert('<?= __('homepage.products.validation_category_required', 'Please select a category.') ?>');
        }
    });
}

/* ══ 5. Ads: إظهار/إخفاء الإعلان الثاني ════════════════════════════ */
var addAd2Btn  = document.getElementById('hsAddAd2');
var ad2Block   = document.getElementById('hsAd2Block');
var addAd2Wrap = document.getElementById('hsAddAd2Wrap');
var rmAd2      = document.getElementById('hsRemoveAd2');

if (addAd2Btn && ad2Block) {
    addAd2Btn.addEventListener('click', function () {
        ad2Block.hidden = false;
        addAd2Wrap.hidden = true;
        bindAll(ad2Block);
    });
}
if (rmAd2 && ad2Block) {
    rmAd2.addEventListener('click', function () {
        ad2Block.hidden = true;
        if (addAd2Wrap) addAd2Wrap.hidden = false;
        ad2Block.querySelectorAll('input[type=text], textarea').forEach(function(el){ el.value = ''; });
        ad2Block.querySelectorAll('input[type=file]').forEach(function(el){ el.value = ''; });
        ad2Block.querySelectorAll('.hs-img-wrap').forEach(function(el){ el.style.display = 'none'; });
    });
}

/* ══ 6. FAQ: إضافة + حذف ════════════════════════════════════════════ */
var faqList  = document.getElementById('hsFaqList');
var addFaqBtn = document.getElementById('hsAddFaq');

if (faqList && addFaqBtn) {
    var faqCount = faqList.querySelectorAll('.hs-faq').length;

    addFaqBtn.addEventListener('click', function () {
        var i = faqCount++;
        var div = document.createElement('div');
        div.innerHTML =
            '<div class="border rounded p-3 mb-3 hs-faq">' +
                '<div class="d-flex justify-content-between align-items-center mb-3">' +
                    '<span class="fw-semibold small"><?= __('homepage.faq.question','Question') ?> #' + (i + 1) + '</span>' +
                    '<button type="button" class="btn btn-sm btn-outline-danger hs-rm-faq"><i class="bi bi-trash"></i></button>' +
                '</div>' +
                '<div class="mb-3">' +
                    '<label class="form-label"><?= __('homepage.faq.question','Question') ?></label>' +
                    '<input type="text" name="settings[items][' + i + '][question]" class="form-control" required>' +
                '</div>' +
                '<div class="mb-3">' +
                    '<label class="form-label"><?= __('homepage.faq.answer','Answer') ?></label>' +
                    '<textarea name="settings[items][' + i + '][answer]" class="form-control" rows="4" required></textarea>' +
                '</div>' +
            '</div>';
        faqList.appendChild(div.firstElementChild);
    });

    faqList.addEventListener('click', function (e) {
        var btn = e.target.closest('.hs-rm-faq');
        if (btn) btn.closest('.hs-faq').remove();
    });
}

/* ══ 7. ربط كل file inputs الموجودة الآن في الصفحة ════════════════ */
bindAll();

})();
</script>

<?php include __DIR__ . '/../footer.php'; ?>
