<!--
  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-grid class="compact-grid">
  @for (c of campi; track c; let i = $index) {
    <ion-row>
      <!-- Colonna Etichetta -->
      <ion-col sizeMd="3" sizeSm="4" sizeXs="12" class="compact-col">
        <ion-item lines="none" class="compact-item">
          <ion-label>{{ c?.label }}</ion-label>
          @if (c?.required && tipo_visualizzazione == 'form_file') {
            <span class="required-asterisk">*</span>
          }
        </ion-item>
      </ion-col>
      <!-- Colonna Input -->
      <ion-col sizeMd="9" sizeSm="8" sizeXs="12" class="compact-col">
        @switch (c?.type) { @case (0) {
          <!-- NUMERO -->
          @if (!mode_search) {
            <ion-item class="compact-item">
              <app-suggestion-simple-input [suggestions]="getSuggestion(c)" [isDisabled]="c.disabled" [hideAllWhenEmpty]="true" [valueSel]="c.value" [type]="'number'" [tabindex]="lst_tabindex[i]" (valueSelected)="onSuggestionSimpleSelected($event, c)" #field_suggsimple>
              </app-suggestion-simple-input>
            </ion-item>
          }
          @if (mode_search) {
            <ion-row>
              <ion-col sizeLg="12" sizeMd="12" sizeSm="12" sizeXs="12" class="compact-col">
                <ion-item class="compact-item">
                  <ion-input [(ngModel)]="c.value" type="number" [disabled]="c.disabled"></ion-input>
                </ion-item>
              </ion-col>
            </ion-row>
          }
          } @case (1) {
          <!-- TESTO -->
          <ion-item class="compact-item">
            <app-suggestion-simple-input [suggestions]="getSuggestion(c)" [isDisabled]="c.disabled" [hideAllWhenEmpty]="true" [valueSel]="c.value" [tabindex]="lst_tabindex[i]" (valueSelected)="onSuggestionSimpleSelected($event, c)" #field_suggsimple>
            </app-suggestion-simple-input>
          </ion-item>
          } @case (2) {
          <!-- DATE -->
          @if (!mode_search) {
            <ion-item class="compact-item">
              <app-calendar-component (data_out)="onDateChange($event, c)" [data_in]="datePipe.transform(c.value, 'dd/MM/yyyy')" [type]="'date'" [disabled]="c.disabled" [tabindex]="lst_tabindex[i]" [suggestions]="getSuggestion(c)" #field_calendar></app-calendar-component>
            </ion-item>
          }
          @if (mode_search) {
            <ion-row>
              <ion-col sizeLg="6" sizeMd="12" sizeSm="12" sizeXs="12" class="compact-col">
                <ion-item class="compact-item">
                  <app-calendar-component (data_out)="onDateChangeDa($event, c)" [data_in]="datePipe.transform(c.value_da, 'dd/MM/yyyy')" [type]="'date'" [disabled]="c.disabled"></app-calendar-component>
                </ion-item>
              </ion-col>
              <ion-col sizeLg="6" sizeMd="12" sizeSm="12" sizeXs="12" class="compact-col">
                <ion-item class="compact-item">
                  <app-calendar-component (data_out)="onDateChangeA($event, c)" [data_in]="datePipe.transform(c.value_a, 'dd/MM/yyyy')" [type]="'date'" [disabled]="c.disabled"></app-calendar-component>
                </ion-item>
              </ion-col>
            </ion-row>
          }
          } @case (3) {
          <!-- COMBO -->
          <ion-item class="compact-item">
            <app-suggestion-simple-input [suggestions]="getSuggestion(c)" [isDisabled]="c.disabled" [valueSel]="getValueCombo(c)" [tabindex]="lst_tabindex[i]" [type]="'combo'" (valueSelected)="onSuggestionSimpleSelected($event, c)" #field_suggsimple>
            </app-suggestion-simple-input>
          </ion-item>
          } @case (15) {
          <!-- ATTIVITÀ (rapportino dipendente) -->
          @if (initActivityValue(c)) {
            <div class="attivita-card" [attr.data-view]="view ? 'readonly' : 'edit'">
              <!-- Readonly view -->
              @if (view) {
                <div class="att-readonly">
                  <div class="att-meta">
                    <span class="att-chip" [attr.data-on]="c.value.presente ? 'yes' : 'no'">
                      <ion-icon [name]="c.value.presente ? 'checkmark-circle' : 'close-circle'"></ion-icon>
                      {{ c.value.presente ? 'Presente' : 'Assente' }}
                    </span>
                    <span class="att-tot">
                      <ion-icon name="time-outline"></ion-icon>
                      <strong>{{ getTotalOreAttivita(c) | number:'1.1-1' }}</strong> h totali
                    </span>
                  </div>
                  @if (c.value.attivita?.length) {
                    <div class="att-rows">
                      @for (a of c.value.attivita; track a) {
                        <div class="att-row att-row--ro">
                          <span class="att-row-desc">{{ a.descrizione || '—' }}</span>
                          <span class="att-row-dur">{{ a.durata | number:'1.1-1' }} h</span>
                        </div>
                      }
                    </div>
                  }
                  @if (c.value.note) {
                    <div class="att-note">
                      <span class="att-note-label">Note</span>
                      <p>{{ c.value.note }}</p>
                    </div>
                  }
                </div>
              }
              <!-- Edit view -->
              @if (!view) {
                <div class="att-edit">
                  <div class="att-head">
                    <label class="att-presente">
                      <input type="checkbox" [(ngModel)]="c.value.presente" (ngModelChange)="onActivityValueChange()" [disabled]="c.disabled" />
                      <span>Presente</span>
                    </label>
                    <span class="att-tot">
                      <ion-icon name="time-outline"></ion-icon>
                      Ore totali: <strong>{{ getTotalOreAttivita(c) | number:'1.1-1' }}</strong> h
                    </span>
                  </div>
                  <div class="att-rows">
                    @for (a of c.value.attivita; track a; let ri = $index) {
                      <div class="att-row">
                        <input
                          class="att-row-input att-row-desc"
                          type="text"
                          placeholder="Descrizione attività"
                          [(ngModel)]="a.descrizione"
                          (ngModelChange)="onActivityValueChange()"
                          [disabled]="c.disabled" />
                          <input
                            class="att-row-input att-row-dur"
                            type="number"
                            inputmode="decimal"
                            min="0"
                            max="24"
                            step="0.5"
                            placeholder="Ore"
                            [(ngModel)]="a.durata"
                            (ngModelChange)="onActivityValueChange()"
                            [disabled]="c.disabled" />
                            @if (!c.disabled) {
                              <button
                                type="button"
                                class="att-row-del"
                                (click)="removeActivityRow(c, ri)"
                                aria-label="Rimuovi attività">
                                <ion-icon name="trash-outline"></ion-icon>
                              </button>
                            }
                          </div>
                        }
                      </div>
                      @if (!c.disabled) {
                        <button
                          type="button"
                          class="att-add"
                          (click)="addActivityRow(c)">
                          <ion-icon name="add-circle-outline"></ion-icon>
                          <span>Aggiungi attività</span>
                        </button>
                      }
                      <div class="att-note-edit">
                        <label class="att-note-label">Note</label>
                        <textarea
                          class="att-note-input"
                          rows="2"
                          placeholder="Annotazioni sulla giornata…"
                          [(ngModel)]="c.value.note"
                          (ngModelChange)="onActivityValueChange()"
                        [disabled]="c.disabled"></textarea>
                      </div>
                    </div>
                  }
                </div>
              }
              } @default {
              <ion-item class="compact-item">
                <app-suggestion-simple-input [suggestions]="getSuggestion(c)" [isDisabled]="c.disabled" [hideAllWhenEmpty]="true" [valueSel]="c.value" [tabindex]="lst_tabindex[i]" (valueSelected)="onSuggestionSimpleSelected($event, c)" #field_suggsimple>
                </app-suggestion-simple-input>
              </ion-item>
              } }
            </ion-col>
          </ion-row>
        }
      </ion-grid>
