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

{% block localstyle %}
    .clock {
        background-color: #000;
        color: #fff;
        padding: 0px 20px 20px 20px;
        font-size: 40px;
        border-radius: 5px;
        text-align: center;
        line-height:30px;
        width:250px;
    }
    .clock small {
        font-size: 30%;
        margin-top:-15px;
    }

    .alert {
        width:250px;
    }

    .tallydaydetail {
        width:250px;
        text-align: left;
        margin-top: 20px;
    }
{% endblock %}
{% block body %}
    <center>
        <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 %}

        {% if tallyday is null %}
        <a href="{{path("app_tallyday_start")}}" class="btn btn-success" >Début Pointage</a>
        {% elseif tallyday.datestartam is not null and tallyday.datestartpm is null and tallyday.dateendam is null %}
        <a href="{{path("app_tallyday_endam")}}" class="btn btn-success" >Fin Pointage<br>Matin</a>
        {% elseif tallyday.datestartpm is null %}
        <a href="{{path("app_tallyday_startpm")}}" class="btn btn-success" >Début Pointage<br>Après-midi</a>
        {% elseif tallyday.datestartpm is not null and tallyday.dateendpm is null %}
        <a href="{{path("app_tallyday_endpm")}}" class="btn btn-success" >Fin Pointage<br>Après-midi</a>
        {% endif %}

        <div class="tallydaydetail">
            {% if tallyday %}
                Matin<br>
                {%if tallyday.datestartam %}de {{ tallyday.datestartam|date("d/m/y H:i") }}<br>{%endif%}
                {%if tallyday.dateendam %}à {{ tallyday.dateendam|date("d/m/y H:i") }}<br>{%endif%}<br>

                Après-midi<br>
                {%if tallyday.datestartpm %}de {{ tallyday.datestartpm|date("d/m/y H:i") }}<br>{%endif%}
                {%if tallyday.dateendpm %}à {{ tallyday.dateendpm|date("d/m/y H:i") }} {%endif%}<br>                
            {% else %}
                Matin =<br>Après-midi =
            {% endif %}
        </div>
        
        {% if not tallyday or (tallyday and not tallyday.validateuser and not tallyday.validatemaster) %}
            <a href="{{path("app_tallyday_userupdate")}}" class="btn btn-success mt-3" style="{% if tallyday %} width: 180px; margin-right:20px; {% else %} width: 380px; {% endif %};" >Modifier ma journée</a>
            {% if tallyday %}
                <a href="{{path("app_tallyday_uservalidate")}}" class="btn btn-success mt-3"  style="width:180px" data-method="confirm" data-confirm="Êtes-vous sûr de vouloir valider votre journée ?">Valider ma journée</a>
            {% endif %}
            <br>
        {% endif %}

        <a href="{{path("app_tallyday_userlist")}}" class="btn btn-success mt-3"  style="width:380px">Gérer mes Pointages</a>
        
        {% if tallyday and tallyday.validateuser and not tallyday.validatemaster %}
            <br><a href="{{path("app_tallyday_userdevalidate")}}" class="btn btn-secondary mt-3"  style="width:380px">Dévalider ma journée</a>
        {% endif %}

    </center>
{% endblock %}

{% block localjavascript %}
    function showTime(){
        // to get current time/ date.
        var date = new Date();
        
        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 %}