XJC/src/app/components/opCommercial/envoyer-carte/envoyer-carte.component.html

<!--<p>
  envoyer-carte works!
</p>

<ul>
  <li *ngFor="let par of parrainExistList | async">
    Parrains: {{par.firstname}} {{par.familyname}}
  </li>
</ul>-->

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

<div class="container">
  <div class="card">
    <div class="well d-flex flex-column justify-content-center">
      <h5 class="mb-5 mt-1 font-bold wow fadeInDown text-center">Envoyer Carte</h5>

      <p class="text-center mb-4" style="padding-top: 2%;">Souhaitez-vous envoyer la carte à :</p>
      <div class="form-inline d-flex flex-row justify-content-center">
        <div class="md-form" style="padding-left: 2%;">
          <input name="group2" type="radio" class="with-gap" id="Newparrain" value="Newparrain"  (click)="initParSelect()" [(ngModel)]="radioParrain">
          <label for="Newparrain">Nouveau Parrain</label>
        </div>
        <div class="md-form" style="padding-left: 2%;">
          <input name="group2" type="radio" class="with-gap" id="ParrainExist" value ="ParrainExist" (click)="initParSelect()" [(ngModel)]="radioParrain">
          <label for="ParrainExist">Parrain Existant</label>
        </div>
        <!--
        <div class="md-form" style="padding-left: 2%;">
          <input name="group2" type="radio" class="with-gap" id="ParrainAffi" value ="ParrainAffi" (click)="initParSelect()" [(ngModel)]="radioParrain">
          <label for="ParrainAffi">Parrain Affilier</label>
        </div>-->
      </div>
      <!-- Si cest un nouveau parrain -->
      <!--<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>-->

      <div class="newParrain wow fadeInUp" *ngIf="radioParrain === 'Newparrain'">

        <div class="md-form">
          <i class="fa fa-user prefix grey-text"></i>
          <input type="text" id="orangeForm-Familyname" [(ngModel)]="parrain.familyname" placeholder="Nom de famille">
        </div>
        <div class="md-form">
          <i class="fa fa-user prefix grey-text"></i>
          <input type="text" id="orangeForm-Firstname" [(ngModel)]="parrain.firstname" placeholder="Prénom">
        </div>
        <form class="form-inline">
          <div class="md-form">
            <i class="fa fa-venus-mars prefix grey-text"></i>
            <input name="group3" type="radio" class="with-gap" id="homme" value="Homme" [(ngModel)]="parrain.sex">
            <label for="homme">Homme</label>
          </div>
          <div class="md-form" style="padding-left: 2%;">
            <input name="group3" type="radio" class="with-gap" id="femme" value="Femme" [(ngModel)]="parrain.sex">
            <label for="femme">Femme</label>
          </div>
        </form>
        <div class="md-form birthdayPar">
          <i class="fa fa-birthday-cake prefix grey-text"></i>
          <input type="date" id="orangeForm-Birthday" class="col-md-2" [(ngModel)]="parrain.birthday" placeholder="Date de naissance" required min="minDateTimeTest" max="maxDateTimeTest" name="birthday" #birthday="ngModel">
          <div *ngIf="(validationBirthday())"  class="alert alert-danger">
            Votre date de naissance doit être comprise entre <strong><i>01/01/1917 et 01/01/2117</i></strong>.
          </div>
        </div>
        <div class="md-form">
          <i class="fa fa-envelope prefix grey-text"></i>
          <input type="email" id="orangeForm-email" [(ngModel)]="parrain.email" placeholder="Email" name="email" required pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" #email="ngModel">
          <div *ngIf="email.errors && email.errors.pattern && (email.dirty || email.touched)"  class="alert alert-danger">
            Votre <strong>email</strong> est requis et doit avoir ce format : <strong><i>john@parrain.fr</i></strong>.
          </div>
        </div>
        <label>
          En cliquant sur Créer un compte et Envoyer 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="col-md-6 d-flex flex-column" id="subCard1" [ngStyle]="{ 'background-image': 'url(' + cartePar.carteTemplate.downloadURL + ')'}">
          <div class="subCard1-row d-flex flex-row">
            <div class="merchant-name d-flex flex-column justify-content-center">
              <p class="white-text info-text font-bold text-center">{{commercant.commercialName}}</p>
              <p class="white-text info-text font-bold text-center">{{cartePar.operationCommercialCarte.name}}</p>
            </div>
            <div class="merchant-logo">
              <img src="{{commercant.image.downloadURL}}" id="image1" class="img-fluid mx-auto d-block flex-center card-img-overlay" alt="Responsive image">
            </div>
          </div>
          <div class="subCard1-row d-flex flex-row">
            <div class="operation-data flex-center"><p class="white-text info-text font-bold">{{ ((cartePar.operationCommercialCarte.avantageFilleul == 0)) ? '' : 'Avantage filleul : ' + cartePar.operationCommercialCarte.avantageFilleul + ' €'}}</p></div>
            <div class="operation-id flex-center"><p class="white-text info-text font-bold">Parrain: {{parrain.familyname}} {{parrain.firstname}}</p></div>
          </div>
          <div class="text-center" id="dateFin">
            <label class="white-text info-text font-bold">Valable jusqu'au: {{cartePar.dateFin | date:'dd/MM/yyyy'}}</label>
          </div>
        </div>
        <div class="card-footer" style="margin-top:5%">
          <div *ngIf="carteEnvoieEncours">
            <div class="row">
              <div class="col-md-12" id="footer-1">
                <svg class="spinner" width="40px" height="40px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                  <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
                </svg>
              </div>
            </div>
            <div class="row flex-center" id="footer-1bis">
              <p>Envoie en cours</p>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12" id="footer-2">
              <button class="btn btn-light-green waves-light" tooltip="Deux emails (validation de l'adresse email et nouveau mot de passe) seront envoyés au nouveau parrain pour qu'il puisse accéder à son compte et voir sa nouvelle carte de parrainage" placement="top"  [disabled]="email.errors || validationBirthday() || carteEnvoieOK" (click)="regiPar()"><i class="fa fa-user-plus" aria-hidden="true"></i>Creer nouveau parrain & envoyer carte</button>
              <button class="btn btn-cyan" [disabled]="carteEnvoieEncours" (click)="goToOpComm()">Retour</button>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12" id="footer-3">
              <div *ngIf="carteEnvoieOK"  class="alert alert-success">
                Une carte vient d'être envoyée au nouveau Parrain {{cartePar.parrainCarte.firstname}} {{cartePar.parrainCarte.familyname}}
              </div>
              <div *ngIf="echecRegisterPar && !carteEnvoieOK"  class="alert alert-danger">
                Erreur: Un compte avec cet <strong>email</strong> existe déjà.
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Fin Si cest un nouveau parrain -->

      <!-- Si cest un parrain existant -->
      <div class="parrainExit wow fadeInUp" *ngIf="radioParrain === 'ParrainExist'">

        <!--
        <div class="dropdown" dropdown>
          <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle waves-light" mdbRippleRadius>
            Parrains Existants
          </button>

          <div class="dropdown-menu">
            <h6 class="dropdown-header">Parrains Existants</h6>
            <a class="dropdown-item" *ngFor="let par of parrainExistList | async" (click)="getIdParrain(par.uid)">{{par.firstname}} {{par.familyname}}</a>
          </div>
        </div>
        -->
        <p>Vous avez selectionné le parrain {{parSelect}}</p>
        <div class="md-form">
          <i class="fa fa-user prefix grey-text"></i>
          <input
            #query
            (keyup)="filter(query.value)"
            type="text" class="form-control" placeholder="Cherchez Parrains Existants...">
          <div *ngFor="let parrain of filteredParrainsTest">
            <a (click)="getIdParrain(parrain.uid)">{{parrain.firstname}} {{parrain.familyname}}</a>
            <p>
              {{parrain?.status}}
            </p>
          </div>
        </div>


        <div class="md-form birthdayPar">
          <i class="fa fa-birthday-cake prefix grey-text"></i>
          <input type="date" id="orangeForm-Birthday"  class="col-md-2" [(ngModel)]="birthdayTemp" placeholder="Date de naissance" name="birthday" #birthday="ngModel">
          <div *ngIf="(birthdayTemp !== parrain.birthday) && (birthday.dirty || birthday.touched)"  class="alert alert-danger">
            La date de naissance doit être la même que celle de <strong><i>{{parrain.firstname}} {{parrain.familyname}}</i></strong>.
          </div>
        </div>

        <label>
          En cliquant sur Envoyer 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="col-md-6 d-flex flex-column " id="subCard1" [ngStyle]="{ 'background-image': 'url(' + cartePar.carteTemplate.downloadURL + ')'}">
          <!--<img src="{{cartePar.carteTemplate.downloadURL}}" id="image1" class="img-fluid mx-auto d-block flex-center card-img-overlay" alt="Responsive image">-->
          <div class="subCard1-row d-flex flex-row">
            <div class="merchant-name d-flex flex-column justify-content-center">
              <p class="white-text info-text font-bold text-center">{{commercant.commercialName}}</p>
              <p class="white-text info-text font-bold text-center">{{cartePar.operationCommercialCarte.name}}</p>
            </div>
            <div class="merchant-logo">
              <img src="{{commercant.image.downloadURL}}" id="image1" class="img-fluid mx-auto d-block flex-center card-img-overlay" alt="Responsive image">
            </div>
          </div>
          <div class="subCard1-row d-flex flex-row">
            <div class="operation-data flex-center"><p class="white-text info-text font-bold">{{ ((cartePar.operationCommercialCarte.avantageFilleul == 0)) ? '' : 'Avantage filleul : ' + cartePar.operationCommercialCarte.avantageFilleul + ' €'}}</p></div>
            <div class="operation-id flex-center"><p class="white-text info-text font-bold">Parrain : {{cartePar.parrainCarte.familyname}} {{cartePar.parrainCarte.firstname}}</p></div>
          </div>
          <div class="text-center" id="dateFin">
            <label class="white-text info-text font-bold">Valable jusqu'au: {{cartePar.dateFin | date:'dd/MM/yyyy'}}</label>
          </div>
        </div>


        <div class="card-footer" style="margin-top:5%">
          <div *ngIf="carteEnvoieEncours">
            <div class="row">
              <div class="col-md-12" id="footer-1">
                <svg class="spinner" width="40px" height="40px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                  <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
                </svg>
              </div>
            </div>
            <div class="row flex-center" id="footer-1bis">
              <p>Envoie en cours</p>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12" id="footer-2">
              <button class="btn btn-light-green waves-light" tooltip="Envoyer cette nouvelle carte et elle sera ajoutée à la liste des cartes de parrainage du parrain" placement="top"  [disabled]="(parSelect === '') || (birthdayTemp !== parrain.birthday) || carteExitDeja || carteEnvoieOK" (click)="envoyerCartePar()"><i class="fa fa-send-o" aria-hidden="true"></i>Envoyer Carte {{parSelect}}</button>
              <button class="btn btn-cyan" [disabled]="carteEnvoieEncours" (click)="goToOpComm()">Retour</button>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12" id="footer-3">
              <div *ngIf="carteExitDeja && !carteEnvoieOK"  class="alert alert-danger">
                Erreur: {{cartePar.parrainCarte.firstname}} {{cartePar.parrainCarte.familyname}} à déjà une carte de {{opComm.name}} !
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Fin Si cest un parrain existant -->

      <!--<button class="btn btn-blue waves-light" (click)="sectionToImage()"> screen </button>-->
    </div>

  </div>
</div>