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

{% 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/ramonage/_essential_data.js') ~ "?rnd=" ~ random() }}"></script>
    <script type="text/javascript" src="{{ asset('install-bois/hardcoded_services/ramonage/ramonage.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>
        <h3 class="title-results" style="margin-top: 30px">
            D’après le décret et l’arrêté du 20 juillet 2023.
        </h3>
    </div>

    <div class="container-fluid">
        <div class="row container-summary-ramonage">
            <div id="containerEssentialData" style="margin-top: 20px;">
                <h3 class="subtitle-summary">DONNÉES ESSENTIELLES</h3>
                <div class="container-summary">
                    {{ include('hardcoded_services/ramonage/_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;">
                            <h3 id="{{ keySection }}" class="subtitle-dropdown-disabled">{{ section.label }}</h3>
                            <div id="content{{ keySection }}" class="container-summary section-dropdown-content">
                                <!-- DESKTOP -->
                                <table class="table-line-ramonage questions-desktop" style="display:none;">
                                    <tr>
                                        <th></th>
                                        <th>Effectué</th>
                                        <th>Non effectué</th>
                                        <th>Sans objet</th>
                                        <th></th>
                                    </tr>
                                    {% for keySubtitle, subtitle in section.subtitles %}
                                        {% for keyQuestion, question in subtitle.questions %}
                                            {% if loop.first and subtitlesLabel[keySubtitle] is not null %}
                                                <tr>
                                                    <th class="section-subtitle-desktop">{{ subtitlesLabel[keySubtitle] }}</th>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                </tr>
                                            {% endif %}
                                            <tr id="question-desktop-{{ keyQuestion }}">
                                                <td>
                                                    {% if question.inputIntegrated %}
                                                        <span>{{ question.label|raw|replace({'[response]': 'à noter dans le champ libre'}) }}</span>
                                                    {% else %}
                                                        <span>{{ question.label|raw }}</span>
                                                    {% endif %}
                                                    {% if question.information != null %}
                                                        <span class="icon-information">?
                                                            <span class="information-popup-hide">
                                                                {{ question.information|raw }}
                                                            </span>
                                                        </span>
                                                    {% endif %}
                                                </td>
                                                <td>
                                                    <input class="question-radio-action {{ serviceCreatedOnProject.serviceDataValueKey(keyQuestion) === 'done' ? 'checked' : '' }}"
                                                           type="radio" name="{{ keyQuestion }}-action" value="done">
                                                </td>
                                                <td>
                                                    <input class="question-radio-action {{ serviceCreatedOnProject.serviceDataValueKey(keyQuestion) === 'not-done' ? 'checked' : '' }}"
                                                           type="radio" name="{{ keyQuestion }}-action" value="not-done">
                                                </td>
                                                <td>
                                                    <input class="question-radio-action {{ serviceCreatedOnProject.serviceDataValueKey(keyQuestion) === 'no-object' ? 'checked' : '' }}"
                                                           type="radio" name="{{ keyQuestion }}-action" value="no-object">
                                                </td>
                                                <td>
                                                    <input class="question-comment" type="text" name="{{ keyQuestion }}-comment"
                                                           value="{{ serviceCreatedOnProject.serviceDataValueKey(keyQuestion ~ '.comment') }}">
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    {% endfor %}
                                </table>
                                <!-- DESKTOP -->

                                <!-- MOBILE -->
                                <div class="questions-mobile" style="display:none;">
                                    {% for keySubtitle, subtitle in section.subtitles %}
                                        {% for keyQuestion, question in subtitle.questions %}
                                            {% if loop.first and subtitlesLabel[keySubtitle] is not null %}
                                                <p class="section-subtitle-mobile">{{ subtitlesLabel[keySubtitle] }}</p>
                                            {% endif %}
                                            <div id="question-mobile-{{ keyQuestion }}">
                                                <span class="mobile-line-question">
                                                    {% if question.inputIntegrated %}
                                                        <span>{{ question.label|raw|replace({'[response]': 'à noter dans le champ libre'}) }}</span>
                                                    {% else %}
                                                        <span>{{ question.label|raw }}</span>
                                                    {% endif %}
                                                    {% if question.information != null %}
                                                        <span class="icon-information">?
                                                            <span class="information-popup-hide">
                                                                <span class="mobile-cross-popup">×</span>
                                                                {{ question.information|raw }}
                                                            </span>
                                                        </span>
                                                    {% endif %}
                                                </span>
                                                <div class="mobile-container-action">
                                                    <label>
                                                        Effectué
                                                        <input class="question-radio-action" type="radio" name="{{ keyQuestion }}-action" value="done"
                                                            {{ serviceCreatedOnProject.serviceDataValueKey(keyQuestion) === 'done' ? 'checked' : '' }}>
                                                    </label>
                                                    <label>
                                                        Non effectué
                                                        <input class="question-radio-action" type="radio" name="{{ keyQuestion }}-action" value="not-done"
                                                            {{ serviceCreatedOnProject.serviceDataValueKey(keyQuestion) === 'not-done' ? 'checked' : '' }}>
                                                    </label>
                                                    <label>
                                                        Sans objet
                                                        <input class="question-radio-action" type="radio" name="{{ keyQuestion }}-action" value="no-object"
                                                            {{ serviceCreatedOnProject.serviceDataValueKey(keyQuestion) === 'no-object' ? 'checked' : '' }}>
                                                    </label>
                                                    <input class="question-comment" type="text" name="{{ keyQuestion }}-comment" style="min-width: 0"
                                                           value="{{ serviceCreatedOnProject.serviceDataValueKey(keyQuestion ~ '.comment') }}">
                                                    <label>
                                                        Valider
                                                        <input type="checkbox" name="validate-line">
                                                    </label>
                                                </div>
                                            </div>
                                        {% endfor %}
                                    {% endfor %}
                                </div>
                                <!-- MOBILE -->
                            </div>
                        </div>
                    {% endfor %}
                    <div style="margin-top: 20px;">
                        <h3 id="Comment" class="subtitle-dropdown-disabled">COMMENTAIRES</h3>
                        <div id="contentComment" class="container-summary section-dropdown-content">
                            <br>
                            <div>
                                <textarea name="global-comment" rows="5" style="width: 70%;resize: none">{{ serviceCreatedOnProject.serviceDataValueKey('global-comment')|raw }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container-button-question">
                    <div style="background-color: #3bd5ff" class="button-results" id="btnValidate">
                        <h4>Valider et générer l'attestation</h4>
                    </div>
                    <div style="background-color: #bfbab4" class="button-results" onclick="window.location.reload();">
                        <h4>Enregistrer en brouillon</h4>
                    </div>
                    <div class="button-results" id="btnBackToEssential">
                        <h4>Revenir aux données essentielles</h4>
                    </div>
                </div>
            </div>
            <div class="container-button-bottom">
                <div id="btnValidEssential" class="button-essential-disabled">
                    Valider et commencer mon entretien - ramonage
                </div>
            </div>
            <div class="button-essential" id="btnGoTop" style="display: none">
                Revenir en haut pour valider
            </div>
        </div>
    </div>
    {% if isDemo %}
        {{ include('tooltip/tooltip.html.twig') }}
    {% endif %}
    {{ macro.popup_signature("info", 'resetServiceForm', path('hardcoded_services_reset_service', {'id': serviceCreatedOnProject.id}), "reset-service", "En générant le rapport, le service sera réinitialisé pour le prochain entretien-ramonage. ") }}
    <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 isRamonage = true;

        let isMobile = null;
        let currentProductId = null;
        let productsLoaded = null;
        {#const isRamonageDone = {{ (isRamonageDone ?? null)|json_encode|raw }};#}
        const isMIDone = {{ (isMIDone ?? null)|json_encode|raw }};
        const hasEssentialDataCompleted = {{ (hasEssentialDataCompleted ?? null)|json_encode|raw }};
        let isChaudiere = {{ (isChaudiere ?? null)|json_encode|raw }};
        let combustible = {{ (combustible ?? null)|json_encode|raw }};

        const idMarque = {{ serviceCreatedOnProject.serviceDataValueKey('idMarque')|json_encode|raw }};
        const idModele = {{ serviceCreatedOnProject.serviceDataValueKey('idModele')|json_encode|raw }};

        const questionMatrix = {{ questionsBySection|json_encode|raw }};

        let requiredFields = [
            "usage",
            "circuit",
            "operations",
            "visit-date"
        ];

        const toDisableIfChaudiere = [
            "ObligatoryMaintenancePoint",
            "RecommendedMaintenancePoint"
        ];

        $(document).ready(function () {
            checkRequiredFields();
            initHelpLabel();
            if (!isMIDone) {
                requiredFields.push('idMarque');
                requiredFields.push('idModele');
            } else {
                changeConsumptionCombustibleLabel(combustible);
            }
            initializeDropdownAnimation();
            $('#btnValidate').on('click', function () {
                $('#blockSignature').hide();
                $('#blockMessage').show();
                $('#resetServiceForm').find('button[type="submit"]').text('Valider sans signer')
                $('#btnSignature').show();
                $('#popup-info-reset-service').modal('show');
            });

            $('#btnSignature').on('click', function () {
                $('#blockSignature').show();
                $('#blockMessage').hide();
                $('#resetServiceForm').find('button[type="submit"]').text('Signer & valider');
                resizeCanvas();
                $(this).hide();
            });

            initializeSignatureForm();

            if (isDemo) {
                let tabsToOpen = ['RecommendedMaintenancePoint', 'RecommendedRamonagePoint'];
                function openTabs(tabsToOpen) {
                    $.each(tabsToOpen, function(index, tabToOpen) {
                        if (!$('#'+tabToOpen).hasClass('subtitle-dropdown-disabled')){
                            showHideSection('show', tabToOpen);
                        }
                    })
                }
                $('#btnValidEssential').on('click', function () {
                    setTimeout(function() {
                        window.scrollTo({
                            top: 100,
                            behavior: 'smooth'
                        });
                        openTabs(tabsToOpen)
                    }, 500)
                })
                setTimeout(function() {
                    if (isMobile) {
                        openTabs(tabsToOpen)
                    }
                    if ($('#containerSectionQuestions').is(':visible')) {
                        window.scrollTo({
                            top: 100,
                            behavior: 'smooth'
                        });
                        openTabs(tabsToOpen)
                    }
                }, 500)
                $('.information-popup-hide').remove()
                $('.question-comment').css('background-color', '#dadada')
                $('#contentComment').remove()
                $('#contentObligatoryMaintenancePoint').remove()
                $('#contentObligatoryRamonagePoint').remove()
                $('#contentAdviceUsageDevice').remove()
                $('#contentAdvicePossibleUpdate').remove()
                applyTooltipToDisabledElements('.icon-information, .question-comment, #Comment, #ObligatoryMaintenancePoint, #ObligatoryRamonagePoint, #AdviceUsageDevice, #AdvicePossibleUpdate')
            }
        });
    </script>
{% endblock %}