<!--
  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 color="secondary">
    <ion-buttons slot="start">
      <ion-button class="ion-no-padding" fill="clear" color="tertiary" (click)="goBack()">
        <ion-icon name="arrow-back-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>{{'onlineshop.orderpage.ord'| translate}}</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="openFiltri()" fill="clear">
        <ion-icon size="large" src="../../../assets/icons/app/icona-filtro.svg"></ion-icon>
      </ion-button>
      <ion-button (click)="viewOrdinamentoModal($event)">
        <ion-icon name="filter-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button>
        {{totalrows}} {{'onlineshop.filters.result'| translate}}
      </ion-button>
    </ion-buttons>
    <ion-segment [scrollable]="true" mode="ios">
      @for (data of lstFilter; track data; let i = $index) {
        <ion-segment-button layout="icon-end" (click)="delFilter(data)">
          <ion-label>{{data?.label}}</ion-label>
          <ion-icon name="close"></ion-icon>
        </ion-segment-button>
      }
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

  <!----------------POP UP ORDINAMENTO RECENTI----------------------------->
  <ion-popover #popover_ordinamento_product [isOpen]="ordinamentoModalOpen" (didDismiss)="ordinamentoModalOpen = false;" [cssClass]="'popover-ordinamento'" mode="ios">
    <ng-template>
      <ion-header>
        <ion-toolbar color="secondary">
          <ion-buttons slot="start">
            <ion-button (click)="ordinamentoModalOpen = false">
              <ion-icon name="close"></ion-icon>
            </ion-button>
          </ion-buttons>
          <ion-title>{{'onlineshop.lbl.orderby'| translate}}</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="ion-padding">
        <ion-radio-group [value]="filter.orderBy">
          @for (ord of lstOrdinamento; track ord) {
            <ion-item (click)="setOrdinamento(ord)">
              <ion-radio [value]="ord?.value" justify="space-between">{{ord?.label | translate}}</ion-radio>
            </ion-item>
          }
        </ion-radio-group>
      </ion-content>
    </ng-template>
  </ion-popover>

  <!----------------MODAL FILTRI----------------------------->
  <ion-modal [isOpen]="filtriModalOpen" (didDismiss)="filtriModalOpen = false;">
    <ng-template>
      <ion-header>
        <ion-toolbar color="secondary">
          <ion-buttons slot="start">
            <ion-button (click)="filtriModalOpen = false">
              <ion-icon name="close" size="large"></ion-icon>
            </ion-button>
          </ion-buttons>
          <ion-title>{{'onlineshop.filters'| translate}}</ion-title>
          <ion-buttons slot="end">
            <ion-button id="reset-alert">
              <ion-icon name="trash-outline" size="large"></ion-icon>
            </ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
      <ion-content class="ion-padding">
        <ion-alert trigger="reset-alert" [header]="'reset_header' | translate" [message]="'reset_message' | translate" [buttons]="resetButtons"></ion-alert>

        <ion-card>
          <ion-card-content>
            <ion-item>
              <ion-label position="stacked">{{'onlineshop.filters.da'| translate}}</ion-label>
              <ion-input id="ord_user_trig_date_da_popover" placehoder="dd/mm/yyyy" [readonly]="true" value="{{ filter_temp.ord_date_da | date: 'dd/MM/yyyy' }}" style="color: black;" type="text"></ion-input>
              <ion-popover #ord_user_date_da_popover trigger="ord_user_trig_date_da_popover" size="auto">
                <ng-template>
                  <ion-datetime [value]="filter_temp.ord_date_da !== '' ? filter_temp.ord_date_da : null" presentation="date" locale="it-IT" (ionChange)="setDataDa($event)"></ion-datetime>
                </ng-template>
              </ion-popover>
              <ion-icon name="calendar-outline" slot="start"></ion-icon>
              @if (filter_temp.ord_date_da !== '') {
                <ion-icon name="close-circle-outline" slot="end" (click)="filter_temp.ord_date_da = ''" style="cursor: pointer;"></ion-icon>
              }
            </ion-item>
          </ion-card-content>
        </ion-card>

        <ion-card>
          <ion-card-content>
            <ion-item>
              <ion-label position="stacked">{{'onlineshop.filters.a' | translate}}</ion-label>
              <ion-input id="ord_user_trig_date_a_popover" placehoder="dd/mm/yyyy" [readonly]="true" value="{{ filter_temp.ord_date_a | date: 'dd/MM/yyyy' }}" style="color: black;" type="text"></ion-input>
              <ion-popover #ord_user_date_a_popover trigger="ord_user_trig_date_a_popover" size="auto">
                <ng-template>
                  <ion-datetime #datetime_ord_date_a [value]="filter_temp.ord_date_a !== '' ? filter_temp.ord_date_a : null" presentation="date" locale="it-IT" (ionChange)="setDataA($event)"></ion-datetime>
                </ng-template>
              </ion-popover>
              <ion-icon name="calendar-outline" slot="start"></ion-icon>
              @if (filter_temp.ord_date_a !== '') {
                <ion-icon name="close-circle-outline" slot="end" (click)="filter_temp.ord_date_a = ''" style="cursor: pointer;"></ion-icon>
              }
            </ion-item>
          </ion-card-content>
        </ion-card>

        <ion-card>
          <ion-card-content>
            <ion-item>
              <ion-select [(ngModel)]="filter_temp.stato" [label]="'onlineshop.lbl.ordini.state' | translate" interface="popover">
                @for (s of lstStati; track s) {
                  <ion-select-option [value]="s.value">{{s.text}}</ion-select-option>
                }
              </ion-select>
            </ion-item>
          </ion-card-content>
        </ion-card>

      </ion-content>
      <ion-footer>
        <ion-toolbar>
          <ion-button (click)="searchFilter()" fill="clear" expand="full" style="margin: 3%;">
            <ion-icon name="search"></ion-icon>
            <ion-label>{{'onlineshop.homepage.search' | translate }}</ion-label>
          </ion-button>
        </ion-toolbar>
      </ion-footer>
    </ng-template>
  </ion-modal>


  <!-------------------LISTA ORDINI---------->
  @for (ord of lstData; track ord; let i = $index) {
    <ion-list lines="none">
      <ion-list-header>
        <a (click)="OrderDetail(ord.ord_id, 'profile')">
          <span >
            <h5>{{'onlineshop.lbl.ordini.ord_number' | translate }}: {{ lstData[i].ord_id }}</h5>
            <h6>STATUS: {{lstData[i].ord_lbl_state}}</h6>
          </span>
        </a>
      </ion-list-header>
      <div class="os-scroller">
        @for (item of lstData[i].detail; track item; let j = $index) {
          <ion-card class="os-card" (click)="prd_detail(item.id)">
            <img [src]="onlineshopImageUrl + item.photo[0]?.prph_path_photo_sm" class="os-thumb" />
            <ion-card-header>
              <ion-card-title class="os-card-title">{{item?.title}}</ion-card-title>
            </ion-card-header>
            <ion-card-content class="d-flex justify-content-end">
              <span class="os-price">{{item?.price | currency:'EUR':'symbol'}}</span>
            </ion-card-content>
          </ion-card>
        }
      </div>
      <!-- Recensione impresa (ordine consegnato/fatturato/incassato) -->
      @if (lstData[i].ord_state >= 7 && lstData[i].ord_state <= 9) {
        <div class="ion-padding-horizontal">
          <app-review-cta source="ORDINE" mode="button" [sourceId]="lstData[i].ord_id"></app-review-cta>
        </div>
      }
      <!-- Stampa fattura (se emessa) / stato in emissione -->
      @if (fatturaStampabile(ord)) {
        <div class="ion-padding-horizontal">
          <ion-button size="small" fill="outline" (click)="printInvoice(ord)">
            <ion-icon slot="start" name="document-text-outline"></ion-icon>
            Stampa fattura
          </ion-button>
        </div>
      } @else if (fatturaInEmissione(ord)) {
        <div class="ion-padding-horizontal">
          <ion-badge color="light">Fattura in emissione</ion-badge>
        </div>
      }
      <b><hr></b>
    </ion-list>
  }
  <ion-infinite-scroll (ionInfinite)="onIonInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>

</ion-content>
