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

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('selection-produit-maj-style') }}
    <style>
        td.repartition input {
            width: 50px;
            text-align: right;
        }
    </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>



            <div class="card">
                <div class="card-header py-1 color-client">
                    <h4>
                        {{'Contrats associés'|trans}}
                    </h4>
                </div>
                <div class="card-body card-body-integration">

                    <div id="liste-contrats-associes">
                        {% include 'selection-produit/maj-liste-contrats-associes.include.html.twig' %}
                    </div>

                </div>
            </div>

            <div class="card">
                <div class="card-header py-1 color-client">
                    <h4>
                        {{'Associer un contrat'|trans}}
                    </h4>
                </div>
                <div class="card-body card-body-integration">

                    <div class="heading heading-border heading-bottom-border mb-2">
                        <h4 class="">{{'Rechercher des contrats'|trans}}</h4>
                    </div>

                    <div class="row mt-3 mb-1">
                        <div class="col-md-4">
                            <h5 class="mb-0 color-orange">Assureur <i class="fas fa-arrow-right ms-1"></i></h5>
                        </div>
                        <div class="col-md-4">
                            <h5 class="mb-0 color-orange">Type de contrat <i class="fas fa-arrow-right ms-1"></i></h5>
                        </div>
                        <div class="col-md-4">
                            <h5 class="mb-0 color-orange">Filtrer par nom <span class="text-lowercase fw-normal fst-italic color-silver mx-1">(facultatif)</span> <i class="fas fa-arrow-right ms-1"></i></h5>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-4">
                            <select
                                class="form-control"
                                id="recherche-assureur"
                                onChange="adapteListeContrats();"
                            >
                                <option value="tous" selected="selected">{{'Tous les assureurs'|trans}}</option>
                                {% for codeAssureur, libelle in assureurs %}
                                    <option value="{{libelle}}">{{libelle}}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-4">
                            <select
                                class="form-control"
                                id="recherche-type"
                                onChange="adapteListeContrats();"
                            >
                                <option value="tous" selected="selected">{{'Tous les types de contrat'|trans}}</option>
                                {% for libelle in types %}
                                    <option value="{{libelle}}">{{libelle}}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-4">
                            <input
                                class="form-control"
                                placeholder="{{'Rechercher un nom de contrat'|trans}}"
                                id="recherche-contrat"
                                onKeyUp="adapteListeContrats();"
                            />
                        </div>
                    </div>

                    <table class="table table-sm mb-3">
                        <thead>
                            <tr>
                                <th class="">{{'Assureur'|trans}}</th>
                                <th class="">{{'Type de contrat'|trans}}</th>
                                <th class="">{{'Contrat'|trans}}</th>
                                <th class="px-5">{{'Action'|trans}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for contrat in contrats %}
                                <tr
                                    class="tr-contrat"
                                    data-assureur="{% if contrat.assureur is not null and contrat.assureur is not empty %}{{contrat_assureurs[contrat.assureur]['libelle']}}{% endif %}"
                                    data-type="{{typesParams[contrat.type]['libelle']}}"
                                    data-contrat="{{contrat.nom}}"
                                >
                                    <td class="color-orange">{% if contrat.assureur is not null and contrat.assureur is not empty %}{{contrat_assureurs[contrat.assureur]['libelle']}}{% endif %}</td>
                                    <td class="">{{typesParams[contrat.type]['libelle']}}</td>
                                    <td class="">{{contrat.nom}}</td>
                                    <td class="">
                                        <a
                                            class="px-5 fst-italic color-orange link-association"
                                            data-contrat-id="{{contrat.id}}"
                                            role="button"
                                            onClick="associerOuDissocierContrat('associer', {{contrat.id}});"
                                            {% if contrat.id in contratsAssociesIds %} style="display: none;" {% endif %}
                                        >
                                            <i class="fas fa-link me-1"></i>{{'Associer'|trans}}
                                        </a>
                                    </td>
                                </tr>
                            {% endfor %}
                            <tr id="contrats-ligne-aucun-resultat">
                                <td colspan="4" class="fst-italic color-silver">{{'Aucun contrat'|trans}}</td>
                            </tr>
                        </tbody>
                    </table>

                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                   <div class="form-action text-end">
                        <a
                            class="btn btn-client-primary-inverse"
                            href="{{path('attitudepatrimoine_selections_produits_liste')}}"
                        >
                            <i class="fas fa-arrow-right me-2"></i>{{'Retour à la liste des sélections'|trans}}
                        </a>
                   </div>
                </div>
                <div class="col-md-2">
                </div>
            </div>

        </div>
    </div>

{% endblock %}

{% block javascript %}

    {{ parent() }}

    <script>

        let selectionProduitId = {{selectionProduitId}};

        let contratsAssocies = [
            {% for contratId in contratsAssociesIds %}
                {{contratId}},
            {% endfor %}
        ];

        $(document).ready(function() {
            $("#recherche-assureur").val("tous");
            $("#recherche-type").val("tous");
        });

        window.adapteListeContrats = function() {

            let nb = 0;

            $(".tr-contrat").each(function() {
console.log($("#recherche-assureur").val()+" / "+$(this).data("assureur"));
                let assureur = false;
                if($("#recherche-assureur").val() == "tous"
                //|| ($("#recherche-assureur").val() == "aucun" && ($("#recherche-contrat").val() != "" || $("#recherche-type").val() != "aucun"))
                || $("#recherche-assureur").val() == $(this).data("assureur")
                ) {
                    assureur = true;
                }
                let type = false;
                if($("#recherche-type").val() == "tous"
                //|| ($("#recherche-type").val() == "aucun" && ($("#recherche-contrat").val() != "") || $("#recherche-assureur").val() != "aucun")
                || $("#recherche-type").val() == $(this).data("type")
                ) {
                    type = true;
                }
                let contrat = false;
                if(($("#recherche-contrat").val() != "" && $(this).data("contrat").toLowerCase().includes($("#recherche-contrat").val().toLowerCase()))
                //|| ($("#recherche-contrat").val() == "" && ($("#recherche-assureur").val() != "aucun" || $("#recherche-type").val() != "aucun"))
                || ($("#recherche-contrat").val() == "")
                ) {
                    contrat = true;
                }
                if(assureur && type && contrat) {
                    nb++;
                    $(this).css("display", "table-row");
                }
                else {
                    $(this).css("display", "none");
                }
            });

            $("#contrats-ligne-aucun-resultat").css("display", nb == 0 ? "table-row" : "none");

        }

        window.majRepartitionContrat = function(inputCaller) {

            let repartition = $(inputCaller).val().replace(".",",");
            repartition = numeral(repartition).format('0.00');
            repartition = repartition.replace(",",".");
            $(inputCaller).val(repartition);

            $.ajax({
                type: 'POST',
                url: "{{path('attitudepatrimoine_selection_produit_maj_repartition_contrat')}}",
                data: {
                    associationContratId: $(inputCaller).data("association-contrat-id"),
                    repartition: repartition,
                },
                success: majRepartitionContratCallback
            });

        }

        function majRepartitionContratCallback(data) {
            if(data.result == "disconnect") {
                alert(TRANS_vous_avez_ete_deconnecte);
                window.location.replace(url_accueil);
            }
            else if(data.result == "ko") {
                if(data.hasOwnProperty('message')) {
                    alert(data.message);
                }
            }
            else {
                $("#liste-contrats-associes").html(data.listeContratsAssocies);
                $("#input-association-contrat-id-"+data.nextAssociationContratIdToFocus).focus();
                $("#input-association-contrat-id-"+data.nextAssociationContratIdToFocus).select();
            }
        }

        window.associerOuDissocierContrat = function(associerOuDissocier, id) {

            if(associerOuDissocier == "dissocier" && !confirm("{{'Vous allez dissocier le contrat de la sélection, continuez ?'|trans}}")) {
                return;
            }

            $.ajax({
                type: 'POST',
                url: "{{path('attitudepatrimoine_selection_produit_associer_dissocier_contrat')}}",
                data: {
                    associerOuDissocier: associerOuDissocier,
                    selectionProduitId: selectionProduitId,
                    associationContratId: associerOuDissocier == "dissocier" ? id : null,
                    contratId: associerOuDissocier == "dissocier" ? null : id,
                },
                success: associerOuDissocierContratCallback
            });

        }

        function associerOuDissocierContratCallback(data) {
            if(data.result == "disconnect") {
                alert(TRANS_vous_avez_ete_deconnecte);
                window.location.replace(url_accueil);
            }
            else if(data.result == "ko") {
                if(data.hasOwnProperty('message')) {
                    alert(data.message);
                }
            }
            else {
                $(".link-association").each(function() {
                    if(data.contratsAssociesIds.includes($(this).data("contrat-id"))) {
                        $(this).css("display", "none");
                    }
                    else {
                        $(this).css("display", "table-cell");
                    }
                });
                $("#liste-contrats-associes").html(data.listeContratsAssocies);
            }
        }

    </script>

    {{ encore_entry_script_tags('selection-produit-maj-script') }}


{% endblock %}