{% extends 'administration/_layout.html.twig' %}

{% block title %}Thèmes d'activités{% endblock %}

{% block page_title %}Thèmes d'activités{% endblock %}

{% block body %}
    <div class="card mb-5 mb-xl-8">
        <div class="card-header border-0 pt-6">
            <div class="card-title"><h3>Nouveau thème</h3></div>
        </div>
        <div class="card-body pt-0">
            <form method="post" action="{{ path('administration_themes_activites_nouveau') }}" class="row g-3 align-items-end">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('themes_activites_nouveau') }}">
                <div class="col-md-4">
                    <label class="form-label">Libellé *</label>
                    <input type="text" name="libelle" placeholder="Motricité, Éveil sensoriel, Arts plastiques..." required class="form-control">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Début (facultatif)</label>
                    <input type="date" name="date_debut" class="form-control">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Fin (facultatif)</label>
                    <input type="date" name="date_fin" class="form-control">
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary">Créer</button>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Description <span class="text-muted fs-8">(affichée à l'équipe à chaque saisie de suivi liée à ce thème)</span></label>
                    <input type="text" name="description" class="form-control">
                </div>
                <div class="col-md-6">
                    <label class="form-label">Objectif pédagogique <span class="text-muted fs-8">(facultatif)</span></label>
                    <input type="text" name="objectif_pedagogique" placeholder="Éveiller la motricité fine..." class="form-control">
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title"><h3>Thèmes</h3></div>
        </div>
        <div class="card-body pt-0">
            {% if themes is empty %}
                <div class="text-muted" id="themes-vide">Aucun thème d'activité. Les éducateurs ne pourront pas saisir d'activité tant qu'au moins un thème actif n'existe pas.</div>
            {% endif %}
            <div class="d-flex flex-column gap-3" id="liste-themes">
                {% for theme in themes %}
                    <div>
                        <div class="d-flex align-items-center justify-content-between border rounded p-3">
                            <div>
                                {{ theme.libelle }}
                                {% if theme.actif %}
                                    <span class="badge badge-light-success ms-2">Actif</span>
                                {% else %}
                                    <span class="badge badge-light ms-2">Désactivé</span>
                                {% endif %}
                                {% if theme.dateDebut or theme.dateFin %}
                                    <div class="text-muted fs-7">
                                        {% if theme.dateDebut and theme.dateFin %}
                                            du {{ theme.dateDebut|date('d/m/Y') }} au {{ theme.dateFin|date('d/m/Y') }}
                                        {% elseif theme.dateDebut %}
                                            à partir du {{ theme.dateDebut|date('d/m/Y') }}
                                        {% else %}
                                            jusqu'au {{ theme.dateFin|date('d/m/Y') }}
                                        {% endif %}
                                    </div>
                                {% endif %}
                                {% if theme.description %}
                                    <div class="text-muted fs-7">{{ theme.description }}</div>
                                {% endif %}
                                {% if theme.objectifPedagogique %}
                                    <div class="text-muted fs-7 fst-italic">Objectif : {{ theme.objectifPedagogique }}</div>
                                {% endif %}
                            </div>
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-light btn-sm" data-bs-toggle="collapse" data-bs-target="#collapse-modifier-theme-{{ theme.id }}">Modifier</button>
                                {% if theme.actif %}
                                    <form method="post" action="{{ path('administration_themes_activites_desactiver', {id: theme.id}) }}">
                                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('themes_activites_desactiver_' ~ theme.id) }}">
                                        <button type="submit" class="btn btn-light btn-sm">Désactiver</button>
                                    </form>
                                {% else %}
                                    <form method="post" action="{{ path('administration_themes_activites_activer', {id: theme.id}) }}">
                                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('themes_activites_activer_' ~ theme.id) }}">
                                        <button type="submit" class="btn btn-light-success btn-sm">Activer</button>
                                    </form>
                                {% endif %}
                            </div>
                        </div>
                        <div class="collapse mt-3" id="collapse-modifier-theme-{{ theme.id }}">
                            <div class="border rounded p-3 bg-light-secondary">
                                <form method="post" action="{{ path('administration_themes_activites_modifier', {id: theme.id}) }}" class="row g-3 align-items-end">
                                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('themes_activites_modifier_' ~ theme.id) }}">
                                    <div class="col-md-4">
                                        <label class="form-label">Libellé *</label>
                                        <input type="text" name="libelle" value="{{ theme.libelle }}" required class="form-control form-control-sm">
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label">Début</label>
                                        <input type="date" name="date_debut" value="{{ theme.dateDebut ? theme.dateDebut|date('Y-m-d') : '' }}" class="form-control form-control-sm">
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label">Fin</label>
                                        <input type="date" name="date_fin" value="{{ theme.dateFin ? theme.dateFin|date('Y-m-d') : '' }}" class="form-control form-control-sm">
                                    </div>
                                    <div class="col-md-4">
                                        <button type="submit" class="btn btn-primary btn-sm">Enregistrer</button>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Description</label>
                                        <input type="text" name="description" value="{{ theme.description }}" class="form-control form-control-sm">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Objectif pédagogique</label>
                                        <input type="text" name="objectif_pedagogique" value="{{ theme.objectifPedagogique }}" class="form-control form-control-sm">
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
            {% if total > themes|length %}
                <div class="text-center mt-5">
                    <button type="button" id="charger-plus" class="btn btn-light-primary">Charger plus</button>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block javascripts_bottom %}
    {{ parent() }}
    <script>
        (function () {
            const boutonChargerPlus = document.getElementById('charger-plus');
            if (!boutonChargerPlus) {
                return;
            }

            const listeThemes = document.getElementById('liste-themes');
            let offset = {{ themes|length }};
            const limite = {{ taillePage }};

            function echapperHtml(valeur) {
                if (valeur === null || valeur === undefined) {
                    return '';
                }
                return String(valeur)
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#39;');
            }

            function creerLigneTheme(theme) {
                const conteneur = document.createElement('div');

                const badgeHtml = theme.actif
                    ? '<span class="badge badge-light-success ms-2">Actif</span>'
                    : '<span class="badge badge-light ms-2">Désactivé</span>';

                let periodeHtml = '';
                if (theme.dateDebut && theme.dateFin) {
                    periodeHtml = 'du ' + echapperHtml(theme.dateDebut) + ' au ' + echapperHtml(theme.dateFin);
                } else if (theme.dateDebut) {
                    periodeHtml = 'à partir du ' + echapperHtml(theme.dateDebut);
                } else if (theme.dateFin) {
                    periodeHtml = "jusqu'au " + echapperHtml(theme.dateFin);
                }
                if (periodeHtml !== '') {
                    periodeHtml = '<div class="text-muted fs-7">' + periodeHtml + '</div>';
                }

                let descriptionHtml = '';
                if (theme.description) {
                    descriptionHtml = '<div class="text-muted fs-7">' + echapperHtml(theme.description) + '</div>';
                }
                let objectifHtml = '';
                if (theme.objectifPedagogique) {
                    objectifHtml = '<div class="text-muted fs-7 fst-italic">Objectif : ' + echapperHtml(theme.objectifPedagogique) + '</div>';
                }

                const actionHtml = theme.actif
                    ? '<form method="post" action="' + echapperHtml(theme.urlDesactiver) + '">' +
                      '<input type="hidden" name="_csrf_token" value="' + echapperHtml(theme.csrfDesactiver) + '">' +
                      '<button type="submit" class="btn btn-light btn-sm">Désactiver</button></form>'
                    : '<form method="post" action="' + echapperHtml(theme.urlActiver) + '">' +
                      '<input type="hidden" name="_csrf_token" value="' + echapperHtml(theme.csrfActiver) + '">' +
                      '<button type="submit" class="btn btn-light-success btn-sm">Activer</button></form>';

                const idCollapse = 'collapse-modifier-theme-' + theme.id;

                conteneur.innerHTML =
                    '<div class="d-flex align-items-center justify-content-between border rounded p-3">' +
                    '<div>' + echapperHtml(theme.libelle) + ' ' + badgeHtml + periodeHtml + descriptionHtml + objectifHtml + '</div>' +
                    '<div class="d-flex gap-2">' +
                    '<button type="button" class="btn btn-light btn-sm" data-bs-toggle="collapse" data-bs-target="#' + idCollapse + '">Modifier</button>' +
                    actionHtml +
                    '</div>' +
                    '</div>' +
                    '<div class="collapse mt-3" id="' + idCollapse + '">' +
                    '<div class="border rounded p-3 bg-light-secondary">' +
                    '<form method="post" action="' + echapperHtml(theme.urlModifier) + '" class="row g-3 align-items-end">' +
                    '<input type="hidden" name="_csrf_token" value="' + echapperHtml(theme.csrfModifier) + '">' +
                    '<div class="col-md-4"><label class="form-label">Libellé *</label>' +
                    '<input type="text" name="libelle" value="' + echapperHtml(theme.libelle) + '" required class="form-control form-control-sm"></div>' +
                    '<div class="col-md-2"><label class="form-label">Début</label>' +
                    '<input type="date" name="date_debut" value="' + echapperHtml(theme.dateDebutBrut) + '" class="form-control form-control-sm"></div>' +
                    '<div class="col-md-2"><label class="form-label">Fin</label>' +
                    '<input type="date" name="date_fin" value="' + echapperHtml(theme.dateFinBrut) + '" class="form-control form-control-sm"></div>' +
                    '<div class="col-md-4"><button type="submit" class="btn btn-primary btn-sm">Enregistrer</button></div>' +
                    '<div class="col-md-6"><label class="form-label">Description</label>' +
                    '<input type="text" name="description" value="' + echapperHtml(theme.description) + '" class="form-control form-control-sm"></div>' +
                    '<div class="col-md-6"><label class="form-label">Objectif pédagogique</label>' +
                    '<input type="text" name="objectif_pedagogique" value="' + echapperHtml(theme.objectifPedagogique) + '" class="form-control form-control-sm"></div>' +
                    '</form>' +
                    '</div>' +
                    '</div>';

                return conteneur;
            }

            boutonChargerPlus.addEventListener('click', function () {
                boutonChargerPlus.disabled = true;

                fetch('{{ path('administration_themes_activites_donnees') }}?offset=' + offset + '&limit=' + limite)
                    .then(function (reponse) { return reponse.json(); })
                    .then(function (donnees) {
                        donnees.items.forEach(function (theme) {
                            listeThemes.appendChild(creerLigneTheme(theme));
                        });
                        offset += donnees.items.length;
                        boutonChargerPlus.disabled = false;
                        if (offset >= donnees.total) {
                            boutonChargerPlus.remove();
                        }
                    });
            });
        })();
    </script>
{% endblock %}