{% 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 {
        width: 30px;
        height: 30px;
    }

    .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;
    }

    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;
    }


</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>

    document.querySelectorAll(".rbtn").forEach((el)=>{
        el.addEventListener("click", (e)=>{
            let target = e.target;
            let parent = target.parentElement;
            let inputs = parent.querySelectorAll(".rbtn");

            inputs.forEach((input)=>{
                if (input != target){
                    input.checked = false;
                }
            });
        });
    });

</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>Semaine précédente</button>
    <label for="moduleimpl_select">
        Module:
        {{moduleimpl_select | safe}}
    </label>
    <button>Semaine suivante</button>
</div>

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

<table>
    <thead>
        <tr class="premier">
            <th rowspan="2">Étudiants</th>
            <th colspan="2">Lundi</th>
            <th colspan="2">Mardi</th>
            <th colspan="2">Mercredi</th>
            <th colspan="2">Jeudi</th>
            <th colspan="2">Vendredi</th>
        </tr>
        <tr class="second">
            <th>Matin</th>
            <th>Après-midi</th>
            <th>Matin</th>
            <th>Après-midi</th>
            <th>Matin</th>
            <th>Après-midi</th>
            <th>Matin</th>
            <th>Après-midi</th>
            <th>Matin</th>
            <th>Après-midi</th>
        </tr>
    </thead>
    <tbody>
        {% for etud in etudiants %}
        <tr>
            <td class="etudinfo" id="etud-{{etud.etudid}}">{{ etud.nomprenom }}</td>
            {#  à changer par jour travaillés (sco pref) #}
            {% for day in ['lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi'] %}
            <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>
            {% endfor %}
        </tr>
        {% endfor %}
    </tbody>
</table>

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