{# Formulaire ajout ou modification de justificatif
Si justif, edit #}
{% extends "sco_page_dept.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;
}
fieldset > div {
    margin-bottom: 12px;
}
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;
}
.info-saisie {
    margin-top: 12px;
    margin-bottom: 12px;
    font-style: italic;
}
</style>
<div class="tab-content">
    <h2>{{title|safe}}</h2>
    {% if readonly %}
    <h3 class="rouge">Vous n'avez pas la permission de modifier ce justificatif</h3>
    {% endif %}
    {% if justif %}
        <div class="informations">

        <div class="info-saisie">
            <span>Saisie par {{justif.saisie_par}} le {{justif.entry_date}}</span>
        </div>

        <div class="info-row">
            <span class="info-label">Assiduités concernées: </span>
            {% if justif.justification.assiduites %}
            <ul>
                {% for assi in justif.justification.assiduites %}
                <li><a href="{{url_for('assiduites.edit_assiduite_etud',
                    assiduite_id=assi.assiduite_id, scodoc_dept=g.scodoc_dept)
                    }}" target="_blank">{{assi.etat}} du {{assi.date_debut}} au
                    {{assi.date_fin}}</a>
                </li>
                {% endfor %}
            </ul>
            {% else %}
            <span class="text">Aucune</span>
            {% endif %}
        </div>

        </div>
    {% endif %}

    <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 }}
                {{ 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 class="raison">
            {% if (not justif) or can_view_justif_detail %}
                <div>{{ form.raison.label }}</div>
                {{ form.raison() }}
                {{ render_field_errors(form, 'raison') }}
                <div class="help">La raison sera visible aux utilisateurs ayant le droit
                <tt>AbsJustifView</tt> et à celui ayant déposé le justificatif
                {%- if justif and justif.user %} (<b>{{justif.user.get_prenomnom()}}</b>){%- endif -%}.
                </div>
            {% else %}
                <div class="unauthorized">raison confidentielle</div>
            {% endif %}
        </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' if filenames|length > 1 else 'est accessible'}}
                    {% endif %}
                    </b>
                </div>
                <ul>
                {% for filename in filenames %}
                    <li><span data-justif_id="{{justif.id}}" data-filename="{{filename}}" class="suppr_fichier_just"
                    >{{scu.icontag("delete_img", alt="supprimer", title="Supprimer")|safe}}</span>
                    <a href="{{url_for('apiweb.justif_export',justif_id=justif.justif_id,
                            filename=filename, scodoc_dept=g.scodoc_dept)}}">{{filename}}</a>
                    </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épôt #}
        {{ form.entry_date.label }}&nbsp;: {{ form.entry_date }} à {{ form.entry_time }}
        <span class="help" style="margin-left: 12px;">laisser vide pour date courante</span>
        {{ render_field_errors(form, 'entry_date') }}

        {% if not readonly %}
        {# Submit #}
        <div class="submit">
        {{ form.submit }} {{ form.cancel }}
        </div>

        {% if justif %}
        <div class="info-row">
            <a
                style="color:red;"
                href="{{url_for(
                'assiduites.tableau_assiduite_actions',
                type='justificatif',
                action='supprimer',
                obj_id=justif.justif_id,
                scodoc_dept=g.scodoc_dept,
            )}}"
            >Supprimer le justificatif</a>
        </div>
        {% endif %}
        {% endif %}



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

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

{% endblock app_content %}

{% block scripts %}
{{ super() }}
<script src="{{scu.STATIC_DIR}}/js/etud_info.js"></script>
{% include "sco_timepicker.j2" %}
<script>
document.addEventListener("DOMContentLoaded", function() {
    // On récupère les boutons de suppression de fichiers
    const deleteButtons = document.querySelectorAll('.suppr_fichier_just');
    // On récupère le formulaire
    const form = document.getElementById('ajout-justificatif-etud');
    // Pour chaque bouton, on ajoute une fonction de suppression
    deleteButtons.forEach((btn)=>{
        // Quand le bouton est cliqué, on récupère les infos
        // et on ajoute un input hidden au formulaire
        // et enfin on supprime l'élement <li> du DOM.
        btn.addEventListener("click",()=>{
            const filename = btn.getAttribute('data-filename');
            const justif_id = btn.getAttribute('data-justif_id');

            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'suppr_fichier_just';
            input.value = filename;
            form.appendChild(input);

            btn.parentNode.remove();
        })
    })
});
</script>
{% endblock scripts %}