{% extends 'entreprise/entreprise_base.html.twig' %}

{% block title %}Toutes les alertes{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        /* Fonds d'icônes doux */
        .bg-danger-soft { background-color: rgba(220, 53, 69, 0.1); }
        .bg-warning-soft { background-color: rgba(255, 193, 7, 0.1); }
        .bg-success-soft { background-color: rgba(25, 135, 84, 0.1); }
        .bg-info-soft { background-color: rgba(13, 202, 240, 0.1); }
        
        /* Animation de transition pour la suppression */
        .transition-row {
            transition: all 0.4s ease;
        }

        .table-hover tbody tr:hover {
            background-color: #f8f9fa;
        }

        /* Amélioration de la visibilité des bordures de statut */
        .border-start.border-4 {
            border-left-width: 4px !important;
        }
    </style>
{% endblock %}

{% block body %}
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-bell text-primary me-2"></i>Centre de notifications
        </h1>
        <a href="{{ path('app_entreprise_notification_read_all') }}" class="btn btn-sm btn-outline-secondary">
            <i class="fas fa-check-double me-1"></i> Tout marquer comme lu
        </a>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm border-0">
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="bg-light">
                                <tr>
                                    <th class="ps-4" style="width: 50px;">Type</th>
                                    <th>Message</th>
                                    <th>Date</th>
                                    <th class="text-end pe-4">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for notif in notifications_liste|default([]) %}
                                    <tr id="notif-row-{{ notif.id }}" 
                                        class="{{ notif.isRead|default(true) ? 'opacity-75' : 'border-start border-4 border-' ~ notif.type|default('primary') }} transition-row">
                                        <td class="ps-4">
                                            <div class="rounded-circle bg-{{ notif.type|default('info') }}-soft d-flex align-items-center justify-content-center" style="width: 35px; height: 35px;">
                                                <i class="fas fa-{{ notif.icon|default('exclamation-circle') }} text-{{ notif.type|default('info') }}"></i>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="fw-bold text-dark">{{ notif.titre }}</div>
                                            <div class="text-muted small">{{ notif.message }}</div>
                                        </td>
                                        <td class="small text-muted">
                                            {{ notif.createdAt|date('d/m/Y à H:i') }}
                                        </td>
                                        <td class="text-end pe-4">
                                            <div class="btn-group btn-group-sm">
                                                <a href="{{ path('app_entreprise_notification_show', {id: notif.id}) }}" class="btn btn-light" title="Voir les détails">
                                                    <i class="fas fa-eye text-primary"></i>
                                                </a>

                                                <button class="btn btn-light js-delete-notif" 
                                                        data-url="{{ path('app_entreprise_notification_delete', {id: notif.id}) }}"
                                                        data-id="{{ notif.id }}"
                                                        title="Supprimer">
                                                    <i class="fas fa-trash-alt text-danger"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                {% else %}
                                    <tr id="empty-row">
                                        <td colspan="4" class="text-center py-5">
                                            {# Remplacement par une icône si l'image SVG est manquante #}
                                            <i class="fas fa-inbox fa-3x text-light d-block mb-3"></i>
                                            <p class="mt-3 text-muted">Vous n'avez aucune alerte pour le moment.</p>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
document.addEventListener('DOMContentLoaded', function() {
    const deleteButtons = document.querySelectorAll('.js-delete-notif');

    deleteButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            
            if (!confirm('Supprimer cette alerte définitivement ?')) return;

            const url = this.dataset.url;
            const id = this.dataset.id;
            const row = document.getElementById('notif-row-' + id);

            // Effet visuel immédiat
            row.style.opacity = '0.5';
            row.style.pointerEvents = 'none';

            // Utilisation de DELETE (ou POST selon votre préférence)
            fetch(url, {
                method: 'DELETE', 
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(response => {
                // Si l'erreur est encore "Method Not Allowed", on tente un fallback en POST
                if (response.status === 405) {
                    return fetch(url, {
                        method: 'POST',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        }
                    }).then(res => res.json());
                }
                
                if (!response.ok) throw new Error('Erreur réseau ou accès refusé');
                return response.json();
            })
            .then(data => {
                // Si data est déjà le résultat du fallback ou du premier appel
                if (data.success) {
                    // Animation de sortie
                    row.style.transform = 'translateX(-20px)';
                    row.style.opacity = '0';
                    
                    setTimeout(() => {
                        row.remove();
                        checkEmptyTable();
                    }, 400);
                } else {
                    resetRow(row);
                    alert('Erreur : ' + (data.error || 'Impossible de supprimer.'));
                }
            })
            .catch(error => {
                resetRow(row);
                console.error('Erreur:', error);
                alert('Une erreur est survenue : vérifiez que la méthode DELETE ou POST est autorisée sur votre route.');
            });
        });
    });

    function resetRow(row) {
        row.style.opacity = '1';
        row.style.pointerEvents = 'auto';
        row.style.transform = 'none';
    }

    function checkEmptyTable() {
        const tbody = document.querySelector('table tbody');
        // On vérifie s'il reste des lignes qui ne sont pas le message "vide"
        if (tbody && tbody.querySelectorAll('tr:not(#empty-row)').length === 0) {
            location.reload(); 
        }
    }
});
</script>
{% endblock %}