<ion-header>
  <div class="colorline"><img src="assets/images/borde-top.jpg" /></div>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu" color="secondary"></ion-icon>
    </button>
    <ion-title><img src="assets/images/header-logo.jpg" /></ion-title>
  </ion-navbar>
</ion-header>  
  <div class="full-overlay" padding [hidden]="overlayHidden" scroll="false">
    <div class="vertical-center popup popupRequest" color="primary" [hidden]="popupRequest">
      <h3>Curso: {{NNActiva}}</h3>
      ¿Estás seguro que deseas declinar la invitación al curso?
      <br /><br />
      <button class="shadow" ion-button (click)="closeConfirm();">No</button>
      <button class="shadow opa5" ion-button (click)="motivoRechazo();">Sí</button>
    </div>

    <div class="vertical-center popup notifyRequest rechazoCurso" color="primary" [hidden]="notifyRequest">
      <h3>Curso: {{NNActiva}}</h3>
      <br />
      <div align="left" class="text-left">Motivo</div>

      <select [(ngModel)]="rechazo.motivo2" (ngModelChange)="changeRechazo($event)" name="motivo2" id="motivo2">
        <option value="">Seleccione motivo</option>
        <option value="Vacaciones">Vacaciones</option>
        <option value="Licencia Médica">Licencia Médica</option>
        <option value="Reuniones">Reuniones</option>
        <option value="Viajes">Viajes</option>
        <option value="Otros">Otros</option>
      </select>
      
      <ion-textarea *ngIf="showDetalleMotivo" placeholder="Ingrese detalle del motivo" [(ngModel)]="rechazo.motivo" name="motivo"></ion-textarea>
      <button class="shadow opa5" ion-button (click)="closeNotify();">Cancelar</button>
      <button class="shadow" ion-button (click)="notificar();">Notificar</button>
    </div>

  </div>
<ion-content class="cursosprescencial" padding>
  
  <ion-row class="tabs">
    <ion-col [class.on]="primaryTab" [class.off]="secondTab" (click)="togglePendientes()">Pendientes</ion-col>
    <ion-col [class.on]="secondTab" [class.off]="primaryTab" (click)="toggleHistorial()">Historial</ion-col>
  </ion-row>

  <div *ngIf="primaryTab">


    <div class="card_curso_null" *ngIf="pendientes?.length == 0">
      No tienes cursos pendientes
    </div>

    <div class="card_curso" *ngFor="let pend of pendientes; let i = index">
    <ion-grid>
      <ion-row>
        <ion-col width-25 (click)="infobox(pend.id,i);"> 
          <img src="{{pend.icono_curso == '' || pend.icono_curso == null ? 'assets/images/training.png' : pend.icono_curso}}" />
          <!--
          <div class="card_curso_date">{{pend.fecha_inicio | date:'dd'}}</div>
          <div class="card_curso_mes" [innerHTML]="mes(pend.fecha_inicio)"></div>
          -->
        </ion-col>
        <ion-col width-75 (click)="infobox(pend.id,i);">
            <h3>Curso: {{pend.nombre}}</h3>
            <h4 *ngIf="tipo == 1 && pend.lugar != null">Lugar: {{pend.lugar}}</h4>
            <h4 *ngIf="tipo == 2">e-Learning</h4>
            <h4 *ngIf="tipo == 1 && pend.fecha_inicio != null">Fecha: {{pend.fecha_inicio | date: 'dd/MM/yyyy'}}</h4>
        </ion-col>
      </ion-row>

      <ion-row class="cardbox" *ngIf="tipo != 2">
        <ion-col width-25>

        </ion-col>
        <ion-col width-75>
          <ion-row>
            <ion-col width-100>
              <button class="blue" *ngIf="pend.aceptado == 0" (click)="rechazar(pend.id,i);">Declinar</button>
              <button class="blue" *ngIf="pend.aceptado == -1">Declinado</button>

              <button class="yellow" *ngIf="pend.aceptado == 0" (click)="aceptar(pend.id,i);">Aceptar</button>
              <button class="yellow" *ngIf="pend.aceptado == 1">Aceptado</button>

            </ion-col>
          </ion-row>
        </ion-col>
      </ion-row>
      
      <div class="separator" *ngIf="showInfobox[i] == 1"></div>
      <ion-row class="infobox" *ngIf="showInfobox[i] == 1">
        <ion-col width-100>
          <h4>Descripción</h4>
          <p><span [innerHTML]="htmlInfobox[i]"></span></p>
          <div class="" *ngFor="let rela of relaInfobox[i]; let j = index">
              <ion-row>
                  <ion-col width-25>
                    <img src="{{rela.avatar}}" />
                  </ion-col>
                  <ion-col width-75>
                    {{rela.nombre}}
                  </ion-col>
              </ion-row>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
    </div>
    
    <ion-infinite-scroll (ionInfinite)="doInfinitePend($event)" *ngIf="hasMoreDataPend">
        <br /><br />
        <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="cargando cursos...">
        </ion-infinite-scroll-content>
    </ion-infinite-scroll>

  </div>

  <div *ngIf="secondTab">

    <div class="card_curso_null" *ngIf="historial?.length == 0">
      No tienes cursos en el historial
    </div>

    <div class="card_curso" *ngFor="let hist of historial; let i = index">
    <ion-grid>
      <ion-row>
        <ion-col width-25 (click)="infobox(hist.id,i);"> 
          <img src="{{hist.icono_curso}}" />
          <!--
          <div class="card_curso_date">{{hist.fecha_inicio | date:'dd'}}</div>
          <div class="card_curso_mes" [innerHTML]="mes(hist.fecha_inicio)"></div>
          -->
        </ion-col>
        <ion-col width-75 (click)="infobox(hist.id,i);">
            <h3>Curso: {{hist.nombre}}</h3>
            <h4 *ngIf="tipo == 1 && hist.lugar">Lugar: {{hist.lugar}}</h4>
            <h4 *ngIf="tipo == 2">e-Learning</h4>
            <h4 *ngIf="tipo == 1 && hist.fecha_inicio">Fecha: {{hist.fecha_inicio | date: 'dd/MM/yyyy'}}</h4>
        </ion-col>
      </ion-row>
      <ion-row class="aprobacion">
        <ion-col width-50></ion-col>
        <ion-col text-right>
          <img *ngIf="hist.aprobado != 1" src="assets/icon/desaprobado.png" />
          <img *ngIf="hist.aprobado == 1" src="assets/icon/aprobado.png" />
        </ion-col>
        <ion-col>
          <p *ngIf="hist.aprobado != 1"><b>Reprobado</b></p>
          <p *ngIf="hist.aprobado == 1"><b>Aprobado</b></p>
        </ion-col>
      </ion-row>

      <div class="separator"></div>

    </ion-grid>
    </div>
    
    <ion-infinite-scroll (ionInfinite)="doInfiniteHist($event)" *ngIf="hasMoreDataHist">
        <br /><br />
        <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="cargando cursos...">
        </ion-infinite-scroll-content>
    </ion-infinite-scroll>

  </div>


</ion-content>