{% 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 CONGES
    </h1>

    <div class="custom-control custom-switch float-right">
    <input type="checkbox" class="custom-control-input" id="switchactive" {% if app.session.get('activeholiday') %} checked {% endif %}>
    <label class="custom-control-label" for="switchactive">Congès à Valider</label>
    </div>
    <div style="height:30px;">
    {% if not app.session.get('activeholiday') %}
    On ne peut dévalider des congés que si la semaine de travail n'a pas été validée
    {% endif %}
    </div>

    <div class="card homecard">
        <div class="card-header">
            {% if not app.session.get('activeholiday') %}
                Congé à Dévalider
            {% else %}
                Congé à 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>Utilisateur</th>
                        <th>Tâche</th>
                        <th>Début</th>
                        <th>Fin</th>
                        <th>Durée</th>
                    </thead>

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

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

                                <td>
                                    {{ event.task }}
                                </td>

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

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

                                <td>
                                    {{ event.duration }}
                                </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_validationholiday_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_validationholiday_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_validationholiday_activeholiday' )}}";
    });

{% endblock %}