@let vm = (model$ | async)!;

<div class="grid grid-cols-12 gap-2 my-4">
  <div class="field col-span-12">
    <div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-4">
      Filtri
    </div>
  </div>

  <form
    [formGroup]="cercaStruttureForm"
    class="field col-span-12 grid grid-cols-12"
  >
    <div class="field mb-4 md:mr-4 mr-0 col-span-12 md:col-span-4">
      <label class="block text-surface-900 dark:text-surface-0 font-medium mb-2"
        >Nome
      </label>
      <input
        type="text"
        class="w-full"
        formControlName="nome"
        pInputText
        placeholder="Inserire nome"
      />
    </div>

    <div class="field mb-4 md:mr-4 mr-0 col-span-12 md:col-span-4">
      <label class="font-medium text-surface-900 dark:text-surface-0"
        >Status</label
      >
      <ng-container
        *ngIf="!vm.statusConvenzioniAreLoading; else formfield_placeholder"
      >
        <p-select
          [options]="vm.statusConvenzioni"
          class="w-full mt-2"
          name="statoConvenzione"
          appendTo="body"
          formControlName="statoConvenzione"
          placeholder="Seleziona lo status"
        />
      </ng-container>
    </div>

    <div class="field mb-4 md:mr-4 mr-0 col-span-12 md:col-span-4">
      <label class="font-medium text-surface-900 dark:text-surface-0"
        >Tipologia</label
      >
      <ng-container
        *ngIf="!vm.tipologieStruttureAreLoading; else formfield_placeholder"
      >
        <p-multiselect
          [options]="vm.tipologieStrutture"
          class="w-full mt-2"
          name="tiplogiaStruttura"
          appendTo="body"
          formControlName="tipologiaStruttura"
          placeholder="Seleziona la tipologia"
          showClear="true"
          optionLabel="descrizione"
          optionValue="id"
        />
      </ng-container>
    </div>

    <div class="field mb-4 md:mr-4 mr-0 col-span-12 md:col-span-4">
      <label
        class="block text-surface-900 dark:text-surface-0 font-medium mb-2"
        for="citta"
        >Luogo
      </label>

      <p-autoComplete
        formControlName="luogo"
        [suggestions]="vm.filteredLuoghiEsteso"
        (completeMethod)="fetchLuogo($event, 1)"
        (onSelect)="state.set({ filteredLuoghiEsteso: [] })"
        styleClass="w-full"
        inputStyleClass="w-full"
        placeholder="Cerca per città, provincia, stato o regione"
        appendTo="body"
        minLength="3"
        delay="500"
        [forceSelection]="true"
        [showClear]="false"
        field="luogo"
      >
        <ng-template let-luogo pTemplate="item">
          <div class="flex align-items-center">
            @if (luogo.tipo === 'comune') {
              <fa-icon
                class="fs-16 mr-3 text-color-secondary"
                [icon]="faCity"
              ></fa-icon>
              <div class="flex flex-col">
                <span
                  >{{ luogo.comune
                  }}{{
                    luogo.codiceStato === 'ITA'
                      ? ' (' + luogo.siglaProvincia + ')'
                      : ''
                  }}</span
                >
                <small class="text-sm text-color-secondary">
                  {{
                    luogo.codiceStato === 'ITA'
                      ? 'Comune'
                      : ('Stato estero' | titlecase)
                  }}{{
                    luogo.codiceStato === 'ITA'
                      ? ': Italia → ' +
                        luogo.regione +
                        '
              → ' +
                        luogo.provincia +
                        ' → ' +
                        luogo.comune
                      : ''
                  }}</small
                >
              </div>
            } @else if (luogo.tipo === 'stato') {
              <fa-icon
                class="fs-16 mr-3 text-color-secondary"
                [icon]="faGlobeEurope"
              ></fa-icon>
              <div class="flex flex-col">
                <span>{{ luogo.stato }}</span>
                <small class="text-sm text-color-secondary">
                  {{
                    luogo.codiceStato === 'ITA'
                      ? ('Stato' | titlecase)
                      : ('Stato estero' | titlecase)
                  }}</small
                >
              </div>
            } @else if (luogo.tipo === 'regione') {
              <fa-icon
                class="fs-16 mr-3 text-color-secondary"
                [icon]="faMapLocationDot"
              ></fa-icon>
              <div class="flex flex-col">
                <span>{{ luogo.regione }}</span>
                <small class="text-sm text-color-secondary">
                  Regione
                  {{ ': Italia → ' + luogo.regione }}</small
                >
              </div>
            } @else if (luogo.tipo === 'provincia') {
              <fa-icon
                class="fs-16 mr-3 text-color-secondary"
                [icon]="faMapLocationDot"
              ></fa-icon>
              <div class="flex flex-col">
                <span>{{ luogo.provincia }}</span>
                <small class="text-sm text-color-secondary">
                  Provincia
                  {{
                    ': Italia → ' + luogo.regione + ' → ' + luogo.provincia
                  }}</small
                >
              </div>
            }
          </div>
        </ng-template>
      </p-autoComplete>
    </div>

    <div class="field mb-4 md:mr-4 mr-0 col-span-12 md:col-span-4">
      <label
        class="block text-surface-900 dark:text-surface-0 font-medium mb-2"
        for="dataInizio"
        >Convenzioni aperte nel periodo:
      </label>

      <p-datepicker
        dateFormat="dd/mm/yy"
        styleClass="w-full"
        [showClear]="true"
        [showButtonBar]="true"
        [minDate]="minDate"
        [maxDate]="todayDate"
        selectionMode="range"
        placeholder="Seleziona il range di date"
        formControlName="dataInizioConvenzione"
        [readonlyInput]="true"
        appendTo="body"
        dateMask
        [showIcon]="true"
      />
    </div>

    <div class="field mb-4 md:mr-4 mr-0 col-span-12 md:col-span-4">
      <label
        class="block text-surface-900 dark:text-surface-0 font-medium mb-2"
        for="dataInizio"
        >Convenzioni chiuse nel periodo:
      </label>

      <p-datepicker
        dateFormat="dd/mm/yy"
        styleClass="w-full"
        [showClear]="true"
        [showButtonBar]="true"
        [minDate]="minDate"
        [maxDate]="todayDate"
        selectionMode="range"
        placeholder="Seleziona il range di date"
        formControlName="dataFineConvenzione"
        [readonlyInput]="true"
        appendTo="body"
        dateMask
        [showIcon]="true"
      />
    </div>

    <div class="field mb-4 md:mr-4 mr-0 col-span-12 md:col-span-4">
      <label>&nbsp;</label>
      <div class="field col-12 align-self-center mt-2">
        <p-checkbox
          inputId="flagOnlyStrutturaMadre"
          name="flagOnlyStrutturaMadre"
          [binary]="true"
          [formControl]="cercaStruttureForm.controls.flagOnlyStrutturaMadre"
        ></p-checkbox>
        <label
          for="flagOnlyStrutturaMadre"
          class="text-surface-900 dark:text-surface-0 font-medium mb-2 ml-2"
          >Solo strutture madri</label
        >
      </div>
    </div>
  </form>

  <div class="field col-span-12 flex flex-row-reverse">
    <button
      type="button"
      class="mr-2 p-button-rounded"
      pButton
      [disabled]="vm.isSearching"
      pRipple
      [loading]="vm.isSearching"
      icon="pi pi-search"
      (click)="search()"
      [label]="vm.isSearching ? 'Ricerca in corso...' : 'Cerca'"
      tooltipPosition="left"
    ></button>
    <button
      type="button"
      class="mr-2 w-auto p-button-rounded p-button-outlined"
      [disabled]="vm.isSearching"
      pButton
      pRipple
      icon="pi pi-undo"
      (click)="resetFilters()"
      label="Reset filtri"
      tooltipPosition="left"
    ></button>
  </div>
  <div class="field col-span-12">
    <p-messages
      [(value)]="filterMessage"
      [enableService]="false"
      [closable]="false"
      [showTransitionOptions]="showTransitionOptions"
      [hideTransitionOptions]="'0ms'"
    ></p-messages>
  </div>

  <div class="field col-span-12">
    <p-divider></p-divider>
  </div>
</div>

<p-table
  #struttureTable
  [totalRecords]="vm.struttureTotalCount"
  dataKey="id"
  [value]="!vm.struttureAreLoading ? vm.strutture : emptyStrutturaArray"
  [columns]="cols"
  [showCurrentPageReport]="!vm.struttureAreLoading"
  responsiveLayout="scroll"
  currentPageReportTemplate="Strutture {first} - {last} di {totalRecords}"
  [paginator]="true"
  [rows]="10"
  [rowsPerPageOptions]="[10, 50, 100]"
  [globalFilterFields]="['firstName', 'lastName', 'strutturename']"
>
  <ng-template #caption>
    <div class="flex items-center justify-between">
      <span class="text-xl font-bold">Strutture</span>
      <div>
        <button
          *appIsNotReadOnly="['STRUTTURE']"
          type="button"
          class="p-button-outlined p-button-rounded ml-2 mr-2 font-medium"
          pButton
          pRipple
          icon="pi pi-plus"
          (click)="createStruttura()"
          label="Aggiungi nuova struttura"
          tooltipPosition="left"
        ></button>
        <button
          type="button"
          class="p-button-rounded ml-2 mr-2 font-medium"
          pButton
          [loading]="vm.csvExportIsLoading"
          pRipple
          [label]="vm.csvExportIsLoading ? 'Esportazione' : 'Esporta CSV'"
          icon="pi pi-download"
          (click)="exportCSV()"
          tooltipPosition="left"
        ></button>
      </div>
    </div>
  </ng-template>

  <ng-template pTemplate="header" let-columns>
    <tr>
      <th
        *ngFor="let col of cols"
        pResizableColumn
        [pSortableColumn]="col.sortField ?? ''"
        class="p-table-scrollable-header"
      >
        <div style="display: flex; align-items: center; text-wrap: nowrap">
          <div>
            {{ col.header }}
            <p-sortIcon
              *ngIf="col.sortField"
              [field]="col.sortField"
            ></p-sortIcon>
          </div>

          <ng-container [ngSwitch]="col.field">
            <p-columnFilter
              *ngSwitchCase="'nome'"
              type="text"
              display="menu"
              [matchModeOptions]="[
                { value: 'contains', label: 'Contiene' },
                { value: 'equals', label: 'Uguale a' },
              ]"
              [showMatchModes]="true"
              matchMode="contains"
              [showOperator]="false"
              [showAddButton]="true"
              [field]="col.field"
            ></p-columnFilter>
          </ng-container>

          <ng-container [ngSwitch]="col.field">
            <p-columnFilter
              *ngSwitchCase="'strutturaMadre.nome'"
              type="text"
              display="menu"
              [matchModeOptions]="[
                { value: 'contains', label: 'Contiene' },
                { value: 'equals', label: 'Uguale a' },
              ]"
              [showMatchModes]="true"
              matchMode="contains"
              [showOperator]="false"
              [showAddButton]="true"
              [field]="col.field"
            ></p-columnFilter>
          </ng-container>

          <ng-container [ngSwitch]="col.field">
            <p-columnFilter
              *ngSwitchCase="'partitaIva'"
              type="text"
              display="menu"
              [matchModeOptions]="[
                { value: 'contains', label: 'Contiene' },
                { value: 'equals', label: 'Uguale a' },
              ]"
              [showMatchModes]="true"
              matchMode="contains"
              [showOperator]="false"
              [showAddButton]="true"
              [field]="col.field"
            ></p-columnFilter>
          </ng-container>

          <ng-container [ngSwitch]="col.field">
            <p-columnFilter
              *ngSwitchCase="'tipoGestione.descrizione'"
              display="menu"
              [showOperator]="false"
              [showAddButton]="true"
              [showMatchModes]="false"
              [showApplyButton]="false"
              [showClearButton]="true"
              [showAddButton]="false"
              matchMode="equals"
              [field]="col.field"
            >
              <!-- [ngClass]="{ 'active-filter': isFilterActive['tipoGestione'] }" -->
              <ng-template
                pTemplate="filter"
                let-value
                let-filterCallback="filterCallback"
              >
                <p-dropdown
                  [options]="vm.tipoGestione"
                  optionLabel="descrizione"
                  optionValue="descrizione"
                  [showClear]="true"
                  [filter]="true"
                  placeholder="Seleziona tipo gestione"
                  (onChange)="filterCallback($event.value)"
                ></p-dropdown>
                <!-- (onChange)="onFilterChange('tipoGestione', $event.value)" -->
              </ng-template>
            </p-columnFilter>
          </ng-container>

          <ng-container [ngSwitch]="col.field">
            <p-columnFilter
              *ngSwitchCase="'tipoStruttura.codice'"
              display="menu"
              [showOperator]="false"
              [showAddButton]="true"
              [showApplyButton]="false"
              [showMatchModes]="false"
              [showAddButton]="false"
              matchMode="equals"
              [field]="col.field"
            >
              <!-- [ngClass]="{ 'active-filter': isFilterActive['tipoStruttura'] }" -->
              <ng-template
                pTemplate="filter"
                let-value
                let-filterCallback="filterCallback"
              >
                <p-dropdown
                  [options]="vm.tipoStruttura"
                  optionLabel="codice"
                  optionValue="codice"
                  [showClear]="true"
                  [filter]="true"
                  placeholder="Seleziona tipo struttura"
                  (onChange)="filterCallback($event.value)"
                ></p-dropdown>
                <!-- (onChange)="onFilterChange('tipoStruttura', $event.value)" -->
              </ng-template>
            </p-columnFilter>
          </ng-container>
        </div>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-row let-rowIndex="rowIndex">
    @if (vm.struttureAreLoading) {
      <ng-container *ngTemplateOutlet="table_placeholder"></ng-container>
    }
    <tr *ngIf="!vm.struttureAreLoading">
      <ng-container *ngFor="let col of cols" [ngSwitch]="col.field">
        <td *ngSwitchCase="'nome'">
          <span class="font-light"> {{ row.nome }}</span>
        </td>
        <td *ngSwitchCase="'partitaIva'">
          <span class="font-light"> {{ row.partitaIva }}</span>
        </td>
        <td *ngSwitchCase="'indirizzo'">
          <span class="font-light">
            {{ getFormattedAddress(row) }}
          </span>
        </td>
        <td *ngSwitchCase="'strutturaMadre.nome'">
          <span class="font-light"> {{ row.strutturaMadre.nome }}</span>
        </td>

        <td *ngSwitchCase="'tipoGestione.descrizione'">
          <span class="font-light"> {{ row.tipoGestione.descrizione }}</span>
        </td>
        <td *ngSwitchCase="'tipoStruttura.codice'">
          <span class="font-light">
            {{ row.descrizioniTipiStruttura }}
          </span>
        </td>

        <td *ngSwitchCase="'azioni'">
          <div class="flex align-items-center">
            <button
              pButton
              pRipple
              type="button"
              pTooltip="Dettaglio struttura"
              (click)="openStrutturaDialog(row.id, rowIndex)"
              tooltipPosition="left"
              [loading]="dettaglioStrutturaIsLoading[rowIndex]"
              icon="pi pi-building"
              class="p-button-rounded p-button-text"
            ></button>
            <button
              *ngIf="
                row.visibilitaStrutture?.[0]?.flagProprietario || hasAdminRole
              "
              pButton
              pRipple
              type="button"
              pTooltip="Modifica struttura"
              [loading]="editStrutturaIsLoading[rowIndex]"
              tooltipPosition="left"
              icon="pi pi-pencil"
              class="p-button-rounded p-button-text"
              (click)="editStruttura(row, rowIndex)"
            ></button>

            <button
              *ngIf="
                row.visibilitaStrutture?.[0]?.flagProprietario || hasAdminRole
              "
              pButton
              pRipple
              type="button"
              pTooltip="Visibilità"
              (click)="editVisibilitaStruttura(row, rowIndex)"
              tooltipPosition="left"
              [loading]="editVisibilitaStrutturaIsLoading[rowIndex]"
              icon="pi pi-eye"
              class="p-button-rounded p-button-text"
            ></button>
            <button
              pButton
              pRipple
              type="button"
              pTooltip="Visualizza convenzioni"
              tooltipPosition="left"
              [loading]="convenzioniAreLoading[rowIndex]"
              icon="pi pi-list"
              class="p-button-rounded p-button-text"
              (click)="openConvenzioniDialog(row, rowIndex)"
            ></button>
          </div>
        </td>
      </ng-container>
    </tr>
  </ng-template>
</p-table>

<ng-template #table_placeholder>
  <tr style="height: 57px">
    <td>
      <p-skeleton width="100%" height="2rem"></p-skeleton>
    </td>
    <td>
      <p-skeleton width="100%" height="2rem"></p-skeleton>
    </td>
    <td>
      <p-skeleton width="100%" height="2rem"></p-skeleton>
    </td>
    <td>
      <p-skeleton width="100%" height="2rem"></p-skeleton>
    </td>
    <td>
      <p-skeleton width="100%" height="2rem"></p-skeleton>
    </td>
    <td>
      <p-skeleton width="100%" height="2rem"></p-skeleton>
    </td>
    <td>
      <p-skeleton width="100%" height="2rem"></p-skeleton>
    </td>
  </tr>
</ng-template>

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

<p-toast />

<p-confirmDialog
  #cd
  key="cd"
  icon="pi pi-exclamation-triangle"
  [style]="{ width: '425px' }"
>
  <p-footer>
    <button
      type="button"
      pButton
      (click)="cd.onReject()"
      [disabled]="vm.cdIsLoading"
    ></button>
    <button
      type="button"
      pButton
      [loading]="vm.cdIsLoading"
      (click)="cd.onAccept()"
      [disabled]="vm.cdIsLoading"
    ></button>
  </p-footer>
</p-confirmDialog>

<p-dialog
  [header]="vm.modalName"
  [modal]="true"
  [closable]="false"
  [breakpoints]="{ '1370px': '75vw', '960px': '90vw' }"
  (onClose)="onCloseConvenzioniDialog($event)"
  [(visible)]="vm.showConvenzioniDialog"
  [style]="{ width: '90vw' }"
>
  @if (vm.modalMode === 'show' && !vm.convenzioniAreLoading) {
    <p-table></p-table>

    <p-table
      #convenzioniTable
      [value]="vm.convenzioni"
      [totalRecords]="vm.convenzioni.length"
      currentPageReportTemplate="Convenzioni {first} - {last} di {totalRecords}"
      showCurrentPageReport="!true"
      [paginator]="true"
      [rows]="10"
      [scrollable]="true"
    >
      <ng-template #caption>
        <div
          class="flex flex-row-reverse"
          *ngIf="hasAdminRole || convenzioneStrutturaPrivilegio"
        >
          <button
            type="button"
            class="p-button-outlined p-button-rounded font-medium"
            pButton
            pRipple
            icon="pi pi-plus"
            (click)="addConvenzione()"
            label="Aggiungi convenzione"
            tooltipPosition="left"
          ></button>
        </div>
      </ng-template>
      <ng-template #header>
        <tr>
          <th style="min-width: 30rem">
            Condizioni generali
            <p-columnFilter
              type="text"
              display="menu"
              [matchModeOptions]="[
                { value: 'contains', label: 'Contiene' },
                { value: 'equals', label: 'Uguale a' },
              ]"
              [showMatchModes]="true"
              matchMode="contains"
              [showOperator]="false"
              [showAddButton]="true"
              field="condizioniGeneraliConvenzione"
            ></p-columnFilter>
          </th>
          <th style="min-width: 200px">
            Data d'inizio
            <p-columnFilter
              type="date"
              display="menu"
              field="dataInizio"
            ></p-columnFilter>
          </th>
          <th style="min-width: 200px">
            Data di fine
            <p-columnFilter
              type="date"
              display="menu"
              field="dataFine"
            ></p-columnFilter>
          </th>
          <th style="min-width: 200px">
            Stipulata da
            <p-columnFilter
              type="text"
              display="menu"
              field="stipulatore.nome"
            ></p-columnFilter>
          </th>
          <th style="min-width: 200px">
            Convenzione diretta
            <p-columnFilter
              type="boolean"
              field="flagConvenzioneDiretta"
            ></p-columnFilter>
          </th>
          <th style="min-width: 200px">
            Convenzione indiretta
            <p-columnFilter
              type="boolean"
              field="flagConvenzioneIndiretta"
            ></p-columnFilter>
          </th>
          <th style="min-width: 200px">
            Convenzione Ticket
            <p-columnFilter
              type="boolean"
              field="flagConvenzioneTicket"
            ></p-columnFilter>
          </th>
          <th style="min-width: 200px">
            Sospesa
            <p-columnFilter type="boolean" field="flagSospesa"></p-columnFilter>
          </th>
          <th style="min-width: 200px">
            Scelta medico
            <p-columnFilter
              type="boolean"
              field="flagSceltaMedico"
            ></p-columnFilter>
          </th>
          <th style="min-width: 200px">
            Tariffario casa madre
            <p-columnFilter
              type="boolean"
              field="flagUsaTariffarioCasaMadre"
            ></p-columnFilter>
          </th>
          <th pFrozenColumn alignFrozen="right">Azioni</th>
        </tr>
      </ng-template>
      <ng-template #body let-convenzione let-rowIndex="rowIndex">
        <tr>
          <td>{{ convenzione.condizioniGeneraliConvenzione }}</td>
          <td>{{ convenzione.dataInizio | date: 'dd/MM/yyyy' }}</td>
          <td>{{ convenzione.dataFine | date: 'dd/MM/yyyy' }}</td>
          <td>{{ convenzione?.stipulatore.nome }}</td>
          <td>
            <i
              [ngClass]="
                convenzione?.flagConvenzioneDiretta
                  ? 'pi pi-check'
                  : 'pi pi-times'
              "
            ></i>
          </td>
          <td>
            <i
              [ngClass]="
                convenzione?.flagConvenzioneIndiretta
                  ? 'pi pi-check'
                  : 'pi pi-times'
              "
            ></i>
          </td>
          <td>
            <i
              [ngClass]="
                convenzione?.flagConvenzioneTicket
                  ? 'pi pi-check'
                  : 'pi pi-times'
              "
            ></i>
          </td>
          <td>
            <i
              [ngClass]="
                convenzione?.flagSospesa ? 'pi pi-check' : 'pi pi-times'
              "
            ></i>
          </td>
          <td>
            <i
              [ngClass]="
                convenzione?.flagSceltaMedico ? 'pi pi-check' : 'pi pi-times'
              "
            ></i>
          </td>
          <td>
            <i
              [ngClass]="
                convenzione?.flagUsaTariffarioCasaMadre
                  ? 'pi pi-check'
                  : 'pi pi-times'
              "
            ></i>
          </td>
          <td pFrozenColumn alignFrozen="right">
            <button
              type="button"
              *ngIf="hasAdminRole || convenzioneStrutturaPrivilegio"
              pButton
              pTooltip="Modifica"
              tooltipPosition="left"
              pRipple
              class="p-button-rounded p-button-text"
              icon="pi pi-pencil"
              (click)="editConvenzione(convenzione)"
            ></button>
            <button
              type="button"
              pButton
              pTooltip="Visualizza documenti"
              tooltipPosition="left"
              pRipple
              class="p-button-rounded p-button-text"
              icon="pi pi-paperclip"
              (click)="visualizzaAllegatiConvenzione(convenzione, rowIndex)"
            ></button>
          </td>
        </tr>
      </ng-template>
      <ng-template #emptymessage>
        <tr>
          <td colspan="11">
            Nessuna convenzione per la struttura selezionata, clicca su
            'Aggiungi convenzione' per crearne una.
          </td>
        </tr>
      </ng-template>
    </p-table>
  }
  @if (vm.convenzioniAreLoading) {
    <p-skeleton width="100%" height="4rem" styleClass="mb-2"></p-skeleton>
    <p-skeleton width="100%" height="4rem" styleClass="mb-2"></p-skeleton>
    <p-skeleton width="100%" height="4rem" styleClass="mb-2"></p-skeleton>
  }
  @if (vm.modalMode === 'edit') {
    <form [formGroup]="convenzioneForm" class="grid grid-cols-12">
      <div class="field mb-4 md:mr-4 mr-0 col-span-12 md:col-span-12">
        <label
          for="condizioniGeneraliConvenzione"
          class="block text-surface-900 dark:text-surface-0 font-medium mb-2"
          >Condizioni generali della convenzione<span class="text-error"> </span
        ></label>
        <textarea
          pTextarea
          rows="4"
          formControlName="condizioniGeneraliConvenzione"
          placeholder="Inserisci le condizioni"
          class="w-full mb-4"
        >
        </textarea>
      </div>

      <div class="field mb-4 md:mr-4 mr-0 col-span-12 md:col-span-6">
        <label
          class="font-medium text-surface-900 dark:text-surface-0"
          for="dataInizio"
          >Data d'inizio<span class="text-error">
            *<small
              *ngIf="
                convenzioneForm.controls.dataInizio.errors?.['required'] &&
                vm.convenzioneFormSubmitted
              "
            >
              Data d'inizio obbligatoria</small
            >
          </span></label
        >

        <p-datepicker
          dateFormat="dd/mm/yy"
          styleClass="w-full"
          formControlName="dataInizio"
          [readonlyInput]="true"
          appendTo="body"
          [showClear]="true"
          [showButtonBar]="true"
          dateMask
          [showIcon]="true"
          [ngClass]="{
            'ng-invalid ng-dirty':
              convenzioneForm.controls.dataInizio.invalid &&
              vm.convenzioneFormSubmitted,
          }"
        />
      </div>

      <div class="field mb-4 md:mr-4 mr-0 col-span-12 md:col-span-6">
        <label
          class="font-medium text-surface-900 dark:text-surface-0"
          for="dataFine"
          >Data di fine<span class="text-error"> </span
        ></label>

        <p-datepicker
          dateFormat="dd/mm/yy"
          styleClass="w-full"
          formControlName="dataFine"
          [readonlyInput]="true"
          appendTo="body"
          dateMask
          [showIcon]="true"
        />
      </div>

      <div class="field mb-4 md:mr-4 mr-0 col-span-12 md:col-span-6">
        <label
          for="stipulatore"
          class="font-medium text-surface-900 dark:text-surface-0"
          >Stipulata da
          <small
            *ngIf="
              convenzioneForm.controls.stipulata.invalid &&
              vm.convenzioneFormSubmitted
            "
            class="text-error"
            >*Tipo gestione obbligatorio</small
          >
        </label>
        <p-select
          [options]="vm.stipulatori"
          name="stipulata"
          appendTo="body"
          class="w-full"
          formControlName="stipulata"
          [filter]="true"
          filterPlaceholder="Cerca"
          emptyFilterMessage="Nessun mutua di riferimento trovato"
          placeholder="Seleziona una mutua di riferimento"
          optionLabel="nome"
          optionValue="id"
          display="chip"
          [ngClass]="{
            'ng-invalid ng-dirty':
              convenzioneForm.controls.stipulata.invalid &&
              vm.convenzioneFormSubmitted,
          }"
        />
        <p class="m-0"></p>
      </div>

      <div class="field mb-4 md:mr-4 mr-0 col-span-12 md:col-span-6"></div>

      <div class="field mb-4 md:mr-4 mr-0 col-span-12 md:col-span-4">
        <div class="field col-12 align-self-center">
          <p-checkbox
            inputId="flagConvenzioneDiretta"
            name="flagConvenzioneDiretta"
            [binary]="true"
            [formControl]="convenzioneForm.controls.flagConvenzioneDiretta"
          ></p-checkbox>
          <label for="flagConvenzioneDiretta" class="ml-2"
            >Convenzione diretta</label
          >
        </div>
      </div>

      <div class="field mb-4 md:mr-4 mr-0 col-span-12 md:col-span-4">
        <div class="field col-12 align-self-center">
          <p-checkbox
            inputId="flagConvenzioneIndiretta"
            name="flagConvenzioneIndiretta"
            [binary]="true"
            [formControl]="convenzioneForm.controls.flagConvenzioneIndiretta"
          ></p-checkbox>
          <label for="flagConvenzioneIndiretta" class="ml-2"
            >Convenzione indiretta</label
          >
        </div>
      </div>

      <div class="field mb-4 md:mr-4 mr-0 col-span-12 md:col-span-4">
        <div class="field col-12 align-self-center">
          <p-checkbox
            inputId="flagConvenzioneTicket"
            name="flagConvenzioneTicket"
            [binary]="true"
            [formControl]="convenzioneForm.controls.flagConvenzioneTicket"
          ></p-checkbox>
          <label for="flagConvenzioneTicket" class="ml-2"
            >Convenzione Ticket</label
          >
        </div>
      </div>

      <div class="field mb-4 md:mr-4 mr-0 col-span-12 md:col-span-4">
        <div class="field col-12 align-self-center">
          <p-checkbox
            inputId="flagSospesa"
            name="flagSospesa"
            [binary]="true"
            [formControl]="convenzioneForm.controls.flagSospesa"
          ></p-checkbox>
          <label for="flagConvenzioneTicket" class="ml-2"
            >Convenzione Sospesa</label
          >
        </div>
      </div>

      <div class="field mb-4 md:mr-4 mr-0 col-span-12 md:col-span-4">
        <div class="field col-12 align-self-center">
          <p-checkbox
            inputId="flagSceltaMedico"
            name="flagSceltaMedico"
            [binary]="true"
            [formControl]="convenzioneForm.controls.flagSceltaMedico"
          ></p-checkbox>
          <label for="flagSceltaMedico" class="ml-2">Scelta medico</label>
        </div>
      </div>

      <div class="field mb-4 md:mr-4 mr-0 col-span-12 md:col-span-4">
        <div class="field col-12 align-self-center">
          <p-checkbox
            inputId="flagUsaTariffarioCasaMadre"
            name="flagUsaTariffarioCasaMadre"
            [binary]="true"
            [formControl]="convenzioneForm.controls.flagUsaTariffarioCasaMadre"
          ></p-checkbox>
          <label for="flagUsaTariffarioCasaMadre" class="ml-2"
            >Tariffario casa madre</label
          >
        </div>
      </div>
    </form>
  }
  @if (vm.modalMode === 'allegati') {
    <p-table
      #tableFile
      [columns]="allegatiCols"
      [value]="vm.allegati"
      styleClass="mb-3"
      [rows]="10"
      [showCurrentPageReport]="true"
      [responsive]="true"
      scrollHeight="455px"
      [loading]="vm.loadingAllegatiTable"
      [rowsPerPageOptions]="[10, 50, 100]"
      [paginator]="true"
      [alwaysShowPaginator]="false"
      [filterDelay]="0"
      [autoLayout]="true"
      [resizableColumns]="true"
    >
      <ng-template #caption>
        <div class="flex items-center flex-row-reverse justify-between">
          <div>
            <button
              type="button"
              class="p-button-outlined p-button-rounded font-medium"
              pButton
              pRipple
              icon="pi pi-upload"
              (click)="openUploadDialog()"
              label="Carica nuovo allegato"
              tooltipPosition="left"
            ></button>
          </div>
        </div>
      </ng-template>
      <ng-template pTemplate="header" let-columns>
        <tr>
          <th
            *ngFor="let col of columns"
            [pSortableColumn]="col.field"
            pResizableColumn
            class="p-table-scrollable-header"
            [pSortableColumnDisabled]="
              col.field === 'actions' || col.field === 'preview'
            "
          >
            {{ col.header }}
            <p-sortIcon
              [field]="col.field"
              *ngIf="col.field !== 'actions' && col.field !== 'preview'"
            ></p-sortIcon>
          </th>
        </tr>
      </ng-template>
      <ng-template
        pTemplate="body"
        let-row
        let-columns="columns"
        let-index="rowIndex"
      >
        <tr>
          <td class="p-resizable-column">
            <span class="p-column-title"></span>
            <fa-icon
              style="font-size: 25px; margin-right: 5px; vertical-align: middle"
              [ngClass]="utilsService.getIconByFile(row.ext).class"
              [icon]="utilsService.getIconByFile(row.ext).icon"
            >
            </fa-icon>
          </td>
          <td class="p-resizable-column">
            {{ row.name }}
          </td>
          <td class="p-resizable-column">
            {{ row.lastModified | date: 'medium' }}
          </td>
          <td class="p-resizable-column">
            {{ row.fileSizeInBytes | filesize }}
          </td>
          <td class="p-resizable-column">
            <button
              pButton
              pRipple
              type="button"
              [icon]="
                downloading[index] ? 'pi pi-spin pi-spinner' : 'pi pi-download'
              "
              pTooltip="Scarica file"
              tooltipPosition="top"
              (click)="downloadFile(row, index)"
              class="p-button-text p-button-rounded"
            ></button>
            <button
              type="button"
              class="p-button-rounded p-button-text p-button-danger p-button-danger"
              pButton
              pTooltip="Elimina allegato"
              tooltipPosition="top"
              pRipple
              icon="pi pi-trash"
              (click)="showDeleteDialog($event, row)"
            ></button>
          </td>
        </tr>
      </ng-template>
      <ng-template pTemplate="emptymessage" let-columns>
        <tr>
          <td [attr.colspan]="columns.length">
            Nessun allegato da visualizzare
          </td>
        </tr>
      </ng-template>
    </p-table>
  }

  <div class="flex justify-end gap-2">
    <button
      pButton
      pRipple
      class="p-button-rounded p-button-outlined"
      [icon]="
        vm.modalMode === 'edit' || vm.modalMode === 'allegati'
          ? 'pi pi-arrow-left'
          : 'pi pi-times'
      "
      [label]="
        vm.modalMode === 'edit' || vm.modalMode === 'allegati'
          ? 'Indietro'
          : 'Chiudi'
      "
      (click)="onBackDialog($event)"
      [disabled]="vm.convenzioniAreLoading"
    ></button>
    @if (vm.modalMode === 'edit') {
      <button
        pButton
        pRipple
        class="p-button-rounded"
        (click)="submitConvenzioneForm()"
        [label]="!vm.convenzioniAreLoading ? 'Conferma' : 'Attendere...'"
        [loading]="vm.convenzioniAreLoading"
        [disabled]="vm.convenzioniAreLoading"
      ></button>
    }
  </div>
</p-dialog>

<p-dialog
  header="Dettaglio struttura"
  [modal]="true"
  [(visible)]="vm.showStrutturaDialog"
  [breakpoints]="{
    '1370px': '50vw',
    '1100px': '60vw',
    '920px': '75vw',
    '640px': '90vw',
  }"
>
  <div class="grid grid-cols-12 gap-2">
    @if (vm.selectedStruttura?.nome) {
      <div class="col-span-12 lg:col-span-6">
        <label><strong>Nome:</strong> {{ vm.selectedStruttura?.nome }}</label>
      </div>
    }
    @if (vm.selectedStruttura?.partitaIva) {
      <div class="col-span-12 lg:col-span-6">
        <label
          ><strong>Partita Iva:</strong>
          {{ vm.selectedStruttura?.partitaIva }}</label
        >
      </div>
    }
    @if (vm.selectedStruttura?.indirizzo) {
      <div class="col-span-12 lg:col-span-6">
        <label
          ><strong>Indirizzo:</strong>
          {{ vm.selectedStruttura?.indirizzo }}</label
        >
      </div>
    }
    @if (vm.selectedStruttura?.numeroCivico) {
      <div class="col-span-12 lg:col-span-6">
        <label
          ><strong>Numero civico:</strong>
          {{ vm.selectedStruttura?.numeroCivico }}</label
        >
      </div>
    }
    @if (vm.selectedStruttura?.cap) {
      <div class="col-span-12 lg:col-span-6">
        <label><strong>CAP:</strong> {{ vm.selectedStruttura?.cap }}</label>
      </div>
    }
    @if (vm.selectedStruttura?.codiceLuogo?.comune) {
      <div class="col-span-12 lg:col-span-6">
        <label
          ><strong>Comune:</strong>
          {{ vm.selectedStruttura?.codiceLuogo?.comune }}</label
        >
      </div>
    }
    @if (vm.selectedStruttura?.codiceLuogo?.provincia) {
      <div class="col-span-12 lg:col-span-6">
        <label
          ><strong>Provincia:</strong>
          {{ vm.selectedStruttura?.codiceLuogo?.provincia }}</label
        >
      </div>
    }
    @if (vm.selectedStruttura?.codiceLuogo?.regione) {
      <div class="col-span-12 lg:col-span-6">
        <label
          ><strong>Regione:</strong>
          {{ vm.selectedStruttura?.codiceLuogo?.regione }}</label
        >
      </div>
    }
    @if (vm.selectedStruttura?.codiceLuogo?.stato) {
      <div class="col-span-12 lg:col-span-6">
        <label
          ><strong>Stato:</strong>
          {{ vm.selectedStruttura?.codiceLuogo?.stato }}</label
        >
      </div>
    }
    @if (vm.selectedStruttura?.strutturaMadre?.nome) {
      <div class="col-span-12 lg:col-span-6">
        <label
          ><strong>Struttura madre:</strong>
          {{ vm.selectedStruttura?.strutturaMadre?.nome }}</label
        >
      </div>
    }
    @if (vm.selectedStruttura?.strutturaMadre?.partitaIva) {
      <div class="col-span-12 lg:col-span-6">
        <label
          ><strong>P.IVA Struttura madre:</strong>
          {{ vm.selectedStruttura?.strutturaMadre?.partitaIva }}</label
        >
      </div>
    }
    @if (vm.selectedStruttura?.tipoGestione?.descrizione) {
      <div class="col-span-12 lg:col-span-6">
        <label
          ><strong>Tipologia gestione:</strong>
          {{ vm.selectedStruttura?.tipoGestione?.descrizione }}</label
        >
      </div>
    }
    <!-- @if (vm.selectedStruttura?.tipoStruttura?.descrizione) {
      <div class="col-span-12 lg:col-span-6">
        <label
          ><strong>Tipologia struttura:</strong>
          {{ vm.selectedStruttura?.tipoStruttura?.descrizione }}</label
        >
      </div>
    }
    @if (vm.selectedStruttura?.tipoStruttura?.descrizione) {
      <div class="col-span-12 lg:col-span-6">
        <label
          ><strong>Valutazione struttura:</strong>
          <p-rating
            [(ngModel)]="vm.selectedStruttura!.stelline"
            [readonly]="true"
          />
        </label>
      </div>
    } -->
  </div>
  <div class="flex justify-end gap-2 mt-5">
    <button
      type="button"
      pButton
      class="p-button-rounded"
      icon="pi pi-times"
      label="Chiudi"
      (click)="vm.showStrutturaDialog = false"
    ></button>
  </div>
</p-dialog>

<app-upload-documentazione
  [visible]="vm.showUploadDialog"
  [struttura]="vm.selectedStruttura"
  [convenzione]="vm.selectedConvenzione"
  (close)="closeDialog()"
  (documentazioneUploaded)="documentazioneUploaded($event)"
></app-upload-documentazione>

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