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

{% block title %}Calendrier{% endblock %}

{% block css %}
    <link rel="stylesheet" type="text/css" href="{{ asset('/node_modules/fullcalendar/main.css') }}">
{% endblock %}

{% block body %}

    <div class="page-content container container-plus">
        <div class="page-header border-0 mb-3">
            <h1 class="page-title text-primary-d2 text-150">
                Calendrier
                <small class="page-info text-secondary-d4">
                    <i class="fa fa-angle-double-right text-80 opacity-1"></i>
                    Rendez-vous à venir
                </small>
            </h1>
        </div>
        <div class="row">
            <div class="col-12" id='calendar-container'>
                <div class="card acard">
                    <div class="card-body p-lg-4">
                        <div id='calendar' class="text-blue-d1"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


{% endblock %}
{% block javascripts %}
    <script src="{{ asset('/node_modules/jquery/dist/jquery.js') }}"></script>
    <script src="{{ asset('/node_modules/popper.js/dist/umd/popper.js') }}"></script>
    <script src="{{ asset('/node_modules/bootstrap/dist/js/bootstrap.js') }}"></script>
    <script src="{{ asset('/node_modules/bootbox/bootbox.all.js') }}"></script>
    <script src="{{ asset('/node_modules/fullcalendar/main.js') }}"></script>
    <script src="{{ asset('/node_modules/fullcalendar/locales-all.min.js') }}"></script>

    <script>

        jQuery(function($) {
            if (!window.Intl) {
                console.log("Calendar can't be displayed because your browser doesn's support `Intl`. You may use a polyfill!");
                return;
            }
            //hide/show relevant alert messages according to device
            if('ontouchstart' in window) {
                $('#alert-1').removeClass('d-none')
                $('#alert-2').addClass('d-none')
            }
            // initialize the external events
            /*new FullCalendar.Draggable(document.getElementById('external-events'), {
                itemSelector: '.fc-event',
                longPressDelay: 50,
                eventData: function(eventEl) {
                    return {
                        title: eventEl.innerText,
                        classNames: eventEl.getAttribute('data-class').split(' ')
                    }
                }
            })*/

            // change styling options and icons
            FullCalendar.BootstrapTheme.prototype.classes = {
                root: 'fc-theme-bootstrap',
                table: 'table-bordered table-bordered brc-default-l2 text-secondary-d1 h-95',
                tableCellShaded: 'bgc-secondary-l3',
                buttonGroup: 'btn-group',
                button: 'btn btn-white btn-h-lighter-blue btn-a-blue',
                buttonActive: 'active',
                popover: 'card card-primary',
                popoverHeader: 'card-header',
                popoverContent: 'card-body',
            };
            FullCalendar.BootstrapTheme.prototype.baseIconClass = 'fa';
            FullCalendar.BootstrapTheme.prototype.iconClasses = {
                close: 'fa-times',
                prev: 'fa-chevron-left',
                next: 'fa-chevron-right',
                prevYear: 'fa-angle-double-left',
                nextYear: 'fa-angle-double-right'
            };
            FullCalendar.BootstrapTheme.prototype.iconOverrideOption = 'FontAwesome';
            FullCalendar.BootstrapTheme.prototype.iconOverrideCustomButtonOption = 'FontAwesome';
            FullCalendar.BootstrapTheme.prototype.iconOverridePrefix = 'fa-';

            //for some random events to be added
            var date = new Date();
            var m = date.getMonth();
            var y = date.getFullYear();
            var day1 = Math.random() * 20 + 2;
            var day2 = Math.random() * 25 + 1;

            // initialize the calendar
            var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
                themeSystem: 'bootstrap',
                locale: 'fr',
                timeZone: 'Europe/Paris',
                slotMinTime: "07:00:00",
                slotMaxTime: "21:00:00",
                headerToolbar: {
                    start: 'prev,next today',
                    center: 'title',
                    end: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                },
                events: {{ data|raw}},
                selectable: true,
                selectLongPressDelay: 200,
                select: function(date) {
                    //bootbox.prompt("Nouveau Rendez-vous", function(title) {
                        //if (title !== null && title.length > 0) {
                            // On redirige vers l'ajout d'un évènement
                            var url = '{{ path("event_new", {'description': '__libelle__', 'dateStart': '__dateStart__', 'dateEnd': '__dateEnd__'}) }}';
                            url = url.replace("__libelle__", 'Rendez-vous');
                            url = url.replace("__dateStart__", JSON.stringify(date.start));
                            var dateFin = date.start;
                            dateFin.setHours(dateFin.getHours()+2);
                            url = url.replace("__dateEnd__", JSON.stringify(dateFin));
                            //console.log(JSON.stringify(date.start))
                            location.href = url;
                        //}
                    //});
                },
                editable: true,
                eventResizableFromStart: true,
                droppable: true,


                eventClick: function(info) {
                    //display a modal
                    var modal =
                        '<div class="modal fade">\
                            <div class="modal-dialog">\
                                <div class="modal-content">\
                                    <div class="modal-header">\
                                        <h5 class="modal-title">Rendez-vous</h5>\
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>\
                                    </div>\
                                    <div class="modal-body">\
                                        <div class="bold">Client :</div>\
                                        <div class="ml-3">Nom : '+info.event.title+'</div>\
                                        <div class="ml-3">Prix annoncé : '+info.event.extendedProps.eventPrice+'</div>\
                                        <div class="ml-3">Description : '+info.event.extendedProps.description+'</div>\
                                        <div class="bold">Prestation :</div>\
                                        <div class="ml-3">Nom : '+info.event.extendedProps.benefit+'</div>\
                                        <div class="bold">Chien :</div>\
                                        <div class="ml-3">Nom : '+info.event.extendedProps.dog+'</div>\
                                        <div class="ml-3">Race : '+info.event.extendedProps.dogBreed+'</div>\
                                        <div class="ml-3">Description :<br/> '+info.event.extendedProps.dogComment+'</div>\
                                        <div class="bold">Photo :<br/> <img src="'+window.location.origin+'/uploads/'+info.event.extendedProps.eventImage+'" height="100"></div>\
                                        <form class="m-0">\
                                            <div class="input-group">\
                                                <div class="mt-4">\
                                                    <button type="submit" class="btn btn-sm btn-bold btn-outline-primary"><i class="far fa-edit mr-2px"></i> Modifier</button>\
                                                    <button type="button" class="btn btn-sm btn-outline-danger btn-bold ml-2px" data-action="delete"><i class="far fa-trash-alt text-120"></i> Supprimer</button>\
                                                </div>\
                                            </div>\
                                        </form>\
                                    </div>\
                                </div>\
                            </div>\
                        </div>';

                    var modal = $(modal).appendTo('body');
                    modal.find('form').on('submit', function(ev){
                        ev.preventDefault();

                        var url = '{{ path("event_edit", {'id': '__id__','description': '__libelle__', 'dateStart': '__dateStart__', 'dateEnd': '__dateEnd__'}) }}';
                        url = url.replace("__id__", info.event.id);
                        url = url.replace("__libelle__", 'Rendez-vous');
                        url = url.replace("__dateStart__", JSON.stringify(date.start));
                        url = url.replace("__dateEnd__", JSON.stringify(date.end));
                        //console.log(JSON.stringify(date.start))
                        location.href = url;

                        modal.modal("hide");
                    });
                    modal.find('button[data-action=delete]').on('click', function() {
                        let url = `/api/event/delete/`
                        let datas = {
                            'id' : info.event.id,
                        }
                        let xhr = new XMLHttpRequest()
                        xhr.open('PUT', url)
                        xhr.send(JSON.stringify(datas))
                        info.event.remove();
                        modal.modal("hide");
                    });

                    modal.modal('show').on('hidden.bs.modal', function(){
                        modal.remove();
                    });
                }

            });

            calendar.on('eventChange', (e) => {
                let url = `/api/event/edit/${e.event.id}`
                let datas = {
                    'title' : e.event.title,
                    'description' : e.event.extendedProps.description,
                    'start' : e.event.start,
                    'end' : e.event.end,
                }
                console.log(datas)
                let xhr = new XMLHttpRequest()
                xhr.open('PUT', url)
                xhr.send(JSON.stringify(datas))
            })

            //
            calendar.render();

        });

    </script>
{% endblock %}