{% extends "listing.html" %}

{% block datacontent %}
<div class="card mb-0">
    <div class="card-header">
        <h4 class="card-title"> Calendar</h4>
    </div>
    <div class="card-body pb-0">
        <div id="fullCalendar"></div>
    </div>
    <div class="card-footer text-right text-muted pt-0">
        <a href="{% url 'event_create' %}">
            <button type="submit" value="add" class="btn btn-icon btn-warning ">
                <i class="tim-icons icon-simple-add"></i>
            </button>
        </a>
    </div>
</div>
{% endblock %}

{% block footerscript %}
<script type="text/javascript">
    $(document).ready(function() {
        $('[data-sort="table"]').tablesorter({
            headers: {
              0: { sorter: false },      // disable first column
            },
            dateFormat: "uk",
            sortList: [[3,1], [1,0]]
        });

        $calendar = $('#fullCalendar');

        today = new Date();
        y = today.getFullYear();
        m = today.getMonth();
        d = today.getDate();

        $calendar.fullCalendar({
            viewRender: function(view, element) {
                // We make sure that we activate the perfect scrollbar when the view isn't on Month
                if (view.name != 'month') {
                    $(element).find('.fc-scroller').perfectScrollbar();
                }
            },
            header: {
                left: 'title',
                center: 'month,agendaWeek,agendaDay,listMonth',
                right: 'prev,next,today'
            },
            // locale: 'fr',
            firstDay: 1,
            defaultDate: today,
            selectable: true,
            selectHelper: true,
            views: {
                month: { // name of view
                    titleFormat: 'MMMM YYYY'
                // other view-specific options here
                },
                week: {
                    titleFormat: "D MMMM YYYY"
                },
                day: {
                    titleFormat: 'D MMMM YYYY'
                }
            },

            select: function(start, end) {
                // on select we show the Sweet Alert modal with an input
                swal({
                    title: 'Create an Event',
                    html: '<div class="form-group">' +
                        '<input class="form-control" placeholder="Event Title" id="input-field">' +

                        '</div>',
                    showCancelButton: true,
                    confirmButtonClass: 'btn btn-success',
                    cancelButtonClass: 'btn btn-danger',
                    buttonsStyling: false
                }).then(function(result) {

                var eventData;
                event_title = $('#input-field').val();

                if (event_title) {
                    eventData = {
                        title: event_title,
                        start: start,
                        end: end
                    };
                    $calendar.fullCalendar('renderEvent', eventData, true); // stick? = true
                }

                $calendar.fullCalendar('unselect');

                });
            },
            editable: true,
            eventLimit: true, // allow "more" link when too many events


            // color classes: [ event-blue | event-azure | event-green | event-orange | event-red ]
            events: [
                {% for event in event_list %}
                    {
                        title: '{{ event.name }}',
                        start: new Date({{ event.datebegin | date:"Y"}}, {{ event.datebegin | date:"n"}}-1, {{ event.datebegin | date:"j, G, i"}}),
                        end: new Date({{ event.dateend | date:"Y"}}, {{ event.dateend | date:"n"}}-1, {{ event.dateend | date:"j, G, i"}}),
                        url: "{% url 'event_details' event.id %}",
                        className: {% if event.eventtype.name == 'Compétition' %}'event-red'{% elif event.eventtype.name == 'Démonstration' %}'event-orange'{% else %}'event-green'{% endif %},
                    },
                {% endfor %}
            ]
        });
    });
</script>
{% endblock %}