<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/app/tabs/cart"></ion-back-button>
    </ion-buttons>
    <ion-title class="ion-text-center">{{ 'CONFIRM_ORDER_TITLE' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-button expand="block" (click)="addNewAddress()" color="secondary">{{ 'ADD_ADDRESS' | translate }}</ion-button>

  <ion-item class="ion-margin-vertical" *ngIf="params && params.is_point_sale">
    <ion-label>Recoger en tienda</ion-label>
    <ion-toggle [(ngModel)]="pointSale" (ionChange)="pointSaleChange()"></ion-toggle>
  </ion-item>

  <div *ngIf="!pointSale">
    <ion-item lines="none">
      <ion-label class="ion-text-center textTittleConfirmOrder">{{ 'LABEL_CONFIRM_ORDER' | translate }}</ion-label>
    </ion-item>
    <ion-item lines="none">
      <ion-label class="ion-text-center" *ngIf="addressUserLastUsed">{{ addressUserLastUsed.direction }}</ion-label>
    </ion-item>
    <ion-item lines="none">
      <ion-label class="ion-text-center" *ngIf="addressUserLastUsed">{{ addressUserLastUsed.district }}</ion-label>
    </ion-item>

  </div>

  <form #formConfirmOrder="ngForm">
    <ion-item class="selectBorderRadius" *ngIf="!pointSale">
      <ion-label>{{ 'LABEL_ADDRESS' | translate }}</ion-label>
      <ion-select interface="popover" [(ngModel)]="infoConfirmOrder.address" ngControl="address" name="address"
        #address="ngModel" okText="{{ 'TEXT_OK_SELECT' | translate }}"
        cancelText="{{ 'TEXT_CANCEL_SELECT' | translate }}" (ngModelChange)="changeAddress(infoConfirmOrder.address)"
        required>
        <ion-select-option *ngFor="let addressUser of listAddressUser"
          [value]="addressUser.id">{{addressUser.direction}}
        </ion-select-option>
      </ion-select>
    </ion-item>

    <ion-item class="selectBorderRadius" *ngIf="pointSale">
      <ion-label>{{ 'LABEL_POINT' | translate }}</ion-label>
      <ion-select interface="popover" [(ngModel)]="infoConfirmOrder.point_sale_id" ngControl="point_sale_id"
        name="point_sale_id" #point_sale_id="ngModel" okText="{{ 'TEXT_OK_SELECT' | translate }}"
        cancelText="{{ 'TEXT_CANCEL_SELECT' | translate }}" required>
        <ion-select-option *ngFor="let point of pointSalesList" [value]="point.id">{{point.name}}</ion-select-option>
      </ion-select>
    </ion-item>

    <ion-item class="selectBorderRadius" *ngIf="selectablePaymentTypes">
      <ion-label>{{ 'LABEL_WAY_TO_PAY' | translate }}</ion-label>
      <ion-select interface="popover" [(ngModel)]="infoConfirmOrder.wayPay" ngControl="wayPay" name="wayPay"
        #wayPay="ngModel" okText="{{ 'TEXT_OK_SELECT' | translate }}"
        cancelText="{{ 'TEXT_CANCEL_SELECT' | translate }}" (ngModelChange)="changeTypePayment(infoConfirmOrder.wayPay)"
        required>
        <ion-select-option *ngFor="let paymentType of selectablePaymentTypes" [value]="paymentType.id">
          {{paymentType.name}}</ion-select-option>
      </ion-select>
    </ion-item>

    <ion-item class="inputBorderRadius ion-margin-top" *ngIf="infoConfirmOrder.wayPay == 1" lines="none">
      <ion-input type="text" [(ngModel)]="effectivePaymentWayPay" (keyup)="onPriceUp($event.target.value)"
        ngControl="effectivePayment" name="effectivePayment" #effectivePayment="ngModel"
        placeholder="{{ 'EFFECTIVE_PAYMENT' | translate }}" class="ion-text-center" required></ion-input>
    </ion-item>

    <!-- <ion-item class="inputBorderRadius ion-margin-top" *ngIf="infoConfirmOrder.wayPay == 6" lines="none">
      <ion-grid>
        <ion-row class="ion-align-items-center">
          <ion-range min="0" max="{{pco_quantity_max}}" color="secondary" (ionChange)="rangeChange($event)">
            <ion-icon slot="start" name="remove-outline"></ion-icon>
            <ion-icon slot="end" name="add-outline"></ion-icon>
          </ion-range>
        </ion-row>
        <ion-row class="ion-align-items-center">
          <ion-col class="ion-text-center" size="1.5">
            <img src="assets/img/pco.png" class="logo" width="30" height="30" alt="icon" />
          </ion-col>
          <ion-col class="ion-text-center">
            {{ pco_quantity | number: "1.0-0" }}
          </ion-col>
          <ion-col class="ion-text-center" size="1">
            <ion-icon name="add-outline"></ion-icon>
          </ion-col>
          <ion-col class="ion-text-center">
            {{ price_using_pco | formatCurrency : currency }}
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-item> -->

    <ion-item class="selectBorderRadius" *ngIf="infoConfirmOrder.wayPay == 4">
      <ion-label>{{ 'LABEL_PAYMENT_ONLINE' | translate }}</ion-label>
      <ion-select interface="popover" [(ngModel)]="paymentTdc" ngControl="tdc" name="tdc" #tdc="ngModel"
        okText="{{ 'TEXT_OK_SELECT' | translate }}" cancelText="{{ 'TEXT_CANCEL_SELECT' | translate }}"
        (ngModelChange)="changeDefaultCard(paymentTdc)" required>
        <ion-select-option *ngFor="let card of listCard" [value]="card.id">{{card.obfuscated_number}}
        </ion-select-option>
      </ion-select>
    </ion-item>
    <div class="ion-text-center" padding-horizontal margin-horizontal *ngIf="infoConfirmOrder.wayPay == 4">
      <ion-button expand="block" fill="clear" (click)="addNewCard()" color="secondary">Agregar Tarjeta</ion-button>
    </div>

    <ion-item class="inputBorderRadius ion-margin-top" *ngIf="infoUser" lines="none">
      <ion-input type="tel" [(ngModel)]="infoConfirmOrder.cellphone" ngControl="cellphone" name="cellphone"
        #cellphone="ngModel" placeholder="{{ 'CELL_PHONE' | translate }}" class="ion-text-center" maxlength="191"
        required></ion-input>
    </ion-item>

    <ion-item class="inputBorderRadius ion-margin-top" lines="none">
      <ion-input type="text" [(ngModel)]="infoConfirmOrder.observations" ngControl="observations" name="observations"
        #observations="ngModel" placeholder="{{ 'OBSERVATIONS_CONFIRM_ORDERS' | translate }}" class="ion-text-center">
      </ion-input>
    </ion-item>
  </form>
</ion-content>

<ion-footer>
  <!-- <ion-item button (click)="validateOTPCode()" detail *ngIf="infoConfirmOrder.wayPay == 6" class="ion-margin-top">
    <ion-label> {{ 'VALIDATE_COINS_OTP' | translate }} </ion-label>
  </ion-item> -->

  <ion-item button (click)="validateCoupon()" detail *ngIf="couponList.length" class="ion-margin-top">
    <ion-label> {{ 'BUTTON_INSERT_COUPON' | translate }} </ion-label>
  </ion-item>

  <ion-item lines="none" *ngIf="params && params.is_automatic_bag">
    <ion-label class="ion-text-center ion-text-wrap" color="medium">{{ params.automatic_bag_text }}</ion-label>
  </ion-item>

  <ion-grid>
    <app-total-summary [title]="'TEXT_SUMMARY_CONFIRM_ORDER' | translate" [pco_option]="infoConfirmOrder.wayPay"
      [pco_price]="price_using_pco" [subtotal]="cartProvider._subtotal" [priceDomicile]="cartProvider._priceDomicile"
      [discount]="cartProvider._discount" [discountDelivery]="cartProvider._discountDelivery"
      [total]="cartProvider._total" [serviceChargeEnabled]="cartProvider._serviceChargeEnabled"
      [serviceCharge]="cartProvider._serviceCharge"></app-total-summary>
    <ion-row>
      <ion-col size="12" class="ion-no-padding ion-no-margin">
        <ion-button expand="block" fill="solid" shape="round" [disabled]="statusSendCreateOrder"
          (click)="validatedConfirmOrder(formConfirmOrder)">{{ 'BUTTON_CONFIRM_ORDER' | translate }}</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-footer>