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

{% block title %}Hello MyApiController!{% endblock %}

{% block body %}
<style>
    .bloc-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 10px;
        margin: 0;
        list-style: none;
    }
    .bloc-item {
        width: calc(20% - 20px);
        margin-bottom: 20px;
        background-color: #ffffff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        overflow: hidden;
        transition: all 0.3s ease-in-out; /* Animation de transition */
    }
    .bloc-item:hover {
        transform: translateY(-5px); /* Effet de translation sur hover */
    }
    .bloc-item img {
        width: 100%;
        height: auto;
        border-radius: 10px 10px 0 0;
        transition: transform 0.3s ease-in-out; /* Animation de transition */
    }
    .bloc-item:hover img {
        transform: scale(1.05); /* Effet de mise à l'échelle sur hover */
    }
    .bloc-item-content {
        padding: 10px;
    }
    .bloc-item-content h3 {
        margin-top: 0;
        margin-bottom: 10px;
        font-size: 1rem;
    }
    .bloc-item-content p {
        margin: 0;
        font-size: 0.9rem;
    }
    .pagination {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        list-style: none;
        padding: 0;
    }
    .pagination li {
        margin: 0 5px;
    }
    .pagination li a {
        text-decoration: none;
        padding: 5px 10px;
        background-color: #f2f2f2;
        border-radius: 5px;
    }
    .pagination li.active a {
        background-color: #007bff;
        color: #ffffff;
    }
    
</style>







{% set itemsPerPage = 10 %}
{% set totalPages = (data|length / itemsPerPage)|round(0, 'ceil') %}
{% set currentPage = app.request.query.get('page', 1)|default(1) %}
{% set start = (currentPage - 1) * itemsPerPage %}
{% set end = start + itemsPerPage %}

<ul class="bloc-container">
    {% for person in data|slice(start, end) %}
        <li class="bloc-item">
            {% if person.image %}
                <img src="https://127.0.0.1:8000/uploads/personnes/{{ person.image }}" alt="Photo de {{ person.name }} {{ person.firstName }}">
            {% endif %}
            <div class="bloc-item-content">
                <h3>{{ person.name }} {{ person.firstName }}</h3>
                {% if person.job_designation %}
                    <p>{{ person.job_designation }}</p>
                {% endif %}
                {% if person.profile_rs %}
                    <p>Profil Réseaux Sociaux: {{ person.profile_rs }}</p>
                {% endif %}
                {% if person.hobbies %}
                    <p>Hobbies: {{ person.hobbies | join(', ') }}</p>
                {% endif %}
                <div class="action-buttons">
                    <button class="btn-modifier" data-person-id="{{ person.id }}">Modifier</button>
                    <button class="btn-supprimer" data-person-id="{{ person.id }}">Supprimer</button>
                </div>
            </div>
        </li>
    {% endfor %}
</ul>

<div class="pagination">
    {% for page in 1..totalPages %}
        <li class="{% if page == currentPage %}active{% endif %}">
            <a href="?page={{ page }}">{{ page }}</a>
        </li>
    {% endfor %}
</div>



<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Récupération des boutons de suppression
        var btnsSupprimer = document.querySelectorAll('.btn-supprimer');

        // Ajout des écouteurs d'événements
        btnsSupprimer.forEach(function(btn) {
            btn.addEventListener('click', function() {
                var personId = btn.getAttribute('data-person-id');
                // Afficher un message de confirmation pour la suppression
                var confirmation = confirm('Êtes-vous sûr de vouloir supprimer cette personne ?');
                if (confirmation) {
                    // Supprimer la personne via l'API DELETE
                    fetch('https://127.0.0.1:8000/api/personne/' + personId, {
                        method: 'DELETE',
                        mode: 'no-cors'
                    })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('La suppression de la personne a échoué.');
                        }
                        // Mettre à jour l'interface après la suppression
                        // Vous devez implémenter cette logique
                    })
                    .catch(error => console.error('Erreur lors de la suppression de la personne:', error));
                }
            });
        });
    });
</script>


{% endblock %}