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

{% block title %}Membres{% endblock %}

{% block body %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>Membres</h1>
    <a href="{{ path('app_membre_new') }}" class="btn btn-success">
        <i class="fas fa-plus"></i> Nouveau Membre
    </a>
</div>

<div class="alert alert-info">
    <strong>Édition inline :</strong> Cliquez sur les cellules nom, prénom ou email pour les modifier directement.
    <br><small>Les modifications sont enregistrées automatiquement. Vérifiez la console (F12) pour les logs.</small>
</div>

<div class="table-responsive">
    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th>Id</th>
                <th>Nom</th>
                <th>Prénom</th>
                <th>Email</th>
                <th>Contributions</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        {% for membre in membres %}
            <tr data-membre-id="{{ membre.id }}">
                <td>{{ membre.id }}</td>
                <td class="editable-cell" 
                    data-entity-type="Membre" 
                    data-entity-id="{{ membre.id }}" 
                    data-field="nom"
                    title="Cliquez pour modifier">
                    {{ membre.nom|default('') }}
                </td>
                <td class="editable-cell" 
                    data-entity-type="Membre" 
                    data-entity-id="{{ membre.id }}" 
                    data-field="prenom"
                    title="Cliquez pour modifier">
                    {{ membre.prenom|default('') }}
                </td>
                <td class="editable-cell" 
                    data-entity-type="Membre" 
                    data-entity-id="{{ membre.id }}" 
                    data-field="email"
                    title="Cliquez pour modifier">
                    {{ membre.email|default('') }}
                </td>
                <td>{{ membre.contributions|length }}</td>
                <td>
                    <a href="{{ path('app_membre_show', {'id': membre.id}) }}" class="btn btn-sm btn-info">
                        <i class="fas fa-eye"></i> Voir
                    </a>
                    <a href="{{ path('app_membre_edit', {'id': membre.id}) }}" class="btn btn-sm btn-warning">
                        <i class="fas fa-edit"></i> Modifier
                    </a>
                </td>
            </tr>
        {% else %}
            <tr>
                <td colspan="6" class="text-center">Aucun membre trouvé</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const editableCells = document.querySelectorAll('.editable-cell');
            
            editableCells.forEach(cell => {
                cell.addEventListener('click', function() {
                    // Ne rien faire si la cellule est déjà en mode édition
                    if (cell.querySelector('input')) return;

                    const currentValue = cell.textContent.trim();
                    const field = cell.dataset.field;
                    const entityId = cell.dataset.entityId;
                    const entityType = cell.dataset.entityType;

                    // Créer un input pour l'édition
                    const input = document.createElement('input');
                    input.type = field === 'email' ? 'email' : 'text';
                    input.value = currentValue;
                    input.classList.add('form-control', 'form-control-sm');
                    
                    // Style pour l'input
                    input.style.width = '100%';
                    input.style.boxSizing = 'border-box';

                    // Remplacer le contenu de la cellule par l'input
                    cell.innerHTML = '';
                    cell.appendChild(input);
                    input.focus();

                    // Gestion de la sauvegarde
                    const saveChanges = async () => {
                        const newValue = input.value.trim();
                        
                        // Ne rien faire si la valeur n'a pas changé
                        if (newValue === currentValue) {
                            cell.textContent = currentValue;
                            return;
                        }

                        try {
                            // Envoyer la requête AJAX
                            const response = await fetch('{{ path('app_membre_update_field') }}', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-Requested-With': 'XMLHttpRequest'
                                },
                                body: JSON.stringify({
                                    id: entityId,
                                    field: field,
                                    value: newValue
                                })
                            });

                            const data = await response.json();
                            
                            if (data.success) {
                                cell.textContent = newValue;
                                cell.classList.add('bg-success', 'text-white');
                                setTimeout(() => {
                                    cell.classList.remove('bg-success', 'text-white');
                                }, 1000);
                            } else {
                                throw new Error(data.message || 'Erreur lors de la mise à jour');
                            }
                        } catch (error) {
                            console.error('Erreur:', error);
                            cell.textContent = currentValue;
                            alert('Erreur lors de la sauvegarde: ' + error.message);
                        }
                    };

                    // Sauvegarder lors de la perte de focus
                    input.addEventListener('blur', saveChanges);

                    // Sauvegarder avec la touche Entrée
                    input.addEventListener('keypress', function(e) {
                        if (e.key === 'Enter') {
                            input.blur();
                        }
                    });

                    // Annuler avec la touche Échap
                    input.addEventListener('keydown', function(e) {
                        if (e.key === 'Escape') {
                            cell.textContent = currentValue;
                        }
                    });
                });
            });
        });
    </script>
{% endblock %}
{% endblock %}