{% extends "sco_page.j2" %}
{% block title %}
Calendrier de l'assiduité
{% endblock title %}
{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/minitimeline.css">
<link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/assiduites.css">
{% endblock styles %}

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

<div class="pageContent">
    <h2>Assiduité de {{sco.etud.html_link_fiche()|safe}}</h2>

    <div class="options">
        <input type="checkbox" id="show_pres" name="show_pres" class="memo" {{'checked' if show_pres else '' }}><label
            for="show_pres">afficher les présences</label>
        <input type="checkbox" name="show_reta" id="show_reta" class="memo" {{'checked' if show_reta else '' }}><label
            for="show_reta">afficher les retards</label>
        <input type="checkbox" name="mode_demi" id="mode_demi" class="memo" {{'checked' if mode_demi else '' }}><label
            for="mode_demi">mode demi journée</label>
    </div>

    <div class="cal">
        {{calendrier|safe}}
        <div class="annee">
            <span id="label-annee">Année scolaire</span><span id="label-changer" style="margin-left: 5px;">Changer
                année: </span>
            <select name="" id="annee">
            </select>

            <span id="label-nom">Assiduité de {{sco.etud.nomprenom}}</span>
        </div>

        <div class="help">
            <h3>Calendrier</h3>
            {% include "assiduites/widgets/legende_couleur.j2" %}
        </div>
        <ul class="couleurs print">
            <li><span title="Vert" class="present demo"></span> présence
            </li>
            <li><span title="Bleu clair" class="nonwork demo"></span> non travaillé
            </li>
            <li><span title="Rouge" class="absent demo"></span> absence
            </li>
            <li><span title="Rose" class="demo color absent est_just"></span> absence justifiée
            </li>
            <li><span title="Orange" class="retard demo"></span> retard
            </li>
            <li><span title="Jaune clair" class="demo color retard est_just"></span>retard justifié
            </li>
            <li><span title="Quart Bleu" class="est_just demo"></span>
                justificatif valide</li>
            <li><span title="Quart Violet" class="invalide demo"></span> justificatif non valide
            </li>
        </ul>
    </div>

    <style>
        .help .couleurs {
            grid-template-columns: 2;
            grid-template-rows: auto;
            display: grid;
        }

        .couleurs.print {
            display: none;
        }

        .help .couleurs li:nth-child(odd) {
            grid-column: 1;
            list-style-type: none;
        }

        .help .couleurs li:nth-child(even) {
            grid-column: 2;
            list-style-type: none;
        }



        .pageContent {
            margin-top: 1vh;
            max-width: var(--sco-content-max-width);
        }

        .calendrier {
            display: flex;
            justify-content: center;
            overflow-x: scroll;
            border: 1px solid #444;
            border-radius: 12px;
            margin-bottom: 12px;
        }

        .assi_case {
            display: flex;
            width: 100%;
            height: 100%;
        }

        .assi_case > span {
            flex: 1;
        }

        .assi_case>span:last-of-type {
            border-left: #d5d5d5 solid 1px;
        }
        .assi_case>span:first-of-type {
            border-right: #d5d5d5 solid 1px;
        }

        .dayline{
            display: none;
        }

        @media print {

            .couleurs.print {
                display: flex;
                justify-content: space-evenly;
                align-items: center;
            }

            .couleurs.print li {
                list-style-type: none !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }

            .day,
            .demi .day.color.color.nonwork {
                min-width: 5em;
                font-size: 11px;
            }

            .demi .day>span:first-of-type {
                width: 2.5em;
                min-width: 2.5em;
            }

            .color {
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }

            .day.est_just,
            .demi .day span.est_just {
                background-image: none;

            }

            .day.invalide,
            .demi .day span.invalide {
                background-image: none;
            }

            .demi .day span.est_just::before {
                content: "J";
            }

            .demi .day span.invalide::before {
                content: "JI";
            }

            #sidebar,
            .help,
            h2,
            #annee,
            #label-changer,
            .options {
                display: none;
            }

            #label-nom,
            #label-justi {
                display: inline;
            }

            #gtrcontent {
                margin: 5px;
            }

            .annee {
                display: flex;
                justify-content: space-evenly;
                align-items: center;
            }
        }
    </style>

    <script>
        function getOptions() {
            return {
                "show_pres": document.getElementById("show_pres").checked,
                "show_reta": document.getElementById("show_reta").checked,
                "mode_demi": document.getElementById("mode_demi").checked,
            }
        }


        function updatePage() {
            const url = new URL(location.href);
            const options = getOptions();
            url.searchParams.set("annee", document.getElementById('annee').value);
            url.searchParams.set("mode_demi", options.mode_demi);
            url.searchParams.set("show_pres", options.show_pres);
            url.searchParams.set("show_reta", options.show_reta);

            if (location.href != url.href) {
                location.href = url.href
            }
        }

        const defAnnee = "{{ annee | safe}}"
        let annees = {{ annees | safe }}
        annees = annees.filter((x, i) => annees.indexOf(x) === i)
        const etudid = {{ sco.etud.id }};

        const select = document.querySelector('#annee');
        annees.forEach((a) => {
            const opt = document.createElement("option");
            let a_1 = a.substring(0, 4)
            opt.value = a_1 + "",
                opt.textContent = a
            if (a_1 === defAnnee) {
                opt.selected = true;
                document.querySelector('.annee #label-annee').textContent = `Année scolaire ${a}`

            }
            select.appendChild(opt)
        })

        document.querySelectorAll('input[type="checkbox"].memo, #annee').forEach(el => {
            el.addEventListener('change', function () {
                updatePage();
            })
        });

        document.querySelectorAll('[assi_id]').forEach((el, i) => {
            el.addEventListener('click', () => {
                const assi_id = el.getAttribute('assi_id');
                window.open(`${SCO_URL}Assiduites/tableau_assiduite_actions?type=assiduite&action=details&obj_id=${assi_id}`);
            })
        });
    </script>
    {% endblock app_content %}