{% extends 'base.html.twig' %}
    {% set activeFacecheck = app_twig.getSetting('facecheck') %}
        {% set ajaxEmployeesFilter = (app_twig.getSetting('tokenFiltred','boolean') in [1,"1","true"])?true:false %}

{% block body %}



    <div class="main">

    <div class="wrapper">
        <div class="loading">
            <div class="loader"></div>
        </div>

        {% set activeEmployees = app_twig.getActiveEmployees() %}
        {% if ajaxEmployeesFilter %}
            {% include 'frontend/clock/partials/menus_simple.html.twig' %}
        {% else %}
            {% include 'frontend/clock/partials/menus.html.twig' with {'activeEmployees': activeEmployees,'activeFacecheck': activeFacecheck  } %}
        {% endif %}

        <section class="header" onclick="openNavR()">


            {% if ajaxEmployeesFilter %}
                <h2 class="h1" > Empleados <i class="fa fa-users" aria-hidden="true"></i> (<span id="countStaffActive">0</span>)</h2>
            {% else %}
                {% if device is defined and device is not empty %}
                    <h2 class="h1" >{{ device.name|upper }}  <i class="fa fa-users" aria-hidden="true"></i> ({{ activeEmployees|length }})</h2>
                {% else %}
                    <h2 class="h1" > Empleados <i class="fa fa-users" aria-hidden="true"></i> ({{ activeEmployees|length }})</h2>
                {% endif %}
            {% endif %}
            <h2 id="clockDate" class="h2"></h2>

        </section>
        {% if app_twig.getSetting('staffchecks') in [1,"1","true"]%}
                <a id="checks-olds" class="btn btn-info hide"  data-token="">Registros Anteriores</a>
        {% endif %}

        {% if activeFacecheck %}
            <section id="container-picture" style="display: none;">
                <video autoplay="true" id="face-video" style="width: 300px;height: 225px;" onclick="disabledFacecheck(); "></video>
                <canvas id="face-foto" style="display: none;"></canvas>
            </section>
        {% endif %}



        <section id="reloj"  class="analog-w3ls">
                <div  class="container">
                    <div id="myclock"></div>
                </div>
        </section>
        <section id="container-horarios"  class="formulario" >
        </section>
        <section id="formulario" class="formulario">
            <div id="reloj" ></div>
            <div id="alert" class="alert alert-danger hide">Usuario y/o contraseña incorrectas.</div>

            <form id="login-form" action="{{ path('login-staff') }}" method="post">
                <input id="username"   autocomplete="off" value="" type="text" name="username" placeholder="Usuario" required="" readonly
                       onfocus="this.removeAttribute('readonly');">
                <input  id="password"  autocomplete="off" value="" type="password" name="password" placeholder="Contraseña" required="" readonly
                        onfocus="this.removeAttribute('readonly');">
                <input type="submit" value="Acceder" class="btn btn-info">
            </form>

            <button id="check" class="btn btn-success hide" data-id="" data-employee="" data-check="" data-url="{{ path('register-in-out') }}">SI</button>
            <button id="salir"  class="btn btn-danger hide">NO</button>
        </section>
    </div>

    </div>



    {% if activeFacecheck %}
        <script src="/js/jquery.facedetection.min.js"></script>

        {% include 'frontend/clock/partials/facejs.html.twig' %}
    {% endif %}

{% endblock %}

{% block stylesheets %}

    <link href="{{ asset('css/style.css') }}" rel="stylesheet" type="text/css" media="all" />
    {% include 'frontend/clock/partials/css.html.twig' %}

{% endblock %}

{% block javascripts %}

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <!--script src="{{ asset('/bundles/sonatacore/vendor/jquery/dist/jquery.min.js') }}"></script-->
    <script src="{{ asset('/js/lodash.min.js') }}"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script language="javascript" type="text/javascript" src="{{ asset('js/jquery.thooClock.js')}}"></script>

    <script>
        var activeFacecheck = {{ (activeFacecheck)?1:0 }};
    </script>

    {% include 'frontend/clock/partials/js.html.twig' %}


    {% if ajaxEmployeesFilter %}

     <script id="employee-template" type="text/x-lodash-template">
        <figure>
            <img src="/checks/{{ 'now'|date('Y-m-d') }}/<%- employee_id +'--'+ employee_registerId +'-in.png' %>">
            <figcaption><%- fullname %> </figcaption>
        </figure>
    </script>

    <script>
        (function () {

            setTimeout(function () {
                var hash = (token)?token:fphash;
                if(hash){
                    $.ajax({
                        url: "/staff/token-"+hash,
                        type: 'GET',
                        cache: false,
                        dataType: "json",
                        error : function(err) {
                            console.log('Error!', err)
                        },
                        success: function(data) {
                            console.log('Success!')

                            if(data.length > 0)
                            {
                                document.getElementById("countStaffActive").innerHTML =data.length;

                                var employeeTemplate = document.getElementById("employee-template").innerHTML;
                                var employeeActive = document.getElementById("listStaffActive");

                                for(var i= 0;i < data.length; i++){
                                    var templateFn = _.template(employeeTemplate);
                                    var templateHTML = templateFn({ 'fullname': data[i].fullname, 'employee_id': data[i].id,'employee_registerId': data[i].registerId  });
                                    employeeActive.innerHTML += templateHTML;
                                }
                            }
                        }
                    });
                }
            },500)
        })();
    </script>


    {% endif %}

{% endblock %}