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

{% block localstyle %}
    .homecard {
        margin: 20px 20px 0px 0px;
        float:left;
    }

    table {
        
    }

    th,td {
        border: 1px solid #37474F;
        color: #ffffff;
        background-color:#37474F;
        text-align:center;
        width: 70px;
    }
    td {
        background-color:#e8ecf1;
        cursor: help;
        height: 44px;
        vertical-align: top;
        color: #ffffff;        
    }

    .date {
        font-size: 9px;
        color: #37474F;
    }

    .allday {
        font-size: 12px;
        float:left;
        width:100%;
        height: 18px;   
        flex: 0 0 auto;     
    }

    .am, .ap {
        font-size: 12px;
        float:left;
        width:50%;   
        height: 18px;  
        flex: 0 0 auto;    
    }

    .astreinte {
        font-size: 11px;
        float:left;
        width:100%;  
        height:12px;       
    }

{% endblock %}


{% block body %}
    {% if fgprint is defined and fgprint %}<h1>Validation</h1>{%endif%}
    {% for user in users %}
        {% set nbday=1 %}

        <div class="card homecard" style="width:380px;">
            <div class="card-header">
                <img src="\{{appAlias}}\uploads\avatar\{{user.user.avatar}}" class='avatar no-print'>
                {{ user.user.displayname }}
            </div>            
            <div class="card-body">
                <table>
                    <thead>
                        <th class="no-print"></th>
                        <th>S</th>
                        <th>L</th>
                        <th>M</th>
                        <th>M</th>
                        <th>J</th>
                        <th>V</th>
                        <th>S</th>
                        <th>D</th>
                    </thead>

                {% set btnvalidate=false %}
                {% for event in user.events %}
                    {% if nbday==1 %} 
                        <tr id="{{user.user.id}}-{{event.date|date("Ymd")}}"}">
                            <td  class="no-print" style="vertical-align:middle">
                                {% set first=event.events|first %}
                                {% if first and first.validate %}
                                    <i class="fa fa-thumbs-down devalidate-{{user.user.id}}" onClick="devalidate({{user.user.id}},'{{event.date|date("Ymd")}}','{{event.date|date("m/d/Y")}}')" style="cursor:pointer; color:red;"></i>
                                {%else%}
                                    <i class="fa fa-thumbs-up validate-{{user.user.id}}" onClick="validate({{user.user.id}},'{{event.date|date("Ymd")}}','{{event.date|date("m/d/Y")}}')" style="cursor:pointer; color:green;{% if btnvalidate %}display:none{% endif %}"></i>
                                    {% set btnvalidate=true %}                                    
                                {%endif%}
                            </td>
                            <td class="date" style="vertical-align:middle">{{event.date|date("W")}}</td>
                    {% endif %}       

                    <td>
                        <div class="date">{{ event.date | date("d/m") }}</div>
                        <div class="d-flex flex-wrap">
                            {% set haveam=false %}
                            {% for detail in event.events %}
                                {% if detail.allday %}
                                    <div class='allday' style='background-color:{{ detail.colorday }};' title='{{ detail.descriptionday }}'>1</div>
                                {% else %}
                                    {%if detail.am %}
                                        {% set haveam=true %}
                                        <div class='am' style='background-color:{{ detail.coloram }};' title='{{ detail.descriptionam }}'>0.5</div>
                                    {% endif %}

                                    {%if detail.ap %}
                                        {% if not haveam %}<div class='am'></div>{%endif%}
                                        <div class='ap' style='background-color:{{ detail.colorap }};' title='{{ detail.descriptionap }}'>0.5</div>
                                    {% endif %}
                                {% endif %}
                            {% endfor %}
                        </div>

                        {% if event.astreinte %}
                            <div class='astreinte' style='background-color:{{ event.colorastreinte }};' title='{{ event.descriptionastreinte }}'>*</div>
                        {% else %}
                            <div class='astreinte'></div>
                        {% endif %}
                    </td>

                    {% set nbday=nbday+1 %}
                    {% if nbday==8 %} 
                        </tr>
                        {% set nbday=1 %}
                    {% endif %}       

                    
                {% endfor %}
                </table>
            </div>
        </div>
        {% if (loop.index % 2) == 0 %} <div class="new-page">&nbsp;</div> {% endif %}
    {% endfor %}
{% endblock %}

{% block localjavascript %}
    $(document).ready(function() {
        resizePanel();
    });

    $( window ).resize(function() {
        resizePanel();
    });

    function printPage(pdf,pdfName,options,lstPage,cpt) {
        pdf.addHTML($("#content h1"), 10, 10, options, function(){
            pdf.addHTML(lstPage[cpt], 0, 40, options, function(){
                cpt=cpt+1;
                if(cpt>=lstPage.length) {
                    $("#page-wrapper").first("row").css("width","initial");
                }
                else {
                    pdf.addPage();
                    printPage(pdf,pdfName,options,lstPage,cpt);
                }
            });
        });
    }

    function myprint() {
        document.location.href="{{path(app.request.attributes.get('_route'),{fgprint:true})}}";
    }

    function resizePanel() {
        maxheight=0;
        $( ".homecard" ).each(function( index ) {
            if($(this).height()>maxheight)
                maxheight=$(this).height();
        });        
        $( ".homecard" ).height(maxheight);
    }


    function validate(iduser,idday,day) {
        $.ajax({                                                            
            type: "POST",
            data: {
                iduser: iduser,
                day: day,
            },
            url: "{{ path('app_validation_validate') }}",
            success: function (response) {
                response=JSON.parse(response);
                if(response.return=="KO") {
                    alert(response.error);
                }
                else {
                    $(".devalidate-"+iduser).remove();
                    html="<i class=\"fa fa-thumbs-down devalidate-"+iduser+"\" onClick=\"devalidate("+iduser+",'"+idday+"','"+day+"')\" style=\"cursor:pointer; color:red;\"></i>";                   
                    $(".validate-"+iduser).first().replaceWith(html);
                    $(".validate-"+iduser).first().show();
                }
            }
        });        
    }

    function devalidate(iduser,idday,day) {
        $.ajax({                                                            
            type: "POST",
            data: {
                iduser: iduser,
                day: day,
            },
            url: "{{ path('app_validation_devalidate') }}",
            success: function (response) {
                response=JSON.parse(response);
                if(response.return=="KO") {
                    alert(response.error);
                }
                else {
                    location.reload();
                }
            }
        });        
    }

{% endblock %}