<app-nav-commercant></app-nav-commercant>
<!--

<ul>
  <li *ngFor="let fil of filleulExistList | async">
    Filleuls: {{fil.firstname}} {{fil.familyname}}
  </li>
</ul>-->


<div class="container">
  <div class="card wow fadeInLeft">
    <div class="card-block">
      <h5 class="mb-5 mt-1 font-bold wow fadeInDown text-center">Débiter Carte</h5>
      <!-- Si cest un filleul existant -->

      <p *ngIf="ParrainCarteSelect != ''">Vous avez selectionné {{ParrainCarteSelect}}</p>
      <div class="md-form">
        <i class="fa fa-address-card prefix grey-text"></i>
        <input
          #query
          (keyup)="filterCarte(query.value)"
          type="text" class="form-control" placeholder="Ecrivez le nom du parrain inscrit sur la carte...">
        <div *ngFor="let carte of filteredCartesTest">
          <a (click)="getIdParrainCarte(carte.parrainCarte.uid)">{{carte.parrainCarte.firstname}} {{carte.parrainCarte.familyname}}</a>
          <p>
            Carte ID:
            {{carte.uid}}
          </p>
        </div>
        <!--<input type="text" id="orangeForm-Familyname" placeholder="ID carte" [(ngModel)]="carteIDTemp">[(ngModel)]="filleul.idCard"-->
      </div>

      <div class="md-form">
        <i class="fa fa-euro prefix grey-text"></i>
        <input type="text" id="orangeForm-ValeurRecup" [(ngModel)]="valeurRecup" placeholder="Combien le parrain souhaite utiliser ?"><!--[(ngModel)]="filleul.idCard"-->
      </div>
      <!--
      <div class="md-form">
        <p>{{parSelect}}</p>
        <i class="fa fa-user prefix grey-text"></i>
        <input
          #query
          (keyup)="filter(query.value)"
          type="text" class="form-control" placeholder="Cherchez Parrain Existants...">
        <div *ngFor="let parrain of filteredParrainsTest">
          <a (click)="getIdParrain(parrain.uid)">{{parrain.firstname}} {{parrain.familyname}}</a>
        </div>
      </div>
-->
      <div class="md-form">
        <i class="fa fa-user prefix grey-text"></i>
        <input type="password" id="orangeForm-Password" [(ngModel)]="codeTemp" placeholder="Code confidentiel du parrain" name="codeT" #codeT="ngModel"><!--[(ngModel)]="filleul.idCard"-->
        <div *ngIf="(codeTemp !== cartePar.parrainCarte.secretCode) && (codeT.dirty || codeT.touched)"  class="alert alert-danger">
          Le code secret doit être le même que celui de <strong><i>{{cartePar.parrainCarte.firstname}} {{cartePar.parrainCarte.familyname}}</i></strong>.
        </div>
      </div>

      <label>
        En cliquant sur Débiter carte, vous acceptez nos Conditions
        et indiquez que vous avez lu notre Politique d'utilisation des
        données, y compris notre Utilisation des cookies.
      </label>
      <div class="text-center" style="margin-top:5%">
        <button class="btn btn-light-green waves-light" [disabled]="codeTemp !== cartePar.parrainCarte.secretCode" (click)="debiterCarte()"><i class="fa fa-pie-chart ml-1"></i>Débiter Carte</button>
        <button class="btn btn-cyan" (click)="goToOpComm()">Back</button>
      </div>

      <!-- Fin Si cest un filleul existant -->
    </div>

  </div>
</div>
