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

{% block localstyle %}
    {% if fgprint is defined and fgprint %}
        table { font-size:10px;}
        th,td {
            border: 1px solid #37474F;
        }
        thead {
	        display: table-header-group;
        }
        tr { page-break-inside: avoid; }     
        .homecard  {width: 100% }   
    {%endif%}

{% endblock %}

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

    <div class="custom-control custom-switch float-right">
    <input type="checkbox" class="custom-control-input" id="switchactive" {% if app.session.get('activetimer') %} checked {% endif %}>
    <label class="custom-control-label" for="switchactive">Horaires à Valider</label>
    </div>
    <div style="height:30px;">
   
    </div>
    <div class="card homecard">
        <div class="card-header">
            {% if not app.session.get('activetimer') %}
                Horaires à Dévalider
            {% else %}
                Horaires à Valider
            {% endif %}
        </div>            
        
        <div class="card-body">
            <div class="dataTable_wrapper">
                <table class="table table-striped table-bordered table-hover small" id="dataTables" style="width:100%">
                    <thead>
                        <th class="no-print"></th>
                        <th width="150px">Utilisateur</th>
                        <th>Tâche</th>
                        <th>Description</th>
                        <th>Début</th>
                        <th>Fin</th>
                        <th>Durée</th>
                    </thead>

                    {% for user in users %}
                        {% for timer in user.timers %}
                            <tr id="row-{{timer.id}}">
                                <td  class="no-print" style="vertical-align:middle">
                                    {% if timer.validate %}
                                        <i class="fa fa-thumbs-down validate-{{user.user.id}}" onClick="devalidate({{timer.id}})" style="cursor:pointer; color:red;"></i>
                                    {% else %}
                                        <i class="fa fa-thumbs-up validate-{{user.user.id}}" onClick="validate({{timer.id}})" style="cursor:pointer; color:green;"></i>
                                    {% endif %}
                                </td>

                                <td>
                                    {{ user.user.displayname }}
                                </td>

                                <td>
                                    {{ timer.taskname }}
                                </td>
                                <td>
                                    <span class="font-weight-bold">
                                        {{ timer.activepenalty ? "<i class='fa fa-exclamation' style='color:red;opacity: 0.33;'></i> Astreinte active" : "" }}
                                    </span>
                                    <span class="font-weight-bold">
                                        {{ timer.additionalhour ? "<i class='fa fa-exclamation-triangle' style='color:red;opacity: 0.33;'></i> Heures supplémentaires" : "" }}
                                    </span>
                                    <p>{{ timer.description }}</p>
                                </td>
                                <td>
                                    {{ timer.start|date("d/m/Y H:i") }}
                                </td>

                                <td>
                                    {{ timer.end|date("d/m/Y H:i") }}
                                </td>

                                <td>
                                    {{ timer.duration|date("H:i") }}
                                </td>

                            </tr>
                            
                        {% endfor %}
                    {% endfor %}
                </table>
            </div>
        </div>
    </div>
    
{% endblock %}

{% block localjavascript %}
    $(document).ready(function() {
        {% if not fgprint is defined or not fgprint %}
            $('.table ').DataTable({
                columnDefs: [ { "targets": "no-sort", "orderable": false }, { "targets": "no-string", "type" : "num" } ],
                responsive: true,
                iDisplayLength: 100,
                order: [[ 1, "asc" ]]
            });
        {%else%}
            $('#dataTables').removeClass("table table-striped table-bordered table-hover small dataTable no-footer");        
        {% endif %}
    });

    function myprint() {
        href=document.location.href;
        document.location.href=href+"?fgprint=true";
    }     

    function validate(id) {
        $.ajax({                                                            
            type: "POST",
            data: {
                id: id,
            },
            url: "{{ path('app_validationtimer_validate') }}",
            success: function (response) {
                response=JSON.parse(response);
                if(response.return=="KO") {
                    alert(response.error);
                }
                else {
                    $("#row-"+id).remove();
                }
            }
        });        
    }

    function devalidate(id) {
        $.ajax({                                                            
            type: "POST",
            data: {
                id: id,
            },
            url: "{{ path('app_validationtimer_devalidate') }}",
            success: function (response) {
                response=JSON.parse(response);
                if(response.return=="KO") {
                    alert(response.error);
                }
                else {
                    $("#row-"+id).remove();
                }
            }
        });        
    }

    $('#switchactive').change(function() {
        window.location="{{ path('app_validationtimer_activetimer' )}}";
    });

{% endblock %}