<!--
  Questo file fa parte di MyTown.
  MyTown è software libero: puoi ridistribuirlo e/o modificarlo secondo
  i termini della GNU Affero General Public License come pubblicata dalla
  Free Software Foundation, versione 3.
  Distribuito senza ALCUNA GARANZIA; vedi la GNU AGPL v3 per i dettagli.
  Copyright (C) Kondor Consulting & Services S.r.l.
  SPDX-License-Identifier: AGPL-3.0-or-later
-->
<ion-header>
  <ion-toolbar scroll-y="false" >
    <ion-buttons slot="start">
      <ion-button class="ion-no-padding" fill="clear" color="tertiary" (click)="closeModal()">
        <ion-icon name="close-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>{{'onlineshop.ord.dett' | translate}}</ion-title>
    <ion-buttons slot="end">
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-card >
          <ion-card-title class="card-title">{{'onlineshop.lbl.ordini.usr_username' | translate}}</ion-card-title>
          <ion-card-content>
            <ion-label>{{'onlineshop.ord.nomin' | translate}}: {{data?.usr_lastname}} {{data?.usr_firstname}}</ion-label><br>
            <ion-label>{{'onlineshop.lbl.clienti.cli_email' | translate}}: {{data?.usr_username}}</ion-label>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-card >
          <ion-card-title class="card-title">{{'onlineshop.cart.gen' | translate}}</ion-card-title>
          <ion-card-content>
            <ion-label>{{'onlineshop.ft.dataOrdine' | translate}}: {{data?.ord_date | date}}</ion-label><br>
            <ion-label>{{'onlineshop.ft.tpepay' | translate}}: {{data?.typePayment?.tpepay_desc}}</ion-label><br>
            <ion-label>{{'onlineshop.cart.log' | translate}}: {{data?.operatorDelivery?.opc_desc}}</ion-label><br>
            <ion-label>{{'onlineshop.ord.nomin' | translate}}: {{data?.address?.lastname}} {{data.address?.firstname}}</ion-label><br>
            <ion-label>{{'onlineshop.ft.indirizzoSped' | translate}}: {{data?.address?.address}}, {{data?.address?.number}} - {{data.address?.city}}, {{data?.address?.postal_code}} ({{data?.address?.prov}})</ion-label>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-card >
          <ion-card-title class="card-title">{{'onlineshop.cart.tot' | translate}}</ion-card-title>
          <ion-card-content>
            <ion-label>{{'onlineshop.filters.price' | translate}}: {{data?.ord_price| currency:'EUR':'symbol'}}</ion-label><br>
            @if (data?.ord_price_transport > 0) {
              <ion-label>{{'onlineshop.ft.costoTrans' | translate}}: {{data?.ord_price_transport | currency:'EUR':'symbol'}}</ion-label>
              }<hr>
              <ion-label>{{'onlineshop.cart.final' | translate}}: {{data?.ord_price_payment | currency:'EUR':'symbol'}}</ion-label>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-card>
            <ion-card-title class="card-title">{{'onlineshop.lbl.ordini.state' | translate}}</ion-card-title>
            <ion-card-content>
              <div class="timeline">
                @for (event of lstStati; track event) {
                  <div  class="timeline-item">
                    <!-- Pallino o icona della timeline -->
                    <div class="timeline-icon" [style]="{ 'background-color': event?.color }">
                      <ion-icon  [name]="event?.icon"></ion-icon>
                    </div>
                    <!-- Contenuto dell'evento -->
                    <div class="timeline-content" >
                      <h6>{{ event?.text }}</h6>
                    </div>
                  </div>
                }
              </div>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
    <ion-list lines="none">
      <div [style]="{'display': 'flex','overflow-x' : 'auto',}" >
        @for (dett of data.detail; track dett) {
          <ion-card [style]="{'width': '10rem', 'flex': '0 0 auto'}">
            <img  [src]="onlineshopImageUrl + dett?.photo[0]?.prph_path_photo_sm"
              class="gallery-image"
              [class.active]="0"
              [style]="{'border-radius': '15px','min-height' : '50px', 'max-height' : '100px'}" />
              <ion-card-header>
                <ion-card-title style="font-size: 20px;" text-wrap>{{dett?.title}}</ion-card-title>
                <ion-card-subtitle>{{'onlineshop.filters.quant' | translate}}: {{dett?.amount}}</ion-card-subtitle>
              </ion-card-header>
              <ion-card-content  class="d-flex justify-content-end">
                <span class="text-sm font-semibold text-surface-900 dark:text-surface-0">{{dett?.price  | currency:'EUR':'symbol'}}</span>
              </ion-card-content>
            </ion-card>
          }
        </div>
        <b><hr></b>
      </ion-list>
    </ion-content>

    <ion-footer>
      <ion-button fill="outline" (click)="stamp()">
        <ion-icon slot="start" name="print-outline"></ion-icon>
        <ion-label>{{'onlineshop.filters.stamp' | translate}}</ion-label>
      </ion-button>
    </ion-footer>