@let vm = (model$ | async)!;
<form [formGroup]="struttureForm" class="grid grid-cols-12 gap-2 py-6">
  <div class="field mb-4 col-span-12 md:col-span-6">
    <label class="block text-surface-900 dark:text-surface-0 font-medium mb-2"
      >Nome
      <small
        *ngIf="struttureForm.controls.nome.invalid && vm.struttureFormSubmitted"
        class="text-error"
        >*Obbligatorio</small
      >
    </label>
    <input
      type="text"
      class="w-full"
      [formControl]="struttureForm.controls.nome"
      [ngClass]="{
        'ng-invalid ng-dirty':
          struttureForm.controls.nome.invalid && vm.struttureFormSubmitted,
      }"
      pInputText
      placeholder="Inserire nome"
    />
  </div>

  <div class="field mb-4 col-span-12 md:col-span-6">
    <label class="block text-surface-900 dark:text-surface-0 font-medium mb-2"
      >P. IVA
      <small
        *ngIf="
          struttureForm.controls.partitaIva.invalid && vm.struttureFormSubmitted
        "
        class="text-error"
        >*Obbligatorio</small
      >
    </label>
    <input
      type="text"
      class="w-full"
      [formControl]="struttureForm.controls.partitaIva"
      [ngClass]="{
        'ng-invalid ng-dirty':
          struttureForm.controls.partitaIva.invalid &&
          vm.struttureFormSubmitted,
      }"
      pInputText
      placeholder="Inserire P.IVA"
    />
  </div>

  <div class="field mb-4 col-span-12 md:col-span-6">
    <label
      class="block text-surface-900 dark:text-surface-0 font-medium mb-2"
      for="localita"
      >Struttura madre
    </label>
    <p-autoComplete
      formControlName="strutturaMadre"
      [suggestions]="vm.filteredStrutturaMadre"
      (completeMethod)="fetchStrutturaMadre($event, 1)"
      (onSelect)="state.set({ filteredStrutturaMadre: [] })"
      styleClass="w-full"
      inputStyleClass="w-full"
      placeholder="Nome della struttura madre"
      appendTo="body"
      minLength="3"
      delay="500"
      [forceSelection]="true"
      [showClear]="false"
      field="nome"
    >
      <ng-template let-struttura pTemplate="item">
        <div class="flex align-items-center">
          <fa-icon
            class="fs-16 mr-3 text-color-secondary"
            [icon]="faHospital"
          ></fa-icon>
          <div class="flex flex-col">
            <span
              >{{ struttura.nome
              }}{{
                struttura.partitaIva ? ' (' + struttura.partitaIva + ')' : ''
              }}</span
            >
            @if (struttura.codiceLuogo?.codiceStato) {
              <small class="text-sm text-color-secondary">
                {{
                  struttura.codiceLuogo?.codiceStato === 'ITA'
                    ? 'Comune'
                    : ('Stato estero' | titlecase)
                }}{{
                  struttura.codiceLuogo?.codiceStato === 'ITA'
                    ? ': Italia → ' +
                      struttura.codiceLuogo?.regione +
                      '
              → ' +
                      struttura.codiceLuogo?.provincia +
                      ' → ' +
                      struttura.codiceLuogo?.comune
                    : ''
                }}</small
              >
            }
          </div>
        </div>
      </ng-template>
    </p-autoComplete>
  </div>

  <div class="field mb-4 col-span-12 md:col-span-6">
    <label
      class="block text-surface-900 dark:text-surface-0 font-medium mb-2"
      for="citta"
      >Città
      <small
        *ngIf="
          struttureForm.controls.citta.invalid && vm.struttureFormSubmitted
        "
        class="text-error"
        >* città obbligatoria</small
      >
    </label>
    <p-autoComplete
      formControlName="citta"
      [suggestions]="vm.filteredCities"
      (completeMethod)="fetchCity($event, 1)"
      (onSelect)="state.set({ filteredCities: [] })"
      styleClass="w-full"
      inputStyleClass="w-full"
      [ngClass]="{
        'ng-invalid ng-dirty':
          struttureForm.controls.citta.invalid && vm.struttureFormSubmitted,
      }"
      placeholder="es. Roma"
      appendTo="body"
      minLength="3"
      delay="500"
      [forceSelection]="true"
      [showClear]="false"
      field="comune"
    >
      <ng-template let-struttura pTemplate="item">
        <div class="flex align-items-center">
          <fa-icon
            class="fs-16 mr-3 text-color-secondary"
            [icon]="struttura.codiceStato === 'ITA' ? faCity : faGlobeEurope"
          ></fa-icon>
          <div class="flex flex-col">
            <span
              >{{ struttura.comune
              }}{{
                struttura.codiceStato === 'ITA'
                  ? ' (' + struttura.siglaProvincia + ')'
                  : ''
              }}</span
            >
            <small class="text-sm text-color-secondary">
              {{
                struttura.codiceStato === 'ITA'
                  ? 'Comune'
                  : ('Stato estero' | titlecase)
              }}{{
                struttura.codiceStato === 'ITA'
                  ? ': Italia → ' +
                    struttura.regione +
                    '
              → ' +
                    struttura.provincia +
                    ' → ' +
                    struttura.comune
                  : ''
              }}</small
            >
          </div>
        </div>
      </ng-template>
    </p-autoComplete>
  </div>

  <!-- <div class="field mb-4 col-span-12 md:col-span-6">
    <label class="block text-surface-900 dark:text-surface-0 font-medium mb-2"
      >Indirizzo
      <small
        *ngIf="
          struttureForm.controls.indirizzo.invalid && vm.struttureFormSubmitted
        "
        class="text-error"
        >* <span> indirizzo obbligatorio</span></small
      >
    </label>
    <input
      id="indirizzo"
      type="text"
      [ngClass]="{
        'ng-invalid ng-dirty':
          struttureForm.controls.indirizzo.invalid && vm.struttureFormSubmitted,
      }"
      class="w-full"
      formControlName="indirizzo"
      placeholder="es. Piazza Roma"
      pInputText
    />
  </div> -->

  <div class="field mb-4 col-span-12 md:col-span-6">
    <label class="block text-surface-900 dark:text-surface-0 font-medium mb-2"
      >Cerca Indirizzo o Struttura
    </label>
    <app-google-place-autocomplete
      [codiceLuogo]="struttureForm.controls.citta.value"
      (autoCompleteSelected)="setDetailFromGoogle($event)"
      [disabled]="autocompleteDisabled"
      [value]="setValueEvent.asObservable()"
    ></app-google-place-autocomplete>
  </div>

  <div class="field mb-4 col-span-12 md:col-span-6">
    <label class="block text-surface-900 dark:text-surface-0 font-medium mb-2"
      >Numero civico
      <small
        *ngIf="
          struttureForm.controls.civico.invalid && vm.struttureFormSubmitted
        "
        class="text-error"
        >* <span> Numero civico obbligatorio</span></small
      >
    </label>

    <input
      id="civico"
      type="text"
      [ngClass]="{
        'ng-invalid ng-dirty':
          struttureForm.controls.civico.invalid && vm.struttureFormSubmitted,
      }"
      class="w-full"
      formControlName="civico"
      placeholder="Numero civico"
      pInputText
    />
  </div>
  <div class="field mb-4 col-span-12 md:col-span-6">
    <label class="block text-surface-900 dark:text-surface-0 font-medium mb-2"
      >Cap
      <small
        *ngIf="struttureForm.controls.cap.invalid && vm.struttureFormSubmitted"
        class="text-error"
        >*
        <span *ngIf="struttureForm.controls.cap.invalid">
          CAP obbligatorio</span
        ></small
      >
      <small
        *ngIf="struttureForm.controls.cap.errors?.['pattern']"
        class="text-error"
        >* formato CAP non valido</small
      >
    </label>

    <input
      id="cap"
      type="text"
      [ngClass]="{
        'ng-invalid ng-dirty':
          struttureForm.controls.cap.invalid && vm.struttureFormSubmitted,
      }"
      class="w-full"
      formControlName="cap"
      placeholder="es. 00100"
      pInputText
    />
  </div>

  <div class="field mb-4 col-span-12 md:col-span-6">
    <label class="block text-surface-900 dark:text-surface-0 font-medium mb-2"
      >Valutazione
    </label>
    <p-rating formControlName="valutazione" />
  </div>

  <div class="field mb-4 col-span-12 md:col-span-6">
    <label
      for="tipoStruttura"
      class="block text-surface-900 dark:text-surface-0 font-medium mb-2"
      >Tipo struttura
      <small
        *ngIf="
          struttureForm.controls.tipoStruttura.invalid &&
          vm.struttureFormSubmitted
        "
        class="text-error"
        >*Tipo struttura obbligatorio</small
      >
    </label>
    <ng-container
      *ngIf="!vm.tipoStruttureIsLoading; else formfield_placeholder"
    >
      <p-multiSelect
        [options]="vm.tipoStrutture"
        name="descrizione"
        appendTo="body"
        class="w-full"
        formControlName="tipoStruttura"
        [filter]="true"
        filterPlaceholder="Cerca"
        emptyFilterMessage="Nessun tipo struttura trovato"
        placeholder="Seleziona tipo struttura"
        optionLabel="descrizione"
        optionValue="id"
        display="chip"
        [maxSelectedLabels]="2"
        selectedItemsLabel="{0} tipi struttura selezionati"
        [ngClass]="{
          'ng-invalid ng-dirty':
            struttureForm.controls.tipoStruttura.invalid &&
            vm.struttureFormSubmitted,
        }"
      />
      <p class="m-0"></p>
    </ng-container>
  </div>

  <div class="field mb-4 col-span-12 md:col-span-6">
    <label
      for="tipoGestione"
      class="block text-surface-900 dark:text-surface-0 font-medium mb-2"
      >Tipo gestione
      <small
        *ngIf="
          struttureForm.controls.tipoGestione.invalid &&
          vm.struttureFormSubmitted
        "
        class="text-error"
        >*Tipo gestione obbligatorio</small
      >
    </label>
    <ng-container *ngIf="!vm.tipoGestioneIsLoading; else formfield_placeholder">
      <p-select
        [options]="vm.tipoGestione"
        name="descrizione"
        appendTo="body"
        class="w-full"
        formControlName="tipoGestione"
        [filter]="true"
        filterPlaceholder="Cerca"
        emptyFilterMessage="Nessun tipo gestione trovato"
        placeholder="Seleziona tipo gestione"
        optionLabel="descrizione"
        optionValue="id"
        display="chip"
        [ngClass]="{
          'ng-invalid ng-dirty':
            struttureForm.controls.tipoGestione.invalid &&
            vm.struttureFormSubmitted,
        }"
      />
      <p class="m-0"></p>
    </ng-container>
  </div>
  <div
    class="field mb-4 col-span-12 md:col-span-6"
    *ngIf="!vm.selectedStruttura"
  >
    <label
      for="stipulatori"
      class="block text-surface-900 dark:text-surface-0 font-medium mb-2"
      >Stipulatori
      <small
        *ngIf="
          struttureForm.controls.tipoGestione.invalid &&
          vm.struttureFormSubmitted
        "
        class="text-error"
        >*Inserire almeno uno stipulatore</small
      >
    </label>
    <ng-container *ngIf="!vm.stipulatoriIsLoading; else formfield_placeholder">
      <p-multiSelect
        [options]="vm.stipulatori"
        name="stipulatori"
        appendTo="body"
        class="w-full"
        formControlName="stipulatori"
        [filter]="true"
        filterPlaceholder="Cerca"
        emptyFilterMessage="Nessuno stipulatore trovato"
        placeholder="Seleziona stipulatore"
        optionLabel="nome"
        optionValue="id"
        display="chip"
        [ngClass]="{
          'ng-invalid ng-dirty':
            struttureForm.controls.stipulatori.invalid &&
            vm.struttureFormSubmitted,
        }"
      />
      <p class="m-0"></p>
    </ng-container>
  </div>

  <div class="col-span-12 text-center">
    <button
      *ngIf="dialogRef"
      type="button"
      pButton
      class="p-button-rounded p-button-outlined font-medium"
      icon="pi pi-times"
      label="Annulla"
      [disabled]="vm.isLoading || vm.isSaving"
      (click)="cancelForm()"
    ></button>

    <button
      type="button"
      pButton
      class="p-button-rounded font-medium ml-5"
      icon="pi pi-check"
      [loading]="vm.isSaving"
      icon="pi pi-check"
      [label]="
        !vm.isSaving
          ? vm.selectedStruttura
            ? 'Salva'
            : 'Crea'
          : 'Salvataggio...'
      "
      (click)="submitStruttureForm()"
      [disabled]="vm.isLoading || vm.isSaving"
    ></button>
  </div>
</form>

<p-messages
  [(value)]="messages"
  [enableService]="false"
  [closable]="false"
  [showTransitionOptions]="showTransitionOptions"
  [hideTransitionOptions]="'0ms'"
></p-messages>

<ng-template #formfield_placeholder>
  <p-skeleton width="100%" height="2rem"></p-skeleton>
</ng-template>
