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

{% block localstyle %}
th, td {
    border: 1px solid #37474F;
    color: #ffffff;
    background-color: #37474F;
    text-align: center;
    width: 100px;
    padding: 0px;
}

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

{% if fgprint %}
    .card {float: none !important; }
    .card, .card-header {border: none;}
    .breakpage {
        page-break-after: always;
    }    
{% endif %}

.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>

    {% 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 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>
    {% 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 class="mt-3" style="margin:auto; max-width:1800px;">
    {% 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{% endif %} ">
                <div class="card-header">
                    <img src="{{date.avatar|urlavatar}}" class="avatar"> {{ date.displayname }}
                </div>

                <div class="card-body">
                    <table>
                        <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>

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

                                <td style="align:top">
                                    <div class="date">{{validate.dateof|date("d/m")}}</div>
                                    <div style="min-height:28px">
                                        {% for tallyday in validate.tallydays %}
                                            {% if tallyday.isbreakday %}
                                                {% 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 %}
                                            {%endif%}
                                            <br>
                                        {% endfor %}
                                    </div>

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

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

{% endblock %}