<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-back-button slot="start"></ion-back-button>
    <ion-title class="ion-text-center">{{ 'LABEL_TTITLE_9' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-text-center ion-no-padding" #content>
  <div class="xc" *ngIf="!isSubscriptionPurchase">
    <app-empty-component *ngIf="matchEvents && !matchEvents.length" [emptySettingsSlide]="emptySettingsSlide">
    </app-empty-component>
    <ion-list class="listSelect" *ngIf="matchEvents && matchEvents.length">
      <img class="imgSport" src="{{ flashTicketIcon }}?_dc={{ time }}" *ngIf="showImgSport" />
      <ion-item>
        <ion-select interface="popover" class="myCustomSelect" [(ngModel)]="matchEventId"
          placeholder="{{ 'flash_tickets.options' | translate }}"
          [interfaceOptions]="{'cssClass': 'mycomponent-wider-popover'}"
          (ngModelChange)="getTribunesParentFlashTicket(matchEventId)" disabled>
          <ion-select-option *ngFor="let matchEvent of matchEvents" [value]="matchEvent.id">
            {{matchEvent.name}}</ion-select-option>
        </ion-select>
      </ion-item>
    </ion-list>

    <ion-list class="listSelect" *ngIf="matchEvents && matchEvents.length && showCouponInput">
      <h2>{{ 'flash_tickets.available_coupon' | translate }}</h2>
      <ion-item lines="none">
        <ion-input placeholder="{{ 'flash_tickets.coupon_code' | translate }}" [(ngModel)]="currentCupon"
          (keypress)="onKeyPress($event)" [disabled]="!availableInputCupon" required></ion-input>
        <ion-button size="medium" slot="end" (click)="inputCupon()" [disabled]="currentCupon.trim().length === 0"
          style="font-size: min(4vw, 14px); margin: 0px 0px 0px 5px;"
          [disabled]="currentCupon.trim().length === 0 || !availableInputCupon">{{ 'flash_tickets.apply_coupon' |
          translate }}</ion-button>
      </ion-item>
    </ion-list>

    <ion-list style="width: 94%; margin: 5px 0px;" *ngIf="tribunesParent && tribunesParent.length">
      <div class="ion-margin-top divDetail">
        <img [style.width]="widthStadiumImage" src="{{ flashStadiumImage }}?_dc={{ time }}"
          onerror="if (this.src != 'error.jpg') this.src = '../../assets/img/appicon.png';" />
        <ion-list class="paddingBottomItem" *ngIf="tribunesParent.length > 1">
          <ion-item>
            <ion-label>{{ 'flash_tickets.tribunes_flash' | translate }}</ion-label>
            <ion-select interface="action-sheet" class="myCustomSelect" [(ngModel)]="tribuneParentId"
              (ngModelChange)="getActiveTribunesParent(tribuneParentId)" [multiple]="true">
              <ion-select-option *ngFor="let tribuneParent of tribunesParent" [value]="tribuneParent.id"
                [disabled]="tribuneParent.availabled < 1">
                {{ tribuneParent.zone.name}} ({{tribuneParent.availabled}} {{ 'flash_tickets.availabled' | translate }})
              </ion-select-option>
            </ion-select>
          </ion-item>
        </ion-list>
        <div *ngIf="activeTribunesParent && activeTribunesParent.length">
          <h1 class="ion-text-center">{{ 'flash_tickets.purchase_detail' | translate }}</h1>
          <div class="row separatorItem">
            <div class="column">
              <h3 class="uppercaseText">{{ 'flash_tickets.ticket_price' | translate }}</h3>
            </div>
            <div class="column">
              <h3 class="uppercaseText">{{ 'flash_tickets.tickets' | translate }}</h3>
            </div>
            <div class="column">
              <h3 class="uppercaseText">{{ 'flash_tickets.purchase_value' | translate }}</h3>
            </div>
          </div>
          <div *ngFor="let tribune of activeTribunesParent; last as isLast">
            <p class="paddingItem" *ngIf="!isLast || activeTribunesParent.length == 1"></p>
            <ion-row>
              <ion-card>
                <img *ngIf="tribune.show_image && tribune.image" alt="{{ tribune.zone.name }}"
                  src="{{ tribune.image }}?_dc={{ time }}" />
                <img *ngIf="tribune.show_image && !tribune.image" alt="{{ tribune.zone.name }}"
                  src="https://ionicframework.com/docs/img/demos/card-media.png" />
                <ion-card-header>
                  <ion-card-title>{{ tribune.zone.name }}</ion-card-title>
                  <ion-card-subtitle>
                    <ion-label>{{ 'tickets.image_1' | translate }}: {{ tribune.availabled }}</ion-label>
                  </ion-card-subtitle>
                </ion-card-header>

                <ion-card-content class="cardContent">
                  <ion-label *ngIf="tribune.description">{{ 'Descripción' | translate }}: {{ tribune.description
                    }}</ion-label>
                  <div class="row" style="padding-top: 10px;">
                    <div class="column">
                      <h4 class="uppercaseText">
                        {{ validatePrice(tribune) | formatCurrency : currency }}
                      </h4>
                    </div>
                    <div class="column">
                      <ion-item lines="none" class="containerQuantity">
                        <ion-button slot="start" color="secondary" size="small" fill="clear" class="ion-no-margin"
                          (click)="removeTicketCart(tribune)" [disabled]="!tribune.quantity || tribune.quantity == 0">
                          <ion-icon name="remove-outline" class="ion-no-margin"></ion-icon>
                        </ion-button>
                        <ion-label class="ion-text-center" *ngIf="tribune.quantity">{{ tribune.quantity }}</ion-label>
                        <ion-label class="ion-text-center" *ngIf="!tribune.quantity">0</ion-label>
                        <ion-button slot="end" color="secondary" size="small" fill="clear" class="ion-no-margin"
                          (click)="addTicketCart(tribune)"
                          [disabled]="tribune.quantity >= tribune.availabled || disableAddButton">
                          <ion-icon name="add-outline" class="ion-no-margin"></ion-icon>
                        </ion-button>
                      </ion-item>
                    </div>
                    <div class="column">
                      <h4 *ngIf="tribune.priceTickets">{{ validatePrice(tribune) | formatCurrency : currency }}
                      </h4>
                      <h4 *ngIf="!tribune.priceTickets">{{ 0 | formatCurrency : currency }}</h4>
                    </div>
                  </div>
                </ion-card-content>
              </ion-card>
            </ion-row>
            <p class="separatorItem" *ngIf="!isLast"></p>
          </div>
        </div>
      </div>
    </ion-list>
  </div>
  <div class="xc" *ngIf="isSubscriptionPurchase">
    <app-empty-component *ngIf="preSubscriberTickets && !preSubscriberTickets.length"
      [emptySettingsSlide]="emptySettingsSlide">
    </app-empty-component>
    <ion-list *ngIf="preSubscriberTickets && preSubscriberTickets.length">
      <div class="ion-margin-top divDetail">
        <img [style.width]="widthStadiumImage" src="{{ flashStadiumImage }}?_dc={{ time }}"
          onerror="if (this.src != 'error.jpg') this.src = '../../assets/img/appicon.png';" />
        <h1 class=" ion-text-center">{{ 'flash_tickets.presubscriber_purchase_detail' | translate }}</h1>
        <div class="row separatorItem">
          <div class="column">
            <h3 class="uppercaseText">{{ 'flash_tickets.seat' | translate }}</h3>
          </div>
          <div class="column">
            <h3 class="uppercaseText">{{ 'flash_tickets.price' | translate }}</h3>
          </div>
          <div class="column">
            <h3 class="uppercaseText">{{ 'flash_tickets.select' | translate }}</h3>
          </div>
        </div>
        <div *ngFor="let preSubscriber of preSubscriberTickets; last as isLast">
          <p class="paddingItem" *ngIf="!isLast || preSubscriberTickets.length == 1"></p>
          <div class="row">
            <div class="column">
              <p>{{ preSubscriber.seat_name }}</p>
            </div>
            <div class="column">
              <p>{{ preSubscriber.price | formatCurrency : currency }}</p>
            </div>
            <div class="column">
              <p *ngIf="preSubscriber.payment">{{ 'flash_tickets.buy_state_ticket' | translate }}</p>
              <ion-checkbox color="primary" *ngIf="!preSubscriber.payment" checked="false"
                value="{{ preSubscriber.id }}" (ionChange)="changePurchaseStatus($event)"></ion-checkbox>
            </div>
          </div>
          <p class="separatorItem" *ngIf="!isLast"></p>
        </div>
      </div>
    </ion-list>
  </div>
</ion-content>
<ion-footer *ngIf="buyTickets && buyTickets.length">
  <ion-item lines="none">
    <ion-label>
      <p class="detailPayment"> {{ 'subtotal_label' | translate }} </p>
      <p class="detailPayment" *ngIf="serviceChargeEnabled && serviceCharge"> {{ 'service_label' | translate }} </p>
      <h2> {{ 'total_label' | translate }} </h2>
    </ion-label>
    <ion-label slot="end">
      <p class="detailPayment"> {{ subtotal | formatCurrency : currency }} </p>
      <p class="detailPayment" *ngIf="serviceChargeEnabled && serviceCharge"> {{ serviceCharge | formatCurrency : currency }} </p>
      <h2> {{ total | formatCurrency : currency }} </h2>
      <app-coin-info [price]="total" *ngIf="enablePaymentWithCoins"></app-coin-info>
    </ion-label>
  </ion-item>
  <ion-item lines="none">
    <ion-button class="payButton" size="large" (click)="validateCreateBlocks()" *ngIf="!isSubscriptionPurchase">
      {{ 'flash_tickets.buy_tickets' | translate }}
    </ion-button>
    <ion-button class="payButton" size="large" (click)="createPurchaseSubscribers()" *ngIf="isSubscriptionPurchase">
      {{ 'flash_tickets.buy_subscriptions' | translate }}
    </ion-button>
  </ion-item>
</ion-footer>