{% extends 'base.html' %}

{% block content %}
<script>
        function mycolor(str){
            var hash = 0;
            for (var i = 0; i < str.length; i++) {
               hash = str.charCodeAt(i) + ((hash << 5) - hash);
            }
            return "#" + intToRGB(hash);
        }

        function intToRGB(i){
            var c = (i & 0x00FFFFFF)
                .toString(16)
                .toUpperCase();

            return "00000".substring(0, 6 - c.length) + c;
        }

        $(document).ready(function () {
            var calendar = $('#calendar').fullCalendar({
                defaultView: 'agendaWeek',
                allDaySlot: false,
                nowIndicator: true,
                selectMirror: true,
                longPressDelay: 500,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                events: [
                    {% for event in events %}
                        {
                            title: "{{ event.name}}",
                            start: '{{ event.start|date:"Y-m-d H:i" }}',
                            end: '{{ event.end|date:"Y-m-d H:i" }}',
                            id: '{{ event.id }}',
                            backgroundColor: mycolor('{{ event.name }}'),
                        },
                    {% endfor %}
                ],
                selectable: true,
                selectHelper: true,
                editable: true,
                eventLimit: true,
                select: function (start, end, allDay) {
                    var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
                    var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
                    $.ajax({
                        type: "GET",
                        url: '/add_event',
                        data: {'title': '{{ user }}', 'start': start, 'end': end},
                        dataType: "json",
                        success: function (data) {
                            location.reload();
                        },
                        failure: function (data) {
                            alert('There is a problem!!!');
                        }
                    });
                },
                eventResize: function (event) {
                    var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
                    var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
                    var title = event.title;
                    var id = event.id;
                    $.ajax({
                        type: "GET",
                        url: '/update',
                        data: {'title': title, 'start': start, 'end': end, 'id': id},
                        dataType: "json",
                        success: function (data) {
                            //alert('Event Update');
                        },
                        failure: function (data) {
                            alert('There is a problem!!!');
                        }
                    });
                },

                eventAfterRender: function(event, element, view)
                {
                      $(element).css('width','20%');
                },
                eventDrop: function (event) {
                    var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
                    var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
                    var title = event.title;
                    var id = event.id;
                    $.ajax({
                        type: "GET",
                        url: '/update',
                        data: {'title': title, 'start': start, 'end': end, 'id': id},
                        dataType: "json",
                        success: function (data) {
                            //alert('Event Update');
                        },
                        failure: function (data) {
                            alert('There is a problem!!!');
                        }
                    });
                },

                eventClick: function (event) {
                    if (confirm("Are you sure you want to remove it?")) {
                        var id = event.id;
                        $.ajax({
                            type: "GET",
                            url: '/remove',
                            data: {'id': id},
                            dataType: "json",
                            success: function (data) {
                                //alert('Event Removed');
                                location.reload();
                            },
                            failure: function (data) {
                                alert('There is a problem!!!');
                            }
                        });
                    }
                },

            });
        });

    </script>
<br/>
<h2 align="center"><a href="#">Nieuwe Molens Gent -- Fitness calendar</a></h2>
<br/>
    <div id="calendar"></div>
        <p>
    Klik op de gewenste plaats in de kalender om een nieuwe reservatie toe te voegen, vul je naam in in het dialoogvenster.
    </p>
    <p>
    Je kan een reservatie verwijderen door er op te klikken en deletion te confirmeren.
    </p>
    <p>
    Je kan een event verschuiven of verlengen/verkorten door het vast te nemen en te verschuiven.
    </p>

</div>
{% endblock %}