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

{% block title %}Accueil{% endblock %}

{% block stylesheets %}
<style>
.warning-message {
    background: linear-gradient(to right, #fff3cd, #ffeeba);
    border: 2px solid #ffdd57;
    padding: 30px;
    border-radius: 10px;
    font-family: Arial, sans-serif;
    font-size: 18px;
    color: #856404;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    text-align: left; /* Alignement du texte à gauche */
    margin-bottom: 20px;
}

.attention-text {
    color: red;
    font-weight: bold;
    font-size: 24px;
    animation: blink 1s infinite;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

.attention-text::before {
    content: '⚠️';
    margin-right: 10px;
    font-size: 28px;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

.warning-message p {
    margin: 10px 0;
    line-height: 1.5;
}

.notifications-container {
    margin-left: 20px;
    max-height: 100vh;
    overflow-y: auto;
}

.notification-popup {
    margin-bottom: 10px;
}

.row-custom {
    display: flex;
    flex-wrap: wrap;
}

.col-custom {
    flex: 1;
    padding: 10px;
}

</style>
{% endblock %}
   
{% block body %}
    <div class="content-page">
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">                                    
                            <h4 class="page-title">Bienvenue sur la page d'accueil</h4>
                        </div>
                    </div>
                </div>

           <div class="row-custom">
                 

                    <div class="col-custom">
                        <div class="notifications-container">
                {% set currentDate = "now"|date('Y-m-d') %}
                {% for notification in notifications %}
                        {% if not notification.isRead and notification.dateButoir|date('Y-m-d') == currentDate %}
                            <div class="alert alert-info notification-popup" role="alert" data-id="{{ notification.id }}" data-url="{{ notification.url }}">
                                <a href="{{ notification.url }}">{{ notification.message }}</a>
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        {% endif %}
                {% endfor %}
            </div>
        </div>
                </div>
            </div>
        </div>
    </div> 
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.notification-popup').forEach(function(popup) {
                setTimeout(function() {
                    popup.classList.add('show');
                }, 1000);
            });

            document.querySelectorAll('.notification-popup .close').forEach(function(button) {
                button.addEventListener('click', function() {
                    var notificationId = button.parentElement.dataset.id;
                    fetch(`/notification/${notificationId}/mark-as-read`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token('notification_mark_as_read') }}'
                        }
                    }).then(response => {
                        if (response.ok) {
                            // Supprimer l'élément du DOM une fois la requête réussie
                            button.parentElement.remove();
                        } else {
                            console.error('Erreur lors de la mise à jour de la notification.');
                        }
                    }).catch(error => {
                        console.error('Erreur réseau ou serveur:', error);
                    });
                });
            });

            document.querySelectorAll('.notification-popup a').forEach(function(link) {
                link.addEventListener('click', function() {
                    var notificationId = link.parentElement.dataset.id;
                    fetch(`/notification/${notificationId}/mark-as-read`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token('notification_mark_as_read') }}'
                        }
                    });
                });
            });
        });
    </script>
    <script>
// Script pour gérer les accordéons
const accordionButtons = document.querySelectorAll('.accordion-button');

accordionButtons.forEach(button => {
    button.addEventListener('click', () => {
        const content = button.nextElementSibling;
        const isOpen = content.style.display === 'block';

        // Ferme tous les autres contenus
        document.querySelectorAll('.accordion-content').forEach(content => {
            content.style.display = 'none';
        });

        // Ouvre ou ferme le contenu cliqué
        if (!isOpen) {
            content.style.display = 'block';
        }
    });
});

</script>

{% endblock %}