<!--Questionnaire results added by Daykel Muro  on 09/30/2019 MOdified 10/13/2019-->
<admin-header></admin-header>
<div class="container_page">
    <div class="container" *ngIf="results.length === 0">
        <mat-card class="quest-id-card">
            <h2 matDialogTitle>{{'No questionnaires have been submitted yet' | translate}}</h2>
        </mat-card>
    </div>

    <div align="center" *ngIf="results.length != 0">
      <button [hidden]='participantResults.length == 0 || parentResults.length == 0' (click)="showParticipant = false; showParent = false; showByClinic = false; showBySite = false; bySite=true; byClinic=true"  mat-raised-button>Show all...</button>
      <span style="margin: 40px"></span>
      <button [hidden]='participantResults.length == 0 || parentResults.length == 0' (click)="showParent = false; showParticipant = true; showByClinic = false; showBySite=false; bySite=false; byClinic=true" mat-raised-button>Parents...</button>
      <span style="margin: 40px"></span>
      <button [hidden]='participantResults.length == 0 || parentResults.length == 0'  (click)="showParticipant = false; showParent = true; showByClinic = false; showBySite=false; bySite=true; byClinic=false"  mat-raised-button>Participants...</button>
      <span style="margin: 40px"></span>
      <button type="button" (click)="export()" class="btn btn-danger"> Export Data </button>
    </div>

  <br>

    <div align="center" *ngIf="results.length != 0" >
      <div [hidden]="bySite">
        <mat-form-field>
          <mat-label appearance="fill">Choose Clinic...</mat-label>
          <mat-select matNativeControl name="assignedclinic" [(ngModel)]="selectedClinic" (click)="showByClinic = true; showParent=true;showParticipant = true; " (selectionChange)="sortByClinic($event)">
            <mat-option *ngFor="let c of (ffqclinicList$| async)" [value]="c.clinicId">
              {{ c.clinicname }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>

      <div [hidden]="byClinic">
        <mat-form-field>
          <mat-label appearance="fill">Choose Site...</mat-label>
          <mat-select matNativeControl name="assignedsite" [(ngModel)]="selectedSite" (click)="showBySite = true; showParticipant=true;showParent=true" (selectionChange)="sortBySite($event)">
            <mat-option *ngFor="let c of (ffqSiteList$| async)" [value]="c.researchInstitutionId">
              {{ c.institutionName }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </div>

    <div class="container mt-3" *ngIf="parentResultsByClinicId.length != 0" [hidden]="!showByClinic">
      <label style="font-weight:bold"> Parent Questionnaire Results for: {{this.clinicAttributes.clinicname}}</label>
      <div *ngFor="let byClinicresult of parentResultsByClinicId; let i = index">
        <div class="container">
          <mat-card class="quest-id-card">
            <mat-card-content>
              <!--Labels for questionnaire results-->
              <div class="row">
                <div class="col-2" style="text-align:center">
                  <label><strong>Questionnaire ID</strong></label>
                </div>
                <div class="col-2" style="text-align:center">
                  <label><strong>Infant age (In months)</strong></label>
                </div>
                <div class="col-1" style="text-align:center">
                  <label><strong>Infant Gender</strong></label>
                </div>
                <div class="col-2" style="text-align:center">
                  <label><strong>Nutrient Results</strong></label>
                </div>
                <div class="col-2" style="text-align:center">
                  <label><strong>Food Results</strong></label>
                </div>
              </div>

              <!--Questionnaire results-->
              <div class="row mb-3">
                <div class="col-2" style="text-align:center">
                  {{byClinicresult.questionnaireId}}
                </div>
                <div class="col-2" style="text-align:center">
                  {{byClinicresult.ageInMonths}}
                </div>
                <div class="col-1" style="text-align:center">
                  {{byClinicresult.gender}}
                </div>
                <div class="col-2" style="text-align:center; cursor:pointer">
                  <a (click)="getNutrientsRecommendations(byClinicresult.questionnaireId)"><i title="nutrients" class="fa fa-flask"></i></a>
                </div>
                <div class="col-2" style="text-align:center; cursor:pointer">
                  <a (click)="getFoodRecommendations(byClinicresult.questionnaireId)"><i title="fooditems" class="fa fa-cutlery"></i></a>
                </div>


                <div class="col-12 offset-10">
                  <button mat-raised-button (click)="toggleParentResults(i)">
                    Results
                  </button>

                  <button mat-raised-button class="btn btn-danger" (click)="deleteQuestionnaire(byClinicresult.questionnaireId)">
                    Delete
                  </button>
                </div>
              </div>

              <!--User choice results-->
              <ng-container *ngIf="byClinicresult.show">
                <label class="mt-3 mb-0 ml-3"><strong>User choices</strong> </label>
                <hr />
                <div class="row mt-3">
                  <div class="col-3" style="text-align:center">
                    <label><strong>Name</strong></label>
                  </div>
                  <div class="col-2" style="text-align:center">
                    <label><strong>Frequency</strong></label>
                  </div>
                  <div class="col-2" style="text-align:center">
                    <label><strong>Frequency Type</strong></label>
                  </div>
                  <div class="col-2" style="text-align:center">
                    <label><strong>Servings</strong></label>
                  </div>
                  <div class="col-2" style="text-align:center">
                    <label><strong>Sugar(g)</strong></label>
                  </div>
                </div>
                <div *ngFor="let choice of byClinicresult.userChoices">
                  <div class="row" style="text-align:center">
                    <div class="col-3">
                      {{choice.name}}
                    </div>
                    <div class="col-2">
                      {{choice.frequency}}
                    </div>
                    <div class="col-2">
                      {{choice.frequencyType}}
                    </div>
                    <div class="col-2">
                      {{choice.serving}}
                    </div>
                    <div class="col-2">
                      {{choice.sugar}}
                    </div>
                  </div>
                </div>
                <hr />

                <!-- Calculations breakdown -->
                <div class="tableDiv">
                  <h6>Nutrient Breakdown</h6>
                  <div class="row">
                    <table class="col-12">
                      <tr>
                        <th>Nutrient</th>
                        <th>Daily Average</th>
                      </tr>
                      <!-- Below code changed to show requested digits by PO-->
                      <tr *ngFor="let item of byClinicresult.dailyAverages | keyvalue : returnZero; let i=index">
                        <td>{{item.key}}</td>
                        <td>{{item.value | resultRound}}</td>
                      </tr>
                    </table>
                  </div>
                  <br>
                </div>
                <br>
                <div style="text-align:center">
                  <button mat-raised-button (click)="toggleParentResults(i)">
                    <i class="fa fa-minus-square-o"></i> Close Results
                  </button>
                </div>
              </ng-container>
            </mat-card-content>
          </mat-card>
        </div>
      </div>
    </div>

  <div class="container mt-3" *ngIf="participantResultsByClinicId.length != 0" [hidden]="!showBySite">
    <label style="font-weight:bold"> Participant Questionnaire Results for: {{this.siteAttributes.institutionName}}</label>
    <div *ngFor="let byParticipantresult of participantResultsByClinicId; let i = index">
      <div class="container">
        <mat-card class="quest-id-card">
          <mat-card-content>
            <!--Labels for questionnaire results-->
            <div class="row">
              <div class="col-2" style="text-align:center">
                <label ><strong>Questionnaire ID</strong></label>
              </div>
              <div class="col-2" style="text-align:center">
                <label ><strong>Infant age (In months)</strong></label>
              </div>
              <div class="col-1" style="text-align:center">
                <label ><strong>Infant Gender</strong></label>
              </div>
              <div class="col-2" style="text-align:center">
                <label ><strong>Nutrient Results</strong></label>
              </div>
              <div class="col-2" style="text-align:center">
                <label ><strong>Food Results</strong></label>
              </div>
            </div>

            <!--Questionnaire results-->
            <div class="row mb-3">
              <div class="col-2" style="text-align:center">
                {{byParticipantresult.questionnaireId}}
              </div>
              <div class="col-2" style="text-align:center">
                {{byParticipantresult.ageInMonths}}
              </div>
              <div class="col-1" style="text-align:center">
                {{byParticipantresult.gender}}
              </div>
              <div class="col-2" style="text-align:center; cursor:pointer">
                <a (click)="getNutrientsRecommendations(byParticipantresult.questionnaireId)"><i title="nutrients" class="fa fa-flask"></i></a>
              </div>
              <div class="col-2" style="text-align:center; cursor:pointer">
                <a (click)="getFoodRecommendations(byParticipantresult.questionnaireId)"><i title="fooditems" class="fa fa-cutlery"></i></a>
              </div>


              <div class="col-12 offset-10">
                <button mat-raised-button (click)="toggleParentResults(i)" >
                  Results
                </button>

                <button mat-raised-button class="btn btn-danger" (click)="deleteQuestionnaire(byParticipantresult.questionnaireId)" >
                  Delete
                </button>
              </div>
            </div>

            <!--User choice results-->
            <ng-container *ngIf="byParticipantresult.show">
              <label class="mt-3 mb-0 ml-3"><strong>User choices</strong> </label>
              <hr />
              <div class="row mt-3">
                <div class="col-3" style="text-align:center">
                  <label><strong>Name</strong></label>
                </div>
                <div class="col-2" style="text-align:center">
                  <label><strong>Frequency</strong></label>
                </div>
                <div class="col-2" style="text-align:center">
                  <label><strong>Frequency Type</strong></label>
                </div>
                <div class="col-2" style="text-align:center">
                  <label><strong>Servings</strong></label>
                </div>
                <div class="col-2" style="text-align:center">
                  <label><strong>Sugar(g)</strong></label>
                </div>
              </div>
              <div *ngFor="let choice of byParticipantresult.userChoices">
                <div class="row" style="text-align:center">
                  <div class="col-3">
                    {{choice.name}}
                  </div>
                  <div class="col-2">
                    {{choice.frequency}}
                  </div>
                  <div class="col-2">
                    {{choice.frequencyType}}
                  </div>
                  <div class="col-2">
                    {{choice.serving}}
                  </div>
                  <div class="col-2">
                    {{choice.sugar}}
                  </div>
                </div>
              </div>
              <hr />

              <!-- Calculations breakdown -->
              <div class="tableDiv">
                <h6>Nutrient Breakdown</h6>
                <div class="row">
                  <table class="col-12">
                    <tr>
                      <th>Nutrient</th>
                      <th>Daily Average</th>
                    </tr>
                    <!-- Below code changed to show requested digits by PO-->
                    <tr *ngFor="let item of byParticipantresult.dailyAverages | keyvalue : returnZero; let i=index">
                      <td>{{item.key}}</td>
                      <td>{{item.value | resultRound}}</td>
                    </tr>
                  </table>
                </div>
                <br>
              </div>
              <br>
              <div style="text-align:center">
                <button mat-raised-button (click)="toggleParentResults(i)">
                  <i class="fa fa-minus-square-o"></i> Close Results
                </button>
              </div>
            </ng-container>
          </mat-card-content>
        </mat-card>
      </div>
    </div>
  </div>

    <div [hidden]="showParent" class="container mt-3" *ngIf="parentResults.length != 0">
        <label style="font-weight:bold"> Parent Questionnaire Results </label>
        <br/>
        <span> {{ parentResults.length }} result(s) </span>
        <div style="margin-bottom: 15px">
          <input style="width: 25%; display: inline-block;  margin-left: 5px;" placeholder="Search..." type="text"
                 class="form-control"
                 name="search" [(ngModel)]="searchResults"/>
        </div>
        <div *ngFor="let result of parentResults | searchFilter: searchResults; let i = index">
            <div class="container">
                <mat-card class="quest-id-card">
                    <mat-card-content>
                        <!--Labels for questionnaire results-->
                      <div class="row">
                        <div class="col" style="text-align:center">
                          <label><strong>Parent Username</strong></label>
                        </div>
                        <div class="col" style="text-align:center">
                          <label><strong>Date</strong></label>
                        </div>
                        <div  class="col" style="text-align:center">
                          <label><strong>Questionnaire ID</strong></label>
                        </div>
                        <div  class="col" style="text-align:center">
                          <label><strong>Infant age (In months)</strong></label>
                        </div>
                        <div  class="col" style="text-align:center">
                          <label><strong>Infant Gender</strong></label>
                        </div>
                        <div  class="col" style="text-align:center">
                          <label><strong>Nutrient Results</strong></label>
                        </div>
                        <div  class="col" style="text-align:center">
                          <label><strong>Food Results</strong></label>
                        </div>
                      </div>

                        <!--Questionnaire results-->
                      <div class="row mb-3">
                        <div class="col" style="text-align:center">
                          {{result.username}}
                        </div>
                        <div class="col" style="text-align:center">
                          {{result.date}}
                        </div>
                        <div class="col" style="text-align:center">
                          {{result.questionnaireId}}
                        </div>
                        <div class="col" style="text-align:center">
                          {{result.ageInMonths}}
                        </div>
                        <div class="col" style="text-align:center">
                          {{result.gender}}
                        </div>
                        <div class="col" style="text-align:center; cursor:pointer">
                          <a (click)="getNutrientsRecommendations(result.questionnaireId)"><i title="nutrients" class="fa fa-flask"></i></a>
                        </div>
                        <div class="col" style="text-align:center; cursor:pointer">
                          <a (click)="getFoodRecommendations(result.questionnaireId)"><i title="fooditems" class="fa fa-cutlery"></i></a>
                        </div>


                        <div class="col-12 offset-10" style="padding-top: 30px;">
                          <button mat-raised-button type="button" (click)="toggleParentResults(i)">
                            Results
                          </button>

                          <button mat-raised-button class="btn btn-danger" (click)="deleteQuestionnaire(result.questionnaireId)">
                            Delete
                          </button>
                        </div>
                      </div>

                        <!--User choice results-->
                        <ng-container *ngIf="result.show">
                            <label class="mt-3 mb-0 ml-3"><strong>User choices</strong> </label>
                            <hr />
                            <div class="row mt-3">
                                <div class="col-3" style="text-align:center">
                                    <label><strong>Name</strong></label>
                                </div>
                                <div class="col-2" style="text-align:center">
                                    <label><strong>Frequency</strong></label>
                                </div>
                                <div class="col-2" style="text-align:center">
                                    <label><strong>Frequency Type</strong></label>
                                </div>
                                <div class="col-2" style="text-align:center">
                                    <label><strong>Servings</strong></label>
                                </div>
                                <div class="col-2" style="text-align:center">
                                    <label><strong>Sugar(g)</strong></label>
                                </div>
                            </div>
                            <div *ngFor="let choice of result.userChoices">
                                <div class="row" style="text-align:center">
                                    <div class="col-3">
                                        {{choice.name}}
                                    </div>
                                    <div class="col-2">
                                        {{choice.frequency}}
                                    </div>
                                    <div class="col-2">
                                        {{choice.frequencyType}}
                                    </div>
                                    <div class="col-2">
                                        {{choice.serving}}
                                    </div>
                                    <div class="col-2">
                                        {{choice.sugar}}
                                    </div>
                                </div>
                            </div>
                            <hr />

                            <!-- Calculations breakdown -->
                            <div class="tableDiv">
                                <h6>Nutrient Breakdown</h6>
                                <div class="row">
                                    <table class="col-12">
                                        <tr>
                                            <th>Nutrient</th>
                                            <th>Daily Average</th>
                                        </tr>
                                        <!-- Below code changed to show requested digits by PO-->
                                        <tr *ngFor="let item of result.dailyAverages | keyvalue : returnZero; let i=index">
                                            <td>{{item.key}}</td>
                                            <td>{{item.value | resultRound}}</td>
                                        </tr>
                                    </table>
                                </div>
                                <br>
                            </div>
                            <br>
                            <div style="text-align:center">
                                <button mat-raised-button (click)="toggleParentResults(i)">
                                  <i class="fa fa-minus-square-o"></i> Close Results
                                </button>
                            </div>
                        </ng-container>
                    </mat-card-content>
                </mat-card>
            </div>
        </div>
    </div>


    <div [hidden]="showParticipant" class="container mt-3" *ngIf="participantResults.length != 0">
      <label style="font-weight:bold"> Participant Questionnaire Results </label>
      <div *ngFor="let result of participantResults; let i = index">
        <div class="container">
          <mat-card class="quest-id-card">
            <mat-card-content>
              <!--Labels for questionnaire results-->
              <div class="row">
                <div class="col-2" style="text-align:center">
                  <label><strong>Questionnaire ID</strong></label>
                </div>
                <div class="col-2" style="text-align:center">
                  <label ><strong>Infant age (In months)</strong></label>
                </div>
                <div class="col-1" style="text-align:center">
                  <label><strong>Infant Gender</strong></label>
                </div>
                <div class="col-2" style="text-align:center">
                  <label><strong>Nutrient Results</strong></label>
                </div>
                <div class="col-2" style="text-align:center">
                  <label><strong>Food Results</strong></label>
                </div>
              </div>

              <!--Questionnaire results-->
              <div class="row mb-3">
                <div class="col-2" style="text-align:center">
                  {{result.questionnaireId}}
                </div>
                <div class="col-2" style="text-align:center">
                  {{result.ageInMonths}}
                </div>
                <div class="col-1" style="text-align:center">
                  {{result.gender}}
                </div>
                <div class="col-2" style="text-align:center; cursor:pointer">
                  <a (click)="getNutrientsRecommendations(result.questionnaireId)"><i title="nutrients" class="fa fa-flask"></i></a>
                </div>
                <div class="col-2" style="text-align:center; cursor:pointer">
                  <a (click)="getFoodRecommendations(result.questionnaireId)"><i title="fooditems" class="fa fa-cutlery"></i></a>
                </div>


                <div class="col-12 offset-10">
                  <button mat-raised-button (click)="toggleParticipantResults(i)">
                     Results
                  </button>

                  <button mat-raised-button class="btn btn-danger" (click)="deleteQuestionnaire(result.questionnaireId)">
                    Delete
                  </button>
                </div>
              </div>

              <!--User choice results-->
              <ng-container *ngIf="result.show">
                <label class="mt-3 mb-0 ml-3"><strong>User choices</strong> </label>
                <hr />
                <div class="row mt-3">
                  <div class="col-3" style="text-align:center">
                    <label><strong>Name</strong></label>
                  </div>
                  <div class="col-2" style="text-align:center">
                    <label><strong>Frequency</strong></label>
                  </div>
                  <div class="col-2" style="text-align:center">
                    <label><strong>Frequency Type</strong></label>
                  </div>
                  <div class="col-2" style="text-align:center">
                    <label><strong>Servings</strong></label>
                  </div>
                  <div class="col-2" style="text-align:center">
                    <label><strong>Sugar(g)</strong></label>
                  </div>
                </div>
                <div *ngFor="let choice of result.userChoices">
                  <div class="row" style="text-align:center">
                    <div class="col-3">
                      {{choice.name}}
                    </div>
                    <div class="col-2">
                      {{choice.frequency}}
                    </div>
                    <div class="col-2">
                      {{choice.frequencyType}}
                    </div>
                    <div class="col-2">
                      {{choice.serving}}
                    </div>
                    <div class="col-2">
                      {{choice.sugar}}
                    </div>
                  </div>
                </div>
                <hr />

                <!-- Calculations breakdown -->
                <div class="tableDiv">
                  <h6>Nutrient Breakdown</h6>
                  <div class="row">
                    <table class="col-12">
                      <tr>
                        <th>Nutrient</th>
                        <th>Daily Average</th>
                      </tr>
                      <!-- Below code changed to show requested digits by PO-->
                      <tr *ngFor="let item of result.dailyAverages | keyvalue : returnZero; let i=index">
                        <td>{{item.key}}</td>
                        <td>{{item.value | resultRound}}</td>
                      </tr>
                    </table>
                  </div>
                  <br>
                </div>
                <br>
                <div style="text-align:center">
                  <button mat-raised-button (click)="toggleParticipantResults(i)">
                    <i class="fa fa-minus-square-o"></i> Close Results
                  </button>
                </div>
              </ng-container>
            </mat-card-content>
          </mat-card>
        </div>
      </div>
    </div>
</div>
