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

{% block title "Umalis - Système de gestion des présences" %}
{% block stylesheets %}
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="{{ asset('backEnd/assets/css/jdeflow.css') }}" />
{% endblock %}
{% block body %}

    <div align="center" class="col-md-12" style="background: #12a2e352;padding: 3%;color:#000;margin-bottom: 15px;border: 1px solid #ccc;border-radius: 5px;">
        <h3 class="text-center" style="color:#000!important;">Umalis - Système de gestion des présences</h3>
        <div>
            <img class="img-thumbnail" src="{{ asset('frontEnd/assets/images/logoSite.jpg') }}" style="margin: 0 auto;height: 100px;object-fit: contain;object-position: 50% 50%!important;" width="30%">
        </div>

    </div>

    <div align="center" class="device-Control col-md-12" style="display:none;border: 1.5px solid #ccc;border-radius: 5px;background: #eee;padding: 3%;">
        <hr/>
            <h4 style="color:#000;">Le système de gestion des présences ne peut pas être utilisé sur les appareils mobiles ou tablettes. Il est uniquement disponible sur le mode Desktop.</h4>
        <hr/>
    </div>
    
    <div align="center" class="dashboard-Control col-md-12" style="border: 1.5px solid #ccc;border-radius: 5px;background: #eee;padding: 3%;">

        <section id="DateNow">
            <h4>Pointage du {{ "now"|date("d/m/Y") }}</h4>
            <hr style="border-top: 1px solid #C45C8E!important;"/>


            <div align="center" class="connectedUser" style="{% if isConnected is defined and isConnected is not null and isConnected == 1 %} display:block; {% else %} display: none;{% endif %}">
                <p style="color:#18b14f;"><img class="green-clignote" src="{{ asset('backEnd/assets/images/loading/green_point.gif') }}" width="70px" height="70px" style="margin: 0 auto;"><b>Statut : Connecté - Enregistrement en cours ...</b>
                </p>
            </div>

            <div align="center" class="disconnectedUser"  style="{% if isConnected is defined and isConnected is not null and isConnected == 0 %} display:block; {% else %} display: none;{% endif %}">
                <p style="color:#C45C8E;"><b>Statut en cours : Déconnecté - Compteur arrêté</b></p>
            </div>


            <p style="color:#000;">Noté bien que le pointage est enregsitré selon le fuseau horaire <b>Europe/Paris</b></p>


            <p>
                <a class="btn btnRecordDayInfo" style="border:1px solid #ccc; border-radius: 5ox;" data-toggle="collapse" href="#collapseDayInfo" role="button" aria-expanded="false" aria-controls="collapseDayInfo">
                    Historique du pointage d'aujourd'hui
                </a>
            </p>
            <div class="collapse" id="collapseDayInfo">
                <div class="RecordDayInfoContent card card-body"></div>
            </div>




            <hr style="border-top: 1px solid #C45C8E!important;"/>
        </section>
        {% if isholidayToday == 0 %}

            <section id="stopWatch">
                <!-- <h6>Hour : Minutes : Seconds</h6> -->
                <p id="timer"><span style="font-size:12px;">cliquer sur Commencer / Reprise pour actualiser le record ...</span></p>
                <div class="divBtn">
                    <button id="start"> Commencer / Reprise</button>
                    <button id="stop" hidden> Arrêter </button>
                    <button id="pause" hidden> Pause </button>
                    <button id="continue" hidden> Continuer </button>
                </div>
                <p id="fulltime" class="fulltime"> </p>
            </section>

        {%else %}

            {% if holidayToday is defined and holidayToday is not null %}
                
                <section>
                <hr/>
                    <h4 style="color:#000;">Actuellement, vous êtes en période de congé du {{ holidayToday.beginDate|localizeddate('long', 'short', 'fr')}} à {{holidayToday.endDate|localizeddate('long', 'short', 'fr')}} et il n'est pas possible de faire le pointage avant la fin des jours de congé.</h4>
                <hr/>
                </section>

            {%endif%}
        {%endif%}

    </div>

    <br/><br/>

{% endblock %}
{% block javascripts %}
    <script>

        /* initialization of different variables
         to be used in Count-Up App*/
        var clearTime;
        var seconds = 0,
                minutes = 0,
                hours = 0;
        var secs, mins, gethours;

        if (localStorage.getItem("seconds") === null)
        {
            localStorage.setItem("seconds",0);
        }

        if (localStorage.getItem("minutes") === null)
        {
            localStorage.setItem("minutes",0);
        }

        if (localStorage.getItem("hours") === null)
        {
            localStorage.setItem("hours",0);
        }


        function startWatch() {
                
            /* check if seconds is equal to 60 and add a +1
             to minutes, and set seconds to 0 */
            seconds = parseInt(localStorage.getItem("seconds"));
            minutes = parseInt(localStorage.getItem("minutes"));
            hours = parseInt(localStorage.getItem("hours"));

            if (seconds === 60) {
                seconds = 0;
                minutes = minutes + 1;
                localStorage.setItem("seconds",seconds);
                localStorage.setItem("minutes",minutes);
            }

            /* i used the javascript tenary operator to format
             how the minutes should look and add 0 to minutes if
             less than 10 */
            mins = minutes < 10 ? "0" + minutes + ": " : minutes + ": ";
            /* check if minutes is equal to 60 and add a +1
             to hours set minutes to 0 */
            if (minutes === 60) {
                minutes = 0;
                hours = hours + 1;
                localStorage.setItem("minutes",minutes);
                localStorage.setItem("hours",hours);
            }
            /* i used the javascript tenary operator to format
             how the hours should look and add 0 to hours if less than 10 */
            gethours = hours < 10 ? "0" + hours + ": " : hours + ": ";
            secs = seconds < 10 ? "0" + seconds : seconds;

            var continueButton = document.getElementById("continue");
            //continueButton.removeAttribute("hidden");

            /* display the Count-Up Timer */
            var x = document.getElementById("timer");
            x.innerHTML = gethours + mins + secs;
            /* call the seconds counter after displaying the Count-Up
             and increment seconds by +1 to keep it counting */

             seconds++;
            localStorage.setItem("seconds",seconds);

            /* call the setTimeout( ) to keep the Count-Up alive ! */
            clearTime = setTimeout("startWatch()", 1000);
        }
        //create a function to start the Count-Up
        function startTime() {

            $(".connectedUser").css("display","block");
            $(".disconnectedUser").css("display","none");
            document.getElementById("stop").removeAttribute("hidden");
            $("#stop").css("display","inline-block");
            /* check if seconds, minutes, and hours are equal to zero
             and start the Count-Up */
            if (seconds === 0 && minutes === 0 && hours === 0) {
                /* hide the fulltime when the Count-Up is running */
                var fulltime = document.getElementById("fulltime");
                fulltime.style.display = "none";
                var showStart = document.getElementById("start");
                showStart.style.display = "none";
                


                /* call the startWatch( ) function to execute the Count-Up
                 whenever the startTime( ) is triggered */

                const now = new Date();
                const dateString = now.toLocaleString('en-GB', { timeZone: 'Europe/Paris' });

                $.post(Routing.generate('admin_save_record_begin', JSON.stringify({ dateString: dateString })),
                 function(response){
                 if(response.code == 200 && response.success)
                 {
                     toastr.success("Les données sont sauvegardées avec succès");
                 }
                 else if(response.code == 300 && response.success)
                 {
                    $("#timer").html("Actualisation ...");
                    localStorage.setItem("hours",response.hours);
                    localStorage.setItem("minutes",response.minutes);
                    localStorage.setItem("seconds",response.seconds);
                    //hours = response.hours;
                    //minutes = response.minutes;
                    //seconds = response.seconds;


                    toastr.success("Reprise de sauvegarde des données de pointage avec succès");

                 }
                 else
                 {
                     bootbox.alert("Problème lors de la sauvegarde des données");
                 }

                 }, "json");

                startWatch();
                refreshRecord();

                
            }
        }

        var start = document.getElementById("start");
        start.addEventListener("click", startTime);

        /*create a function to stop the time */
        function stopTime() {

            bootbox.confirm({
                title: "Arrêt de compteur",
                message: "Voulez vous arrêter le compteur de record ?",
                buttons: {
                    cancel: {
                        label: '<i class="fa fa-times"></i> Annuler'
                    },
                    confirm: {
                        label: '<i class="fa fa-check"></i> Confirmer'
                    }
                },
                callback: function (result) {
                    if (result)
                    {
                        /* check if seconds, minutes and hours are not equal to 0 */
                        if (seconds !== 0 || minutes !== 0 || hours !== 0) {
                            var continueButton = document.getElementById("continue");
                            continueButton.setAttribute("hidden", "true");
                            var fulltime = document.getElementById("fulltime");
                            fulltime.style.display = "block";
                            fulltime.style.color = "#0C71C3";
                            var time = gethours + mins + secs;
                            fulltime.innerHTML = "Le temps enregistré est " + time;
                            // reset the Count-Up
                            seconds = 0;
                            minutes = 0;
                            hours = 0;
                            secs = "0" + seconds;
                            mins = "0" + minutes + ": ";
                            gethours = "0" + hours + ": ";

                            /* display the Count-Up Timer after it's been stopped */
                            var x = document.getElementById("timer");
                            var stopTime = gethours + mins + secs;
                            x.innerHTML = stopTime;

                            /* display all Count-Up control buttons */
                            var showStart = document.getElementById("start");
                            showStart.style.display = "inline-block";
                            var showStop = document.getElementById("stop");
                            showStop.style.display = "inline-block";
                            var showPause = document.getElementById("pause");
                            //showPause.style.display = "inline-block";

                            /* clear the Count-Up using the setTimeout( )
                             return value 'clearTime' as ID */
                            clearTimeout(clearTime);
                            localStorage.setItem("seconds",0);
                            localStorage.setItem("minutes",0);
                            localStorage.setItem("hours",0);



                            const now = new Date();
                            const dateString = now.toLocaleString('en-GB', { timeZone: 'Europe/Paris' });
                            document.getElementById("stop").style.display = "none";
                            $.post(Routing.generate('admin_save_record_end', JSON.stringify({ time: time,dateString: dateString })),
                                    function(response){
                                        if(response.code == 200 && response.success){
                                            toastr.success("Les données sont sauvegardées avec succès");
                                            $(".connectedUser").css("display","none");
                                            $(".disconnectedUser").css("display","block");
                                        }else{
                                            bootbox.alert("Problème lors de la sauvegarde des données");
                                        }

                                    }, "json");


                        }

                    }
                }
            });

        }


        window.addEventListener("load", function() {
            var stop = document.getElementById("stop");
            stop.addEventListener("click", stopTime);
        });
        /*********** End of Stop Button Operations *********/

        /*********** Pause Button Operations *********/
        function pauseTime() {
            if (seconds !== 0 || minutes !== 0 || hours !== 0) {
                /* display the Count-Up Timer after clicking on pause button */
                var x = document.getElementById("timer");
                var stopTime = gethours + mins + secs;
                x.innerHTML = stopTime;

                /* display all Count-Up control buttons */
                var showStop = document.getElementById("stop");
                showStop.style.display = "inline-block";

                /* clear the Count-Up using the setTimeout( )
                 return value 'clearTime' as ID */
                clearTimeout(clearTime);
            }
        }

        var pause = document.getElementById("pause");
        pause.addEventListener("click", pauseTime);
        /*********** End of Pause Button Operations *********/

        /*********** Continue Button Operations *********/
        function continueTime() {
            if (seconds !== 0 || minutes !== 0 || hours !== 0) {
                /* display the Count-Up Timer after it's been paused */
                var x = document.getElementById("timer");
                var continueTime = gethours + mins + secs;
                x.innerHTML = continueTime;

                /* display all Count-Up control buttons */
                var showStop = document.getElementById("stop");
                showStop.style.display = "inline-block";
                /* clear the Count-Up using the setTimeout( )
                 return value 'clearTime' as ID.
                 call the setTimeout( ) to keep the Count-Up alive ! */
                clearTimeout(clearTime);
                clearTime = setTimeout("startWatch( )", 1000);
            }
        }

        window.addEventListener("load", function() {
            var cTime = document.getElementById("continue");
            cTime.addEventListener("click", continueTime);
        });
        /*********** End of Continue Button Operations *********/



        /************* Function Refresh recording every 2 hours ****************************************/
        function refreshRecord() {

            let now = new Date();
            let currentHour = now.getHours();
            if (currentHour >= 10)
            {
                                
                bootbox.dialog({
                    title: "Actualisation de pointage",
                    message: "Veuillez mettre à jour votre compteur de pointage. Cette fonctionnalité est répétitive toutes les deux heures.",
                    closeButton: false,
                    size: 'medium',
                    onEscape: false,
                    backdrop: false,
                    buttons: {
                        confirm: {
                            label: '<i class="fa fa-check"></i> Confirmer',
                            className: 'btn-success',
                            callback: function () {

                                 $.post(Routing.generate('admin_save_refresh_time'),
                                    function(response){
                                        if(response.code == 200 && response.success){
                                            toastr.success("Les données d'actualisation de pointage sont sauvegardées avec succès");
                                            bootbox.hideAll();
                                        }else{
                                            bootbox.alert("Problème lors de la sauvegarde des données d'actualisation de pointage");
                                        }

                                    }, "json");
                                

                            }
                        }
                    }

                });
            }


            clearTime = setTimeout("refreshRecord( )", 7200000);

        }

        /************* Function Refresh recording every 2 hours ****************************************/

        $(".btnRecordDayInfo").on('click', function(e){

            $(".RecordDayInfoContent").html('<img class="img-responsive" src="{{ asset('backEnd/assets/images/loading/loading.gif') }}" style="margin: 0 auto;">');

            $.ajax({
                url: "{{  path('admin_get_record_of_day_history_ajax')}}",
                type: "GET",
                dataType: "html",
                success: function (data) {
                    $(".RecordDayInfoContent").html(data);
                }
            });

        });

    </script>
{% endblock %}