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

{% block title %}Annonces{% endblock %}

{% block page_title %}Annonces{% endblock %}

{% block body %}
    {% if is_granted('ROLE_DIRECTION') %}
        <div class="card mb-5 mb-xl-8">
            <div class="card-header border-0 pt-6">
                <div class="card-title"><h3>Publier une annonce</h3></div>
            </div>
            <div class="card-body pt-0">
                <form method="post" action="{{ path('equipe_annonces_publier') }}">
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('equipe_annonces_publier') }}">
                    <div class="mb-4">
                        <label class="form-label">Titre *</label>
                        <input type="text" name="titre" required class="form-control">
                    </div>
                    <div class="mb-4">
                        <label class="form-label">Contenu *</label>
                        <textarea name="contenu" required class="form-control"></textarea>
                    </div>
                    <div class="mb-4 form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="visible_parents" value="1" checked id="annonce-visible-parents">
                        <label class="form-check-label" for="annonce-visible-parents">Visible des parents</label>
                        <div class="text-muted fs-8">Décochez pour une consigne interne à l'équipe uniquement.</div>
                    </div>
                    <button type="submit" class="btn btn-primary">Publier</button>
                </form>
            </div>
        </div>
    {% endif %}

    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title"><h3>Historique</h3></div>
        </div>
        <div class="card-body pt-0">
            {% if annonces is empty %}
                <div class="text-muted" id="annonces-vide">Aucune annonce.</div>
            {% endif %}
            <div class="d-flex flex-column gap-4" id="liste-annonces">
                {% for annonce in annonces %}
                    <div class="border rounded p-4">
                        <div class="d-flex align-items-center gap-2 mb-1">
                            <h4 class="mb-0">{{ annonce.titre }}</h4>
                            {% if annonce.visibleParents %}
                                <span class="badge badge-light-success">Visible parents</span>
                            {% else %}
                                <span class="badge badge-light-warning">Interne uniquement</span>
                            {% endif %}
                        </div>
                        <div class="text-muted fs-7 mb-2">{{ annonce.dateHeure|date('d/m/Y H:i') }} - {{ annonce.auteur.prenom }} {{ annonce.auteur.nom }}</div>
                        <div>{{ annonce.contenu }}</div>
                    </div>
                {% endfor %}
            </div>
            {% if total > annonces|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 listeAnnonces = document.getElementById('liste-annonces');
            let offset = {{ annonces|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 creerCarteAnnonce(annonce) {
                const carte = document.createElement('div');
                carte.className = 'border rounded p-4';
                const badgeHtml = annonce.visibleParents
                    ? '<span class="badge badge-light-success">Visible parents</span>'
                    : '<span class="badge badge-light-warning">Interne uniquement</span>';
                carte.innerHTML =
                    '<div class="d-flex align-items-center gap-2 mb-1"><h4 class="mb-0">' + echapperHtml(annonce.titre) + '</h4>' + badgeHtml + '</div>' +
                    '<div class="text-muted fs-7 mb-2">' + echapperHtml(annonce.dateHeure) + ' - ' + echapperHtml(annonce.auteur) + '</div>' +
                    '<div>' + echapperHtml(annonce.contenu) + '</div>';
                return carte;
            }

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

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