<app-nav-parrain></app-nav-parrain>
<div class="container">

  <h4 class="mb-5 mt-1 font-bold wow fadeInDown text-center" style="padding-top: 5%;">Cartes de parrainage ({{(carteParrData | async)?.length}})</h4>
  <div class="topButtons col-md-12" style="padding-top: 2%;">
    <div *ngIf="(carteParrData | async)?.length != 0" class="btnFiltre">
      <div class="dropdown" dropdown>
        <button dropdownToggle type="button" class="btn btn-info btn-rounded dropdown-toggle waves-light" mdbRippleRadius>
          Filtres
        </button>

        <div class="dropdown-menu">
          <a class="dropdown-item" id="crtActive" (click)="activeCarte('Active')">Actives</a>
          <a class="dropdown-item" id="crtToutes" (click)="activeCarte('Toutes')">Toutes</a>
          <a class="dropdown-item" id="crtInactive" (click)="activeCarte('Inactive')">Inactives</a>
        </div>
      </div>
    </div>
  </div>
  <div *ngIf="(carteParrData | async)?.length == 0"  class="alert alert-info">
    Cher,<strong><i> {{parrain.firstname}} </i></strong>
    <p>Le principe est simple :</p>
    <ul>
      <li> Reçoit tes cartes de parrainage ici</li>
      <li> Partage-les à tes amis via Facebook, Whatsapp, ect.</li>
      <li> Gagne des avantages chaque fois qu'un de tes amis présente ta carte lors de ses achats</li>
    </ul>
    <p>N'attends plus, et rends toi vite chez un des commerçcant affiliés de ton choix pour obtenir ta </p>
    <p>carte de parrainage !</p>
  </div>
  <div class="list-group wow fadeInUpBig">
    <div *ngFor="let crt of (carteParrData | async); let i = index;">
      <div class="card mainCard" *ngIf="(crt.status == statutAffiche) || (statutAffiche == 'Toutes')">
        <div class="row no-margin maincard-row">
          <img class="col-md-6 card-image subCard1" id="image1" src={{crt.carteTemplate.downloadURL}}>
          <!--<div class="col-md-6 card-image mb-1 subCard1" [ngStyle]="{ 'background-image': 'url(' + crt.carteTemplate.downloadURL + ')'}">

            <div class="view">
              <div class="row firstRow">
                <div *ngIf="commercant !== undefined" >
                  <div class="col-md-6 flex-center card-block cardPart1"></div>
                  <div class="col-md-6 flex-center card-block card-image mb-1 cardPart2">
                    <p></p>
                  </div>
                </div>
              </div>
              <div class="row secondRow">
                <div class="col-md-6 flex-center cardPart3"><p></p></div>
                <div class="col-md-6 flex-center cardPart4"><p></p></div>
              </div>
            </div>
          </div>-->
          <div class="col-md-6 card subCard2">
            <div class="card-block no-margin">
              <div class="col-md-12" id="subCard2Part1">
                <label>ID de la carte: {{crt.uid}}</label>
                <label>Avantages cumulés: {{crt.avantageCumule === ''? '0' : crt.avantageCumule}} €</label>
                <label>Avantages recuperés: {{crt.avantageRecuperer  === ''? '0' : crt.avantageRecuperer}} €</label>
              </div>
              <div class="btn-block d-flex flex-column flex-lg-row" id="subCard2Part2">
                <button class="btn btn-outline-primary btn-rounded" tooltip="Historique des scans et retours effectués sur cette carte de parrainage" placement="top" (click)="hideme[i] = !hideme[i]"><i class="fa fa-info-circle mr-1"></i>{{show ? 'Cacher Détails' : 'Détails'}}</button>
                <a href={{crt.carteTemplate.downloadURL}} download={{crt.carteTemplate.downloadURL}}>
                  <button class="btn btn-outline-success btn-rounded" tooltip="Télécharger cette carte de parrainage" placement="top">
                    <i class="fa fa-download" aria-hidden="true"></i>
                    Télécharger
                  </button>
                </a>
              </div>
            </div>
          </div>
        </div>
        <!-- Card footer -->
        <div class="card-data" id="footerCard">
          <ul>
            <li class="float-right"><i class="fa fa-info-circle" aria-hidden="true"></i>Statut:
              <label class="font-bold" *ngIf="crt.status == 'Active'" style="color:#00C851; margin-bottom: 0">{{crt.status}}</label>
              <label class="font-bold" *ngIf="crt.status == 'Inactive'" style="color:#ffbb33; margin-bottom: 0">{{crt.status}}</label>
              <label class="font-bold" *ngIf="crt.status == 'Bloqué'" style="color:#ff4444; margin-bottom: 0">{{crt.status}}</label>
            </li>
            <li class="float-left"><i class="fa fa-clock-o"></i>Valable du {{crt.dateDebut | date:'dd/MM/yyyy'}} au {{crt.dateFin | date:'dd/MM/yyyy'}}</li>
          </ul>
        </div>
      </div>
      <!-- Card footer -->
      <div class="card" [hidden]="!hideme[i]" style="height:20rem; overflow-y: auto;">
        <div class="card-body">
          <ul class="list-group wow fadeInDown">
            <p class="font-weight-normal" style="padding-top: 2%" *ngIf="crt.historique === undefined">Aucune opération n'a été effectuée sur cette carte !</p>

            <li class="list-group-item justify-content-between align-items-center" *ngFor="let hst of crt.historique">
              <p class="font-weight-normal" style="padding-top: 2%">{{hst}}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

</div>

