
<ng-container *ngTemplateOutlet="!card ? noCard : cardLayoutTempl"></ng-container>

<ng-template #noCard>
    <div></div>
</ng-template>

<ng-template #cardLayoutTempl>
	<ng-container [ngSwitch]="template">
		<ng-container *ngSwitchCase="'PROFILE_CARD'">
			<ng-container *ngTemplateOutlet="PROFILE_CARD"></ng-container>
		</ng-container>
		<ng-container *ngSwitchCase="'PROFILE_CARD_2'">
			<ng-container *ngTemplateOutlet="PROFILE_CARD_2"></ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'PROFILE_CARD_3'">
			<ng-container *ngTemplateOutlet="PROFILE_CARD_3"></ng-container>
		</ng-container>
		<ng-container *ngSwitchCase="'CUSTOM_CHART'">
			<ng-container *ngTemplateOutlet="CUSTOM_CHART"></ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'CUSTOM_CHART_2'">
			<ng-container *ngTemplateOutlet="CUSTOM_CHART_2"></ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'CUSTOM_CHART_3'">
			<ng-container *ngTemplateOutlet="CUSTOM_CHART_3"></ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'CUSTOM_CHART_4'">
			<ng-container *ngTemplateOutlet="CUSTOM_CHART_4"></ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'BANNER_CARD'">
            <ng-container *ngTemplateOutlet="BANNER_CARD"></ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'BANNER_CARD_2'">
            <ng-container *ngTemplateOutlet="BANNER_CARD_2"></ng-container>
        </ng-container>    
        <!--Added By Poonam B[06-04-2021].Start--> 
        <ng-container *ngSwitchCase="'BANNER_CARD_3'">
            <ng-container *ngTemplateOutlet="BANNER_CARD_3"></ng-container>
        </ng-container>
        <!--Added By Poonam B[06-04-2021].End--> 
       	<ng-container *ngSwitchCase="'SIMPLE_CARD'">
			<ng-container *ngTemplateOutlet="SIMPLE_CARD"></ng-container>
        </ng-container>
        	<ng-container *ngSwitchCase="'SIMPLE_CARD_1'">
			<ng-container *ngTemplateOutlet="SIMPLE_CARD_1"></ng-container>
        </ng-container>
        
        <!--Added By Pravin K on 05-AUG-21 [for OTC current day dashboard ] START--> 
        <ng-container *ngSwitchCase="'SIMPLE_CARD_2'">
			<ng-container *ngTemplateOutlet="SIMPLE_CARD_2"></ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'SIMPLE_CARD_3'">
			<ng-container *ngTemplateOutlet="SIMPLE_CARD_3"></ng-container>
        </ng-container>
         <ng-container *ngSwitchCase="'SIMPLE_CARD_5'">
		    <ng-container *ngTemplateOutlet="SIMPLE_CARD_5"></ng-container>
        </ng-container>
         <ng-container *ngSwitchCase="'SIMPLE_CARD_4'">
		    <ng-container *ngTemplateOutlet="SIMPLE_CARD_4"></ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'SIMPLE_CARD_RANKING'">
		    <ng-container *ngTemplateOutlet="SIMPLE_CARD_RANKING"></ng-container>
        </ng-container>
        <!--Added By Pravin K on 05-AUG-21 [for OTC current day dashboard ] END--> 
		
		<ng-container *ngSwitchDefault >
			<ng-container *ngTemplateOutlet="default"></ng-container>
		</ng-container>
	</ng-container>
</ng-template>

<ng-template #default>
    <div [ngClass]="bgColorCSS == true ? 'multiple-chart-box-custom' : 'multiple-chart-box'">
        <div class="multiple-chart-header"  style="display: flex;">
            <div [ngClass]="bgColorCSS == true ? 'multiple-chart-icon-custom' : 'multiple-chart-icon'">
                <!--[ngClass]="chartConfig['title_column'] == 'Total Planned vs Actual' ? 'multiple-chart-icon-custom' : 'multiple-chart-icon'">-->
                <img [src]="'dashboard/assets/images/svg/'+ chartConfig['image']" />
            </div>
            <div [ngClass]="bgColorCSS == true ? 'multiple-chart-title-custom' : 'multiple-chart-title'">{{chartConfig['title_column']}}</div>
        </div>
        <div (click)="emitSelection()" style="display: flex; width: 100%;" class = "multiple-chart" >
            <div class = "series-custom-card"  *ngFor = "let chart of multipleChartsDataArr">
                <div  style="display: flex;justify-content: center;">  
                    <bb-custom-chart 
                        [chartType]= "chart['chartType']"
                        [datasets]="chart['datasets']"
                        [labels]="chart['labels']"
                        [options]="chart['options']"
                        [parentData]="chart"
                        [legend]="chart['options']['legend']">
                    </bb-custom-chart>
                </div>
        
                <div class = "series-custom-card-info">
                    <div *ngIf="chart['chart_info_column']">
                        <div class = "chart-info">
                            <div class="bullet1" style="background: rgb(142, 111, 179) !important;"></div>
                            <div [ngClass]="bgColorCSS == true ? 'chatdata-custom' : 'chatdata'">
                                {{visitInfoColumn}} Visits
                            </div>
                        </div>
                        <div class = "chart-info">
                            <div [ngClass]="chart['bgColorClass']"></div>
                            <div [ngClass]="bgColorCSS == true ? 'chatdata-custom' : 'chatdata'">
                                {{drCountColumn}} Doctors
                            </div>
                        </div>
                    </div>
                    <div *ngIf= "! chart['chart_info_column']" style="display: none;font-family: Arial, Helvetica, sans-serif !IMPORTANT;" >
                        <div *ngFor = "let legend of legendArray" style="display: flex;"> 
                            <div class = "chart-info">
                                <!--
                                <div class = "bullet2">
                                    <img style="width:10px !important;height:10px !important;" [src]="'dashboard/assets/images/svg/'+ legend['image']" />
                                </div>
                                -->
                                <!--
                                <div [ngClass]="bgColorCSS == true ? 'bardata-custom' : 'bardata'">
                                    <div [ngClass]="bgColorCSS == true ? 'barVal-custom' : 'barVal'">
                                        {{legend['legendVal']}} 
                                     </div>
                                    {{legend['legend']}}
                                </div>
                                 -->
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</ng-template>

<ng-template #CUSTOM_CHART>
    <div *ngIf="card" (click)="emitSelection()" class="custom-card-chart resp-card col" 
    [ngClass]="{ 'custom-card-selected' : card['selected'] }">
        <div class="custom-card-image sm" [ngClass]="getThemeClass()">
            <img [src]="'dashboard/assets/images/svg/'+ card['image']" />
        </div>
        <div class="custom-card-details">
            <div class="custom-card-detail chart">
                <bb-custom-chart [chartType]= "card['chartType']"
                    [data]="[card[card['info_column']]]"
                    [labels]="card['labels']"
                    [options]="card['options']"
                    [parentData]='card'>
                </bb-custom-chart>
            </div>
            <div class="custom-card-detail">
                <div class="custom-card-info-text">{{card[card['sub_info_column']] || card['sub_info_text']}}</div>
            </div>
        </div>
    </div>
</ng-template>

<ng-template #PROFILE_CARD>
    <div *ngIf="card" (click) = "emitSelection()" class="custom-card" [ngClass]="{ 'custom-card-selected' : card['selected'] }">
        <div class="custom-card-image profile-card" [ngClass]="getThemeClass()">
            <img *ngIf="profileImageSrc && imageNotFound == false " [src]="profileImageSrc" (error)=" setImageNotFound(true) " />
            <img *ngIf="altProfileImageSrc && imageNotFound == false " [src]="altProfileImageSrc" (error)=" setImageNotFound(false) " />
            <span *ngIf="imageNotFound == true ">{{imageInitials}}</span>
        </div>
        <div *ngIf="card['badge_column']" class="custom-card-badge" [ngClass]="getBadgeThemeClass()" [title] = "card[card['badge_column']]">{{card[card['badge_column']]}}</div>
        <div class="custom-card-title" [ngClass]="{'custom-card-title-single' : !card['info_visible']}" >{{card[card['title_column']]}}</div>
        <div class="custom-card-details profile-card" [ngClass]="{'profile-card-visible' : !card['info_visible']}" >
            <div class="custom-card-detail v-sep profile-card">
                <div class="custom-card-detail-value">{{card[card['info_column']]}}</div>
                <div class="custom-card-detail-text">{{card['info_text']}}</div>
            </div>
            <div class="custom-card-detail profile-card">
                <div class="custom-card-detail-value">{{card[card['sub_info_column']]}}</div>
                <div class="custom-card-detail-text">{{card['sub_info_text']}}</div>
            </div>
        </div>
    </div>
</ng-template>

<ng-template #BANNER_CARD>
    <div class="leaderboard-root">
        <div class="leaderboard-container">
            <div class="leaderboard-scores" (click)="emitSelection()">
                <div *ngFor="let data of card['data']; let i = index;" class="leaderboard-cont" [ngClass]="{'sm': i != 1 , 'hide' : !data[data['info_column']] }" >
                    <div class="leaderboard-icon-cont">
                        <img #bannerImg [src] = "data[data['image_column']]" (error)=" setErrorImage(bannerImg)" class="leaderboard-icon" />
                    </div>
                    <div class="leaderboard-rank">{{ data[data['info_column']] }}</div>
                    <div class="leaderboard-points">{{ data[data['sub_info_column']] }}</div>
                </div>
            </div>
        </div>
    </div>
</ng-template>

<ng-template #PROFILE_CARD_2>
    <div *ngIf="card" (click) = "emitSelection()" class="custom-card" [ngClass]="{ 'custom-card-selected' : card['selected'] }">
        <div class="custom-card-image profile-card" [ngClass]="getThemeClass()">
            <img *ngIf="profileImageSrc && imageNotFound == false " [src]="profileImageSrc" (error)=" setImageNotFound(true) " />
            <img *ngIf="altProfileImageSrc && imageNotFound == false " [src]="altProfileImageSrc" (error)=" setImageNotFound(false) " />
            <span *ngIf="imageNotFound == true ">{{imageInitials}}</span>
        </div>
        <div *ngIf="card['badge_column']" class="custom-card-badge" [ngClass]="getBadgeThemeClass()" [title] = "card[card['badge_column']]">{{card[card['badge_column']]}}</div>
        <div class="custom-card-title" [ngClass]="{'custom-card-title-single' : (!card['info_visible'] && !card['sub_info_visible'] )}" >{{card[card['title_column']]}}</div>
        <div class="custom-card-details profile-card" > <!-- [ngClass]="{'profile-card-visible' : !card['info_visible']}" -->
            <div class="custom-card-detail v-sep profile-card "  *ngIf="card['info_visible']">
            	<div class = "abm_custom_card_spr" *ngIf="card['info_visible']">
		           <bb-custom-chart class="custom_chart_spr" [chartType]= "card['chartType']"
		               	[data]="[card[card['info_column']]]"
		                [labels]="card['labels']"
		                [options]="card['options']"
		                [parentData]="card">
		           </bb-custom-chart>
	               <div class="custom-card-detail-value ">{{card[card['info_column']]}}%</div>
            	</div>
               <div class="custom-card-detail-text ">{{card['info_text']}}</div>
            </div>
            <div class="custom-card-detail profile-card "  *ngIf="card['sub_info_visible']">
            	<div class = "abm_custom_card_spr" *ngIf="card['sub_info_visible']">
	            	 <bb-custom-chart class="custom_chart_spr" [chartType]= "card['chartType']"
	                	[data]="[card[card['sub_info_column']]]"
	                    [labels]="card['labels']"
	                    [options]="card['options']"
	                    [parentData]="card">
	                </bb-custom-chart>
	                <div class="custom-card-detail-value ">{{card[card['sub_info_column']]}}%</div>
            	</div>
                <div class="custom-card-detail-text ">{{card['sub_info_text']}}</div>
            </div>
        </div>
    </div>
</ng-template>

<ng-template #PROFILE_CARD_3>
    <div *ngIf="card" (click) = "emitSelection()" class="custom-card custom-card-rsm" [ngClass]="{ 'custom-card-selected' : card['selected'] }">
        <!-- Changed by Pravin K on 18-MAR-20  START-->
        <span *ngIf="card['user_action'] && card['user_action'] == 'ADD_TASK' "  class="db-addTask" (click) = "emitSelection($event); $event.stopPropagation();" >+</span>
       	<!-- Changed by Pravin K on 18-MAR-20  END-->
        <div class="custom-card-image profile-card" [ngClass]="getThemeClass()">
            <img *ngIf="profileImageSrc && imageNotFound == false " [src]="profileImageSrc" (error)=" setImageNotFound(true) " />
            <img *ngIf="altProfileImageSrc && imageNotFound == false " [src]="altProfileImageSrc" (error)=" setImageNotFound(false) " />
            <span *ngIf="imageNotFound == true ">{{imageInitials}}</span>
        </div>
        <div *ngIf="card['badge_column']" class="custom-card-badge" [ngClass]="getBadgeThemeClass()" [title] = "card[card['badge_column']]">{{card[card['badge_column']]}}</div>
        <div class="custom-card-title" [ngClass]="{'custom-card-title-single' : ( !card['info_visible'] && !card['sub_info_visible'] )}" >{{card[card['title_column']]}}</div>
        <div *ngIf="card['sub_title_column']" class="custom-card-sub-title">{{card[card['sub_title_column']]}}</div>
        <div class = 'custom-card-sell-container'>
		  <div class = 'custom-card-sell-sub-container' style = 'box-shadow: 1px 0 0 0 rgba(0,0,0,.1);' *ngIf="card['info_visible']"> 
		      <div class = 'custom-card-sell-descr'>{{card[card['info_column_val']]}}</div>
		      <div class = "abm_custom_card_spr" *ngIf="card['info_visible']">
		           <bb-custom-chart class="custom_chart_spr" [chartType]= "card['chartType']"
		               	[data]="[card[card['info_column']]]"
		                [labels]="card['labels']"
		                [options]="card['options']"
		                [parentData]="card">
		           </bb-custom-chart>
	               <div class="custom-card-detail-value ">{{card[card['info_column']]}}%</div>
            	</div>
            	 <div class="custom-card-detail-text ">{{card['info_text']}}</div>
		  </div>
		  <div class = 'custom-card-sell-sub-container' *ngIf="card['sub_info_visible']">
		      <div class = 'custom-card-sell-descr'>{{card[card['sub_info_column_val']]}}</div>
		      <div class = "abm_custom_card_spr" *ngIf="card['sub_info_visible']">
	            	 <bb-custom-chart class="custom_chart_spr" [chartType]= "card['chartType']"
	                	[data]="[card[card['sub_info_column']]]"
	                    [labels]="card['labels']"
	                    [options]="card['options']"
	                    [parentData]="card">
	                </bb-custom-chart>
	                <div class="custom-card-detail-value ">{{card[card['sub_info_column']]}}%</div>
            	</div>
            	<div class="custom-card-detail-text ">{{card['sub_info_text']}}</div>
		  </div>
		</div>
        
        <!--<div class="custom-card-details profile-card more-info" [ngClass]="{'profile-card-visible' : !card['info_visible']}" >
            <div class="custom-card-detail v-sep profile-card ">
            	<div class = "abm_custom_card_spr" *ngIf="card['info_visible']">
	               <div class="custom-card-detail-value ">{{card[card['info_column_val']]}}</div>
        	</div>
               
            </div>
            <div class="custom-card-detail profile-card ">
            	<div class = "abm_custom_card_spr" *ngIf="card['info_visible']">
	                <div class="custom-card-detail-value ">{{card[card['sub_info_column_val']]}}</div>
            	</div>
               
            </div>
        </div>
        <div class="custom-card-details profile-card" [ngClass]="{'profile-card-visible' : !card['info_visible']}" >
            <div class="custom-card-detail v-sep profile-card ">
            	<div class = "abm_custom_card_spr" *ngIf="card['info_visible']">
		           <bb-custom-chart class="custom_chart_spr" [chartType]= "card['chartType']"
		               	[data]="[card[card['info_column']]]"
		                [labels]="card['labels']"
		                [options]="card['options']"
		                [parentData]="card">
		           </bb-custom-chart>
	               <div class="custom-card-detail-value ">{{card[card['info_column']]}}%</div>
            	</div>
               <div class="custom-card-detail-text ">{{card['info_text']}}</div>
            </div>
            <div class="custom-card-detail profile-card ">
            	<div class = "abm_custom_card_spr" *ngIf="card['info_visible']">
	            	 <bb-custom-chart class="custom_chart_spr" [chartType]= "card['chartType']"
	                	[data]="[card[card['sub_info_column']]]"
	                    [labels]="card['labels']"
	                    [options]="card['options']"
	                    [parentData]="card">
	                </bb-custom-chart>
	                <div class="custom-card-detail-value ">{{card[card['sub_info_column']]}}%</div>
            	</div>
                <div class="custom-card-detail-text ">{{card['sub_info_text']}}</div>
            </div>
        </div> -->
    </div>
</ng-template>

<ng-template #CUSTOM_CHART_2>
    <div *ngIf="card" (click)="emitSelection()" class="custom-card-chart kpi_resp-card col" [ngClass]="{ 'custom-card-selected' : card['selected'] }">
	       <div class="kpi_header">
		        <div class="custom-card-image sm" [ngClass]="getThemeClass()">
		            <img [src]="'dashboard/assets/images/svg/'+ card[card['image_column']]" />
		        </div>
		        <div class = "kpi_content_card_title">{{card[card['title_column']]}}</div>
	       </div>

        <div class="custom-card-details">
            <div class="custom-card-detail chart">
                <bb-custom-chart [chartType]= "card['chartType']"
                    [data]="[card[card['info_column']]]"
                    [labels]="card['labels']"
                    [options]="card['options']"
                    [parentData]="card">
                </bb-custom-chart>
            </div>
            <div class="custom-card-detail">
            	<div *ngIf="card[card['options']['percentFactorColumn']].indexOf('%') == -1" class="kpi_custom-card-info">{{card[card['info_column']]}}/{{card[card['options']['percentFactorColumn']]}}</div>
            	<div *ngIf="card[card['options']['percentFactorColumn']].indexOf('%') > 0"  class="kpi_custom-card-info">{{card[card['info_column']]}}%</div>
                <div class="kpi_custom-card-info-text" style="font-size:11px">{{card[card['sub_info_column']]}}</div>
            </div>
        </div>
    </div>
</ng-template>


<ng-template #CUSTOM_CHART_3>
    <div *ngIf="card" (click)="emitSelection()" class="custom-card-chart kpi_resp-card col" [ngClass]="getThemeClass()">
	       <div class="kpi_header kpi-header-icon">
		        <div class="custom-card-image ms" >
		            <img [src]="'dashboard/assets/images/svg/'+ card[card['image_column']]" />
		        </div>
		        <div class = "kpi_content_card_descr kpi_content_card_descr_wht">{{card[card['sub_info_column']]}}</div>
	       </div>

        <div class="custom-card-details chc-kpi">
            <div class="custom-card-detail chart">
                <bb-custom-chart [chartType]= "card['chartType']"
                    [data]="[card[card['info_column']]]"
                    [labels]="card['labels']"
                    [options]="card['options']"
                    [parentData]="card">
                </bb-custom-chart>
            </div>
            <div class="custom-card-detail">
                <!--
                <div *ngIf="card[card['info_text_column']]" class="kpi_custom-card-info kpi_custom-card-info_wht">{{card[card['info_text_column']]}}</div>
                <div *ngIf="card[card['subinfo_text_column']]" class="kpi_custom-card-info-text kpi_custom-card-info-text_wht" style="font-size:11px">{{card[card['subinfo_text_column']]}}</div>
                -->
                <div *ngIf="card[card['info_text_column']]" class="kpi_custom-card-info kpi_custom-card-info_wht" [innerHTML] = "card[card['info_text_column']]"></div>
                <div *ngIf="card[card['subinfo_text_column']]" class="kpi_custom-card-info-text kpi_custom-card-info-text_wht" style="font-size:11px" [innerHTML] = "card[card['subinfo_text_column']]"></div>
            </div>
        </div>
    </div>
</ng-template>

<ng-template #CUSTOM_CHART_4>
    <div *ngIf="card" (click)="emitSelection()" class="custom-card-chart kpi_resp-card col" [ngClass]="getThemeClass()">
	       <div class="kpi_header kpi-header-icon">
		        <div class="custom-card-image ms" >
		            <img [src]="'dashboard/assets/images/svg/'+ card[card['image_column']]" />
		        </div>
		        <div class = "kpi_content_card_descr kpi_content_card_descr_wht">{{card[card['title_column']]}}</div>
	       </div>
          <div class="custom-card-details chc-kpi">
            <div class="custom-card-detail chart">
                <bb-custom-chart [chartType]= "card['chartType']"
                    [data]="[card[card['sales_info_column']]]"
                    [labels]="card['labels']"
                    [options]="card['options']"
                    [parentData]="card">
                </bb-custom-chart>
            </div>
            <div class="custom-card-detail">
                <div *ngIf="card[card['sales_info_column']]" class="kpi_custom-card-info kpi_custom-card-info_wht">
                				{{card[card['sales_info_column']] | currencyformat}}
                </div>               
                <div  class="kpi_custom-card-info-text kpi_custom-card-info-text_wht" style="font-size:11px">
                				{{card[card['target_info_column']] | currencyformat}} {{card['target_info_str_column']}}
                </div>
            </div>
        </div>
    </div>
</ng-template>

<ng-template #BANNER_CARD_2>
    <div class="leaderboard-root">
        <div class="leaderboard-container">
            <div class="leaderboard-scores_2">
                <div class="leaderboard-icon-cont_2">
	      			 <img #bannerImg style="width: inherit;height: inherit;"
	      	 			[src] = "setUserImage( card[card['image_column']] )"
	      	 			(error)=" setErrorImage(bannerImg)" />
	      		</div>
	       		<div class="bannerCard_info" style="padding-left: 10px;">
			       <div class="leaderboard-name">{{ card[card['info_column1']] }}</div>
			       <div class="leaderboard-desgn">{{ card[card['info_column2']] }}</div>
			       <div class="leaderboard-doj">
			       		{{ card[card['loc_info_join_label']] }}
			       		<span class="leaderboard-hq">{{ card[card['loc_info_head_quar']] }}</span>	
			       		 {{ card[card['sub_info_column1']] }}		       
			       </div>
			       
			       <div style= "color: #fff;">
			       		 Region <span  class="leaderboard-region">{{ card[card['loc_info_region']] }}</span>
			       		 and Zone <span  class="leaderboard-zone">{{ card[card['loc_info_zone']] }}</span>
			       </div>
			       <div class="leaderboard-performance">
			       		<span class="leaderboard-grade">{{ card[card['sub_info_column3']] }}</span>
			       		<bb-rating [rate]="card[card['sub_info_column2']]"></bb-rating>
			       </div>
	     		</div>
            </div>
        </div>
    </div>
</ng-template>

<ng-template #SIMPLE_CARD>
	<div *ngIf="card" (click)="emitSelection()" class="simple-card-box col " [ngClass]="getThemeClass()">
	    <div class="simple-card-header">
	        <div class="simple-card-icon">
	            <img [src]="'dashboard/assets/images/svg/'+ card[card['image_column']]" />
	        </div>
	        <div class="simple-card-title">{{card[card['title_column']]}}</div>
	    </div>
	    <div class="simple-card-count-summary">
	        <span class="simple-card-count" [ngClass]="{'no-kpi-count': card[card['info_column']] == '0'}">{{card[card['info_column']]}}</span>
	        <span class="simple-card-summary">{{card[card['sub_info_column']]}}</span>
	    </div>
	</div>
</ng-template>
<!--Added by Vikas L on 30-JUN-20 -->
<ng-template #SIMPLE_CARD_1>
	<div *ngIf="card" (click)="emitSelection()" class="simple-card-box col " [ngClass]="getThemeClass()">
	    <div class="simple-card-header">
	        <div class="simple-card-icon">
	            <img [src]="'dashboard/assets/images/svg/'+ card[card['image_column']]" />
	        </div>
	        <div class="simple-card-title">{{card[card['title_column']]}}</div>
	    </div>
	    <div class="simple-card-count-summary">
	        <span class="simple-card-count" style="line-height: 22px !important">{{card[card['info_column']]}}</span>
	        <span class="simple-card-summary" style="font-size:  20px !important;">{{card[card['sub_info_column']]}}</span>
	    </div>
	</div>
</ng-template>

<!--Added By Pravin K on 05-AUG-21 [for OTC current day dashboard ] START--> 
	<ng-template #SIMPLE_CARD_2>
		<div *ngIf="card" (click)="emitSelection()" class="simple-card-box-sc2 col " [ngClass]="getThemeClass()">
		    <div class="simple-card-header-sc2 ">
		        <div class="simple-card-icon">
		            <img [src]="'dashboard/assets/images/svg/'+ card[card['image_column']]" />
		        </div>
		        <div class="simple-card-title">{{card[card['title_column']]}}</div>
		    </div>
		    <div class="simple-card-count-summary-sc2">
		        <span class="simple-card-count-sc2" style="line-height: 22px !important">{{card[card['info_column']]}}</span>
		        <span class="simple-card-summary-sc2" >{{card[card['sub_info_column']]}}</span>
		    </div>
		</div>
	</ng-template>
	<!--Added By Pravin K on 05-AUG-21 [for OTC current day dashboard ] END--> 
	
	<!--Added By Pravin K on 07-AUG-21 START --> 	
	<ng-template #SIMPLE_CARD_3>
		<div *ngIf="card"  class="sm_crd3" (click)="emitSelection()" >  
	        <div class="sm_crd3_descr">{{card[card['sub_info_column']]}}</div>
		    <div class="sm_crd3_count" [ngClass]="getThemeClass()" >{{card[card['info_column']]}}</div>
		</div>
	</ng-template>
	<!--Added By Pravin K on 07-AUG-21 [for OTC current day dashboard ] END--> 

<!--Added By Poonam B[06-04-2021].Start-->
<ng-template #BANNER_CARD_3>
    <div class="leaderboard-root">
        <div class="leaderboard-container">
            <div class="leaderboard-scores_2">

            <div class="expenseDetail1">
            <div class="expenseDate" style = "margin-top:10px; display:flex; justify-content: space-between;">
                <div class="expenseDate" style="margin: 0px 0 0 15px;;color: #fff;"> {{ card[card['info_column1']] }}</div>
                <div style="color: #fff;margin: 0px 15px 0 0">₹ {{ card[card['info_column2']] }}</div>
            </div>
            <div class="expense">
                <span class="expenseDiv">
                    <span class="titleName1  "><img class="locImageDiv" src="dashboard/assets/images/svg/submit.svg">
                        <!--<div class="locImageDiv"><img class="imageIcon" src="dashboard/assets/images/svg/document.svg"></div>-->
                    </span>
                    <span class="expenseSubData">
                        <div class="expenseStatus">{{ card[card['status_column']] }}</div>
                        <div class="expenseStatusDate">{{ card[card['status_date_column']] }}</div>
                    </span>
                </span>
                <span class="expenseDiv">
                    <span class="titleName"><img class="imageIcon" src="/ibase/CustomMenuImageServlet?fldValue={{ card[card['aprv_code_column']] }}&amp;ALT_FLD_VALUE= {{ card[card['aprv_name_column']] }}&amp;object=employee&amp;objName=employee&amp;docAttachType=Icon"></span>
                    <!-- <span class="titleName"><img class="imageIcon" src="/ibase/CustomMenuImageServlet?fldValue=undefined&amp;altFldValue= &amp;object=SALES_PERS&amp;objName=SALES_PERS&amp;docAttachType=Icon"></span> -->
                    <span class="expenseSubData">
                        <div class="expenseStatus">{{ card[card['aprv_status_column']] }}</div>
                        <div class="expenseStatusDate">{{ card[card['aprv_date_column']] }} </div>
                    </span>
                </span>
                <span class="expenseDiv">
                    <span class="titleName"><img class="locImageDiv" src="dashboard/assets/images/svg/document.svg"></span>
                    <span class="expenseSubData">
                        <div class="expenseStatus">{{ card[card['hd_status_column']] }}</div>
                        <div class="expenseStatusDate">{{ card[card['hd_status_date_column']] }} </div>
                    </span>
                </span>
                <span class="expenseDiv">
                    <span class="titleName "><img class="imageIcon" src="/ibase/CustomMenuImageServlet?fldValue={{ card[card['ho_code_column']] }}&amp;ALT_FLD_VALUE={{ card[card['ho_name_column']] }}&amp;object=employee&amp;objName=employee&amp;docAttachType=Icon"></span>
                    <!-- <span class="titleName "><img _ngcontent-pps-c28="" class="imageIcon" src="/ibase/CustomMenuImageServlet?fldValue=1515&amp;altFldValue=VIDYA SHINDE&amp;object=SALES_PERS&amp;objName=SALES_PERS&amp;docAttachType=Icon"></span> -->
                    <span class="expenseSubData">
                        <div class="expenseStatus">{{ card[card['ho_status_column']] }}</div>
                        <div class="expenseStatusDate">{{ card[card['ho_date_column']] }} </div>
                    </span>
                </span>
                <span class="expenseDiv">
                    <span class="titleName2 ">
                        <div class="locImageDiv"><span class=" vision-ui-check expenseVisionIcon"></span></div>
                    </span>
                    <span class="expenseSubData">
                        <!-- <div class="expenseStatus">{{ card[card['payment_status_column']] }}</div> -->
                        <div class="expenseStatus">Est Due Date</div>
                        <div class="expenseStatusDate">{{ card[card['payment_date_column']] }}</div>
                    </span>
                </span>
            </div>
            </div>
	       		
            </div>
        </div>
    </div>
</ng-template>

<!--Added by Poonam B[06-04-2021].End-->



<!-- Added By Nilesh For Brand Campaign 21-09-021-->

<ng-template #SIMPLE_CARD_4>
	<div *ngIf="card"   (click)="emitSelection()"  class="simple-card-box-main-brand col"   id="brandSOCard_{{card[card['sales_pers']]}}"      [ngClass]="{ 'custom-card-brand-selected' : card['selected'] }" >
	    <!-- <div id ="test1" class="simple-card-header-brand">
	        <div class="simple-card-icon-brand">
	            <img [src]="'/ibase/resource/images/users/1313.png'" style="width: 36px !important;height: 36px !important;background-color: gray !important;border-radius: 50% !important;padding: 0 !important;"/>
	        </div>
	        <div class="simple-card-title-brand">{{card[card['sub_info_column']]}} {{card[card['grade']]}}({{card[card['sales_pers']]}})</div>
	    </div> -->

           <div  class="simple-card-header-rank">
	        <div class="">
	            <img #cardImg [src]="hostUrl+'/ibase/resource/images/users/'+ card[card['sales_pers']]+'.png'"  class="so-userImage"  (error)=" setErrorImageCard(cardImg,card[card['sub_info_column']])"/>
            </div>
	       <div  class="" style="color: #424242;width: calc(100% - 70px);padding: 0 8px 0 8px;">
               <div> 
                    
                    {{card[card['sub_info_column']]}}
               </div>
               <div style="font-size: 12px;color: #666;display: flex;align-items: center;">
                   <img _ngcontent-hdo-c38="" src="dashboard/assets/images/svg/Campaign.svg" style="height: 15px;">
                   {{card[card['grade']]}}({{card[card['sales_pers']]}})
                </div>
          </div>

          <div style="width: 30px;height: 32px;display: flex;align-items: center;justify-content: flex-end;">
            <span style="background-color: skyblue;color: #fff;border-style: none;border-radius: 31px;height: 24px;width: auto;min-width: 24px;display: flex;line-height: 10px;font-size: 12px;min-height: 20px;align-items: center;justify-content: center;">
            {{card[card['record_count']]}}
            </span>
           </div>
	    </div>
    <div style="height: 30px;display: flex;align-items: center;" id ="brandSOCard" (click)="getDashboardMetadataFromCard('ranking',$event,card[card['sales_pers']]);$event.stopPropagation()" > 
        <div style="padding: 0px 3px;color: #666;font-size: 10px;justify-content: center;align-items: center;"> Rank </div> 
        <div style="display: flex;"> 
            <div style="width: auto;background-color: #efefef;border-radius: 15px;display: flex;height: 20px;padding: 0px 6px;text-align: center;justify-content: center;align-items: center;">
                <span style="padding: 0px 3px;color: #666;font-size: 10px;"> Regional </span> 
                <span style="padding: 0px 3px;font-weight: bold;font-size: 10px;"> {{card[card['region']]}} </span>   
            </div>   
            <div style="width: auto;background-color: #efefef;border-radius: 15px;display: flex;height: 20px;padding: 0px 6px;text-align: center;justify-content: center;align-items: center;">
                <span style="padding: 0px 3px;color: #666;font-size: 10px;"> Zonal </span> 
                <span style="padding: 0px 3px;font-weight: bold;font-size: 10px;"> {{card[card['zonal']]}} </span>    
            </div>
            <div style="width: auto;background-color: #efefef;border-radius: 15px;display: flex;height: 20px;padding: 0px 6px;text-align: center;justify-content: center;align-items: center;">
                <span style="padding: 0px 3px;color: #666;font-size: 10px;"> All India </span> 
                <span style="padding: 0px 3px;font-weight: bold;font-size: 10px;"> {{card[card['all_india']]}} </span>    
            </div>
        </div> 
    </div>
  <div style="height: 100px;"  class="simple-card-title-brand-test"> 

         <bb-custom-chart 
							[chartType]= "card['chartConfig']['chartType']"
							[datasets]="card['chartConfig']['datasets']"
							[labels]="card['chartConfig']['labels']"
							[options]="card['chartConfig']['options']"
							[parentData]="card['chartConfig']['parentData']"
							[chartHeight]="card['chartConfig']['chartHeight']">
		</bb-custom-chart>
    </div>
	    
        <div style="height: 40px;display: flex;width: calc(100% - 20px);align-items: center;padding: 0 10px;color: #3c3c3c;">
            <div style="color: inherit;padding: 0 5px;display: flex;align-items: center;width: 30%;"> <div style="display: flex;align-items: center;"> <img _ngcontent-nrr-c31="" src="dashboard/assets/images/svg/Team.svg" style="height: 14px;"> </div> <div style = "font-size: 10px;"><span style="padding: 3px">{{card[card['avg_pr']]}}</span>Rx</div> </div>
            <div style="color: inherit;width: 70%;display: flex;justify-content: flex-end;">
                <div  style="color: inherit;padding: 0 5px;display: flex;align-items: center;"> <div style="display: flex;align-items: center;" [ngClass]="{ 'noClick' :  card[card['is_mgr']] }"  (click)="openTransactionDocGWT( card[card['campgn_id']] , card[card['brand_code']] ); $event.stopPropagation()"  > <span [ngClass]="{ 'hideplus' :  card[card['is_mgr']] }" style="color: #12c4a7">+</span> <img _ngcontent-nrr-c31="" src="dashboard/assets/images/svg/Doc.svg" style="height: 14px;" > </div> <div style = "font-size: 10px;"><span style="padding: 3px">{{card[card['count_dr']]}}</span>Dr</div> </div>
                <div  style="color: inherit;padding: 0 5px;display: flex;align-items: center;"> <div style="display: flex;align-items: center;" [ngClass]="{ 'noClick' :card[card['is_mgr']] }" (click)="openTransactionRxGWT( card[card['campgn_id']] , card[card['brand_code']] ); $event.stopPropagation()"   > <span  [ngClass]="{ 'hideplus' :  card[card['is_mgr']] }"style="color: #4b76ff">+</span> <img _ngcontent-nrr-c31="" src="dashboard/assets/images/svg/Rx.svg" style="height: 14px;" > </div> <div style = "font-size: 10px;"><span style="padding: 3px">{{card[card['count_pr']]}}</span>Rx</div> </div>
                <div style="color: inherit;padding: 5px;color: #0baa85;">:</div>
            </div>
        </div>
	</div>
</ng-template>


<ng-template #SIMPLE_CARD_5>
	<div *ngIf="card" (click)="emitSelection()" class="simple-card-box-main-brand col "  [ngClass]="{ 'custom-card-brand-selected' : card['selected'] }">
	    <div id ="test1" class="simple-card-header-brand" style="padding: 5px;">
	        <div class="simple-card-title-brand-campaign">
                <!-- {{card[card['brand_descr']]}} -->
                <img  [src]="hostUrl+'/ibase/CustomMenuImageServlet?fldValue='+ card[card['brand_code']]+'&object=product&objName=product'" style="height: 28px;">
            </div>
             <div style="display: flex;align-items: center;padding: 2px 0 0 0;"> 
                <div style="display: flex;align-items: center;">
                     <img   src="dashboard/assets/images/svg/Campaign.svg" style="height: 15px;">
                </div>
                <div style="color: #666;font-size: 12px;">
                {{card[card['camp_descr']]}}
                </div>
            </div>
	    </div>
	  <div style="height: 100px;padding: 4px 8px;width: calc(100% - 16px);"  class="simple-card-title-brand-test"> 

         <bb-custom-chart 
							[chartType]= "card['chartConfig']['chartType']"
							[datasets]="card['chartConfig']['datasets']"
							[labels]="card['chartConfig']['labels']"
							[options]="card['chartConfig']['options']"
							[parentData]="card['chartConfig']['parentData']"
							[chartHeight]="card['chartConfig']['chartHeight']">
		</bb-custom-chart>
      </div>
       
        <div style="height: 40px;display: flex;width: calc(100% - 16px);align-items: center;padding: 4px 8px 8px 8px;color: #3c3c3c;">
            <div style="color: inherit;padding: 0 5px;display: flex;align-items: center;width: 30%;"> <div style="display: flex;align-items: center;"> <img _ngcontent-nrr-c31="" src="dashboard/assets/images/svg/Team.svg" style="height: 14px;"> </div> <div style = "font-size: 10px;"><span style="padding: 3px">{{card[card['count_reporting']]}}</span>MR</div> </div>
            <div style="color: inherit;width: 70%;display: flex;justify-content: flex-end;">
                <div  style="color: inherit;padding: 0 5px;display: flex;align-items: center;"> <div style="display: flex;align-items: center;"  >  <img _ngcontent-nrr-c31="" src="dashboard/assets/images/svg/Doc.svg" style="height: 14px;" > </div> <div style = "font-size: 10px;"><span style="padding: 3px">{{card[card['count_dr']]}}</span>Dr</div> </div>
                <div  style="color: inherit;padding: 0 5px;display: flex;align-items: center;"> <div style="display: flex;align-items: center;" >  <img _ngcontent-nrr-c31="" src="dashboard/assets/images/svg/Rx.svg" style="height: 14px;" > </div> <div style = "font-size: 10px;"><span style="padding: 3px">{{card[card['count_pr']]}}</span>Rx</div> </div>
                <div style="color: inherit;padding: 5px;color: #0baa85;">:</div>
            </div>
        </div>
	</div>
</ng-template>


<ng-template #SIMPLE_CARD_RANKING>
	<div *ngIf="card" (click)="emitSelection()" class="simple-card-box col " [ngClass]="{ 'ranking-background' : card['ismrornot']  }">
         
        
        
                <div  class="simple-card-header-rank">
                    <div class="">
                        <img #cardRank [src]="hostUrl+'/ibase/resource/images/users/'+ card[card['emp_code']]+'.png'" class="so-userImage" (error)=" setErrorImageCard(cardRank,card[card['name']])"/>
                    </div>
                <div  class="" style="color: #424242;width: calc(100% - 70px);padding: 0 8px 0 8px;">
                    <div> 
                            {{card[card['name']]}}
                    </div>
                    <div style="font-size: 12px;color: #666;">
                        {{card[card['grade']]}}({{card[card['emp_code']]}})
                        </div>
                </div>

                <div style="width: 30px;height: 32px;display: flex;align-items: center;justify-content: flex-end;">
                    <span style="background-color: skyblue;color: #fff;border-style: none;border-radius: 31px;height: 24px;width: auto;min-width: 24px;display: flex;line-height: 10px;font-size: 12px;min-height: 20px;align-items: center;justify-content: center;">
                    {{card[card['count']]}}
                    </span>
                </div>
                </div>
            <div _ngcontent-sqo-c38="" class="" style=" display: flex;width: calc(100% - 16px);padding: 8px;height: 60px;">    
                <div style="width: 50%;display: inline-block;justify-content: center;align-items: center;text-align: center;">
                    <div style="height: 35px;display: flex;align-items: flex-end;justify-content: center;color: #434343;font-weight: 600;font-size: 16px;">
                    <span _ngcontent-sqo-c38="" style="/* font-size:  20px !important; */"> {{card[card['dccount']]}}</span>
                    </div>
                    <div style="height: 25px;display: flex;align-items: flex-start;justify-content: center;color: #666;font-size: 12px;line-height: 8px;">
                    Doctors
                    </div>
                </div>
                <div style="width: 50%;display: inline-block;justify-content: center;align-items: center;text-align: center;">
                    <div style="width: 100%;display: inline-block;justify-content: center;align-items: center;text-align: center;height: 30px;">
                        <div style="height: 15px;display: flex;align-items: flex-end;justify-content: center;color: #434343;font-weight: 600;font-size: 14px;">
                            <span _ngcontent-sqo-c38="" style="/* font-size:  20px !important; */">{{card[card['rxcount']]}}</span>
                        </div>
                        <div style="height: 15px;display: flex;align-items: flex-start;justify-content: center;color: #666;font-size: 12px;line-height: 8px;">
                        Rx
                        </div>
                    </div>
                    <div style="width: 100%;display: inline-block;justify-content: center;align-items: center;text-align: center;height: 30px;">
                        <div style="height: 15px;display: flex;align-items: flex-end;justify-content: center;color: #434343;font-weight: 600;font-size: 14px;">
                        <span _ngcontent-sqo-c38="" style="/* font-size:  20px !important; */">{{card[card['avg']]}}</span>
                        </div>
                        <div style="height: 15px;display: flex;align-items: flex-start;justify-content: center;color: #666;font-size: 12px;line-height: 8px;">
                        Avg Rx
                        </div>
                    </div>
                </div>
            </div>
       
        
</div>
</ng-template>