{% block pageContent %}

<div class="pageContent">
    <h3>Justifier des assiduités</h3>
    {% include "assiduites/widgets/tableau_base.j2" %}
    <section class="liste">
        <a class="icon filter" onclick="filter(false)"></a>
        {% include "assiduites/widgets/tableau_justi.j2" %}
    </section>

    <section class="justi-form">

        <fieldset>
            <div class="justi-row">
                <button onclick="validerFormulaire()">Créer le justificatif</button>
                <button onclick="effacerFormulaire()">Remettre à zero</button>
            </div>
            <div class="justi-row">
                <div class="justi-label">
                    <legend for="justi_date_debut" required>Date de début</legend>
                    <input type="datetime-local" name="justi_date_debut" id="justi_date_debut">
                </div>
                <div class="justi-label">
                    <legend for="justi_date_fin" required>Date de fin</legend>
                    <input type="datetime-local" name="justi_date_fin" id="justi_date_fin">
                </div>
            </div>

            <div class="justi-row">
                <div class="justi-label">
                    <legend for="justi_etat" required>Etat du justificatif</legend>
                    <select name="justi_etat" id="justi_etat">
                        <option value="attente" selected>En Attente de validation</option>
                        <option value="non_valide">Non Valide</option>
                        <option value="modifie">Modifié</option>
                        <option value="valide">Valide</option>
                    </select>
                </div>
            </div>

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

                </div>
                <div class="justi-label">
                    <legend for="justi_fich">Importer un fichier</legend>
                    <input type="file" name="justi_fich" id="justi_fich" multiple>
                </div>
            </div>



        </fieldset>

    </section>

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

        <p>Cliquer sur l'icone d'entonoir afin de filtrer le tableau des justificatifs</p>

    </div>

</div>

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

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

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

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

    [required]::after {
        content: "*";
        color: crimson;
    }
</style>
<script>


    function validateFields() {
        const field = document.querySelector('.justi-form')
        const in_date_debut = field.querySelector('#justi_date_debut');
        const in_date_fin = field.querySelector('#justi_date_fin');

        if (in_date_debut.value == "" || in_date_fin.value == "") {
            openAlertModal("Erreur détéctée", document.createTextNode("Il faut indiquer une date de début et une date de fin."), "", color = "crimson");
            return false;
        }

        const date_debut = moment.tz(in_date_debut.value, TIMEZONE);
        const date_fin = moment.tz(in_date_fin.value, TIMEZONE);

        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 fieldsToJustificatif() {
        const field = document.querySelector('.justi-form')

        const date_debut = field.querySelector('#justi_date_debut').value;
        const date_fin = field.querySelector('#justi_date_fin').value;
        const etat = field.querySelector('#justi_etat').value;
        const raison = field.querySelector('#justi_raison').value;

        return {
            date_debut: date_debut,
            date_fin: date_fin,
            etat: etat,
            raison: raison,
        }
    }

    function importFiles(justif_id) {
        const field = document.querySelector('.justi-form')

        const in_files = field.querySelector('#justi_fich');
        const path = getUrl() + `/api/justificatif/${justif_id}/import`;

        const requests = []
        Array.from(in_files.files).forEach((f) => {
            const fd = new FormData();
            fd.append('file', f);
            requests.push(
                $.ajax(
                    {
                        url: path,
                        type: 'POST',
                        data: fd,
                        dateType: 'json',
                        contentType: false,
                        processData: false,
                        success: () => { },
                    }
                )
            )

        });

        $.when(
            requests
        ).done(() => {
            loadAll();
        })

    }

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

        const justificatif = fieldsToJustificatif();
        let justif_id = null;
        let couverture = null;

        createJustificatif(justificatif, (data) => {
            if (Object.keys(data.errors).length > 0) {
                console.error(data.errors);
                errorAlert();
            }
            if (Object.keys(data.success).length > 0) {
                couverture = data.success[0].couverture
                justif_id = data.success[0].justif_id;
                importFiles(justif_id);
                return;
            }
        })
    }

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

        field.querySelector('#justi_date_debut').value = "";
        field.querySelector('#justi_date_fin').value = "";
        field.querySelector('#justi_etat').value = "attente";
        field.querySelector('#justi_raison').value = "";
        field.querySelector('#justi_fich').value = "";

    }



    const etudid = {{ sco.etud.id }};
    window.onload = () => {
        loadAll();
    }
</script>
{% endblock pageContent %}