<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 class="search-date">
              <div *ngIf="platform.is('desktop')">
                <strong>Cerca</strong> da <input type="date" name="calendar" [(ngModel)]="date1" title="Seleziona una data"> a <input type="date" name="calendar" [(ngModel)]="date2" title="Seleziona una data">
              </div>
              <div class="float-date" *ngIf="!platform.is('desktop')">
                <span class="date-text"><strong>Cerca</strong> da </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</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>
              </div>
            </ion-row>
            <ion-row class="search-date">
              <div><strong>Cerca</strong> n° prog. not. <input type="text" name="calendar" [(ngModel)]="nProgNotula" title="Seleziona una data"></div>
            </ion-row>
            <ion-row class="search-date">
              <div><strong>Cerca</strong> n° not. <input type="text" name="calendar" [(ngModel)]="nNotula" title="Seleziona una data">
                <ion-button (click)="cercaFatture()" class="search-arrow"><ion-icon class="button-icon" slot="icon-only" name="arrow-round-forward" title="Cerca fatture"></ion-icon></ion-button></div>
            </ion-row>
            <ion-row class="search-date" id="buttons" style="display:none"> 
                <div><span class="condividi-text">Condividi documenti</span>
                <ion-button (click)="condividiFatture()" class="search-arrow" title="Condividi documenti"><ion-icon class="button-icon" slot="icon-only" name="share-alt" title="Condividi documenti"></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">Progetto</ion-icon>
                    </a>
                    <ion-icon name="share-alt" *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="share-alt" *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>
                <ion-checkbox *ngIf="!platform.is('desktop')" name="privacy" [(ngModel)]="fattura.checked" class="check" (click)="checkSelected(fattura.id)"> </ion-checkbox>
                <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 title="Seleziona una struttura">
              <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" title="Scarica estratto conto"></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>