<ion-header mode="ios" class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start" (click)="onBack()">
      <ion-button>
        <ion-icon name="arrow-back-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-buttons slot="end">
      <!--      <ion-button>-->
      <!--        <ion-icon name="ellipsis-horizontal-circle-outline"></ion-icon>-->
      <!--      </ion-button>-->
    </ion-buttons>
    <ion-title>Add Credit</ion-title>
  </ion-toolbar>
</ion-header>
<!--<ion-header>-->
<!--  <ion-toolbar>-->
<!--    <ion-title>{{currency_description}} Wallet</ion-title>-->
<!--  </ion-toolbar>-->
<!--</ion-header>-->
<ion-content>
<!--  <div class="bg_image back_image" [style.backgroundImage]="'url(https://www.wrenchboard.com/assets/images/apps/redeem.jpg)'">-->
<!--    <div class="ion-padding">-->
<!--      &lt;!&ndash;      <ion-icon slot="start" name="arrow-back" class="back" (click)="onBack()"></ion-icon>&ndash;&gt;-->
<!--    </div>-->
<!--  </div>-->

  <div class="ion-padding">
    <div class="boxed_contents">
      <ion-label class="color_text">Current Balance: {{curr_balance| number : '1.2-2'}} {{currency_description}}</ion-label>
      <div class="items">
      </div>
      <div class="about">
        <div *ngIf="curr_page =='redeem_start'" >
          <ion-card>
            <ion-card-header>
              <ion-card-title>Credit {{currency_code}} Wallet</ion-card-title>
              <!--                <ion-card-subtitle>Redeem from {{currency_code}} Wallet</ion-card-subtitle>-->
            </ion-card-header>

            <ion-card-content>

              <div *ngIf="processor == 3030">
                <ion-grid class="send-grid">
                  <ion-row>
                    <ion-col class="intr">Amount({{currency_code}}) :</ion-col>
                    <ion-col>
                      <ion-input (ionChange)="refreshFee()"  type="number" label="Amount(ggg)" placeholder="Enter Amount"  [(ngModel)]='amount'></ion-input>
                    </ion-col>
                  </ion-row>
                  <ion-row>
                    <ion-col class="intr">Fee :</ion-col>
                    <ion-col>
                      <ion-input label="Fee"    type="number" placeholder="0"  [(ngModel)]='fee_display' [readonly]="true"></ion-input>
                    </ion-col>
                  </ion-row>
                  <ion-row>
                    <ion-col class="intr">Total :</ion-col>
                    <ion-col>
                      <ion-input label="Total"    type="number" placeholder="0"  [(ngModel)]='total_display' [readonly]="true"></ion-input>
                    </ion-col>
                  </ion-row>
                  <ion-row>
                    <ion-col>
                      <ion-button expand="block" shape="round" [disabled]="isDisabled" color="secondary" (click)="contineAddCredit(processor)">Continue</ion-button>
                    </ion-col>
                  </ion-row>

                </ion-grid>
              </div>

              <div *ngIf="processor == 5000">
                <ion-grid class="send-grid">
                  <ion-row>
                    <ion-col class="intr">Amount({{currency_code}}) :</ion-col>
                    <ion-col>
                      <ion-input (ionChange)="refreshFee()"  type="number" label="Amount(ggg)" placeholder="Enter Amount"  [(ngModel)]='amount'></ion-input>
                    </ion-col>
                  </ion-row>
                  <ion-row>
                    <ion-col class="intr">Fee :</ion-col>
                    <ion-col>
                      <ion-input label="Fee"    type="number" placeholder="0"  [(ngModel)]='fee_display' [readonly]="true"></ion-input>
                    </ion-col>
                  </ion-row>
                  <ion-row>
                    <ion-col class="intr">Total :</ion-col>
                    <ion-col>
                      <ion-input label="Total"    type="number" placeholder="0"  [(ngModel)]='total_display' [readonly]="true"></ion-input>
                    </ion-col>
                  </ion-row>
<!--                  <div class="row">-->
<!--                    <ion-label class="bg_text">3D Design</ion-label>-->
<!--                    <div class="rate">-->
<!--                      <ion-icon name="star-half-outline" color="warning"></ion-icon>-->
<!--                      <ion-label class="review">4.8 (4478 reviews)</ion-label>-->
<!--                    </div>-->
<!--                  </div>-->
                  <ion-row>
                    <ion-col>Payment
                      <ion-toolbar>
                        <ion-buttons slot="secondary">
                          <ion-button fill="outline" size="small" shape="round" (click)="setCcType(200)">
                            <ion-icon slot="start" name="card" ></ion-icon>
                             Cards
                          </ion-button>
                        </ion-buttons>

                        <ion-buttons slot="secondary">
                          <ion-button fill="outline" size="small"  shape="round" (click)="setCcType(400)">
                            <ion-icon slot="start" name="add-circle" ></ion-icon>
                            New Card
                          </ion-button>
                        </ion-buttons>
                      </ion-toolbar>

<!--                      <div class="row">-->
<!--                        <ion-radio-group value="custom-checked" style="margin-left: 20px; font-size: 12px; color: #1e2023;">-->
<!--                          Previous : <ion-radio value="custom-checked" aria-label="Custom checkbox"></ion-radio>-->
<!--                          New Card: <ion-radio value="custom" aria-label="Custom checkbox that is checked"></ion-radio>-->
<!--                        </ion-radio-group>-->

<!--&lt;!&ndash;                        <ion-label class="bg_text">3D Design</ion-label>&ndash;&gt;-->
<!--&lt;!&ndash;                        <div class="rate">&ndash;&gt;-->
<!--&lt;!&ndash;                       &ndash;&gt;-->

<!--&lt;!&ndash;                          <ion-icon name="star-half-outline" color="warning"></ion-icon>&ndash;&gt;-->
<!--&lt;!&ndash;                          <ion-label class="review">4.8 (4478 reviews)</ion-label>&ndash;&gt;-->
<!--&lt;!&ndash;                        </div>&ndash;&gt;-->
<!--                      </div>-->
                    </ion-col>
                  </ion-row>
                  <ion-row *ngIf="card_level==200">
                    <ion-col>
                      <ion-select  (ionChange)="refreshFee()" placeholder="Select Payment Card"  [(ngModel)]='payment_card' size="block">
                        <ion-select-option value="{{item.card_uid}}"  *ngFor="let item of usersCardsData">{{item.description}} **** **** **** {{item.digits}}</ion-select-option>
                      </ion-select>
                    </ion-col>
                  </ion-row>
                  <ion-row *ngIf="card_level==400">
                    <ion-col>

                      <ion-item lines="none">
                        <ion-input type="text" placeholder="Card Holder"></ion-input>
                      </ion-item>

                      <ion-item lines="none">
                        <ion-input type="number" placeholder="Card Number"></ion-input>
                      </ion-item>

                      <ion-item lines="none">
                        <ion-input type="number" placeholder="Expiry Date"></ion-input>
                      </ion-item>

                      <ion-item lines="none">
                        <ion-input type="number" placeholder="CVV"></ion-input>
                      </ion-item>

                    </ion-col>
                  </ion-row>

                  <ion-row>
                    <ion-col>
                      <ion-button expand="block" shape="round" [disabled]="isDisabled" color="secondary" (click)="contineAddCredit(processor)">Continue</ion-button>
                    </ion-col>
                  </ion-row>

                </ion-grid>
              </div>





              <!--                    <ion-list>-->
              <!--                        <ion-item>-->
              <!--                            <ion-label>Amount({{currency_code}})</ion-label>-->
              <!--                            <ion-input (ionChange)="refreshFee()"  type="number" label="Amount(ggg)" placeholder="Enter Amount"  [(ngModel)]='amount'></ion-input>-->
              <!--                        </ion-item>-->

              <!--                        <ion-item>-->
              <!--                            <ion-label >Fee</ion-label>-->
              <!--                            <ion-input label="Fee"    type="number" placeholder="0"  [(ngModel)]='fee_display' [readonly]="true"></ion-input>-->
              <!--                        </ion-item>-->

              <!--                        <ion-item>-->
              <!--                            <ion-label>Total</ion-label>-->
              <!--                            <ion-input label="Total"    type="number" placeholder="0"  [(ngModel)]='total_display' [readonly]="true"></ion-input>-->
              <!--                        </ion-item>-->

              <!--&lt;!&ndash;                        <ion-item>&ndash;&gt;-->
              <!--&lt;!&ndash;                            <ion-select-option value="" >Select Recipient</ion-select-option>&ndash;&gt;-->
              <!--&lt;!&ndash;&lt;!&ndash;                            <ion-select  placeholder="Select Recipient"  [(ngModel)]='recipient' size="block">&ndash;&gt;&ndash;&gt;-->
              <!--&lt;!&ndash;&lt;!&ndash;&lt;!&ndash;                                <ion-select-option value="" >Select Recipient</ion-select-option>&ndash;&gt;&ndash;&gt;&ndash;&gt;-->
              <!--&lt;!&ndash;&lt;!&ndash;                                <ion-select-option value="{{item.recipient_uid}}"  *ngFor="let item of myRecipientsData">{{item.recipient}}</ion-select-option>&ndash;&gt;&ndash;&gt;-->
              <!--&lt;!&ndash;&lt;!&ndash;                            </ion-select>&ndash;&gt;&ndash;&gt;-->
              <!--&lt;!&ndash;&lt;!&ndash;                            <ion-label>{{recipient_name}}</ion-label>&ndash;&gt;&ndash;&gt;-->
              <!--&lt;!&ndash;                        </ion-item>&ndash;&gt;-->

              <!--                        <div>-->
              <!--                            <ion-select  placeholder="Select Recipient"  [(ngModel)]='recipient' size="block">-->
              <!--                                &lt;!&ndash;                                <ion-select-option value="" >Select Recipient</ion-select-option>&ndash;&gt;-->
              <!--                                <ion-select-option value="{{item.recipient_uid}}"  *ngFor="let item of myRecipientsData">{{item.recipient}}</ion-select-option>-->
              <!--                            </ion-select>-->
              <!--                            <ion-label>{{recipient_name}}</ion-label>-->
              <!--                        </div>-->

              <!--                    </ion-list>-->


            </ion-card-content>
          </ion-card>
        </div>



      </div>
    </div>

  </div>
</ion-content>

<div *ngIf="isModalOpenBackdrop==true">
  <ion-backdrop [visible]="isModalOpenBackdrop"></ion-backdrop>
  <ion-modal class="common_modal" [isOpen]="isModalOpen">

    <ng-template>

      <ion-header>
        <ion-toolbar>
          <ion-title>Confirm Payment</ion-title>
          <ion-buttons slot="end">
            <ion-button (click)="setCloseModal()">Close</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
      <ion-content class="ion-padding">

        <ion-list class="pop_list">
          <ion-list-header>
            <ion-label>Credit {{currency_code}} Wallet</ion-label>
          </ion-list-header>
          <ion-item>
            <ion-label>Amount: </ion-label>
            <div>{{startCreditResult.amount*0.01| number : '1.2-2' }}</div>
          </ion-item>
          <ion-item>
            <ion-label>Fee: </ion-label>
            <div>{{startCreditResult.fee*.01 | number : '1.2-2'}}</div>
          </ion-item>
          <ion-item>
            <ion-label>Total: </ion-label>
            <div>{{startCreditResult.total*.01| number : '1.2-2' }}</div>
          </ion-item>
          <ion-item *ngIf="startCreditResult.card_uid !='' ">
            <ion-label>Payment: </ion-label>
            <div>{{selPaymentCard.description}} **** **** {{selPaymentCard.digits}}</div>
          </ion-item>

        </ion-list>

        <ion-list class="pop_list" lines="none">
          <ion-item  >
            <ion-label>Ref Number: </ion-label>
          </ion-item>
          <ion-item>
            <div>{{startCreditResult.credit_reference}}</div>
          </ion-item>

<!--          <ion-item style="background-color: #d9f3d9;" *ngIf="credit_confirmation !='' ">-->
<!--            <ion-label>Confirmation: </ion-label>-->
<!--            <div>{{credit_confirmation}}</div>-->
<!--          </ion-item>-->
        </ion-list>

        <div style="background-color: #d9f3d9;"  *ngIf="credit_confirmation !='' ">
          <ion-list class="pop_list" lines="none">
            <ion-item>
              <div>Credit is Successful</div>
            </ion-item>

            <ion-item>
              <ion-label>Confirmation: </ion-label>
              <div>{{credit_confirmation}}</div>
            </ion-item>
          </ion-list>
        </div>



      </ion-content>
      <ion-footer>
        <ion-toolbar>
          <ion-button  [disabled]="isProcessDisabled"       (click)="processPayment(processor)">Complete</ion-button>
        </ion-toolbar>
      </ion-footer>
    </ng-template>
  </ion-modal>
</div>