<!--
  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-title>{{'onlineshop.prd.dett' | translate}}</ion-title>
    <!--<ion-buttons slot="end">
    <ion-button class="ion-no-padding ion-float-end" fill="clear" color="tertiary" (click)="share()">
      <ion-icon name="share-outline"></ion-icon>
    </ion-button>
  </ion-buttons>-->
</ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="content_detaglio_vino">
  <ion-card-content>
    <ion-grid>
      <ion-row>
        <ion-col size="auto" size-xs="12" size-sm="12" size-md="4" size-lg="4" size-xl="3">
          <div class="image-container">
            @for (ph of product.photo; track ph; let j = $index) {
              <div >
                <ion-badge class="top-left-badge" [color]="av?.status">
                  {{av?.text}}
                </ion-badge>
                <img    [src]="onlineshopImageUrl + product.photo[indexImg]?.prph_path_photo_lg"
                  class="gallery-image"
                  [class.active]="j === indexImg"
                  [style]="{'border-radius': '15px'}" />
                </div>
              }
              <ion-button fill="clear" class="arrow-btn left-arrow" (click)="prevImage()">
                <ion-icon name="chevron-back-outline"></ion-icon>
              </ion-button>

              <ion-button fill="clear" class="arrow-btn right-arrow" (click)="nextImage()">
                <ion-icon name="chevron-forward-outline"></ion-icon>
              </ion-button>
            </div>
          </ion-col>
          <ion-col size="auto" size-xs="12" size-sm="12" size-md="8" size-lg="8" size-xl="9">
            <ion-item lines="none">
              <ion-label class="ion-text-wrap">
                <span class="font-medium text-secondary text-sm">{{type?.tpw_name}}</span>
              </ion-label>
            </ion-item>
            <ion-item lines="none">
              <ion-label class="ion-text-wrap">
                <h2 style="text-align: left; font-family: 'Abril Fatface Regular'; color: #333333;  font-weight: 800;" class="page-title">{{product?.title}}</h2>
              </ion-label>
            </ion-item>
            <ion-item lines="full" class="wine_price">
              <ion-text slot="start">{{product?.price | currency:'EUR':'symbol'}}</ion-text>
              <ion-button color="success" (click)="addPrdCart(product)">
                <ion-icon name="add-circle-outline"></ion-icon>
              </ion-button>
              @if (product.fav == false) {
                <ion-button color="success" (click)="addPrdWishlist(product)">
                  <ion-icon name="heart-outline"></ion-icon>
                </ion-button>
              }
              @if (product.fav == true) {
                <ion-button color="warning" (click)="removePrdWishlist(product)">
                  <ion-icon name="heart-dislike-outline"></ion-icon>
                </ion-button>
              }
            </ion-item>
            <ion-item lines="none">
              <ion-list lines="none">
                <div>
                  <ion-label >{{'onlineshop.prd.production' | translate}}:</ion-label><br>
                </div>
                <div>
                  <ion-label >{{'onlineshop.prd.year' | translate}}: <b>{{product?.productionyear}}</b></ion-label>
                  <ion-label >{{'onlineshop.prd.prov' | translate}}: <b>{{objcomune?.denominazione}} ({{objcomune?.codiceprovincia}})</b></ion-label>
                </div>
              </ion-list>
            </ion-item>
            <ion-item lines="none">
              <ion-label class="ion-text-wrap">
                <p style="color: #333333;">{{product?.description}}</p>
              </ion-label>
            </ion-item>
            <ion-item lines="none">
              @if (product.note) {
                <ion-label class="ion-text-wrap">
                  <ion-label>{{'onlineshop.ft.note' | translate}}:</ion-label>
                  <p style="color: #333333;">{{product?.note}}</p>
                </ion-label>
              }
            </ion-item>
          </ion-col>
        </ion-row>
      </ion-grid>

      <!-- Recensioni del negozio (pubbliche, sorgente ORDINE) -->
      @if (reviews.length > 0) {
        <div class="prd-reviews">
          <h3 class="prd-reviews-title">Recensioni del negozio</h3>
          @for (r of reviews; track r.rev_id) {
            <div class="prd-review">
              <div class="prd-review-head">
                <div class="review-stars">
                  @for (s of stars; track s) {
                    <ion-icon [name]="s <= r.rev_rating_overall ? 'star' : 'star-outline'"></ion-icon>
                  }
                </div>
                <span class="prd-review-overall">{{ r.rev_rating_overall | number: '1.1-1' }}</span>
                <span class="prd-review-author">{{ reviewerName(r) }}</span>
              </div>
              @if (r.rev_title) {
                <div class="prd-review-title">{{ r.rev_title }}</div>
              }
              @if (r.rev_text) {
                <p class="prd-review-text">{{ r.rev_text }}</p>
              }
            </div>
          }
        </div>
      }
    </ion-card-content>
  </ion-content>
