<ion-header>
  <ion-navbar>
    <ion-buttons start>
      <button ion-button (click)="close_modal()">Close</button>
    </ion-buttons>
    <ion-title>New Car Wash</ion-title>
    <ion-buttons end>
      <button ion-button (click)="submit()">Submit</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content class="outer-content">

  <div *ngFor="let a of appointments; let idx = index">
    <ion-card>
      <ion-grid>

        <ion-row>
          <ion-col col-8>
            <ion-item>
              <ion-label stacked>New address</ion-label>
              <ion-input [disabled]="appointments[idx].myaddress" type="text" [(ngModel)]="appointments[idx].address"
                placeholder="New address"></ion-input>
            </ion-item>
          </ion-col>

          <ion-col col-4 text-center>
            <ion-label stacked>My Address</ion-label>
            <ion-checkbox [(ngModel)]="appointments[idx].myaddress" checked="isChecked"></ion-checkbox>
          </ion-col>
        </ion-row>

        <ion-row>
          <ion-col>
            <ion-item>
              <ion-label stacked>When</ion-label>
              <ion-datetime displayFormat="DDD, MMM DD YYYY - h mm A" pickerFormat="MMM DD YYYY h mm A"
                hourValues="[9, 10, 11, 12, 13, 14, 15, 16, 17]" minuteValues="[0, 30]" [min]="minDate" max="2020"
                [(ngModel)]="appointments[idx].date">
              </ion-datetime>
            </ion-item>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-8>
            <ion-item (click)="prices(idx)">
              <ion-label stacked>Detail (click for choose)</ion-label>
              <ion-input [(ngModel)]="appointments[idx].type2" disabled value="{{appointments[idx].type}}"></ion-input>
            </ion-item>
          </ion-col>
          <ion-col col-4>
            <ion-item>
              <ion-label stacked>Price</ion-label>
              <ion-input [(ngModel)]="appointments[idx].price2" disabled value="{{appointments[idx].price}}">
              </ion-input>
            </ion-item>
          </ion-col>
        </ion-row>
        <ion-row (click)="remove(idx)">
          <ion-col text-center style="color: red">
            Remove
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card>

  </div>

  <ion-fab bottom right>
    <button ion-fab outline small (click)="add()">
      <ion-icon name="add"></ion-icon>
    </button>
  </ion-fab>

</ion-content>