<!--
  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)="goBack()">
        <ion-icon name="arrow-back-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-searchbar
      color="secondary" class="ion-no-padding" #cerca animated="true" placeholder="{{'onlineshop.homepage.search' | translate }}" [debounce]="1000" (ionInput)="getPrdbySearch(cerca.value!)">
    </ion-searchbar>
    <ion-buttons slot="end">
      <ion-button class="ion-no-padding" (click)="openFiltri()" fill="clear" color="tertiary">
        <ion-icon name="funnel-outline"></ion-icon>
      </ion-button>
      <ion-button class="ion-no-padding" (click)="viewOrdinamentoModal($event)" fill="clear" color="tertiary">
        <ion-icon name="filter-outline"></ion-icon>
      </ion-button>
      @if (filter.fav == false) {
        <ion-button class="ion-no-padding" (click)="fav()" fill="clear" color="tertiary">
          <ion-icon name="heart-outline"></ion-icon>
        </ion-button>
      }
      @if (filter.fav == true) {
        <ion-button class="ion-no-padding" (click)="notFav()" fill="clear" color="tertiary">
          <ion-icon name="heart-dislike-outline"></ion-icon>
        </ion-button>
      }
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>

  <!-------------------POP-UP ORDINAMENTO LISTA PRODOTTI---------->
  <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]="selected_order">
          @for (ord of lstOrdinamento; track ord) {
            <ion-item (click)="setOrdinamento(ord.value)">
              <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'" [message]="'reset_message'" [buttons]="resetButtons" ></ion-alert>

        <ion-card>
          <ion-card-header>
            <ion-card-title>{{'onlineshop.filters.tipologia' | translate}}</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <ion-item>
              <ion-select interface="popover" [(ngModel)]="filter_temp.type_wine">
                <ion-select-option [value]="-1">{{'onlineshop.filters.seleziona' | translate }} {{'onlineshop.filters.tipologia' | translate}} </ion-select-option>
                @for (t of lst_typewine; track t) {
                  <ion-select-option [value]="t?.tpw_id">
                    {{t?.tpw_name}}
                  </ion-select-option>
                }
              </ion-select>
            </ion-item>
          </ion-card-content>
        </ion-card>

        <ion-card>
          <ion-card-header>
            <ion-card-title>{{'onlineshop.filters.price' | translate }}</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <ion-grid>
              <ion-row>
                <ion-col size="6">
                  <ion-input type="number" [(ngModel)]="inputMin" (ionChange)="set_min_max()" placeholder="min" ></ion-input>
                </ion-col>
                <ion-col size="6">
                  <ion-input type="number" [(ngModel)]="inputMax" (ionChange)="set_min_max()" placeholder="max" ></ion-input>
                </ion-col>
              </ion-row>
            </ion-grid>
            <ion-range  [min]="min" [max]="max"
              [value]="{lower: inputMin, upper: inputMax}"
              [pin]="true" dualKnobs="true" [(ngModel)]="range" (ionChange)="set_range()"
            ></ion-range>
          </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 PRODOTTI---------->
  <ion-list class="searchbar_list_filters" lines="none">
    @for (item of lstData; track item) {
      <ion-item class="dataselection_list os-list-card" lines="none" (click)="prd_detail(item.id)">
        <ion-grid>
          <ion-row class="ion-align-items-center">
            <ion-col size="4">
              <img [src]="onlineshopImageUrl + item.photo[0]?.prph_path_photo_sm" class="os-thumb--sm" />
            </ion-col>
            <ion-col size="8">
              <ion-label class="ion-text-wrap">
                <h2 class="os-card-title">{{item?.title}}</h2>
                <p class="font-medium text-secondary text-sm">{{item?.shortdescription}}</p>
                <p class="os-price">{{item?.price | currency:'EUR':'symbol'}}</p>
              </ion-label>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-item>
    }
  </ion-list>
  <ion-infinite-scroll (ionInfinite)="onIonInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>

</ion-content>
