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

{% block localstyle %}
    table { width:100% }
    th, td {
        border: 1px solid var(--colorbgbodylight);
        width:33.333333%;
        padding:5px;
        text-align:center;
        font-size: 10px;
    }


    .clock {
        background-color: var(--dark);
        color: #fff;
        padding: 0px 20px 20px 20px;
        font-size: 40px;
        text-align: center;
        line-height:30px;
        width:250px;
        border-radius: 0.25rem;
    }
    .clock small {
        font-size: 30%;
        margin-top:-15px;
    }

    .alert {
        width:250px;
    }

    .tallydaydetail {
        width:250px;
        text-align: left;
        margin-top: 20px;
    }

    @media (max-width: 991px) {
        .zoomed { 
            zoom: 240%;
        }
    } 
{% endblock %}
{% block body %}
    <center class="zoomed">
        <div class="clock mb-3" id="clock"> </div>
        {% 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 %}

        {% set isvalideuser=false %}
        {% set isvalidemaster=false %}
        {% for tallyday in tallydays %}
            {% set isvalideuser=tallyday.validateuser %}
            {% set isvalidemaster=tallyday.validatemaster %}
        {% endfor %}

        {% if not tallydays or not tallydays|last.dateend is null %}
            {% if not isvalideuser and not isvalidemaster %}
                <a href="{{path("app_tallyday_start")}}" class="btn btn-success" style="font-size:150%; width:250px;">Début Pointage</a>
            {% endif %}
        {% else %}
        <a href="{{path("app_tallyday_end")}}" class="btn btn-success" style="font-size:150%; width:250px;">Fin Pointage</a>
        {% endif %}

        <div class="tallydaydetail">
            <table>
                <thead>
                    <tr>
                        <th>Début</th>
                        <th>Fin</th>
                        <th>Temps</th>
                    </tr>
                </thead>

                <tbody>
                {% set isvalideuser=false %}
                {% set isvalidemaster=false %}

                {% for tallyday in tallydays %}
                    {% set isvalideuser=tallyday.validateuser %}
                    {% set isvalidemaster=tallyday.validatemaster %}

                    <tr>
                        <td>{{tallyday.datestart|date("H:i")}}</td>
                        <td>{% if tallyday.dateend %} {{tallyday.dateend|date("H:i")}} {%endif%}</td>
                        <td>{{tallyday.timedayformatted}}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="mt-3 mb-3" style="width:250px">Temps de travail<br><span style="font-size:150%">{{timeday}}</span></div>
        <div class="mt-3 mb-3" style="width:250px">Capital Temps<br><span style="font-size:150%">{{capitaltime}}</span></div>        
        
        {% if not isvalideuser and not isvalidemaster %}
            <a href="{{path("app_tallyday_uservalidate",{dateof:"now"|date("Y-m-d")})}}" class="btn btn-danger mt-3"  style="width:380px" data-method="confirm" data-confirm="Êtes-vous sûr de vouloir valider votre journée ?">Valider ma journée</a>
            <br>
        {% endif %}

        <a href="{{path("app_tallyday_userlist")}}" class="btn btn-secondary mt-3"  style="width:380px">Gérer mes Pointages</a>

        {% if isvalideuser and not isvalidemaster %}
        <br><a href="{{path("app_tallyday_userdevalidate",{dateof:"now"|date("Y-m-d")})}}" class="btn btn-warning mt-3"  style="width:380px">Dévalider ma journée</a>
        {% endif %}
        
        {% if is_granted('ROLE_MASTER') %}
            <hr class="mt-5" style="width: 300px; background-color:var(--colorbgbodylight);">
            <h3>GESTION</h3>
            <a href="{{path("app_tallyday_masterlist")}}" class="btn btn-success mt-3"  style="width:380px">Gestion des Pointages</a>
        {% endif %}



    </center>
{% endblock %}

{% block localjavascript %}

    var now=new Date();
    function showTime(){
        // to get current time/ date.
        var date = new Date();
        
        // Recharger la page au cas où on change de jour
        if(moment(date).diff(moment(now), "days")!=0) location.reload();

        // Masquer les alerte au bout 30s
        if(moment(date).diff(moment(now), "seconds")>5 && $(".alert").length) window.location.replace("{{path("app_tallyday")}}");

        var dm = date.toLocaleDateString('fr-FR', { weekday: 'long' }); 

        // to get the current hour
        var h = date.getHours();

        // to get the current minutes
        var m = date.getMinutes();

        //to get the current second
        var s = date.getSeconds();
    
        m = ( m < 10 ) ? m = "0" + m : m;
        s = ( s < 10 ) ? s = "0" + s : s;
    
        // putting time in one variable
        var time = "<small>" + dm + " " + date.toLocaleDateString("fr") + "</small><br>" + h + ":" + m + ":" + s;
        
        // putting time in our div
        $('#clock').html(time); 
        
        //to change time in every seconds
        setTimeout( showTime, 1000 );
    }
    showTime();

{% endblock %}