{% extends "sco_page.j2" %}

{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/assiduites.css">
<link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/minitimeline.css">

<style>
    .rbtn::before {
        --size: 1.5em;
        width: var(--size);
        height: var(--size);
    }

    .ui-timepicker-container,
    #ui-datepicker-div {
        z-index: 5 !important;
    }

    #new_periode,
    #actions {
        display: flex;
        flex-direction: column;
        width: fit-content;
        gap: 0.5em;
    }

    #actions {
        flex-direction: row;
        align-items: center;
        margin: 5px 0;
    }

    #actions label {
        margin: 0;
    }

    #fix {
        display: flex;
        flex-direction: row;
        gap: 1em;
        justify-content: space-between;
        width: fit-content;
    }

    #fix>.box {
        border: 1px solid #444;
        border-radius: 0.5em;
        padding: 1em;
    }

    .timepicker {
        width: 5em;
        text-align: center;
    }

    #moduleimpl_select {
        text-align: center;
    }

    table {
        border-collapse: collapse;
        width: 100%;
        max-width: 1600px;
        position: relative;
        table-layout: fixed;
    }

    th,
    td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: center;
        background-color: white;
    }

    th {
        z-index: 1;
    }

    .premier th {
        position: sticky;
        top: 0;
        background-color: white;
    }

    .second th {
        position: sticky;
        top: 38px;
        background-color: white;
    }


    .sticky-col {
        position: sticky;
        left: 0;
        z-index: 1;
    }

    .rbtn:not(:checked)::before {
        opacity: 0.5;
    }

    .grayed {
        filter: brightness(0.5);
    }
    .conflit {
        background-color: var(--color-conflit);
    }

    .conflit_calendar{
        font-size: 1.5em;
        cursor: pointer;
    }

    #excel-content {
        margin: 4px 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
        justify-content: space-evenly;
    }

    .hint {
        font-style: italic;
    }

    #excel-errors {
	    background-color: rgb(241, 209, 209);
    }

    .stdlink{
        width: fit-content;
    }


</style>

<style>
.timePicker-modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.timePicker-modal.show {
    display: block;
}

.timePicker-modal-content {
    background-color: white;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 300px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.timePicker-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.timePicker-close:hover,
.timePicker-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.time-picker-container {
    margin: 15px 0;
}

#confirmButton {
    padding: 10px 20px;
    font-size: 16px;
    background-color: var(--color-primary);
    color: white;
    border: none;
    cursor: pointer;
}

#confirmButton:hover {
    background-color: var(--color-secondary);
}

.etudinfo{
    text-align: left;
}
</style>
{% endblock styles %}

{% block scripts %}
{{ super() }}
<script src="{{scu.STATIC_DIR}}/js/etud_info.js"></script>
<script src="{{scu.STATIC_DIR}}/js/assiduites.js"></script>
<script src="{{scu.STATIC_DIR}}/js/date_utils.js"></script>
{% include "sco_timepicker.j2" %}


<script>

    const readonly = "{{readonly | safe}}" == "True";
    const non_present = "{{non_present | safe}}" == "True";

    const etuds = [
        {% for etud in etudiants %}
        {
            id: {{etud.etudid}},
            nom: "{{etud.nom}}",
            prenom: "{{etud.prenom}}"
        },
        {% endfor %}
    ]

    let days = [
        {% for jour in hebdo_jours %}
        {
            date : new Date(Date.fromFRA("{{jour[1][1]}}")),
            visible : "{{not jour[0]}}" == "True",
            nom : "{{jour[1][0]}}",
        },
        {% endfor %}
    ] // [0]=Lundi ... [6]=Dimanche  -> à 00h00

    //Une fonction d'action quand un bouton est cliqué
    // 3 possibilités :
    // - assiduite_id = null -> créer nv assi avec état du bouton
    // - assiduite_id non null et bouton coché == etat assi -> suppression de l'assiduité
    // - assiduite_id non null et bouton coché != etat assi -> modification de l'assiduité
    async function actionButton(btn, same = false) {
        let td = btn.parentElement;
        let tr = td.parentElement;
        let etudid = tr.getAttribute("etudid");
        let etud = etuds.find((etud) => etud.id == etudid);
        let etat = btn.value;
        let assiduite_id = td.getAttribute("assiduite_id");
        let dayInfo = [td.getAttribute("day"), td.getAttribute("time")]// [0]=[0..6] [1]=am/pm
        let day = days[dayInfo[0]].date;
        dayInfo[1] = dayInfo[1] == "am" ? "matin" : "apresmidi";
        let deb = new Date(day.format('YYYY-MM-DD') + "T" + temps[dayInfo[1]].debut);
        let fin = new Date(day.format('YYYY-MM-DD') + "T" + temps[dayInfo[1]].fin);

        const assi = {
            etudid: etudid,
            etat: etat,
            moduleimpl_id: document.getElementById("moduleimpl_select").value,
            date_debut: deb.toFakeIso(),
            date_fin: fin.toFakeIso(),
        }

        let cancelEvent = false;

        if (assiduite_id != "") {
            if (same) {
                // Suppression
                await async_post(
                    `../../api/assiduite/delete`,
                    [assiduite_id],
                    (data) => {
                        if (data.success.length > 0) {
                            envoiToastEtudiant("remove", etud);
                            td.setAttribute("assiduite_id", "");
                        } else {
                            console.error(data.errors["0"].message);
                            cancelEvent = true;
                            erreurModuleImpl(data.errors["0"].message);
                        }
                    },
                    (error) => {
                        console.error("Erreur lors de la suppression de l'assiduité", error);
                        cancelEvent = true;
                    }
                );
            } else {
                // Modification
                await async_post(
                    `../../api/assiduite/${assiduite_id}/edit`,
                    assi,
                    (data) => {
                        envoiToastEtudiant(etat, etud);
                    },
                    (error) => {
                        console.error("Erreur lors de la modification de l'assiduité", error);
                        cancelEvent = true;
                        erreurModuleImpl(error.message);
                    }
                );
            }
        } else {
            // Création
            await async_post(
                `../../api/assiduite/${etud.id}/create`,
                [assi],
                (data) => {
                    if (data.success.length > 0) {
                        envoiToastEtudiant(etat, etud);
                        //mise à jour de l'assiduité_id dans le td
                        td.setAttribute("assiduite_id", data.success["0"].message.assiduite_id);
                    } else {
                        console.error(data.errors["0"].message);
                        erreurModuleImpl(data.errors["0"].message);
                        cancelEvent = true;
                    }
                },
                (error) => {
                    console.error("Erreur lors de la création de l'assiduité", error);

                }
            );
        }

        return cancelEvent;

    }

    async function recupAssiduitesHebdo(callback) {
        const etudIds = etuds.map((etud) => etud.id).join(",");
        const date_debut = days[0].date.startOf("day").format("YYYY-MM-DDTHH:mm");
        const date_fin = days[6].date.endOf("day").format("YYYY-MM-DDTHH:mm");

        url =
            `../../api/assiduites/group/query?date_debut=${date_debut}` +
            `&date_fin=${date_fin}&etudids=${etudIds}&with_justifs`;

        await fetch(url)
            .then((res) => {
                if (!res.ok) {
                    throw new Error("Network response was not ok");
                }
                return res.json();
            })
            .then((data) => {
                let assiduites = []
                Object.keys(data).forEach((etudid) => {
                    assiduites.push(...data[etudid]);
                });
                callback(assiduites);
            })
            .catch((error) =>
                console.error(
                    "There has been a problem with your fetch operation:",
                    error
                )
            );
    }

    function generateConflitDetails(assiduites){
        let html = '<details class="sco-drop"><summary>Assiduités en conflit</summary><ul>'

        assiduites.forEach((a)=>{
            const deb = new Date(a.date_debut);
            const fin = new Date(a.date_fin);
            let date = "";
            if (deb.isSame(fin, "day")){
                date = `le ${deb.format("DD/MM/YYYY")} de ${deb.format("HH:mm")} à ${fin.format("HH:mm")}`;
            }else{
                date = `du ${deb.format("DD/MM/YYYY")} au ${fin.format("DD/MM/YYYY")}`;
            }

            html += `<li>
             <a 
                href="edit_assiduite_etud/${a.assiduite_id}"
                title="Cliquez pour voir/éditer l'assiduité"
                target="_blank"
             >
             ${a.etat} ${date}
             </a>
            </li>`

        })

        return html + "</ul></details>"
    }


    function updateTable(assiduites) {
        // Suppression existant
        document.querySelectorAll("td.btns").forEach((el) => {
            el.remove();
        });

        for (let i = 0; i < days.length; i++) {
            let day = days[i].date;

            let morningPeriod = {
                deb: new Date(day.format('YYYY-MM-DD') + "T" + temps.matin.debut),
                fin: new Date(day.format('YYYY-MM-DD') + "T" + temps.matin.fin),
            }
            let afternoonPeriod = {
                deb: (new Date(day.format('YYYY-MM-DD') + "T" + temps.apresmidi.debut)),
                fin: new Date(day.format('YYYY-MM-DD') + "T" + temps.apresmidi.fin),
            }
            const assiduitesByDay = {
                matin: assiduites.filter((assi) => {
                    const period = {
                        deb: new Date(assi.date_debut),
                        fin: new Date(assi.date_fin)
                    }
                    return hasTimeConflict(period, morningPeriod);
                }),
                apresmidi: assiduites.filter((assi) => {
                    const period = {
                        deb: new Date(assi.date_debut),
                        fin: new Date(assi.date_fin)
                    }
                    return hasTimeConflict(period, afternoonPeriod);
                })
            };

            // Récupération des tr étudiants
            let trs = document.querySelectorAll("tr[etudid]");

            trs.forEach((tr) => {
                let etudid = tr.getAttribute("etudid");

                if (!days[i].visible && i >= 5) {
                    return;
                } else if (!days[i].visible) {
                    tr.insertAdjacentHTML("beforeend", "<td class='grayed btns' colspan='2'></td>");
                    return;
                }

                let etudAssiMorning = assiduitesByDay.matin.filter((a) => {
                    return a.etudid == etudid;
                });
                let etudAssiAfternoon = assiduitesByDay.apresmidi.filter((a) => {
                    return a.etudid == etudid;
                });

                // Créations des boutons
                // matin
                let tdMatin = document.createElement("td");
                tdMatin.classList.add("btns");
                tdMatin.setAttribute("day", i);
                tdMatin.setAttribute("time", "am");

                tr.appendChild(tdMatin);

                // après-midi
                let tdApresmidi = document.createElement("td");
                tdApresmidi.classList.add("btns");
                tdApresmidi.setAttribute("day", i);
                tdApresmidi.setAttribute("time", "pm");
                tr.appendChild(tdApresmidi);


                // Peuplement des boutons en fonction des assiduités
                let boutons = `
                <input type="checkbox" name="matin-${etudid}" id="matin-${etudid}"
                class="rbtn retard" value="retard">
                <input type="checkbox" name="matin-${etudid}" id="matin-${etudid}"
                class="rbtn absent" value="absent">
                `

                if (!non_present) {
                    boutons = `<input type="checkbox" name="matin-${etudid}" id="matin-${etudid}"
                class="rbtn present" value="present">`+boutons;
                }

                // matin
                tdMatin.innerHTML = boutons
                tdMatin.setAttribute("assiduite_id", "")
                if (etudAssiMorning.length != 0) {
                    let assi = etudAssiMorning[0];
                    const deb = new Date(assi.date_debut);
                    const fin = new Date(assi.date_fin);

                    // si dates == periode -> cocher bouton correspondant
                    // Sinon supprimer boutons et mettre case "rouge" + tooltip

                    if (deb.isSame(morningPeriod.deb, "minutes") && fin.isSame(morningPeriod.fin, "minutes")) {
                        let etat = assi.etat.toLowerCase();
                        const input = tdMatin.querySelector(`[value="${etat}"]`)
                        if (input) {
                            input.checked = true;
                        }
                        tdMatin.setAttribute("assiduite_id", assi.assiduite_id);
                        let saisie = new Date(assi.entry_date).format("DD/MM/Y HH:mm");
                        saisie = saisie.split(" ").join(" à ");
                        let text = `noté ${etat} le ${saisie} par ${assi.user_nom_complet}`;
                        tdMatin.setAttribute("title", text);
                        tdMatin.setAttribute("data-tooltip", "");

                    } else {
                        tdMatin.innerHTML = generateConflitDetails(etudAssiMorning);
                        tdMatin.classList.add("conflit");
                    }
                }

                // après-midi
                tdApresmidi.innerHTML = boutons
                tdApresmidi.setAttribute("assiduite_id", "")
                if (etudAssiAfternoon.length != 0) {
                    let assi = etudAssiAfternoon[0];
                    const deb = new Date(assi.date_debut);
                    const fin = new Date(assi.date_fin);

                    // si dates == periode -> cocher bouton correspondant
                    // Sinon supprimer boutons et mettre case "rouge" + tooltip

                    if (deb.isSame(afternoonPeriod.deb, "minutes") && fin.isSame(afternoonPeriod.fin, "minutes")) {
                        let etat = assi.etat.toLowerCase();
                        const input = tdApresmidi.querySelector(`[value="${etat}"]`)
                        if (input) {
                            input.checked = true;
                        }
                        tdApresmidi.setAttribute("assiduite_id", assi.assiduite_id);

                        let saisie = new Date(assi.entry_date).format("DD/MM/Y HH:mm");
                        saisie = saisie.split(" ").join(" à ");
                        let text = `noté ${etat} le ${saisie} par ${assi.user_nom_complet}`;
                        tdApresmidi.setAttribute("title", text);
                        tdApresmidi.setAttribute("data-tooltip", "");
                    } else {
                        tdApresmidi.innerHTML = generateConflitDetails(etudAssiAfternoon);
                        tdApresmidi.classList.add("conflit");
                    }
                }

            });
        }

        document.querySelectorAll("td .rbtn").forEach((el) => {
            el.addEventListener("click", async (e) => {

                if (readonly) {
                    e.preventDefault();
                    return;
                }

                let target = e.target;
                let parent = target.parentElement;

                let isCancelled = await actionButton(target, !target.checked);
                if (isCancelled) {
                    e.preventDefault();
                    target.checked = !target.checked;
                    return;
                }

                let inputs = parent.querySelectorAll(".rbtn");
                inputs.forEach((input) => {
                    if (input != target) {
                        input.checked = false;
                    }
                });
            });
        });

        enableTooltips("table");

    }

    // Une fonction pour changer de semaine (précédente ou suivante)
    // fait juste un location.href avec les bons paramètres
    function changeWeek(prev = false) {
        const currentUrl = new URL(window.location.href); // Récupère l'URL actuelle
        const params = new URLSearchParams(currentUrl.search); // Récupère les paramètres de l'URL
        let currentWeekParam = params.get('week');

        // Extraire l'année et le numéro de semaine du paramètre de la semaine actuelle
        const [year, week] = currentWeekParam.split('-W').map(Number);

        // Calculer la nouvelle semaine et l'année
        let newYear = year;
        let newWeek = week + (prev ? -1 : 1);

        if (newWeek < 1) {
            newYear -= 1; // Passer à l'année précédente
            newWeek = getISOWeeksInYear(newYear); // Dernière semaine de l'année précédente
        } else if (newWeek > getISOWeeksInYear(newYear)) {
            newYear += 1; // Passer à l'année suivante
            newWeek = 1; // Première semaine de l'année suivante
        }

        // Formater le nouveau paramètre de semaine
        const newWeekParam = `${newYear}-W${String(newWeek).padStart(2, '0')}`;
        params.set('week', newWeekParam); // Mettre à jour le paramètre 'week'
        currentUrl.search = params.toString(); // Mettre à jour les paramètres de l'URL
        window.location.href = currentUrl.toString(); // Rediriger vers la nouvelle URL
    }



    // Une fonction pour gérer le bouton "tout le monde présent"
    // coche tous les boutons de la colonne
    function allPresent(day, time) {
        // Version naive : coche tous les boutons de la colonne
        let tds = document.querySelectorAll(`td[day="${day}"][time="${time}"]`);
        const real_time = time == "am" ? "matin" : "apresmidi";
        const assi = {
            etat: "present",
            moduleimpl_id: document.getElementById("moduleimpl_select").value,
            date_debut: new Date(days[day].date.format('YYYY-MM-DD') + "T" + temps[real_time].debut).toFakeIso(),
            date_fin: new Date(days[day].date.format('YYYY-MM-DD') + "T" + temps[real_time].fin).toFakeIso(),
        }

        let toCreate = []; // [{etudid:<int>}]

        tds.forEach((td) => {
            // on ne touche pas aux conflits
            if (td.classList.contains("conflit")) {
                return;
            }

            const tr = td.parentElement;
            const etudid = Number(tr.getAttribute("etudid"));

            const assiduite_id = td.getAttribute("assiduite_id");
            if (assiduite_id == "") {
                toCreate.push({ etudid: etudid });
            }
        })

        // Création
        toCreate = toCreate.map((el) => {
            return {
                ...assi,
                etudid: el.etudid,
            }
        });

        // Appel API
        let counts = {
            create: toCreate.length,
        }
        const promiseCreate = async_post(
            `../../api/assiduites/create`,
            toCreate,
            async (data) => {
                if (data.errors.length > 0) {
                    console.error(data.errors);
                    data.errors.forEach((err) => {
                        let obj = toCreate[err.indice];
                        let etu = etuds.find((el) => el.id == obj.etudid);

                        const text = document.createTextNode(`Erreur pour ${etu.nom} ${etu.prenom} : ${err.message}`);
                        const toast = generateToast(text, "var(--color-error)", 10);
                        pushToast(toast);
                    });
                }
                counts.create = data.success.length;
            },
            (error) => {
                console.error("Erreur lors de la création de l'assiduité", error);
            }
        );
        // Affiche un loader
        afficheLoader();

        Promise.all([promiseCreate]).then(async () => {
            retirerLoader();
            await recupAssiduitesHebdo(updateTable);
            envoiToastTous("present", counts.create);
        });

    }

</script>


<script>
    function updateTemps(temps){
        let matin = document.getElementById("text-matin");
        let apresmidi = document.getElementById("text-apresmidi");
        matin.textContent = `${temps.matin.debut} à ${temps.matin.fin}`;
        apresmidi.textContent = `${temps.apresmidi.debut} à ${temps.apresmidi.fin}`;

        document.getElementById("excel-heures").value = Object.values(temps).map((el)=>Object.values(el).join(",")).join(",");

        recupAssiduitesHebdo(updateTable);
    }

    const temps = {
        matin: {
            debut: "{{ scu.get_assiduites_time_config("assi_morning_time") }}",
            fin: "{{ scu.get_assiduites_time_config("assi_lunch_time") }}"
        },
        apresmidi: {
            debut: "{{ scu.get_assiduites_time_config("assi_lunch_time") }}",
            fin: "{{ scu.get_assiduites_time_config("assi_afternoon_time") }}",
        }
    }



    document.getElementById("text-matin").addEventListener("click", (e)=>{
        e.preventDefault();
        openModal(true);
    });

    document.getElementById("text-apresmidi").addEventListener("click", (e)=>{
        e.preventDefault();
        openModal(false);
    });

    updateTemps(temps);

    const select = document.getElementById("moduleimpl_select");
    const excelModule = document.getElementById("excel-module");
    select.addEventListener("change", (ev)=>{
        excelModule.value = ev.target.value;
    });

    excelModule.value = select.value;

</script>

<script>

function openModal(morning = true){

    let text = morning ? "du matin" : "de l'après-midi";
    const modal = document.getElementById("timePickerModal");
    modal.querySelector("#timePicker-modal-text").textContent = text;

    let time1 = $("#time1");
    let time2 = $("#time2");

    // Réinitialiser les champs
    time1.val(morning ? temps.matin.debut : temps.apresmidi.debut);
    time2.val(morning ? temps.matin.fin : temps.apresmidi.fin);

    // Définir l'action du bouton de confirmation

    document.getElementById("confirmButton").onclick = function(){
        let debut = time1.val();
        let fin = time2.val();

        if (debut == "" || fin == ""){
            alert("Veuillez remplir les deux champs");
            return;
        }

        if (debut >= fin){
            alert("L'heure de début doit être inférieure à l'heure de fin");
            return;
        }

        if (morning){
            if (fin > temps.apresmidi.debut){
                alert("L'heure de fin du matin doit être inférieure à l'heure de début de l'après-midi");
                return;
            }
            temps.matin.debut = debut;
            temps.matin.fin = fin;
        } else {
            if (debut < temps.matin.fin){
                alert("L'heure de début de l'après-midi doit être supérieure à l'heure de fin du matin");
                return;
            }
            temps.apresmidi.debut = debut;
            temps.apresmidi.fin = fin;
        }

        updateTemps(temps);
        modal.classList.remove("show");
    }

    modal.classList.add("show");
}

document.addEventListener("DOMContentLoaded", ()=>{
    const modal = document.getElementById("timePickerModal");
    modal.querySelector(".timePicker-close").onclick = function() {
        modal.classList.remove("show");
    }

    document.addEventListener('keyup', function(e) {
        if (e.key === "Escape" && modal.classList.contains("show")) {
            modal.classList.remove("show");
        }
    });


    document.querySelectorAll("th .rbtn").forEach((el)=>{
        el.addEventListener("click", (e)=>{
            allPresent(...el.id.split("-"));
            e.preventDefault();
        })
    })
})

</script>


{% endblock scripts %}

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

{% block app_content %}

<h2>Signalement hebdomadaire de l'assiduité {{ gr | safe }}</h2>
<br>
<div id="actions" class="flex">
    <button onclick="changeWeek(true)">Semaine précédente</button>
    <label for="moduleimpl_select">
        Module:
        {{moduleimpl_select | safe}}
    </label>
    <button onclick="changeWeek(false)">Semaine suivante</button>
    <span><a href="{{url_choix_semaine}}" class="stdlink">autre semaine</a></span>
</div>

{% if readonly %}
{% else %}
<div class="scobox">
    <details>
        <summary>
            <span>Importation à partir d'un fichier excel</span>
        </summary>

        <div id="excel-content">
            <a href="feuille_abs_hebdo?{{query_string|safe}}" class="stdlink">Télécharger le modèle</a>
            <p class="hint">Avertissement : l'assiduité sera enregistrée en prenant en compte le module sélectionné plus haut et les heures sélectionnées plus bas.</p>
            <form action="feuille_abs_hebdo?{{query_string|safe}}" method="post" enctype="multipart/form-data">
                <input type="hidden" name="heures" value="" id="excel-heures">
                <input type="hidden" name="moduleimpl_id" value="" id="excel-module">
                <label for="file">
                    Sélectionnez un fichier:
                    <input id="file" type="file" name="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
                </label>
                <button type="submit">Importer</button>
            </form>
        </div>
    </details>
</div>
{% endif %}

{% if erreurs %}
<div class="scobox erreurs" id="excel-errors">
    <details>

        <summary>Erreurs</summary>

        <div>
            <p class="hint">Les erreurs suivantes ont été trouvées dans le fichier excel :</p>
            <ul>
                {% for erreur in erreurs %}
                <li>
                    <span>
                        {{erreur[0]}}
                        &rightarrow;
                        Colonne : {{erreur[1][1]}} - Ligne : {{erreur[1][0]}}
                    </span>
                </li>
                {% endfor %}
            </ul>
        </div>
    
    </details>
</div>
{% endif %}

<h3 id="tableau-dates">
    Le matin <a href="#" id="text-matin" title="Cliquer pour modifier les horaires">9h à 12h</a> et l'après-midi de <a href="#" id="text-apresmidi" title="Cliquer pour modifier les horaires">13h à 17h</a>
</h3>

{% if readonly %}
<h4
    title="Vous n'avez pas les permissions nécessaires afin de modifier les assiduités"
    data-tooltip
>
    Ouvert en mode <span class="rouge">lecture seule</span>.
</h4>

{% endif %}
<table id="table">
    <thead>
        <tr class="premier">
            <th rowspan="2">Étudiants</th>

            {% for jour in hebdo_jours %}

            {% if not jour[0] or jour[1][0] not in ['Samedi', 'Dimanche']  %}
            <th colspan="2" class="{{'grayed' if jour[0] else ''}}" >{{ jour[1][0] }} {{jour[1][1] }}</th>
            {% endif %}

            {% endfor %}
        </tr>
        <tr class="second">
            {% for jour in hebdo_jours %}

            {% if not jour[0] or jour[1][0]  not in ['Samedi', 'Dimanche']  %}
            <th class="{{'grayed' if jour[0] else ''}}">Matin</th>
            <th class="{{'grayed' if jour[0] else ''}}">Après-midi</th>
            {% endif %}
            {% endfor %}
        </tr>
        {% if not readonly and not non_present %}
        <tr>
            {# Ne pas afficher si preference "non presences" / "readonly" #}
            <th></th>
            {% for jour in hebdo_jours %}
            {% if not jour[0] or jour[1][0]  not in ['Samedi', 'Dimanche']  %}
            <th class="{{'grayed' if jour[0] else ''}}">
                <input title="Mettre tout le monde présent" data-tooltip type="checkbox" name="" id="{{loop.index - 1}}-am" class="rbtn present" {{'disabled' if jour[0] else ''}}>
            </th>
            <th class="{{'grayed' if jour[0] else ''}}">
                <input title="Mettre tout le monde présent" data-tooltip type="checkbox" name="" id="{{loop.index - 1}}-pm" class="rbtn present" {{'disabled' if jour[0] else ''}}>
            </th>
            {% endif %}
            {% endfor %}
        </tr>
        {% endif %}
    </thead>
    <tbody>
        {% for etud in etudiants %}
        <tr etudid="{{etud.etudid}}" id="row-{{etud.etudid}}">
            <td class="etudinfo" id="etud-{{etud.etudid}}">{{ etud.nom_prenom() }}</td>
            {# Sera rempli en JS #}
            {# Ne pas afficher bouton présent si pref "non présences" #}
            {# <td>
                <input type="checkbox" name="" id="" class="rbtn present">
                <input type="checkbox" name="" id="" class="rbtn retard">
                <input type="checkbox" name="" id="" class="rbtn absent">
            </td>
            <td>
                <input type="checkbox" name="" id="" class="rbtn present">
                <input type="checkbox" name="" id="" class="rbtn retard">
                <input type="checkbox" name="" id="" class="rbtn absent">
            </td> #}
        </tr>
        {% endfor %}
    </tbody>
</table>

<div id="timePickerModal" class="timePicker-modal">
    <div class="timePicker-modal-content">
        <span class="timePicker-close">&times;</span>
        <h2>Choisissez les horaires <span id="timePicker-modal-text"></span></h2>
        <div class="time-picker-container">
            <label for="time1">Début</label>
            <input type="text" id="time1" name="time1" class="timepicker" placeholder="hh:mm">
        </div>
        <div class="time-picker-container">
            <label for="time2">Fin</label>
            <input type="text" id="time2" name="time2" class="timepicker" placeholder="hh:mm">
        </div>
        <span>
        <button id="confirmButton">Confirmer</button>
    </div>
</div>

{% include "assiduites/widgets/alert.j2" %}
{% include "assiduites/widgets/toast.j2" %}
{% endblock app_content %}