<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>{{'contracts.hire' | translate}}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
  <p class="ion-text-wrap">{{'contracts.hire_info_1' | translate}} <b>{{ supplier }}</b> {{'contracts.hire_info_2' | translate}}<br>
    {{'contracts.hire_pay' | translate}}</p><br>
    <ion-row>
      <ion-col size="9">
        <p class="ion-text-start" style="margin:0">{{'contracts.fee_amount' | translate}}:</p>
      </ion-col>
      <ion-col size="3">
        <p class="ion-text-end" style="margin:0">${{ fee | number: '1.2-2'}}</p>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="9">
        <p class="ion-text-start" style="margin:0">{{'contracts.discount_amount' | translate}}:</p>
      </ion-col>
      <ion-col size="3">
        <p class="ion-text-end" style="margin:0">${{ discount | number: '1.2-2'}}</p>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="9">
        <p class="ion-text-start" style="margin:0"><b>{{'contracts.final_amount' | translate}}:</b></p>
      </ion-col>
      <ion-col size="3">
        <p class="ion-text-end" style="margin:0"><b>${{ final_amount | number: '1.2-2'}}</b></p>
      </ion-col>
    </ion-row>
    <br>
    <ion-list>
      <ion-item>
          <ion-label position="fixed" >{{'contracts.coupon' | translate}}:</ion-label>
          <ion-input [(ngModel)]="coupon" (ngModelChange)="coupon = $event.toLocaleUpperCase()"></ion-input>
          <ion-button style="height: 3em" item-end (click)="checkCoupon()" expand="full" color="primary">{{'contracts.validate' | translate}}</ion-button>
      </ion-item>
    </ion-list>
        <ion-item *ngIf="!paymentBypass">
          <ion-label>{{'cards.card' | translate}}</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)="createContract(form)" method="post">
      <ion-item *ngIf="!paymentBypass" [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" maxlength="4"></ion-input>
      </ion-item>
      <ion-note *ngIf="paymentBypass" color="warning" style="display: block; text-align: center; margin: 1em 0;">
        <b>MODO DE PRUEBA:</b> El pago será simulado
      </ion-note>
      <br><br>
      <ion-button type="submit" expand="full" color="secondary">{{'contracts.hire_confirm' | translate}}</ion-button>
    </form>
  <br>
    <div *ngIf="!paymentBypass">
    <ion-row class="ion-align-items-center">
      <ion-col size="4">
        <img src="/assets/openpay/openpay_color.png" style="padding:0.25em 0.5em"/>
      </ion-col>
      <ion-col size=8>
        <p>{{'cards.openpay_1' | translate}}</p>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="6">
        <p class="ion-text-center">{{'cards.openpay_2' | translate}}<p>
      </ion-col>
      <ion-col size="6" style="border-left: 1px solid #d0d0d0">
        <p class="ion-text-center">{{'cards.openpay_3' | translate}}<p>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="3">
        <img src="/assets/openpay/visa.png" style="padding:0.1em 1.0em"/>
      </ion-col>
      <ion-col size="3">
        <img src="/assets/openpay/masterCard.png" style="padding:0.25em 1.5em;"/>
      </ion-col>
      <ion-col size="2" style="border-left: 1px solid #d0d0d0">
        <img src="/assets/openpay/citibanamex.png"/>
      </ion-col>
      <ion-col size=2>
        <img src="/assets/openpay/bancoAzteca.png"/>
      </ion-col>
      <ion-col size=2>
        <img src="/assets/openpay/scotiabank.png"/>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="3">
        <img src="/assets/openpay/americanExpress.png" style="padding:0.5em 1.5em"/>
      </ion-col>
      <ion-col size="3">
        <img src="/assets/openpay/carnet.png"/>
      </ion-col>
      <ion-col size="2" style="border-left: 1px solid #d0d0d0">
        <img src="/assets/openpay/inbursa.png"/>
      </ion-col>
      <ion-col size=2>
        <img src="/assets/openpay/santander.png"/>
      </ion-col>
      <ion-col size=2>
        <img src="/assets/openpay/bbva.png"/>
      </ion-col>
    </ion-row>
    </div>
</ion-content>
