{% extends "porto-corporate-layout.html.twig" %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('checklist-maj-style') }}
    {{ encore_entry_link_tags('autocomplete-style') }}
    <style>
        .wrapper-checkbox {border-radius: 5px;}
        .row-buttons .btn {height: 120px;}
        .form-select {font-size: 13px !important;}
        .row-objet-operation input {font-size: 21px !important; line-height: 27px !important; color: var(--bs-heading-color) !important; }
        td.not-selectionnee:hover { cursor: pointer; color: var(--primary); }
        td.selectionnee { font-weight: bold; color: var(--primary); }
{#
        .tr-categorie.active td { font-weight: bold; color: var(--primary); }
        .tr-categorie.not-active:hover td { cursor: pointer; }
        .tr-categorie.not-active td:hover { color: var(--primary); }
#}
    </style>
{% endblock %}


{% block pageheader %}
    {{ parent() }}
{% endblock %}

{% block container_class %} container py-2 {% endblock %}

{% block pagecontent %}

    <div class="row justify-content-center">

        <div class="col-lg-12">

            <div class="row">
                <div class="col-md-12">
                    {% for flashMessage in app.session.flashbag.get('error') %}
                        <div class="alert alert-danger alert-dismissible" >
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            {{ flashMessage|raw }}
                        </div>
                    {% endfor %}
                    {% for flashMessage in app.session.flashbag.get('notice') %}
                        <div class="alert alert-success alert-dismissible" >
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            {{ flashMessage|raw }}
                        </div>
                    {% endfor %}
                </div>
            </div>

            {% form_theme form with ['bootstrap_5_horizontal_layout.html.twig'] only %}

            {{ form_start(form, {'attr': {'role': 'form', 'class': 'needs-validation no-auto-overlay', 'novalidate': true, 'id': 'checklistForm', 'onSubmit': 'formSubmit(this)'}}) }}

                <div class="row mt-3 border-silver wrapper-checkbox mb-5 to-print" >
                    <div class="col-md-12 p-4">

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <img src="{{ asset('build/env_' ~ dir_env ~ '/logo_checklist.png') }}" class="w-100"/>
                            </div>
                            <div class="col-md-6">
                                <h1 class="text-center color-client" style="margin-top: 92px;"><i class="fas fa-tasks color-silver me-3"></i>{{'Checklist documents'|trans}}</h1>
                            </div>
                        </div>

                        {% if checklist.client is not null %}
                            <div class="row mb-3">
                                <div class="col-md-12 h4">
                                    <span class="fw-600 me-3">{{'Client'|trans}}</span>
                                    <span class="fw-normal">{{checklist.client.nom}} {{checklist.client.prenom}}</span>
                                </div>
                            </div>
                        {% else %}
                            <div class="row mb-3">
                                <div class="col-md-12 h4">
                                    <span class="fw-600 me-3">{{'Personne morale'|trans}}</span>
                                    <span class="fw-normal">{{checklist.personneMorale.nom}}</span>
                                </div>
                            </div>
                        {% endif %}

                        <div class="row">
                            <div class="col-md-12 h4 mb-0">
                                <div class="float-start">
                                    <span class="fw-600 me-3">{{'Conseiller / gestionnaire'|trans}}</span>
                                    <span class="fw-normal">{{checklist.userMaj.nom}} {{checklist.userMaj.prenom}}</span>
                                </div>
                                <div class="float-end">
                                    <span class="fw-600">{{'Date'|trans}}</span>
                                    <span class="fw-normal" id="date-maj">{{checklist.dateMaj|date('d/m/Y')}} {{checklist.dateMaj|date('H:i:s')}}</span>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <h4 class="section color-green mb-4 to-print">
                    <i class='fas fa-angle-right me-2'></i>{{'Type d\'opération'|trans}}
                </h4>

                <div class="row">
                    <div class="col-md-12 px-1">
                        <table class="table table-sm table-categories">
                            {% set tr = 0 %}
                            {% set niveau1 = '' %}
                            {% for categorieId, arbre in arborescence %}
                                {% if niveau1 != arbre[0] %}
                                    {% set afficher = true %}
                                    {% set trNiveauPos = 1 %}
                                {% else %}
                                    {% set afficher = false %}
                                    {% set trNiveauPos = trNiveauPos + 1 %}
                                {% endif %}
                                {% set niveau1 = arbre[0] %}
                                {% set tr = tr + 1 %}
                                <tr
                                    class="tr-categorie {% if categorieId == categorieSelectionnee %} active {% else %} not-active {% endif %}"
                                    id="tr-categorie-{{categorieId}}"
                                    data-niveau1="{{niveau1}}"
                                    data-niveau-pos="{{trNiveauPos}}"
                                    data-categorie-id="{{categorieId}}"
                                    {#onClick="getCheckboxes('{{categorieId}}');"#}
                                    onClick="rowClick(this);"
                                    {% if is_granted('ROLE_SUPER_ADMIN') %}
                                        title="{{categorieId}}"
                                    {% endif %}
                                    {% if not afficher %}
                                        style="display: none;"
                                    {% endif %}
                                >
                                    {% set td = 0 %}
                                    {% for libelle in arbre  %}
                                        {% set td = td + 1 %}
                                        {% set style = '' %}
                                        {% if tr == arborescence|length %} {% set style = style ~ ' border-bottom: none; ' %} {% endif %}
                                        {% if td == 1 %} {% set style = style ~ ' width: 180px; ' %} {% endif %}
                                        {% if td == 1 %}
                                            {% if not afficher %}
                                                {% set style = style ~ ' color: white; ' %}
                                            {% endif %}
                                        {% else %}
                                            {% set style = style ~ ' padding-left: 40px; display: none; ' %}
                                        {% endif %}
                                        <td
                                            class="{% if td == arbre|length %} last {% endif %}"
                                            style=" {{style}} white-space: nowrap;"
                                            data-niveau1="{{niveau1}}"
                                            data-td="{{td}}"
                                            id="categorie-{{categorieId}}"
                                            {% if td == arbre|length %}
                                                onClick="getCheckboxes('{{categorieId}}');"
                                            {% endif %}
                                        >
                                            {{libelle}}
                                        </td>
                                    {% endfor %}
                                </tr>
                            {% endfor %}
                        </table>
                    </div>
                </div>

                <div class="row" style="display: none;">
                    <div class="col-md-12">
                        <div
                            id="revenir-a-la-categorie-precedente"
                            class="fst-italic color-silver"
                            role="button"
                            onClick="$('td#categorie-'+categorieSelectionnee).trigger('click');"
                        >
                            <i class="fas fa-arrow-left me-1"></i>{{'Revenir à la catégorie précédemment sélectionnée'|trans}} : <span class="libelle"></span>
                        </div>
                    </div>
                </div>

                <div class="row to-print">
                    <div class="col-md-12">
                        <div
                            id="categorie-selectionnee-libelle"
                            style="display: none;"
                            class="fw-bold color-client text-5"
                        >
                        </div>
                    </div>
                </div>

                <h4 class="section color-green pt-5 mb-4 to-print">
                    <i class='fas fa-angle-right me-2'></i>{{'Objet de l\'opération'|trans}}
                </h4>

                <div class="row row-objet-operation mb-3 to-print">
                    <div class="col-md-12 h4">
                        {{ form_widget(form.objetOperation) }}
                    </div>
                </div>


                <div id="documents-affiches" style="display: none;">
                    {# !!!!!!!!!!!!! Les checkboxes viennent ici !!!!!!!!!!!!!! #}
                </div>


                {% set indexCheckbox = 0 %}
                <div id="tous-les-documents" style="display: none;">
                    {% for checkboxId, params in checklistDocuments %}
                        {% set indexCheckbox = indexCheckbox + 1 %}
                        {% include 'checklist/maj-checkbox.include.html.twig' %}
                    {% endfor %}
                </div>

                <div id="wrapper-commentaire-global" class="pt-5 to-print">

                    <h4 class="afficher-si-selection color-green mb-4" style="display: none;"><i class="fas fa-angle-right me-2"></i>Commentaire</h4>

                    <div class="row afficher-si-selection commentaire-global mt-3 mb-5" style="display: none;">
                        <div class="col-md-12">
                            {{ form_widget(form.commentaire) }}
                        </div>
                    </div>

                </div>

                <div class="row row-buttons afficher-si-selection mt-3 mb-3" style="display: none;">
                    <div class="col-md-6 px-1">
                        {{ form_widget(form.valider) }}
                    </div>
                    <div class="col-md-6 px-1">
                        {{ form_widget(form.retour) }}
                    </div>
                </div>

                <div class="row row-buttons afficher-si-selection mt-3 mb-3" style="display: none;">
                    <div class="col-md-6 px-1">

                        <button
                            type="button"
                            id="checklistimprimer"
                            class="btn btn-client-secondary px-1 py-2 text-5 mb-2 w-100 btn"
                            onclick="imprimerChecklistButtonClick();"
                        >
                            Imprimer (provisoire pour les tests)
                        </button>

                    </div>
                </div>

            {{ form_end(form) }}

        </div>
    </div>

    <div class="row ">
        <div class="col-lg-12 color-silver fst-italic">
            <span class="fw-bold"><i class="fas fa-info-circle me-1"></i>{{'Nom du fichier qui sera créé et envoyé dans O2S'|trans}}</span> :
            <span id="o2s-file-name" class="">{{o2sFileName}}</span>
        </div>
    </div>

{% endblock %}

{% block javascript %}

    {{ parent() }}

    <script>

        let checklistId = "{{checklistId}}";
        let categorieSelectionnee = {% if categorieSelectionnee is not null %} "{{categorieSelectionnee}}" {% else %} null {% endif %};
        let categorieSelectionneeLibelle = null;

        $(document).ready(function() {

            setTimeout(() => {

                {% if checklistId == 0 %}
                    $("input[type=checkbox]").prop("checked", false);
                {% endif %}
                $("#card-body-maj-checklist").fadeIn();

                {% if categorieSelectionnee is not null %}
                    $("td#categorie-"+categorieSelectionnee).trigger("click");
                    getCheckboxes("{{categorieSelectionnee}}");
                {% else %}
                    $(".tr-categorie td").addClass("not-selectionnee");
                {% endif %}


            }, 300);

            setInterval(function() { saveForm(); }, 5000);

        });

        function rowClick(trCaller) {

            $("#documents-affiches").fadeOut();
            $(".afficher-si-selection").fadeOut();

            $(".table-categories td").removeClass("selectionnee").addClass("not-selectionnee");

            if(categorieSelectionnee != null) {
                $("#revenir-a-la-categorie-precedente span.libelle").html(categorieSelectionneeLibelle);
                $("#revenir-a-la-categorie-precedente").parent().parent().css("display", "block");
            }

            $(".tr-categorie").each(function() {
                if($(this).data("niveau1") == $(trCaller).data("niveau1")) {
                    $(this).css("display", "table-row");
                    $(this).find("td").css("display", "table-cell");
                }
                else {
                    if($(this).data("niveau-pos") != 1) {
                        $(this).css("display", "none");
                        $(this).find("td").css("display", "none");
                    }
                    else {
                        $(this).find("td").each(function() {
                            if($(this).data("td") != 1) {
                                $(this).css("display", "none");
                            }
                        });
                    }
                }
            });

        }


        function getCheckboxes(categorieId) {

            $.LoadingOverlay("show");

            $.ajax({
                type: 'POST',
                url: "{{path('attitudepatrimoine_checklist_maj_get_checkboxes')}}",
                data: {
                    checklistId: checklistId,
                    categorieId: categorieId,
                },
                success: getCheckboxesCallback
            });

        }


        function getCheckboxesCallback(data) {

            if(data.result == "disconnect") {
                alert(TRANS_vous_avez_ete_deconnecte);
                window.location.replace(url_accueil);
            }
            else if(data.result == "ko") {
                alert(data.message);
            }
            else {

                categorieSelectionnee = data.categorieId;

                let niveau1Selectionne = null;

                $(".tr-categorie td").each(function() {
                    if($(this).attr("id") == "categorie-"+data.categorieId) {
                        $(this).removeClass("not-selectionnee").addClass("selectionnee");
                        niveau1Selectionne = $(this).data("niveau1");
                    }
                    else {
                        $(this).removeClass("selectionnee").addClass("not-selectionnee");
                    }
                });

                if(niveau1Selectionne != null) {
                    let trouve = false;
                    $(".tr-categorie td").each(function() {
                        if($(this).data("niveau1") == niveau1Selectionne && !trouve) {
                            $(this).removeClass("not-selectionnee").addClass("selectionnee");
                            trouve = true;
                        }
                    });
                }

                $("#documents-affiches h4.section").each(function() { $(this).remove(); });
                $("#documents-affiches .wrapper-checkbox").each(function() { $(this).appendTo("#tous-les-documents").fadeOut(); });
                for(section in data.allDocuments) {
                    $("<h4 class='section color-green pt-5 mb-4 to-print'></h4").html("<i class='fas fa-angle-right me-2'></i>"+section).appendTo("#documents-affiches");
                    for(i in data.allDocuments[section]) {
                        let documentId = data.allDocuments[section][i];
                        $("#wrapper-checkbox-"+documentId).appendTo("#documents-affiches").fadeIn();
                    }
                }

                $("#documents-affiches").fadeIn();
                $(".afficher-si-selection").fadeIn();

                $("#revenir-a-la-categorie-precedente").parent().parent().fadeOut();

                categorieSelectionneeLibelle = [];
                $(".tr-categorie").each(function() {
                    if($(this).data("categorie-id") == categorieSelectionnee) {
                        $(this).find("td").each(function() { categorieSelectionneeLibelle.push($(this).text()); });
                    }
                });
                categorieSelectionneeLibelle = categorieSelectionneeLibelle.join(" / ");

                $("#o2s-file-name").html(data.o2sFileName);

            }

            $.LoadingOverlay("hide");

        }

        checkboxChange = function(checkboxCaller) {
            let oneIsChecked = false;
            $(".checklist-checkbox-"+$(checkboxCaller).data("checkbox-id")).each(function() {
                if($(this).is(":checked")) {
                    oneIsChecked = true;
                }
                if($(this).attr("id") != $(checkboxCaller).attr("id")
                && $(checkboxCaller).is(":checked")
                && $(this).is(":checked")
                ) {
                    $(this).prop("checked", false);
                }
            });
            if(oneIsChecked) {
                $("#wrapper-checkbox-"+$(checkboxCaller).data("checkbox-id")).removeClass("border-silver").addClass("border-green").addClass("border-width-2px");
                $(".label-checkbox-"+$(checkboxCaller).data("checkbox-id")).removeClass("color-client").addClass("color-green");
                $("#row-commentaire-"+$(checkboxCaller).data("checkbox-id")).fadeIn();
            }
            else {
                $("#wrapper-checkbox-"+$(checkboxCaller).data("checkbox-id")).addClass("border-silver").removeClass("border-green").removeClass("border-width-2px");
                $(".label-checkbox-"+$(checkboxCaller).data("checkbox-id")).addClass("color-client").removeClass("color-green");
                $("#row-commentaire-"+$(checkboxCaller).data("checkbox-id")).fadeOut();
            }
        }

        saveForm = function() {

            $("#checklist_postMode").val("ajax");
            var form = $("#checklistForm");
            var actionUrl = form.attr('action');

            $.ajax({
                type: "POST",
                url: actionUrl,
                data: form.serialize(),
                success: function(data) {
                    $("#checklist_postMode").val("normal");
                    $("#date-maj").html(data.dateMaj);
                    $("#o2s-file-name").html(data.o2sFileName);
                }
            });

        }

        validerChecklistButtonClick = function() {

            if (!confirm("{{'Vous allez valider définitivement la checklist, continuer ?'|trans}}")) {
                return false;
            }

            impressionChecklist("valider");

        }

        imprimerChecklistButtonClick = function() {

            impressionChecklist("impression");

        }

        impressionChecklist = function(mode) {

            $.LoadingOverlay("show");

            $(".tr-categorie").each(function() {
                $(this).fadeOut();
            });

            $("#categorie-selectionnee-libelle").html(categorieSelectionneeLibelle).fadeIn();

            $(".row-commentaire").each(function() {
                let inputContent = $(this).find("input").val();
                if(inputContent == "") {
                    $(this).fadeOut();
                }

            });

            $("input").each(function() {
                $(this).css("border", "none");
            });

            if($("#checklist_commentaire").val() == "") {
                $("#wrapper-commentaire-global").fadeOut();
            }

            setTimeout(function() { envoiImagesServeur(mode); }, 1000);

        }

        envoiImagesServeur = function(mode) {

            saveForm();

            let nbElements = 0;
            $(".to-print").each(function() {
                if($(this).is(":visible")) {
                    nbElements++
                    $(this).data("index-element", nbElements);
                }
            });

            let randomInt = getRandomInt(1, 10000);

            $(".to-print").each(function() {
                if($(this).is(":visible")) {
                    let htmlToPrint = $(this)[0];
                    let indexElement = $(this).data("index-element");
                    html2canvas(htmlToPrint, {scale: 3}).then(function(canvas) {
                        $.ajax({
                            type: 'POST',
                            url: url_checklist_send_canvas_as_image,
                            data: {
                                mode: mode,
                                checklistId: checklistId,
                                randomInt: randomInt,
                                indexElement: indexElement,
                                nbElements: nbElements,
                                base64ImgString: canvas.toDataURL(),
                            },
                            success: function(data) {
                                if(data.result == "disconnect") {
                                    alert(TRANS_vous_avez_ete_deconnecte);
                                    window.location.replace(url_accueil);
                                }
                                else if(data.result == "ok") {
                                    if(data.hasOwnProperty('printPdfUrl') && data.printPdfUrl !== false) {
                                        window.location.replace(data.printPdfUrl);
                                    }
                                }
                                else {
                                    alert(data.message);
                                    window.location.replace(url_accueil);
                                }
                            },
                        });
                    });
                }
            });

        }

    </script>

    {{ encore_entry_script_tags('checklist-maj-script') }}
    {{ encore_entry_script_tags('jquery-ui-autocomplete-html') }}


{% endblock %}