<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">
      <!--      <ion-icon slot="start" name="arrow-back" class="back" (click)="onBack()"></ion-icon>-->
    </div>
  </div>

  <div class="ion-padding">
    <div class="boxed_contents">
      <ion-label class="color_text">Balance: {{curr_balance| number : '1.2-2'}} {{currency_description}}</ion-label>
      <div class="items">

      </div>
      <ion-segment class="common_segment" [(ngModel)]="tabs">
        <ion-segment-button value="bank_redeem">
          <ion-label>To Bank</ion-label>
        </ion-segment-button>
<!--        <ion-segment-button value="lesson">-->
<!--          <ion-label>My Banks</ion-label>-->
<!--        </ion-segment-button>-->
        <ion-segment-button value="reports">
          <ion-label>Reports</ion-label>
        </ion-segment-button>
      </ion-segment>

      <div *ngIf="tabs =='bank_redeem'" 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>

              <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>Payment</ion-col>
                </ion-row>
                <ion-row>
                  <ion-col>
                    <ion-select  (ionChange)="checkSelectVal()" placeholder="Select Payment Card"  [(ngModel)]='recipient' size="block">
                      <!--                                          <ion-select-option value="" >Select Recipient</ion-select-option>-->
                      <ion-select-option value="{{item.card_uid}}"  *ngFor="let item of usersCardsData">{{item.description}} **** **** **** {{item.digits}}</ion-select-option>
                      <!--                                          <ion-select-option value="ADD_NEW_RECIP" >Add Recipient</ion-select-option>-->
                    </ion-select>
                    <!--                                <ion-label>{{recipient_name}}</ion-label>-->
                  </ion-col>
<!--                  <ion-col size="3" style="text-align: right;">-->
<!--                    <ion-button  style="padding: 0px; font-size: 90%; font-weight: bolder;" (click)="addNewBank()">-->
<!--                      <ion-icon slot="icon-only" name="add"></ion-icon>-->
<!--                    </ion-button>-->
<!--                  </ion-col>-->
                </ion-row>
                <ion-row>
                  <ion-col>
                    {{recipient_name}}
                  </ion-col>
                </ion-row>

                <ion-row>
                  <ion-col>
                    <ion-button expand="block" shape="round" color="secondary" (click)="contineRedeem()">Continue</ion-button>
                  </ion-col>
                </ion-row>

              </ion-grid>


              <!--                    <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 *ngIf="curr_page =='redeem_confirm'" >
          <ion-card>
            <ion-card-header>
              <ion-card-title>Confirm Wallet Withdraw</ion-card-title>
              <!--                <ion-card-subtitle>Redeem from {{currency_code}} Wallet</ion-card-subtitle>-->
            </ion-card-header>

            <ion-card-content>

              <!--                    <ion-list>-->
              <!--                        <ion-item>-->
              <!--                            <ion-label>Amount({{currency_code}})</ion-label>-->
              <!--                            <ion-input label="Fee"    type="number" placeholder="0"  value="{{amount}}" [readonly]="true"></ion-input>-->
              <!--                        </ion-item>-->

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

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

              <!--                        <ion-item>-->
              <!--                            <ion-label>To:</ion-label>-->
              <!--                            <ion-label>{{recipient_name}}</ion-label>-->
              <!--                        </ion-item>-->
              <!--                    </ion-list>-->

              <!--                    <ion-button expand="block"  color="secondary" (click)="confirmRedeem()">Confirm</ion-button>-->

              <ion-grid class="send-grid">
                <ion-row>
                  <ion-col class="intr">Amount({{currency_code}})</ion-col>
                  <ion-col>
                    <ion-input label="Fee"    type="number" placeholder="0"  value="{{amount}}" [readonly]="true"></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>Recipient</ion-col>
                </ion-row>
                <!--                        <ion-row>-->
                <!--                            <ion-col>-->
                <!--                                <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>-->
                <!--                                &lt;!&ndash;                                <ion-label>{{recipient_name}}</ion-label>&ndash;&gt;-->
                <!--                            </ion-col>-->
                <!--                        </ion-row>-->
                <ion-row>
                  <ion-col>
                    {{recipient_name}}
                  </ion-col>
                </ion-row>

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

              </ion-grid>
            </ion-card-content>
          </ion-card>




        </div>


        <div *ngIf="curr_page =='redeem_result'" >
          <ion-card>
            <ion-card-header>
              <ion-card-title>Withdraw Result</ion-card-title>
              <!--                <ion-card-subtitle>Redeem from {{currency_code}} Wallet</ion-card-subtitle>-->
            </ion-card-header>

            <ion-card-content>
              <ion-grid class="send-grid">
                <ion-row>
                  <ion-col class="intr">Amount({{currency_code}})</ion-col>
                  <ion-col>
                    <ion-input label="Fee"    type="number" placeholder="0"  value="{{amount}}" [readonly]="true"></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>Recipient</ion-col>
                </ion-row>

                <ion-row>
                  <ion-col>
                    {{recipient_name}}
                  </ion-col>
                </ion-row>

                <ion-row>
                  <ion-col class="intr">Confirmation</ion-col>
                  <ion-col>
                    {{confirmation}}
                  </ion-col>
                </ion-row>

                <ion-row>
                  <ion-col>
                    Estimated delivery time is 2 to 4 Hours.
                  </ion-col>
                </ion-row>

              </ion-grid>


              <!--                <ion-list>-->
              <!--                    <ion-item>-->
              <!--                        <ion-label>Amount({{currency_code}})</ion-label>-->
              <!--                        <ion-input label="Amount"    type="number" placeholder="0"  value="{{amount| number : '1.2-2'}}" [readonly]="true"></ion-input>-->
              <!--                    </ion-item>-->

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

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

              <!--                    <ion-item>-->
              <!--                        <ion-label>Recipient</ion-label>-->
              <!--                        <ion-label>{{recipient_name}}</ion-label>-->
              <!--                    </ion-item>-->

              <!--                    <ion-item>-->
              <!--                        <ion-label>Confirmation</ion-label>-->
              <!--                        <ion-label>{{confirmation}}</ion-label>-->
              <!--                    </ion-item>-->
              <!--                </ion-list>-->

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

      </div>

      <div *ngIf="tabs =='reports'" class="lesson">

        <div class="video" *ngFor="let item of paymentData">
          <div class="left">
            <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/money-cycle.svg)'"></div>

            <div class="text">
              <!--            <ion-label class="bold_text">Why Using Figma ?</ion-label>-->
              <!--            <ion-label class="grey_text">10 mins</ion-label>-->

              <div class="bold_text" [innerHTML]="item.recipient"></div>
              <ion-label class="grey_text">{{item.confirmation}}- {{item.amount}}</ion-label>
            </div>
          </div>
          <div class="right">
            <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
          </div>
        </div>

        <!--      <div class="total">-->
        <!--        <div class="star-rate">-->
        <!--          <ion-icon name="star-half-outline" color="warning"></ion-icon>-->
        <!--          <ion-label class="bold">4.8 (5456 Reviews)</ion-label>-->
        <!--        </div>-->
        <!--        <ion-label class="color">See all</ion-label>-->
        <!--      </div>-->

      </div>
    </div>

  </div>
</ion-content>
<!--<ion-content>-->
<!--<div>-->
<!--  <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/card.png)'"></div>-->

<!--  <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>-->
<!--</div>-->



<!--</ion-content>-->
