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

{% block title %}Projectiles - Mon planning{% endblock %}
{% block body %}
<link rel="stylesheet" href="https://edgarpetrus.fr/projets/Digistack/includes/calendarjs/dist/calendar.js.css" />
<script src="https://edgarpetrus.fr/projets/Digistack/includes/calendarjs/dist/calendar.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script>
    $(document).ready(function () {
        $(".page-title h1").text("Mon tableau de bord");
        $(".bandeau-img img").attr("src","/uploads/users/{{ user_image }}");
        $(".bandeau-img img").attr("height",84);

        var calendarInstance = new calendarJs( "calendar", { 
            exportEventsEnabled: true, 
            manualEditingEnabled: true, 
            views: {
                fullWeek: {
                    showWeekNumbersInTitles: true
                },
                fullMonth: {
                    showTimesInEvents: true,
                    minimumDayHeight: 0,
                    addYearButtons: false,
                    isPinUpViewEnabled: true,
                    pinUpViewImageUrls: [
                        "/assets/icons/planning_back.png"
                    ]
                }
            },
            fullScreenModeEnabled: true,
            organizerName: "{{ user_name }}",
            organizerEmailAddress: "{{ user.email }}",
            visibleDays: [ 0, 1, 2, 3, 4, 5, 6 ],
            searchOptions: {
                history: [
                    "Regular Event",
                    "Test",
                    "At The Top",
                    "Zero",
                    "Title 1",
                    "Title 2",
                    "Title That Is Longer"
                ]
            },
            onEventDragStart: onDragEventStart,
            onEventDragStop: onDragEventStop,
            onEventDragDrop: onDragEventDrop,
            workingDays: [ 0, 1, 2, 3, 4, 5 ],
            onEventAdded: onEventAdded,
            onEventRemoved: onEventRemoved,
            startOfWeekDay: 0,
            workingHoursStart: {
                2: "09:00"
            },
            workingHoursEnd: {
                2: "17:00"
            },
            reverseOrderDaysOfWeek: false,
            useAmPmForTimeDisplays: false,
            onRender: function( elementId ) {
                console.log( "Calendar instance ID " + elementId + " rendered." );
            },
            onFullDayEventRender: onRenderCustom,
            onFullWeekEventRender: onRenderCustom,
            onFullMonthEventRender: onRenderCustom,
            onAllEventsEventRender: onRenderCustom,
            onTimelineEventRender: onRenderCustom,
            onWidgetEventRender: onRenderCustom,
            onToolTipEventRender: onToolTipRenderCustom,
            viewToOpenOnFirstLoad: null,
            eventColorsEditingEnabled: true
        } );

         $.ajax({
            url: '/tasks/ajax-calend-list',
            method: "post",
            dataType: "json",
            async:      true, 
            success: function(data, status) {  
                //var events
                

                console.log("tasks = " + data.tasks);

                for (var i=0; i<data.tasks.length; i++) {
                    console.log(data.tasks[i]);
                }
                calendarInstance.addEvents(data.tasks);
                
            },  
        }).done(function (response) {
            var tasks = response.tasks;

            //calendarInstance.addEvents(tasks);

        }).fail(function (response) {
        });

        //calendarInstance.addEvents( getEvents() );



        

    })
</script>
<script> 
    function daysInMonth( year, month ) {
        return new Date( year, month + 1, 0 ).getDate();
    }
    function onRenderCustom( event, eventDetails ) {
        var result = false;

        if ( eventDetails.id === "1234-5678" ) {
            event.innerHTML = "I've been custom rendered!";
            result = true;
        }
                
        return result;
    }
            
    function onToolTipRenderCustom( tooltip, eventDetails ) {
        var result = false;

        if ( eventDetails.id === "1234-5678" ) {
            tooltip.innerHTML = "This is a custom tooltip for an event.";
            result = true;
        }  
        return result;
    }
    //addEvent( event, [updateEvents], [triggerEvent], [setLastUpdated] ):

    function turnOnEventNotifications() {
        calendarInstance.setOptions( {
            eventNotificationsEnabled: true
        } );
    }

    function addEventType() {
        console.log( "Event type added: " + calendarInstance.addEventType( 5, "A New Event Type" ) );
    }

    function removeEventType() {
        console.log( "Event type removed: " + calendarInstance.removeEventType( 5 ) );
    }

    function setEvents() {
        calendarInstance.setEvents( getEvents() );
    }

    function removeEvent() {
        calendarInstance.removeEvent( new Date(), "Test Title 2" );
    }

    function daysInMonth( year, month ) {
        return new Date( year, month + 1, 0 ).getDate();
    }

    function setOptions() {
        /*calendarInstance.setOptions( {
            manualEditingEnabled: true,
            exportEventsEnabled: false,
            showDayNumberOrdinals: false,
            fullScreenModeEnabled: false,
            showTimelineArrowsOnViews: true,
            maximumEventTitleLength: 10,
            maximumEventDescriptionLength: 10,
            maximumEventLocationLength: 10,
            maximumEventGroupLength: 10,
            tooltipsEnabled: true,
            visibleDays: [ 0, 1, 2, 3, 4, 5, 6 ],
            hideEventsWithoutGroupAssigned: true,
            showHolidays: false,
            allowHtmlInDisplay: true,
            workingDays: [ 0, 1, 2, 3, 4 ],
            views: {
                fullMonth: {
                    minimumDayHeight: 70,
                    maximumEventsPerDayDisplay: 0,
                    allowEventScrolling: true,
                    showDayNamesHeaders: false
                },
                fullWeek: {
                    showDayNamesHeaders: false
                }
            },
            eventColorsEditingEnabled: false
        } );*/
    }

    function setSearchOptions() {
        calendarInstance.setSearchOptions( {
            left: 10,
            top: 10
        } );
    }

    function onlyDotsDisplay() {
        calendarInstance.setOptions( {
            views: {
                fullMonth: {
                    useOnlyDotEvents: true
                }
            }
        } );
    }

    function setCurrentDisplayDate() {
        var newDate = new Date();
        newDate.setMonth( newDate.getMonth() + 3 );

        calendarInstance.setCurrentDisplayDate( newDate );
    }

    function onDragEventStart( eventDetails ) {
        console.log( "Event drag started: " + eventDetails.id );
    }

    function onDragEventStop( eventDetails ) {
        console.log( "Event drag stopped: " + eventDetails.id );
    }

    function onEventAdded( eventDetails ) {
        var strstart = eventDetails.from.toLocaleDateString("fr-FR", {year:"numeric", month: "2-digit", day:"2-digit", hour:"2-digit" , minute:"2-digit"});
        var strend = eventDetails.to.toLocaleDateString("fr-FR", {year:"numeric", month: "2-digit", day:"2-digit", hour:"2-digit" , minute:"2-digit"});

        var startDay = strstart.substring(0, 2);
        var startMonth = strstart.substring(3, 5);
        var startYear = strstart.substring(6, 10);
        var startHours = strstart.substring(11, 13);
        var startMins = strstart.substring(14, 16);

        var endDay = strend.substring(0, 2);
        var endMonth = strend.substring(3, 5);
        var endYear = strend.substring(6, 10);
        var endHours = strend.substring(11, 13);
        var endMins = strend.substring(14, 16);

        var start = startYear + '-' + startMonth + '-' + startDay + ' ' + startHours + ':' + startMins;
        var end = endYear + '-' + endMonth + '-' + endDay + ' ' + endHours + ':' + endMins;

        //console.log("startDay = " + startDay + ", startMonth = " + startMonth + ", startYear = " + startYear + ", startHours = " + startHours + ", startMins = " + startMins );

        var currentURL = window.location.href;

        $.ajax({
            url: '/tasks/0/add-ajax',
            method: "get",
            dataType: "json",
            data: {
                title : eventDetails.title,
                from : start,
                to : end,
                description : eventDetails.description,
                textColor : eventDetails.color,
                backgroundColor : eventDetails.backgroundColor,
                url : eventDetails.url,
                group : eventDetails.group    
            }
        }).done(function (response) {
            console.log('La tache ' + eventDetails.title + ' a bien été insérée dans la base.');
        }).fail(function (response) {
            alert("Une erreur est survenue à l'insertion de la tache. Veuillez réessayer plus tard.");
        });

    }

    function onEventRemoved( eventDetails ) {
        console.log("onEventRemoved : id = " + eventDetails.id);
        var currentURL = window.location.href;
        var id = eventDetails.id;
        window.location.href = '/tasks/' + id + '/delete';
        window.location.href = currentURL;
    }
    

    function onDragEventDrop( eventDetails, dropDate ) {
        console.log( "Event drag dropped: " + eventDetails.id + ". Date dropped: " + dropDate );
    }

    function getCopiedEvent() {
        var today = new Date(),
        todayPlus1Hour = new Date();

        todayPlus1Hour.setHours( today.getHours() + 1 );

        return {
            from: today,
            to: todayPlus1Hour,
            title: "Copied Event",
            description: "This is a another description of the event that has been added, so it can be shown in the pop-up dialog.",
            group: "Group 1"
        }
    }

    function addNewHolidays() {
        var today = new Date();

        var holiday1 = {
            day: today.getDate(),
            month: today.getMonth() + 1,
            year: today.getFullYear(),
            title: "Google Day",
            onClick: function() {
                window.open( "https://www.google.com/", "_blank" );
            }
        };

        var holiday2 = {
            day: today.getDate(),
            month: today.getMonth() + 1,
            title: "Calendar.js Day",
            backgroundColor: "lightblue",
            textColor: "maroon",
            onClick: function() {
                window.open( "https://github.com/williamtroup/Calendar.js", "_blank" );
            }
        };
                
        calendarInstance.addHolidays( [ holiday1, holiday2 ] );
    }

    function removeNewHolidays() {
        calendarInstance.removeHolidays( [ "Google Day", "Calendar.js Day" ] );
    }
</script>
<div class="container-homepage">
    <h1>Mon emploi du temps</h1>
    <br>
    <div id="calendar"></div>
    
</div>  
{% endblock %}