{% include "assiduites/widgets/tableau_base.j2" %}
<section class="alerte invisible">
    <p>Attention, cet étudiant a trop d'absences</p>
</section>

<section class="nonvalide">
    <!-- Tableaux des justificatifs à valider (attente / modifié ) -->
    <h4>Justificatifs en attente (ou modifiés)</h4>
    {% include "assiduites/widgets/tableau_justi.j2" %}
</section>

<div class="annee">
    <span>Année scolaire 2022-2023 Changer année: </span>
    <select name="" id="annee" onchange="setterAnnee(this.value)">
    </select>
</div>

<div class="legende">
    <h3>Gestion des justificatifs</h3>
    <p>
        Faites
        <span style="font-style: italic;">clic droit</span> sur une ligne du tableau pour afficher le menu contextuel :
    <ul>
        <li>Détails : Affiche les détails du justificatif sélectionné</li>
        <li>Editer : Permet de modifier le justificatif (dates, etat, ajouter/supprimer fichier etc)</li>
        <li>Supprimer : Permet de supprimer le justificatif (Action Irréversible)</li>
    </ul>
    </p>
</div>
<script>

    function loadAll() {
        generate(defAnnee)
    }

    function getDeptJustificatifsFromPeriod(action) {
        const path = getUrl() + `/api/justificatifs/dept/${dept_id}/query?date_debut=${bornes.deb}&date_fin=${bornes.fin}&etat=attente,modifie`
        async_get(
            path,
            (data, status) => {
                console.log(data);
                justificatifCallBack(data);

            },
            (data, status) => {
                console.error(data, status)
                errorAlert();
            }
        )
    }

    function generate(annee) {

        if (annee < 1999 || annee > 2999) {
            openAlertModal("Année impossible", document.createTextNode("L'année demandé n'existe pas."));
            return;
        }
        bornes = {
            deb: `${annee}-09-01T00:00`,
            fin: `${annee + 1}-06-30T23:59`
        }

        defAnnee = annee;

        getDeptJustificatifsFromPeriod()

    }

    function setterAnnee(annee) {
        annee = parseInt(annee);
        document.querySelector('.annee span').textContent = `Année scolaire ${annee}-${annee + 1} Changer année: `
        generate(annee)

    }
    let defAnnee = {{ annee }};
    let bornes = {
        deb: `${defAnnee}-09-01T00:00`,
        fin: `${defAnnee + 1}-06-30T23:59`
    }
    const dept_id = {{ dept_id }};

    window.addEventListener('load', () => {

        filterJustificatifs = {
            "columns": [
                "etudid",
                "entry_date",
                "date_debut",
                "date_fin",
                "etat",
                "raison",
                "fichier"
            ],
            "filters": {
                "etat": [
                    "attente",
                    "modifie"
                ]
            }
        }
        const select = document.querySelector('#annee');
        for (let i = defAnnee + 1; i > defAnnee - 6; i--) {
            const opt = document.createElement("option");
            opt.value = i + "",
                opt.textContent = i + "";
            if (i === defAnnee) {
                opt.selected = true;
            }
            select.appendChild(opt)
        }
        setterAnnee(defAnnee)
    })

</script>
<style>
    .stats-values-item {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;
    }

    .stats {
        border: 1px solid #333;
        padding: 5px 2px;
        width: fit-content;
    }

    .stats-values {
        display: flex;
        justify-content: flex-start;
        gap: 15px;
    }

    .stats-values-item h5 {
        font-weight: bold;
        text-decoration-line: underline;
    }

    .stats-values-part {
        display: flex;
        flex-direction: column;
    }

    .alerte {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        margin: 5px 0;
        border-radius: 7px;

        background-color: crimson;

    }

    .alerte.invisible {
        display: none;
    }

    .alerte p {
        font-size: larger;
        color: whitesmoke;

    }

    .suppr {
        margin: 5px 0;
    }
</style>