<?php
/**
 * ITSWEBER CMS – Page Builder: Section Card (AJAX Partial)
 *
 * Renders a single draggable section card in the page builder.
 * Loaded inline during page render or returned via AJAX after adding a section.
 *
 * @author    Benny Weber
 * @copyright ITSWEBER, www.itsweber.de
 *
 * @var array            $section   DB row (id, page_context, section_type, instance_label, content, is_active, sort_order, data)
 * @var AbstractSection|null $reg   AbstractSection instance (null for legacy plugins)
 * @var \App\Core\Csrf   $csrf     CSRF instance
 * @var bool             $expanded  Whether the form body should be visible
 * @var array            $data      Decoded JSON content array
 */

$sectionId   = (int) $section['id'];
$sectionType = e($section['section_type'] ?? '');
$typeLabel   = $reg ? e($reg::label()) : e(ucfirst(str_replace('_', ' ', $sectionType)));
$instanceLbl = e($section['instance_label'] ?? '');
$isActive    = !empty($section['is_active']);
$iconSvg     = $reg ? $reg::iconSvg() : '';
?>

<div class="pb-section-card" data-section-id="<?= $sectionId ?>" data-section-type="<?= $sectionType ?>">

    <!-- ── Collapsed header bar ──────────────────────────────── -->
    <div class="pb-section-header">
        <div class="pb-section-handle" title="<?= __('admin.pagebuilder.drag_to_reorder') ?>">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                <line x1="4" y1="6" x2="20" y2="6"/>
                <line x1="4" y1="10" x2="20" y2="10"/>
                <line x1="4" y1="14" x2="20" y2="14"/>
                <line x1="4" y1="18" x2="20" y2="18"/>
            </svg>
        </div>

        <div class="pb-section-icon">
            <?php if ($iconSvg): ?>
                <?= $iconSvg ?>
            <?php else: ?>
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5">
                    <rect x="3" y="3" width="18" height="18" rx="2"/>
                    <line x1="7" y1="8" x2="17" y2="8"/>
                    <line x1="7" y1="12" x2="13" y2="12"/>
                </svg>
            <?php endif; ?>
        </div>

        <div class="pb-section-info">
            <span class="pb-section-type-label"><?= $typeLabel ?></span>
            <?php if ($instanceLbl): ?>
                <span class="pb-section-instance-label"><?= $instanceLbl ?></span>
            <?php endif; ?>
        </div>

        <div class="pb-section-status">
            <span class="pb-status-dot <?= $isActive ? 'pb-status-dot--active' : 'pb-status-dot--inactive' ?>"
                  title="<?= $isActive ? __('admin.pagebuilder.active') : __('admin.pagebuilder.inactive') ?>"></span>
        </div>

        <div class="pb-section-actions">
            <!-- Toggle active/inactive -->
            <button type="button"
                    class="pb-btn pb-btn-toggle"
                    data-action="toggle"
                    data-section-id="<?= $sectionId ?>"
                    title="<?= $isActive ? __('admin.pagebuilder.deactivate') : __('admin.pagebuilder.activate') ?>">
                <?php if ($isActive): ?>
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/>
                    <circle cx="12" cy="12" r="3"/>
                </svg>
                <?php else: ?>
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94"/>
                    <path d="M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19"/>
                    <line x1="1" y1="1" x2="23" y2="23"/>
                </svg>
                <?php endif; ?>
            </button>

            <!-- Preview -->
            <button type="button"
                    class="pb-btn pb-btn-preview"
                    data-action="preview"
                    data-section-id="<?= $sectionId ?>"
                    title="<?= __('admin.pagebuilder.preview_section') ?>">
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polygon points="5 3 19 12 5 21 5 3"/>
                </svg>
            </button>

            <!-- Revisions -->
            <button type="button"
                    class="pb-btn pb-btn-revisions"
                    data-action="revisions"
                    data-section-id="<?= $sectionId ?>"
                    title="<?= __('admin.pagebuilder.revisions') ?>">
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="1 4 1 10 7 10"/>
                    <path d="M3.51 15a9 9 0 102.13-9.36L1 10"/>
                </svg>
            </button>

            <!-- Export -->
            <button type="button"
                    class="pb-btn pb-btn-export"
                    data-action="export"
                    data-section-id="<?= $sectionId ?>"
                    title="<?= __('admin.pagebuilder.export_section') ?>">
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
                    <polyline points="7 10 12 15 17 10"/>
                    <line x1="12" y1="15" x2="12" y2="3"/>
                </svg>
            </button>

            <!-- Duplicate -->
            <button type="button"
                    class="pb-btn pb-btn-duplicate"
                    data-action="duplicate"
                    data-section-id="<?= $sectionId ?>"
                    title="<?= __('admin.pagebuilder.duplicate') ?>">
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="9" y="9" width="13" height="13" rx="2"/>
                    <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
                </svg>
            </button>

            <!-- Expand / Edit -->
            <button type="button"
                    class="pb-btn pb-btn-expand"
                    data-action="expand"
                    data-section-id="<?= $sectionId ?>"
                    title="<?= __('admin.pagebuilder.edit') ?>">
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
                    <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
                </svg>
            </button>

            <!-- Delete -->
            <button type="button"
                    class="pb-btn pb-btn-delete"
                    data-action="delete"
                    data-section-id="<?= $sectionId ?>"
                    title="<?= __('admin.pagebuilder.remove') ?>">
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="3 6 5 6 21 6"/>
                    <path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/>
                    <path d="M10 11v6"/>
                    <path d="M14 11v6"/>
                    <path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2"/>
                </svg>
            </button>
        </div>
    </div>

    <!-- ── Expandable form body ──────────────────────────────── -->
    <div class="pb-section-body" data-loaded="<?= $expanded ? '1' : '0' ?>">
        <form class="pb-section-form" data-section-id="<?= $sectionId ?>">
            <?= $csrf->field() ?>
            <input type="hidden" name="section_type" value="<?= $sectionType ?>">

            <div class="pb-form-group">
                <label for="instance_label_<?= $sectionId ?>"><?= __('admin.pagebuilder.instance_label') ?></label>
                <input type="text"
                       id="instance_label_<?= $sectionId ?>"
                       name="instance_label"
                       value="<?= $instanceLbl ?>"
                       placeholder="<?= __('admin.pagebuilder.instance_label_placeholder') ?>">
                <small class="form-hint"><?= __('admin.pagebuilder.instance_label_hint') ?></small>
            </div>

            <div class="pb-form-content">
                <?php if ($expanded && $reg): ?>
                    <?php
                    // Pre-render section-specific form for expanded cards
                    $formView = $reg->adminFormView();
                    $formPath = dirname(__DIR__) . '/' . $formView . '.php';
                    if (is_file($formPath)):
                        include $formPath;
                    endif;
                    ?>
                <?php endif; ?>
                <!-- Section-specific form loaded here via AJAX on first expand -->
            </div>

            <div class="pb-form-actions">
                <button type="submit" class="btn btn-primary">
                    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;">
                        <path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/>
                        <polyline points="17 21 17 13 7 13 7 21"/>
                        <polyline points="7 3 7 8 15 8"/>
                    </svg>
                    <?= __('admin.pagebuilder.save') ?>
                </button>
                <button type="button" class="btn btn-secondary pb-btn-collapse" data-section-id="<?= $sectionId ?>">
                    <?= __('admin.pagebuilder.cancel') ?>
                </button>
            </div>
        </form>
    </div>

</div>
