<ion-header>
    <ion-navbar>
        <ion-buttons start>
            <button ion-button menuToggle>
                <ion-icon name="menu"></ion-icon>
            </button>
        </ion-buttons>
        <ion-title>Plan Detail</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <div *ngFor="let o of order">
        <ion-card>
            <ion-card-content >
                <p style="color: #4B0082;">Student: {{ o.student_name }}</p>
                <h2 style="font-weight: bold; padding-top: 5px; padding-bottom: 5px;">{{ o.plan_name }} {{ o.plan_level }} {{ o.plan_type }} <span *ngIf="o.plan_duration != ''">({{ o.plan_duration }})</span></h2>
                <p *ngIf="o.order_status == 0" style="color: red;">Status: {{ o.status }}</p>
                <p *ngIf="o.order_status != 0" >Status: {{ o.status }}</p>
                <p *ngIf="o.plan_second_type == 0">Start Date: {{ o.order_startDate }}</p>
                <p *ngIf="o.plan_second_type == 0">Expired Date: {{ o.order_expireDate }}</p>
                <p *ngIf="o.plan_second_type == 1">Date: {{ o.order_startDate }}</p>
                <hr>
            </ion-card-content>
        </ion-card>
    </div>
    <div>
        <ion-card>
            <ion-card-content>
                <p>Credit card or cheque payments<br>Please pay at the counter</p>
            </ion-card-content>
        </ion-card>
    </div>
    <div>
        <ion-card>
            <ion-card-content>
                <ion-list>
                    <h2 style="font-weight: bold; padding-top: 5px; padding-bottom: 5px;">Pay by Online Transfer / Bank In</h2>
                    <ion-item>
                        <ion-label stacked>Select Plan</ion-label>
                        <ion-select placeholder="Please Select" [(ngModel)]="plan" (ionChange)="planSelection($event)">
                            <ion-option *ngFor="let p of plans" [value]="p.plan_id" >{{ p.plan_name }} {{ p.plan_level }} {{ p.plan_type }} ({{ p.plan_duration }}) ({{ p.plan_price }})</ion-option>
                        </ion-select>
                    </ion-item>
                    <ion-item>
                        <ion-label stacked>Select Plan Price</ion-label>
                        <ion-input placeholder="Price" [(ngModel)]="price" readonly></ion-input>
                    </ion-item>
                    <ion-item style="display:none;">
                        <ion-label stacked>Select Payment Method</ion-label>
                        <ion-select placeholder="Please Select" [(ngModel)]="method" >
                            <ion-option value="1">Bank In Or Online Transfer</ion-option>
                            <ion-option value="2">Credit Card</ion-option>
                            <ion-option value="3">Cheque</ion-option>
                        </ion-select>
                    </ion-item>
                    <ion-item>
                        <ion-label stacked>Select Start Year</ion-label>
                        <ion-select placeholder="Please Select" [(ngModel)]="startYear" >
                            <ion-option *ngFor="let y of years" [value]="y.year">{{y.year}}</ion-option>
                        </ion-select>
                    </ion-item>
                        <ion-item>
                        <ion-label stacked>Select Start Month</ion-label>
                        <ion-select placeholder="Please Select" [(ngModel)]="startMonth" >
                            <ion-option value="1">January</ion-option>
                            <ion-option value="2">February</ion-option>
                            <ion-option value="3">March</ion-option>
                            <ion-option value="4">April</ion-option>
                            <ion-option value="5">May</ion-option>
                            <ion-option value="6">June</ion-option>
                            <ion-option value="7">July</ion-option>
                            <ion-option value="8">August</ion-option>
                            <ion-option value="9">September</ion-option>
                            <ion-option value="10">October</ion-option>
                            <ion-option value="11">November</ion-option>
                            <ion-option value="12">December</ion-option>
                        </ion-select>
                    </ion-item>
                        <ion-item>
                        <ion-label stacked style="color: #999;">Payment Proof</ion-label>
                    </ion-item>
                    <button style="margin-left: 25%;" ion-button color="light" (click)="getPhoto()">Upload Photo</button>
                    <img style="width: 300px;" src="{{imgPreview}}">

                    <ion-card style=" background-color: #D8BFD8; margin-top: 15px;">
                        <ion-card-header>
                            <h2 style="font-weight: bold; padding-top: 5px; padding-bottom: 5px;">Our Bank Information</h2>
                        </ion-card-header>

                        <ion-card-content>
                            <p>
                                Kota Damansara Branch<br/>
                                Motion Gymnastics<br/>
                                Hong Leong Bank<br/>
                                11600055588
                            </p>
                            <hr/>
                            <p>
                                Subang Branch<br/>
                                Motion Gymnastics Subang Centre<br/>
                                Hong Leong Bank<br/>
                                31600037111
                            </p>
                        </ion-card-content>
                    </ion-card>

                </ion-list>
                <button ion-button full style="background-color: #4B0082; margin-top: 15px;" (click)="doRenewPlan()" [disabled]="disableButton">Submit</button>
            </ion-card-content>
        </ion-card>
    </div>
</ion-content>