<!--
  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-content class="sf-content">
  <div class="sf-wrap">
    <!-- Stato + flusso -->
    @if (s.sl_id > 0) {
      <div class="sf-statusbar">
        <ion-badge [color]="s.sl_stato === SOPR.ANNULLATO ? 'danger' : (s.sl_stato === SOPR.FATTURATO ? 'success' : (s.sl_stato === SOPR.APERTO ? 'warning' : 'primary'))">{{ statoLabel }}</ion-badge>
        @if (readonly) {
          <span class="sf-rfi">{{ isRfi ? 'RFI · sola lettura' : 'Sola lettura' }}</span>
        }
      </div>
    }

    <!-- Dati -->
    <div class="sf-card">
      <h3 class="sf-card-title">Dati sopralluogo</h3>

      <div class="sf-field">
        <label>Cantiere *</label>
        <ion-select [(ngModel)]="s.sl_ws_id" interface="popover" [disabled]="cantiereFisso || readonly" placeholder="Seleziona cantiere" class="sf-select">
          @for (c of cantieri; track c) {
            <ion-select-option [value]="c.ws_id">{{ c.ws_name }}</ion-select-option>
          }
        </ion-select>
      </div>

      <div class="sf-field">
        <label>Tipo intervento</label>
        <ion-select [(ngModel)]="s.sl_tpi_id" interface="popover" [disabled]="readonly" placeholder="Seleziona tipo" class="sf-select">
          @for (t of tipi; track t) {
            <ion-select-option [value]="t.tpi_id">{{ t.tpi_descrizione }}</ion-select-option>
          }
        </ion-select>
      </div>

      <div class="sf-field">
        <label>Protocollo</label>
        <input class="sf-input" type="text" [(ngModel)]="s.sl_protocollo" [disabled]="readonly" placeholder="Numero protocollo" />
      </div>

      <div class="sf-field">
        <label>Data apertura</label>
        @if (dateReady) {
          <ion-datetime-button datetime="slDate" class="sf-dt"></ion-datetime-button>
          <ion-modal [keepContentsMounted]="true">
            <ng-template>
              <ion-datetime id="slDate" presentation="date" [(ngModel)]="s.sl_data_apertura_sopralluogo" locale="it-IT" [firstDayOfWeek]="1" [disabled]="readonly"></ion-datetime>
            </ng-template>
          </ion-modal>
        }
      </div>

      <div class="sf-field">
        <label>Oggetto</label>
        <input class="sf-input" type="text" [(ngModel)]="s.sl_descrizione_oggetto" [disabled]="readonly" placeholder="Oggetto del sopralluogo" />
      </div>

      <div class="sf-field">
        <label>Costo preventivato (€)</label>
        <input class="sf-input" type="number" [(ngModel)]="s.sl_costo" [disabled]="readonly" placeholder="0,00" />
      </div>

      @if (s.sl_id > 0) {
        <div class="sf-field">
          <label>Costo effettivo (€)</label>
          <input class="sf-input" type="number" [(ngModel)]="s.sl_costo_effettivo" [disabled]="readonly" placeholder="0,00" />
        </div>
      }

      <div class="sf-field">
        <label>Descrizione</label>
        <textarea class="sf-input" rows="2" [(ngModel)]="s.sl_descrizione" [disabled]="readonly" placeholder="Descrizione"></textarea>
      </div>

      <div class="sf-field">
        <label>Note</label>
        <textarea class="sf-input" rows="2" [(ngModel)]="s.sl_note" [disabled]="readonly" placeholder="Note"></textarea>
      </div>
    </div>

    <!-- Lavagna (apre il modale, esattamente come il vecchio RFI) -->
    <div class="sf-card">
      <h3 class="sf-card-title">Lavagna</h3>
      <button type="button" class="sf-lavagna-btn" [class.is-filled]="!!s.sl_lavagna" (click)="openDrawingModal()">
        <span class="sf-lavagna-ic"><ion-icon [name]="s.sl_lavagna ? 'easel-outline' : 'brush-outline'"></ion-icon></span>
        <span class="sf-lavagna-text">
          <span class="sf-lavagna-title">{{ s.sl_lavagna ? (readonly ? 'Apri lavagna' : 'Modifica disegno') : 'Apri lavagna tecnica' }}</span>
          <span class="sf-lavagna-sub">{{ s.sl_lavagna ? 'Schema disponibile — tocca per aprire' : 'Disegna schemi, annotazioni o foto' }}</span>
        </span>
        <ion-icon name="chevron-forward" class="sf-lavagna-arrow"></ion-icon>
      </button>
    </div>

    <!-- Documenti -->
    @if (s.sl_id > 0) {
      <div class="sf-card">
        <div class="sf-card-head">
          <h3 class="sf-card-title">Documenti</h3>
          @if (!readonly) {
            <button class="sf-mini-btn" [disabled]="uploadingDoc" (click)="docInput.click()">
              <ion-icon [name]="uploadingDoc ? 'hourglass-outline' : 'cloud-upload-outline'"></ion-icon> {{ uploadingDoc ? 'Carico…' : 'Carica' }}
            </button>
          }
          <input #docInput type="file" accept="application/pdf" hidden (change)="onDocSelected($event)" />
        </div>
        @if (documenti.length === 0) {
          <div class="sf-hint">Nessun documento allegato.</div>
        }
        @for (d of documenti; track d) {
          <div class="sf-file" (click)="scaricaDoc(d)">
            <ion-icon class="sf-file-ic" name="document-attach-outline"></ion-icon>
            <div class="sf-file-info"><span class="nm">{{ docName(d) }}</span></div>
            <ion-icon class="sf-file-dl" name="download-outline"></ion-icon>
          </div>
        }
      </div>
    }

    <!-- Stato e flusso -->
    @if (canFlow) {
      <div class="sf-card">
        <h3 class="sf-card-title">Stato e flusso</h3>
        <p class="sf-flow-hint">{{ flowHint }}</p>
        <div class="sf-flow">
          @if (s.sl_stato === SOPR.APERTO) {
            <button class="flow-btn ok" (click)="convalida()"><ion-icon name="checkmark-circle-outline"></ion-icon> Convalida</button>
          }
          @if (s.sl_stato === SOPR.CONVALIDATO) {
            <button class="flow-btn ok" (click)="contabilizza()"><ion-icon name="calculator-outline"></ion-icon> Contabilizza</button>
          }
          @if (s.sl_stato === SOPR.CONTABILIZZATO) {
            <button class="flow-btn ok" (click)="fattura()"><ion-icon name="receipt-outline"></ion-icon> Fattura</button>
          }
          @if (s.sl_stato === SOPR.APERTO || s.sl_stato === SOPR.CONVALIDATO) {
            <button class="flow-btn ko" (click)="annulla()"><ion-icon name="ban-outline"></ion-icon> Annulla</button>
          }
          @if (s.sl_stato !== SOPR.APERTO) {
            <button class="flow-btn reopen" (click)="resetStato()"><ion-icon name="refresh-outline"></ion-icon> Riapri</button>
          }
        </div>
      </div>
    }
  </div>

  <!-- Action bar -->
  @if (!readonly) {
    <div class="sf-actionbar">
      <button class="ab-btn primary" [disabled]="saving" (click)="save()">
        <ion-icon name="save-outline"></ion-icon> {{ saving ? 'Salvataggio…' : 'Salva' }}
      </button>
    </div>
  }
</ion-content>
