
<ecm-header [isFixedHeader]=true> </ecm-header>
<div class="row checkout-page">

	<div class="medium-8 columns">
	
	<md-vertical-stepper #stepper [linear]="true">
	  <md-step [stepControl]="loginFormGroup">
	      <ng-template mdStepLabel class="panel-selected">
			Login  <span *ngIf="userData"> 
			            <span *ngIf="userData.EMAIL_ID" class = "email-data">{{userData?.EMAIL_ID}}</span>
				        <span *ngIf="userData.HOD_EMAIL" class = "email-data">{{userData?.HOD_EMAIL}}</span>
				    </span>
	      </ng-template>
		  <ng-container *ngTemplateOutlet="loginPage"></ng-container>
		  
	      <!--  <button style="float: right;margin: 10px;" md-button mdStepperNext>Next</button>-->
	      <form [formGroup]="loginFormGroup"> 
	      	<input required type="hidden" formControlName="userData" [(ngModel)]="userData">
	      </form>
	  </md-step>
	  
	  <ng-container *ngTemplateOutlet = "ecmType == 1 ? ecmBillAdress : salesBillAdress"></ng-container>
		
      <ng-template #salesBillAdress >
		  <md-step  [stepControl]="customerInformationFormGroup">
			  <ng-template mdStepLabel class="panel-selected">
					      	Customer Selection
			  </ng-template>
			 
			 
	 <form [formGroup]="customerInformationFormGroup"> 	
	
		    <div class = "sales-form">
		         <span class = "auto-select">
			      <bb-autosuggest  (onClear)= "onClear('soldTo');"   (onSelectionChange)="onSelect($event, 'soldTo');"  name = "soldTo" [(ngModel)]="customerInformation.soldTo.custName" formControlName = "soldTo"   [uxDesign] = "'UX2'" [dataSource]= 'dataSource' [chipEnable] = "false"  [placeholder] = "'Sold to '"  ></bb-autosuggest> 
					<div *ngIf="customerInformation.soldTo" class="user-alladress-info" >
						<div class="name"> 
							<span class="name-span">{{customerInformation.soldTo?.custName}}</span>
						</div>
						<div>
						  <span class="address-span">{{customerInformation.soldTo.address?.addr1}} {{ getSeparator(customerInformation.soldTo.address?.addr1) }} {{customerInformation.soldTo.address?.addr2}} {{ getSeparator(customerInformation.soldTo.address?.addr2) }} {{customerInformation.soldTo.address?.addr3}} {{ getSeparator(customerInformation.soldTo.address?.addr3) }} {{customerInformation.soldTo.address?.city}} {{ getSeparator(customerInformation.soldTo.address?.city) }} </span>
						  <span class="address-span">{{customerInformation.soldTo.address?.stateDescr}} - {{customerInformation.soldTo.address?.pinCode}} - {{customerInformation.soldTo.address?.countDescr}}. </span>
						</div>
					</div>
			     </span>
				  <br>
		         <bb-autosuggest   (onClear)= "onClear('billTo');"   (onSelectionChange)="onSelect($event,'billTo');"  name = "billTo"  [(ngModel)]="customerInformation.billTo.custName" formControlName = "billTo"  [uxDesign] = "'UX2'" [dataSource]= 'dataSource' [chipEnable] = "false"  [placeholder] = "' Bill to  '"></bb-autosuggest>
		         <div *ngIf="customerInformation.billTo" class="user-alladress-info" >
						<div class="name"> 
							<span class="name-span">{{customerInformation.billTo?.custName}}</span>
						</div>
						<div>
						  <span class="address-span">{{customerInformation.billTo.address?.addr1}} {{ getSeparator(customerInformation.billTo.address?.addr1) }} {{customerInformation.billTo.address?.addr2}} {{ getSeparator(customerInformation.billTo.address?.addr2) }} {{customerInformation.billTo.address?.addr3}} {{ getSeparator(customerInformation.billTo.address?.addr3) }} {{customerInformation.billTo.address?.city}} {{ getSeparator(customerInformation.billTo.address?.city) }} </span>
						  <span class="address-span">{{customerInformation.billTo.address?.stateDescr}} - {{customerInformation.billTo.address?.pinCode}} - {{customerInformation.billTo.address?.countDescr}}. </span>
						</div>
				 </div>
			  	<br>
		         <bb-autosuggest   (onClear)= "onClear('deliverTo');" (onSelectionChange)="onSelect($event,'deliverTo');"  name = "deliverTo" [(ngModel)]="customerInformation.deliverTo.custName" formControlName = "deliverTo"  [uxDesign] = "'UX2'" [dataSource]= 'dataSource' [chipEnable] = "false"  [placeholder] = "'Deliver to'"></bb-autosuggest>
		          <div *ngIf="customerInformation.deliverTo" class="user-alladress-info" >
						<div class="name"> 
							<span class="name-span">{{customerInformation.deliverTo?.custName}}</span>
						</div>
						<div>
						  <span class="address-span">{{customerInformation.deliverTo.address?.addr1}} {{ getSeparator(customerInformation.deliverTo.address?.addr1) }} {{customerInformation.deliverTo.address?.addr2}} {{ getSeparator(customerInformation.deliverTo.address?.addr2) }} {{customerInformation.deliverTo.address?.addr3}} {{ getSeparator(customerInformation.deliverTo.address?.addr3) }} {{customerInformation.deliverTo.address?.city}} {{ getSeparator(customerInformation.deliverTo.address?.city) }} </span>
						  <span class="address-span">{{customerInformation.deliverTo.address?.stateDescr}} - {{customerInformation.deliverTo.address?.pinCode}} - {{customerInformation.deliverTo.address?.countDescr}}. </span>
						</div>
				 </div> 
				 <br>
		         <bb-textbox [required]="true" [uxDesign]="'UX3'" [required]="true"  [(ngModel)]="customerInformation.orderNo" formControlName = "orderNo" [placeholder]="'Purchase order No '" ></bb-textbox><br>
		                
		         <md-form-field>
					  <input mdInput [mdDatepicker]="orderDate" [(ngModel)]="customerInformation.orderDate" formControlName = "orderDate"  placeholder="Purchase order date" (click)="orderDate.open();">
	 				  <md-datepicker #orderDate></md-datepicker>
			     </md-form-field><br>
				
				  <md-form-field>
					  <input mdInput [mdDatepicker]="shipDate" [(ngModel)]="customerInformation.shipDate"  formControlName = "shipDate" placeholder="Ship Date" (click)="shipDate.open();" >
	 				  <md-datepicker #shipDate></md-datepicker>
				 </md-form-field>
					
		         <md-form-field class ="date-picker">
					  <input mdInput [mdDatepicker]="dueDate" [(ngModel)]="customerInformation.dueDate" formControlName = "dueDate" placeholder="Due  Date " (click)="dueDate.open();">
	 				  <md-datepicker #dueDate></md-datepicker>
				 </md-form-field>
		   </div>
	</form>   
		   <div  class="edit-detail-template">
			  		<button md-button mdStepperNext class="save-button" [disabled]="customerInformationFormGroup.invalid"  (click)="submitForm()" >
						Save
					</button>
					<button md-button>
						Cancel
					</button>
			  	</div>
       </md-step>
	  </ng-template>

     <ng-template #ecmBillAdress >
		  <md-step [stepControl]="addressFormGroup">
		       <ng-template mdStepLabel class="panel-selected">
		      	Delivery/Billing Address
		       </ng-template>
				<md-radio-group [required]="true" class="example-radio-group" [(ngModel)]="selectedAddressOpt">
				<span *ngFor = "let address of addressList">
				<md-radio-button class="user-address" [value]="address">	
					<address-screen [address]="address" class="address-screen"></address-screen>
				</md-radio-button>
				<div *ngIf="address == selectedAddressOpt">
					<form [formGroup]="addressFormGroup"> 	
			  			<input type="hidden" formControlName="address" [(ngModel)]="selectedAddress">
			  		</form>		
		  			<button md-button class="save-button" type="button" mdStepperNext (click)="selectAddress(address)">
						Deliver Here
					</button>
				</div>
				</span>
				<md-radio-button class="user-address" [value]="'newaddress'">
					<span class="address-screen">New Address</span>
				</md-radio-button>
			  	<div *ngIf="selectedAddressOpt == 'newaddress'" class="edit-detail-template">
			  	<address-screen #addrAddScreen [editMode]="'E'" [address]="newAddress" class="address-screen"></address-screen>
			  		<button md-button mdStepperNext class="save-button" *ngIf="editForm" [disabled]="!editForm.valid || !editForm.dirty" (click)="saveAddress();">
						Save and Deliver Here
					</button>
					<button md-button (click)="selectedAddress = addressList[0]">
						Cancel
					</button>
			  	</div>
				</md-radio-group>
		  </md-step>
	  </ng-template>
	  
	  <md-step [stepControl]="reviewOrdersFormGroup">
	      <ng-template mdStepLabel>Review Order({{cartItems.length}} Items)</ng-template>
		  <ng-container *ngTemplateOutlet="reviewOrder"></ng-container>
	      <div>
	        <form [formGroup]="reviewOrdersFormGroup"> 
		        <input type="hidden" formControlName="orderReviewed" [(ngModel)]="orderReviewed">
			</form>
	        <button class="save-button" style="float: right;margin: 10px;" md-button mdStepperNext (click)="confirmOrder();">Continue</button>
	      </div>
	  </md-step>
	  
	  <md-step [stepControl]="cardFormGroup">
	      <ng-template mdStepLabel>Payment Method</ng-template>
		  <ng-container *ngTemplateOutlet="paymentOptions"></ng-container>
	  </md-step>
	</md-vertical-stepper>
	 
	</div>
		
	<div *ngIf="cartItems.length > 0" class="medium-4 columns">
		<md-card>
			<div class="order-summary-header">Order Summary({{cartItems.length}} Items)</div>
			<div class="orderSummary">
					<div *ngFor="let item of cartItems" class="order-item-container">
						<span class="order-item-descr">{{item.itemHeader.itemDescr}}</span>
						<span class="order-item-qty">Quantity: {{item.itemQuantity}}</span>
						<span class="order-item-rate">Rs. {{item.itemHeader.itemDiscountedRate}}</span>
					</div>
			 </div>
			<span *ngIf="unAuthorized">
			 	<md-error >Please login first</md-error> 
			</span>
		</md-card>
		
		<md-card>
			<div class="order-total-container">
				<div class="total-amt-container"><span class="order-total-title">Total</span>  <span class="order-total-price">Rs. {{totalPrice}}</span></div>
				<div class="shipping-detl-container"><span class="order-shipping-title">Shipping/Booking</span> <span class="order-shipping-price">Free</span></div>
				<div class="amt-payble-container"><span class="order-amount-title">Amount Payable</span> <span class="order-amnt-pyble">Rs. {{totalPrice}}</span></div>
			</div>
		</md-card>
		
		<div class="ecm-secure-payment">
			<i class="material-icons secure-icon">&#xE8E8;</i> 
			<span class="secure-payment-info">Safe and Secure Payments. 100% Authentic products</span>
		</div>
	</div>	

</div>

<ng-template #loginPage >
 
  <button  *ngIf = "!userData" md-button class="login-button" (click)="userAction();">
		Login to continue
  </button>
</ng-template>

<ng-template #reviewOrder>
	<div *ngFor="let item of cartItems" class="ecm-item-container row">
		<div class="large-2 columns ecm-item-img">
			<bb-image [refId]='item.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage]="true" [isThumbnail]="true"></bb-image>
		</div>
		<div class="large-6 columns ecm-item-info">
			<span style="display: block;font-size: 16px;"> {{item.itemHeader.itemDescr}} </span>
			<div *ngIf="item.itemCategory.catCode == 'CAT0000004'" class="delivery-offers">
				<span>FREE Delivery in 5 to 6 days</span>
		    	  <button type="button" class="md-button link_button">
			    	   More Offers
			     	   <i class="material-icons arrow ">&#xE313;</i>
		     	  </button>
			 </div>
		</div>

		<counter [quantity]="item.itemQuantity" (decrement)="decrement(item);" (increment)="increment(item);">
			<price>
				<div *ngIf="item.itemCategory.catCode == 'CAT0000004'" class="product-price">
					<span style="display: block;" class="total-cost">Rs {{item.itemHeader.itemDiscountedRate}}</span>
					<span class="discounted-price"><s>Rs {{item.itemHeader.itemCostRate}}</s> <span class="discount-rate">{{item.itemHeader.itemDiscount}}% Off</span></span>
				</div>
				    <span *ngIf="item == 'occassion'" class="individual-price">Rs 500 per person (Inclusive GST)</span>
			</price>
		</counter>
	</div>
</ng-template>

<ng-template #paymentOptions>
	<md-radio-group [(ngModel)]="selectedPaymntOpt">
		  <span  *ngFor = "let card of cardList" >
			  <md-radio-button class="payment-option" [value]="card.lineNo">
			    <card-screen [card] = "card" class="payment-option-title"></card-screen>
			  </md-radio-button>
			  <div *ngIf="selectedPaymntOpt == card.lineNo" class="cvv-form-container">
	   		   	<form [formGroup]="cardFormGroup">
	    		   	<div class="cvv-field">
		    		   	<md-form-field [floatPlaceholder]="'never'">
							<input mdInput required formControlName="cvv" [(ngModel)]="card.cvv" id="cvv" name="cvv" class="cvv-input" [placeholder]="'CVV'" type="text">
						</md-form-field>
					</div>
					<button md-button class="payment-button" [disabled]="cardFormGroup.invalid" (click)="executePayment();">
						Pay Rs. {{totalPrice}}
					</button>
				</form>
		      </div>
		  </span>
		  
		  <md-radio-button class="payment-option" [value]="'newcard'" >
		    <span class="payment-option-title">Credit / Debit / ATM card</span>
		  </md-radio-button>
		  <div *ngIf="selectedPaymntOpt == 'newcard'" class="edit-detail-template">
		  	<ng-container *ngTemplateOutlet="newcard"></ng-container>
		  </div>
		  
		  <md-radio-button class="payment-option" [value]="'netbanking'" >
		    <span class="payment-option-title">Net Banking</span>
		  </md-radio-button>
		  <div *ngIf="selectedPaymntOpt == 'netbanking'" class="netBankingContainer">
			  <ng-container *ngTemplateOutlet="netBanking"></ng-container>
		  </div>
		  
		  <md-radio-button class="payment-option" [value]="'cod'" >
		    <span class="payment-option-title">Cash On Delivery</span>
		  </md-radio-button>
		  <div *ngIf="selectedPaymntOpt == 'cod'" class="cod-order">
<!-- 		  	//TODO Check whether all items all applicable for COD -->
		  	
		  	<button md-button class="payment-button"> Confirm Order </button>
		  </div>
		  
		  <md-radio-button class="payment-option" [value]="'wallet'" >
		    <span class="payment-option-title">Wallet</span>
		  </md-radio-button>		  
	</md-radio-group>
</ng-template>

<ng-template #newcard>
	<card-screen #cardScreen [editMode]="'E'" [isPaymentsPage]="true" [card]="newCard" class="payment-option-title"></card-screen>
	<button md-button class="payment-button" *ngIf="childForm" [disabled]="!childForm.valid" (click)="executePayment();">
		Pay Rs. {{totalPrice}}
	</button>
	<span class="ecm-pay-terms">By clicking make payment you agree with Terms & Conditions</span>
</ng-template>

<ng-template #netBanking>
	<div class="popular-bank-title">Popular Banks</div>
	<md-radio-group>
		<md-radio-button class="popular-bank" [value]="'hdfc'">
			HDFC Bank
		</md-radio-button>
		
		<md-radio-button class="popular-bank" [value]="'icc'">
			ICICI Bank
		</md-radio-button>
		
		<md-radio-button class="popular-bank" [value]="'sbi'">
			State Bank of India
		</md-radio-button>
		
		<md-radio-button class="popular-bank" [value]="'axis'">
			Axis Bank
		</md-radio-button>

		<md-radio-button class="popular-bank" [value]="'kotak'">
			Kotak Bank
		</md-radio-button>
	</md-radio-group>
	
	<button md-button class="payment-button" (click)="executePayment();">
		Pay Rs. {{totalPrice}}
	</button>

</ng-template>
<ecm-panel #ecmPanel>

</ecm-panel>
