<!--
  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.cartpage.cart' | translate}}</ion-title>
  </ion-toolbar>
</ion-header>

@if (buy == false) {
  <ion-content >
    @if (cart?.num_products > 0) {
      <ion-card>
        <ion-card-header>
          <ion-card-title>{{'onlineshop.homepage.prd' | translate}}</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <ion-list  lines="none">
            @for (detail of cartDetail; track detail) {
              <ion-item>
                <ion-grid>
                  <ion-row class="ion-align-items-center">
                    <ion-col size="4">
                      <a (click)="prd_detail(detail?.product?.id)"><img [src]="onlineshopImageUrl + detail?.product?.photo[0]?.prph_path_photo_sm" class="os-thumb--sm" /></a>
                    </ion-col>
                    <ion-col size="5">
                      <ion-label>
                        <h5 class="text-md font-medium">{{detail?.product?.title}}</h5>
                        <p class="font-medium text-secondary text-sm">{{detail?.product?.shortdescription}}</p>
                      </ion-label>
                    </ion-col>
                    <ion-col size="3">
                      <ion-label>
                        <h5><b>{{detail.product.price  | currency:'EUR':'symbol'}}</b></h5>
                      </ion-label>
                    </ion-col>
                  </ion-row>
                  <ion-row>
                    <ion-col size="auto">
                      <ion-button fill="outline" color="medium" (click)="changeQuantity(detail.product,'minus')">
                        <ion-icon slot="icon-only" name="remove-outline"></ion-icon>
                      </ion-button>
                    </ion-col>
                    <ion-col size="auto">
                      <ion-button fill="clear" color="medium"> {{'onlineshop.filters.quant' | translate}}: {{detail?.product?.qnt}}</ion-button>
                    </ion-col>
                    <ion-col size="auto">
                      <ion-button fill="outline" color="medium" (click)="changeQuantity(detail.product,'plus')">
                        <ion-icon slot="icon-only" name="add-outline"></ion-icon>
                      </ion-button>
                    </ion-col>
                  </ion-row>
                  <ion-row>
                    <ion-col sizeXs="12" sizeSm="auto">
                      <ion-button fill="outline" color="danger" (click)="changeQuantity(detail.product,'remove')">
                        <ion-icon slot="start" name="trash-outline"></ion-icon>
                        {{'onlieshop.cart.rimuovi' | translate}}
                      </ion-button>
                    </ion-col>
                  </ion-row>
                </ion-grid>
              </ion-item>
            }
          </ion-list>
        </ion-card-content>
      </ion-card>
    }
    @if (cart?.num_products > 0) {
      <ion-card>
        <ion-card-content>
          <ion-item lines="none">
            <ion-label slot="start" color="medium" class="ion-text-wrap">{{'onlineshop.cart.pricepr' | translate}}</ion-label>
            <ion-label slot="end">
              <b style="font-size: large;">{{cart?.price_order | currency:'EUR':'symbol'}}</b>
            </ion-label>
          </ion-item>
        </ion-card-content>
        <ion-card-content >
          <ion-item lines="full">
            <ion-label slot="start" color="medium" class="ion-text-wrap">{{'onlineshop.cart.priceord' | translate}}</ion-label>
            <ion-label slot="end">
              <b style="font-size: large;">{{cart?.price_order | currency:'EUR':'symbol'}}</b>
            </ion-label>
          </ion-item>
          @if (cart?.price_transport > 0) {
            <ion-item lines="full">
              <ion-label slot="start" color="medium" class="ion-text-wrap">{{'onlineshop.cart.pricetra' | translate}}</ion-label>
              <ion-label slot="end">
                <b style="font-size: large;">+ {{cart?.price_transport | currency:'EUR':'symbol'}}</b>
              </ion-label>
            </ion-item>
          }
          @if (cart?.price_coupon > 0) {
            <ion-item lines="full">
              <ion-label slot="start" color="medium" class="ion-text-wrap">{{'Coupon'}}</ion-label>
              <ion-label slot="end">
                <b style="font-size: large;">- {{cart?.price_coupon | currency:'EUR':'symbol'}}</b>
              </ion-label>
            </ion-item>
          }
          <ion-item lines="full">
            <ion-label slot="start" color="medium" class="ion-text-wrap">{{'onlineshop.lbl.ordini.price' | translate}}</ion-label>
            <ion-label slot="end">
              <b style="font-size: large;">{{cart?.price_payment | currency:'EUR':'symbol'}}</b>
            </ion-label>
          </ion-item>
        </ion-card-content>
      </ion-card>
    }
  </ion-content>
}
@if (cart?.num_products > 0 && buy == false) {
  <ion-footer class="footer">
    <ion-button (click)="acquista()" color="success">
      <ion-icon slot="start" name="bag-check-outline"></ion-icon>{{'onlineshop.cart.pay' | translate}}</ion-button>
    </ion-footer>
  }


  @if (buy == true) {
    <ion-content>
      <!-- Step indicator -->
      <div class="step-indicator">
        <div class="step-item" [class.active]="currentStep >= 1" [class.done]="currentStep > 1" (click)="currentStep > 1 ? goToStep(1) : null">
          <div class="step-dot"><span>1</span></div>
          <span class="step-label">{{'onlineshop.ft.indirizzoSped' | translate}}</span>
        </div>
        <div class="step-line" [class.done]="currentStep > 1"></div>
        <div class="step-item" [class.active]="currentStep >= 2" [class.done]="currentStep > 2" (click)="currentStep > 2 ? goToStep(2) : null">
          <div class="step-dot"><span>2</span></div>
          <span class="step-label">{{'onlineshop.cart.log' | translate}}</span>
        </div>
        <div class="step-line" [class.done]="currentStep > 2"></div>
        <div class="step-item" [class.active]="currentStep >= 3">
          <div class="step-dot"><span>3</span></div>
          <span class="step-label">{{'onlineshop.cart.riep' | translate}}</span>
        </div>
      </div>
      <!-- STEP 1: Spedizione -->
      @if (currentStep === 1) {
        <div class="ion-padding">
          <h3>{{'onlineshop.cart.dataadd' | translate}}</h3>
          <p>{{'onlineshop.cart.datacont' | translate}}</p>
          <div class="method-buttons">
            @for (addr of delivery_address; track addr) {
              <div class="method-btn"
                [class.selected]="cur_address === addr" (click)="cur_address = addr">
                <ion-icon name="location-outline"></ion-icon>
                <span>{{ addr?.firstname }}<br>{{ addr?.city }} {{ addr?.postal_code }}</span>
                <ion-button class="card-del" fill="clear" size="small" color="danger"
                  (click)="$event.stopPropagation(); delAddress(addr)">
                  <ion-icon slot="icon-only" name="trash-outline"></ion-icon>
                </ion-button>
              </div>
            }
          </div>
          <div class="step-actions">
            <ion-button expand="block" color="primary" fill="outline" (click)="newAddress()"><ion-icon slot="start" name="add-outline"></ion-icon>{{'onlineshop.filters.new' | translate}}</ion-button>
            <ion-button expand="block" color="primary" fill="outline" (click)="updAddress(cur_address)"><ion-icon slot="start" name="pencil-outline"></ion-icon>{{'onlineshop.filters.upd' | translate}}</ion-button>
            <ion-button expand="block" color="primary" [disabled]="!cur_address?.uda_id" (click)="nextStep()">{{'onlineshop.filters.next' | translate}}<ion-icon name="arrow-forward-outline" slot="end"></ion-icon></ion-button>
          </div>
        </div>
      }
      <!-- STEP 2: Logistica -->
      @if (currentStep === 2) {
        <div class="ion-padding">
          <h3>{{'onlineshop.cart.log' | translate}}</h3>
          <p>{{'onlineshop.cart.logfav' | translate}}</p>
          <div class="method-buttons">
            @for (op of lst_operatordelivery; track op) {
              <div class="method-btn"
                [class.selected]="tpeopc === op" (click)="tpeopc = op">
                @if (courierLogo(op) && !op._logoError) {
                  <img [src]="courierLogo(op)" [alt]="op?.opc_desc" class="courier-logo" (error)="op._logoError = true">
                }
                @if (!courierLogo(op) || op._logoError) {
                  <ion-icon name="cube-outline"></ion-icon>
                }
                <span>{{ op?.opc_desc }}</span>
              </div>
            }
          </div>
          <p class="method-label">{{'onlineshop.lbl.ordini.ord_typepay' | translate}}</p>
          <p>{{'onlineshop.cart.tpafav' | translate}}</p>
          <div class="method-buttons">
            @for (pt of lst_typepayment; track pt) {
              <div class="method-btn"
                [class.selected]="tpepay === pt" (click)="tpepay = pt">
                <ion-icon [name]="paymentIcon(pt)"></ion-icon>
                <span>{{ pt?.tpepay_desc }}</span>
              </div>
            }
          </div>
          <div class="step-actions">
            <ion-button expand="block" color="medium" fill="outline" (click)="prevStep()"><ion-icon name="arrow-back-outline" slot="start"></ion-icon>{{'onlineshop.filters.back' | translate}}</ion-button>
            <ion-button expand="block" color="primary" [disabled]="!tpeopc || !tpepay" (click)="nextStep()">{{'onlineshop.filters.next' | translate}}<ion-icon name="arrow-forward-outline" slot="end"></ion-icon></ion-button>
          </div>
        </div>
      }
      <!-- STEP 3: Riepilogo -->
      @if (currentStep === 3) {
        <div class="ion-padding">
          <h2>{{'onlineshop.cart.riep' | translate}}</h2>
          <h3>{{'onlineshop.ft.infoOrdine' | translate}}</h3>
          @for (detail of cartDetail; track detail; let first = $first) {
            <div>
              <div class="col-12 col-sm-6 col-md-3 flex flex-col grow basis-0 gap-1">
                <ion-label>{{detail.product.title}} x {{detail.product.qnt}}</ion-label>
                <ion-label>{{'onlineshop.filters.price' | translate}}: {{detail.product.price  | currency:'EUR':'symbol'}}</ion-label>
              </div>
            </div>
          }
          <br><h3>{{'onlineshop.cart.gen' | translate}}</h3>
          <div class="col-12 col-sm-6 col-md-3 flex flex-col grow basis-0 gap-1">
            <ion-label>{{'onlineshop.lbl.ordini.ord_typepay' | translate}}: {{tpepay.tpepay_desc}}</ion-label><br>
            <ion-label>{{'onlineshop.cart.log' | translate}}: {{tpeopc.opc_desc}}</ion-label><br>
            <ion-label>{{'onlineshop.ft.indirizzoSped' | translate}}: {{cur_address.address}}, {{cur_address.number}} - {{cur_address.city}}, {{cur_address.cap}} ({{cur_address.prov}})</ion-label>
          </div>
          <br><h3>{{'onlineshop.cart.tot' | translate}}</h3>
          <div class="col-12 col-sm-6 col-md-3 flex flex-col grow basis-0 gap-1">
            <ion-label>{{'onlineshop.cart.amount' | translate}}: {{cart?.num_products}}</ion-label><br>
            <ion-label>{{'onlineshop.ft.costoTrans' | translate}}: {{cart?.price_transport | currency:'EUR':'symbol'}}</ion-label>
          </div>
          <div class="checkout-amount-row">
            <span>{{'onlineshop.cart.final' | translate}}</span>
            <strong>{{cart?.price_payment | currency:'EUR':'symbol'}}</strong>
          </div>
          <ion-item lines="none">
            <ion-toggle [(ngModel)]="requestInvoice" (ionChange)="onToggleRichiediFattura()">Richiedi fattura</ion-toggle>
          </ion-item>
          @if (requestInvoice && datiFiscali) {
            <ion-item lines="none">
              <ion-note color="success" slot="start">
                Dati fattura pronti{{ datiFiscali.pIva ? ' (P.IVA ' + datiFiscali.pIva + ')' : (datiFiscali.codFiscale ? ' (CF ' + datiFiscali.codFiscale + ')' : '') }}
              </ion-note>
              <ion-button slot="end" size="small" fill="clear" (click)="modificaDatiFiscali()">
                <ion-icon name="create-outline" slot="start"></ion-icon>Modifica
              </ion-button>
            </ion-item>
          }
          <div class="step-actions">
            <ion-button expand="block" color="medium" fill="outline" (click)="prevStep()"><ion-icon name="arrow-back-outline" slot="start"></ion-icon>{{'onlineshop.filters.back' | translate}}</ion-button>
            <!-- PayPal: bottoni nativi renderizzati dall'SDK -->
            @if (isPaypal) {
              <div id="paypal-button-container" class="paypal-container"></div>
            }
            <!-- Contanti / Nexi: bottone classico -->
            @if (!isPaypal) {
              <ion-button expand="block" color="success" [disabled]="click_pay" (click)="pay()"><ion-icon name="checkmark-outline" slot="start"></ion-icon>{{'onlineshop.cart.payment' | translate}} · {{cart?.price_payment | currency:'EUR':'symbol'}}</ion-button>
            }
          </div>
        </div>
      }
    </ion-content>
  }

  <!-- Carrello vuoto -->
  @if (cart?.num_products <= 0 && buy == false) {
    <ion-content class="ion-padding">
      <h1 style="margin: auto; justify-content: center;">{{'onlineshop.cart.zero' | translate}}</h1>
      <ion-button  expand="full" (click)="goToPrd()" color="success">
        <ion-icon slot="start" name="arrow-back-outline"></ion-icon>{{'onlineshop.cart.toshop' | translate}}</ion-button>
      </ion-content>
    }
