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

{% block title %}Evènements{% endblock %}

{% block customNavigation %}
        {% include "base/nav-teacher.html.twig" %}
{% endblock %}

{% block body %}
    
    <!-- Event Start -->
    <div class="container-fluid pt-5">
        <div class="container">
            <div class="text-center pb-2">
                <p class="section-title px-5">
                    <span class="px-2">Liste des ateliers</span>
                </p>
                <h1 class="mb-4">{{ typeEvent }}</h1>
            </div>

            {% if events|length > 0 %}

                <div class="row">

                    {% for content in events %}

                        <div class="col-lg-4 mb-5">
                            <div class="card border-0 bg-light shadow-sm pb-2">
                                <img class="card-img-top mb-2" src="{{ content.image }}" alt="" />
                                <div class="card-body text-center">
                                    <h4 class="card-title">{{ content.name | default("")  }}</h4>
                                    <p class="card-text">
                                        {{ content.description | default("")  }}
                                    </p>
                                </div>
                                <div class="card-footer bg-transparent py-4 px-5">
                                    <!--
                                    <div class="row border-bottom">
                                        <div class="col-6 py-1 text-right border-right">
                                            <strong>Professeur</strong>
                                        </div>
                                        <div class="col-6 py-1">{{ content.teacher.firstname | default("") }}</div>
                                    </div>
                                    -->
                                    <div class="row border-bottom">
                                        <div class="col-6 py-1 text-right border-right">
                                            <strong>Places</strong>
                                        </div>
                                        <div class="col-6 py-1">{{ content.lacks }} restantes</div>
                                    </div>
                                    <div class="row border-bottom">
                                        <div class="col-6 py-1 text-right border-right">
                                            <strong>Date</strong>
                                        </div>
                                        <div class="col-6 py-1">
                                            {{ content.startDayAt|date("d/m/Y", "Europe/Paris") }}
                                        </div>
                                    </div>
                                    <div class="row border-bottom">
                                        <div class="col-6 py-1 text-right border-right">
                                            <strong>Durée</strong>
                                        </div>
                                        <div class="col-6 py-1">
                                            {{ content.period | default("")  }} min
                                        </div>
                                    </div>
                                    <div class="row">
                                    <div class="col-6 py-1 text-right border-right">
                                        <strong>Prix</strong>
                                    </div>
                                    <div class="col-6 py-1">{{ content.price | default("")  }}</div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <hr />
                                    <a href="/event-edit/{{ content.id }}" class="btn btn-primary col-12">Modifier</a>
                                    <hr />
                                    <a href="/list-medias/{{ content.id }}" class="btn btn-secondary col-12">Médias</a>
                                    <hr />
                                    <a href="/list-reservations/{{ content.id }}" class="btn btn-info col-12">Réservations</a>
                                    <hr />
                                    <a id="removeAtel{{ content.id }}" onclick="updateAtelier({{ content.id }})" class="btn btn-danger col-12" style="color:white;">Supprimer</a>
                                    <br /><br />
                                    <div class="alert alert-danger" role="alert" id="alertDelete{{ content.id }}" align="center">
                                        Etes-vous sûre de vouloir <strong>supprimer cet atelier</strong> ? <br />
                                        <hr />
                                        <a href="/event/{{ content.id }}/remove" class="btn btn-danger">OUI</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                                        <a onclick="cancelDelete({{ content.id }})" class="btn btn-dark" style="color:white;">NON</a>
                                    </div>
                                </div>

                                
                            </div>
                        </div>

                    {% endfor %}

                </div>

                <div class="col-12" align="center">
                    <hr />
                    {{ knp_pagination_render(events) }}
                </div>

            {% else %}
                <div class="text-center pb-2">
                    <p>
                        Aucun atelier n'a été programmé. 
                    </p>
                </div>
            {% endif %}
        </div>
    </div>
    <!-- Event End -->

    <script type="text/javascript">

        var atelier = 0;
        var x = document.getElementsByClassName("alert");
        var i;
        for (i = 0; i < x.length; i++) {
            x[i].style.display = 'none';
        }
        function updateAtelier(currentAtelier) {
            atelier = currentAtelier;
            document.getElementById("removeAtel"+atelier).style.display = "none";
            document.getElementById("alertDelete"+atelier).style.display = "block";       
        }

        function cancelDelete(currentAtelier){
            atelier = 0;
            document.getElementById("removeAtel"+currentAtelier).style.display = "block";
            document.getElementById("alertDelete"+currentAtelier).style.display = "none";   
        }

        function removeAtelier() {
            
        }

    </script>

{% endblock %}