{% extends '@Kiosk/layout.html.twig' %}
{% import "macros/widgets.html.twig" as widgets %}

{% block login_box_msg %}
    {% if stopped is not null %}
        <h1><center>{{ 'kiosk.status_stopped'|trans }}</center></h1>
    {% else %}
        <h1><center>{{ 'kiosk.status_started'|trans }}</center></h1>
    {% endif %}
{% endblock %}


{% block kiosk_class %}
    text-center kiosk-login-status
    {% if stopped is not null -%}
        kiosk-stopped
    {%- else -%}
        kiosk-started
    {%- endif -%}
{% endblock %}

{% block kiosk_content %}
    <div class="card-stamp">
        <div class="card-stamp-icon {% if stopped is not null %}bg-yellow{% else %}bg-green{% endif %}">
            {% if stopped is not null %}
                <i class="icon fas fa-lightbulb fa-xs"></i>
            {% else %}
                <i class="icon fas fa-lightbulb fa-xs"></i>
            {% endif %}
        </div>
    </div>
    <div class="row" id="kioskDetails">
        <div class="col-md-12">
            <div class="mb-4">
                <div class="mb-4" id="kioskUser">
                    {{ widgets.user_avatar(user, false, 'avatar-xl mb-3') }}
                    <h1>{{ widgets.username(user) }}</h1>
                    <p class="text-body-secondary">{{ user.title }}</p>
                </div>
                
            </div>

            {% set day = null %}
            {% set dayDuration = 0 %}

            <table class="table table-bordered" id="kioskTimes">
                <thead>
                <tr>
                    <th class="text-center">{{ 'date'|trans }}</th>
                    <th class="text-center">{{ 'begin'|trans }}</th>
                    <th class="text-center">{{ 'end'|trans }}</th>
                    <th class="text-center">{{ 'duration'|trans }}</th>
                </tr>
                </thead>
                <tbody>
                {% for timesheet in timesheets %}
                    {%- if day is same as(null) -%}
                        {% set day = timesheet.begin|date_short %}
                    {% endif %}
                    {%- if day is not same as(timesheet.begin|date_short) -%}
                        <tr>
                            <th colspan="3"></th>
                            <th>{{ dayDuration|duration }}</th>
                        </tr>
                        {% set day = timesheet.begin|date_short %}
                        {% set dayDuration = 0 %}
                    {%- endif -%}
                    <tr>
                        <td>{{ timesheet.begin|date_short }}</td>
                        <td class="text-center">{{ timesheet.begin|time }}</td>
                        {% if timesheet.end is not null %}
                            <td class="text-center">{{ timesheet.end|time }}</td>
                            <td class="text-center">{{ timesheet.duration|duration }}</td>
                        {% else %}
                            <td class="text-center">&ndash;</td>
                            <td class="text-center">&ndash;</td>
                        {% endif %}
                    </tr>
                    {% set dayDuration = dayDuration + timesheet.duration %}
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% if duration > 10 %}
        <a href="{{ path('kiosk') }}" class="text-center btn btn-default">{{ 'kiosk_login'|trans({}, 'actions') }}</a>
    {% endif %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        setTimeout(function() {
            document.getElementsByClassName('login-box-body')[0].innerHTML = '<h3>{{ 'kiosk.reloading'|trans }}</h3><div class="overlay-wrapper"><div class="overlay"><div class="fas fa-sync fa-spin"></div></div></div>';
            location.replace('{{ path(returnTo, {'_locale': locale|default(app.request.locale)}) }}');
        }, {{ duration * 1000 }});

        window.addEventListener('popstate', function (event) {
            history.pushState(null, document.title, location.href);
        });

        {% if playSounds %}
        function beep(vol, freq, duration) {
            {# browsers limit the number of concurrent audio contexts, so you better re-use'em #}
            let a = new AudioContext();
            let v = a.createOscillator();
            let u = a.createGain();
            v.connect(u);
            v.frequency.value = freq;
            v.type = "square";
            u.connect(a.destination);
            u.gain.value = vol * 0.01;
            v.start(a.currentTime);
            v.stop(a.currentTime+duration*0.001);
        }

        {% if stopped is not null %}
            beep(100, 250, 200);
        {% else %}
            beep(100, 500, 200);
        {% endif %}
        {# see https://odino.org/emit-a-beeping-sound-with-javascript/ #}
        {# beep(999, 210, 800); beep(999, 500, 800); #}
        {% endif %}
    </script>
{% endblock %}