<?php
/**
 * ITSWEBER CMS – Page Builder Admin Form: Topic Cards
 * Loaded via AJAX into section cards.
 *
 * @author  Benny Weber
 * @copyright ITSWEBER, www.itsweber.de
 *
 * @var array $data    Decoded JSON content
 * @var array $section DB row (id, section_type, instance_label, ...)
 */

$sectionId = (int) $section['id'];
$items     = $data['items'] ?? [['icon' => '', 'title' => '', 'text' => '', 'url' => '']];
?>

<?php admin_field('text', 'title', __('admin.section.heading'), $data['title'] ?? '', [
    'placeholder' => __('admin.section.topic_ph_title'),
]) ?>

<?php admin_field('text', 'subtitle', __('admin.section.subtitle'), $data['subtitle'] ?? '', [
    'placeholder' => __('admin.section.topic_ph_subtitle'),
]) ?>

<div class="form-group">
    <label class="form-label"><?= __('admin.section.items') ?></label>
    <div id="tc-items-<?= $sectionId ?>" class="section-items-sortable">
        <?php foreach ($items as $idx => $tci): ?>
        <?php admin_item_card_open($idx) ?>
            <div class="form-group">
                <label class="form-label"><?= __('admin.section.icon_emoji') ?></label>
                <input type="text" name="tc_icon[]" class="form-control" value="<?= e($tci['icon'] ?? '') ?>" placeholder="<?= __('admin.section.icon_emoji') ?>" style="width:80px;">
            </div>
            <div class="form-group">
                <label class="form-label"><?= __('admin.section.title') ?></label>
                <input type="text" name="tc_title[]" class="form-control" value="<?= e($tci['title'] ?? '') ?>" placeholder="<?= __('admin.section.title') ?>">
            </div>
            <div class="form-group full-width">
                <label class="form-label"><?= __('admin.section.description') ?></label>
                <input type="text" name="tc_text[]" class="form-control" value="<?= e($tci['text'] ?? '') ?>" placeholder="<?= __('admin.section.description') ?>">
            </div>
            <div class="form-group full-width">
                <label class="form-label"><?= __('admin.section.link_url') ?></label>
                <input type="text" name="tc_url[]" class="form-control" value="<?= e($tci['url'] ?? '') ?>" placeholder="<?= __('admin.section.link_url') ?>">
            </div>
        <?php admin_item_card_close() ?>
        <?php endforeach; ?>
    </div>
    <button type="button" class="btn btn-sm btn-secondary" id="tc-add-<?= $sectionId ?>" style="margin-top:var(--space-xs);"><?= __('admin.section.add_item') ?></button>
    <small class="form-hint"><?= __('admin.section.topic_hint_items') ?></small>
</div>

<script>
(function() {
    var sId = <?= $sectionId ?>;
    var container = document.getElementById('tc-items-' + sId);
    var addBtn = document.getElementById('tc-add-' + sId);
    if (!container || !addBtn) return;

    addBtn.addEventListener('click', function() {
        if (container.querySelectorAll('.admin-item-card').length >= 12) return;
        var count = container.querySelectorAll('.admin-item-card').length;
        var card = document.createElement('div');
        card.className = 'admin-item-card section-item-sortable';
        card.innerHTML =
            '<div class="admin-item-card-header">' +
                '<div class="item-move-buttons"><button type="button" class="btn btn-xs item-move-up">&#9650;</button><button type="button" class="btn btn-xs item-move-down">&#9660;</button></div>' +
                '<strong class="admin-item-card-label">#' + (count + 1) + '</strong>' +
                '<button type="button" class="btn btn-xs btn-danger admin-item-remove">&#10005; <?= __('admin.section.remove_item') ?></button>' +
            '</div>' +
            '<div class="admin-item-card-body">' +
                '<div class="form-group"><label class="form-label"><?= __('admin.section.icon_emoji') ?></label><input type="text" name="tc_icon[]" class="form-control" placeholder="<?= __('admin.section.icon_emoji') ?>" style="width:80px;"></div>' +
                '<div class="form-group"><label class="form-label"><?= __('admin.section.title') ?></label><input type="text" name="tc_title[]" class="form-control" placeholder="<?= __('admin.section.title') ?>"></div>' +
                '<div class="form-group full-width"><label class="form-label"><?= __('admin.section.description') ?></label><input type="text" name="tc_text[]" class="form-control" placeholder="<?= __('admin.section.description') ?>"></div>' +
                '<div class="form-group full-width"><label class="form-label"><?= __('admin.section.link_url') ?></label><input type="text" name="tc_url[]" class="form-control" placeholder="<?= __('admin.section.link_url') ?>"></div>' +
            '</div>';
        container.appendChild(card);
        attachItemHandlers(card);
    });

    container.querySelectorAll('.admin-item-card').forEach(attachItemHandlers);

    function attachItemHandlers(item) {
        var up = item.querySelector('.item-move-up'), down = item.querySelector('.item-move-down'), rm = item.querySelector('.admin-item-remove');
        if (up) up.addEventListener('click', function(e) { e.preventDefault(); var p = item.previousElementSibling; if (p && p.classList.contains('admin-item-card')) container.insertBefore(item, p); });
        if (down) down.addEventListener('click', function(e) { e.preventDefault(); var n = item.nextElementSibling; if (n && n.classList.contains('admin-item-card')) container.insertBefore(n, item); });
        if (rm) rm.addEventListener('click', function(e) { e.preventDefault(); item.remove(); });
    }
})();
</script>

<?php admin_section_separator() ?>

<?php admin_field_grid_open(4) ?>
    <?php admin_color_scheme_field($data['color_scheme'] ?? '', true) ?>
    <?php render_section_text_color_field($data) ?>
    <?php admin_field('select', 'text_align', __('admin.section.text_align'), $data['text_align'] ?? '', [
        'options' => ['' => __('admin.section.align_default'), 'left' => __('admin.section.align_left')],
        'wrap_style' => 'margin:0;',
    ]) ?>
    <?php admin_field('select', 'card_style', __('admin.section.card_style'), $data['card_style'] ?? '', [
        'options' => ['' => __('admin.section.card_default'), 'bordered' => __('admin.section.card_bordered'), 'flat' => __('admin.section.card_flat')],
        'wrap_style' => 'margin:0;',
    ]) ?>
    <?php admin_field('select', 'columns', __('admin.section.columns'), $data['columns'] ?? '', [
        'options' => ['' => __('admin.section.columns_auto'), '2' => __('admin.section.columns_2'), '3' => __('admin.section.columns_3'), '4' => __('admin.section.columns_4')],
        'wrap_style' => 'margin:0;',
    ]) ?>
<?php admin_field_grid_close() ?>
