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

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

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

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

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

{% endblock %}

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

    <a class="btn btn-secondary" href={{ path('app_tallyday') }}>Retour</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_mastermonth',{monthof:"now"|date("Ym")}) }}>Rapport Mensuel</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" style="margin:auto; max-width:1800px;">
    {% for date in dates %}
        {% if date.validates or date.notvalidates %}
            <div class="card mr-1 mb-1 float-left">
                <div class="card-header">
                    <img src="{{date.avatar|urlavatar}}" class="avatar"> {{ date.displayname }}
                    <span class="float-right">Capital = {{date.capitaltime}}</span>
                </div>

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

                            {% if date.notvalidates %}
                                {% for notvalidate in date.notvalidates %}
                                    {% if loop.first or notvalidate.dateof|date("l")=="Monday" %}
                                        <tr>
                                        {% if loop.first %}
                                            {% set style = "" %}
                                        {% else %}
                                            {% set style = "display:none;" %}
                                        {% endif %}

                                        <td style="font-size:14px; vertical-align:middle;"><i id="{{date.id}}-{{notvalidate.dateof|date("Ymd")}}" data-user="{{date.id}}" onclick="validateweek({{date.id}},{{notvalidate.dateof|date("Ymd")}})" class="fa fa-thumbs-up fa-2x" style="cursor:pointer; color:var(--green);{{style}}"></i></td>
                                        <td style="width:30px !important; vertical-align:middle;">
                                            {{notvalidate.dateof|date("W")}}<br>
                                            =<br><strong style="font-size:130%">{{notvalidate.timeweek }}</strong>
                                        </td>
                                    {% endif %}

                                    <td style="align:top">
                                        <div class="date">{{notvalidate.dateof|date("d/m")}}</div>
                                        <div style="min-height:28px;">
                                            {% set breakdayall=false %}
                                            {% for tallyday in notvalidate.tallydays %}
                                                {% if tallyday.isbreakday %}
                                                    {% if tallyday.datestart|date("H")==10 %}
                                                        {% set breakdayall=true %}
                                                    {% endif %}                                                
                                                    {{tallyday.name}}
                                                {% else %}
                                                    <a href="{{path("app_tallyday_masterupdate",{id:tallyday.id})}}">
                                                        {%if tallyday.datestart %} de {{tallyday.datestart|date("H:i") }} {% endif %}
                                                        {%if tallyday.dateend %} à {{tallyday.dateend|date("H:i") }} {% endif %}
                                                    </a>
                                                {% endif %}
                                                <br>
                                            {% endfor %}
                                        </div>

                                        <div>
                                            {% if not breakdayall %}
                                                <a href="{{path("app_tallyday_mastersubmit",{userid:date.id,dateof:notvalidate.dateof|date("Y-m-d")})}}"><i class="fa fa-plus"></i></a>
                                            {% endif %}
                                            <br> = {{notvalidate.timeday}}
                                        </div>
                                    </td>

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

    function validateweek(userid,weekday) {
        $('body').css('cursor', 'wait');
        console.log(userid+" "+weekday);
        url="{{path("app_tallyday_mastervalidate",{userid:'xxx',weekday:'yyy'})}}"
        url=url.replace("xxx",userid);
        url=url.replace("yyy",weekday);

        $.ajax({
            method: "POST",
            url: url,
            success: function(data, dataType)
            {
                if(data.success) {
                    $(".devalidate-"+userid).remove();

                    url="{{path("app_tallyday_masterdevalidate",{userid:'xxx',weekday:'yyy'})}}"
                    url=url.replace("xxx",userid);
                    url=url.replace("yyy",weekday);
                    html='<a href='+url+' class="devalidate-'+userid+'"><i class="fa fa-thumbs-down fa-2x" style="cursor:pointer; color:red;"></i></a>';
                    $("#"+userid+"-"+weekday).replaceWith(html);
                    $("[data-user='"+userid+"']").first().show();
                }
                else alert(data.message);
                $('body').css('cursor', 'default');
            },
        }); 
    }

{% endblock %}