{% 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="calendrier">
        {% for mois,jours in calendrier.items() %}
        <div class="month">
            <h3>{{mois}}</h3>
            <div class="days {{'demi' if mode_demi else ''}}">
                {% for jour in jours %}
                {% if jour.is_non_work() %}
                <div class="day {{jour.get_class()}}">
                    <span>{{jour.get_nom()}}</span>
                    {% else %}
                    <div class="day {{jour.get_class(show_pres, show_reta) if not mode_demi else ''}}">
                        {% endif %}
                        {% if mode_demi %}
                        {% if not jour.is_non_work() %}
                        <span>{{jour.get_nom()}}</span>
                        <span class="{{jour.get_demi_class(True, show_pres,show_reta)}}"></span>
                        <span class="{{jour.get_demi_class(False, show_pres,show_reta)}}"></span>
                        {% endif %}
                        {% else %}
                        {% if not jour.is_non_work() %}
                        <span>{{jour.get_nom(False)}}</span>
                        {% endif %}
                        {% endif %}

                        {% if not jour.is_non_work() and jour.has_assiduites()%}

                        <div class="dayline">
                            <div class="dayline-title">
                                <span>Assiduité du</span>
                                <br>
                                <span>{{jour.get_date()}}</span>
                                {{jour.generate_minitimeline() | safe}}
                            </div>
                        </div>

                        {% endif %}
                    </div>

                    {% endfor %}
                </div>
            </div>
            {% endfor %}
        </div>
        <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>
            <p>Code couleur</p>
            <ul class="couleurs">
                <li><span title="Vert" class="present demo"></span> &rightarrow; présence de l'étudiant lors de la
                    période
                </li>
                <li><span title="Bleu clair" class="nonwork demo"></span> &rightarrow; la période n'est pas travaillée
                </li>
                <li><span title="Rouge" class="absent demo"></span> &rightarrow; absence de l'étudiant lors de la
                    période
                </li>
                <li><span title="Rose" class="demo color absent est_just"></span> &rightarrow; absence justifiée
                </li>
                <li><span title="Orange" class="retard demo"></span> &rightarrow; retard de l'étudiant lors de la
                    période
                </li>
                <li><span title="Jaune clair" class="demo color retard est_just"></span> &rightarrow; retard justifié
                </li>

                <li><span title="Quart Bleu" class="est_just demo"></span> &rightarrow; la période est couverte par un
                    justificatif valide</li>
                <li><span title="Justif. non valide" class="invalide demo"></span> &rightarrow; la période est
                    couverte par un justificatif non valide
                </li>
                <li><span title="Justif. en attente" class="attente demo"></span> &rightarrow; la période
                    a un justificatif en attente de validation
                </li>
            </ul>


            <p>Vous pouvez passer le curseur sur les jours colorés afin de voir les informations supplémentaires</p>
        </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: start;
            overflow-x: scroll;
            border: 1px solid #444;
            border-radius: 12px;
            margin-bottom: 12px;
        }

        .month h3 {
            text-align: center;
        }

        .day,
        .demi .day.color.nonwork {
            text-align: left;
            margin: 2px;
            cursor: default;
            font-size: 13px;
            position: relative;
            font-weight: normal;
            min-width: 6em;
            display: flex;
            justify-content: start;
        }

        .demo.invalide {
            background-color: var(--color-justi-invalide) !important;
        }

        .demo.attente {
            background: repeating-linear-gradient(to bottom,
                    var(--color-justi-attente-stripe) 0px,
                    var(--color-justi-attente-stripe) 4px,
                    var(--color-justi-attente) 4px,
                    var(--color-justi-attente) 7px) !important;
        }

        .demo.est_just {
            background-color: var(--color-justi) !important;
        }


        .demi .day.nonwork>span {
            flex: none;
            border: none;
        }

        .demi .day {
            border-radius: 0;
        }


        @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 %}