{#
 # ---------------------------------------------------------------------
 #
 # GLPI - Gestionnaire Libre de Parc Informatique
 #
 # http://glpi-project.org
 #
 # @copyright 2015-2025 Teclib' and contributors.
 # @licence   https://www.gnu.org/licenses/gpl-3.0.html
 #
 # ---------------------------------------------------------------------
 #
 # LICENSE
 #
 # This file is part of GLPI.
 #
 # This program is free software: you can redistribute it and/or modify
 # it under the terms of the GNU General Public License as published by
 # the Free Software Foundation, either version 3 of the License, or
 # (at your option) any later version.
 #
 # This program is distributed in the hope that it will be useful,
 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU General Public License for more details.
 #
 # You should have received a copy of the GNU General Public License
 # along with this program.  If not, see <https://www.gnu.org/licenses/>.
 #
 # ---------------------------------------------------------------------
 #}

{% extends "layout/page_without_tabs.html.twig" %}

{% set container_size = "narrow" %}

{# TODO: rework this page style to use the standard tabler_title name for the
   form's title #}

{% block content_body %}
    {# Is this a single or multi sections forms ? #}
    {% set is_single_section_form = form.getSections()|length == 1 %}

    {# Check render layout to determine display behavior #}
    {% set is_single_page_layout = form.fields.render_layout == constant('Glpi\\Form\\RenderLayout::SINGLE_PAGE').value %}
    {% set use_step_by_step = not is_single_page_layout and not is_single_section_form %}

    <form
        id="forms_form_answers"
        method="POST"
        action="{{ path("/Form/SubmitAnswers") }}"
        {# The pointer-events-none class will be removed by the JS controller once it is loaded #}
        class="pointer-events-none"
        data-glpi-form-render-layout="{{ form.fields.render_layout }}"
    >
        <div class="form-renderer mt-n5">

            {# Form header: title and description #}
            <div
                class="mb-4"
                data-glpi-form-renderer-form-header
            >
                <h1 class="form-title mb-2" aria-label="{{ __('Form title') }}" data-testid="form-title">
                    {{ translate_form_item_key(form, constant('TRANSLATION_KEY_NAME', form)) }}
                </h1>

                <div class="text-muted form-description text-break" aria-label="{{ __('Form description') }}" role="note" data-testid="form-description">
                    {{ translate_form_item_key(form, constant('TRANSLATION_KEY_HEADER', form))|safe_html }}
                </div>
            </div>

            <div data-glpi-form-renderer-delegation-container>
                {% include "components/helpdesk_forms/delegation_alert.html.twig" %}
            </div>

            {% for section in form.getSections() %}
                {% set is_first_section = loop.index0 == 0 %}
                {% set section_index = loop.index0 %}

                <div
                    class="{{ (is_single_page_layout or is_first_section) ? "" : "d-none" }}"
                    data-glpi-form-renderer-section="{{ section_index }}"
                    data-glpi-form-renderer-uuid="{{ section.fields.uuid }}"
                    data-glpi-form-renderer-id="{{ section.fields.id }}"
                    {% if not visibility_engine_output.isSectionVisible(section.getID()) %}
                        data-glpi-form-renderer-hidden-by-condition
                    {% endif %}
                >
                    {% if not is_single_section_form %}
                        <div
                            class="bg-primary px-2 py-1 rounded-top "
                            style="width: fit-content; max-width: calc(100% - var(--tblr-border-radius) * 2);"
                        >
                            <h2 class="mb-0 {{ not section.fields.name ? "text-muted" : "" }}">
                                {{ translate_form_item_key(section, constant('TRANSLATION_KEY_NAME', section))|default(__('Untitled section')) }}
                            </h2>
                        </div>
                    {% endif %}
                    <div
                        class="card mb-3" {{ not is_single_section_form ? "style='border-top-left-radius: 0;'" : "" }}
                    >
                        <div class="card-body">
                            {% if not is_single_section_form and section.fields.description is not empty %}
                                <div class="text-muted section-description text-break mb-3">
                                    {{ translate_form_item_key(section, constant('TRANSLATION_KEY_DESCRIPTION', section))|safe_html }}
                                </div>
                            {% endif %}

                            {% for form_group_blocks in section.getBlocks() %}
                                {# Ensure form_group_blocks is iterable (may be a single question) #}
                                {% if form_group_blocks is not iterable %}
                                    {% set form_group_blocks = [form_group_blocks] %}
                                {% endif %}

                                <section data-glpi-form-renderer-horizontal-blocks>
                                    {% set previous_index = -1 %}
                                    {% for form_block in form_group_blocks %}
                                        {% if form_block.fields.horizontal_rank > previous_index + 1 %}
                                            {% for i in 1..(form_block.fields.horizontal_rank - (previous_index + 1)) %}
                                            <div style="flex: 1;"></div>
                                            {% endfor %}
                                        {% endif %}
                                        {% set previous_index = form_block.fields.horizontal_rank %}

                                        {% if form_block is instanceof('Glpi\\Form\\Question') %}
                                            {% set question_type = form_block.getQuestionType() %}
                                            {{ form_block.setDefaultValueFromParameters(params) }}
                                        {% endif %}

                                        {% set skip_question = false %}

                                        {# Skip unknown types (may be a disabled plugin) #}
                                        {% if form_block is instanceof('Glpi\\Form\\Question') and question_type is null %}
                                            {% set skip_question = true %}
                                        {% endif %}

                                        {# Skip questions not allowed for anonymous forms #}
                                        {% if not skip_question and form_block is instanceof('Glpi\\Form\\Question') and unauthenticated_user and not question_type.isAllowedForUnauthenticatedAccess() %}
                                            {% set skip_question = true %}
                                        {% endif %}

                                        {% if not skip_question %}
                                            <section
                                                aria-label="{{ form_block.fields.name }}"
                                                class="{{ (is_single_page_layout or is_first_section) ? "" : "d-none" }} mb-3"
                                                style="flex: 1;"
                                                data-glpi-form-renderer-parent-section="{{ section_index }}"
                                                data-glpi-form-renderer-id="{{ form_block.fields.id }}"
                                                data-glpi-form-renderer-uuid="{{ form_block.fields.uuid }}"

                                                {% if form_block is instanceof('Glpi\\Form\\Question') %}
                                                    data-glpi-form-renderer-question

                                                    {% if form_block.getQuestionType().isHiddenInput() %}
                                                        data-glpi-form-renderer-hidden-input
                                                    {% endif %}
                                                {% elseif form_block is instanceof('Glpi\\Form\\Comment') %}
                                                    data-glpi-form-renderer-comment
                                                {% endif %}

                                                {% if form_block is instanceof('Glpi\\Form\\Question') and form_block.getQuestionType() is instanceof('Glpi\\Form\\Condition\\UsedAsCriteriaInterface') %}
                                                    data-glpi-form-renderer-criteria
                                                {% endif %}

                                                {% if form_block is instanceof('Glpi\\Form\\Question') and not visibility_engine_output.isQuestionVisible(form_block.getID()) %}
                                                    data-glpi-form-renderer-hidden-by-condition
                                                {% elseif form_block is instanceof('Glpi\\Form\\Comment') and not visibility_engine_output.isCommentVisible(form_block.getID()) %}
                                                    data-glpi-form-renderer-hidden-by-condition
                                                {% endif %}
                                            >
                                                <h3 class="mb-2 {{ not form_block.fields.name ? "text-muted" : "" }}">
                                                    {{ translate_form_item_key(form_block, constant('TRANSLATION_KEY_NAME', form_block))|default(form_block.getUntitledLabel()) }}
                                                    {% if form_block.fields.is_mandatory ?? false %}
                                                        <span class="text-danger">*</span>
                                                    {% endif %}
                                                </h3>

                                                <div class="text-muted block-description text-break mb-2" role="note" aria-label="{{ __('%s description')|format(form_block.getTypeName(1)) }}">
                                                    {{ translate_form_item_key(form_block, constant('TRANSLATION_KEY_DESCRIPTION', form_block))|safe_html }}
                                                </div>

                                                {% if form_block is instanceof('Glpi\\Form\\Question') %}
                                                    {{ question_type.renderEndUserTemplate(form_block)|raw }}
                                                {% endif %}
                                            </section>
                                        {% endif %}
                                    {% endfor %}
                                </section>
                            {% endfor %}
                        </div>
                    </div>
                </div>

            {% endfor %}

            {# Form reference #}
            <input type="hidden" name="forms_id" value="{{ form.fields.id }}">

            <div class="d-flex justify-content-end mb-3" data-glpi-form-renderer-actions>
                {# Altcha #}
                {% if unauthenticated_user %}
                    {{ include(
                        'components/altcha/widget.html.twig',
                        {},
                        with_context: false
                    ) }}
                {% endif %}
            </div>

            {# Actions #}
            <div class="d-flex justify-content-end" data-glpi-form-renderer-actions>
                {% if use_step_by_step and not is_single_section_form %}
                    {# Navigation buttons for step-by-step mode #}
                    <button
                        type="button"
                        data-glpi-form-renderer-action="previous-section"
                        class="btn btn-ghost-secondary d-none d-flex align-items-end me-2 pointer-events-none"
                    >
                        <i class="ti ti-arrow-narrow-left-dashed me-2"></i>
                        {{ __("Back") }}
                    </button>

                    <button
                        type="button"
                        data-glpi-form-renderer-action="next-section"
                        class="btn btn-primary pointer-events-none d-flex align-items-end"
                    >
                        <i class="ti ti-arrow-narrow-right-dashed me-2"></i>
                        {{ __("Continue") }}
                    </button>
                {% endif %}

                <button
                    type="button"
                    data-glpi-form-renderer-action="submit"
                    class="btn btn-primary pointer-events-none d-flex align-items-end {{ use_step_by_step ? 'd-none' : '' }}"
                    disabled
                    {% if not visibility_engine_output.isFormVisible() %}
                        data-glpi-form-renderer-hidden-by-condition
                    {% endif %}
                >
                    <i class="ti ti-check me-2"></i>
                    {{ __("Submit") }}
                </button>
            </div>

            {# Final "success" confirmation #}
            <div
                class="empty d-none mt-5"
                data-glpi-form-renderer-success
            >
                <div class="empty-title d-flex align-items-center">
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="icon text-green icon-lg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        stroke-width="2"
                        stroke="currentColor"
                        fill="none"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    >
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
                        <path d="M9 12l2 2l4 -4"></path>
                    </svg>
                    <span class="ms-2"> {{ __("Form submitted") }} </span>
                </div>
                <p class="empty-subtitle text-secondary">
                    {{ __("Your form has been submitted successfully.") }}
                </p>
                {% if not unauthenticated_user %}
                    <div class="mt-3 d-flex">
                        {% if get_current_interface() == 'central' %}
                            <a class="btn btn-outline-secondary me-2" href="{{ path('/ServiceCatalog') }}">
                                <i class="ti ti-library me-1"></i>
                                <span>{{ __("Go back to service catalog") }}</span>
                            </a>
                        {% else %}
                            <a class="btn btn-outline-secondary me-2" href="{{ path('/Helpdesk') }}">
                                <i class="ti ti-home me-1"></i>
                                <span>{{ __("Take me home") }}</span>
                            </a>
                        {% endif %}
                        <a class="btn btn-primary" href="{{ path('/front/ticket.php?' ~ my_tickets_url_param) }}">
                            <i class="ti ti-article me-1"></i>
                            <span>{{ __("See my tickets") }}</span>
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>
    </form>

    <script>(async () => {
        const mod = await import("/js/modules/Forms/RendererController.js");
        new mod.GlpiFormRendererController(
            '#forms_form_answers',
            {{ form.getID() }}
        );
    })();</script>

{% endblock content_body %}