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

{% block report_title %}{{ report_title|trans }}{% endblock %}

{% block report %}
    <div class="card mb-4">
        <div class="card-body">
            {{ form_start(form, {'attr': {'class': 'form-inline', 'id': 'overtime_filter_form'}}) }}
            <div class="btn-list w-100">
                {{ form_widget(form.date) }}
            </div>
            {{ form_end(form) }}
        </div>
    </div>

    <div id="history">
        <table class="table table-bordered dataTable">
        <thead>
            <tr>
                <th class="text-center">{{ 'table.approve_user'|trans }}</th>
                <th class="text-center">{{ 'header.end'|trans}}</th>
                <th class="text-center">{{ 'label.yearly_overtime'|trans}}</th>
                <th class="text-center">{{ 'label.yearly_overtime'|trans}} {{selectedDate}}</th>
            </tr>
        </thead>
        <tbody>
            {% for entry in weeklyEntries %}
                <tr>
                    <td class="text-center">{{ entry.user }}</td>
                    <td class="text-center">{{ entry.endDate }}</td>
                    <td class="text-center {% if entry.overtime.overtime < 0 %} text-danger{% endif %}">{{ entry.overtime.overtime | duration }}</td>
                    <td class="text-center {% if entry.overtimeDate.overtime < 0 %} text-danger{% endif %}">{{ entry.overtimeDate.overtime | duration }}</td>
                </tr>
            {% endfor %}
        </tbody>
        </table>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        document.addEventListener("kimai.initialized", function () {
            const filterForm = document.getElementById('overtime_filter_form');
            if (filterForm !== null) {
                filterForm.addEventListener('change', (event) => {
                    filterForm.submit();
                });
            }
        });
    </script>
{% endblock %}