{% extends '@InstallBois/index.html.twig' %}
{% import "forms-macro/popup.html.twig" as macro %}
{% import "forms-macro/inputs_form.html.twig" as forms %}

{% block title %}
    INSTALL BOIS
{% endblock %}

{% block head %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    {{ parent() }}
{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('install-bois/css/hardcoded_services.css') ~ "?rnd=" ~ random() }}">
    {{ parent() }}
{% endblock %}

{% block javascripts %}
    <script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
    <script type="text/javascript" src="{{ asset('install-bois/hardcoded_services/hardcoded_services.js') ~ "?rnd=" ~ random() }}"></script>
    <script type="text/javascript" src="{{ asset('install-bois/hardcoded_services/id_conduit/id_conduit.js') ~ "?rnd=" ~ random() }}"></script>
    {{ parent() }}
{% endblock %}

{% block page_content_start %}
    <div class="containerInfosProjectSimple">
        {{ parent() }}
        {{ include('project/_block/project_infos.html.twig') }}
    </div>
{% endblock %}

{% block page_content %}
    <div class="col-sm-12 col-md-12 col-lg-12">
        {% if serviceCreatedOnProject.serviceRE.logoFilepath == null %}
            <img style="margin-left: 2%;margin-top: 20px;margin-bottom: 50px;" alt="Logo du service" id="logoService"
                 class="logoServiceConfig"
                 src="{{ asset('install-bois/icon/service/default_settings_icon.png') }}">
        {% else %}
            <img style="margin-left: 2%;margin-top: 20px;margin-bottom: 50px;" alt="Logo du service" id="logoService"
                 class="logoServiceConfig"
                 src="{{ asset(serviceCreatedOnProject.serviceRE.logoFilepath) }}">
        {% endif %}
        <h2 style="margin-bottom: -30px;display: flex;align-items: flex-start;justify-content: flex-start;align-content: center;">
            {{ serviceCreatedOnProject.serviceRE.label }}
            <div id="loaderService" style="display:none;">
                <img src="{{ asset('images/loader-service.gif') }}" alt="Loader" style="width: 90px;margin-top: -30px;">
            </div>
        </h2>
    </div>

    <div class="container-fluid">
        <div class="row container-summary-id-conduit">
            <div id="containerEssentialData" style="margin-top: 20px;">
                <h3 class="subtitle-summary">DONNÉES ESSENTIELLES</h3>
                <div class="container-summary">
                    {{ include('hardcoded_services/id_conduit/_block/_essential_data.html.twig') }}
                </div>
            </div>
            <div id="containerSectionQuestions" style="display: none">
                {% if isDemo %}
                    {{ include('watermark/_watermark.html.twig') }}
                {% endif %}
                <div style="width: 80%">
                    {% for keySection,section in questionsBySection %}
                        <div style="margin-top: 20px;{{ keySection in ['followUp', 'maintenanceSweeping'] ? 'display:none' : '' }}">
                            <h3 id="{{ keySection }}" class="subtitle-dropdown" {{ keySection|last in ['1','2','3','4','5','6','7','8','9'] ? 'data-disabled="1"' : '' }}>{{ section.label }}</h3>
                            <div id="content{{ keySection }}" class="container-summary section-dropdown-content">
                                <div>
                                    {% for keySubtitle, subtitle in section.subtitles %}
                                        {% if subtitles[keySubtitle] is not null %}
                                            <div class="col-sm-12 col-lg-12">
                                                <h4>{{ subtitles[keySubtitle] }}</h4>
                                            </div>
                                        {% endif %}
                                        {% for keyQuestion, question in subtitle.questions %}
                                            {% if 'followUp' in keySection and loop.index is odd and loop.last == false %}
                                                <div class="row" style="margin: 0">
                                            {% endif %}
                                            <div class="col-sm-3 col-lg-6 essential-data-field" style="{{ keyQuestion in ['smokeSealingResult'] ? 'margin-right: 1px' : '' }}">
                                                {% if question.type === 'text' or question.type === 'number' or question.type === 'decimal' %}
                                                    {% set type = question.type %}
                                                    {% if type == 'decimal' %}
                                                        {% set type = 'number' %}
                                                    {% endif %}
                                                    {{ forms.input(
                                                        question.label,
                                                        type,
                                                        keyQuestion,
                                                        keyQuestion,
                                                        data[keyQuestion],
                                                        null,null,false,false,false,
                                                        null,"errorMessage",question.type == 'decimal' ? 2 : null,
                                                        false,false,"recoMessage",
                                                        false,"limitedMessage",
                                                        null,null,null,
                                                        question.updatable == false) }}
                                                {% elseif question.type === 'date' %}
                                                    {{ forms.inputDate(
                                                        question.label,
                                                        keyQuestion,
                                                        keyQuestion,
                                                        data[keyQuestion],
                                                        false,false,"errorMessage",
                                                        null,"now"|date_modify("+5 years")|date("Y-m-d"),
                                                        question.updatable == false) }}
                                                {% elseif question.type === 'select' %}
                                                    {{ forms.select(
                                                        question.label,
                                                        keyQuestion,
                                                        keyQuestion,
                                                        question.selection,
                                                        "-- Sélectionnez votre choix --",
                                                        null,
                                                        data[keyQuestion],
                                                        false,false,false,
                                                        false,"errorMessage",
                                                        question.updatable == false) }}
                                                {% elseif question.type === 'textarea' %}
                                                    {{ forms.textarea(
                                                        question.label,
                                                        keyQuestion,
                                                        keyQuestion,
                                                        null,
                                                        null,
                                                        data[keyQuestion],
                                                        false,10,false,
                                                        question.updatable == false) }}
                                                {% endif %}
                                            </div>
                                            {% if 'followUp' in keySection and loop.index is even %}
                                                </div>
                                            {% endif %}
                                        {% endfor %}
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
                <div class="container-button-question">
                    <div style="background-color: #3bd5ff" class="button-results" id="btnValidate">
                        <h4>Éditer la fiche</h4>
                    </div>
                    <div class="button-results" id="btnBackToEssential">
                        <h4>Revenir aux données essentielles</h4>
                    </div>
                    <div class="button-results button-complete" id="btnFollowUp">
                        <h4>Compléter le suivi</h4>
                    </div>
                    <div class="button-results button-complete" id="btnMaintenanceSweeping">
                        <h4>Compléter entretien ramonage</h4>
                    </div>
                </div>
            </div>

            <div class="container-button-bottom">
                <div class="button-essential-disabled" id="btnValidEssential">
                    Valider et compléter la fiche
                </div>
            </div>
        </div>
    </div>


    {% if isDemo %}
        {{ include('tooltip/tooltip.html.twig') }}
    {% endif %}
    {{ macro.popup("info", 'resetServiceForm', path('hardcoded_services_reset_service', {'id': serviceCreatedOnProject.id}), "reset-service", "Cette fiche va être éditée. Vous pouvez la modifier ou la compléter à tout moment.") }}
    <script type="text/javascript">
        const brandListURI = "{{ path('brand_list', {'fromRamonage': "true"}) }}";
        const productListURI = "{{ path('products_list_by_params') }}";
        const completeServiceURI = "{{ path('service_created_on_project_complete_service', {'id': serviceCreatedOnProject.id}) }}";
        const addOrUpdateServiceDataURI = "{{ path('hardcoded_services_add_or_update', {'id': serviceCreatedOnProject.id}) }}";
        const getQuestionValuesURI = "{{ path('id_conduit_get_question_values', {'id': serviceCreatedOnProject.id}) }}";
        const isRamonage = false;

        let isMobile = null;
        let currentProductId = null;
        let productsLoaded = null;

        const idMarque = {{ data['idMarque']|json_encode|raw }};
        const idModele = {{ data['idModele']|json_encode|raw }};
        const idMarqueDuct = {{ data['idMarqueDuct']|json_encode|raw }};
        const idModeleDuct = {{ data['idModeleDuct']|json_encode|raw }};
        const idMarqueTubage = {{ data['idMarqueTubage']|json_encode|raw }};
        const idModeleTubage = {{ data['idModeleTubage']|json_encode|raw }};
        const interiorShape = "{{ project.techDataValueForService('interiorShape') }}";

        const serviceDone = {{ (project.techDataValueForService('idConduitDone') == '1')|json_encode|raw }};

        let requiredFields = [
            "duct-type",
            "duct-tubage"
        ];

        $(document).ready(function () {
            checkRequiredFields();
            initializeDropdownAnimation();
            $('*[data-disabled="1"]').each(function () {
                $(this).removeClass('subtitle-dropdown').addClass('subtitle-dropdown-disabled');
                $(this).css('cursor', 'pointer');
            });

            $('#btnValidate').on('click', function () {
                $('#popup-info-reset-service').modal('show');
            });
        });

    </script>
{% endblock %}