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

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

td {
    background-color: #e8ecf1;
    height: 44px;
    vertical-align: top;
    font-size: 9px;
    color: var(--colorftbodylight);
}

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

{% endblock %}

{% block body %}
    <h1 class="page-header">
    VALIDATION DES POINTAGES
    </h1>

    <a class="btn btn-secondary" href={{ path('app_tallyday') }}>Retour</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 %}
    
    <div class="mt-3">
    {% for date in dates %}
        <div class="card mr-1 mb-1 float-left">
            <div class="card-header">
                {{ date.displayname }}
            </div>

            <div class="card-body">
                <table>
                    <thead>
                        <tr>
                            <th class="no-print"></th>
                            <th style="width:30px !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>
                        {% if date.validates %}
                            <tr>
                                {% for validate in date.validates %}
                                    {% if loop.first %}
                                        <td style="font-size:14px; vertical-align:middle;"><i class="fa fa-thumbs-down" style="cursor:pointer; color:red;"></i></td>
                                        <td style="width:30px !important; vertical-align:middle;">
                                            {{validate.dateof|date("W")}}<br>
                                            = {{validate.timeweek }}
                                        </td>
                                    {% endif %}

                                    <td style="align:top">
                                        <div class="date">{{validate.dateof|date("d/m")}}</div>
                                        <div style="min-height:28px">
                                            {% if validate.tallyday %}
                                                {%if validate.tallyday.datestartam %} de {{validate.tallyday.datestartam|date("H:i") }} {% endif %}
                                                {%if validate.tallyday.dateendam %} à {{validate.tallyday.dateendam|date("H:i") }} {% endif %}

                                                {%if validate.tallyday.datestartam or validate.tallyday.dateendam %} <br> {% endif %}

                                                {%if validate.tallyday.datestartpm %} de {{validate.tallyday.datestartpm|date("H:i") }} {% endif %}
                                                {%if validate.tallyday.dateendpm %} à {{validate.tallyday.dateendpm|date("H:i") }} {% endif %}
                                            {% endif %}
                                        </div>

                                        <div>
                                            {% if validate.tallyday %}
                                            = {{validate.tallyday.timedayformatted}}
                                            {% else %}
                                            = 00:00
                                            {% endif %}
                                        </div>
                                    </td>
                                {% endfor %}
                            </tr>
                        {% endif %}

                        {% if date.notvalidates %}
                            {% for notvalidate in date.notvalidates %}
                                {% if loop.first or notvalidate.dateof|date("l")=="Monday" %}
                                    <tr>
                                    <td style="font-size:14px; vertical-align:middle;"><i class="fa fa-thumbs-down" style="cursor:pointer; color:red;"></i></td>
                                    <td style="width:30px !important; vertical-align:middle;">
                                        {{notvalidate.dateof|date("W")}}<br>
                                        = {{notvalidate.timeweek }}
                                    </td>
                                {% endif %}

                                <td style="align:top">
                                    <div class="date">{{notvalidate.dateof|date("d/m")}}</div>
                                    <div style="min-height:28px">
                                        {% if notvalidate.tallyday %}
                                            {%if notvalidate.tallyday.datestartam %} de {{notvalidate.tallyday.datestartam|date("H:i") }} {% endif %}
                                            {%if notvalidate.tallyday.dateendam %} à {{notvalidate.tallyday.dateendam|date("H:i") }} {% endif %}

                                            {%if notvalidate.tallyday.datestartam or notvalidate.tallyday.dateendam %} <br> {% endif %}

                                            {%if notvalidate.tallyday.datestartpm %} de {{notvalidate.tallyday.datestartpm|date("H:i") }} {% endif %}
                                            {%if notvalidate.tallyday.dateendpm %} à {{notvalidate.tallyday.dateendpm|date("H:i") }} {% endif %}
                                        {% endif %}
                                    </div>

                                    <div>
                                        {% if notvalidate.tallyday %}
                                        = {{notvalidate.tallyday.timedayformatted}}
                                        {% else %}
                                        = 00:00
                                        {% endif %}
                                    </div>
                                </td>

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