{% extends 'core/layout.html.twig' %}

{% block title %}Notifications - Portail Étudiant{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('css/student-dashboard.css') }}">
{% endblock %}

{% block body %}
    <!-- Header -->
    <header class="header">
        <div class="header-content container">
            <div class="logo">
                <i class="fas fa-graduation-cap"></i>
                <span>Centre Informatique</span>
            </div>

            <div class="header-actions">
                <div class="search-container">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" class="search-input" placeholder="Rechercher..." id="searchInput">
                </div>

                <button class="btn btn-secondary" id="notificationBtn">
                    <i class="fas fa-bell"></i>
                    <span class="badge badge-danger">3</span>
                </button>

                <button class="btn btn-secondary" id="themeToggle">
                    <i class="fas fa-moon"></i>
                </button>

                <div class="profile-menu">
                    <div class="profile-avatar">
                        <img src="{{ asset('images/avatar.jpg') }}" alt="Avatar utilisateur">
                    </div>
                    <span>John Doe</span>
                </div>

                <button class="hamburger-menu" id="hamburgerMenu">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
            </div>
        </div>
    </header>

    <!-- Sidebar -->
    <nav class="sidebar" id="sidebar">
        <div class="nav-menu">
            <a href="{{ path('app_student_dashboard') }}" class="nav-item {% if app.request.get('_route') == 'app_student_dashboard' %}active{% endif %}">
                <i class="fas fa-home nav-icon"></i>
                <span>Tableau de Bord</span>
            </a>
            <a href="{{ path('app_student_grades') }}" class="nav-item {% if app.request.get('_route') == 'app_student_grades' %}active{% endif %}">
                <i class="fas fa-chart-bar nav-icon"></i>
                <span>Mes Notes</span>
            </a>
            <a href="{{ path('app_student_courses') }}" class="nav-item {% if app.request.get('_route') == 'app_student_courses' %}active{% endif %}">
                <i class="fas fa-book nav-icon"></i>
                <span>Mes Cours</span>
            </a>
            <a href="{{ path('app_student_enrollment') }}" class="nav-item {% if app.request.get('_route') == 'app_student_enrollment' %}active{% endif %}">
                <i class="fas fa-plus-circle nav-icon"></i>
                <span>Inscriptions</span>
            </a>
            <a href="{{ path('app_student_complaints') }}" class="nav-item {% if app.request.get('_route') == 'app_student_complaints' %}active{% endif %}">
                <i class="fas fa-exclamation-triangle nav-icon"></i>
                <span>Revendications</span>
            </a>
            <a href="{{ path('app_notifications') }}" class="nav-item {% if app.request.get('_route') == 'app_notifications' %}active{% endif %}">
                <i class="fas fa-bell nav-icon"></i>
                <span>Notifications</span>
            </a>
            <a href="{{ path('app_student_profile') }}" class="nav-item {% if app.request.get('_route') == 'app_student_profile' %}active{% endif %}">
                <i class="fas fa-user nav-icon"></i>
                <span>Mon Profil</span>
            </a>
        </div>
    </nav>

    <!-- Offcanvas Navigation -->
    <div class="offcanvas-nav" id="offcanvasNav">
        <div class="offcanvas-header">
            <div class="logo">
                <i class="fas fa-graduation-cap"></i>
                <span>UniPortal</span>
            </div>
            <button class="offcanvas-close" id="offcanvasClose">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <div class="offcanvas-body">
            <div class="nav-menu">
                <a href="{{ path('app_student_dashboard') }}" class="nav-item {% if app.request.get('_route') == 'app_student_dashboard' %}active{% endif %}">
                    <i class="fas fa-home nav-icon"></i>
                    <span>Tableau de Bord</span>
                </a>
                <a href="{{ path('app_student_grades') }}" class="nav-item {% if app.request.get('_route') == 'app_student_grades' %}active{% endif %}">
                    <i class="fas fa-chart-bar nav-icon"></i>
                    <span>Mes Notes</span>
                </a>
                <a href="{{ path('app_student_courses') }}" class="nav-item {% if app.request.get('_route') == 'app_student_courses' %}active{% endif %}">
                    <i class="fas fa-book nav-icon"></i>
                    <span>Mes Cours</span>
                </a>
                <a href="{{ path('app_student_enrollment') }}" class="nav-item {% if app.request.get('_route') == 'app_student_enrollment' %}active{% endif %}">
                    <i class="fas fa-plus-circle nav-icon"></i>
                    <span>Inscriptions</span>
                </a>
                <a href="{{ path('app_student_complaints') }}" class="nav-item {% if app.request.get('_route') == 'app_student_complaints' %}active{% endif %}">
                    <i class="fas fa-exclamation-triangle nav-icon"></i>
                    <span>Revendications</span>
                </a>
                <a href="{{ path('app_notifications') }}" class="nav-item {% if app.request.get('_route') == 'app_notifications' %}active{% endif %}">
                    <i class="fas fa-bell nav-icon"></i>
                    <span>Notifications</span>
                </a>
                <a href="{{ path('app_student_profile') }}" class="nav-item {% if app.request.get('_route') == 'app_student_profile' %}active{% endif %}">
                    <i class="fas fa-user nav-icon"></i>
                    <span>Mon Profil</span>
                </a>
            </div>
        </div>
    </div>

    <!-- Overlay -->
    <div class="offcanvas-overlay" id="offcanvasOverlay"></div>

    <!-- Main Content -->
    <main class="main-content" id="mainContent">
        <div class="card animate-slide-in">
            <div class="card-header">
                <h2 class="section-title">
                    <i class="fas fa-bell"></i>
                    Toutes les Notifications
                </h2>
                <div class="header-actions">
                    <button class="btn btn-secondary">
                        <i class="fas fa-check-double"></i>
                        Marquer toutes comme lues
                    </button>
                    <button class="btn btn-primary">
                        <i class="fas fa-cog"></i>
                        Paramètres
                    </button>
                </div>
            </div>

            <div class="notifications-list">
                <div class="notification-item unread">
                    <div class="notification-icon notification-info">
                        <i class="fas fa-info-circle"></i>
                    </div>
                    <div class="notification-content">
                        <h4>Nouvelle note disponible</h4>
                        <p>Votre note pour l'examen de Programmation Web est maintenant disponible.</p>
                        <small class="notification-time">Il y a 2 heures</small>
                    </div>
                    <div class="notification-actions">
                        <button class="btn btn-sm btn-primary">Voir la note</button>
                        <button class="btn btn-sm btn-secondary">Marquer comme lu</button>
                    </div>
                </div>

                <div class="notification-item unread">
                    <div class="notification-icon notification-warning">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                    <div class="notification-content">
                        <h4>Rappel d'examen</h4>
                        <p>N'oubliez pas votre examen d'Analyse 2 prévu demain à 8h00 en Amphi A.</p>
                        <small class="notification-time">Il y a 5 heures</small>
                    </div>
                    <div class="notification-actions">
                        <button class="btn btn-sm btn-primary">Voir les détails</button>
                        <button class="btn btn-sm btn-secondary">Marquer comme lu</button>
                    </div>
                </div>

                <div class="notification-item">
                    <div class="notification-icon notification-success">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <div class="notification-content">
                        <h4>Inscription confirmée</h4>
                        <p>Votre inscription au cours de Base de Données a été confirmée avec succès.</p>
                        <small class="notification-time">Il y a 1 jour</small>
                    </div>
                    <div class="notification-actions">
                        <button class="btn btn-sm btn-secondary">Archiver</button>
                    </div>
                </div>

                <div class="notification-item">
                    <div class="notification-icon notification-info">
                        <i class="fas fa-calendar"></i>
                    </div>
                    <div class="notification-content">
                        <h4>Nouvel événement</h4>
                        <p>Conférence sur l'Intelligence Artificielle le 30 juin 2024 à 14h00.</p>
                        <small class="notification-time">Il y a 2 jours</small>
                    </div>
                    <div class="notification-actions">
                        <button class="btn btn-sm btn-secondary">Archiver</button>
                    </div>
                </div>

                <div class="notification-item">
                    <div class="notification-icon notification-error">
                        <i class="fas fa-times-circle"></i>
                    </div>
                    <div class="notification-content">
                        <h4>Échec de connexion</h4>
                        <p>Tentative de connexion échouée depuis une adresse IP inhabituelle.</p>
                        <small class="notification-time">Il y a 3 jours</small>
                    </div>
                    <div class="notification-actions">
                        <button class="btn btn-sm btn-danger">Signaler</button>
                        <button class="btn btn-sm btn-secondary">Archiver</button>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Notification Panel -->
    <div class="notification-panel" id="notificationPanel">
        <div class="card-header">
            <h3>Notifications</h3>
            <a href="{{ path('app_notifications') }}" class="btn btn-primary btn-viewall" style="float:right; margin-left:1em;">
                <i class="fas fa-list"></i> Voir toutes les notifications
            </a>
            <button class="btn btn-secondary" id="closeNotifications">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="notification-list">
            <!-- Les notifications seront chargées dynamiquement -->
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/student-dashboard.js') }}" defer></script>
    <script>
        function toggleNotificationPanel() {
            const panel = document.getElementById('notificationPanel');
            if (!panel) return;
            panel.classList.toggle('open');
        }
    </script>
{% endblock %}