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

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

{% block body %}
{% include "front/inc/breadcrumb.html.twig" with 
        {
          'current_page' : 'reservation_detail.breadcrumb'|trans,
          'content_title': 'compte.title'|trans,
          'content_lien' : path('app_account',{'_locale':app.request.locale}),
          'image'        : ''
        } 
    %}

{% set carts           = order.produitReservation %}
{% set cartCalendar    = order.dateResa %}
{% set cartHotel       = order.hotelReservation %}
{% set navetteAeroport = order.navetteAeroport %}

<div class="reservation-detail page-confirmation">
<div class="paiement-reservation">
  <div class="item-child">
  <div class="header-reservation">
    <div>
      <p> {{ 'reservation_detail.reservation_number'|trans }} {{ order.reference }}</p>
    </div>
      <a href="{{ path('app_reservations',{'_locale' : app.request.locale}) }}" class="retour">
        {{ 'reservation_detail.back'|trans }}
      </a>
    </div>
    {% set firstKey = cartCalendar|keys|first %}
    <div class="date-reservation-reservation">
        <div class="time">
          <p>
            {{ cartCalendar[firstKey].start|date('H:00') }}
          </p>
        </div>
        <div class="date">
          <p>
            {% if app.request.locale == 'en' %}
                {{ cartCalendar[firstKey].start|format_datetime(locale='en',pattern="EEEE dd MMMM YYYY") }}
            {% else %}
                {{ cartCalendar[firstKey].start|format_datetime(locale='fr',pattern="EEEE dd MMMM YYYY") }}
            {% endif %}
            <br>
            {% set minutes = cartCalendar[firstKey].duree %}
            {% set hours = minutes // 60 %}
            {% set remainingMinutes = minutes % 60 %}

            {# Format hours and minutes as strings with leading zeros if needed #}
            {% set hoursString = hours < 10 ? '0' ~ hours : hours %}
            {% set minutesString = remainingMinutes < 10 ? '0' ~ remainingMinutes : remainingMinutes %}
            {{ hoursString }}h{{ minutesString }} {{ 'confirmation.text25'|trans }}
          </p>
        </div>
    </div>

    <!-- table-select-reservation -->
    <div class="table-select-reservation">
        <!-- table-res -->
        {% if carts|length > 0  %}
          {% for key,item in carts %}
              <div class="table-res">
                  <div class="name-reservation">
                      <div class="name-icon">
                          <p>{{ item.product|getProduct(app.request.locale)['nomProduits'] }}</p>
                      </div>
                      <p class="clock-icon">
                          <svg xmlns="http://www.w3.org/2000/svg" width="19" height="20" fill="none" viewbox="0 0 19 20">
                              <g clip-path="">
                                  <path fill="#000" d="M9.5 0C14.747 0 19 4.477 19 10s-4.253 10-9.5 10S0 15.523 0 10 4.253 0 9.5 0Zm0 1.395c-2.168 0-4.247.907-5.78 2.52C2.187 5.53 1.325 7.718 1.325 10s.862 4.47 2.395 6.085c1.533 1.613 3.612 2.52 5.78 2.52s4.247-.907 5.78-2.52c1.534-1.614 2.395-3.803 2.395-6.085s-.861-4.47-2.395-6.085c-1.533-1.613-3.612-2.52-5.78-2.52Zm-.883 4.186c.365 0 .662.313.662.698v4.884h4.64a.648.648 0 0 1 .452.213c.119.13.185.304.185.485 0 .18-.066.354-.185.484a.648.648 0 0 1-.453.213H8.617a.647.647 0 0 1-.47-.204.717.717 0 0 1-.194-.494V6.28c0-.386.297-.699.663-.699Z"/>
                              </g>
                              <defs>
                                  <clipPath id="a">
                                      <path fill="#fff" d="M0 0h19v20H0z"/>
                                  </clipPath>
                              </defs>
                          </svg>
                          {{ item.duration|getdatadure(app.request.locale)['intitule'] }}
                          <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewbox="0 0 15 15">
                              <path fill="#000" d="M13.589 12.422a7.073 7.073 0 0 0-3.932-3.176 4.219 4.219 0 1 0-4.312 0 7.072 7.072 0 0 0-3.932 3.176.468.468 0 1 0 .808.469 6.099 6.099 0 0 1 10.56 0 .467.467 0 0 0 .88-.1.47.47 0 0 0-.072-.37Zm-9.37-6.797a3.281 3.281 0 1 1 6.563 0 3.281 3.281 0 0 1-6.562 0Z"/>
                          </svg>
                          x
                          {{item.quantity}}
                      </p>
                  </div>
                  <div class="prix-reservation">
                      <p>{{ item.price|number_format(0,'.','') }} DH</p>
                  </div>
              </div>
          {% endfor %}
      {% endif %}

        <!-- table-res -->
    {% if cartHotel|length > 0  %}
        {% set firstKey = cartHotel|keys|first %}
        {% set hotel_id   = cartHotel[firstKey].hotel %}
        {% set nomHotel   = cartHotel[firstKey].nomHotel %}
        {% set personne   = cartHotel[firstKey].personne %}
        {% set tarifHotel = cartHotel[firstKey].tarif %}
        {% set pickup     = cartHotel[firstKey].pickup %}
        <div class="table-res">
          <div class="name-reservation namereservation">
            <p class="title-gratuit">
              {{ 'confirmation.text27'|trans }}
              <span>{{ (tarifHotel > 0) ? tarifHotel ~ 'DH' : 'panier.gratuit'|trans }}</span>
            </p>
            {% set text1 = "" %}
            {% set reservation_date = cartCalendar[firstKey].start|date('d-m-Y H:00') %}
            {% if pickup %}
              {% set reservation_date = reservation_date|date_modify("-" ~ pickup ~ " minutes") %}
              {% set text = (app.request.locale == 'fr') ? 'reservation_detail.hotel_pickup'|trans : 'reservation_detail.hotel_pickup_en'|trans %}
              {% set text1 = text ~ ' ' ~ reservation_date|date("H:i")|replace({':': 'h'}) %}
            {% endif %}
                <p>
                    {{nomHotel}}
                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none"
                        viewBox="0 0 15 15">
                        <path fill="#000"
                            d="M13.589 12.422a7.073 7.073 0 0 0-3.932-3.176 4.219 4.219 0 1 0-4.312 0 7.072 7.072 0 0 0-3.932 3.176.468.468 0 1 0 .808.469 6.099 6.099 0 0 1 10.56 0 .467.467 0 0 0 .88-.1.47.47 0 0 0-.072-.37Zm-9.37-6.797a3.281 3.281 0 1 1 6.563 0 3.281 3.281 0 0 1-6.562 0Z" />
                    </svg>
                    x {{personne}}

                    {% if text1 %}
                        <span class="hotelText">({{ text1 }})</span>
                    {% endif %}
                    
                </p>
                {% if reservation.numerodechambre %}
                    <p>
                        {{'confirmation.numerodechambre'|trans }}: 
                        {{ reservation.numerodechambre }}
                    </p>
                {% endif %}
            </div>
        </div>
      {% endif %}

      {% if navetteAeroport|length > 0  %}

        {% set departure  = navetteAeroport.departure %}
        {% set arrival    = navetteAeroport.arrival %}
        {% set time       = navetteAeroport.time %}
        {% set nbPersonne = navetteAeroport.nbPersonne %}
        {% set date       = navetteAeroport.date %}
        {% set tarifNavetteAeroport = navetteAeroport.tarif %}

        {% set dateReturn    = navetteAeroport.dateReturn %}
        {% set timeReturn    = navetteAeroport.timeReturn %}
        {% set numeroVol     = navetteAeroport.numeroVol %}


        <div class="table-res">
          <div class="navette_departure_result_svg">
            <i class="fa-user-pin"></i>
          </div>
          <div class="navette_departure_result">
            <div class="header">
              <div class="title">
                {{ 'panier.navette-text-1'|trans }}
              </div>
              <div class="price">
                {{tarifNavetteAeroport|number_format(0,'.','')}} DH
              </div>
            </div>
            <div class="location">
              {{ departure }}
              <br>
              <div class="arrow">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="18" fill="none" viewbox="0 0 14 18">
                  <path fill="#EE7D00" d="M6.25 1a.75.75 0 0 1 1.5 0v9.25H13a.75.75 0 0 1 .53 1.28l-6 6a.75.75 0 0 1-1.06 0l-6-6A.75.75 0 0 1 1 10.25h5.25V1Z"/>
                </svg>
              </div>
              {{arrival}}
            </div>
            <div class="details">
              <div>
                <i class="fa-user-friends"></i>
                {{nbPersonne}}
                {{ 'panier.navette-text-11'|trans }}</div>
            </div>
            <div class="flight-card">
              <div class="flight-section">
                <span class="flight-label">{{ 'panier.navette-text-12'|trans }}
                  :</span>
                <span class="flight-time">
                  <svg xmlns="http://www.w3.org/2000/svg" width="17" height="18" fill="none" viewbox="0 0 17 18">
                    <path fill="#EE7D00" d="M16.559 4.7a3.282 3.282 0 0 0-3.278-3.075h-.844V.969a.657.657 0 0 0-1.312 0v.656h-5.25V.969a.656.656 0 0 0-1.313 0v.656h-.844A3.282 3.282 0 0 0 .44 4.7a80.475 80.475 0 0 0 .011 9.778 3.285 3.285 0 0 0 3.07 3.07 80.279 80.279 0 0 0 9.956 0 3.285 3.285 0 0 0 3.07-3.07A80.49 80.49 0 0 0 16.56 4.7Zm-1.321 9.697a1.97 1.97 0 0 1-1.842 1.841 79.204 79.204 0 0 1-9.793 0 1.97 1.97 0 0 1-1.842-1.841 79.179 79.179 0 0 1-.104-7.522h13.685a79.252 79.252 0 0 1-.104 7.522ZM5.218 4.25a.656.656 0 0 0 .657-.656v-.656h5.25v.656a.656.656 0 0 0 1.312 0v-.656h.844c1.041 0 1.906.808 1.968 1.84.015.261.022.523.034.785H1.716c.013-.262.019-.524.034-.784a1.968 1.968 0 0 1 1.968-1.841h.844v.656c0 .362.294.656.656.656Z"/>
                    <path fill="#EE7D00" d="M5.219 10.813a.984.984 0 1 0 0-1.97.984.984 0 0 0 0 1.97Zm3.281 0a.984.984 0 1 0 0-1.97.984.984 0 0 0 0 1.97Zm-3.281 3.281a.984.984 0 1 0 0-1.969.984.984 0 0 0 0 1.969Zm6.562-3.281a.984.984 0 1 0 0-1.97.984.984 0 0 0 0 1.97Zm0 3.281a.984.984 0 1 0 0-1.969.984.984 0 0 0 0 1.969Zm-3.281 0a.984.984 0 1 0 0-1.97.984.984 0 0 0 0 1.97Z"/>
                  </svg>
                  {% if app.request.locale == 'en' %}
                    {{ date|format_datetime(locale='en',pattern="dd MMMM YYYY") }}
                  {% else %}
                    {{ date|format_datetime(locale='fr',pattern="dd MMMM YYYY") }}
                  {% endif %}<br>
                  <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="none" viewbox="0 0 17 17">
                    <g clip-path="url(#a)">
                      <path fill="#EE7D00" d="M8.5 14.875a6.375 6.375 0 1 0 0-12.75 6.375 6.375 0 0 0 0 12.75ZM16.293 8.5A7.792 7.792 0 1 1 .71 8.5a7.792 7.792 0 0 1 15.583 0Zm-5.666 3.127L7.792 8.793V3.896H9.21v4.31l2.418 2.419-1.001 1.002Z"/>
                    </g>
                    <defs>
                      <clipPath id="a">
                        <path fill="#fff" d="M0 0h17v17H0z"/>
                      </clipPath>
                    </defs>
                  </svg>
                  {{time}}</span>
              </div>
              {% if dateReturn and timeReturn %}
                <div class="flight-section">
                  <span class="flight-label">{{ 'panier.navette-text-13'|trans }}
                    :</span>
                  <span class="flight-time">
                    <svg xmlns="http://www.w3.org/2000/svg" width="17" height="18" fill="none" viewbox="0 0 17 18">
                      <path fill="#EE7D00" d="M16.262 4.388a3.282 3.282 0 0 0-3.278-3.075h-.844V.655a.657.657 0 0 0-1.312 0v.656h-5.25V.656a.656.656 0 0 0-1.313 0v.656h-.844A3.282 3.282 0 0 0 .143 4.389a80.475 80.475 0 0 0 .011 9.777 3.285 3.285 0 0 0 3.07 3.07 80.279 80.279 0 0 0 9.956 0 3.285 3.285 0 0 0 3.07-3.07 80.49 80.49 0 0 0 .012-9.777Zm-1.32 9.696a1.97 1.97 0 0 1-1.843 1.842 79.204 79.204 0 0 1-9.793 0 1.97 1.97 0 0 1-1.842-1.842 79.179 79.179 0 0 1-.104-7.521h13.685a79.235 79.235 0 0 1-.104 7.521ZM4.921 3.938a.656.656 0 0 0 .656-.657v-.656h5.25v.656a.656.656 0 0 0 1.312 0v-.656h.844c1.042 0 1.906.809 1.968 1.841.015.26.022.523.035.784H1.419c.013-.261.02-.523.034-.784a1.968 1.968 0 0 1 1.968-1.841h.844v.656c0 .362.294.656.656.656Z"/>
                      <path fill="#EE7D00" d="M4.922 10.5a.984.984 0 1 0 0-1.969.984.984 0 0 0 0 1.969Zm3.281 0a.984.984 0 1 0 0-1.969.984.984 0 0 0 0 1.969Zm-3.281 3.281a.984.984 0 1 0 0-1.968.984.984 0 0 0 0 1.968Zm6.562-3.281a.984.984 0 1 0 0-1.969.984.984 0 0 0 0 1.969Zm0 3.281a.984.984 0 1 0 0-1.969.984.984 0 0 0 0 1.97Zm-3.281 0a.984.984 0 1 0 0-1.968.984.984 0 0 0 0 1.968Z"/>
                    </svg>
                    {% if app.request.locale == 'en' %}
                      {{ dateReturn|format_datetime(locale='en',pattern="dd MMMM YYYY") }}
                    {% else %}
                      {{ dateReturn|format_datetime(locale='fr',pattern="dd MMMM YYYY") }}
                    {% endif %}
                    <br>
                    <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="none" viewbox="0 0 17 17">
                      <g clip-path="url(#a)">
                        <path fill="#EE7D00" d="M8.5 14.875a6.375 6.375 0 1 0 0-12.75 6.375 6.375 0 0 0 0 12.75ZM16.293 8.5A7.792 7.792 0 1 1 .71 8.5a7.792 7.792 0 0 1 15.583 0Zm-5.666 3.127L7.792 8.793V3.896H9.21v4.31l2.418 2.419-1.001 1.002Z"/>
                      </g>
                      <defs>
                        <clipPath id="a">
                          <path fill="#fff" d="M0 0h17v17H0z"/>
                        </clipPath>
                      </defs>
                    </svg>
                    {{timeReturn}}
                  </span>
                </div>
              {% endif %}
              {% if numeroVol %}
                <div class="flight-number">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewbox="0 0 24 24">
                    <path fill="#EE7D00" d="M14 8.947 22 14v2l-8-2.526v5.36l3 1.666V22l-4.5-1L8 22v-1.5l3-1.667v-5.36L3 16v-2l8-5.053V3.5a1.5 1.5 0 1 1 3 0v5.447Z"/>
                  </svg>
                  {{ 'panier.navette-text-9'|trans }}
                  :
                  <span>{{numeroVol}}</span>
                </div>
              {% endif %}
            </div>
          </div>
        </div>
      {% endif %}

      {% if order.codePromo %}
          <div class="promo">
              <div class="name-reservation">
                  <p>{{ 'confirmation.codepromo'|trans }} ({{order.codePromo}})</p>
              </div>
              <div class="prix-reservation">
                  <p>{{ order.Total - order.MontantReservation }}DH</p>
              </div>
          </div>
      {% endif %}

       <!-- table-res total-prix -->
      <div class="table-res total-prix">
        <div class="name-reservation">
          <p>
            {% if order.modePayment == "cache" %}
                {{ 'reservation_detail.total_to_pay'|trans }}
            {% else %}
                {{ 'reservation_detail.total_paid'|trans }}
            {% endif %}
          </p>
        </div>
        <div class="prix-reservation" id="totalreservation">
          <p>{{ order.MontantReservation }} DH</p>
        </div>
      </div>
      <div class="btn-reservation">
          <a href="{{ path('app_reservation_voucher' , {'_locale' : app.request.locale , 'id': order.id }) }}"
            target="_blank"
          > {{ 'reservation_detail.download_voucher'|trans }} </a>
      </div>
    </div>
  </div>
</div>

</div>

{% endblock %}