<ion-header class="header-subpage" no-border>
    <ion-toolbar>
      <ion-title class="titolo-sezione-head">{{ 'segreteria_titolo' | translate }}</ion-title>
    </ion-toolbar>
  </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 *ngIf="platform.is('desktop')" class="grigio">
                <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">
              </div>
              <ion-row class="float-date" *ngIf="!platform.is('desktop')" class="grigio">
                <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>
              </ion-row>
            </ion-row>
            <ion-row class="search-date">
              <div class="riga"><input placeholder="{{ 'cerca_progetto' | translate }}" type="text" name="calendar" [(ngModel)]="nProgNotula" title="{{ 'cerca_progetto' | translate }}" class="cerca-notula"><input 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>    
            <ion-list *ngFor="let fattura of fatture; trackBy: trackByDoc" class="row-results"> 
              <!--<ion-col class="col">
                <p>{{fattura.nrProgNotula}}</p>
              </ion-col>
              <ion-col class="col">
                <p>{{fattura.dataProgNotula}}</p>
              </ion-col>
              <ion-col class="col">
                <p>{{fattura.nrNotula}}</p>
              </ion-col>
              <ion-col class="col">
                <p>{{fattura.dataNotula}}</p>
              </ion-col>-->
              <div class="table-row">
                <div class="row-download-special">
                  <div class="group-icon">
                    <a *ngIf="platform.is('desktop')" href="{{fattura.urlProgNotula}}" target="_blank" download tappable>
                      <ion-icon name="cloud-download"></ion-icon>
                    </a>
                    <ion-icon name="share-alt" *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">
                    <a *ngIf="platform.is('desktop') && fattura.nrNotula != null" href="{{fattura.urlNotula}}" target="_blank" download tappable>
                      <ion-icon name="cloud-download"></ion-icon>
                    </a>
                    <ion-icon name="share-alt" *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 *ngIf="!platform.is('desktop')" name="privacy" [(ngModel)]="fattura.checked" class="check" (click)="checkSelected(fattura.id)"> </ion-checkbox>
                <div class="row-text-special">
                  {{ 'text_progetto' | translate }} {{fattura.nrProgNotula}}
                  <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>
          </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>