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

{% block localstyle %}
th, td {
    border: 1px solid #37474F;
    color: #ffffff;
    background-color: #37474F;
    text-align: center;
    width: {% if fgprint %}135px{%else%}115px{%endif%};
    padding: 0px;
}

td {
    background-color: #e8ecf1;
    height: 44px;
    vertical-align: top;
    font-size: {% if fgprint %}10px{%else%}12px{%endif%};
    color: var(--colorftbodylight);
    {% if fgprint %}color:#000000 !important;{%endif%}
}

@media print {
    .noprint { display:none; }
    body,h1,.card-header {font-family: 'arial' !important}
    
    .card {float: none !important; }
    .card, .card-header {border: none;}
    .breakpage {
        page-break-after: always;
    }    
    .nobreakpage{
        page-break-after: unset;
    }    
    .card-body {padding:0px;}
    .fulltable{width:100%;}
}

.date {
    color: #ffffff;
    background-color: #37474F;
}

.nounderline:hover {
    text-decoration:none;
}

{% endblock %}

{% block body %}
    <h1 class="page-header">
    RAPPORT MENSUEL = {{ monthof|date("m/Y") }}
    </h1>

    <div class="noprint">
    {% if not fgprint %}
        <a class="btn btn-secondary mr-2" href={{ path('app_tallyday') }}>Retour</a>
        <a class="btn btn-secondary mr-2" href={{ path('app_tallyday_mastermonth',{monthof:prevmonth}) }}>Mois Précédent</a>
        <a class="btn btn-secondary mr-2" href={{ path('app_tallyday_mastermonth',{monthof:nextmonth}) }}>Mois Suivant</a>
        <!-- <a class="btn btn-secondary mr-2" href={{ path('app_tallyday_mastermonth',{monthof:monthof|date("Ym"),type:"pdf"}) }}>Export PDF</a> -->
        <a id="btnprint" class="btn btn-secondary mr-2" href="#">Imprimer</a>
        

        <a class="btn btn-secondary float-right" href={{ path('app_tallyday_masterexport') }}>Export CSV</a>
        <a class="btn btn-secondary float-right mr-2" href={{ path('app_tallyday_masterlist') }}>Gestion des Pointages</a>
        <a class="btn btn-secondary float-right mr-2" href={{ path('app_timeextra') }}>Gestion Heures Sup</a>
        {% if message is defined and not message is empty %}
            <div class='alert alert-danger' style='margin: 5px 0px'>
                <strong>Erreur</strong><br>
                {{ message|raw }}<br>
            </div>
        {% endif %}
    {% endif %}
    </div>

    <div class="mt-3" style="margin:auto; max-width:1810px;">
    {% set nbusers=0 %}
    {% for date in dates %}
        {% if date.validates %}
            {% set nbusers=nbusers+1 %}

            <div class="card mr-1 mb-1 float-left {% if nbusers==2 %}breakpage{%else%}nobreakpage{% endif %} ">
                <div class="card-header">
                    {% if not fgprint %} <img src="{{date.avatar|urlavatar}}" class="avatar noprint">{%endif%} {{ date.displayname }}
                    <div class="float-right text-right">
                        {{date.timemonth}} / {{ timetowork }}
                    </div>
                </div>

                <div class="card-body">
                    <table class="fulltable">
                        <thead>
                            <tr>
                                <th style="width:50px !important">s</th>
                                <th>L</th>
                                <th>M</th>
                                <th>M</th>
                                <th>J</th>
                                <th>V</th>
                                <th>S</th>
                                <th>D</th>
                            </tr>
                        </thead>                
                    
                        <tbody>
                            {% for validate in date.validates %}
                                {% if loop.first or validate.dateof|date("l")=="Monday" %}
                                    <tr>
                                    {% if loop.first %}
                                        {% set style = "" %}
                                    {% else %}
                                        {% set style = "display:none;" %}
                                    {% endif %}

                                    <td style="width:50px !important; vertical-align:middle;">
                                        {{validate.dateof|date("W")}}
                                    </td>

                                {% endif %}

                                {% if loop.first and validate.dateof|date("l")!="Monday"%}
                                    {% for i in 2..(validate.dateof|date("N")) %}
                                    <td></td>
                                    {% endfor %}                                    
                                {%endif %}

                                <td style="align:top">
                                    <div class="date">{{validate.dateof|date("d/m")}}</div>
                                    <div class="datedetail" style="min-height:28px">
                                        {% for tallyday in validate.tallydays %}
                                            {% if tallyday.name %}
                                                {% if tallyday.datestart|date("H")==10 %}
                                                    {% set breakdayall=true %}
                                                {% endif %}                                                
                                                {{tallyday.name}}
                                            {% else %}                                                
                                                {%if tallyday.datestart %} de {{tallyday.datestart|date("H:i") }} {% endif %}
                                                {%if tallyday.dateend %} à {{tallyday.dateend|date("H:i") }} {% endif %}


                                                {% if tallyday.istelework %}
                                                    <i class="fas fa-home" title="Télétravail"></i>
                                                {% endif %}
                                                {% if tallyday.ispenaltypassive %}
                                                    <i class="fas fa-glasses" title="Astreinte Passive"></i>
                                                {% endif %}     
                                                {% if tallyday.ispenaltyactive %}
                                                    <i class="fas fa-fire" title="Astreinte Active"></i>
                                                {% endif %}                                                  
                                            {%endif%}
                                            <br>
                                        {% endfor %}
                                    </div>

                                    <div>
                                        = {{validate.timeday}}
                                    </div>
                                </td>

                                {% if loop.last or validate.dateof|date("l")=="Sunday"%}
                                    <tr>
                                {% endif %}                                
                            {% endfor %}
                        </tbody>
                    </table>

                    {%if date.timetelework!="0:00" or date.timepenaltypassive!="0:00" or date.timepenaltyactive!="0:00" %}
                        <div class="mt-3" style="font-family:var(--fontbody)">
                        <table><tr>
                    {% endif %}
                    {%if date.timetelework!="0:00"%}
                        <td class="p-2" ><i class="fas fa-home fa-2x"></i><br>Télétravail<br>{{date.timetelework}}</td>
                    {%endif%}

                    {%if date.timepenaltypassive!="0:00"%}
                        <td class="p-2"><i class="fas fa-glasses fa-2x"></i><br>Astreinte Passive<br>{{date.timepenaltypassive}}</td>
                    {%endif%}
                    
                    {%if date.timepenaltyactive!="0:00"%}
                        <td class="p-2"><i class="fas fa-fire fa-2x"></i><br>Astreinte Active<br>{{date.timepenaltyactive}}</td>
                    {%endif%}

                    {%if date.timetelework!="0:00" or date.timepenaltypassive!="0:00" or date.timepenaltyactive!="0:00" %}
                        </tr></table></div>                    
                    {% endif %}
                    
                </div>
            </div>

            
            {% if nbusers==2 %}
                {% set nbusers=0 %}
            {% endif %}
        {% endif %}
    {% endfor %}
    </div>
{% endblock %}

{% block localjavascript %}
    $(document).ready(function() {
        $('#dataTables').DataTable({
            columnDefs: [ { "targets": "no-sort", "orderable": false }, { "targets": "no-string", "type" : "num" } ],
            responsive: true,
            iDisplayLength: 100,
            paging:   false,
            ordering: false,            
            info: false,
            searching: false,
        });

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

        $("#btnprint").click(function(){
            window.print();
            return false;
        });
    });

{% endblock %}