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

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

{% block content %}
<style>
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f4f4f9;
        color: #333;
        margin: 0;
        padding: 20px;
    }

    h1 {
        text-align: center;
        font-size: 2.5rem;
        margin-bottom: 20px;
        color: #4CAF50;
    }
    .planning {
        margin: 0 auto;
        max-width: 100%;
        overflow-x: auto;
        padding: 20px;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        background: #181B22;
        border-radius: 10px;
        overflow: hidden;
    }

    table thead {
        background-color: #4CAF50;
        color: white;
        text-transform: uppercase;
    }

    table th,
    table td {
        padding: 15px;
        text-align: center;
        border: 1px solid #ddd;
        font-size: 1rem;
    }

    table td {
        font-size: 0.9rem;
        color: white;
        transition: background-color 0.3s ease;
    }

    table td:hover {
        background-color: #313237;
        cursor: pointer;
    }

    table td:empty {
        background-color: #f9f9f9;
    }

    .popup-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 1000;
    }

    .popup-overlay.open {
        display: block;
    }

    .popup {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        padding: 20px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        z-index: 1001;
        width: 400px;
        border-radius: 8px;
        text-align: center;
        transition: opacity 0.3s ease;
    }

    .popup.open {
        display: block;
        opacity: 1;
    }

    .popup h2 {
        margin: 0 0 15px;
        font-size: 1.5rem;
        color: #444;
    }

    .popup p {
        margin: 10px 0;
        font-size: 1rem;
        color: #666;
    }

    .close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 1.5rem;
        color: #aaa;
        background: none;
        border: none;
        cursor: pointer;
    }

    .close-btn:hover {
        color: #444;
    }
</style>

<h1>Emploi du temps de {{ eleve.nom }}</h1>

<div class="planning">
    <table>
        <thead>
            <tr>
                <th>Heures</th>
                {% for jour in jours %}
                    <th>{{ jour }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for heure in heures %}
                <tr>
                    <td><strong>{{ heure }}h</strong></td>
                    {% for jour in jours %}
                        <td data-cours="{{ planning[jour][heure]|default('') }}" class="cours-cell">
                            {% set cours = planning[jour][heure] %}
                            {% if cours %}
                                <strong>{{ cours }}</strong>
                            {% else %}
                                -  
                            {% endif %}
                        </td>
                    {% endfor %}
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<div class="popup-overlay"></div>
<div class="popup">
    <button class="close-btn">&times;</button>
    <h2>Détails du cours</h2>
    <p id="popup-content">Aucun cours sélectionné</p>
</div>

<script>
    document.querySelectorAll('td[data-cours]').forEach(cell => {
        cell.addEventListener('click', function () {
            const cours = this.dataset.cours;

            if (cours) {
                document.getElementById('popup-content').textContent = cours;
                document.querySelector('.popup-overlay').classList.add('open');
                document.querySelector('.popup').classList.add('open');
            }
        });
    });

    document.querySelector('.close-btn').addEventListener('click', () => {
        document.querySelector('.popup-overlay').classList.remove('open');
        document.querySelector('.popup').classList.remove('open');
    });

    document.querySelector('.popup-overlay').addEventListener('click', () => {
        document.querySelector('.popup-overlay').classList.remove('open');
        document.querySelector('.popup').classList.remove('open');
    });
</script>

{% endblock %}