<!--
  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>
    <ion-segment [(ngModel)]="selectedTab" (ionChange)="onTabChange()">
      <ion-segment-button value="dettaglio">
        <ion-label>Dettaglio</ion-label>
      </ion-segment-button>
      <ion-segment-button value="ordine">
        <ion-label>Ordine</ion-label>
      </ion-segment-button>
      <ion-segment-button value="cassa">
        <ion-label>Cassa</ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content>

  <!-- TAB DETTAGLIO -->
  @if (selectedTab === 'dettaglio' && booking) {
    <div>
      <ion-list>
        <ion-item>
          <ion-label>
            <p>Stato</p>
            <ion-badge [color]="getStatusColor(booking.bkb_status)">{{ getStatusLabel(booking.bkb_status) }}</ion-badge>
          </ion-label>
        </ion-item>
        <ion-item>
          <ion-label>
            <p>Data</p>
            <h3>{{ booking.bkb_date | date:'dd/MM/yyyy' }}@if (booking.bkb_date_to) {
              <span> &rarr; {{ booking.bkb_date_to | date:'dd/MM/yyyy' }}</span>
            }</h3>
          </ion-label>
        </ion-item>
        @if (booking.bkts_name || booking.bkb_start_time) {
          <ion-item>
            <ion-label>
              <p>Orario</p>
              <h3>{{ booking.bkts_name || (booking.bkb_start_time | slice:0:5) + ' - ' + (booking.bkb_end_time | slice:0:5) }}</h3>
            </ion-label>
          </ion-item>
        }
        @if (booking.bkr_name || hasResourceAliasCluster) {
          <ion-item>
            <ion-label>
              <p>Risorsa</p>
              <h3>{{ resourceDisplayName }}</h3>
              @if (hasResourceAliasCluster && booking.bkr_name) {
                <p class="resource-alias-detail">{{ booking.bkr_name }}</p>
              }
            </ion-label>
          </ion-item>
        }
        <!-- Ospiti: solo per non-BEACH -->
        @if (!isBeach) {
          <ion-item>
            <ion-label>
              <p>Ospiti</p>
              <h3>{{ booking.bkb_guests_count }}</h3>
            </ion-label>
          </ion-item>
        }
        <!-- Lettini / Sdraio / Sedie: solo BEACH -->
        @if (isBeach) {
          @if (booking.bkb_lettini) {
            <ion-item>
              <ion-label><p>Lettini</p><h3>{{ booking.bkb_lettini }}</h3></ion-label>
            </ion-item>
          }
          @if (booking.bkb_sdraio) {
            <ion-item>
              <ion-label><p>Sdraio</p><h3>{{ booking.bkb_sdraio }}</h3></ion-label>
            </ion-item>
          }
          @if (booking.bkb_sedie) {
            <ion-item>
              <ion-label><p>Sedie</p><h3>{{ booking.bkb_sedie }}</h3></ion-label>
            </ion-item>
          }
        }
        @if (booking.bkb_notes) {
          <ion-item>
            <ion-label class="ion-text-wrap">
              <p>Note</p>
              <h3>{{ booking.bkb_notes }}</h3>
            </ion-label>
          </ion-item>
        }
      </ion-list>
      <div class="ion-padding">
        <ion-label>Cambia stato</ion-label>
        <ion-row>
          @if (booking.bkb_status === 'PENDING') {
            <ion-col size="6">
              <ion-button expand="block" color="success" (click)="cambiaStato('CONFIRMED')">Conferma</ion-button>
            </ion-col>
          }
          @if (booking.bkb_status === 'CONFIRMED') {
            <ion-col size="6">
              <ion-button expand="block" color="medium" (click)="cambiaStato('COMPLETED')">Completa</ion-button>
            </ion-col>
          }
          @if (booking.bkb_status !== 'CANCELLED' && booking.bkb_status !== 'COMPLETED') {
            <ion-col size="6">
              <ion-button expand="block" color="danger" (click)="cambiaStato('CANCELLED')">Annulla</ion-button>
            </ion-col>
          }
        </ion-row>
      </div>
      <!-- Recensione (cliente loggato, prenotazione COMPLETED) -->
      @if (booking.bkb_status === 'COMPLETED') {
        <div class="ion-padding">
          <app-review-cta source="PRENOTAZIONE" [sourceId]="bkb_id" prompt="Prenotazione completata: lascia una recensione verificata all'impresa."></app-review-cta>
        </div>
      }
    </div>
  }

  <!-- TAB ORDINE -->
  @if (selectedTab === 'ordine') {
    <div class="ordine-tab">
      <!-- Catalogo menu con categorie richiudibili -->
      @if (menuCategories.length > 0) {
        @for (cat of menuCategories; track cat) {
          @if ((menuItemsByCategory[cat.bkmc_id]?.length ?? 0) > 0) {
            <div>
              <!-- Header categoria cliccabile -->
              <div class="menu-cat-header" (click)="toggleCategory(cat.bkmc_id)">
                <span>{{ cat.bkmc_name }}</span>
                <ion-icon [name]="collapsedCategories[cat.bkmc_id] ? 'chevron-down-outline' : 'chevron-up-outline'"></ion-icon>
              </div>
              <!-- Items categoria -->
              @if (!collapsedCategories[cat.bkmc_id]) {
                <div>
                  <ion-list>
                    @for (item of menuItemsByCategory[cat.bkmc_id]; track item) {
                      <ion-item class="menu-item-row">
                        <!-- Immagine -->
                        <div slot="start" class="menu-item-img-wrap">
                          @if (item.bkmi_image_url) {
                            <img [src]="item.bkmi_image_url" [alt]="item.bkmi_name" class="menu-item-img">
                          }
                          @if (!item.bkmi_image_url) {
                            <div class="menu-item-img-placeholder">
                              <ion-icon name="image-outline"></ion-icon>
                            </div>
                          }
                        </div>
                        <ion-label>
                          <h3>{{ item.bkmi_name }}</h3>
                          @if (item.bkmi_description) {
                            <p class="menu-item-desc">{{ item.bkmi_description }}</p>
                          }
                          <p class="item-price">€ {{ item.bkmi_price | number:'1.2-2' }}</p>
                        </ion-label>
                        <div slot="end" class="qty-controls">
                          <ion-button fill="clear" size="small" (click)="item.selectedQuantity = item.selectedQuantity! > 1 ? item.selectedQuantity! - 1 : 1">
                            <ion-icon name="remove-outline"></ion-icon>
                          </ion-button>
                          <span class="qty-num">{{ item.selectedQuantity || 1 }}</span>
                          <ion-button fill="clear" size="small" (click)="item.selectedQuantity = (item.selectedQuantity || 1) + 1">
                            <ion-icon name="add-outline"></ion-icon>
                          </ion-button>
                          <ion-button fill="clear" size="small" color="primary" (click)="addToCart(item)">
                            <ion-icon name="cart-outline"></ion-icon>
                          </ion-button>
                        </div>
                      </ion-item>
                    }
                  </ion-list>
                </div>
              }
            </div>
          }
        }
      }
      @if (menuCategories.length === 0) {
        <div class="ion-text-center ion-padding">
          <p>Nessuna voce menu disponibile</p>
        </div>
      }
      <!-- FAB bar -->
      <div class="ordine-fab-bar">
        <!-- Storico ordini (articoli già inviati) -->
        @if (orderedItems.length > 0) {
          <div class="ordine-fab-btn" (click)="showHistoryModal = true">
            <ion-icon name="receipt-outline"></ion-icon>
            <span class="ordine-fab-badge">{{ orderedItems.length }}</span>
          </div>
        }
        <div style="flex:1"></div>
        <!-- Carrello (articoli in stato CART) -->
        @if (cartItems.length > 0) {
          <div class="ordine-fab-btn cart" (click)="showCartModal = true">
            <ion-icon name="cart-outline"></ion-icon>
            <span class="ordine-fab-badge danger">{{ cartItems.length }}</span>
          </div>
        }
      </div>
    </div>
  }

  <!-- MODAL CARRELLO -->
  <ion-modal [isOpen]="showCartModal" (didDismiss)="showCartModal = false" [breakpoints]="[0, 0.6, 1]" [initialBreakpoint]="0.6">
    <ng-template>
      <ion-header>
        <ion-toolbar>
          <ion-title>Carrello <ion-badge color="primary">{{ cartItems.length }}</ion-badge></ion-title>
          <ion-buttons slot="end">
            <ion-button (click)="showCartModal = false">Chiudi</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          @for (item of cartItems; track item) {
            <ion-item>
              <ion-label>
                <h3>{{ item.bkmi_name }}</h3>
                <p>{{ item.bkmc_name }}</p>
              </ion-label>
              <div slot="end" class="cart-item-end">
                <span class="qty-label">x{{ item.bkbi_quantity }}</span>
                <strong>€ {{ item.bkbi_total_price | number:'1.2-2' }}</strong>
                <ion-button fill="clear" size="small" color="danger" (click)="removeFromCart(item)">
                  <ion-icon name="trash-outline"></ion-icon>
                </ion-button>
              </div>
            </ion-item>
          }
          <ion-item lines="none">
            <ion-label><strong>Totale</strong></ion-label>
            <ion-note slot="end" color="success"><strong>€ {{ totaleCarrello | number:'1.2-2' }}</strong></ion-note>
          </ion-item>
        </ion-list>
        <div class="ion-padding">
          <ion-button expand="block" color="success" (click)="saveOrder()">
            <ion-icon name="checkmark-outline" slot="start"></ion-icon>
            Invia ordine
          </ion-button>
        </div>
      </ion-content>
    </ng-template>
  </ion-modal>

  <!-- MODAL STORICO ORDINI -->
  <ion-modal [isOpen]="showHistoryModal" (didDismiss)="showHistoryModal = false" [breakpoints]="[0, 0.6, 1]" [initialBreakpoint]="0.6">
    <ng-template>
      <ion-header>
        <ion-toolbar>
          <ion-title>Storico ordini</ion-title>
          <ion-buttons slot="end">
            <ion-button (click)="showHistoryModal = false">Chiudi</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          @for (item of orderedItems; track item) {
            <ion-item>
              <ion-label>
                <h3>{{ item.bkmi_name }}</h3>
                <p>{{ item.bkmc_name }}</p>
              </ion-label>
              <div slot="end" class="cart-item-end">
                <span class="qty-label">x{{ item.bkbi_quantity }}</span>
                <strong>€ {{ item.bkbi_total_price | number:'1.2-2' }}</strong>
                <ion-badge [color]="getItemStatusColor(item.bkbi_notes)">{{ getItemStatusLabel(item.bkbi_notes) }}</ion-badge>
              </div>
            </ion-item>
          }
          <ion-item lines="none">
            <ion-label><strong>Totale ordinato</strong></ion-label>
            <ion-note slot="end"><strong>€ {{ totaleOrdine | number:'1.2-2' }}</strong></ion-note>
          </ion-item>
        </ion-list>
      </ion-content>
    </ng-template>
  </ion-modal>

  <!-- TAB CASSA -->
  @if (selectedTab === 'cassa') {
    <div>
      <!-- Prenotazione: solo se c'è una parte FISSA della prenotazione (prezzoBase),
      cioè se bkb_total_amount > totalMenuItems. Per i ristoranti senza prezzo fisso
      (bkb_total_amount = somma items) la sezione è nascosta. -->
      @if (prezzoBase > 0 && residuoBooking > 0) {
        <div class="cassa-section-title">Prenotazione da pagare</div>
        <ion-list>
          <ion-item lines="none">
            <ion-label>Totale</ion-label>
            <ion-note slot="end">€ {{ prezzoBase | number:'1.2-2' }}</ion-note>
          </ion-item>
          @if (pagatoBooking > 0) {
            <ion-item lines="none">
              <ion-label color="medium">Già pagato</ion-label>
              <ion-note slot="end" color="success">- € {{ pagatoBooking | number:'1.2-2' }}</ion-note>
            </ion-item>
          }
          <ion-item lines="none">
            <ion-label><strong>Residuo</strong></ion-label>
            <ion-note slot="end" color="danger"><strong>€ {{ residuoBooking | number:'1.2-2' }}</strong></ion-note>
          </ion-item>
        </ion-list>
        <div class="ion-padding-horizontal ion-padding-bottom">
          <ion-button expand="block" size="large" color="success" (click)="openPaymentModal('BOOKING')">
            <ion-icon name="card-outline" slot="start"></ion-icon>
            Paga · €&nbsp;{{ residuoBooking | number:'1.2-2' }}
          </ion-button>
        </div>
      }
      @if (prezzoBase > 0 && residuoBooking === 0) {
        <ion-item lines="none" class="ion-margin-top">
          <ion-icon name="checkmark-circle-outline" slot="start" color="success"></ion-icon>
          <ion-label color="success">Prenotazione saldata</ion-label>
        </ion-item>
      }
      <!-- Cassa Ordini: visibile se ci sono voci (incluse CART), come fa il portale web -->
      @if (totalMenuItems > 0) {
        <div class="cassa-section-title cassa-orders-header">
          <span>Cassa Ordini</span>
          @if (residuoOrder > 0) {
            <ion-button size="small" color="success" (click)="openPaymentModal('ORDER')">
              <ion-icon name="card-outline" slot="start"></ion-icon>
              Paga
            </ion-button>
          }
          @if (residuoOrder === 0 && pagatoOrder > 0) {
            <ion-badge color="success">Saldato</ion-badge>
          }
        </div>
        <ion-list class="cassa-orders-list">
          <!-- Voci non pagate -->
          @for (item of unpaidOrderItems; track item.bkbi_id) {
            <ion-item lines="inset">
              <ion-label>
                <h3>{{ item.bkmi_name }}</h3>
                @if (item.bkmc_name) {
                  <p>{{ item.bkmc_name }}</p>
                }
              </ion-label>
              <div slot="end" class="ion-text-end">
                <p class="qty-label">x{{ item.bkbi_quantity }}</p>
                <p><strong>€ {{ item.bkbi_total_price | number:'1.2-2' }}</strong></p>
              </div>
            </ion-item>
          }
          <!-- Voci già pagate (sbiadite, come fa il web) -->
          @for (item of paidOrderItems; track item.bkbi_id) {
            <ion-item lines="inset" class="paid-row">
              <ion-icon slot="start" name="checkmark-circle-outline" color="success"></ion-icon>
              <ion-label>
                <h3>{{ item.bkmi_name }}</h3>
                @if (item.bkmc_name) {
                  <p>{{ item.bkmc_name }}</p>
                }
              </ion-label>
              <div slot="end" class="ion-text-end">
                <p class="qty-label">x{{ item.bkbi_quantity }}</p>
                <p><s>€ {{ item.bkbi_total_price | number:'1.2-2' }}</s></p>
              </div>
            </ion-item>
          }
          <!-- Totale -->
          <ion-item lines="none">
            <ion-label>Totale ordine</ion-label>
            <ion-note slot="end"><strong>€ {{ totalMenuItems | number:'1.2-2' }}</strong></ion-note>
          </ion-item>
          <!-- Residuo (solo se > 0) -->
          @if (residuoOrder > 0) {
            <ion-item lines="none">
              <ion-label><strong>Residuo</strong></ion-label>
              <ion-note slot="end" color="danger"><strong>€ {{ residuoOrder | number:'1.2-2' }}</strong></ion-note>
            </ion-item>
          }
        </ion-list>
      }
      <!-- Storico pagamenti (collassabile) -->
      @if (payments.length > 0) {
        <div class="cassa-section-title storico-header" (click)="showPaymentHistory = !showPaymentHistory">
          Storico pagamenti
          <ion-icon [name]="showPaymentHistory ? 'chevron-up-outline' : 'chevron-down-outline'"></ion-icon>
        </div>
      }
      @if (showPaymentHistory) {
        <ion-list>
          @for (p of payments; track p) {
            <ion-item>
              <ion-label>
                <h3>{{ getPaymentMethodLabel(p.bkp_method) }} — {{ p.bkp_type === 'BOOKING' ? 'Prenotazione' : 'Ordine' }}</h3>
                <p>{{ p.bkp_date | date:'dd/MM/yyyy' }}</p>
                @if (getPaymentItemsSummary(p.bkp_notes)) {
                  <p class="payment-items-summary">{{ getPaymentItemsSummary(p.bkp_notes) }}</p>
                }
                @if (getPaymentVisibleNotes(p.bkp_notes)) {
                  <p>{{ getPaymentVisibleNotes(p.bkp_notes) }}</p>
                }
              </ion-label>
              <ion-note slot="end">€ {{ p.bkp_amount | number:'1.2-2' }}</ion-note>
            </ion-item>
          }
        </ion-list>
      }
    </div>
  }

</ion-content>

<!-- DIALOG 1 — REGISTRA PAGAMENTO (selezione items + importo + note) -->
<ion-modal [isOpen]="showPaymentModal" (didDismiss)="closePaymentModal()">
  <ng-template>
    <ion-header>
      <ion-toolbar>
        <ion-title>{{ paymentForm.bkp_type === 'ORDER' ? 'Paga ordini' : 'Paga prenotazione' }}</ion-title>
        <ion-buttons slot="end">
          <ion-button (click)="closePaymentModal()">Chiudi</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">

      <!-- Selezione articoli (solo ORDER) -->
      @if (paymentForm.bkp_type === 'ORDER' && unpaidOrderItems.length > 0) {
        <div class="cassa-section-title">Voci da pagare</div>
        <ion-list>
          @for (item of unpaidOrderItems; track item.bkbi_id; let i = $index) {
            <ion-item>
              <ion-checkbox slot="start" [(ngModel)]="paymentItemSelected[i]" (ionChange)="onPaymentItemToggle()"></ion-checkbox>
              <ion-label>
                <h3>{{ item.bkmi_name }}</h3>
              </ion-label>
              <div slot="end" class="qty-controls">
                <ion-button fill="clear" size="small"
                  [disabled]="!paymentItemSelected[i]"
                  (click)="onPaymentItemQtyChange(i, paymentItemQty[i] - 1)">
                  <ion-icon name="remove-outline"></ion-icon>
                </ion-button>
                <span class="qty-num">{{ paymentItemQty[i] }}</span>
                <ion-button fill="clear" size="small"
                  [disabled]="!paymentItemSelected[i] || paymentItemQty[i] >= getRemainingQty(item)"
                  (click)="onPaymentItemQtyChange(i, paymentItemQty[i] + 1)">
                  <ion-icon name="add-outline"></ion-icon>
                </ion-button>
                <span class="item-price" style="min-width:52px;text-align:right;font-size:13px">
                  € {{ (item.bkbi_unit_price * paymentItemQty[i]) | number:'1.2-2' }}
                </span>
              </div>
            </ion-item>
          }
        </ion-list>
      }

      <ion-list>
        <ion-item>
          <ion-label position="stacked">Importo (€)</ion-label>
          <ion-input type="number" [(ngModel)]="paymentForm.bkp_amount" placeholder="0.00"></ion-input>
        </ion-item>
        <ion-item>
          <ion-label position="stacked">Note</ion-label>
          <ion-input [(ngModel)]="paymentForm.bkp_notes" placeholder="Facoltativo"></ion-input>
        </ion-item>
        @if (puoFatturare) {
          <ion-item>
            <ion-toggle [(ngModel)]="requestInvoice" (ionChange)="onToggleRichiediFattura()">Richiedi fattura</ion-toggle>
          </ion-item>
        } @else {
          <ion-item lines="none">
            <ion-note color="medium">
              <ion-icon name="information-circle-outline"></ion-icon>
              La fattura può essere richiesta solo saldando l'intero importo.
            </ion-note>
          </ion-item>
        }
        @if (puoFatturare && requestInvoice && datiFiscali) {
          <ion-item lines="none">
            <ion-note slot="start" color="success">
              <ion-icon name="checkmark-circle-outline"></ion-icon>
              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>
        }
      </ion-list>
      <div class="ion-padding">
        <ion-button expand="block" color="success" (click)="procediAlPagamento()">
          <ion-icon name="card-outline" slot="start"></ion-icon>
          Procedi
        </ion-button>
      </div>
    </ion-content>
  </ng-template>
</ion-modal>

<!-- DIALOG 2 — CHECKOUT (CASH / NEXI / PAYPAL) — replica web -->
<ion-modal [isOpen]="showCheckoutModal" (didDismiss)="closeCheckoutModal()">
  <ng-template>
    <ion-header>
      <ion-toolbar>
        <ion-title>Pagamento</ion-title>
        <ion-buttons slot="end">
          <ion-button (click)="closeCheckoutModal()">Chiudi</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">

      <!-- Riepilogo importo -->
      <div class="checkout-amount-row">
        <span>Importo da pagare</span>
        <strong>€ {{ checkoutAmount | number:'1.2-2' }}</strong>
      </div>

      <!-- Selezione metodo di pagamento -->
      <p class="method-label">Metodo di pagamento</p>
      <div class="method-buttons">
        @for (pt of filteredPaymentTypes; track pt) {
          <div class="method-btn"
            [class.selected]="selectedTypeCode === pt.pt_code"
            (click)="selectedTypeCode = pt.pt_code; onTypeChange()">
            <ion-icon [name]="pt.pt_code === 'CASH' ? 'cash-outline' : pt.pt_code === 'NEXI' ? 'card-outline' : 'logo-paypal'"></ion-icon>
            <span>{{ pt.pt_name }}</span>
          </div>
        }
        <!-- Riscossione NFC: solo manager con config SUMUP/NFC attiva -->
        @if (canUseNfc) {
          <div class="method-btn method-btn--nfc"
            [class.selected]="selectedTypeCode === 'NFC'"
            (click)="selectedTypeCode = 'NFC'; view_paypal = false; click_pay = false">
            <ion-icon name="radio-outline"></ion-icon>
            <span>NFC</span>
          </div>
        }
      </div>

      <!-- Selezione configurazione (quando >1 per provider) -->
      @if (configsForSelectedType.length > 1) {
        <p class="method-label">Configurazione</p>
        <ion-list>
          <ion-radio-group [(ngModel)]="selectedPccId" (ionChange)="onConfigChange()">
            @for (c of configsForSelectedType; track c) {
              <ion-item>
                <ion-radio slot="start" [value]="c.pcc_id"></ion-radio>
                <ion-label>
                  <h3>{{ c.pcc_alias }}</h3>
                  <p>{{ c.pcc_environment }}</p>
                </ion-label>
              </ion-item>
            }
          </ion-radio-group>
        </ion-list>
      }

      <!-- Bottoni PayPal (renderizzati dal SDK) -->
      @if (view_paypal) {
        <div id="paypal-button-container" class="paypal-container"></div>
      }

      <!-- Bottone "Paga" per CASH/NEXI/NFC -->
      @if (!view_paypal && selectedTypeCode) {
        <div class="ion-padding-top">
          <ion-button expand="block" [color]="selectedTypeCode === 'NFC' ? 'tertiary' : 'success'" [disabled]="click_pay" (click)="doPayment()">
            <ion-icon [name]="selectedTypeCode === 'CASH' ? 'cash-outline' : selectedTypeCode === 'NFC' ? 'radio-outline' : 'card-outline'" slot="start"></ion-icon>
            {{ selectedTypeCode === 'NFC' ? 'Riscuoti con NFC' : 'Paga' }} · €&nbsp;{{ checkoutAmount | number:'1.2-2' }}
          </ion-button>
        </div>
      }

    </ion-content>
  </ng-template>
</ion-modal>

<!-- ===========================================================
MODALE RISCOSSIONE NFC (manager) — Avvicina la carta…
=========================================================== -->
<ion-modal [isOpen]="showNfcModal" (didDismiss)="closeNfcModal()" [backdropDismiss]="false">
  <ng-template>
    <ion-content class="ion-padding nfc-modal-content">
      <div class="nfc-modal-wrap" [attr.data-status]="nfcStatus">

        <!-- Cerchio animato pulsante (waiting) o icona stato -->
        <div class="nfc-circle">
          @if (nfcStatus === 'waiting') {
            <div class="nfc-ring nfc-ring-1"></div>
          }
          @if (nfcStatus === 'waiting') {
            <div class="nfc-ring nfc-ring-2"></div>
          }
          @if (nfcStatus === 'waiting') {
            <div class="nfc-ring nfc-ring-3"></div>
          }
          <div class="nfc-icon-inner">
            @if (nfcStatus === 'waiting') {
              <ion-icon name="wifi-outline"></ion-icon>
            }
            @if (nfcStatus === 'detected' || nfcStatus === 'saving') {
              <ion-icon name="hourglass-outline"></ion-icon>
            }
            @if (nfcStatus === 'done') {
              <ion-icon name="checkmark-circle-outline"></ion-icon>
            }
            @if (nfcStatus === 'error' || nfcStatus === 'unsupported') {
              <ion-icon name="alert-circle-outline"></ion-icon>
            }
          </div>
        </div>

        <!-- Titolo + importo -->
        <h2 class="nfc-title">
          @if (nfcStatus === 'waiting') {
            Avvicina la carta
          }
          @if (nfcStatus === 'detected') {
            Carta rilevata
          }
          @if (nfcStatus === 'saving') {
            Registrazione…
          }
          @if (nfcStatus === 'done') {
            Riscosso!
          }
          @if (nfcStatus === 'error') {
            Errore
          }
          @if (nfcStatus === 'unsupported') {
            Non supportato
          }
        </h2>
        <p class="nfc-amount">€&nbsp;{{ checkoutAmount | number:'1.2-2' }}</p>
        <p class="nfc-message">{{ nfcMessage }}</p>

        <!-- Azioni -->
        <div class="nfc-actions">
          @if (nfcStatus === 'waiting') {
            <ion-button expand="block" color="medium" fill="outline" (click)="cancelNfc()">
              Annulla
            </ion-button>
          }
          @if (nfcStatus === 'error' || nfcStatus === 'unsupported') {
            <ion-button expand="block" color="medium" (click)="closeNfcModal()">
              Chiudi
            </ion-button>
          }
        </div>
      </div>
    </ion-content>
  </ng-template>
</ion-modal>
