<?php

declare(strict_types=1);

?>

<div class="col-xl-7 col-lg-6">

    <div class="designer-column-sticky">

        <div
            id="sortableSections"
            class="designer-canvas">

            <?php if (empty($sections)): ?>

                <div class="empty-canvas">

                    <i class="bi bi-layout-text-window-reverse"></i>

                    <h5>No Sections Yet</h5>

                    <p>

                        Click
                        <strong>Add Section</strong>
                        to begin building your form.

                    </p>

                </div>

            <?php else: ?>



                <?php foreach ($sections as $section): ?>

                    <?php

                    $sectionId = (int) $section['id'];

                    $sectionFields =
                        $fieldsBySection[$sectionId]
                        ?? [];

                    ?>

                    <div
    class="designer-section sortable-section"
    data-section-id="<?= $sectionId ?>">

                        <div class="designer-section-header section-toolbar">

                            <div>

                                <h5 class="designer-section-title">

                                    <?= htmlspecialchars(
                                        (string) (
                                            $section['section_title']
                                            ?? 'Untitled Section'
                                        ),
                                        ENT_QUOTES,
                                        'UTF-8'
                                    ) ?>

                                </h5>

                                <?php if (!empty($section['section_description'])): ?>

                                    <div
                                        class="designer-section-description">

                                        <?= nl2br(htmlspecialchars(
                                            (string) $section['section_description'],
                                            ENT_QUOTES,
                                            'UTF-8'
                                        )) ?>

                                    </div>

                                <?php endif; ?>

                            </div>

                            <div
                                class="designer-section-actions">

 <button
    type="button"
    class="btn btn-light btn-sm edit-section-btn"
    data-section-id="<?= $sectionId ?>"
    data-title="<?= htmlspecialchars((string)$section['section_title'], ENT_QUOTES, 'UTF-8') ?>"
    data-description="<?= htmlspecialchars((string)($section['section_description'] ?? ''), ENT_QUOTES, 'UTF-8') ?>">

    <i class="bi bi-pencil"></i>

</button>

<form
    method="POST"
    action="/public/dynamic-forms/sections/deactivate"
    class="delete-section-form d-inline">

    <input
        type="hidden"
        name="id"
        value="<?= $sectionId ?>">

    <input
        type="hidden"
        name="form_id"
        value="<?= $formId ?>">

    <button
        type="submit"
        class="btn btn-light btn-sm">

        <i class="bi bi-trash"></i>

    </button>

</form>

                            </div>

                        </div>

<div
    class="row g-3 designer-fields sortable-fields"
    data-section-id="<?= $sectionId ?>">

                            <?php if (empty($sectionFields)): ?>

                                <div class="empty-section">

                                    Drop fields here

                                </div>

                            <?php else: ?>

                                <?php foreach ($sectionFields as $field): ?>

                                    <?php

                                    require __DIR__
                                        . '/field-card.php';

                                    ?>

                                <?php endforeach; ?>

                            <?php endif; ?>

                        </div>

                    </div>

                <?php endforeach; ?>

                       <?php endif; ?>

        </div>

    </div>

</div>