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

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

{% block report %}
    {% if approvePreviousWeeksMessage and approvePreviousWeeksMessage < (current | date_format('Y-m-d')) %}
        {{ widgets.callout('danger', 'warning.add_to_approve_previous_weeks'|trans) }}
    {% endif %}

    {% if selectedUserSundayIssue %}
        {{ widgets.callout('danger', 'warning.selected_user_sunday_issue'|trans) }}
    {% endif %}

    {% if currentUserSundayIssue %}
        {{ widgets.callout('danger', 'warning.currentUserSundayIssue'|trans) }}
    {% endif %}

    <div class="card mb-4">
        <div class="card-body {{ status_color_class(status) }}">
            {{ form_start(form, {'attr': {'class': 'form-inline', 'id': 'user_approval_form'}}) }}
            <div class="btn-list w-100">
            {% if form.date is defined %}
                {{ form_row(form.date, {'label': false}) }}
            {% endif %}
            {% if form.user is defined %}
                {{ form_row(form.user, {'label': false}) }}
            {% endif %}
            </div>

            <span style="float: right">
                {% if timesheet | length > 0 %}
                    <a id="descriptionButton" class="btn btn-default btn-create" title="{{ 'tooltip.description'|trans }}">
                        <i class="fas fa-1x fa-info-circle"></i>
                    </a>
                    <a id="timesheetButton" class="btn btn-default btn-create" title="{{ 'tooltip.timesheets'|trans }}">
                        <i class="fas fa-1x fa-user-clock"></i>
                    </a>
                {% endif %}
                {% if status is not empty %}
                    <a id="historyButton" class="btn btn-default btn-create" title="{{ 'tooltip.history'|trans }}">
                        <i class="fa fa-1x fa-history"></i>
                    </a>
                {% endif %}
                    {% if (status == 'submitted') and (user.id != currentUser or canManageHimself) %}
                    <a href="{{ path('approve',{'approveId':approveId,'user':user.id,'date':current|date('Y-m-d')}) }}" class="btn btn-default btn-create" title="{{ 'tooltip.approve'|trans }}">
                        <i class="fa fa-1x fa-check-circle"></i>
                    </a>
                    <a id="deniedButton" class="btn btn-default btn-create closeModal" title="{{ 'tooltip.reject'|trans }}" data-bs-toggle="modal" data-bs-target="#deniedMessage">
                        <i class="fa fa-1x fa-times-circle"></i>
                    </a>
                {% elseif (status is empty or status == 'not_submitted') %}
                    <a class="btn btn-default btn-create" title="{{ 'tooltip.submit'|trans }}"
                        {% if (approvePreviousWeeksMessage and approvePreviousWeeksMessage < (current | date_format('Y-m-d'))) %}
                            disabled
                        {% else %}
                            href="{{ path('add_to_approve',{'user':user.id,'date':current|date('Y-m-d')}) }}"
                        {% endif %}
                        >
                        <i class="fa fa-1x fa-paper-plane"></i>
                    </a>
                {% elseif isSuperAdmin and status == 'approved' %}
                    <a id="undoButton" class="btn btn-default btn-create"  title="{{ 'tooltip.undo'| trans }}">
                        <i class="fa fa-1x fa-undo"></i>
                    </a>
                {% endif %}
            </span>
            {{ form_end(form) }}
        </div>
    </div>

    <div id="history" class="mb-4" style="display: none">
        <h3>{{ 'tooltip.history'|trans }}</h3>
        <table class="table table-hover dataTable">
            <thead>
            <tr>
                <th>{{ 'table.approver'|trans }}</th>
                <th>{{ 'table.status'|trans }}</th>
                <th>{{ 'table.message'|trans }}</th>
                <th>{{ 'table.dateOfApprove'|trans }}</th>
            </tr>

            {% for ap in approve %}
                <tr class="{{ status_color_class(ap['status']) }}">
                    <td>{{ ap['username'] }}</td>
                    <td>{{ ap['status'] | trans }}</td>
                    <td>{{ ap['message'] }}</td>
                    <td>{{ ap['date'] | date("d.m.Y H:i:s") }}</td>
                </tr>
            {% endfor %}
            </thead>
        </table>
    </div>
    <div class="modal fade" id="deniedMessage" tabindex="-1" aria-labelledby="deniedMessageLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deniedMessageLabel">Deny approval</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <label for="deniedInput">{{ 'description'|trans }}</label>
                    <input type="text" id="deniedInput" placeholder="Approval denied" class="form-input p-2 w-100">
                </div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-primary pull-left" id="deniedLink">{{ 'action.save'|trans }}</a>
                    <button type="button" class="btn btn-cancel" data-bs-dismiss="modal">{{ 'action.close'|trans }}</button>
                </div>
            </div>
        </div>
    </div>

    {% set totals = {'totals': 0} %}
    {% set columns = 2 %}
    <div style="overflow-x: auto; width: 100%;">
        <table class="table table-hover dataTable">
            <thead>
            <tr>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
                {% for day in days.dateTimes %}
                    <th class="text-center text-wrap{% if day is weekend %} weekend{% endif %}{% if day is today %} today{% endif %}">
                        {{ day|date_weekday }}
                    </th>
                    {% set columns = columns + 1 %}
                    {% set totals = totals|merge({(day|report_date): 0}) %}
                {% endfor %}
            </tr>
            </thead>
            <tbody>

            {% for title, project in rows %}
                {% set totals = totals|merge({'totals': (totals['totals'] + project.duration)}) %}
                <tr class="activity">
                    <td class="text-nowrap">
                        <strong> {{ title }}  </strong>
                    </td>
                    <td class="text-nowrap text-center total">{{ project.duration|duration }}</td>
                    {% for day in project.days.days %}
                        <td class="text-nowrap text-center day-total{% if day.date is weekend %} weekend{% endif %}{% if day.date is today %} today{% endif %}">
                            {% if day.duration > 0 %}
                                {% set totals = totals|merge({(day.date|report_date): (totals[day.date|report_date] + day.duration)}) %}
                                <strong>{{ day.duration|duration }}</strong>
                            {% endif %}
                        </td>
                    {% endfor %}
                </tr>
                {% for key, row in project.details %}
                    <tr class="description">
                        <td class="text-nowrap"> {{ key }} </td>
                        <td class="text-nowrap text-center total">{{ row.duration|duration }}</td>
                        {% for day in row.days.days %}
                            <td class="text-nowrap text-center day-total{% if day.date is weekend %} weekend{% endif %}{% if day.date is today %} today{% endif %}">
                                {% if day.duration > 0 %}
                                    <strong>{{ day.duration|duration }}</strong>
                                {% endif %}
                            </td>
                        {% endfor %}
                    </tr>
                {% endfor %}
            {% endfor %}
            </tbody>
            <tfoot>
            <tr class="summary">
                <td>{{ 'stats.duration_total'|trans }} {% if expectedDuration is defined and expectedDuration is not empty %}[{{ 'stats.duration_expected'|trans }}] {% endif %}</td>
                <td class="text-nowrap text-center total">{{ totals['totals']|duration }}{% if expectedDuration is defined and expectedDuration is not empty %} [{{ expectedDuration|duration }}]{% endif %}</td>
                {% for day in days.dateTimes %}
                    <td class="text-nowrap text-center day-total{% if day is weekend %} weekend{% endif %}">
                        {{ totals[day|report_date]|duration }}

                        {% if errors[(day | date_format('Y-m-d'))] is defined and (errors[(day | date_format('Y-m-d'))] | length) > 0 %}
                            <span class="d-inline-block" tabindex="0" data-toggle="tooltip"
                                  title="{{ errors[(day | date_format('Y-m-d'))] | join('\n\n') }}">
                                    <i class="fa fa-1x fa-exclamation-circle" style="color: red"></i>
                            </span>
                        {% endif %}
                    </td>
                {% endfor %}
            </tr>
            {% if yearDuration is not null %}
                {% set yearDiff = yearDuration.actualDuration - yearDuration.expectedDuration + yearDuration.manualAdoption %}
                <tr class="summary">
                <td>{{ 'label.yearly_overtime'|trans }}</td>
                <td class="text-nowrap text-center total {% if yearDiff < 0 %} text-danger{% endif %}">{{ yearDiff|duration }}</td>
                {% for day in days.dateTimes %}
                    <td></td>
                {% endfor %}
            </tr>
            {% endif %}
            </tfoot>

        </table>
    </div>

    {% if timesheet | length > 0 %}
        <div id="timesheet_approval" style="overflow-x: auto; width: 100%; margin-top: 2rem; display: none">
            <table class="table table-hover dataTable">
                <thead>
                <tr>
                    <th>{{ 'header.date' | trans }}</th>
                    <th>{{ 'header.begin' | trans }}</th>
                    <th>{{ 'header.end' | trans }}</th>
                    <th>{{ 'header.duration' | trans }}</th>
                    <th>{{ 'header.customer' | trans }}</th>
                    <th>{{ 'header.project' | trans }}</th>
                    <th>{{ 'header.activity' | trans }}</th>
                    <th>{{ 'header.description' | trans }}</th>
                </tr>
                </thead>
                <tbody>
                {% for sheet in timesheet %}
                    <tr>
                        <td>{{ sheet['date'] }}</td>
                        <td>{{ sheet['begin'] }}</td>
                        <td>{{ sheet['end'] }}</td>
                        <td>
                            {{ sheet['duration'] | duration }}

                            {% if sheet['error'] | length > 0 %}
                                <span class="d-inline-block" tabindex="0" data-toggle="tooltip"
                                          title="{{ sheet['error'] | join('\n\n') }}">
                                    <i class="fa fa-1x fa-exclamation-circle" style="color: red"></i>
                                </span>
                            {% endif %}
                        </td>
                        <td>{{ sheet['customerName'] }}</td>
                        <td>{{ sheet['projectName'] }}</td>
                        <td>{{ sheet['activityName'] }}</td>
                        <td>{{ sheet['description'] }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}
{% endblock %}

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

        const undoButton = document.getElementById("undoButton");
        if (undoButton !== null) {
            undoButton.addEventListener("click", () => {
                if (confirm('{{ 'label.undoMessage'|trans }}'.replace(/&quot;/g,'"')) === true) {
                    window.location.href = '{{ path('not_approved',{'approveId':approveId,'user':user.id,'date':current|date('Y-m-d')}) }}'.replace(/&amp;/g,'&');
                }
            });
        }

        const historyButton = document.getElementById("historyButton");
        if (historyButton !== null) {
            historyButton.addEventListener("click", () => {
                document.getElementById("history").style.display = document.getElementById("history").style.display === 'block' ? 'none' : 'block';
            });
        }

        const timesheetButton = document.getElementById("timesheetButton");
        if (timesheetButton !== null) {
            timesheetButton.addEventListener("click", () => {
                document.getElementById("timesheet_approval").style.display = document.getElementById("timesheet_approval").style.display === 'block' ? 'none' : 'block';
            });
        }

        let elements = document.getElementsByClassName("description");
        for (let element of elements) {
            element.hidden = true;
        }

        const descriptionButton = document.getElementById("descriptionButton");
        if (descriptionButton !== null) {
            descriptionButton.addEventListener("click", () => {
                let elements = document.getElementsByClassName("description");
                for (let element of elements) {
                    element.hidden = !element.hidden;
                }
            });
        }

        const denialButton = document.getElementById("deniedLink");
        const denialInput = document.getElementById("deniedInput");
        if (denialButton !== null && denialInput !== null) {
            denialButton.addEventListener("click", () => {
                document.location.href = '{{ path('denied',{'approveId':approveId,'user':user.id,'date':current|date('Y-m-d'),'input':'__XX__'})|raw }}'.replace(/__XX__/, denialInput.value);
            });
        }
    });
    </script>
{% endblock %}
