{% extends '@EasyAdmin/crud/detail.html.twig' %}
{% block content %}
    {% include 'admin/crud/styles.html.twig' %}
    {{ parent() }}
    {# Ton bouton inséré comme un champ EasyAdmin dans le fieldset #}
    <div id="custom-societe-contactable" class="field-group">
        <div class="field-label">
            <div>Société Contactable</div>
        </div>
        <div class="field-value">
            <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" id="societeContactable"
                    {% if entreprise.societeContactable %}
                        checked
                    {% elseif entreprise.societeContactable is null %}
                        disabled
                    {% endif %}
                    disabled>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const fieldsetRow = document.querySelector('.form-fieldset-body .row');
            const customField = document.getElementById('custom-societe-contactable');

            if (fieldsetRow && customField) {
                fieldsetRow.appendChild(customField);
            }
        });
    </script>

<br>
    <!-- Boutons d'action -->
    <div class="mt-4 d-flex flex-wrap gap-2">
        <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#rappelModal" data-entreprise-id="{{ entity.primaryKeyValue }}">
            Historique des rappels
        </button>
<br>
        <button type="button"
            class="btn btn-primary rounded d-flex flex-column align-items-center text-center"
            data-bs-toggle="modal"
            data-bs-target="#commentaireModal"
            data-entreprise-id="{{ entity.primaryKeyValue }}">
        <span>Ajouter un commentaire</span>
        </button>
    </div>
<br>
<!-- Onglets commentaires par année -->
<div class="comments-section mt-5">
    <h3>Commentaires</h3>

    {% if commentairesParAnnee is not empty %}
        <ul class="nav nav-tabs mb-3" role="tablist">
            {% for annee, commentaires in commentairesParAnnee %}
                <li class="nav-item" role="presentation">
                    <a class="nav-link {% if loop.first %}active{% endif %}" data-bs-toggle="tab" href="#comments-{{ annee }}" role="tab">
                        {{ annee }}
                    </a>
                </li>
            {% endfor %}
        </ul>

        <div class="tab-content">
            {% for annee, commentaires in commentairesParAnnee %}
                <div class="tab-pane fade {% if loop.first %}show active{% endif %}" id="comments-{{ annee }}" role="tabpanel">
                    {% for commentaire in commentaires %}
                        <a href="{{ ea_url().setController('App\\Controller\\Admin\\CommentaireCrudController').setAction('detail').setEntityId(commentaire.id) }}"
                           class="d-block p-3 border-bottom border-secondary-subtle text-decoration-none text-dark">
                            <p style="color: #5368d5;">
                                {{ commentaire.dateCreation|date('d/m/Y') }}
                            </p>
                            <p class="mb-0" style="white-space: normal; word-wrap: break-word; max-width: 65ch;">
                                {{ commentaire.contenu }}
                            </p>
                        </a>
                    {% endfor %}
                </div>
            {% endfor %}
        </div>
    {% else %}
        <p>Aucun commentaire disponible.</p>
    {% endif %}
</div>


<br>
   <!-- Tabs Versements -->
<div class="tab-content mt-5">
    <ul class="nav nav-tabs mb-4" role="tablist">
        {% for annee, versements in versementsParAnnee %}
            <li class="nav-item" role="presentation">
                <a class="nav-link {% if loop.first %}active{% endif %}" data-bs-toggle="tab" href="#tab-{{ annee }}">
                    {{ annee }}
                </a>
            </li>
        {% endfor %}
    </ul>

    {% for annee, versements in versementsParAnnee %}
        {% set total = 0 %}
        {% for versement in versements %}
            {% set total = total + versement.montant %}
        {% endfor %}
        <div class="tab-pane fade {% if loop.first %}show active{% endif %}" id="tab-{{ annee }}">
            <div class="card shadow-sm mb-4">
                <div class="card-header" style="background-color: #5368d5;">
                    <h5 class="mb-0 text-white">Versements pour l'année {{ annee }}</h5>
                    <p class="mb-0 text-white">Total : {{ total|number_format(2, ',', ' ') }} €</p>
                </div>
                <div class="card-body table-responsive">
                    <table class="table table-striped table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>Date</th>
                                <th>SIRET</th>
                                <th>SIREN</th>
                                <th>Montant</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for versement in versements %}
                                <tr class="clickable-row" data-href="{{ path('admin', { 'crudAction': 'detail', 'entityId': versement.id, 'crudControllerFqcn': 'App\\Controller\\Admin\\VersementCrudController' }) }}">
                                    <td>{{ versement.dateVersement|date('d/m/Y') }}</td>
                                    <td>{{ versement.siret }}</td>
                                    <td>{{ versement.siren }}</td>
                                    <td>{{ versement.montant|number_format(2, ',', ' ') }} €</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    {% endfor %}
</div>
<style>
    .clickable-row {
        cursor: pointer;
    }
</style>
<script>
    // Rend chaque ligne cliquable
    document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll(".clickable-row").forEach(function (row) {
            row.addEventListener("click", function () {
                window.location.href = row.dataset.href;
            });
        });
    });
</script>

    <!-- Modal Rappels -->
    <div class="modal fade" id="rappelModal" tabindex="-1" aria-labelledby="rappelModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="rappelModalLabel">Rappels</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                </div>
                <div class="modal-body" id="rappelModalContent">
                    Chargement...
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Commentaire -->
<!-- Modal Commentaire -->
<div class="modal fade" id="commentaireModal" tabindex="-1" aria-labelledby="commentaireModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="commentaireModalLabel">Ajouter un commentaire</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Formulaire qui envoie une requête POST -->
                <form method="POST" action="{{ path('admin_ajouter_commentaire') }}">
                    <!-- Champ caché pour l'ID de l'entreprise -->
                    <input type="hidden" name="entrepriseId" value="{{ entity.primaryKeyValue }}">
                    <div class="mb-3">
                        <label for="commentaireText" class="form-label">Commentaire</label>
                        <textarea class="form-control" id="commentaireText" name="contenu" rows="3" required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Envoyer</button>
                </form>
            </div>
        </div>
    </div>
</div>

    <!-- Scripts -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Chargement rappels
            const modal = document.getElementById('rappelModal');
            modal.addEventListener('show.bs.modal', function (event) {
                const button = event.relatedTarget;
                const entrepriseId = button.getAttribute('data-entreprise-id');
                fetch(`/admin/entreprise/${entrepriseId}/rappels`)
                    .then(response => response.text())
                    .then(html => {
                        document.getElementById('rappelModalContent').innerHTML = html;
                    })
                    .catch(error => {
                        document.getElementById('rappelModalContent').innerHTML = 'Erreur de chargement des rappels.';
                        console.error(error);
                    });
            });
        });
    </script>
{% endblock %}