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

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

  {% block body %}
    <div class="content-page">
        <div class="content">
            <!-- Start Content-->
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">                                    
                            <div class="page-title-right">
                                {#<form class="d-flex">
                                    <div class="input-group">
                                        <input type="text" class="form-control form-control-light" id="dash-daterange">
                                        <span class="input-group-text bg-primary border-primary text-white">
                                            <i class="mdi mdi-calendar-range font-13"></i>
                                        </span>
                                    </div>
                                    <a href="javascript: void(0);" class="btn btn-primary ms-2">
                                        <i class="mdi mdi-autorenew"></i>
                                    </a>
                                    <a href="javascript: void(0);" class="btn btn-primary ms-1">
                                        <i class="mdi mdi-filter-variant"></i>
                                    </a>
                                </form>#}
                            </div>
                            <h4 class="page-title">Bienvenue sur la page d'accueil</h4>
                         


                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xl-5 col-lg-6">
                    </div>
                </div>
            </div>
        </div>
    </div> 
    <div class="notifications-container">
    {% for notification in notifications %}
        <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>
    {% endfor %}

</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) {
                            button.parentElement.classList.remove('show');
                        }
                    });
                });
            });

            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>
{% endblock %}