{% block styles %}
    <link rel="stylesheet" href="{{ url_for('static', filename='admin_billets.css') }}">
{% endblock %}

{% block content%}
    <a id="retour" href="{{ url_for('menu_admin') }}" class="btn-retour">Retour</a>
    <h1>Les billets du festival</h1>
    <table>
        <thead>
            <tr>
                <th>id Billet</th>
                <th>id Type</th>
                <th>id Spectateur</th>
                <th>prix</th>
                <th>date d'achat</th>
                <th>date de début</th>
                <th>date de fin</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for billet in liste_billets %}
                <tr>
                    <td> {{ billet.get_idB() }} </td>
                    <td> {{ billet.get_idType() }} </td>
                    <td> {{ billet.get_idSpectateur() }} </td>
                    <td> {{ billet.get_prix() }} </td>
                    <td> {{ billet.get_dateAchat() }} </td>
                    <td> {{ billet.get_dateDebutB() }} </td>
                    <td> {{ billet.get_dateFinB() }} </td>
                    <td>
                        <button class="btn-modifier"
                            data-id="{{ billet.get_idB() }}"
                            data-idType="{{ billet.get_idType() }}"
                            data-idSpectateur="{{ billet.get_idSpectateur() }}"
                            data-prix="{{ billet.get_prix() }}"
                            data-dateAchat="{{ billet.get_dateAchat() }}"
                            data-dateDebutB="{{ billet.get_dateDebutB() }}"
                            data-dateFinB="{{ billet.get_dateFinB() }}">Modifier
                        <button class="btn-supprimer" data-id="{{ billet.get_idB() }}">Supprimer</button>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    <button id="ajouter">Ajouter</button>

    <!-- Modale pour modifier un billet -->
    <div id="modal-modifier" class="modal">
        <div class="modal-content">
            <span class="close-button">x</span>
            <form action="modifier_billet" method="POST">
                <input type="hidden" name="id_billet" id="id_billet_modifier">
                <select name="type_billet" id="y=type_billet_modifier" required>
                    <option value="" disabled selected>Choisir un type de billet</option>
                    {% for type in liste_types %}
                        <option value="{{ type.get_idType() }}">{{ type.get_duree() }}</option>
                    {% endfor %}
                </select>
                <select name="spectateur_billet" id="spectateur_billet_modifier" required>
                    <option value="" disabled selected>Choisir un spectateur</option>
                    {% for spectateur in liste_spectateurs %}
                        <option value="{{ spectateur.get_idS() }}">{{ spectateur.get_nomS() }}</option>
                    {% endfor %}
                </select>
                <label for="prix">prix</label>
                <input type="text" name="prix" id="prix_modifier" required>
                <label for="dateAchat">date d'achat</label>
                <input type="text" name="date_achat" id="date_achat_modifier" required>
                <label for="dateDebutB">date de début</label>
                <input type="text" name="date_debutB" id="date_debutB_modifirer" required>
                <label for="dateFinB">date de fin</label>
                <input type="text" name="date_finB" id="date_finB_modifier" required>
                <button id="modifier" type="submit"> Modifier </button>
            </form>
        </div>
    </div>

    <!-- Modale pour supprimer un évènement -->
    <div id ="modal-supprimer" class="modal">
        <div class="modal-content">
            <span class="close-button">x</span>
            <form action="/supprimer_billet" method="POST">
                <input type="hidden" name="id_billet" id="id_billet_supprimer">
                <p>Êtes-vous sûr de vouloir supprimer ce billet ?</p>
                <button id="supprimer" type="submit"> Supprimer </button>
            </form>
        </div>
    </div>

    <!-- Modale pour ajouter un billet -->
    <div id="modal-ajouter" class="modal">
        <div class="modal-content">
            <span class="close-button">x</span>
            <form action="/ajouter_billet" method="POST">
                <label for="type_billet">Type de billet</label>
                <select name="type_billet" id="type_billet_ajouter" required>
                    <option value="" disabled selected>Choisir un type de billet</option>
                    {% for type in liste_types %}
                        <option value="{{ type.get_idType() }}">{{ type.get_duree() }}</option>
                    {% endfor %}
                </select>
                <select name="spectateur_billet" id="spectateur_billet_ajouter" required>
                    <option value="" disabled selected>Choisir un spectateur</option>
                    {% for spectateur in liste_spectateurs %}
                        <option value="{{ spectateur.get_idS() }}">{{ spectateur.get_nomS() }}</option>
                    {% endfor %}
                </select>
                <label for="prix">prix</label>
                <input type="text" name="prix" id="prix_ajouter" required>
                <label for="dateAchat">date d'achat</label>
                <input type="text" name="date_achat" id="date_achat_ajouter" required>
                <label for="dateDebutB">date de début</label>
                <input type="text" name="date_debutB" id="date_debutB_ajouter" required>
                <label for="dateFinB">date de fin</label>
                <input type="text" name="date_finB" id="date_finB_ajouter" required>
                <button class="btn-ajouter" type="submit"> Ajouter </button>
            </form>
        </div>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var modalModifier = document.getElementById("modal-modifier");
            var modalSupprimer = document.getElementById("modal-supprimer");
            var modalAjouter = document.getElementById("modal-ajouter");
            var btnClose = document.querySelectorAll(".close-button");

            btnClose.forEach(function(btn) {
                btn.onclick = function() {
                    btn.closest(".modal").style.display = "none";
                };
            });

            document.querySelectorAll(".btn-modifier").forEach(function(btn) {
                btn.onclick = function() {
                    modalModifier.style.display = "block";
                    document.querySelector("id_billet_modifier").value = btn.getAttribute("data-id");
                    document.querySelector("type_billet_modifier").value = btn.getAttribute("data-idType");
                    document.querySelector("id_spectateur_modifier").value = btn.getAttribute("data-idSpectateur");
                    document.querySelector("prix_modifier").value = btn.getAttribute("data-prix");
                    document.querySelector("date_achat_modifier").value = btn.getAttribute("data-dateAchat");
                    document.querySelector("date_debutB_modifirer").value = btn.getAttribute("data-dateDebutB");
                    document.querySelector("date_finB_modifier").value = btn.getAttribute("data-dateFinB");
                };
            });

            document.querySelectorAll(".btn-supprimer").forEach(function(btn) {
                btn.onclick = function() {
                    modalSupprimer.style.display = "block";
                    document.querySelector("id_billet_supprimer").value = btn.getAttribute("data-id");
                };
            });

            document.querySelector("ajouter").onclick = function() {
                modalAjouter.style.display = "block";
            };

            window.onclick = function(event) {
                if (event.target.classList.contains("modal")) {
                    event.target.style.display = "none";
                }
            }

        });
    </script>
{% endblock %} 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

h1 {
    text-align: center;
    margin: 1rem 0;

}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

thead {
    background: #eee;
}

th, td {
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    text-align: left;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

button {
    color: white;
    padding: 8px 16px;
    margin: 4px 2px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#ajouter {
    background-color: #2196F3;
    display: block;
    width: max-content;
    margin: 1rem auto;
}

#ajouter:hover {
    background-color: #0b7dda;
}

#retour {
    background-color: #2196F3;
    color: white;
    padding: 10px 15px;
    margin-left: 10px;
    margin-top: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s;
}

#retour:hover {
    background-color: #0b7dda;
}

.btn-ajouter {
    background-color: #2196F3;
}

.btn-ajouter:hover {
    background-color: #0b7dda;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 30%;
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 30%;
}

#modal-ajouter form {
    display: flex;
    flex-direction: column;
}

#modal-ajouter input {
    margin-bottom: 1rem;
    width: 150px;
}

#modal-ajouter select {
    margin-bottom: 1rem;
    width: 150px;
}

#retour {
    background-color: #2196F3;
    color: white;
    padding: 10px 15px;
    margin-left: 10px;
    margin-top: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s;
}

#retour:hover {
    background-color: #0b7dda;
}

.btn-supprimer {
    background-color: #f44336;
}

.btn-supprimer:hover {
    background-color: #da190b;
}

#supprimer {
    background-color: #f44336;
}

#supprimer:hover {
    background-color: #da190b;
}

.btn-modifier {
    background-color: #4CAF50;
}

.btn-modifier:hover {
    background-color: #45a049;
}

#modifier {
    background-color: #4CAF50;
}

#modifier:hover {
    background-color: #45a049;
}

quand je clique sur le bouton ajouter ça ne veut pas afficher le modal