{% extends 'base.html.twig' %}

{% block title %}{{obj.nom}}{% endblock %}

{% block body %}
    <section id="ajax-loader"><img src="{{ asset('images/ajax-loader.gif') }}" /><span id="loadMessage">Chargement...</span></section>
    <section class="container">
        {% include 'utils/file.ariane.html.twig' %} 
        
        <h4 class="me-auto titre" id="{{obj.code}}">Planning : {{obj.nom}}</h4>
        <hr/><br />

        <div class="d-flex justify-content-between">
            {% if type == 'all' %}
                <a class="btn btn-sm btn-primary" href="/pole"><i class="bi bi-chevron-compact-left"></i> Vers aux pôles</a>
            {% else %}
                <a class="btn btn-sm btn-primary" href="/{{ type }}/read/{{obj.code}}"><i class="bi bi-chevron-compact-left"></i> Vers {{ obj.nom }}</a>
            {% endif %}            
            <a class="btn btn-sm btn-primary" href="/planning/send/rapport/{{obj.code}}/{{ type }}/{{annee}}/{{mois}}"><i class="bi bi-envelope"></i> Envoyer le planning</a>
        </div>
        <hr /> <br/>

        <div class="row">
            <div class="col-md-8 col-sm-6 text-center">
                <div class="input-group mb-3">
                    <span class="input-group-text" id="basic-addon1" style="height:35px;">Mois</span>
                    <select id="choiceMonth" onchange="aller_liste()" class="form-select" aria-label="Default select example">
                        {% for i in 1..12 %}
                            {% if i == mois  %}
                                <option value="{{i}}" selected>{{ app_utils.moisName(i) }}</option>
                            {% else %}
                                <option value="{{i}}">{{ app_utils.moisName(i) }}</option>
                            {% endif %}                            
                        {% endfor %}
                    </select>
                </div>
            </div>     
            <div class="col-md-4 col-sm-6">
                <div class="input-group mb-3">
                    <span class="input-group-text" id="basic-addon1" style="height:35px;">Année</span>
                    <select id="choiceYear" onchange="aller_liste()" class="form-select" aria-label="Default select example">
                        {% for a in annees %}
                            {% if a == annee  %}
                                <option value="{{a}}" selected>{{a}}</option>
                            {% else %}
                                <option value="{{a}}">{{a}}</option>
                            {% endif %}
                        
                        {% endfor %}
                    </select>
                </div>
            </div>
        </div>
        <hr /> <br />

        {% if events is defined and events|length > 0  %}
            {% for obj in events %}
                <section class="rapport-container">
                    <table class="w-100">
                        <tr>
                            <td colspan="2" class="planning-date">
                                <!-- ====================================================
                                ==== ==   Définition de l'évènement - planning-date 
                                ==== ====================================================
                                -->
                                {{ obj.nom }} du {{ obj.dateEvt | date("d", "Europe/Paris")}} {{ app_utils.moisName(obj.dateEvt | date("m", "Europe/Paris")) }} {{ obj.dateEvt | date("Y", "Europe/Paris")}}
                            </td>
                        </tr>
                        {#  =======================================================
                        ## == Présentation de chaque pole
                        ## ======================================================= #}
                        {% for pole in obj.poles %}
                             {% if pole.show == true %}
                                {% include 'pole/planning/pole.html.twig'  with {'pole': pole, 'obj': obj, 'mode': 'edit' } %}
                            {% endif %}                            
                        {% endfor %}  
                    </table>

                </section><br /><br/>
            {% endfor %}             
        {% else %}
            <p>Aucun planning</p>
        {% endif %}
    </section>   
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        function aller_liste(){
            var code = $("h4.titre").attr("id");
            var an = $("#choiceYear").val();
            var m = $("#choiceMonth").val();            
            //var m = $("input[name=btnradio]").filter(":checked").val();
            //console.log(`/evenement/liste/1/10/${an}/${m}`);
            window.location.href = `/planning/liste/${code}/${an}/${m}`;
        }

        function init(){
            $(".planning-item").each(function(){
                $(this).find("form").fadeOut();
                $(this).find("#plndisplay").fadeOut();
                $(this).parent().parent().find('#save-pln').fadeOut();
            });
        }

        function save(ident){
            const form = $(`#${ident}`).find("form");
            const personneUID = $(`#${ident}`).find("#personneUID");
           
            if(personneUID && personneUID.val() != ""){
                $.post(form.attr("action"), form.serialize()).done(function( data ) {
                    $("#ajax-loader").hide(); 
                });
            }
            
        }

        function edit(ident, onchoice){   
            const plnContainer = $(`#${ident}`);     
            if(onchoice == true){
                plnContainer.find("form").fadeIn();
                plnContainer.parent().parent().find('#save-pln').fadeIn(500);
                plnContainer.find("#plndisplay").empty();
                plnContainer.parent().parent().find('#edit-pln').fadeOut();
            }else {      
                const personneUID = plnContainer.find("#personneUID");         
                plnContainer.find("form").fadeOut();
                plnContainer.parent().parent().find('#save-pln').fadeOut();
                plnContainer.parent().parent().find('#edit-pln').fadeIn(500);
               
                if(personneUID == undefined || personneUID.val() == ""){
                    plnContainer.find("div").html("<i><span class=\"text-danger\">Non défini</span></i>").fadeIn();
                } else {
                    plnContainer.find("div").html("<span style=\"margin-right:7px;\">" + plnContainer.find("select option:selected").text() + "</span>").fadeIn();
                }
                save(ident);                
            }
        }

        $( document ).ready(function() {
            $("#ajax-loader").hide(); 
            init();
        });
    </script>
{% endblock %}