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

{% block title %}Emploi du temps de {{ eleve.nom }} - Emusic{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .conteneurPage {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }
        
        .enTetePage {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }
        
        .titrePage {
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--text-light);
            margin: 0;
            display: flex;
            align-items: center;
            gap: 0.8rem;
        }
        
        .titrePage i {
            color: var(--primary-color);
            font-size: 1.4rem;
        }
        
        .actionsTitre {
            display: flex;
            gap: 1rem;
        }
        
        .btnAction {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.7rem 1.2rem;
            border-radius: var(--border-radius);
            transition: var(--transition);
            font-weight: 500;
            text-decoration: none;
        }
        
        .btnRetour {
            background-color: transparent;
            color: var(--text-light);
            border: 1px solid var(--border-light);
        }
        
        .btnRetour:hover {
            background-color: var(--card-hover);
            transform: translateY(-2px);
        }
        
        .cartePlanning {
            background-color: var(--card-bg);
            border-radius: var(--border-radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-md);
            border: 1px solid var(--border-light);
            margin-bottom: 2rem;
        }
        
        .enTeteCarte {
            background-color: var(--sidebar-bg);
            padding: 1.2rem 1.5rem;
            border-bottom: 1px solid var(--border-light);
        }
        
        .titreCarte {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--text-light);
            margin: 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .titreCarte i {
            color: var(--primary-color);
        }
        
        .corpsCarte {
            padding: 1.5rem;
            overflow-x: auto;
        }
        
        .tableauPlanning {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }
        
        .tableauPlanning th {
            background-color: var(--sidebar-bg);
            color: var(--text-light);
            font-weight: 600;
            text-align: center;
            padding: 1rem;
            border-bottom: 1px solid var(--border-light);
            white-space: nowrap;
        }
        
        .tableauPlanning th:first-child {
            background-color: var(--primary-color);
            color: white;
        }
        
        .tableauPlanning td {
            padding: 1rem;
            text-align: center;
            border-bottom: 1px solid var(--border-light);
            color: var(--text-muted);
            transition: var(--transition);
            cursor: pointer;
        }
        
        .tableauPlanning tr:last-child td {
            border-bottom: none;
        }
        
        .tableauPlanning td:first-child {
            font-weight: 600;
            color: var(--primary-color);
            background-color: rgba(46, 204, 113, 0.05);
            border-right: 1px solid var(--border-light);
        }
        
        .tableauPlanning td:hover:not(:first-child) {
            background-color: var(--card-hover);
            transform: scale(1.02);
        }
        
        .celluleCours {
            position: relative;
            transition: var(--transition);
        }
        
        .celluleCours.active {
            background-color: var(--primary-transparent);
            color: var(--primary-light);
            font-weight: 500;
        }
        
        .modalOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(3px);
            z-index: 999;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
        }
        
        .modalOverlay.visible {
            opacity: 1;
            visibility: visible;
        }
        
        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            background-color: var(--card-bg);
            border-radius: var(--border-radius-lg);
            padding: 2rem;
            max-width: 500px;
            width: 90%;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition-bounce);
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--border-light);
        }
        
        .modal.visible {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, -50%) scale(1);
        }
        
        .titreModal {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--text-light);
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .titreModal i {
            color: var(--primary-color);
        }
        
        .contenuModal {
            margin-bottom: 1.5rem;
            color: var(--text-muted);
        }
        
        .btnFermer {
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid var(--border-light);
            color: var(--text-light);
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .btnFermer:hover {
            background-color: rgba(255, 255, 255, 0.2);
            transform: rotate(90deg);
        }
        
        .infoItem {
            display: flex;
            padding: 0.8rem;
            background-color: var(--sidebar-bg);
            border-radius: var(--border-radius);
            margin-bottom: 0.8rem;
            border: 1px solid var(--border-light);
        }
        
        .infoLabel {
            font-weight: 600;
            color: var(--primary-color);
            min-width: 120px;
        }
        
        .infoValeur {
            color: var(--text-light);
            flex-grow: 1;
        }
        
        .messageVide {
            text-align: center;
            padding: 2rem;
            color: var(--text-muted);
            font-style: italic;
        }
        
        @media (max-width: 992px) {
            .tableauPlanning th,
            .tableauPlanning td {
                padding: 0.8rem 0.5rem;
                font-size: 0.9rem;
            }
        }
        
        @media (max-width: 768px) {
            .enTetePage {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
            
            .conteneurPage {
                padding: 1rem;
            }
            
            .actionsTitre {
                width: 100%;
            }
        }
    </style>
{% endblock %}

{% block content %}
    <div class="conteneurPage">
        <div class="enTetePage">
            <h1 class="titrePage">
                <i class="fas fa-calendar-alt"></i>
                Emploi du temps de {{ eleve.nom }}
            </h1>
            
            <div class="actionsTitre">
                <a href="#" onclick="history.back()" class="btnAction btnRetour">
                    <i class="fas fa-arrow-left"></i>
                    Retour
                </a>
            </div>
        </div>
        
        <div class="cartePlanning">
            <div class="enTeteCarte">
                <h2 class="titreCarte">
                    <i class="fas fa-clock"></i>
                    Planning hebdomadaire
                </h2>
            </div>
            
            <div class="corpsCarte">
                <table class="tableauPlanning">
                    <thead>
                        <tr>
                            <th>Heures</th>
                            {% for jour in jours %}
                                <th>{{ jour }}</th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for heure in heures %}
                            <tr>
                                <td>{{ heure }}h00</td>
                                {% for jour in jours %}
                                    <td 
                                        data-cours="{{ planning[jour][heure]|default('') }}" 
                                        class="celluleCours {{ planning[jour][heure] is defined and planning[jour][heure] ? 'active' : '' }}"
                                        onclick="afficherDetails(this)"
                                    >
                                        {% set cours = planning[jour][heure] %}
                                        {% if cours %}
                                            <strong>{{ cours }}</strong>
                                        {% else %}
                                            <span>-</span>
                                        {% endif %}
                                    </td>
                                {% endfor %}
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <div class="modalOverlay" id="modalOverlay"></div>
    <div class="modal" id="modalCours">
        <button class="btnFermer" id="btnFermer">
            <i class="fas fa-times"></i>
        </button>
        
        <h2 class="titreModal">
            <i class="fas fa-info-circle"></i>
            Détails du cours
        </h2>
        
        <div id="contenuCours" class="contenuModal">
            <div class="infoItem">
                <div class="infoLabel">Cours:</div>
                <div class="infoValeur" id="nomCours">-</div>
            </div>
            
            <div class="infoItem">
                <div class="infoLabel">Professeur:</div>
                <div class="infoValeur" id="professeurCours">-</div>
            </div>
            
            <div class="infoItem">
                <div class="infoLabel">Salle:</div>
                <div class="infoValeur" id="salleCours">-</div>
            </div>
            
            <div class="infoItem">
                <div class="infoLabel">Horaire:</div>
                <div class="infoValeur" id="horaireCours">-</div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        function afficherDetails(cellule) {
            const cours = cellule.getAttribute('data-cours');
            
            if (cours && cours.trim() !== '') {
                 document.getElementById('nomCours').textContent = cours;
                document.getElementById('modalOverlay').classList.add('visible');
                document.getElementById('modalCours').classList.add('visible');
            }
        }
        
        document.getElementById('btnFermer').addEventListener('click', function() {
            document.getElementById('modalOverlay').classList.remove('visible');
            document.getElementById('modalCours').classList.remove('visible');
        });
        
        document.getElementById('modalOverlay').addEventListener('click', function() {
            document.getElementById('modalOverlay').classList.remove('visible');
            document.getElementById('modalCours').classList.remove('visible');
        });
        
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                document.getElementById('modalOverlay').classList.remove('visible');
                document.getElementById('modalCours').classList.remove('visible');
            }
        });
    </script>
{% endblock %}