<ion-header class="header-subpage" no-border>
    <ion-toolbar>
      <ion-title class="titolo-sezione-head">domanda / risposta</ion-title>
    </ion-toolbar>
  </ion-header>


<ion-content class="chats">
  <!--<ion-menu side="start" menu-id="topics">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Topics</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-button expand="block" (click)="createNewTopics()">Crea nuovo Topic</ion-button>
      <ion-list *ngFor="let topic of topics; trackBy: trackByDoc">
        <ion-item (click)="apriTopic(topic.idRichiesta)">{{topic.titolo}}</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>-->

  <div class="contenitore-home">
    <div class="central-doc">
      <div [ngSwitch]="intervista" ngDefaultControl>

          <div *ngSwitchCase="'lista'">
            <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"> <ion-button (click)="caricaRichieste()" class="search-arrow" title="Cerca domande/risposte"><ion-icon class="button-icon" slot="icon-only" name="arrow-round-forward"></ion-icon></ion-button>
                </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>
                  <ion-button (click)="caricaRichieste()" class="search-arrow"><ion-icon class="button-icon" slot="icon-only" name="arrow-round-forward"></ion-icon></ion-button>
                </div>
              </ion-row>
              <ion-list *ngFor="let topic of topics; trackBy: trackByDoc" class="chat-list">
                <div class="row-chat-list">
                  <div class="data" text-wrap>
                    {{topic.data}}
                    <a class="select" (click)="apriTopic(topic.idRichiesta)" tappable title="Visualizza Dettagli">
                      <ion-icon name="arrow-round-forward"></ion-icon>
                    </a>                  
                    <a class="select" (click)="loadTopics('after')" tappable title="Aggiorna domande/risposte">
                      <ion-icon name="refresh-circle"></ion-icon>
                    </a>
                    <div text-wrap>{{topic.titolo}}</div>
                  </div>
                </div>
              </ion-list>
              <!--<div class="foo-button" center>
                <div class="round-btn">
                  <a (click)="createNuovoParere()" tappable>
                    <ion-icon name="add" [style.color]="'#FFFFFF'"></ion-icon>
                  </a>
                </div>
              </div>-->
            </ion-grid>
          </div>

          <div *ngSwitchCase="'dettaglio'">
            <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"> <ion-button (click)="caricaTopic()" class="search-arrow" title="Cerca interventi"><ion-icon class="button-icon" slot="icon-only" name="arrow-round-forward"></ion-icon></ion-button>
                </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>
                  <ion-button (click)="caricaTopic()" class="search-arrow"><ion-icon class="button-icon" slot="icon-only" name="arrow-round-forward"></ion-icon></ion-button>
                </div>
              </ion-row>
              <div class="back">
                <a (click)="apriLista()" tappable>
                  <ion-icon name="arrow-round-back" [style.color]="'#2b94d1'" title="Torna alla lista di domande/risposte"></ion-icon>
                </a>
              </div>
              <div class="quesito">
                {{topicAttivo.titolo}}
              </div>
              <div class="from-me" *ngIf="topicAttivo.testo != null">
                <div class="io">io - {{topicAttivo.data}}</div>
                <p>{{topicAttivo.testo}}</p>
              </div>
              <div class="clr"></div>
              <div *ngFor="let intervento of topicAttivo.interventi;">
                <div class="from-me" *ngIf="intervento.utente == null">
                  <div class="io">io - {{intervento.data}}</div>
                  <p>{{intervento.testo}}</p>
                </div>
                <div class="from-them" *ngIf="intervento.utente != null">
                  <div class="operatore">{{intervento.utente}} - {{intervento.data}}</div>
                  <p>{{intervento.testo}}</p>
                </div>	
                <div class="clr"></div>
              </div>
            </ion-grid>
          </div>

          <div *ngSwitchCase="'new'">
            <div class="back">
              <a (click)="apriLista()" tappable>
                <ion-icon name="arrow-round-back" [style.color]="'#2b94d1'" title="Torna alla lista di domande/risposte"></ion-icon>
              </a>
            </div>
            <div class="clr"></div>
            <form #form="ngForm" (ngSubmit)="saveNewTopic(form)">
              <div>
                <ion-item class="title-question">
                  <ion-input class="item-no-border" name="title" type="text" placeholder="inserire qui il titolo" ngModel required></ion-input>
                </ion-item>
              </div>
              <div>
                <ion-item class="question-extended item-no-border">
                  <ion-textarea name="question" placeholder="inserire qui la domanda" ngModel required></ion-textarea>
                </ion-item>
              </div>
              <div class="send">
                <ion-button type="submit" size="large" [disabled]="form.invalid" expand="block" color="#fcc73d">invia</ion-button>
              </div>
              <div class="undo">
                <ion-button size="large" expand="block" (click)="apriLista()">annulla</ion-button>
              </div>
            </form>
          </div>





            <!--<div class="ion-page" main>
                <ion-content padding>
            <ion-grid align-items-center>
                <ion-row>
                  <ion-button expand="block" (click)="openSideMenu()">Visualizza Elenco Topics</ion-button>
                </ion-row>
                <ion-row *ngIf="platform.is('desktop') && topicAttivo.titolo != null"> 
                    <ion-col>
                      <ion-grid>
                        <ion-row text-center center>
                          <ion-col>
                            <ion-label floating>Da:</ion-label>
                          </ion-col>
                          <ion-col>
                            <input type="date" name="calendar" [(ngModel)]="date1">
                          </ion-col>
                          <ion-col>
                            <ion-label floating>A:</ion-label>
                          </ion-col>
                          <ion-col>
                            <input type="date" name="calendar" [(ngModel)]="date2">
                          </ion-col>
                          <ion-col>
                            <ion-button color="light" (click)="caricaTopic()">Cerca</ion-button>
                          </ion-col>
                        </ion-row>
                      </ion-grid>
                    </ion-col>
                    <ion-col></ion-col>
                  </ion-row>
              <ion-row *ngIf="!platform.is('desktop') && topicAttivo.titolo != null">
                <ion-col>
                  <ion-grid>
                    <ion-row text-center center>
                      <ion-col>
                        <ion-label floating>Da:</ion-label>
                      </ion-col>
                      <ion-col>
                        <ion-icon name="calendar" (click)="setDateDa()"></ion-icon> 
                      </ion-col>
                      <ion-col>
                        {{date1}}
                      </ion-col>
                      <ion-col>
                        <ion-label floating>A:</ion-label>
                      </ion-col>
                      <ion-col>
                          <ion-icon name="calendar" (click)="setDateA()"></ion-icon>
                      </ion-col>
                      <ion-col>
                        {{date2}}
                      </ion-col>
                      <ion-col>
                        <ion-button color="light" (click)="caricaTopic()">Cerca</ion-button>
                      </ion-col>
                    </ion-row>
                  </ion-grid>
                </ion-col>
                <ion-col></ion-col>
              </ion-row>
              </ion-grid>
              
                

            <div>
              <h2>{{topicAttivo.titolo}}</h2>
              <div id="content">
                <ion-item lines="full" *ngIf="topicAttivo.testo != null">-->
                  <!--<div class="chat-status" text-right >
                    <span class="chat-date">{{topicAttivo.data}}</span>
                    <span class="chat-content-center">{{topicAttivo.testo}}</span>
                  </div>-->
                  <!--<div #message class="message">
                    <div class="chat-message" text-right>
                      <div class="right-bubble">
                        <span class="msg-name">Me </span>
                        <span class="msg-date">{{topicAttivo.data}}</span>
                        <p text-wrap>{{topicAttivo.testo}}</p>
                      </div>
                    </div>
                  </div>
                </ion-item>
                <ion-list *ngFor="let intervento of topicAttivo.interventi;">
                  <ion-item lines="full" *ngIf="intervento.utente == null">-->
                    <!--<div class="chat-status" text-right >
                      <span class="chat-date">{{intervento.data}}</span>
                      <span class="chat-content-center">{{intervento.testo}}</span>
                    </div>-->
                    <!--<div #message class="message">
                      <div class="chat-message" text-right>
                        <div class="right-bubble">
                          <span class="msg-name">Me </span>
                          <span class="msg-date">{{intervento.data}}</span>
                          <p text-wrap>{{intervento.testo}}</p>
                        </div>
                      </div>
                    </div>
                  </ion-item>
                  <ion-item lines="full" *ngIf="intervento.utente != null">-->
                    <!--<div class="chat-status" text-left>
                      <span class="chat-date">{{intervento.data}}</span>
                      <span class="chat-content-center">{{intervento.testo}}</span>
                    </div>-->
                    <!--<div #message class="message">
                      <div class="chat-message" text-left>
                        <div class="left-bubble">
                          <span class="msg-name">{{intervento.utente}}</span>
                          <span class="msg-date">{{intervento.data}}</span>
                          <p text-wrap>{{intervento.testo}}</p>
                        </div>
                      </div>
                    </div>
                  </ion-item>
                </ion-list>
              </div>
            </div>
            </ion-content>
              

              <ion-footer [hidden]="topicAttivo.titolo == null">-->
                <!--<form #form="ngForm"> 
                  <ion-grid>
                    <ion-row>
                      
                        <ion-col col-10>
                          <ion-input id= "message" type="text" placeholder="Digita un messaggio" name="message" [(ngModel)]="message"></ion-input> 
                        </ion-col>
                        <ion-col col-2>
                          <ion-icon name="paper-plane" (click)="aggiungiIntervento(form)"></ion-icon>
                        </ion-col>
                        
                    </ion-row>
                  </ion-grid>
                </form>-->
              <!--</ion-footer>
          
            
          </div>
        </div>-->
  <!--<div id="modal"></div>
  <div id="content"></div>-->
      </div>
    </div>
  </div>
</ion-content>

<ion-footer class="footer-parere" no-border *ngIf="bottoneVisibile" id="footer-interviste">
  <form #form="ngForm" *ngIf="formInserisciIntervento">
    <ion-grid>
      <ion-row>
        
          <ion-col col-10>
            <ion-input class="input-intervento" id= "message" type="text" placeholder="Digita un messaggio" name="message" [(ngModel)]="message"></ion-input> 
          </ion-col>
          <ion-col col-2>
            <ion-icon name="paper-plane" (click)="aggiungiIntervento(form)" tappable title="Inserisci intervento"></ion-icon>
          </ion-col>
          
      </ion-row>
    </ion-grid>
  </form>
  <div class="foo-button" center>
    <div class="round-btn">
      <a (click)="apriEdit()" tappable title="Aggiungi argomento/intervento">
        <ion-icon name="add" [style.color]="'#FFFFFF'"></ion-icon>
      </a>
    </div>
  </div>
</ion-footer>
