{% extends 'template-secre.html.twig' %}

{% block title %}{{ parent() }} - Calendário médico{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <script src="{{ asset('script/index.global.js') }}"> </script>
    <style>
        #calendar{
            width: 80%;
            margin: auto;
        }

        body {
            margin: 40px 10px;
            padding: 0;
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
            font-size: 14px;
        }

        #calendar {
            max-width: 1100px;
            margin: 0 auto;
        }
    </style>

{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script>
        {#document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                initialDate: '2023-01-12',
                navLinks: true, // can click day/week names to navigate views
                selectable: true,
                locale:'pt',
                selectMirror: true,
                select: function(arg) {
                    var title = prompt('Event Title:');
                    if (title) {
                        calendar.addEvent({
                            title: title,
                            start: arg.start,
                            end: arg.end,
                            allDay: arg.allDay
                        })
                    }
                    calendar.unselect()
                },
                eventClick: function(arg) {
                    if (confirm('Are you sure you want to delete this event?')) {
                        arg.event.remove()
                    }
                },
                editable: true,
                dayMaxEvents: true, // allow "more" link when too many events
                events: [
                    {
                        title: 'All Day Event',
                        start: '2023-01-01'
                    },
                    {
                        title: 'Long Event',
                        start: '2023-01-07',
                        end: '2023-01-10'
                    },
                    {
                        groupId: 999,
                        title: 'Repeating Event',
                        start: '2023-01-09T16:00:00'
                    },
                    {
                        groupId: 999,
                        title: 'Repeating Event',
                        start: '2023-01-16T16:00:00'
                    },
                    {
                        title: 'Conference',
                        start: '2023-01-11',
                        end: '2023-01-13'
                    },
                    {
                        title: 'Meeting',
                        start: '2023-01-12T10:30:00',
                        end: '2023-01-12T12:30:00'
                    },
                    {
                        title: 'Lunch',
                        start: '2023-01-12T12:00:00'
                    },
                    {
                        title: 'Meeting',
                        start: '2023-01-12T14:30:00'
                    },
                    {
                        title: 'Happy Hour',
                        start: '2023-01-12T17:30:00'
                    },
                    {
                        title: 'Dinner',
                        start: '2023-01-12T20:00:00'
                    },
                    {
                        title: 'Birthday Party',
                        start: '2023-01-13T07:00:00'
                    },
                    {
                        title: 'Click for Google',
                        url: 'http://google.com/',
                        start: '2023-01-28'
                    }
                ]
            });

            calendar.render();
        });#}

        window.onload = ()=>{
            let calendario = document.querySelector("#calendar");

            let calend = new FullCalendar.Calendar(calendario,{
                initialView : 'dayGridMonth',
                locale: 'pt',
                selectable: true,
                selectMirror: true,
                timeZone: 'Europe/Lisboa',
                headerToolbar:{
                    start: 'prev, next today',
                    center: 'title',
                    end: 'dayGridMonth, timeGridWeek,timeGridDay'
                },
            {#select: function(arg) {
                    var title = prompt('Event Title:');
                    if (title) {
                        calend.addEvent({
                            title: title,
                            start: arg.start,
                            end: arg.end,
                            allDay: arg.allDay
                        })
                    }
                    calend.unselect()
                },
                eventClick: function(arg) {
                    if (confirm('Are you sure you want to delete this event?')) {
                        arg.event.remove()
                    }
                },#}
            events:{{ dado|raw }},
                editable: true,
                eventResizableFromStart: true,
            })

            calend.on('eventChange',(e)=>{
                let url =`/api/${e.event.id}/edit`
                let dados = {
                    "description": e.event.extendedProps.description,
                    "title": e.event.title,

                    "start": e.event.start,
                    "end": e.event.end,
                    "backgroundColor": e.event.backgroundColor,
                    "borderColor": e.event.borderColor,
                    "textColor": e.event.textColor,
                    "allDay": e.event.allDay
                }
                let xhr = new XMLHttpRequest
                xhr.open("PUT",url);
                xhr.send(JSON.stringify(dados));
                //console.log(JSON.stringify(dados))
            })

            calend.render();
        }
    </script>


{% endblock %}

{% block body %}
    <div class="card">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-4">
                        <a class="btn btn-primary" href="{{ path('app_calendario_med_index') }}">
                            <i class="ni ni-fat-add"></i> Agenda médica
                        </a>
                    </div>
                </div>

            </div>

        </div>
        <div class="card-body">
            <div id="calendar"></div>
        </div>

    </div>

{% endblock %}