
<!--
<div class="customer-page-info">
	<span class="customer-page-title">Customer Information</span>
	<span class="page-close-btn">x</span>
</div>
-->

<div *ngIf="customerInfo">
	<ng-container *ngTemplateOutlet='custProfile'></ng-container>
	<ng-container *ngTemplateOutlet='custCallHistory'></ng-container>
</div>


<ng-template #custProfile>
	  <div class="cust-profile-cont">
	    <img [src]="custImgUrl" class="cust-profile-image"/> 
		<div class="customer-info">
		  <span class="customer-name">{{customerInfo.PREFIX}} {{customerInfo.SC_NAME}}</span>
		  <span class="customer-qualification">{{customerInfo.QUALIFICATION}}</span>
		  <span class="customer-speciality">{{customerInfo.SPECIALITY_DESCR}}</span>
		</div>
		<div class="customer-class-code" *ngIf="customerInfo.CLASS_CODE">{{customerInfo.CLASS_CODE}}</div>
	  </div>
	  <div class="cust-det-cont">
	  	<span class="cust-det-icon"><img [src]="ASSET_IMG_URL+'/svg/location_b.svg'" class="location-icon"></span>
	  	<span class="cust-det-info">{{customerInfo.ADDR1}}, {{customerInfo.ADDR2}}, {{customerInfo.ADDR3}}</span>
	  </div>
	  <div class="cust-det-cont">
	  	<span class="cust-det-icon"><img [src]="ASSET_IMG_URL+'/svg/phone.svg'" class="mobile-icon"></span>
	  	<span class="cust-det-info">{{customerInfo.MOBILE_NO ? customerInfo.MOBILE_NO : 'Not Available'}}</span>
	  </div>
	  <div class="cust-det-cont">
	  	<span class="cust-det-icon"><img [src]="ASSET_IMG_URL+'/svg/mail.svg'" class="email-icon"></span>
	  	<span class="cust-det-info">{{customerInfo.EMAIL_ADDR ? customerInfo.EMAIL_ADDR : 'Not Available'}}</span>
	  </div>
      <div class="cust-det-cont">
	  	<span class="cust-det-icon"><img [src]="ASSET_IMG_URL+'/svg/agreement.svg'" class="agreement-icon"></span>
	  	<span class="cust-det-info">{{customerInfo.REG_NO ? customerInfo.REG_NO : 'Not Available'}}</span>
	  </div>
</ng-template>

<ng-template #custCallHistory>
	<div class="customer-callhist-cont">
	
		<div class="customer-page-info">
			<span class="customer-page-title">Call Summery</span>
		</div>
		<div *ngIf="customerInfo.CALL_HISTORY " >
			<chart-component [style.width.px]="elementRef.nativeElement.clientWidth - 10" style="display:block; max-height: 400px; height: 400px;" [data]="dashboardData" [dataArrayInput]="'CALL_HISTORY'"></chart-component>
			
		</div>
		<div class="customer-page-info">
			<span class="customer-page-title">Call History</span>
		</div>
		<div *ngIf="customerInfo.CALL_HISTORY && customerInfo.CALL_HISTORY.length == 0" class="no-data-msg">
			No Call History
		</div>
		
		<timeline-entry *ngFor="let callHistory of customerInfo.CALL_HISTORY" [timeLineEntry]="callHistory">			
			<timline-summaryData>
	       		<div class="timelineSumm">
	           		<div class="titleName">
	           			<span class="amPm">{{callHistory.eventDate}}</span>
	           			<span class="amPm">{{callHistory.eventMonth}} {{callHistory.eventYear}}</span>
	           		</div>	
	               <div class="titleValue">
	               		<span class="value">
	               			<span>{{callHistory.CALL_OUTCOME_DESCR ? callHistory.CALL_OUTCOME_DESCR : 'Believer'}}</span>
	               			<span class="cust-event-time">{{callHistory.EVENT_TIME_START}}</span>
	               		</span>
	               		<span class="valueInfo">{{callHistory.REMARKS ? callHistory.REMARKS : 'No remarks'}}</span>
	               </div>
	               <div class="ci-timeline-expand-icon"></div>
	            </div>
			</timline-summaryData>
			
			<timeline-content>
				<div class="call-hist-detail-cont">
					<span class="call-hist-detail-title">Order</span>
					<table style="width:100%" *ngIf="callHistory.ORDER_DETAILS && callHistory.ORDER_DETAILS.length > 0">
					  <tr>
					    <th style="text-align: left;padding-bottom: 8px;">Product</th>
					    <th style="text-align: right;padding-bottom: 8px;">Quantity</th> 
					    <th style="text-align: right;padding-bottom: 8px;">Value</th>
					  </tr>
					  <tr *ngFor="let order of callHistory.ORDER_DETAILS">
					    <td style="text-align: left;padding-bottom: 8px;">{{order.ITEM_DESCR}}</td>
					    <td style="text-align: right;">{{order.QUANTITY}}</td>
					    <td style="text-align: right;">{{order.VALUE}}</td>
					  </tr>
					</table>
					<span *ngIf="callHistory.ORDER_DETAILS && callHistory.ORDER_DETAILS.length == 0" class="no-data-msg">No data to display</span>
				</div>
				<div class="call-hist-detail-cont">
					<span class="call-hist-detail-title">Brand</span>
					<table style="width:100%" *ngIf="callHistory.BRAND_DETAILS && callHistory.BRAND_DETAILS.length > 0">
					  <tr>
					    <th style="text-align: left;padding-bottom: 8px;">Brand</th>
					    <th style="text-align: right;padding-bottom: 8px;">Actual Order</th> 
					  </tr>
					  <tr *ngFor="let brand of callHistory.BRAND_DETAILS">
					    <td style="text-align: left;padding-bottom: 8px;">{{brand.BRAND_DESCR}}</td>
					    <td style="text-align: right;">{{brand.ORDER_COUNT}}</td>
					  </tr>
					</table>
					<span *ngIf="callHistory.BRAND_DETAILS && callHistory.BRAND_DETAILS.length == 0" class="no-data-msg">No data to display</span>
				</div>
				<div class="call-hist-detail-cont">
					<span class="call-hist-detail-title">Display</span>
					<table style="width:100%" *ngIf="callHistory.DISPLAY_DETAILS && callHistory.DISPLAY_DETAILS.length > 0">
					  <tr>
					    <th style="text-align: left;padding-bottom: 8px;">Display Area</th>
					    <th style="text-align: right;padding-bottom: 8px;">Display Image</th> 
					  </tr>
					  <tr *ngFor="let dispDet of callHistory.DISPLAY_DETAILS">
					    <td style="text-align: left;vertical-align: top;">{{dispDet.DISPLAY_AREA}}</td>
					    <td style="text-align: right;">
					    	<img [src]="hostUrl+dispDet.DISPLAY_IMAGE" onerror="this.src = errorImg" class="displayDetailImg">
					    </td>
					  </tr>
					</table>
					<span *ngIf="callHistory.DISPLAY_DETAILS && callHistory.DISPLAY_DETAILS.length == 0" class="no-data-msg">No data to display</span>
				</div>			
			</timeline-content>
		</timeline-entry>
	</div>	
</ng-template>

