{% include "assiduites/widgets/toast.j2" %}
{% block pageContent %}
<div class="pageContent">
    <h3>Ajouter une assiduité</h3>
    {% if saisie_eval %}
    <div id="saisie_eval">
        <br>
        <h3>
            La saisie de l'assiduité a été préconfigurée en fonction de l'évaluation. <br>
            Une fois la saisie finie, cliquez sur le lien si dessous pour revenir sur la gestion de l'évaluation
        </h3>
        <a href="{{redirect_url}}">retourner sur la page de l'évaluation</a>
    </div>
    {% endif %}
    <section class="assi-form page">
        <fieldset>
            <div class="assi-row">
                <div class="assi-label">
                    <legend for="assi_date_debut" required>Date de début</legend>
                    <scodoc-datetime name="assi_date_debut" id="assi_date_debut"> </scodoc-datetime>
                    <span>Journée entière</span> <input type="checkbox" name="assi_journee" id="assi_journee">
                </div>
                <div class="assi-label" id="date_fin">
                    <legend for="assi_date_fin" required>Date de fin</legend>
                    <scodoc-datetime name="assi_date_fin" id="assi_date_fin"></scodoc-datetime>
                </div>
            </div>

            <div class="assi-row">
                <div class="assi-label">
                    <legend for="assi_etat" required>Etat de l'assiduité</legend>
                    <select name="assi_etat" id="assi_etat">
                        <option value="absent" selected>Absent</option>
                        <option value="retard">Retard</option>
                        <option value="present">Présent</option>
                    </select>
                </div>
            </div>
            <div class="assi-row">
                <div class="assi-label">
                    <legend for="assi_module" required>Module</legend>
                    {% with moduleid="ajout_assiduite_module_impl",label=false %}
                    {% include "assiduites/widgets/moduleimpl_dynamic_selector.j2" %}
                    {% endwith %}
                </div>
            </div>

            <div class="assi-row">
                <div class="assi-label">
                    <legend for="assi_raison">Raison</legend>
                    <textarea name="assi_raison" id="assi_raison" cols="50" rows="10" maxlength="500"></textarea>
                </div>
            </div>

            <div class="assi-row">
                <button onclick="validerFormulaire(this)">Créer l'assiduité</button>
                <button onclick="effacerFormulaire()">Remettre à zero</button>
            </div>


        </fieldset>

    </section>
    <section class="liste">
        {{tableau | safe }}
    </section>

</div>

<style>
    .assi-row {
        margin: 5px 0;
    }

    .assi-form fieldset {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

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

    .assi-label {
        margin: 0 10px;
    }

    [required]::after {
        content: "*";
        color: var(--color-error);
    }
</style>
<script>


    function validateFields() {
        const field = document.querySelector('.assi-form')
        const { deb, fin } = getDates()
        const date_debut = new Date(deb);
        const date_fin = new Date(fin);

        if (deb == "" || fin == "" || !date_debut.isValid() || !date_fin.isValid()) {
            openAlertModal("Erreur détéctée", document.createTextNode("Il faut indiquer une date de début et une date de fin valide."), "", color = "crimson");
            return false;
        }

        if (date_fin.isBefore(date_debut)) {
            openAlertModal("Erreur détéctée", document.createTextNode("La date de fin doit se trouver après la date de début."), "", color = "crimson");
            return false;
        }

        return true
    }

    function fieldsToAssiduite() {
        const field = document.querySelector('.assi-form.page')

        const { deb, fin } = getDates()

        const etat = field.querySelector('#assi_etat').value;
        const raison = field.querySelector('#assi_raison').value;
        const module = field.querySelector("#ajout_assiduite_module_impl").value;

        return {
            date_debut: new Date(deb).toFakeIso(),
            date_fin: new Date(fin).toFakeIso(),
            etat: etat,
            description: raison,
            moduleimpl_id: module,
        }
    }

    function validerFormulaire(btn) {
        if (!validateFields()) return

        const assiduite = fieldsToAssiduite();
        let assiduite_id = null;

        createAssiduiteComplete(assiduite, etudid);
        updateTableau();
        btn.disabled = true;
        setTimeout(() => {
            btn.disabled = false;
        }, 1000)

    }

    function effacerFormulaire() {
        const field = document.querySelector('.assi-form')

        field.querySelector('#assi_date_debut').value = "";
        field.querySelector('#assi_date_fin').value = "";
        field.querySelector('#assi_etat').value = "attente";
        field.querySelector('#assi_raison').value = "";

    }

    function dayOnly() {
        const date_deb = document.getElementById("assi_date_debut");
        const date_fin = document.getElementById("assi_date_fin");

        if (document.getElementById('assi_journee').checked) {
            date_deb.setAttribute("show", "date")
            date_fin.setAttribute("show", "date")
            document.querySelector(`legend[for="assi_date_fin"]`).removeAttribute("required")
        } else {
            date_deb.removeAttribute("show")
            date_fin.removeAttribute("show")
            document.querySelector(`legend[for="assi_date_fin"]`).setAttribute("required", "")
        }
    }

    function getDates() {
        const date_deb = document.querySelector(".page #assi_date_debut")
        const date_fin = document.querySelector(".page #assi_date_fin")
        const journee = document.querySelector('.page #assi_journee').checked
        const deb = date_deb.valueAsObject.date + "T" + (journee ? assi_morning : date_deb.valueAsObject.time)
        let fin = "T" + (journee ? assi_evening : date_fin.valueAsObject.time)
        if (journee) {
            fin = (date_fin.valueAsObject.date || date_deb.valueAsObject.date) + fin
        } else {
            fin = date_fin.valueAsObject.date + fin
        }

        return {
            "deb": deb,
            "fin": fin,
        }
    }

    const etudid = {{ sco.etud.id }};

    const assi_limit_annee = "{{ assi_limit_annee }}" == "True" ? true : false;
    const assi_morning = '{{assi_morning}}';
    const assi_evening = '{{assi_evening}}';

    {% if saisie_eval %}
    const saisie_eval = true;
    const date_deb = "{{date_deb}}";
    const date_fin = "{{date_fin}}";
    const moduleimpl = {{ moduleimpl_id }};
    {% else %}
    const saisie_eval = false;
    {% endif %}

    window.addEventListener("load", () => {
        document.getElementById('assi_journee').addEventListener('click', () => { dayOnly() });
        dayOnly()

        if (saisie_eval) {
            document.getElementById("assi_date_debut").value = Date.removeUTC(date_deb);
            document.getElementById("assi_date_fin").value = Date.removeUTC(date_fin);
        } else {
            const today = (new Date()).format("YYYY-MM-DD");
            document.getElementById("assi_date_debut").valueAsObject = { date: today, time: assi_morning }
            document.getElementById("assi_date_fin").valueAsObject = { time: assi_evening }
        }


        document.getElementById("assi_date_debut").addEventListener("blur", (event) => {
            updateSelect(null, "#ajout_assiduite_module_impl", event.target.valueAsObject.date)
        })

        updateSelect(saisie_eval ? moduleimpl : "", "#ajout_assiduite_module_impl", document.getElementById("assi_date_debut").valueAsObject.date);


    });
</script>
{% endblock pageContent %}