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

{% block body %}
    <div id="wrapper">
        <div id="container">
            <div id="cssclock">
                <div id="clockDate">

                </div>




                <div id="clockanalog">
                    <img src="images/analogseconds.png" id="analogsecond" alt="Clock second-hand" style="transform: rotate(252deg);">
                    <img src="images/analogminutes.png" id="analogminute" alt="Clock minute-hand" style="transform: rotate(202deg);">
                    <img src="images/analoghours.png" id="analoghour" alt="Clock hour-hand" style="transform: rotate(467deg);">
                </div>
                <div id="clockdigital">
                    <img src="images/digitalhours.gif" id="digitalhour" alt="Clocks hours" style="transform: rotate(135deg);">
                    <img src="images/digitalminutes.gif" id="digitalminute" alt="Clocks minutes" style="transform: rotate(162deg);">
                    <img src="images/digitalseconds.gif" id="digitalsecond" alt="Clocks seconds" style="transform: rotate(108deg);">
                    <div style="opacity: 0.8;">&nbsp;</div>
                    <div style="opacity: 0.8;">&nbsp;</div>
                </div>
            </div>

            <div id="login" class="col-lg-12">
                <form id="login-form" action="{{ path('login-staff') }}" method="post" _lpchecked="1">

                        <span class="fa fa-user"></span>
                        <input id="username" autocomplete="off" value="" type="text" required="" placeholder="Username">
                        <span class="fa fa-lock"></span>
                        <input id="password" autocomplete="off" type="password" required="" value="" placeholder="Password">
                        <input type="submit" value="Accedir" style="float: right">

                </form>
                <div id="alert" class="alert alert-danger hide">Usuario y/o contraseña incorrectas.</div>
                <button id="check" class="in hide" data-id="" data-employee="" data-check="" data-url="{{ path('register-in-out') }}">
                </button>

            </div>
        </div>
    </div>


{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="css/screen.css" type="text/css">
{% endblock %}

{% block javascripts %}
    
     <script type="text/javascript">
    // this strange block of code exists to make sure the clocks are started as soon as
    // possible as the page loads, rather than always waiting for a
    // $(document).ready() as I normally do...
    var bScriptLoaded       = false;
    var bDOMLoaded          = false;
    var bClocksInitialised  = false;


    function ClockInit() {
        if ((bClocksInitialised != true) && (bDOMLoaded == true) && (bScriptLoaded == true)) {
            bClocksInitialised = true;
            oClockAnalog.fInit();
            oClockDigital.fInit();
        }
    }

    Date.prototype.getWeek = function () {
        var target  = new Date(this.valueOf());
        var dayNr   = (this.getDay() + 6) % 7;
        target.setDate(target.getDate() - dayNr + 3);
        var firstThursday = target.valueOf();
        target.setMonth(0, 1);
        if (target.getDay() != 4) {
            target.setMonth(0, 1 + ((4 - target.getDay()) + 7) % 7);
        }
        return 1 + Math.ceil((firstThursday - target) / 604800000);
    }




    function fecha() {
        var d =new Date();
        document.getElementById("clockDate").innerHTML= "(" + (d.getWeek() ) + ") " + d.getDate() + "/" + (d.getMonth() +1) + "/" + d.getFullYear();
        setTimeout("fecha()",1000)
    }


    var windowIsActive = true;

    $(function() {


        $(window).on("blur focus", function(e) {
            var prevType = $(this).data("prevType");

            if (prevType != e.type) {   //  reduce double fire issues
                switch (e.type) {
                    case "blur":
                        windowIsActive = false;
                        // do work
                        break;
                    case "focus":
                        if(!windowIsActive){
                            windowIsActive = true;
                            window.location.reload()
                        }

                        break;
                }
            }

            $(this).data("prevType", e.type);
        })

        window.setInterval(function(){
            console.log(windowIsActive)
        }, 2000);

    });




</script>
    
<script type="text/javascript" src="js/css-clocks.js"></script>

<script type="text/javascript">
    bDOMLoaded = true;
    ClockInit();
    document.load = fecha()
</script>



<script>



</script>
    
{% endblock %}