@let vm = (model$ | async)!;
<div
  class="bg-surface-0 dark:bg-surface-950 p-6 md:p-12 lg:p-15 flex flex-col gap-8"
>
  <div
    class="flex flex-col md:flex-row justify-between items-center md:items-end gap-4 md:gap-6"
  >
    <div>
      <img
        src="assets/images/MUSA/logo.png"
        alt="logo-consorzio-musa"
        class="block mx-auto"
        style="height: 50px"
      />
    </div>
    <div class="flex-1 flex flex-col text-center md:text-left">
      <h1
        class="text-surface-900 dark:text-surface-0 text-2xl font-semibold leading-tight"
      >
        Consorzio Mu.Sa.
      </h1>
      <h2
        class="text-surface-500 dark:text-surface-200 text-xl font-normal leading-tight"
      >
        Cerca strutture convenzionate
      </h2>
    </div>
  </div>

  <p-divider class="w-full my-0!"></p-divider>
  <form [formGroup]="cercaStruttureForm" (ngSubmit)="getStrutture()">
    <div class="flex flex-wrap gap-8 md:gap-6 items-start">
      <div
        class="flex-3 bg-surface-0 dark:bg-surface-950 flex flex-col justify-start items-start gap-8 md:gap-12 w-full"
      >
        <div class="self-stretch flex flex-col justify-start items-start gap-6">
          <div
            class="self-stretch flex flex-col justify-start items-start gap-6"
          >
            <div
              class="self-stretch justify-start text-surface-900 dark:text-surface-0 text-lg md:text-xl font-semibold leading-tight"
            >
              Strutture Convenzionate
            </div>
            <div
              class="self-stretch flex flex-col justify-start items-start gap-4"
            >
              <div
                class="self-stretch flex flex-col justify-start items-start gap-2"
              >
                <div
                  id="tipoStruttura"
                  class="self-stretch justify-start text-surface-900 dark:text-surface-0 text-base font-normal leading-tight"
                >
                  Tipologia struttura
                </div>
                <p-select
                  [options]="vm.tipologieStrutture"
                  class="flex-auto lg:flex-1 lg:mt-0 w-full mr-0 lg:mr-1 text-surface-900 dark:text-surface-0"
                  name="tiplogiaStruttura"
                  appendTo="body"
                  formControlName="tipologiaStruttura"
                  placeholder="Seleziona il tipo struttura"
                  showClear="true"
                  optionLabel="descrizione"
                  optionValue="codice"
                  ariaLabelledBy="tipoStruttura"
                  emptyFilterMessage="Nessuna tipologia struttura trovata"
                  emptyMessage="Nessuna tipologia struttura trovata"
                  [loading]="vm.tipologieStruttureAreLoading"
                  [filter]="true"
                ></p-select>
              </div>
            </div>

            <div
              class="self-stretch flex flex-col md:flex-row justify-start items-start gap-4"
            >
              <div
                class="flex-1 flex flex-col justify-start items-start gap-2 w-full"
              >
                <div
                  id="stato"
                  class="self-stretch justify-start text-surface-900 dark:text-surface-0 text-base font-normal leading-tight"
                >
                  Stato<small class="text-red-600"
                    >*
                    @if (
                      cercaStruttureForm.controls.stato.errors?.['required'] &&
                      vm.cercaStruttureFormSubmitted
                    ) {
                      Stato obbligatorio
                    }
                  </small>
                </div>
                <p-select
                  [options]="vm.stati"
                  class="flex-auto lg:flex-1 lg:mt-0 w-full mr-0 lg:mr-1 text-surface-900 dark:text-surface-0"
                  [ngClass]="{
                    'ng-invalid ng-dirty':
                      cercaStruttureForm.controls.stato.errors?.['required'] &&
                      vm.cercaStruttureFormSubmitted,
                  }"
                  name="stato"
                  appendTo="body"
                  formControlName="stato"
                  placeholder="Seleziona lo stato"
                  showClear="true"
                  optionLabel="stato"
                  ariaLabelledBy="stato"
                  emptyFilterMessage="Nessuno Stato trovato"
                  emptyMessage="Nessuno Stato trovato"
                  [loading]="vm.statiAreLoading"
                  [filter]="true"
                >
                  <ng-template #selectedItem let-selectedOption>
                    <div class="flex items-center gap-2" *ngIf="selectedOption">
                      <img
                        src="./assets/images/flags/{{
                          selectedOption.codiceStato | lowercase
                        }}.png"
                        style="width: 18px; vertical-align: middle"
                        onerror="this.style.display='none'"
                      />
                      <div>{{ selectedOption.stato }}</div>
                    </div>
                  </ng-template>
                  <ng-template let-stato #item>
                    <div class="flex items-center gap-2">
                      <img
                        src="./assets/images/flags/{{
                          stato.codiceStato | lowercase
                        }}.png"
                        style="width: 18px; vertical-align: middle"
                        onerror="this.style.display='none'"
                      />
                      <div>{{ stato.stato }}</div>
                    </div>
                  </ng-template>
                  <ng-template #dropdownicon>
                    <i class="pi pi-map"></i>
                  </ng-template>
                </p-select>
                <!-- <p-autoComplete #acSt
                                formControlName="luogo"
                                [suggestions]="vm.filteredLuoghiEsteso"
                                (completeMethod)="fetchLuogo($event, 1)"
                                (onSelect)="state.set({ filteredLuoghiEsteso: [] })"
                                (onHide)="checkLuogo()"
                                styleClass="w-full"
                                inputStyleClass="w-full"
                                placeholder="Cerca per città, provincia o regione"
                                appendTo="body"
                                minLength="1"
                                [delay]="500"
                                scrollHeight="237px"
                                emptyMessage="Nessun luogo trovato"
                                [showClear]="true"
                                class="flex-auto lg:flex-1 lg:mt-0 w-full mr-0 lg:mr-1 text-surface-900 dark:text-surface-0"
                                [ngClass]="{
                                            'ng-invalid ng-dirty':
                                              cercaStruttureForm.controls.luogo.errors?.['required'] &&
                                                      vm.cercaStruttureFormSubmitted
                                          }"
                                dataKey="dataKey"
                                ariaLabelledBy="luogoAutocomplete"
                                optionLabel="luogo">
                  <ng-template let-luogo
                               #item>
                    <div class="flex align-items-center">
                      @if (luogo.tipo === 'comune') {
                      <fa-icon class="self-center 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="font-light text-xs text-color-secondary">
                          <i>{{
                            luogo.codiceStato === 'ITA'
                            ? 'Comune: '
                            : ('Stato estero: ' | titlecase)
                            }}</i>{{
                          luogo.codiceStato === 'ITA'
                          ? 'Italia → ' +
                          luogo.regione +
                          ' → ' +
                          luogo.provincia +
                          ' → ' +
                          luogo.comune
                          : ''
                          }}</small>
                      </div>
                      } @else if (luogo.tipo === 'stato') {
                      <fa-icon class="self-center fs-16 mr-3 text-color-secondary"
                               [icon]="faGlobeEurope"></fa-icon>
                      <div class="flex flex-col">
                        <span>{{ luogo.stato }}</span>
                        <small class="font-light text-xs 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="font-light text-xs text-color-secondary">
                          <i>Regione:</i>
                          {{'Italia → ' + luogo.regione }}</small>
                      </div>
                      } @else if (luogo.tipo === 'provincia') {
                      <fa-icon class="self-center fs-16 mr-3 text-color-secondary"
                               [icon]="faMapLocationDot"></fa-icon>
                      <div class="flex flex-col">
                        <span>{{ luogo.provincia }}</span>
                        <small class="font-light text-xs text-color-secondary">
                          <i>Provincia:</i>
                          {{
                          'Italia → ' + luogo.regione + ' → ' + luogo.provincia
                          }}</small>
                      </div>
                      }
                    </div>
                  </ng-template>
                </p-autoComplete> -->
              </div>
              <div
                *ngIf="
                  cercaStruttureForm.controls.stato.value &&
                  cercaStruttureForm.controls.stato.value.codiceStato === 'ITA'
                "
                class="flex-1 flex flex-col justify-start items-start gap-2 w-full"
              >
                <div
                  id="regione"
                  class="self-stretch justify-start text-surface-900 dark:text-surface-0 text-base font-normal leading-tight"
                >
                  Regione<small class="text-red-600"
                    >*
                    @if (
                      cercaStruttureForm.controls.regione.errors?.[
                        'required'
                      ] && vm.cercaStruttureFormSubmitted
                    ) {
                      Regione obbligatorio
                    }
                  </small>
                </div>
                <p-select
                  [options]="vm.regioni"
                  class="flex-auto lg:flex-1 lg:mt-0 w-full mr-0 lg:mr-1 text-surface-900 dark:text-surface-0"
                  [ngClass]="{
                    'ng-dirty ng-invalid':
                      cercaStruttureForm.controls.regione.errors?.[
                        'required'
                      ] && vm.cercaStruttureFormSubmitted,
                  }"
                  name="regione"
                  appendTo="body"
                  formControlName="regione"
                  placeholder="Seleziona la regione"
                  showClear="true"
                  optionLabel="regione"
                  ariaLabelledBy="regione"
                  emptyFilterMessage="Nessuna Regione trovata"
                  emptyMessage="Nessuna Regione trovata"
                  [loading]="vm.regioniAreLoading"
                  [filter]="true"
                />
              </div>
              <div
                *ngIf="cercaStruttureForm.controls.regione.value"
                class="flex-1 flex flex-col justify-start items-start gap-2 w-full"
              >
                <div
                  id="provincia"
                  class="self-stretch justify-start text-surface-900 dark:text-surface-0 text-base font-normal leading-tight"
                >
                  Provincia
                </div>
                <p-select
                  [options]="vm.province"
                  class="flex-auto lg:flex-1 lg:mt-0 w-full mr-0 lg:mr-1 text-surface-900 dark:text-surface-0"
                  name="provincia"
                  appendTo="body"
                  formControlName="provincia"
                  placeholder="Seleziona la provincia"
                  showClear="true"
                  optionLabel="provincia"
                  ariaLabelledBy="provincia"
                  emptyFilterMessage="Nessuna Provincia trovata"
                  emptyMessage="Nessuna Provincia trovata"
                  [loading]="vm.provinceAreLoading"
                  [filter]="true"
                >
                </p-select>
              </div>
              <div
                *ngIf="cercaStruttureForm.controls.provincia.value"
                class="flex-1 flex flex-col justify-start items-start gap-2 w-full"
              >
                <div
                  id="citta"
                  class="self-stretch justify-start text-surface-900 dark:text-surface-0 text-base font-normal leading-tight"
                >
                  Città
                </div>
                <p-select
                  [options]="vm.citta"
                  class="flex-auto lg:flex-1 lg:mt-0 w-full mr-0 lg:mr-1 text-surface-900 dark:text-surface-0"
                  name="citta"
                  appendTo="body"
                  formControlName="citta"
                  placeholder="Seleziona la città"
                  showClear="true"
                  optionLabel="comune"
                  ariaLabelledBy="citta"
                  emptyFilterMessage="Nessuna Città trovata"
                  emptyMessage="Nessuna Città trovata"
                  [loading]="vm.cittaAreLoading"
                  [filter]="true"
                >
                </p-select>
              </div>
            </div>
          </div>

          <div
            class="self-stretch flex flex-col justify-start items-start gap-6"
          >
            <div
              class="flex-1 flex flex-col justify-start items-start gap-2 w-full"
            >
              <div
                id="indirizzo"
                class="self-stretch justify-start text-surface-900 dark:text-surface-0 text-base font-normal leading-tight"
              >
                Indirizzo
              </div>
              <input
                type="text"
                class="flex-auto lg:flex-1 lg:mt-0 w-full mr-0 lg:mr-1 text-surface-900 dark:text-surface-0"
                formControlName="indirizzo"
                pInputText
                aria-labelledby="indirizzo"
                placeholder="Inserisci l'indirizzo"
              />
            </div>
          </div>
          <!-- <div class="self-stretch flex flex-col md:flex-row justify-end items-center gap-4">
            <div class="flex-1 flex flex-col justify-start items-start gap-2 w-full">
              <div class="flex align-items-center">
                @if (
                cercaStruttureForm.controls.luogo.value?.tipo === 'comune'
                ) {
                <fa-icon class="self-center fs-16 mr-3 text-color-secondary"
                         [icon]="faCity"></fa-icon>
                <div class="flex flex-col">
                  <span>{{ cercaStruttureForm.controls.luogo.value?.comune
                    }}{{
                    cercaStruttureForm.controls.luogo.value?.codiceStato ===
                    'ITA'
                    ? ' (' +
                    cercaStruttureForm.controls.luogo.value
                    ?.siglaProvincia +
                    ')'
                    : ''
                    }}</span>
                  <small class="font-light text-xs text-color-secondary">
                    <i>{{
                      cercaStruttureForm.controls.luogo.value?.codiceStato ===
                      'ITA'
                      ? 'Comune: '
                      : ('Stato estero: ' | titlecase)
                      }}</i>{{
                    cercaStruttureForm.controls.luogo.value?.codiceStato ===
                    'ITA'
                    ? 'Italia → ' +
                    cercaStruttureForm.controls.luogo.value?.regione +
                    ' → ' +
                    cercaStruttureForm.controls.luogo.value?.provincia +
                    ' → ' +
                    cercaStruttureForm.controls.luogo.value?.comune
                    : ''
                    }}</small>
                </div>
                } @else if (
                cercaStruttureForm.controls.luogo.value?.tipo === 'stato'
                ) {
                <fa-icon class="self-center fs-16 mr-3 text-color-secondary"
                         [icon]="faGlobeEurope"></fa-icon>
                <div class="flex flex-col">
                  <span>{{
                    cercaStruttureForm.controls.luogo.value?.stato
                    }}</span>
                  <small class="font-light text-xs text-color-secondary">
                    {{
                    cercaStruttureForm.controls.luogo.value?.codiceStato ===
                    'ITA'
                    ? ('Stato' | titlecase)
                    : ('Stato estero' | titlecase)
                    }}</small>
                </div>
                } @else if (
                cercaStruttureForm.controls.luogo.value?.tipo === 'regione'
                ) {
                <fa-icon class="fs-16 mr-3 text-color-secondary"
                         [icon]="faMapLocationDot"></fa-icon>
                <div class="flex flex-col">
                  <span>{{
                    cercaStruttureForm.controls.luogo.value?.regione
                    }}</span>
                  <small class="font-light text-xs text-color-secondary">
                    <i>Regione:</i>
                    {{
                    'Italia → ' +
                    cercaStruttureForm.controls.luogo.value?.regione
                    }}</small>
                </div>
                } @else if (
                cercaStruttureForm.controls.luogo.value?.tipo === 'provincia'
                ) {
                <fa-icon class="self-center fs-16 mr-3 text-color-secondary"
                         [icon]="faMapLocationDot"></fa-icon>
                <div class="flex flex-col">
                  <span>{{
                    cercaStruttureForm.controls.luogo.value?.provincia
                    }}</span>
                  <small class="font-light text-xs text-color-secondary">
                    <i>Provincia:</i>
                    {{
                    'Italia → ' +
                    cercaStruttureForm.controls.luogo.value?.regione +
                    ' → ' +
                    cercaStruttureForm.controls.luogo.value?.provincia
                    }}</small>
                </div>
                } @else {
                <div class="flex flex-col">
                  <span>&nbsp;</span>
                  <small class="font-light text-xs text-color-secondary">&nbsp;</small>
                </div>
                }
              </div>
            </div>
          </div> -->

          <div
            class="self-stretch flex flex-col md:flex-row justify-end items-center gap-4"
          >
            <button
              pButton
              severity="secondary"
              class="w-full md:w-auto"
              (click)="cercaStruttureForm.reset()"
              [outlined]="true"
            >
              <span pButtonLabel>Annulla filtri</span>
            </button>
            <button
              pButton
              type="submit"
              [disabled]="vm.isSearching"
              [loading]="vm.isSearching"
              icon="pi pi-search"
              [label]="
                vm.isSearching ? 'Ricerca in corso...' : 'Cerca strutture'
              "
              severity="primary"
              class="w-full md:w-auto"
            ></button>
          </div>
        </div>
      </div>
      <div
        class="flex-auto lg:flex-2 bg-surface-50 dark:bg-surface-900 rounded-2xl border-2 border-dashed border-surface-200 dark:border-surface-700 h-[343px] w-full lg:1/2"
      >
        <google-map #gmap height="100%" width="100%" [options]="options">
          <map-marker
            #marker="mapMarker"
            *ngFor="let markerOption of markerOptions; let i = index"
            [options]="markerOption"
            (mapClick)="openInfoWindow(marker, i)"
          ></map-marker>
          <map-info-window></map-info-window>
        </google-map>
      </div>
    </div>
  </form>

  <p-table
    #struttureTable
    *ngIf="vm.strutture !== undefined"
    [totalRecords]="vm.strutture.length"
    dataKey="id"
    [loading]="vm.struttureAreLoading"
    [value]="vm.strutture"
    [columns]="cols"
    [showCurrentPageReport]="!vm.struttureAreLoading"
    responsiveLayout="scroll"
    currentPageReportTemplate="Strutture {first} - {last} di {totalRecords}"
    [paginator]="true"
    [rows]="10"
    [autoLayout]="false"
    responsiveLayout="stack"
    scrollHeight="400px"
    [rowsPerPageOptions]="[10, 50, 100]"
    [globalFilterFields]="[
      'struttura.nome',
      'struttura.struttureTipiStrutture',
    ]"
  >
    <ng-template #caption>
      <div class="flex">
        <p-iconfield iconPosition="left" class="ml-auto">
          <p-inputicon>
            <i class="pi pi-search"></i>
          </p-inputicon>
          <input
            pInputText
            type="text"
            aria-label="Filtra strutture"
            (input)="applyFilterGlobal($event, 'contains')"
            placeholder="Filtra strutture"
          />
        </p-iconfield>
      </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>
          </div>
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-row let-rowIndex="rowIndex">
      <tr>
        <ng-container *ngFor="let col of cols" [ngSwitch]="col.field">
          <td *ngSwitchCase="'struttura.struttureTipiStrutture'">
            <div>
              <ng-container
                *ngFor="
                  let item of row.struttura.struttureTipiStrutture.split(',')
                "
              >
                <span class="font-light">{{ item.trim() }}</span
                ><br />
              </ng-container>
            </div>
          </td>
          <td *ngSwitchCase="'struttura.nome'">
            <div>
              <p-rating
                *ngIf="row.struttura.stelline.length"
                [(ngModel)]="row.struttura.stelline.length"
                [readonly]="true"
              />
              <p>
                <b>{{ row.struttura.nome }}</b>
              </p>
            </div>
            <div *ngIf="row.struttura.sitoWeb" class="mt-4 ont-light">
              <a
                class="cursor-pointer hover:underline text-primary-700"
                (click)="externalLink(row.struttura.sitoWeb)"
                >Sito Web</a
              >
            </div>
          </td>
          <td *ngSwitchCase="'indirizzo'">
            <span class="font-light">
              <p>
                {{ row.struttura.indirizzo
                }}{{
                  row.struttura.numeroCivico
                    ? ', ' + row.struttura.numeroCivico
                    : ''
                }}
              </p>
              <p>
                {{ row.struttura.cap }}
                {{
                  row.struttura.codiceLuogo
                    ? row.struttura.codiceLuogo.comune +
                      ' (' +
                      row.struttura.codiceLuogo.siglaProvincia +
                      ')'
                    : ''
                }}
              </p>
              <div class="text-sm" *ngIf="row.struttura.cupPubblico">
                CUP Pubblico:
                <a
                  class="cursor-pointer hover:underline text-primary-700"
                  href="tel:{{ row.struttura.cupPubblico }}"
                  >{{ row.struttura.cupPubblico }}</a
                >
              </div>
              <div *ngIf="row.struttura.cupPrivato" class="text-sm">
                CUP Privato:
                <a
                  class="cursor-pointer hover:underline text-primary-700"
                  href="tel:{{ row.struttura.cupPrivato }}"
                  >{{ row.struttura.cupPrivato }}</a
                >
              </div>
              <ng-container
                *ngIf="!row.struttura.cupPubblico && !row.struttura.cupPrivato"
              >
                <div *ngIf="row.struttura.telefono1" class="text-sm">
                  tel:
                  <a
                    class="cursor-pointer hover:underline text-primary-700"
                    href="tel:{{ row.struttura.telefono1 }}"
                    >{{ row.struttura.telefono1 }}</a
                  >
                </div>
                <div *ngIf="row.struttura.telefono2" class="text-sm">
                  tel:
                  <a
                    class="cursor-pointer hover:underline text-primary-700"
                    href="tel:{{ row.struttura.telefono2 }}"
                    >{{ row.struttura.telefono2 }}</a
                  >
                </div>
              </ng-container>
            </span>
          </td>

          <td *ngSwitchCase="'posizione'">
            <div class="flex align-items-center">
              <p-button
                icon="pi pi-map-marker"
                label="Apri in Google Maps"
                [rounded]="true"
                styleClass="hover:underline text-primary-700"
                (onClick)="calculateMapsLink(row)"
                [text]="true"
              />
            </div>
          </td>
        </ng-container>
      </tr>
    </ng-template>
    <ng-template #emptymessage>
      <tr>
        <td colspan="3">Nessuna struttura trovata.</td>
      </tr>
    </ng-template>
  </p-table>
</div>
<p-toast />