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

{% block title %} {{ 'reservations.title'|trans }} {% endblock %}
{% block description %}  {% endblock %}

{% block body %}
{% include "front/inc/breadcrumb.html.twig" with 
        {
          'current_page' : 'reservations.title'|trans,
          'content_title': 'compte.title'|trans,
          'content_lien' : path('app_account',{'_locale':app.request.locale}),
          'image'        : ''
        } 
    %}
   
    <div class="container_cpt_reservations">
      <h1>{{ 'reservations.title'|trans }}</h1>

      {% if orders|length > 0 %}
        <div class="table-container">
        <div class="reservations-table">
          <div class="table-header">
            <div class="table-cell">{{ 'reservations.table.order_number'|trans }}</div>
            <div class="table-cell">{{ 'reservations.table.date'|trans }}</div>
            <div class="table-cell">{{ 'reservations.table.service_count'|trans }}</div>
            <div class="table-cell">{{ 'reservations.table.people_count'|trans }}</div>
            <div class="table-cell">{{ 'reservations.table.total_price'|trans }}</div>
            <div class="table-cell">{{ 'reservations.table.status'|trans }}</div>
            <div class="table-cell "></div>
          </div>
          
          {% for order in orders %}
            <div class="table-row">
              <div class="table-cell">N° {{order.reference}}</div>
              <div class="table-cell">
                {% if app.request.locale == 'en' %}
                    {{ order.dateReservation|format_datetime(locale='en',pattern="EEEE dd MMMM YYYY") }}
                {% else %}
                    {{ order.dateReservation|format_datetime(locale='fr',pattern="EEEE dd MMMM YYYY") }}
                {% endif %}
              </div>
              <div class="table-cell">{{ order.reservationsItems|length }}</div>
              <div class="table-cell">{{order.NombrePersonne}}</div>
              <div class="table-cell prix">{{ order.MontantReservation }} dh</div>
              <div class="table-cell">
                  {% if order.paye == 1 and order.archive == 0 %}
                    <span class="status confirmed">
                      {{ 'reservations.status.confirmed'|trans }}
                    </span>
                  {% endif %}

                  {% if order.paye == 0 and order.archive == 0 %}
                    <span class="status cancelled">
                      {{ 'reservations.status.upcoming'|trans }}
                    </span>
                  {% endif %}

                  {% if order.archive == 1 %}
                    <span class="status pending">
                      {{ 'reservations.status.cancelled'|trans }}
                    </span>
                  {% endif %}
              </div>
              <div class="table-cell">
                  {% if order.paye == 1 and order.archive == 0 %}
                    <a href="{{ path('app_reservationdetail',{'_locale': app.request.locale ,'id': order.id }) }}" class="view-btn">
                      <svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" fill="none" viewBox="0 0 29 29">
                        <g clip-path="">
                            <path fill="#000" d="M22.27 21.32c4.299-4.8 4.144-12.204-.467-16.814C17.087-.206 9.466-.274 4.667 4.352c-4.8 4.627-5.012 12.245-.477 17.13 4.535 4.887 12.148 5.242 17.118.8l5.636 5.635a.68.68 0 0 0 .961-.961L22.27 21.32Zm-16.814-.467c-4.269-4.229-4.3-11.117-.072-15.386C9.613 1.2 16.5 1.167 20.77 5.396l.071.071c4.242 4.242 4.242 11.144 0 15.386-4.242 4.242-11.144 4.242-15.385 0Z"/>
                            <path fill="#000" d="M17.227 12.479h-3.4V9.08a.68.68 0 1 0-1.36 0v3.398H9.069a.68.68 0 0 0 0 1.36h3.398v3.4a.68.68 0 0 0 1.36 0v-3.4h3.4a.68.68 0 1 0 0-1.36Z"/>
                        </g>
                        <defs>
                            <clipPath id="a">
                            <path fill="#fff" d="M0 0h29v29H0z"/>
                            </clipPath>
                        </defs>
                        </svg>
                    </a>
                  {% endif %}
                </div>
            </div>
          {% endfor %}
        </div>
      {% else %}
        <div class="reservations-empty">
          <p>{{ 'reservations.empty'|trans }}</p>
        </div>
      {% endif %}
    </div>
  
  </div>
{% endblock %}