{% extends 'html/base.html' %}

{% load static %}

{% block content %}

    <div class="col-lg-12">
        <div class="row">
            <div class="col-md-4">
                <h1>Agenda</h1>
            </div>
            <div class="col-md-8" style="background-color: #FFFFFF; padding: 14px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;">
                <div id="calendar">
    
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            var calendar = $('#calendar').fullCalendar({
                locale: 'fr',
                header: {
                    left: 'prev, next, today',
                    center: 'title',
                    right: 'month, agendaWeek, agendaDay',
                },
                events: '/all_events',
                selectable: true,
                selectHelper: true,
                editable: true,
                eventLimit: true,
                select: function (start, end, allDay) {
                    var title = prompt("Veillez saisir le nom de l'événement : ");
                    if (title) {
                        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': title, 'start': start, 'end': end},
                            dataType: "json",
                            success: function (data) {
                                calendar.fullCalendar('refetchEvents');
                                alert("Événement ajouter avec succès !");
                            },
                            error: function(data) {
                                alert("Non autorisé !");
                            }
                        });
                    }
                },
                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_event',
                        data: {'title': title, 'start': start, 'end': end, 'id': id},
                        dataType: "json",
                        success: function (data) {
                            calendar.fullCalendar('refetchEvents');
                            alert("Événement mis à jour avec succès !");
                        },
                        error: function(data) {
                            alert("Non autorisé!");
                        }
                    });
                },
                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_event',
                        data: {'title': title, 'start': start, 'end': end, 'id': id},
                        dataType: "json",
                        success: function (data) {
                            calendar.fullCalendar('refetchEvents');
                            alert("Événement mis à jour avec succès !");
                        },
                        error: function(data) {
                            alert("Non autorisé !");
                        }
                    });
                },
                eventClick: function (event) {
                    if (confirm("Êtes vous sûre de vouloir supprimer cet événement?")) {
                        var id = event.id;
                        $.ajax({
                            type: "GET",
                            url: '/delete_event',
                            data: {'id': id},
                            dataType: "json",
                            success: function (data) {
                                calendar.fullCalendar('refetchEvents');
                                alert("Événement mis à jour avec succès !");
                            },
                            error: function(data) {
                                alert("Non autorisé!");
                            }
                        });
                    }
                },
            });
        });
    </script>

{% endblock %}