{% 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>
    .ui-timepicker-container,#ui-datepicker-div{
        z-index: 5 !important;
    }
    #new_periode,
    #actions {
        display: flex;
        flex-direction: column;
        width: fit-content;
        gap: 0.5em;
    }

    #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 {
        width: 10em;
    }

    #gtrcontent .pdp {
        display: none;
    }

    #gtrcontent[data-pdp="true"] .pdp {
        display: block;
    }

    #tableau-periode {
        overflow-x: scroll;
        max-width: var(--sco-content-max-width);
    }

    #tableau-periode .pdp {
        width: 2em;
        height: 2em;
        border-radius: 50%;
    }

    .grid-table {
        display: grid;
        grid-template-columns: 200px repeat({{ etudiants|length }}, 1fr);
        width: var(--sco-content-max-width);
    }
    .cell, .header {
        border: 1px solid #ddd;
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #f9f9f9;
    }
    .header{
        justify-content: space-between;

    }
    .cell{
        justify-content: center;

    }

    .cell p{
        text-align: center;
    }
    .sticky {
        position: sticky;
        left: 0;
        background-color: #f9f9f9;
        z-index: 2;
    }

    .cell .assiduite-bubble {
        display: block;
        top: 0;
        z-index: 0;
    }
    

</style>

{# Temporaire #}
<style>
.wip::before{
    content: "WIP 🚧";
    font-size: 1.5em;
    margin: 2px;
    color: red;
}
</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>

    function afficherPDP(checked) {
        if (checked) {
            gtrcontent.setAttribute("data-pdp", "true");
        } else {
            gtrcontent.removeAttribute("data-pdp");
        }
    }

    async function nouvellePeriode(){
        periodeId++;

        // On récupère les valeurs des inputs
        let date = document.getElementById("date").value;
        let debut = document.getElementById("debut").value;
        let fin = document.getElementById("fin").value;
        let moduleimpl_id = document.getElementById("moduleimpl_select").value;
        const moduleimpl = await getModuleImpl({moduleimpl_id: moduleimpl_id});

        // On ajoute la nouvelle période au tableau
        let periodeDiv = document.createElement("div");
        periodeDiv.classList.add("cell", "sticky");
        const periodP = document.createElement("p");
        periodP.textContent = `Période du ${date} de ${debut} à ${fin}`;

        const modP = document.createElement("p");
        modP.textContent = moduleimpl;

        const close = document.createElement("button");
        close.textContent = "❌";
        close.addEventListener("click", (event)=>{
            document.querySelectorAll(`.cell[data-periodeid="${periodeDiv.getAttribute('data-periodeid')}"]`).forEach((e)=>e.remove());
        });

        periodeDiv.appendChild(periodP);
        periodeDiv.appendChild(modP);
        periodeDiv.appendChild(close);
        periodeDiv.setAttribute("data-periodeid", periodeId);
        document.getElementById("tableau-periode").appendChild(periodeDiv);
        
        let etudids = [...document
        .querySelectorAll("#tableau-periode .header[data-etudid]")]
        .map((e)=>e.getAttribute("data-etudid"));
        
        const date_debut = new Date($("#date").datepicker("getDate").format("YYYY-MM-DD") + "T" + debut);
        const date_fin = new Date($("#date").datepicker("getDate").format("YYYY-MM-DD") + "T" + fin);
        date_debut.add(1, "seconds")
        const url =
        `../../api/assiduites/group/query?date_debut=${date_debut.toFakeIso()}` +
        `&date_fin=${date_fin.toFakeIso()}&etudids=${etudids.join(',')}&with_justifs`;
        

        await fetch(url)
        .then((res) => {
        if (!res.ok) {
            throw new Error("Network response was not ok");
        }
        return res.json();
        })
        .then((data)=>{
            Object.entries(data).forEach(([etudid, assiduites]) => {
                let cell = document.createElement("div");
                cell.classList.add("cell");
                cell.setAttribute("data-etudid", etudid);
                cell.setAttribute("data-periodeid", periodeId);

                if (assiduites.length == 0) {
                    ["present", "retard", "absent"].forEach((value) => {
                        const cbox = document.createElement('input');
                        cbox.type = "checkbox";
                        cbox.value = value;
                        cbox.name = `rbtn_${etudid}_${periodeId}`
                            cbox.classList.add("rbtn", value);

                        cbox.addEventListener('click', (event)=>{
                            const parent = event.target.parentElement;
                            parent.querySelectorAll(".rbtn").forEach((ele)=>{
                                if(ele.value != value){
                                    ele.checked = false;
                                }
                            })
                        })

                        cbox.checked = etatDef.value == value

                        cell.appendChild(cbox);
                    });
                }else{
                    setupAssiduiteBubble(cell, assiduites[0])
                }

                document.getElementById("tableau-periode").appendChild(cell);
            });
        }).catch((error)=>{
            console.error('Error:', error);
        });

    }



    let periodeId = 0;
    const moduleimpls = new Map();
    const nonWorkDays = [{{ nonworkdays| safe }}];


    window.forceModule = "{{ forcer_module }}" == "True"
    if (window.forceModule) {
        if (moduleimpl_select.value == "") {
            document.getElementById('forcemodule').style.display = "block";
                add_periode.disabled = true;

        }

        moduleimpl_select?.addEventListener('change', (e) => {
            if (e.target.value != "") {
                document.getElementById('forcemodule').style.display = "none";
                add_periode.disabled = false;

            } else {
                document.getElementById('forcemodule').style.display = "block";
                add_periode.disabled = true;

            }
        });
    }

    async function main(){
        afficherPDP(pdp.checked);
        $('#date').on('change', async function(d) {
        // On vérifie si la date est un jour travaillé
        dateCouranteEstTravaillee();
        });
    }


    main();
</script>

{% endblock scripts %}

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

{% block app_content %}

<h2>Signalement différé de l'assiduité {{gr |safe}}</h2>


<div id="fix">
    <!-- Nouvelle période
        Permet de créer une nouvelle ligne pour une nouvelle période
        (
            Jour, -> datepicker
            Heure de début, -> timepicker
            Heure de fin -> timepicker
            ModuleImplId -> select (liste des modules tout semestre confondu)
        )
    --->

    <div id="new_periode" class="box">
        <label for="date">
            Date :
            <input type="text" name="date" id="date" class="datepicker">
        </label>
        <label for="debut">
            Heure de début :
            <input type="text" name="debut" id="debut" class="timepicker">
        </label>
        <label for="fin">
            Heure de fin :
            <input type="text" name="fin" id="fin" class="timepicker">
        </label>

        <label for="moduleimpl_select">
            <div id="forcemodule" style="display: none; margin:10px 0px;">
                Vous devez spécifier le module ! (voir réglage préférence du semestre)
            </div>
            Module :
            {{moduleimpl_select | safe}}
        </label>

        <button id="add_periode" onclick="nouvellePeriode()">Ajouter une période</button>
    </div>


    <!-- Boutons d'actions
        - Sauvegarder
        - Afficher la photo de profil
        - Assiduité par défaut (aucune, present, retard, absent)
        ? - Import Excel (fournie un fichier excel 
            avec les étudiants et les périodes préremplis)
    --->

    <div id="actions" class="box">
        <label for="pdp">
            Photo de profil :
            <input type="checkbox" name="pdp" id="pdp" checked onclick="afficherPDP(this.checked)">
        </label>

        <label for="etatDef">
        Assiduité par défaut : 
        <select name="etatDef" id="etatDef">
            <option value="">Aucune</option>
            <option value="present">Présence</option>
            <option value="retard">Retard</option>
            <option value="absent">Absence</option>
        </select>
        </label>

        <label for="excel" class="wip">
            Importer Excel :
            <input type="file" name="excel" id="excel" accept=".xlsx, .xls, .csv">
        </label>
        <button class="wip" id="save wip">Sauvegarder l'assiduité</button>
    </div>
</div>

<br>

<!-- Tableau à double entrée 
        Colonne : Etudiants (Header = Nom, Prénom, Photo (si actif))
        Ligne : Période (Header = Jour, Heure de début, Heure de fin, ModuleImplId)
        Contenu : 
            - bouton assiduité (présent, retard, absent)
            - Bouton conflit si conflit de période
    --->

<div id="tableau-periode" class="grid-table">
   <!-- Header de la première colonne -->
    <div class="header sticky">Période</div>
    <!-- Headers des autres colonnes (noms des étudiants) -->
    {% for etud in etudiants %}
    <div class="header etudinfo" data-etudid="{{etud.etudid}}" id="head-{{etud.etudid}}">
        <img src="../../api/etudiant/etudid/{{etud.etudid}}/photo?size=small" alt="{{etud.nomprenom}}" class="pdp">
        <span>{{ etud.nomprenom }}</span>
    </div>
    {% endfor %}

   <!-- Sera remplis avec les nouvelles périodes -->

</div>


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