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

{% block title %}Mes reservations - Les gîtes de Roquetoire{% endblock %}

{% block meta %}
    <meta name="description" content="Les réservations passées sur le site">
{% endblock %}

{% block content %}

<div class="container">
    <a href="{{ path('app_account') }}">
        <img src="{{ asset('assets/img/arrow-left.png')}}" class="mt-5" alt="Retour en arrière" style="max-width: 60px;">
    </a> 
    <h1 class="mt-2 text-center">Mes réservations</h1>
    <p class="text-center">C'est dans cette espace que vous allez pouvoir gérer toutes vos réservations.</p>
    <br>
    
    {% if reservations | length == 0 %}
        <p class="text-center">
            Vous n'avez pas encore passé de réservation.
        </p>
    {% else %}  
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">Passée le</th>
                        <th scope="col">Référence</th>
                        <th scope="col">Nom du gîte</th>
                        <th scope="col">Date d'arrivée</th>
                        <th scope="col">Date de départ</th>
                        <th scope="col">Total</th>
                        <th scope="col" class="text-center">Télécharger la facture</th>
                        <th scope="col">Annulation de réservation</th>
                    </tr>
                </thead>
                <tbody>
                    {% for reservation in reservations %} 
                    <tr>
                        <th scope="row">{{ reservation.createdAt|date('d/m/Y') }}</th>
                        <td><span class="badge text-bg-secondary">{{ reservation.reference }}</span></td>
                        <td>{{ reservation.gite.name }}</td>
                        <td>{{ reservation.dayStart|date('d/m/Y') }}</td>
                        <td>{{ reservation.dayEnd|date('d/m/Y') }}</td>
                        <td>{{ (reservation.total) |number_format(2, ',', '.')  }} €</td>
                        <td class="text-center">
                            <a id='a-pdf'  href="{{ path ('app_account_reservation_pdf' ,{ 'reference' : reservation.reference })}}" >
                                <img src="{{asset ('assets/img/pdf.png') }}" alt="Télécharger le PDF" height="30px">
                            </a>
                        </td>
                        <td class="text-center">
                            {% if reservation.annuler %}
                                <a href="" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#annuler-{{ reservation.reference }}">Annuler</a>
                            {% elseif reservation.passer %}
                                <p>Réservation passée</p>
                            {% else %}
                                <p>Date limite d'annulation.</p>
                            {% endif %}
                        </td>
                    </tr>

                    <div class="modal fade" id="annuler-{{ reservation.reference }}" tabindex="-1" aria-labelledby="annulerlLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h1 class="modal-title fs-5" id="annulerLabel">Annulation de réservation</h1>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                <p>Êtes-vous sûr de vouloir annuler cette réservation ?</p>
                                <p>Vous serez remboursé dans les prochains jours.</p>
                                
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-success" data-bs-dismiss="modal">Non</button>
                                    <a href="{{ path('app_account_delete_reservation', { 'reference': reservation.reference }) }}" class="btn btn-danger">Oui</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </tbody>
            </table>
        </div>     
    {% endif %}
</div>

{% endblock %}