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

{% block title %}Liste des responsables - Emusic{% endblock %}

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

    h1 {
        font-size: 40px;
        text-align: center;
        margin-bottom: 30px;
        color: var(--text-light);
    }

    .responsable-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        justify-content: center; 
        margin-top: 40px;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    .responsable-item {
        text-align: center;
        color: var(--text-light);
        width: 220px;
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
        margin-bottom: 40px;
        background-color: var(--card-bg);
        border-radius: var(--border-radius-lg);
        padding: 25px;
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--border-light);
    }

    .responsable-item:hover {
        transform: scale(1.05);
        box-shadow: var(--shadow-md);
    }

    .responsable-photo {
        width: 140px;
        height: 140px;
        margin: 0 auto;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        box-shadow: var(--shadow-sm);
        cursor: pointer;
        border: 3px solid var(--primary-color);
    }

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

    .info-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 15px;
        color: white;
        font-size: 0.95rem;
        background-color: var(--primary-color);
        padding: 8px 15px;
        border-radius: var(--border-radius);
        text-align: center;
        transition: var(--transition);
    }

    .info-btn:hover {
        background-color: var(--primary-dark);
        transform: translateY(-2px);
        box-shadow: var(--glow-primary);
    }

    .action-btns {
        display: inline-block;
        position: relative;
        margin-top: 10px;
        width: 100%;
    }

    .action-btn {
        width: 100%; 
        padding: 8px 15px;
        background-color: var(--input-bg);
        color: var(--text-light);
        border: 1px solid var(--border-light);
        text-align: center;
        cursor: pointer;
        border-radius: var(--border-radius);
        font-size: 0.95rem;
        transition: var(--transition);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }

    .action-btn:hover {
        background-color: var(--card-hover);
    }

    .action-menu {
        display: none;
        position: absolute;
        background-color: var(--card-bg);
        padding: 5px;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-md);
        right: 0;
        top: 40px;
        z-index: 10;
        min-width: 150px;
        border: 1px solid var(--border-light);
    }

    .action-menu a {
        display: flex;
        padding: 10px 15px;
        color: var(--text-light);
        text-decoration: none;
        align-items: center;
        gap: 8px;
        transition: var(--transition);
        border-radius: var(--border-radius-sm);
    }

    .action-menu a:hover {
        background-color: var(--card-hover);
    }

    .action-menu a.delete-btn {
        color: #f9a795;
    }

    .action-menu a.delete-btn:hover {
        background-color: #e74c3c;
        color: white;
    }

    .action-menu a.edit-btn {
        color: var(--primary-light);
    }

    .action-menu a.edit-btn:hover {
        background-color: var(--primary-color);
        color: white;
    }

    .popup {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--card-bg);
        border-radius: var(--border-radius-lg);
        padding: 25px;
        box-shadow: var(--shadow-lg);
        z-index: 999;
        max-width: 450px;
        width: 90%;
        border: 1px solid var(--border-light);
    }

    .popup h2 {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--text-light);
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--border-light);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .popup h2 i {
        color: var(--primary-color);
    }

    .popup-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(3px);
        z-index: 998;
    }

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

    .close-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: var(--input-bg);
        border: 1px solid var(--border-light);
        color: var(--text-light);
        font-size: 1.2rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: var(--transition);
    }

    .close-btn:hover {
        background-color: #e74c3c;
        color: white;
    }

    .popup table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 10px;
    }

    .popup table td {
        padding: 5px;
    }

    .popup table td:first-child {
        width: 100px;
        color: var(--text-muted);
        font-weight: 500;
    }

    .popup table td:last-child {
        color: var(--text-light);
    }

    .btn-ajouter {
        display: block;
        max-width: 200px;
        margin: 0 auto 40px;
        background-color: var(--primary-color);
        color: white;
        padding: 12px 25px;
        border-radius: var(--border-radius);
        text-decoration: none;
        font-size: 1rem;
        font-weight: 500;
        transition: var(--transition);
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .btn-ajouter:hover {
        background-color: var(--primary-dark);
        transform: translateY(-3px);
        box-shadow: var(--glow-primary);
    }

    .empty-message {
        text-align: center;
        padding: 50px;
        background-color: var(--card-bg);
        border-radius: var(--border-radius-lg);
        color: var(--text-muted);
        border: 1px solid var(--border-light);
        margin: 30px auto;
        max-width: 600px;
    }

    .empty-message i {
        font-size: 3rem;
        margin-bottom: 15px;
        color: var(--text-muted);
    }

    @media (max-width: 768px) {
        .responsable-grid {
            gap: 20px;
        }
    }
</style>

<h1>Liste des responsables</h1>

<a href="{{ path('gestionnaireAjouterResponsable') }}" class="btn-ajouter">
    <i class="fas fa-plus"></i>
    Ajouter un responsable
</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)">
                <i class="fas fa-info-circle"></i>
                Plus d'infos
            </a>

            <div class="action-btns">
                <button class="action-btn">
                    <i class="fas fa-ellipsis-h"></i>
                    Actions
                </button>
                <div class="action-menu">
                    <a href="{{ path('gestionnaireModifierResponsable', { 'id': r.id }) }}" class="edit-btn">
                        <i class="fas fa-edit"></i>
                        Modifier
                    </a>
                    <a href="#" class="delete-btn" data-id="{{ r.id }}">
                        <i class="fas fa-trash-alt"></i>
                        Supprimer
                    </a>
                </div>
            </div>
        </div>
    {% else %}
        <div class="empty-message">
            <i class="fas fa-users-slash"></i>
            <p>Aucun responsable trouvé.</p>
            <a href="{{ path('gestionnaireAjouterResponsable') }}" class="btn-ajouter" style="margin-top: 20px;">
                <i class="fas fa-plus"></i>
                Ajouter un responsable
            </a>
        </div>
    {% endfor %}
</div>

<div class="popup-overlay"></div>
<div class="popup">
    <button class="close-btn"><i class="fas fa-times"></i></button>
    <h2><i class="fas fa-user"></i> Détails du responsable</h2>
    <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.closest('.info-btn');
        const nom = button.getAttribute('data-nom');
        const prenom = button.getAttribute('data-prenom');
        const tel = button.getAttribute('data-tel');
        const numRue = button.getAttribute('data-numRue') || '';
        const rue = button.getAttribute('data-rue') || '';
        const copos = button.getAttribute('data-copos') || '';
        const ville = button.getAttribute('data-ville') || '';
        
        const adresse = [
            numRue && rue ? `${numRue} ${rue}` : '',
            copos && ville ? `${copos} ${ville}` : ''
        ].filter(Boolean).join(', ') || 'Non renseignée';
        
        document.getElementById('modal-nom').textContent = nom || 'Non renseigné';
        document.getElementById('modal-prenom').textContent = prenom || 'Non renseigné';
        document.getElementById('modal-tel').textContent = tel || 'Non renseigné';
        document.getElementById('modal-adresse').textContent = adresse;

        document.querySelector('.popup').classList.add('open');
        document.querySelector('.popup-overlay').classList.add('open');
        document.body.style.overflow = 'hidden';
    }

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

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

    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);
            }
        });
    });

    document.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;
            
            // Ferme tous les autres menus
            document.querySelectorAll('.action-menu').forEach(dropdown => {
                if (dropdown !== menu) {
                    dropdown.style.display = 'none';
                }
            });
            
            if (menu.style.display === 'block') {
                menu.style.display = 'none';
            } else {
                menu.style.display = 'block';
            }
        });
    });
    
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            document.querySelector('.popup').classList.remove('open');
            document.querySelector('.popup-overlay').classList.remove('open');
            document.body.style.overflow = '';
        }
    });
</script>
{% endblock %}