{% extends "sco_page.j2" %}
{% import 'bootstrap/wtf.html' as wtf %}

{% block styles %}
    {{super()}}
    <link href="{{scu.STATIC_DIR}}/libjs/tui.calendar/toastui-calendar.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="{{ scu.STATIC_DIR }}/css/edt.css" type="text/css">
{% endblock %}


{% block app_content %}

<div class="tab-content">
    <h2>Expérimental: emploi du temps</h2>

    <div>
        <span id="menu-navi">
            <button type="button" class="btn btn-default btn-sm move-today"
                data-action="move-today">Aujourd'hui</button>
            <button type="button" class="btn btn-default btn-sm move-day" data-action="move-prev">
                <i class="calendar-icon ic-arrow-line-left" data-action="move-prev"></i>
            </button>
            <button type="button" class="btn btn-default btn-sm move-day" data-action="move-next">
                <i class="calendar-icon ic-arrow-line-right" data-action="move-next"></i>
            </button>
        </span>
        <span id="renderRange" class="render-range"></span>
    </div>
    <div id="calendar" style="height: calc(100vh - 180px);"></div>

</div>
{% endblock app_content %}

{% block scripts %}
{{ super() }}
<script src="{{scu.STATIC_DIR}}/libjs/tui.calendar/toastui-calendar.min.js"></script>
<script>
let hm_formatter = new Intl.DateTimeFormat('default', {
    hour: '2-digit',
    minute: '2-digit',
    hour12: false
});

document.addEventListener('DOMContentLoaded', function() {
    const Calendar = tui.Calendar;
    const container = document.getElementById('calendar');
    const options = {
        defaultView: 'week',
        calendars: [
            {
            id: 'cal1',
            name: 'Personal',
            backgroundColor: '#03bd9e',
            borderColor: 'white',
            },
        ],
        isReadOnly: true,
        // timezone: { zones: [ { timezoneName: 'Europe/Paris' } ] },
        template: {
            // ce template nous permet d'avoir du HTML dans le title de l'event
            time: function(event) {
                const date_start = new Date(event.start);
                const start = hm_formatter.format(date_start);
                return `<strong>${start}</strong> <span>${event.title}</span>`;
            },
        },
        timezone: {
            zones: [
            {
                timezoneName: 'CET', // TODO récupérer timezone serveur
            },
            ],
        },
        usageStatistics: false,
        week: {
            dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
            eventView: ['time'],
            hourStart: {{ hour_start }},
            hourEnd: {{ hour_end }},
            showNowIndicator: true,
            startDayOfWeek: 1,
            taskView: false,
            useDetailPopup:false, // on va pouvoir placer les liens scodoc
            workweek: true, // TODO voir samedi travaillé
        },
    };

    const calendar = new Calendar(container, options);
    //let events = [
    //    {
    //        id: "12456",
    //        start:"2023-11-10T09:30",
    //        end:"2023-11-10T11:30",
    //        backgroundColor:"lightblue",
    //        color: "red", // couleur du texte
    //        location: "quelque part",
    //        title:'Essai <a href="">saisir</a>',
    //    },
    //    {
    //        id: "12457",
    //        start:"2023-11-10T09:30",
    //        end:"2023-11-10T11:50",
    //        backgroundColor:"lightgreen",
    //        color: "blue", // couleur du texte
    //        title:'TD groupe 2',
    //    },
    //];
    fetch(`${SCO_URL}/../api/formsemestre/{{formsemestre.id}}/edt`)
		.then(r=>{return r.json()})
		.then(events=>{
            if (typeof events == 'string') {
                // error !
                alert("error: " + events)
            } else {
                calendar.createEvents(events);
            }
        });
});

</script>
{% endblock scripts %}