{% 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_row(form.user, {'label': false}) }}
                {{ form_row(form.linkButton) }}
            </div>
            {{ form_end(form) }}
        </div>
    </div>

    {% block table %}
        <div id="history">

            <table class="table table-hover dataTable">
            <thead>
                <tr>
                    <th class="text-center">{{ 'header.begin'|trans}}</th>
                    <th class="text-center">{{ 'header.end'|trans}}</th>
                    <th class="text-center">{{ 'stats.duration_expected'|trans}}</th>
                    <th class="text-center">{{ 'stats.duration_actual'|trans}}</th>
                    <th class="text-center">{{ 'label.overtime'|trans}}</th>
                    <th class="text-center">{{ 'label.yearly_overtime'|trans}}</th>
                    <th class="text-center">{{ 'table.status'|trans}}</th>
                </tr>
            </thead>
            <tbody>
                {% for entry in weeklyEntries %}
                    <tr>
                        {% set overtime = entry.actualDuration - entry.expectedDuration %}
                        <td class="text-center">{{ entry.startDate }}</td>
                        <td class="text-center">{{ entry.endDate }}</td>
                        <td class="text-center">{{ entry.expectedDuration | duration }}</td>
                        <td class="text-center">{{ entry.actualDuration | duration }}</td>
                        <td class="text-center">{{ overtime | duration }}</td>
                        <td class="text-center">{{ entry.overtimeYearly | duration }}</td>
                        <td class="text-center">{{ entry.status }}</td>
                    </tr>
                {% endfor %}
            </tbody>
            </table>
        </div>
    {% endblock %}
{% 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 %}