<?php

declare(strict_types=1);

$form = $form ?? [];
$sections = $sections ?? [];
$fields = $fields ?? [];
$fieldOptions = $fieldOptions ?? [];

$formId = (int) ($form['id'] ?? 0);
$formStatus = (string) ($form['status'] ?? 'draft');

$fieldsBySection = [];

foreach ($fields as $field) {

    $sectionId = (int) ($field['section_id'] ?? 0);

    $fieldsBySection[$sectionId][] = $field;
}

ob_start();

require __DIR__ . '/partials/toolbar.php';
?>

<link
    rel="stylesheet"
    href="/public/assets/designer/designer.css">

<div class="container-fluid py-4 form-designer-page">

    <div class="row g-4">

        <?php require __DIR__.'/partials/toolbox.php'; ?>

        <?php require __DIR__.'/partials/canvas.php'; ?>

        <?php require __DIR__.'/partials/properties.php'; ?>

    </div>

</div>

<?php

require __DIR__.'/partials/modals.php';

?>

<script>

window.dynamicFieldOptions =
<?= json_encode(
    $fieldOptions,
    JSON_UNESCAPED_UNICODE |
    JSON_UNESCAPED_SLASHES
); ?>;

window.formDesigner = {

    formId: <?= $formId ?>

};

</script>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>

<script src="/public/assets/designer/designer.js?v=<?= filemtime(PUBLIC_PATH . '/assets/designer/designer.js') ?>"></script>
<?php

$content = ob_get_clean();

$title = 'Form Designer';

include APP_PATH .
'/Modules/Administration/Views/layouts/admin.php';