{# Formulaire ajout ou modification de justificatif
Si justif, edit #}
{% extends "sco_page.j2" %}
{% import 'wtf.j2' as wtf %}

{% block styles %}
    {{super()}}
    <link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/assiduites.css">
{% endblock %}


{% block app_content %}
<style>
form#ajout-justificatif-etud {
    margin-bottom: 24px;
}
form#ajout-justificatif-etud > div {
    margin-bottom: 16px;
}
div.fichiers {
    margin-top: 16px;
    margin-bottom: 32px;
}
div.fichiers ul {
    list-style-type: none;
}
span.suppr_fichier_just {
    margin-right: 8px;
}
div.submit {
    margin-top: 12px;
}
div.submit > input {
    margin-right: 16px;
}
</style>
<div class="tab-content">
    <h2>Justifier des absences ou retards</h2>

    <section class="justi-form page">

    {% for err_msg in form.error_messages %}
        <div class="wtf-error-messages">
            {{ err_msg }}
        </div>
    {% endfor %}

    <form id="ajout-justificatif-etud" method="post" enctype="multipart/form-data">
    <fieldset>
        {{ form.hidden_tag() }}
        {# Dates et heures #}
        <div class="dates-heures">
            {{ form.date_debut.label }}&nbsp;: {{ form.date_debut }}
            de {{ form.heure_debut }} à {{ form.heure_fin }}
            <span class="help">laisser les heures vides pour indiquer la journée entière</span>
            {{ render_field_errors(form, 'date_debut') }}
            {{ render_field_errors(form, 'heure_debut') }}
            {{ render_field_errors(form, 'heure_fin') }}

            <div>
                {{ form.date_fin.label }}&nbsp;: {{ form.date_fin }}
                <span class="help">si le jour de fin est différent,
                les heures seront ignorées (journées complètes)</span>
                {{ render_field_errors(form, 'date_fin') }}
            </div>
        </div>
        {# Etat #}
        <div>
            <div>{{ form.etat.label }}</div>
            {{ form.etat() }}
            {{ render_field_errors(form, 'etat') }}
        </div>
        {# Raison #}
        <div>
            <div>{{ form.raison.label }}</div>
            {{ form.raison() }}
            {{ render_field_errors(form, 'raison') }}
        </div>
        <div class="fichiers">
            {# Liste des fichiers existants #}
            {% if justif and nb_files > 0 %}
                <div><b>{{nb_files}} fichiers justificatifs déposés
                    {% if filenames|length < nb_files %}
                    , dont {{filenames|length}} vous sont accessibles
                    {% endif %}
                    </b>
                </div>
                <ul>
                {% for filename in filenames %}
                    <li><span data-justif_id="{{justif.id}}" class="suppr_fichier_just"
                    >{{scu.icontag("delete_img", alt="supprimer", title="Supprimer")|safe}}</span>
                    {{filename}}</li>
                {% endfor %}
                </ul>
            {% endif %}
            {# Ajout fichier(s) justificatif(s) #}
            <div>
                <div>{{ form.fichiers.label }}</div>
                {{ form.fichiers() }}
                {{ render_field_errors(form, 'fichiers') }}
            </div>
        </div>
        {# Date dépot #}
        {{ form.entry_date.label }}&nbsp;: {{ form.entry_date }}
        <span class="help">laisser vide pour date courante</span>
        {{ render_field_errors(form, 'entry_date') }}
        {# Submit #}
        <div class="submit">
        {{ form.submit }} {{ form.cancel }}
        </div>

    </fieldset>
    </form>
    </section>
    {% if tableau %}
    <section class="assi-liste">
        {{tableau | safe }}
    </section>
    {% endif %}
</div>

{% include "assiduites/explication_etats_justifs.j2" %}

{% endblock app_content %}

{% block scripts %}
{{ super() }}
<script src="{{scu.STATIC_DIR}}/js/assiduites.js"></script>
<script src="{{scu.STATIC_DIR}}/js/etud_info.js"></script>
{% include "sco_timepicker.j2" %}
<script>
document.addEventListener("DOMContentLoaded", function() {
    // Suppression d'un fichier justificatif
    function delete_file(justif_id, fileName, liElement) {
        // Construct the URL
        var url = "{{url_for('apiweb.justif_remove', justif_id=-1, scodoc_dept=g.scodoc_dept)}}".replace('-1', justif_id);

        payload = {
            "remove": "list",
            "filenames" : [ fileName ],
        }
        // Send API request
        fetch(url, {
            method: 'POST',
            headers: {
					'Accept': 'application/json',
					'Content-Type': 'application/json'
			},
			body: JSON.stringify(payload)
        })
        .then(response => {
            if (response.ok) {
                // Hide the <li> element on successful deletion
                liElement.style.display = 'none';
                sco_message("fichier supprimé");
            } else {
                // Handle non-successful responses here
                console.error('Deletion failed:', response.statusText);
                sco_error_message("erreur lors de la suppression du fichier");
            }
        })
        .catch(error => {
            console.error('Error:', error);
            sco_error_message("erreur lors de la suppression du fichier (2)");
        });
    }

    // Add event listeners to all elements with class 'suppr_fichier_just'
    var deleteButtons = document.querySelectorAll('.suppr_fichier_just');
    deleteButtons.forEach(function(button) {
        button.addEventListener('click', function() {
            // Get the text content of the next sibling node
            var justif_id = this.dataset.justif_id;
            var fileName = this.nextSibling.nodeValue.trim();
            var liElement = this.parentNode;  // Get the parent <li> element
            delete_file(justif_id, fileName, liElement);
        });
    });
});
</script>
{% endblock scripts %}