<!--
  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-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Tipi Servizio</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  @if (loading) {
    <div class="ion-text-center ion-padding">
      <ion-spinner name="bubbles"></ion-spinner>
    </div>
  }

  @if (!loading && serviceTypes.length === 0) {
    <div class="ion-padding ion-text-center" style="margin-top: 40px">
      <ion-icon name="pricetags-outline" style="font-size: 64px; color: var(--ion-color-medium)"></ion-icon>
      <p style="color: var(--ion-color-medium)">Nessun tipo di servizio</p>
    </div>
  }

  @if (serviceTypes.length > 0) {
    <ion-list>
      @for (st of serviceTypes; track st) {
        <ion-item-sliding>
          <ion-item button (click)="openEdit(st)">
            <div slot="start" style="width: 12px; height: 12px; border-radius: 50%" [style.background-color]="st.st_color || '#999'"></div>
            <ion-label>
              <h2>{{ st.st_name }}</h2>
              <p>
                <ion-badge color="light" style="font-size: 11px">{{ getModeLabel(st.st_mode) }}</ion-badge>
                · {{ st.st_duration_minutes }} min
                @if (st.category_name) {
                  <span> · {{ st.category_name }}</span>
                }
                @if (!st.st_active) {
                  <span style="color: var(--ion-color-danger)"> · Inattivo</span>
                }
              </p>
            </ion-label>
            <ion-icon name="chevron-forward-outline" slot="end" color="medium"></ion-icon>
          </ion-item>
          <ion-item-options side="end">
            <ion-item-option color="danger" (click)="confirmDelete(st)">
              <ion-icon name="trash-outline" slot="icon-only"></ion-icon>
            </ion-item-option>
          </ion-item-options>
        </ion-item-sliding>
      }
    </ion-list>
  }

  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button (click)="openNew()">
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>

<!-- Modal Form -->
<ion-modal [isOpen]="showFormModal">
  <ng-template>
    <ion-header>
      <ion-toolbar>
        <ion-title>{{ isNew ? 'Nuovo Tipo Servizio' : 'Modifica Tipo Servizio' }}</ion-title>
        <ion-buttons slot="end">
          <ion-button (click)="showFormModal = false">Chiudi</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <ion-list>
        <ion-item>
          <ion-input label="Nome *" labelPlacement="stacked" [(ngModel)]="formData.st_name" placeholder="Nome del servizio"></ion-input>
        </ion-item>
        <ion-item>
          <ion-textarea label="Descrizione" labelPlacement="stacked" [(ngModel)]="formData.st_description" placeholder="Descrizione..." [autoGrow]="true" rows="2"></ion-textarea>
        </ion-item>
        <ion-item>
          <ion-select label="Categoria" labelPlacement="stacked" [(ngModel)]="formData.st_category_id" interface="popover" placeholder="Nessuna categoria">
            <ion-select-option [value]="null">Nessuna categoria</ion-select-option>
            @for (cat of categories; track cat) {
              <ion-select-option [value]="cat.sc_id">{{ cat.sc_name }}</ion-select-option>
            }
          </ion-select>
          <ion-button slot="end" fill="clear" (click)="openNewCategory()" style="margin-top: 16px;">
            <ion-icon name="add-circle-outline" slot="icon-only"></ion-icon>
          </ion-button>
        </ion-item>
        <ion-item>
          <ion-select label="Modalità" labelPlacement="stacked" [(ngModel)]="formData.st_mode" interface="popover">
            @for (opt of modeOptions; track opt) {
              <ion-select-option [value]="opt.value">{{ opt.label }}</ion-select-option>
            }
          </ion-select>
        </ion-item>
        <ion-item>
          <ion-input label="Durata (minuti) *" labelPlacement="stacked" type="number" [(ngModel)]="formData.st_duration_minutes" [min]="1"></ion-input>
        </ion-item>
        <ion-item>
          <ion-input label="Colore" labelPlacement="stacked" type="color" [(ngModel)]="formData.st_color"></ion-input>
        </ion-item>
        <ion-item>
          <ion-input label="Ordine" labelPlacement="stacked" type="number" [(ngModel)]="formData.st_order" [min]="0"></ion-input>
        </ion-item>
        <ion-item>
          <ion-toggle [(ngModel)]="formData.st_requires_attachments">Richiede allegati</ion-toggle>
        </ion-item>
        <ion-item>
          <ion-toggle [(ngModel)]="formData.st_active">Attivo</ion-toggle>
        </ion-item>
      </ion-list>

      <ion-button expand="block" color="primary" (click)="save()" style="margin-top: 16px">
        <ion-icon name="save-outline" slot="start"></ion-icon>
        Salva
      </ion-button>
    </ion-content>
  </ng-template>
</ion-modal>

<!-- Modal Nuova Categoria -->
<ion-modal [isOpen]="showCategoryModal" [breakpoints]="[0, 0.35]" [initialBreakpoint]="0.35">
  <ng-template>
    <ion-header>
      <ion-toolbar>
        <ion-title>Nuova Categoria</ion-title>
        <ion-buttons slot="end">
          <ion-button (click)="showCategoryModal = false">Chiudi</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <ion-item>
        <ion-input label="Nome categoria *" labelPlacement="stacked" [(ngModel)]="newCategoryName" placeholder="Es. Taglio capelli" (keyup.enter)="saveNewCategory()"></ion-input>
      </ion-item>
      <ion-button expand="block" color="primary" (click)="saveNewCategory()" style="margin-top: 16px">
        <ion-icon name="add-outline" slot="start"></ion-icon>
        Crea Categoria
      </ion-button>
    </ion-content>
  </ng-template>
</ion-modal>
