{% extends 'base.html.twig' %}
{% import "macros/widgets.html.twig" as widgets %}

{% block main %}
    <div class="row">
        {% set hasTwoColumns = (config.dragDropAmount > 0 and dragAndDrop is not empty and (dragAndDrop|filter(s => s.entries|length > 0)|length > 0)) or form is not null %}
        {% if hasTwoColumns %}
        <div class="col-md-4 col-lg-3 d-none d-md-block order-last">
            {% if form is not null %}
                {% embed '@theme/embeds/card.html.twig' %}
                    {% block box_body %}
                        {{ form_start(form) }}
                        {{ form_widget(form) }}
                        {{ form_end(form) }}
                    {% endblock %}
                {% endembed %}
            {% endif %}
            {% for source in dragAndDrop|filter(s => s.entries|length > 0) %}
                {% embed '@theme/embeds/card.html.twig' %}
                    {% block box_title %}{{ source.title|trans({}, source.translationDomain) }}{% endblock %}
                    {% block box_body_class %}drag-and-drop-source p-0{% endblock %}
                    {% block box_body %}
                        <div class="list-group list-group-flush external-events" data-method="{{ source.method }}" data-route="{{ path(source.route, source.routeParams) }}" data-route-replacer="{{ source.routeReplacer|json_encode|e('html_attr') }}">
                            {% for entry in source.entries|slice(0, config.dragDropAmount) %}
                                <div class="p-1 ps-2 list-group-item external-event draggable" data-entry="{{ entry.data|json_encode|e('html_attr') }}"{% if entry.project is not null %} data-toggle="tooltip" title="{{ entry.project.customer.name }}"{% endif %}>
                                    <div class="row align-items-center">
                                        <div class="col text-truncate">
                                            {% if source.blockInclude is not null and entry.blockName is not null and block(entry.blockName, source.blockInclude) is defined %}
                                                {{ block(entry.blockName, source.blockInclude) }}
                                            {% else %}
                                                <span class="d-block text-body-secondary text-truncate mt-n1">{{ entry.title }}</span>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    {% endblock %}
                {% endembed %}
            {% endfor %}
        </div>
        {% endif %}

        <div class="col-xs-12 {% if hasTwoColumns %}col-md-8 col-lg-9 col-print-12{% endif %}">
            {% embed '@theme/embeds/card.html.twig' %}
                {% block box_body_class %}p-0{% endblock %}
                {% block box_body %}
                    <div id="timesheet_calendar"></div>
                {% endblock %}
            {% endembed %}
        </div>
    </div>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('calendar') }}
{% endblock %}

{% block head %}
    {{ parent() }}
    {{ encore_entry_script_tags('calendar') }}
{% endblock %}

{% block javascripts %}
    {% set calendarSelector = 'timesheet_calendar' %}
    {% set createParams = '' %}
    {% set createRoute = 'timesheet_create' %}
    {% set editRoute = 'timesheet_edit' %}
    {% set canCreate = is_granted('create_own_timesheet') %}
    {% set canEdit = is_granted('edit_own_timesheet') %}
    {% set canEditExported = is_granted('edit_exported_timesheet') %}
    {% set isForeignEdit = false %}
    {% if user != app.user %}
        {% set isForeignEdit = true %}
        {% set createParams = 'user=' ~ user.id ~ '&' %}
        {% set createRoute = 'admin_timesheet_create' %}
        {% set editRoute = 'admin_timesheet_edit' %}
        {% set canCreate = is_granted('create_other_timesheet') %}
        {% set canEdit = is_granted('edit_other_timesheet') %}
    {% endif %}

    {{ parent() }}
    <script>
        {# using var, so it can be re-used in the different scopes #}
        var calendar = null;

        const reloader = function() { calendar.reloadEvents(); };
        document.addEventListener('kimai.timesheetUpdate', reloader);
        document.addEventListener('kimai.timesheetDelete', reloader);

        document.addEventListener('kimai.initialized', function(event) {
            const kimai = event.detail.kimai;

            let calendarOptions = {
                dragdrop: {
                    container: '.external-events',
                    items: '.external-event',
                },
                initialView: '{{ app.user.getPreferenceValue('calendar_initial_view') }}',
                translations: {
                    customer: '{{ 'customer'|trans }}',
                    project: '{{ 'project'|trans }}',
                    activity: '{{ 'activity'|trans }}',
                },
                permissions: {
                    edit: {% if canEdit %}true{% else %}false{% endif %},
                    edit_exported: {% if canEditExported %}true{% else %}false{% endif %},
                    create: {% if canCreate %}true{% else %}false{% endif %},
                    edit_begin: {% if can_edit_begin %}true{% else %}false{% endif %},
                    edit_end: {% if can_edit_end %}true{% else %}false{% endif %},
                    edit_duration: {% if can_edit_duration %}true{% else %}false{% endif %},
                    punch: {% if is_punch_mode %}true{% else %}false{% endif %},
                },
                icons: {
                    next: '{{ 'right'|icon(true) }}',
                    previous: '{{ 'left'|icon(true) }}',
                    nextYear: '{{ 'right2'|icon(true) }}',
                    previousYear: '{{ 'left2'|icon(true) }}',
                },
                {% if google is not null %}
                googleCalendarApiKey: '{{ google.apiKey }}',
                {% endif %}
                patterns: {
                    title: '{{ config.entryTitlePattern }}',
                },
                defaultStartTime: {% if defaultStartTime is null %}null{% else %}'{{ defaultStartTime }}'{% endif %},
                now: '{{ now|date_format('c') }}',
                {# see https://github.com/kimai/kimai/issues/2155 #}
                timezone: '{{ app.user.timezone == 'UTC' ? 'GMT' : app.user.timezone }}',
                eventSources: [
                    {
                        id: 'kimaiUserTimeSource',
                        type: 'timesheet',
                        url: '{{ path('get_timesheets') }}?user={{ user.id }}&size=1000&full=true&begin={from}&end={to}',
                        options: {
                            color: '{{ config('theme.calendar.background_color') }}',
                        },
                    }
                    {% if google is not null %}
                    {% for source in google.sources %}
                    ,
                    {
                        id: 'googleCompanyCalendar',
                        type: 'google',
                        options: {
                            googleCalendarId: '{{ source.uri }}',
                            name: '{{ source.id }}',
                            color: '{{ source.color }}',
                            textColor: '{{ source.color|font_contrast }}',
                        }
                    }
                    {% endfor %}
                    {% endif %}
                ],
                url: {
                    update: (timesheetId) => {
                        return '{{ path('patch_timesheet', {id: 1}) }}'.replace('1', timesheetId);
                    },
                    create: (start, end) => {
                        let createUrl = '{{ path(createRoute) }}' + '?{{ createParams|raw }}';
                        if (end !== undefined) {
                            createUrl += 'from=' + start + '&to=' + end;
                        } else {
                            createUrl += 'begin=' + start;
                        }
                        return createUrl;
                    },
                    edit: (timesheetId) => {
                        return '{{ path(editRoute, {id: '-XX-'}) }}'.replace('-XX-', timesheetId);
                    },
                    actions: (timesheetId) => {
                        return '{{ path('get_timesheet_actions', {id: 1, 'view': 'calendar', 'locale': (app.request.locale)}) }}'.replace('1', timesheetId);
                    },
                },
                preparePayloadForUpdate: (data) => {
                    {% if isForeignEdit %}
                    data.user = {{ user.id }};
                    {% endif %}

                    return data;
                },
            };

            calendar = new KimaiCalendar(
                kimai,
                document.getElementById('{{ calendarSelector }}'),
                Object.assign({}, calendarOptions, {{ config|json_encode|raw }})
            );
            calendar.render();

            document.querySelector('.fc-today-button').classList.remove('btn-icon');
            document.querySelector('.fc-header-toolbar').classList.toggle('row');
            document.querySelector('.fc-header-toolbar').classList.add('p-3');
            const toolbar = document.querySelectorAll('.fc-header-toolbar .fc-toolbar-chunk');
            toolbar[0].parentElement.classList.add('p-3');
            toolbar[0].classList.add('col-md-4', 'col-6', 'mb-1', 'text-start', 'order-xs-1');
            toolbar[1].classList.add('col-md-4', 'col-12', 'mb-1', 'text-center', 'order-3');
            toolbar[2].classList.add('col-md-4', 'col-6', 'mb-1', 'text-end', 'order-md-4', 'order-xs-2');

            KimaiReloadPageWidget.create('kimai.systemConfigUpdate', true);
        });
    </script>
{% endblock %}