<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Añadir Fondos</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
  <p class="ion-text-wrap">Está por añadir un fondo extra al servicio realizado por  <b>{{ supplier }}</b>.
    Para continuar, seleccione la tarjeta con la que desee pagar el servicio e ingrese el código
    de seguridad de la tarjeta.</p><br>
          <ion-item [class.ng-invalid]="!amount_check">
            <ion-label position="fixed">Monto</ion-label>
            <ion-input ngModel type="number" name="money" (ionChange)="check($event)" [class.ng-invalid]="!amount_check" placeholder="Minimo $150.00" step="0.01" min="150"></ion-input>
          </ion-item>
          <ion-item>
            <ion-label>Tarjeta</ion-label>
              <ion-select style="max-width:90%" interface="action-sheet" [(ngModel)]="cards_menu" (ionChange)="selected_card($event)">
                <ion-select-option>Agregar tarjeta</ion-select-option>
                <ion-select-option *ngFor="let card of cards" [value]="card.id">{{card.brand}} - {{card.card_number}}</ion-select-option>
              </ion-select>
            </ion-item>
    <form #form="ngForm" id="card_form" (ngSubmit)="addExtra(form)" method="post">
          <ion-item [class.ng-invalid]="!code_check">
            <ion-label position="floating">CVV</ion-label>
            <ion-input type="password" ngModel name="code" (ionChange)="code_checker($event)" [class.ng-invalid]="!code_check" size="3"></ion-input>
          </ion-item><br><br>
      <ion-button type="submit" expand="full" color="secondary">Añadir Extra</ion-button>
    </form>
</ion-content>
