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

{% block page_title %}{{ 'calendar.title'|trans }}{% endblock %}
{% block page_subtitle %}{{ 'calendar.subtitle'|trans }}{% endblock %}
{% block page_actions %}{{ widgets.page_actions({'list': path('timesheet'), 'create': path('timesheet_create', {'origin': 'calendar'})}) }}{% endblock %}

{% block main %}
    <div class="row">
        <div class="col-md-12">
            <div class="box box-success">
                <div class="box-body no-padding">
                    <div id="calendar"></div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        $(function () {
            $('#calendar').fullCalendar({
                defaultView: '{{ app.user.getPreferenceValue('calendar.initial_view') }}',
                {% if not google.apiKey is null %}
                googleCalendarApiKey: '{{ google.apiKey }}',
                {% endif %}
                eventSources: [
                    {
                        url: '{{ path('calendar_entries') }}',
                        color: '#00a65a',
                        borderColor: '#00a65a',
                        name: 'kimaiUserTimeSource'
                    }
                    {% for source in google.sources %}
                    ,
                    {
                        googleCalendarId: '{{ source.uri }}',
                        name: '{{ source.id }}',
                        color: '{{ source.color }}',
                        borderColor: '{{ source.color }}'
                    }
                    {% endfor %}
                ],
                header    : {
                    left  : 'prev,next today',
                    center: 'title',
                    right : 'month,agendaWeek,agendaDay'
                },
                eventLimit: {{ config.dayLimit }},
                weekNumbers: {% if config.showWeekNumbers %}true{% else %}false{% endif %},
                navLinks: true,
                locale: '{{ app.request.locale }}',
                editable  : false,
                droppable : false,
                height: 'auto',
                nowIndicator: true,
                now: '{{ now|date_format('c') }}',
                //timezone: '{{ app.user.preferenceValue("timezone") }}',
                businessHours: {
                    dow: [{{ config.businessDays|join(',') }}],
                    start: '{{ config.businessTimeBegin }}',
                    end: '{{ config.businessTimeEnd }}'
                },
                eventRender: function(eventObj, $el) {
                    if (eventObj.source.ajaxSettings.name !== 'kimaiUserTimeSource') {
                        return;

                    }
                    $el.popover({
                        title: eventObj.title,
                        content:
                        '<div class="calendar-entry">' +
                            '<ul>' +
                                '<li>' + '{{ 'label.date'|trans }}: ' + eventObj.start.format('L') + '</li>' +
                                '<li>' + '{{ 'label.begin'|trans }}: ' + eventObj.start.format('LT') + '</li>' +
                                '<li>' + '{{ 'label.end'|trans }}: ' + (eventObj.end ? eventObj.end.format('LT') : '<i>-</i>') + '</li>' +
                                '<hr>' +
                                '<li>' + '{{ 'label.customer'|trans }}: ' + eventObj.customer + '</li>' +
                                '<li>' + '{{ 'label.project'|trans }}: ' + eventObj.project + '</li>' +
                                '<li>' + '{{ 'label.activity'|trans }}: ' + eventObj.activity + '</li>' +
                            '</ul>' +
                            (eventObj.description ? '<hr><p>' + eventObj.description + '</p>' : '') +
                        '</div>'
                        ,
                        trigger: 'hover',
                        placement: 'auto',
                        container: 'body',
                        html: true
                    });
                },
                eventClick: function(calEvent, jsEvent, view) {
                    location.href = '{{ path('timesheet_edit', {id: '-XX-'}) }}?origin=calendar'.replace('-XX-', calEvent.id);
                },
                dayClick: function(date, jsEvent, view) {
                    location.href = '{{ path('timesheet_create') }}' + '?origin=calendar&begin=' + date.format();
                },
                selectable: true,
                select: function( start, end, jsEvent, view) {
                    if(view.type === 'month') {
                        return;
                    }
                    location.href = '{{ path('timesheet_create') }}' + '?from=' + start.format() + '&to=' + end.format();
                }
            })
        })
    </script>
{% endblock %}