<ion-header>
  <ion-navbar>
	<ion-buttons start>
	</ion-buttons>
    <ion-title>ENVÍO Y ABONO</ion-title>
    <ion-buttons end>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content class="new2018">

  <h2>DIRECCIÓN DE ENVÍO</h2>
  <div class="itemlisting">
    <ion-list radio-group [(ngModel)]="order.to" (ionChange)="changeDirection($event)">
      <!-- <ion-list-header>
        Auto Manufacturers
      </ion-list-header> -->
      <ion-item *ngFor="let address of addresses; let i = index;">
        <ion-label class="fullname text-wrap">{{address.street}}<br />{{address.city_name}}</ion-label>
        <ion-radio value="{{address.id}}"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label class="fullname">Nueva dirección</ion-label>
        <ion-radio value="N"></ion-radio>
      </ion-item>
    </ion-list>
  </div>
  <h2 *ngIf="order.to == 'N'">NUEVA DIRECCIÓN</h2>
  <div class="itemlisting" *ngIf="order.to == 'N'">
      <ion-list>
        <ion-item>
          <ion-input type="text" [(ngModel)]="order.street" placeholder="Calle y Número"></ion-input>
        </ion-item>
        <ion-item>
          <ion-input type="text" [(ngModel)]="order.additional" placeholder="Departamento, Piso, Torre"></ion-input>
        </ion-item>
        <ion-item>
          <ion-label>Región</ion-label>
          <ion-select [(ngModel)]="order.state" okText="OK" cancelText="Cancelar" (ngModelChange)="changeCities($event)">
            <ion-option *ngFor="let state of states" [value]="state.id">{{state.name}}</ion-option>
          </ion-select>
        </ion-item>
        <ion-item>
          <ion-label>Ciudad/Comuna</ion-label>
          <ion-select [(ngModel)]="order.city" okText="OK" cancelText="Cancelar" (ngModelChange)="calculateShipping($event)">
            <ion-option *ngFor="let city of cities" [value]="city.id">{{city.name}}</ion-option>
          </ion-select>
        </ion-item>
      </ion-list>
  </div>

  <h2>COMENTARIOS</h2>
  <div class="formContainer itemlisting">
    <ion-item>
      <ion-textarea [(ngModel)]="order.comment" placeholder="Escribe aqui algun mensaje adicional para el motoboy / repartidor"></ion-textarea>
    </ion-item>
  </div>


</ion-content>
<ion-footer>
  <ion-navbar>
    <ion-title>
      <h4>
        Pedido: $ {{itemsTotal() | number}}<br />
        Despacho: $ {{order.ship_price | number}}
      </h4>
      <h3>A abonar: $ {{cartTotal() | number}}</h3>
    </ion-title>
    <ion-buttons end>
      <button class="make-buy" ion-button round outline (tap)="pagar()">
        Abonar ahora
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-footer>