<div class="container">
    <div class="row">
        <div class="col-xs-8">
            <h2 class="section-headline"><span>My Account</span></h2>
        </div>
        <div class="col-xs-4">
            <img src="../../../assets/image/logo.png" class="img-responsive right" style="width:400px; z-index: 1;" />
        </div>
        <img class="img-responsive" src="../../../assets/image/wood.png" style="position: absolute;margin-top: 90px;z-index: -2;" />
    </div>
    <hr style="position: absolute; width:85%; height:6px; background-color: #333; z-index: -1; margin-top: -170px " />
    <div *ngIf="!dataFetched" style="margin-top: 50px;">
        <div class="row">
            <div class="col-md-2 col-md-offset-5">
                <md-spinner></md-spinner>
            </div>
        </div>
    </div>
    <div class="row" style="margin-top: 30px;">
        <div class="col-xs-3"></div>
        <div *ngIf="dataFetched">
            <div class="col-xs-9">
                <div class="panel-group">
                    <div class="panel panel-default panel-faq" style="border: none;">
                        <div class="panel-body" style="background-color: #ededed; margin-top: 20px;">
                            <md-tab-group [selectedIndex]="selectedProfileTab">
                                <md-tab label="Edit">
                                    <div style="margin-top:20px;">
                                        <div class="alert alert-danger" *ngIf="incorrectPassword">
                                            <strong>Incorrect Password!</strong> Please enter the correct password for the current user.
                                        </div>
                                        <div class="alert alert-success" *ngIf="updateSuccess">
                                            <strong>Update Success!</strong>
                                        </div>
                                        <form (ngSubmit)="onUpdateUserInfo()">
                                            <input type="hidden" name="id" [(ngModel)]="user.id" />
                                            <div class="bg-info" *ngIf="updateUserInfo">User info updated.</div>
                                            <div class="form-group">
                                                <div class="row">
                                                    <div class="col-xs-6">
                                                        <label for="firstName">First Name</label>
                                                        <input type="text" class="form-control" id="firstName" name="firstName" [(ngModel)]="user.firstName" />
                                                    </div>
                                                    <div class="col-xs-6">
                                                        <label for="lastName">Last Name</label>
                                                        <input type="text" class="form-control" id="lastName" name="lastName" [(ngModel)]="user.lastName" />
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="username">Username *</label>&nbsp;<span *ngIf="usernameExists" style="color:red;">Username already exists. Choose a different one.</span>
                                                <input required="required" type="text" class="form-control" id="username" name="username" [(ngModel)]="user.username" />
                                            </div>
                                            <div class="form-group">
                                                <label for="currentPassword">Current password</label>
                                                <input type="password" class="form-control" id="currentPassword" name="password" [(ngModel)]="currentPassword" />
                                                <p style="color: #828282;"> Enter your current password to change the E-mail address or Password.</p>
                                            </div>
                                            <div class="form-group">
                                                <label for="email">E-mail Address *</label>&nbsp;<span *ngIf="emailExists" style="color:red;">Email already exists. Choose a different one.</span>
                                                <input required="required" type="text" class="form-control" id="email" name="email" [(ngModel)]="user.email" />
                                                <p style="color: #828282;"> A valid e-mail address. All e-mails from the system will be sent to this address. The e-mail address is not made public and will only be used if you wish to receive a new password or wish to receive certain news or notifications by e-mail.</p>
                                            </div>
                                            <div class="form-group">
                                                <label for="txtNewPassword">Password</label>&nbsp;<span id="checkPasswordMatch" style="color:red;"></span>
                                                <input type="password" class="form-control" id="txtNewPassword" name="newPassword" [(ngModel)]="newPassword" />
                                            </div>
                                            <div class="form-group">
                                                <label for="txtConfirmPassword">Confirm Password</label>
                                                <input type="password" class="form-control" id="txtConfirmPassword" />
                                                <p style="color: #828282;"> To change the current user password, enter the new password in both fields.</p>
                                            </div>
                                            <button md-raised-button type="submit" class="mat-primary" id="updateUserInfoButton">Save
                                            </button>
                                        </form>
                                    </div>
                                </md-tab>
                                <md-tab label="Orders">
                                    <div class="panel-group">
                                        <div class="panel panel-default panel-faq" style="border: none;">
                                            <div class="panel-body" style="background-color: #ededed; margin-top: 20px;">
                                                <table class="table table-sm table-inverse">
                                                    <thead>
                                                        <tr>
                                                            <th>Order Date</th>
                                                            <th>Order Number</th>
                                                            <th>Total</th>
                                                            <th>Status</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr *ngFor="let order of orderList">
                                                            <td>
                                                                <a class="pointer" (click)="onDisplayOrder(order)"><span
                                                   >{{order.orderDate}}</span></a>
                                                            </td>
                                                            <td>{{order.id}}</td>
                                                            <td>{{order.orderTotal}}</td>
                                                            <td>{{order.orderStatus}}</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                <div *ngIf="displayOrderDetail">
                                                    <div class="row">
                                                        <div class="col-xs-12">
                                                            <div class="text-center">
                                                                <h2>Order Detail for purchase #<span>{{order.id}}</span></h2>
                                                            </div>
                                                            <hr/>
                                                            <div class="row">
                                                                <div class="col-xs-4">
                                                                    <div class="panel panel-default height">
                                                                        <div class="panel-heading"><strong>Billing Details</strong>
                                                                        </div>
                                                                        <div class="panel-body">
                                                                            <span>{{order.billingAddress.billingAddressName}}</span>
                                                                            <br/>
                                                                            <span>{{order.billingAddress.billingAddressStreet1}} {{order.billingAddress.billingAddressStreet2}}</span>
                                                                            <br/>
                                                                            <span>{{order.billingAddress.billingAddressCity}}</span>
                                                                            <br/>
                                                                            <span>{{order.billingAddress.billingAddressState}}</span>
                                                                            <br/>
                                                                            <span>{{order.billingAddress.billingAddressZipcode}}</span>
                                                                            <br/>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-xs-4">
                                                                    <div class="panel panel-default height">
                                                                        <div class="panel-heading"><strong>Payment Information</strong>
                                                                        </div>
                                                                        <div class="panel-body">
                                                                            <span>{{order.payment.holderName}}</span>
                                                                            <br/> Visa
                                                                            <br/>
                                                                            <span>{{order.payment.cardNumber}}</span>
                                                                            <br/>
                                                                            <span>Exp Date:</span> <span>{{order.payment.expiryMonth}}</span>/<span>{{order.payment.expiryYear}}</span>
                                                                            <br/>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-xs-4">
                                                                    <div class="panel panel-default height">
                                                                        <div class="panel-heading"><strong>Shipping Address</strong>
                                                                        </div>
                                                                        <div class="panel-body">
                                                                            <span>{{order.shippingAddress.shippingAddressName}}</span>
                                                                            <br/>
                                                                            <span>{{order.shippingAddress.shippingAddressStreet1}}' '{{order.shippingAddress.shippingAddressStreet2}}</span>
                                                                            <br/>
                                                                            <span>{{order.shippingAddress.shippingAddressCity}}</span>
                                                                            <br/>
                                                                            <span>{{order.shippingAddress.shippingAddressState}}</span>
                                                                            <br/>
                                                                            <span>{{order.shippingAddress.shippingAddressZipcode}}</span>
                                                                            <br/>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <div class="panel panel-default">
                                                                <div class="panel-heading">
                                                                    <h3 class="text-center"><strong>Order summary</strong></h3>
                                                                </div>
                                                                <div class="panel-body">
                                                                    <div class="table-responsive">
                                                                        <table class="table table-condensed">
                                                                            <thead>
                                                                                <tr>
                                                                                    <td><strong>Item Name</strong></td>
                                                                                    <td class="text-center"><strong>Item Price</strong></td>
                                                                                    <td class="text-center"><strong>Item Quantity</strong>
                                                                                    </td>
                                                                                    <td class="text-right"><strong>Total</strong></td>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody>
                                                                                <tr *ngFor="let cartItem of cartItemList">
                                                                                    <td>{{cartItem.book.title}}
                                                                                    </td>
                                                                                    <td class="text-center">{{cartItem.book.ourPrice}}
                                                                                    </td>
                                                                                    <td class="text-center">
                                                                                        {{cartItem.qty}}
                                                                                    </td>
                                                                                    <td class="text-right">{{cartItem.subtotal}}
                                                                                    </td>
                                                                                </tr>
                                                                                <tr>
                                                                                    <td class="highrow"></td>
                                                                                    <td class="highrow"></td>
                                                                                    <td class="highrow text-center">
                                                                                        <strong>Subtotal</strong></td>
                                                                                    <td class="highrow text-right">{{order.orderTotal}}
                                                                                    </td>
                                                                                </tr>
                                                                                <tr>
                                                                                    <td class="emptyrow"></td>
                                                                                    <td class="emptyrow"></td>
                                                                                    <td class="emptyrow text-center"><strong>Tax</strong>
                                                                                    </td>
                                                                                    <td class="emptyrow text-right">{{order.orderTotal*0.06}}
                                                                                    </td>
                                                                                </tr>
                                                                                <tr>
                                                                                    <td class="emptyrow"><i class="fa fa-barcode iconbig"></i></td>
                                                                                    <td class="emptyrow"></td>
                                                                                    <td class="emptyrow text-center"><strong>Total</strong>
                                                                                    </td>
                                                                                    <td class="emptyrow text-right">{{order.orderTotal*1.06}}
                                                                                    </td>
                                                                                </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </md-tab>
                                <md-tab label="Billing">
                                    <br>
                                    <br>
                                    <div>
                                        <p *ngIf="defaultPaymentSet">Default payment set successfully!</p>
                                        <md-tab-group (selectedIndexChange)="selectedBillingChange($event)" [selectedIndex]="selectedBillingTab">
                                            <md-tab label="List of Credit Cards">
                                                <form (ngSubmit)="setDefaultPayment()" method="post">
                                                    <table class="table">
                                                        <thead>
                                                            <tr>
                                                                <th>Default</th>
                                                                <th>Credit Card</th>
                                                                <th>Operations</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr *ngFor="let userPayment of userPaymentList">
                                                                <td>
                                                                    <input type="radio" name="defaultUserPaymentId" [(ngModel)]="defaultUserPaymentId" [value]="userPayment.id" />
                                                                    <span>default</span>
                                                                </td>
                                                                <td>{{userPayment.cardName}}</td>
                                                                <td>
                                                                    <a md-button (click)="onUpdatePayment(userPayment)"><i
                                                            class="fa fa-pencil"></i></a>
                                                                    <a md-button (click)="onRemovePayment(userPayment.id)"><i
                                                            class="fa fa-times"></i></a>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                    <button md-raised-button class="mat-primary" type="submit">Save</button>
                                                </form>
                                            </md-tab>
                                            <md-tab label="Add(Update) Credit Card">
                                                <form (ngSubmit)="onNewPayment()" method="post">
                                                    <div class="bg-info" *ngIf="updateUserPaymentInfo">User info updated.</div>
                                                    <input hidden="hidden" name="id" [(ngModel)]="userPayment.id" />
                                                    <div class="form-group">
                                                        <h5>* Give a name for your card: </h5>
                                                        <input type="text" class="form-control" id="cardName" placeholder="Card Name" name="cardName" required="required" [(ngModel)]="userPayment.cardName" />
                                                    </div>
                                                    <!--Billing Address-->
                                                    <hr/>
                                                    <div class="form-group">
                                                        <h4>Billing Address</h4>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="billingName">* Name</label>
                                                        <input type="text" class="form-control" id="billingName" placeholder="Recevier Name" name="userBillingName" required="required" [(ngModel)]="userBilling.userBillingName" />
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="billingAddress">* Street Address</label>
                                                        <input type="text" class="form-control" id="billingAddress" required="required" placeholder="Street Address 1" name="userBillingStreet1" [(ngModel)]="userBilling.userBillingStreet1" />
                                                    </div>
                                                    <div class="form-group">
                                                        <input type="text" class="form-control" placeholder="Street Address 2" name="userBillingStreet2" [(ngModel)]="userBilling.userBillingStreet2" />
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xs-4">
                                                            <div class="form-group">
                                                                <label for="billingCity">* City</label>
                                                                <input type="text" class="form-control" id="billingCity" required="required" placeholder="Your billing city" name="userBillingCity" [(ngModel)]="userBilling.userBillingCity" />
                                                            </div>
                                                        </div>
                                                        <div class="col-xs-4">
                                                            <div class="form-group">
                                                                <label for="billingState">* State</label>
                                                                <select id="billingState" class="form-control" name="userBillingState" [(ngModel)]="userBilling.userBillingState" required="required">
                                                                    <option value="" disabled>-- state --</option>
                                                                    <option *ngFor="let state of stateList">{{state}}
                                                                    </option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-xs-4">
                                                            <div class="form-group">
                                                                <label for="billingZipcode">* Zipcode</label>
                                                                <input type="text" class="form-control" id="billingZipcode" required="required" placeholder="Zipcode" name="userBillingZipcode" [(ngModel)]="userBilling.userBillingZipcode" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--User Payment-->
                                                    <hr/>
                                                    <div class="form-group">
                                                        <h4>Credit Card Information</h4>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xs-12">
                                                            <img src="../../../assets/image/creditcard.png" class="img-responsive" />
                                                            <br/>
                                                            <div class="form-group">
                                                                <label for="cardType">* Select Card Type:</label>
                                                                <select class="form-control" id="cardType" name="type" [(ngModel)]="userPayment.type">
                                                                    <option value="" disabled="disabled">
                                                                        -- Card Type --
                                                                    </option>
                                                                    <option value="visa">Visa</option>
                                                                    <option value="mastercard">Mastercard</option>
                                                                    <option value="discover">Discover</option>
                                                                    <option value="amex">American Express</option>
                                                                </select>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="cardHolder">* Card Holder</label>
                                                                <input type="text" class="form-control" id="cardHolder" required="required" placeholder="Card Holder Name" name="holderName" [(ngModel)]="userPayment.holderName" />
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="cardNumber">* Card Number</label>
                                                                <div class="input-group">
                                                                    <input required="required" id="cardNumber" type="tel" class="form-control" name="cardNumber" placeholder="Valid Card Number" name="cardNumber" [(ngModel)]="userPayment.cardNumber" />
                                                                    <span class="input-group-addon"><i class="fa fa-credit-card"
                                                                                           aria-hidden="true"></i></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xs-7 col-md-7">
                                                            <div class="form-group">
                                                                <label>* Expiration Date</label>
                                                                <div class="row">
                                                                    <div class="col-xs-6">
                                                                        <select class="form-control" name="expiryMonth" required="required" [(ngModel)]="userPayment.expiryMonth">
                                                                            <option value="" disabled="disabled">
                                                                                --Month--
                                                                            </option>
                                                                            <option value="1">Jan (01)</option>
                                                                            <option value="2">Feb (02)</option>
                                                                            <option value="3">Mar (03)</option>
                                                                            <option value="4">Apr (04)</option>
                                                                            <option value="5">May (05)</option>
                                                                            <option value="6">June (06)</option>
                                                                            <option value="7">July (07)</option>
                                                                            <option value="8">Aug (08)</option>
                                                                            <option value="9">Sep (09)</option>
                                                                            <option value="10">Oct (10)</option>
                                                                            <option value="11">Nov (11)</option>
                                                                            <option value="12">Dec (12)</option>
                                                                        </select>
                                                                    </div>
                                                                    <div class="col-xs-6">
                                                                        <select class="form-control" name="expiryYear" [(ngModel)]="userPayment.expiryYear">
                                                                            <option value="" disabled="disabled">--Year--
                                                                            </option>
                                                                            <option value="17">2017</option>
                                                                            <option value="18">2018</option>
                                                                            <option value="19">2019</option>
                                                                            <option value="20">2020</option>
                                                                            <option value="21">2021</option>
                                                                            <option value="22">2022</option>
                                                                            <option value="23">2023</option>
                                                                            <option value="23">2024</option>
                                                                            <option value="23">2025</option>
                                                                            <option value="23">2026</option>
                                                                            <option value="23">2027</option>
                                                                            <option value="23">2028</option>
                                                                            <option value="23">2029</option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-xs-5 col-md-5 pull-right">
                                                            <div class="form-group">
                                                                <label for="cardCVC">CV Code</label>
                                                                <input id="cardCVC" type="tel" class="form-control" name="cardCVC" placeholder="CVC" name="cvc" [(ngModel)]="userPayment.cvc" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <hr/>
                                                    <button md-raised-button type="submit" class="mat-primary">Save All</button>
                                                </form>
                                            </md-tab>
                                        </md-tab-group>
                                    </div>
                                </md-tab>
                                <md-tab label="Shipping">
                                    <br>
                                    <br>
                                    <div>
                                        <p *ngIf="defaultShippingSet">Default shipping address set successfully!</p>
                                        <md-tab-group (selectedIndexChange)="selectedShippingChange($event)" [selectedIndex]="selectedShippingTab">
                                            <md-tab label="List of Shipping Addresses">
                                                <form (ngSubmit)="setDefaultShipping()" method="post">
                                                    <table class="table">
                                                        <thead>
                                                            <tr>
                                                                <th>Default</th>
                                                                <th>Shipping Address</th>
                                                                <th>Operations</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr *ngFor="let userShipping of userShippingList">
                                                                <td>
                                                                    <input type="radio" name="defaultUserShippingId" [(ngModel)]="defaultUserShippingId" [value]="userShipping.id" />
                                                                    <span>default</span>
                                                                </td>
                                                                <td>{{userShipping.userShippingStreet1}}, {{userShipping.userShippingCity}}, {{userShipping.userShippingState}}</td>
                                                                <td>
                                                                    <a md-button (click)="onUpdateShipping(userShipping)"><i
                                                            class="fa fa-pencil"></i></a>
                                                                    <a md-button (click)="onRemoveShipping(userShipping.id)"><i
                                                            class="fa fa-times"></i></a>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                    <button md-raised-button class="mat-primary" type="submit">Save</button>
                                                </form>
                                            </md-tab>
                                            <md-tab label="Add(Update) Shipping Address">
                                                <form (ngSubmit)="onNewShipping()" method="post">
                                                    <input hidden="hidden" name="id" [(ngModel)]="userShipping.id" />
                                                    <!--Shipping Address-->
                                                    <div class="form-group">
                                                        <h4>Shipping Address</h4>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="shippingName">* Name</label>
                                                        <input type="text" class="form-control" id="shippingName" required="required" placeholder="Recevier Name" name="userShippingName" [(ngModel)]="userShipping.userShippingName" />
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="shippingAddress">* Street Address</label>
                                                        <input type="text" class="form-control" id="shippingAddress" required="required" placeholder="Street Address 1" name="userShippingStreet1" [(ngModel)]="userShipping.userShippingStreet1" />
                                                    </div>
                                                    <div class="form-group">
                                                        <input type="text" class="form-control" placeholder="Street Address 2" name="userShippingStreet2" [(ngModel)]="userShipping.userShippingStreet2" />
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xs-4">
                                                            <div class="form-group">
                                                                <label for="shippingCity">* City</label>
                                                                <input type="text" class="form-control" id="shippingCity" required="required" placeholder="Your Shipping City" name="userShippingCity" [(ngModel)]="userShipping.userShippingCity" />
                                                            </div>
                                                        </div>
                                                        <div class="col-xs-4">
                                                            <div class="form-group">
                                                                <label for="shippingState">* State</label>
                                                                <select id="shippingState" class="form-control" name="userShippingState" [(ngModel)]="userShipping.userShippingState" required="required">
                                                                    <option value="" disabled>-- state --</option>
                                                                    <option *ngFor="let state of stateList">{{state}}
                                                                    </option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-xs-4">
                                                            <div class="form-group">
                                                                <label for="shippingZipcode">* Zipcode</label>
                                                                <input type="text" class="form-control" id="shippingZipcode" required="required" placeholder="Zipcode" name="userShippingZipcode" [(ngModel)]="userShipping.userShippingZipcode" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <hr/>
                                                    <button md-raised-button type="submit" class="mat-primary">Save All</button>
                                                </form>
                                            </md-tab>
                                        </md-tab-group>
                                    </div>
                                </md-tab>
                            </md-tab-group>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
