<app-nav-commercant></app-nav-commercant>
<div class="container" style="padding-top: 10%">
  <div class="card wow fadeInLeft" style="padding: 5%;">
    <div class="card-block">
      <h5 class="mb-5 mt-1 font-bold wow fadeInDown text-center">Nouvelle operation commerciale</h5>
      <div class="md-form">
        <i class="fa fa-address-card prefix grey-text"></i>
        <input type="text" id="orangeForm-Familyname" [(ngModel)]="opComm.name" placeholder="Nom">
      </div>
      <div class="md-form birthdayPar">
        <i class="fa fa-calendar-check-o prefix grey-text"></i>
        <input type="date" id="orangeForm-Date" class="col-md-3" [(ngModel)]="opComm.dateDebut" placeholder="Date debut" required min="minDateTimeTest" max="maxDateTimeTest" name="dateDeb" #dateDeb="ngModel">
        <div *ngIf="(validationDateDebut()) && (dateDeb.dirty || dateDeb.touched)"  class="alert alert-danger">
          La date de début doit être comprise entre <strong><i>{{todayDateTimeTest | date:'dd/MM/yyyy'}} et 01/01/2117</i></strong>.
        </div>
      </div>
      <div class="md-form birthdayPar">
        <i class="fa fa-calendar-times-o prefix grey-text"></i>
        <input type="date" id="orangeForm-Date" class="col-md-3" [(ngModel)]="opComm.dateFin" placeholder="Date fin" required min="minDateTimeTest" max="maxDateTimeTest" name="dateFin" #dateFin="ngModel">
        <div *ngIf="(validationDateFin()) && (dateFin.dirty || dateFin.touched)"  class="alert alert-danger">
          La date de fin doit être comprise entre <strong><i>{{opComm.dateDebut | date:'dd/MM/yyyy'}} et 01/01/2117</i></strong>.
        </div>
      </div>

      <div class="md-form">
        <i class="fa fa-file-picture-o prefix grey-text"></i>
        <input type="file" id="orangeForm-File" accept="image/jpeg, image/png" (click)="fileOKOpCom()" name="file" style="padding-top: 1%;">
      </div>
      <div class="md-form">
        <i class="fa fa-euro prefix grey-text"></i>
        <input type="number" id="orangeForm-Avantage" [(ngModel)]="opComm.avantageParrain" placeholder="Avantage parrain" step="any">
      </div>
      <div class="md-form">
        <i class="fa fa-euro prefix grey-text"></i>
        <input type="number" id="orangeForm-Avantage" [(ngModel)]="opComm.avantageFilleul" placeholder="Avantage filleul" step="any">
      </div>
    </div>

    <div class="text-center" style="margin-top:5%">
      <button class="btn btn-light-green waves-light" [disabled]="!dateDeb.touched || (dateDeb.touched && validationDateDebut()) || !dateFin.touched || (dateFin.touched && validationDateFin()) || fileOpCom || (opComm.name === '') || (opComm.avantageParrain === '') || (opComm.avantageFilleul === '')" (click)="creerOpComm()">Creer opération</button>
      <button class="btn btn-cyan" (click)="goToOpComm()">Retour</button>
    </div>
  </div>
</div>
