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

{% block title %}Votre agenda{% endblock %}

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

{% block body %}
    
    {{ include("base/ban-customer.html.twig", {name_page: "Votre agenda"}) }}

    <!-- Class 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">Du mois</h1>
            </div>

            {% if contentMonthEvents|length > 0 %}

                <div class="row">

                    <table class="table table-striped" style="background-color:#ffffff;">
                        <thead>
                            <tr>
                            <th scope="col">Date</th>
                            <th scope="col">Atelier</th>
                            <th scope="col">Heure</th>
                            <th scope="col">Places</th>
                            <th scope="col"></th>
                            </tr>
                        </thead>
                        <tbody>

                            {% for content in contentMonthEvents %}

                                {% if content.startDayAt|date('U') >= 'now'|date('U') %}
                                    <tr>
                                        <th scope="row">{{ content.startDayAt|date("d/m/Y", "Europe/Paris") }}</th>
                                        <td> 
                                            <a data-bs-toggle="collapse" href="#collapseAtelier{{ content.id }}" role="button" aria-expanded="false" aria-controls="collapseAtelier{{ content.id }}">
                                                <strong style="color:#4fbece;">{{ content.name }} </strong> 
                                            </a>
                                            <br />
                                            <div class="collapse" id="collapseAtelier{{ content.id }}">
                                                <div class="card card-body">
                                                    {{ content.description }}
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            {{ content.startDayAt|date("H:i:s", "Europe/Paris") }}
                                        </td>
                                        <td>
                                            {% if content.places > 900 %}
                                                <i>illimité</i>
                                            {% elseif content.lacks == 0 %}
                                                <i> - </i>
                                            {% else %}
                                                {{ content.lacks }} / {{ content.places }}
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if content.id in listEvent %}
                                                <a href="/planning/{{ user.id }}/remove-atelier/{{ content.id }}" class="btn btn-danger px-4 mx-auto mb-4">Annuler</a> 
                                            {% else %}

                                                {% if content.lacks > 0  %}
                                                
                                                    {% if content.price is same as('Gratuit') %}
                                                        <a href="/planning/{{ user.id }}/add-atelier/{{ content.id }}" class="btn btn-primary px-4 mx-auto mb-4">Réserver</a>
                                                    {% else %}
                                                        <a href="{{ content.link }}" class="btn btn-primary px-4 mx-auto mb-4">Acheter</a>
                                                    {% endif %}

                                                {% else %}
                                                    <strong><span>- Atelier complet -</span></strong>
                                                {% endif %}

                                            {% endif %}
                                        </td>
                                    </tr>
                                {% endif %}
                            {% endfor %}
                        </tbody>
                    </table>

                </div>

            {% else %}
                <div class="text-center pb-2">
                    <p>
                        Aucun atelier n'est prévu ce mois-ci. 
                    </p>
                </div>
            {% endif %}
        </div>
    </div>
    <!-- Class End -->


{% endblock %}