<ion-header class="header-subpage" no-border>
    <ion-toolbar>
      <ion-title class="titolo-sezione-head">la segreteria</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-list *ngSwitchCase="'fatture'" ngDefaultControl>
          <ion-grid>
            <ion-row *ngIf="platform.is('desktop')">
              <ion-col class="block-date">              
                <ion-label floating class="element-date"><strong>Cerca</strong> da</ion-label>                
                <input floating class="input-date element-date" type="date" name="calendar" [(ngModel)]="date1">                
                <ion-label floating class="element-date">a</ion-label>                
                <input floating class="element-date input-date" type="date" name="calendar" [(ngModel)]="date2">                
                <ion-button floating fill="clear" class="button-date element-date" (click)="cercaFatture()">
                    <ion-icon class="button-icon" slot="icon-only" name="arrow-round-forward"></ion-icon>
                </ion-button>
              </ion-col>
            </ion-row>
            <ion-row *ngIf="!platform.is('desktop')">
              <ion-col>
                <ion-grid>
                  <ion-row text-center center>
                    <ion-label floating class="element-date"><strong>Cerca</strong> da</ion-label>
                    <ion-icon floating class="element-date" name="calendar" (click)="setDateDa()"></ion-icon>
                    <ion-item floating class="element-date">
                      {{date1}}
                    </ion-item>
                    <ion-label floating class="element-date">a</ion-label>
                    <ion-icon floating class="element-date" name="calendar" (click)="setDateA()"></ion-icon>
                    <ion-item floating class="element-date">
                      {{date2}}
                    </ion-item>
                    <ion-button floating fill="clear" class="button-date element-date" (click)="cercaFatture()">
                        <ion-icon class="button-icon" slot="icon-only" name="arrow-round-forward"></ion-icon>
                    </ion-button>
                  </ion-row>
                </ion-grid>
              </ion-col>
              <ion-col></ion-col>
            </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">Progetto</ion-icon>
                    </a>
                    <ion-icon name="cloud-download" *ngIf="!platform.is('desktop')" (click)="getNotula(fattura.id, fattura.nrProgNotula, true);" target="_blank" download tappable>Progetto</ion-icon>
                    <ion-label>Progetto</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">Notula</ion-icon>
                    </a>
                    <ion-icon name="cloud-download" *ngIf="!platform.is('desktop') && fattura.nrNotula != null" (click)="getNotula(fattura.id, fattura.nrNotula, false);" target="_blank" download tappable>Notula</ion-icon>
                    <ion-label *ngIf="fattura.nrNotula != null">Notula</ion-label>
                  </div>
                </div>
                <div class="row-text-special">
                  Progetto Notula n. {{fattura.nrProgNotula}}
                  <div class="detail">
                    Data Notula: {{fattura.dataNotula}} - Notula n. {{fattura.nrNotula}}
                  </div>
                </div>
              </div>
            </ion-list>
          </ion-grid>
        </ion-list>
        <ion-list *ngSwitchCase="'estratto'" ngDefaultControl>
          <div class="title-infra">
            Estratto conto
          </div>
          <ion-item class="selection item-no-border" no-margin no-padding>
            <ion-label>Seleziona la struttura</ion-label>
            <ion-select value="clienteSel" [(ngModel)]="idStrutturaSel" (ionChange)="cambiaStruttura()" no-scroll>
              <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-item>
          <ion-text class="selection-done margin-top">
            La struttura che hai selezionato è </ion-text>
            <div class="download item-no-border">
                <a *ngIf="!platform.is('desktop')" (click)="getEstrattoConto(idCliente, 'EstrattoConto.pdf', strutturaSel.id);" target="_blank" download tappable>
                  <ion-icon name="cloud-download" class="download-icon"></ion-icon></a>
                <a *ngIf="platform.is('desktop')" href="http://localhost:8080/stman/intranet/estrattoconto.do?idcliente={{idCliente}}&idstruttura={{strutturaSel.id}}" target="_blank" download tappable>
                  <ion-icon name="cloud-download" class="download-icon"></ion-icon></a>
            </div>
          <ion-text class="grigio selection-done" text-wrap> <br/><strong>{{strutturaSel.denominazione}}</strong>
          </ion-text>                      
        </ion-list>
        <ion-list *ngSwitchCase="'solleciti'" ngDefaultControl>
          <ion-item>
            <h2>Solleciti</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()">
            <ion-icon src="assets/icon/prev-pagam-grigio.svg" class="icon-footer"></ion-icon>
            <ion-label>Prev./Pagam.</ion-label>
          </ion-tab-button>
          <ion-tab-button value="fatture" (click)="changeSel('fatture')">
            <ion-icon src="assets/icon/fatture-progetti-bianco.svg" id="icon-fatture" class="icon-footer"></ion-icon>
            <ion-label id="label-fatture" style="color: white;">Fatture e Progetti</ion-label>
          </ion-tab-button>
          <ion-tab-button value="estratto" (click)="changeSel('estratto')"> 
            <ion-icon src="assets/icon/estratto-conto-grigio.svg" id="icon-estratto" class="icon-footer"></ion-icon>
            <ion-label id="label-estratto">Estratto Conto</ion-label>
          </ion-tab-button>
          <ion-tab-button  value="solleciti" (click)="changeSel('solleciti')">
            <ion-icon src="assets/icon/solleciti-grigio.svg" id="icon-solleciti" class="icon-footer"></ion-icon>
            <ion-label id="label-solleciti">Solleciti</ion-label>
          </ion-tab-button>
        </ion-tab-bar>
      </ion-tabs>
    </div>
  </div>
</ion-footer>