{% extends 'base.html.twig' %}

{% block content %}
<style>
    a {
        text-decoration: none;
    }

    h1 {
        font-size: 40px;
        text-align: center;
        margin-bottom: 30px;
    }

    .responsable-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        justify-content: center; 
        margin-top: 40px;
    }

    .responsable-item {
        text-align: center;
        color: white;
        width: 200px;
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
        margin-bottom: 40px;
        background-color: #313237;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    .responsable-item:hover {
        transform: scale(1.05);
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
    }

    .responsable-photo {
        width: 120px;
        height: 120px;
        margin: 0 auto;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    }

    .responsable-item p {
        margin-top: 15px;
        font-size: 1.2rem;
    }

    .info-btn {
        display: block;
        margin-top: 10px;
        text-decoration: none;
        color: #fff;
        font-size: 1rem;
        background-color: green;
        padding: 5px 10px;
        border-radius: 5px;
        text-align: center;
    }

    .info-btn:hover {
        background-color: #313237;
    }

    .action-btns {
        display: inline-block;
        position: relative;
    }

    .action-btn {
        width: 100%; 
        padding: 10px;
        background-color: #313237;
        color: white;
        border: none;
        text-align: center;
        cursor: pointer;
        border-radius: 5px;
        font-size: 1rem;
    }

    .action-btn:hover {
        background-color: #2b2f34;
    }

    .action-menu {
        display: none;
        position: absolute;
        background-color: #313237;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        right: 0;
        top: 30px;
        z-index: 1;
    }

    .action-menu a {
        display: block;
        padding: 8px;
        color: white;
        text-decoration: none;
    }

    .action-menu a:hover {
        background-color: #2b2f34;
    }

    .popup {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #181B22;
        padding: 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        z-index: 999;
        border-radius: 10px;
        max-width: 400px;
        width: 100%;
    }

    .popup-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
    }

    .popup.open, .popup-overlay.open {
        display: block;
    }

    .close-btn {
        color: white;
        font-size: 20px;
        border: none;
        background: none;
        cursor: pointer;
    }

    .close-btn:hover {
        color: red;
    }

    .tabs {
        margin-bottom: 10px;
    }

    .tab-button {
        padding: 10px;
        margin-right: 10px;
        cursor: pointer;
        background-color: #f1f1f1;
        border: 1px solid #ddd;
    }

    .tab-button.active {
        background-color: #181B22;
        color: white;
    }

    .tab-panel {
        display: none;
    }

    .tab-panel.active {
        display: block;
    }

    .btn-ajouter {
        display: inline-block;
        background-color: #313237;
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
        text-decoration: none;
        margin-left: 20px;
        font-size: 1.2rem;
    }

    .btn-ajouter:hover {
        background-color: #2b2f34;
    }
</style>

<h1>Liste des responsables</h1>

<a href="{{ path('gestionnaireAjouterResponsable') }}" class="btn-ajouter">Ajouter</a>

<div class="responsable-grid">
    {% for r in responsables %}
        <div class="responsable-item">
            <a href="{{ path('gestionnaireConsulterResponsable', { 'id': r.id }) }}">
                <div class="responsable-photo" style="background-image: url('{{ asset('responsable/' ~ r.cheminImage) }}');"></div>
            </a>
            <p>{{ r.nom }} {{ r.prenom }}</p>
            <a href="#" class="info-btn" data-id="{{ r.id }}"
               data-nom="{{ r.nom }}"
               data-prenom="{{ r.prenom }}"
               data-tel="{{ r.tel }}"
               data-numRue="{{ r.numRue }}"
               data-rue="{{ r.rue }}"
               data-copos="{{ r.copos }}"
               data-ville="{{ r.ville }}"
               onclick="openPopup(event)">+ d'infos</a>

            <div class="action-btns">
                <button class="action-btn">Actions</button>
                <div class="action-menu">
                    <a href="{{ path('gestionnaireModifierResponsable', { 'id': r.id }) }}">Modifier</a>
                    <a href="#" class="delete-btn" data-id="{{ r.id }}">Supprimer</a>
                </div>
            </div>
        </div>
    {% else %}
        <p>Aucun responsable trouvé.</p>
    {% endfor %}
</div>

<div class="popup-overlay"></div>
<div class="popup">
    <button class="close-btn">&times;</button>
    <h2>Détails du responsable</h2>
    <div class="tabs">
        <button class="tab-button active" data-target="responsable">Responsable</button>
    </div>

    <div class="tab-content">
        <div class="tab-panel active" id="responsable">
            <table>
                <tr><td>Nom :</td><td><span id="modal-nom"></span></td></tr>
                <tr><td>Prénom :</td><td><span id="modal-prenom"></span></td></tr>
                <tr><td>Téléphone :</td><td><span id="modal-tel"></span></td></tr>
                <tr><td>Adresse :</td><td><span id="modal-adresse"></span></td></tr>
            </table>
        </div>
    </div>
</div>

<script>
    function openPopup(event) {
        event.preventDefault();
        
        const button = event.target;
        const nom = button.getAttribute('data-nom');
        const prenom = button.getAttribute('data-prenom');
        const tel = button.getAttribute('data-tel');
        const adresse = `${button.getAttribute('data-numRue')} ${button.getAttribute('data-rue')}, ${button.getAttribute('data-copos')} ${button.getAttribute('data-ville')}`;
        
        document.getElementById('modal-nom').textContent = nom;
        document.getElementById('modal-prenom').textContent = prenom;
        document.getElementById('modal-tel').textContent = tel;
        document.getElementById('modal-adresse').textContent = adresse;

        document.querySelector('.popup').classList.add('open');
        document.querySelector('.popup-overlay').classList.add('open');
    }

    document.querySelector('.close-btn').addEventListener('click', function() {
        document.querySelector('.popup').classList.remove('open');
        document.querySelector('.popup-overlay').classList.remove('open');
    });

    document.querySelector('.popup-overlay').addEventListener('click', function() {
        document.querySelector('.popup').classList.remove('open');
        document.querySelector('.popup-overlay').classList.remove('open');
    });

    document.querySelectorAll('.delete-btn').forEach(button => {
        button.addEventListener('click', function(event) {
            event.preventDefault();

            const responsableId = this.dataset.id;
            const confirmation = confirm('Êtes-vous sûr de vouloir supprimer ce responsable ?');
            
            if (confirmation) {
               window.location.href = `{{ path('gestionnaireSupprimerResponsable', { 'id': '__ID__' }) }}`.replace('__ID__', responsableId);
            }
        });
    });

    window.addEventListener('click', function(event) {
        if (!event.target.closest('.action-btns')) {
            const dropdowns = document.querySelectorAll('.action-menu');
            dropdowns.forEach(dropdown => {
                dropdown.style.display = 'none';
            });
        }
    });

    document.querySelectorAll('.action-btn').forEach(button => {
        button.addEventListener('click', function(event) {
            const menu = this.nextElementSibling;
            if (menu.style.display === 'block') {
                menu.style.display = 'none';
            } else {
                menu.style.display = 'block';
            }
        });
    });
</script>
{% endblock %}