<?php

declare(strict_types=1);

ob_start();

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

$formId = (int) (
    $form['id']
    ?? 0
);

$formName = (string) (
    $form['form_name']
    ?? 'Dynamic Form'
);

$formDescription = (string) (
    $form['description']
    ?? ''
);

?>

<style>
.form-preview-page {
    max-width: 1100px;
    margin: 0 auto;
}

.preview-header {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
}

.preview-header-accent {
    height: 6px;
    background: linear-gradient(
        90deg,
        #0d6efd,
        #6610f2
    );
}

.preview-section {
    border: 0;
    border-radius: 16px;
    overflow: hidden;
}

.preview-section-header {
    background: #ffffff;
    border-bottom: 1px solid #eef0f3;
    padding: 20px 24px;
}

.preview-section-body {
    padding: 24px;
}

.preview-field {
    height: 100%;
}

.preview-field-label {
    font-weight: 600;
    color: #212529;
    margin-bottom: 8px;
}

.preview-help-text {
    font-size: 0.82rem;
    color: #6c757d;
    margin-top: 6px;
}

.preview-type-badge {
    font-size: 0.72rem;
    font-weight: 600;
}

.preview-empty {
    padding: 50px 20px;
    text-align: center;
}

.preview-empty-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f3f5;
    font-size: 1.8rem;
    margin-bottom: 16px;
}

.preview-toolbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(
        248,
        249,
        250,
        0.95
    );
    backdrop-filter: blur(8px);
    padding: 12px 0;
}

.form-check-label {
    cursor: pointer;
}

@media (
    max-width: 767.98px
) {
    .preview-section-body {
        padding: 18px;
    }

    .preview-section-header {
        padding: 18px;
    }
}
</style>


<div class="form-preview-page">

    <!-- =========================================================
         TOOLBAR
    ========================================================== -->

    <div class="preview-toolbar mb-3">

        <div
            class="d-flex
                   flex-wrap
                   justify-content-between
                   align-items-center
                   gap-2">

            <div>

                <span
                    class="badge
                           bg-primary-subtle
                           text-primary
                           preview-type-badge">

                    <i class="bi bi-eye me-1"></i>
                    Preview Mode

                </span>

            </div>


            <div class="d-flex gap-2">

                <a
                    href="/public/dynamic-forms/designer?id=<?= $formId ?>"
                    class="btn btn-outline-secondary btn-sm">

                    <i class="bi bi-arrow-left me-1"></i>
                    Back to Designer

                </a>


                <button
                    type="button"
                    class="btn btn-outline-dark btn-sm"
                    onclick="window.print()">

                    <i class="bi bi-printer me-1"></i>
                    Print

                </button>

            </div>

        </div>

    </div>


    <!-- =========================================================
         FORM HEADER
    ========================================================== -->

    <div class="card shadow-sm preview-header mb-4">

        <div class="preview-header-accent"></div>


        <div class="card-body p-4 p-lg-5">

            <div
                class="d-flex
                       flex-wrap
                       justify-content-between
                       align-items-start
                       gap-3">

                <div>

                    <div
                        class="text-uppercase
                               text-primary
                               small
                               fw-semibold
                               mb-2">

                        Dynamic Form

                    </div>


                    <h2 class="mb-2">

                        <?= htmlspecialchars(
                            $formName,
                            ENT_QUOTES,
                            'UTF-8'
                        ) ?>

                    </h2>


                    <?php if (
                        $formDescription !== ''
                    ): ?>

                        <p
                            class="text-muted
                                   mb-0
                                   fs-6">

                            <?= nl2br(
                                htmlspecialchars(
                                    $formDescription,
                                    ENT_QUOTES,
                                    'UTF-8'
                                )
                            ) ?>

                        </p>

                    <?php endif; ?>

                </div>


                <div>

                    <?php
                    $status = strtolower(
                        (string) (
                            $form['status']
                            ?? 'draft'
                        )
                    );
                    ?>


                    <?php if (
                        $status === 'published'
                    ): ?>

                        <span
                            class="badge
                                   bg-success-subtle
                                   text-success">

                            Published

                        </span>

                    <?php elseif (
                        $status === 'archived'
                    ): ?>

                        <span
                            class="badge
                                   bg-secondary-subtle
                                   text-secondary">

                            Archived

                        </span>

                    <?php else: ?>

                        <span
                            class="badge
                                   bg-warning-subtle
                                   text-warning-emphasis">

                            Draft

                        </span>

                    <?php endif; ?>

                </div>

            </div>

        </div>

    </div>


    <!-- =========================================================
         FORM BODY
    ========================================================== -->

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

        <div
            class="card
                   shadow-sm
                   border-0">

            <div class="preview-empty">

                <div class="preview-empty-icon">

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

                </div>


                <h5>
                    No sections available
                </h5>


                <p class="text-muted mb-0">

                    This form does not contain any
                    sections yet.

                </p>

            </div>

        </div>

    <?php else: ?>


        <form
            method="post"
            action="#"
            enctype="multipart/form-data"
            id="dynamicPreviewForm"
            onsubmit="return false;">


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


                <?php

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

                $sectionFields = array_values(
                    array_filter(
                        $fields,
                        static function (
                            array $field
                        ) use (
                            $sectionId
                        ): bool {
                            return (int) (
                                $field['section_id']
                                ?? 0
                            ) === $sectionId;
                        }
                    )
                );

                ?>


                <div
                    class="card
                           shadow-sm
                           preview-section
                           mb-4">


                    <!-- SECTION HEADER -->

                    <div class="preview-section-header">

                        <div
                            class="d-flex
                                   align-items-start
                                   gap-3">

                            <div
                                class="rounded-3
                                       bg-primary-subtle
                                       text-primary
                                       p-2">

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

                            </div>


                            <div>

                                <h5 class="mb-1">

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

                                </h5>


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

                                    <div
                                        class="text-muted
                                               small">

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

                                    </div>

                                <?php endif; ?>

                            </div>

                        </div>

                    </div>


                    <!-- SECTION BODY -->

                    <div class="preview-section-body">


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

                            <div
                                class="text-center
                                       text-muted
                                       py-4">

                                <i
                                    class="bi
                                           bi-input-cursor-text
                                           fs-3
                                           d-block
                                           mb-2"></i>

                                No fields available in this
                                section.

                            </div>


                        <?php else: ?>


                            <div class="row g-4">


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


                                    <?php

                                    $fieldId = (int) (
                                        $field['id']
                                        ?? 0
                                    );

                                    $fieldType = strtolower(
                                        (string) (
                                            $field['field_type']
                                            ?? 'text'
                                        )
                                    );

                                    $fieldName = (string) (
                                        $field['field_name']
                                        ?? (
                                            'field_'
                                            . $fieldId
                                        )
                                    );

                                    $fieldLabel = (string) (
                                        $field['field_label']
                                        ?? 'Field'
                                    );

                                    $placeholder = (string) (
                                        $field['placeholder']
                                        ?? ''
                                    );

                                    $helpText = (string) (
                                        $field['help_text']
                                        ?? ''
                                    );

                                    $defaultValue = (string) (
                                        $field['default_value']
                                        ?? ''
                                    );

                                    $required = (int) (
                                        $field['is_required']
                                        ?? 0
                                    ) === 1;

                                    $columnWidth = (int) (
                                        $field['column_width']
                                        ?? 12
                                    );

                                    $allowedWidths = [
                                        3,
                                        4,
                                        6,
                                        8,
                                        9,
                                        12
                                    ];

                                    if (
                                        !in_array(
                                            $columnWidth,
                                            $allowedWidths,
                                            true
                                        )
                                    ) {
                                        $columnWidth = 12;
                                    }

                                    $options =
                                        $fieldOptions[
                                            $fieldId
                                        ]
                                        ?? [];

                                    ?>


                                    <div
                                        class="col-12
                                               col-lg-<?= $columnWidth ?>">


                                        <div class="preview-field">


                                            <!-- FIELD LABEL -->

                                            <label
                                                class="form-label
                                                       preview-field-label">

                                                <?= htmlspecialchars(
                                                    $fieldLabel,
                                                    ENT_QUOTES,
                                                    'UTF-8'
                                                ) ?>


                                                <?php if (
                                                    $required
                                                ): ?>

                                                    <span
                                                        class="text-danger">

                                                        *

                                                    </span>

                                                <?php endif; ?>

                                            </label>


                                            <!-- =================================================
                                                 TEXT
                                            ================================================== -->

                                            <?php if (
                                                $fieldType === 'text'
                                            ): ?>

                                                <input
                                                    type="text"
                                                    name="<?= htmlspecialchars(
                                                        $fieldName,
                                                        ENT_QUOTES,
                                                        'UTF-8'
                                                    ) ?>"
                                                    class="form-control"
                                                    value="<?= htmlspecialchars(
                                                        $defaultValue,
                                                        ENT_QUOTES,
                                                        'UTF-8'
                                                    ) ?>"
                                                    placeholder="<?= htmlspecialchars(
                                                        $placeholder,
                                                        ENT_QUOTES,
                                                        'UTF-8'
                                                    ) ?>"
                                                    <?= $required
                                                        ? 'required'
                                                        : '' ?>>


                                            <!-- =================================================
                                                 TEXTAREA
                                            ================================================== -->

                                            <?php elseif (
                                                $fieldType === 'textarea'
                                            ): ?>

                                                <textarea
                                                    name="<?= htmlspecialchars(
                                                        $fieldName,
                                                        ENT_QUOTES,
                                                        'UTF-8'
                                                    ) ?>"
                                                    class="form-control"
                                                    rows="4"
                                                    placeholder="<?= htmlspecialchars(
                                                        $placeholder,
                                                        ENT_QUOTES,
                                                        'UTF-8'
                                                    ) ?>"
                                                    <?= $required
                                                        ? 'required'
                                                        : '' ?>><?= htmlspecialchars(
                                                            $defaultValue,
                                                            ENT_QUOTES,
                                                            'UTF-8'
                                                        ) ?></textarea>


                                            <!-- =================================================
                                                 NUMBER
                                            ================================================== -->

                                            <?php elseif (
                                                $fieldType === 'number'
                                            ): ?>

                                                <input
                                                    type="number"
                                                    name="<?= htmlspecialchars(
                                                        $fieldName,
                                                        ENT_QUOTES,
                                                        'UTF-8'
                                                    ) ?>"
                                                    class="form-control"
                                                    value="<?= htmlspecialchars(
                                                        $defaultValue,
                                                        ENT_QUOTES,
                                                        'UTF-8'
                                                    ) ?>"
                                                    placeholder="<?= htmlspecialchars(
                                                        $placeholder,
                                                        ENT_QUOTES,
                                                        'UTF-8'
                                                    ) ?>"
                                                    <?= $required
                                                        ? 'required'
                                                        : '' ?>>


                                            <!-- =================================================
                                                 DATE
                                            ================================================== -->

                                            <?php elseif (
                                                $fieldType === 'date'
                                            ): ?>

                                                <input
                                                    type="date"
                                                    name="<?= htmlspecialchars(
                                                        $fieldName,
                                                        ENT_QUOTES,
                                                        'UTF-8'
                                                    ) ?>"
                                                    class="form-control"
                                                    value="<?= htmlspecialchars(
                                                        $defaultValue,
                                                        ENT_QUOTES,
                                                        'UTF-8'
                                                    ) ?>"
                                                    <?= $required
                                                        ? 'required'
                                                        : '' ?>>


                                            <!-- =================================================
                                                 TIME
                                            ================================================== -->

                                            <?php elseif (
                                                $fieldType === 'time'
                                            ): ?>

                                                <input
                                                    type="time"
                                                    name="<?= htmlspecialchars(
                                                        $fieldName,
                                                        ENT_QUOTES,
                                                        'UTF-8'
                                                    ) ?>"
                                                    class="form-control"
                                                    value="<?= htmlspecialchars(
                                                        $defaultValue,
                                                        ENT_QUOTES,
                                                        'UTF-8'
                                                    ) ?>"
                                                    <?= $required
                                                        ? 'required'
                                                        : '' ?>>


                                            <!-- =================================================
                                                 EMAIL
                                            ================================================== -->

                                            <?php elseif (
                                                $fieldType === 'email'
                                            ): ?>

                                                <input
                                                    type="email"
                                                    name="<?= htmlspecialchars(
                                                        $fieldName,
                                                        ENT_QUOTES,
                                                        'UTF-8'
                                                    ) ?>"
                                                    class="form-control"
                                                    value="<?= htmlspecialchars(
                                                        $defaultValue,
                                                        ENT_QUOTES,
                                                        'UTF-8'
                                                    ) ?>"
                                                    placeholder="<?= htmlspecialchars(
                                                        $placeholder,
                                                        ENT_QUOTES,
                                                        'UTF-8'
                                                    ) ?>"
                                                    <?= $required
                                                        ? 'required'
                                                        : '' ?>>


                                            <!-- =================================================
                                                 PHONE
                                            ================================================== -->

                                            <?php elseif (
                                                $fieldType === 'phone'
                                            ): ?>

                                                <input
                                                    type="tel"
                                                    name="<?= htmlspecialchars(
                                                        $fieldName,
                                                        ENT_QUOTES,
                                                        'UTF-8'
                                                    ) ?>"
                                                    class="form-control"
                                                    value="<?= htmlspecialchars(
                                                        $defaultValue,
                                                        ENT_QUOTES,
                                                        'UTF-8'
                                                    ) ?>"
                                                    placeholder="<?= htmlspecialchars(
                                                        $placeholder,
                                                        ENT_QUOTES,
                                                        'UTF-8'
                                                    ) ?>"
                                                    <?= $required
                                                        ? 'required'
                                                        : '' ?>>


                                            <!-- =================================================
                                                 SELECT
                                            ================================================== -->

                                            <?php elseif (
                                                $fieldType === 'select'
                                            ): ?>

                                                <select
                                                    name="<?= htmlspecialchars(
                                                        $fieldName,
                                                        ENT_QUOTES,
                                                        'UTF-8'
                                                    ) ?>"
                                                    class="form-select"
                                                    <?= $required
                                                        ? 'required'
                                                        : '' ?>>

                                                    <option value="">
                                                        Select an option
                                                    </option>


                                                    <?php foreach (
                                                        $options
                                                        as $option
                                                    ): ?>

                                                        <?php

                                                        $optionValue =
                                                            (string) (
                                                                $option[
                                                                    'option_value'
                                                                ]
                                                                ?? ''
                                                            );

                                                        $optionLabel =
                                                            (string) (
                                                                $option[
                                                                    'option_label'
                                                                ]
                                                                ?? ''
                                                            );

                                                        ?>


                                                        <option
                                                            value="<?= htmlspecialchars(
                                                                $optionValue,
                                                                ENT_QUOTES,
                                                                'UTF-8'
                                                            ) ?>"
                                                            <?= $defaultValue === $optionValue
                                                                ? 'selected'
                                                                : '' ?>>

                                                            <?= htmlspecialchars(
                                                                $optionLabel,
                                                                ENT_QUOTES,
                                                                'UTF-8'
                                                            ) ?>

                                                        </option>

                                                    <?php endforeach; ?>

                                                </select>


                                            <!-- =================================================
                                                 RADIO
                                            ================================================== -->

                                            <?php elseif (
                                                $fieldType === 'radio'
                                            ): ?>


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

                                                    <div
                                                        class="alert
                                                               alert-light
                                                               border
                                                               py-2
                                                               mb-0">

                                                        No options configured.

                                                    </div>


                                                <?php else: ?>


                                                    <?php foreach (
                                                        $options
                                                        as $option
                                                    ): ?>

                                                        <?php

                                                        $optionValue =
                                                            (string) (
                                                                $option[
                                                                    'option_value'
                                                                ]
                                                                ?? ''
                                                            );

                                                        $optionLabel =
                                                            (string) (
                                                                $option[
                                                                    'option_label'
                                                                ]
                                                                ?? ''
                                                            );

                                                        ?>


                                                        <div
                                                            class="form-check
                                                                   mb-2">

                                                            <input
                                                                class="form-check-input"
                                                                type="radio"
                                                                name="<?= htmlspecialchars(
                                                                    $fieldName,
                                                                    ENT_QUOTES,
                                                                    'UTF-8'
                                                                ) ?>"
                                                                value="<?= htmlspecialchars(
                                                                    $optionValue,
                                                                    ENT_QUOTES,
                                                                    'UTF-8'
                                                                ) ?>"
                                                                id="field_<?= $fieldId ?>_option_<?= (int) (
                                                                    $option['id']
                                                                    ?? 0
                                                                ) ?>"
                                                                <?= $defaultValue === $optionValue
                                                                    ? 'checked'
                                                                    : '' ?>
                                                                <?= $required
                                                                    ? 'required'
                                                                    : '' ?>>


                                                            <label
                                                                class="form-check-label"
                                                                for="field_<?= $fieldId ?>_option_<?= (int) (
                                                                    $option['id']
                                                                    ?? 0
                                                                ) ?>">

                                                                <?= htmlspecialchars(
                                                                    $optionLabel,
                                                                    ENT_QUOTES,
                                                                    'UTF-8'
                                                                ) ?>

                                                            </label>

                                                        </div>

                                                    <?php endforeach; ?>


                                                <?php endif; ?>


                                            <!-- =================================================
                                                 CHECKBOX
                                            ================================================== -->

                                            <?php elseif (
                                                $fieldType === 'checkbox'
                                            ): ?>


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

                                                    <div
                                                        class="alert
                                                               alert-light
                                                               border
                                                               py-2
                                                               mb-0">

                                                        No options configured.

                                                    </div>


                                                <?php else: ?>


                                                    <?php foreach (
                                                        $options
                                                        as $option
                                                    ): ?>

                                                        <?php

                                                        $optionValue =
                                                            (string) (
                                                                $option[
                                                                    'option_value'
                                                                ]
                                                                ?? ''
                                                            );

                                                        $optionLabel =
                                                            (string) (
                                                                $option[
                                                                    'option_label'
                                                                ]
                                                                ?? ''
                                                            );

                                                        ?>


                                                        <div
                                                            class="form-check
                                                                   mb-2">

                                                            <input
                                                                class="form-check-input"
                                                                type="checkbox"
                                                                name="<?= htmlspecialchars(
                                                                    $fieldName,
                                                                    ENT_QUOTES,
                                                                    'UTF-8'
                                                                ) ?>[]"
                                                                value="<?= htmlspecialchars(
                                                                    $optionValue,
                                                                    ENT_QUOTES,
                                                                    'UTF-8'
                                                                ) ?>"
                                                                id="field_<?= $fieldId ?>_option_<?= (int) (
                                                                    $option['id']
                                                                    ?? 0
                                                                ) ?>">


                                                            <label
                                                                class="form-check-label"
                                                                for="field_<?= $fieldId ?>_option_<?= (int) (
                                                                    $option['id']
                                                                    ?? 0
                                                                ) ?>">

                                                                <?= htmlspecialchars(
                                                                    $optionLabel,
                                                                    ENT_QUOTES,
                                                                    'UTF-8'
                                                                ) ?>

                                                            </label>

                                                        </div>

                                                    <?php endforeach; ?>


                                                <?php endif; ?>


                                            <!-- =================================================
                                                 FILE
                                            ================================================== -->

                                            <?php elseif (
                                                $fieldType === 'file'
                                            ): ?>

                                                <input
                                                    type="file"
                                                    name="<?= htmlspecialchars(
                                                        $fieldName,
                                                        ENT_QUOTES,
                                                        'UTF-8'
                                                    ) ?>"
                                                    class="form-control"
                                                    <?= $required
                                                        ? 'required'
                                                        : '' ?>>


                                            <!-- =================================================
                                                 FALLBACK
                                            ================================================== -->

                                            <?php else: ?>

                                                <input
                                                    type="text"
                                                    name="<?= htmlspecialchars(
                                                        $fieldName,
                                                        ENT_QUOTES,
                                                        'UTF-8'
                                                    ) ?>"
                                                    class="form-control"
                                                    placeholder="<?= htmlspecialchars(
                                                        $placeholder,
                                                        ENT_QUOTES,
                                                        'UTF-8'
                                                    ) ?>">

                                            <?php endif; ?>


                                            <!-- HELP TEXT -->

                                            <?php if (
                                                $helpText !== ''
                                            ): ?>

                                                <div
                                                    class="preview-help-text">

                                                    <i
                                                        class="bi
                                                               bi-info-circle
                                                               me-1"></i>

                                                    <?= htmlspecialchars(
                                                        $helpText,
                                                        ENT_QUOTES,
                                                        'UTF-8'
                                                    ) ?>

                                                </div>

                                            <?php endif; ?>


                                        </div>

                                    </div>


                                <?php endforeach; ?>


                            </div>


                        <?php endif; ?>


                    </div>

                </div>


            <?php endforeach; ?>


            <!-- =================================================
                 PREVIEW ACTIONS
            ================================================== -->

            <div
                class="card
                       shadow-sm
                       border-0
                       mb-4">

                <div class="card-body p-4">

                    <div
                        class="d-flex
                               flex-wrap
                               justify-content-between
                               align-items-center
                               gap-3">

                        <div>

                            <div class="fw-semibold">
                                Preview Mode
                            </div>

                            <div class="small text-muted">

                                Submission storage is not enabled
                                in this preview stage.

                            </div>

                        </div>


                        <div class="d-flex gap-2">

                            <button
                                type="reset"
                                class="btn btn-outline-secondary">

                                <i
                                    class="bi
                                           bi-arrow-counterclockwise
                                           me-1"></i>

                                Reset

                            </button>


                            <button
                                type="submit"
                                class="btn btn-primary"
                                disabled>

                                <i
                                    class="bi
                                           bi-send
                                           me-1"></i>

                                Submit Form

                            </button>

                        </div>

                    </div>

                </div>

            </div>


        </form>


    <?php endif; ?>


</div>


<style media="print">
@media print {

    .sidebar,
    .navbar,
    .preview-toolbar,
    .btn {
        display: none !important;
    }

    .form-preview-page {
        max-width: 100%;
    }

    .preview-section,
    .preview-header {
        box-shadow: none !important;
        border: 1px solid #dee2e6 !important;
        break-inside: avoid;
    }
}
</style>


<?php

$content = ob_get_clean();

$title = 'Form Preview';

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