<ion-header class="header" no-border>
  <ion-grid class="header-subpage">
      <ion-row justify-content-center>
        <ion-col align-self-center size-lg="7">
          <ion-toolbar color="#2b94d1">
            <ion-buttons slot="start" title="{{'uscita' | translate}}" style="visibility: hidden;">
              <ion-icon name="share" color="light" class="exit" tappable></ion-icon>
            </ion-buttons>
            <ion-toolbar>
              <ion-title class="titolo-sezione-head">{{ 'segreteria_titolo' | translate }}</ion-title>
            </ion-toolbar>
            <ion-buttons (click)="condividiFatture()" slot="end" title="{{'uscita' | translate}}" id="buttons" style="visibility: hidden;">
              <ion-icon name="share" color="light" class="exit" tappable></ion-icon>
            </ion-buttons>
          </ion-toolbar>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-header>

<ion-content overflow-scroll="true">
  <div class="contenitore-home">
    <div class="central-doc">
      <!--<div padding>
        <ion-segment [(ngModel)]="segreteria">
          <ion-segment-button value="preventivi" (click)="redirectTo2p2()"> 
            Preventivi e Pagamenti
          </ion-segment-button>
          <ion-segment-button value="fatture">
            Fatture e Progetti
          </ion-segment-button>
          <ion-segment-button value="estratto">
            Estratto conto
          </ion-segment-button>
          <ion-segment-button value="solleciti">
            Solleciti 
          </ion-segment-button>
        </ion-segment>
        
      </div>--> 
      <div [ngSwitch]="segreteria" ngDefaultControl>

        <ion-row class="selection item-no-border" no-margin>
          <ion-label>{{ 'seleziona_struttura' | translate }}</ion-label>
          <ion-select value="clienteSel" [(ngModel)]="idStrutturaSel" (ionChange)="cambiaStruttura()" no-scroll title="{{ 'seleziona_struttura' | translate }}">
            <ion-icon name="arrow-forward"></ion-icon>
            <ion-select-option *ngFor="let struttura of strutture;" value="{{struttura.id}}">{{struttura.denominazione}}</ion-select-option> 
          </ion-select>
        </ion-row>
        <ion-text class="selection-done margin-top" style="padding-left: 5px;">
          {{ 'struttura_sel' | translate }} </ion-text>
        <div class="clr"></div>
        <p class="grigio selection-done" style="padding-left: 5px;"><strong>{{strutturaSel.denominazione}}</strong>
        </p> 

        <ion-list *ngSwitchCase="'fatture'" ngDefaultControl>
          <ion-grid>
            <ion-row class="search-date">
              <div class="riga">
                <ion-checkbox name="privacy" [(ngModel)]="visualizzaProgetti" class="check2"> </ion-checkbox>
                <ion-label>{{ 'visualizza_progetti' | translate }}</ion-label>
              </div>                
            </ion-row>
            <ion-row class="search-date">
              <div *ngIf="platform.is('desktop')" class="search-date grigio">
                <span class="riga"><strong>{{ 'cerca' | translate }}</strong> {{ 'da' | translate }} <input type="date" name="calendar" [(ngModel)]="date1" title="{{ 'seleziona_data' | translate }}" class="grigio"> {{ 'a' | translate }} <input type="date" name="calendar" [(ngModel)]="date2" title="{{ 'seleziona_data' | translate }}" class="grigio">
                <ion-button (click)="resetDate()" class="search-arrow-red" title="{{ 'reset_documenti' | translate }}"><ion-icon class="button-icon" slot="icon-only" name="close" title="{{ 'cerca_documenti' | translate }}"></ion-icon></ion-button></span>
              </div>
              <ion-row *ngIf="!platform.is('desktop')" class=" search-date grigio">
                <span class="riga">
                  <span class="float-date">
                    <span class="date-text"><strong>{{ 'cerca' | translate }}</strong> {{ 'da' | translate }} </span>
                    <ion-icon class="element-date date-icon" name="calendar" (click)="setDateDa()"></ion-icon>
                    <div class="element-date item-no-border date-text">
                      {{date1}}
                    </div> 
                    <span class="date-text">{{ 'a' | translate }}</span>
                    <ion-icon floating class="element-date date-icon" name="calendar" (click)="setDateA()"></ion-icon> 
                    <div floating class="element-date item-no-border date-text">
                      {{date2}}
                    </div>
                  </span>
                  <ion-button (click)="resetDate()" class="search-arrow-red search-arrow-dev" title="{{ 'reset_documenti' | translate }}"><ion-icon class="button-icon" slot="icon-only" name="close" title="{{ 'cerca_documenti' | translate }}"></ion-icon></ion-button></span>
              </ion-row>
            </ion-row>
            <ion-row class="search-date">
              <div class="riga">
                <input *ngIf="visualizzaProgetti" placeholder="{{ 'cerca_progetto' | translate }}" type="text" name="calendar" [(ngModel)]="nProgNotula" title="{{ 'cerca_progetto' | translate }}" class="cerca-notula">
                <input *ngIf="!visualizzaProgetti" placeholder="{{ 'cerca_notula' | translate }}" type="text" name="calendar" [(ngModel)]="nNotula" title="{{ 'cerca_notula' | translate }}" class="cerca-notula">
                <ion-button (click)="cercaFatture()" class="search-arrow" title="{{ 'cerca' | translate }}"><ion-icon class="button-icon" slot="icon-only" name="arrow-round-forward" title="{{ 'cerca' | translate }}"></ion-icon></ion-button>
              </div>
            </ion-row>
            <!--<ion-row class="search-date" id="buttons" style="display:none"> 
                <div><span class="condividi-text">{{ 'condividi' | translate }}</span>
                <ion-button (click)="condividiFatture()" class="search-arrow" title="{{ 'condividi_fatture' | translate }}"><ion-icon class="button-icon" slot="icon-only" name="share" title="{{ 'condividi_fatture' | translate }}"></ion-icon></ion-button></div>
            </ion-row>-->
            <ion-row class="search-date-border">
            </ion-row>
            <span *ngIf="platform.is('desktop')">
              <ion-list *ngFor="let fattura of fatture; trackBy: trackByDoc" class="row-results">
                <div class="table-row">
                  <div class="row-download-special">
                    <div class="group-icon" *ngIf="visualizzaProgetti">
                      <a *ngIf="platform.is('desktop')" href="{{fattura.urlProgNotula}}" target="_blank" download tappable>
                        <ion-icon name="cloud-download"></ion-icon>
                      </a>
                      <ion-label>{{ 'progetto' | translate }}</ion-label>
                    </div>
                    <div class="group-icon" *ngIf="!visualizzaProgetti">
                      <a *ngIf="platform.is('desktop') && fattura.nrNotula != null" href="{{fattura.urlNotula}}" target="_blank" download tappable>
                        <ion-icon name="cloud-download"></ion-icon>
                      </a>
                      <ion-label *ngIf="fattura.nrNotula != null">{{ 'notula' | translate }}</ion-label>
                    </div>
                  </div>
                  <div class="row-text-special" *ngIf="visualizzaProgetti">
                    {{ 'text_progetto' | translate }} {{fattura.nrProgNotula}}
                    <div class="detail">
                      {{ 'text_data_progetto_notula' | translate }} {{fattura.dataProgNotula}}
                    </div>
                    <!--<div *ngIf="!platform.is('desktop')" class="detail detail-margin">
                      {{ 'text_notula' | translate }} {{fattura.nrNotula}}
                    </div>
                    <div *ngIf="platform.is('desktop')" class="detail">
                      {{ 'text_notula' | translate }} {{fattura.nrNotula}}
                    </div>-->
                  </div>
                  <div class="row-text-special" *ngIf="!visualizzaProgetti && fattura.nrNotula != null">
                    {{ 'text_notula' | translate }} {{fattura.nrNotula}}
                    <div class="detail">
                      {{ 'text_data_notula' | translate }} {{fattura.dataNotula}}
                    </div>
                    <!--<div *ngIf="!platform.is('desktop')" class="detail detail-margin">
                      {{ 'text_notula' | translate }} {{fattura.nrNotula}}
                    </div>
                    <div *ngIf="platform.is('desktop')" class="detail">
                      {{ 'text_notula' | translate }} {{fattura.nrNotula}}
                    </div>-->
                  </div>
                </div>
              </ion-list>
            </span>
            <span *ngIf="!platform.is('desktop')">
              <ion-list *ngFor="let fattura of fatture; trackBy: trackByDoc" class="row-results" (click)="selection?toggleGroup(fattura.id):selectItem(fattura.id)"
              (press)="selectItem(fattura.id)" [ngStyle]="{'background-color': fattura.checked ? '#c3ddec' : '#ffffff'}">
                <div class="table-row">
                  <div class="row-download-special">
                    <div class="group-icon" *ngIf="visualizzaProgetti">
                      <ion-icon name="eye" *ngIf="!platform.is('desktop')" (click)="getNotula(fattura.id, fattura.nrProgNotula, true);" target="_blank" download tappable></ion-icon>
                      <ion-label>{{ 'progetto' | translate }}</ion-label>
                    </div>
                    <div class="group-icon" *ngIf="!visualizzaProgetti">
                     <ion-icon name="eye" *ngIf="!platform.is('desktop') && fattura.nrNotula != null" (click)="getNotula(fattura.id, fattura.nrNotula, false);" target="_blank" download tappable></ion-icon>
                      <ion-label *ngIf="fattura.nrNotula != null">{{ 'notula' | translate }}</ion-label>
                    </div>
                  </div>
                  <ion-checkbox name="privacy" [(ngModel)]="fattura.checked" class="check" (click)="checkSelected(fattura.id)"> </ion-checkbox>
                  <div class="row-text-special" *ngIf="visualizzaProgetti">
                    {{ 'text_progetto' | translate }} {{fattura.nrProgNotula}}
                    <div class="detail">
                      {{ 'text_data_progetto_notula' | translate }} {{fattura.dataProgNotula}}
                    </div>
                    <!--<div *ngIf="!platform.is('desktop')" class="detail detail-margin">
                      {{ 'text_notula' | translate }} {{fattura.nrNotula}}
                    </div>
                    <div *ngIf="platform.is('desktop')" class="detail">
                      {{ 'text_notula' | translate }} {{fattura.nrNotula}}
                    </div>-->
                  </div>
                  <div class="row-text-special" *ngIf="!visualizzaProgetti && fattura.nrNotula != null">
                    {{ 'text_notula' | translate }} {{fattura.nrNotula}}
                    <div class="detail">
                      {{ 'text_data_notula' | translate }} {{fattura.dataNotula}}
                    </div>
                    <!--<div *ngIf="!platform.is('desktop')" class="detail detail-margin">
                      {{ 'text_notula' | translate }} {{fattura.nrNotula}}
                    </div>
                    <div *ngIf="platform.is('desktop')" class="detail">
                      {{ 'text_notula' | translate }} {{fattura.nrNotula}}
                    </div>-->
                  </div>
                </div>
              </ion-list>
            </span>
          </ion-grid>
        </ion-list>

        <ion-list *ngSwitchCase="'estratto'" ngDefaultControl>
          <div class="title-infra">
            {{ 'estratto_conto' | translate }}
          </div>                               
        </ion-list>

        <ion-list *ngSwitchCase="'solleciti'" ngDefaultControl>
          <ion-item>
            <h2>{{ 'solleciti' | translate }}</h2>
          </ion-item>
        </ion-list>
        
      </div>
    </div>
  </div>
</ion-content>

<ion-footer class="footer-tabs" no-border>
  <div class="contenitore-home footer">
    <div class="box-footer">
      <ion-tabs class="footer-toolbar">
        <ion-tab-bar class="footer-tabbar" [(ngModel)]="segreteria" ngDefaultControl>
          <ion-tab-button value="preventivi" (click)="redirectTo2p2()">
            <img src="assets/icon/prev-pagam-grigio.svg" class="icon-footer">
            <ion-label>{{ 'preventivi' | translate }}</ion-label>
          </ion-tab-button>
          <ion-tab-button value="fatture" (click)="changeSel('fatture')">
            <img src="assets/icon/fatture-progetti-bianco.svg" id="icon-fatture" class="icon-footer">
            <ion-label id="label-fatture" style="color: white;">{{ 'fatture' | translate }}</ion-label>
          </ion-tab-button>
          <ion-tab-button value="estratto" (click)="downloadEstrattoConto('estratto')"> 
            <img src="assets/icon/estratto-conto-grigio.svg" id="icon-estratto" class="icon-footer">
            <ion-label id="label-estratto">{{ 'estratto_conto' | translate }}</ion-label>
          </ion-tab-button>
          <!--<ion-tab-button  value="solleciti" (click)="changeSel('solleciti')">
            <img src="assets/icon/solleciti-grigio.svg" id="icon-solleciti" class="icon-footer">
            <ion-label id="label-solleciti">{{ 'solleciti' | translate }}</ion-label>
          </ion-tab-button>-->
        </ion-tab-bar>
      </ion-tabs>
    </div>
  </div>
</ion-footer>