<div class="bb-table-main-content" [ngClass] = "{'bb-table-sales-main':definedCellTotalUpdates}">
    <!-- Commented & Added by Sainath T. on 29-09-20 -start --> 
    <!-- <div #bbButtonCantainer *ngIf = "cancelButton || finishButton || saveButton" style="height: 40px;width: 100%" id="bb-btn-container">  -->
      <!--<div *ngIf = "finishButton" class = "button-div">
          By Pooja S on 10/04/2020 - to disable button on condition
          <button type="button" [disabled]="disableSumbit" [ngClass]="{'disable-Submit': disableSumbit}" class="bb-button-input" id = "bb_table_data" (click) = "onFinish()"> {{ finishButton }}</button>
        </div>

        <div *ngIf = "saveButton" class = "button-div">
          <button type="button" class="bb-button-input" id = "bb_table_data" (click) = "onSave()"> {{ saveButton }}</button>
        </div>
        By Pooja S on 10/04/2020 for Sell plan Abm related changes -Start
        <div *ngIf = "sentBackButton" class = "button-div">
          <button type="button" class="bb-button-input" id = "bb_table_data" (click) = "onSentBackButton()"> {{ sentBackButton }}</button>
        </div>
         By Pooja S on 10/04/2020 for Sell plan Abm related changes -End

        <div *ngIf = "cancelButton" class = "button-div">
            <button type="button" class="bb-button-input" id = "bb_table_data" (click) = "onCancel()"> {{ cancelButton }}</button>
        </div> -->

     <!-- </div> -->
     <div #bbButtonCantainer *ngIf = "cancelButton || finishButton || saveButton"  style="height: 40px; width: 100%;" id="bb-btn-container"> 
        </div>
    <!-- Commented & Added by Sainath T. on 29-09-20 -end -->

  <mat-form-field  [ngClass]="{'hide-filter': !displayFilter }" >
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter" name="filter" />
  </mat-form-field>

  <div #bbTableContainer id = "bb-table-container" class="table-container" [ngClass]="{'sales-table-container-brow': !isMobile && definedCellTotalUpdates,'sales-table-container-mob': isMobile && definedCellTotalUpdates,'no-filter': !displayFilter , 'no-paginator': !displayPaginator}">
    <!-- commented and removed matSort to set the header align center-->

    <table #bbTable id = "bb-table-container-new" style="width: 100%;height: 100%;" mat-table [dataSource]="dataSource"> 
    <ng-container *ngFor='let colDef of _displayedColumns; let col = index' matColumnDef="{{colDef.name}}" [sticky]="colDef.sticky" [stickyEnd]="colDef.sticky">
    <!-- commented and removed 'mat-header-cell' to set the header align center-->         
        <th class = "bb-table-header bb-common" id = "{{colDef.name}}_col{{col}}" mat-header-cell *matHeaderCellDef [style.width]="colDef.width" 
        [style.left] = "leftByIdJson[col]? leftByIdJson[col] : 'auto'" [ngClass]="{ 'bb-table-header-color': definedCellTotalUpdates,'rotate' : colDef.rotate, 'bb-hidden-col': colDef.visible == 'N', 'bb-fix-colum' : col == freezColumns - 1, 'bb-fix-header-col': colDef.sticky, 'bb-unfix-header-col': !colDef.sticky}"
         >{{definedCellTotalUpdates && colDef.display == 'Total' ? 'Total Value in INR(‘000)': colDef.display}}</th> 
          <ng-container *matCellDef="let element; let row = index"  sticky>
    
            <!-- for sticky, uneditable and groupwise cells only Start -->
            <!-- Changed by Amey W. [ Css chnages for total column in table ] on 10-4-2020  -->
            <td class = "bb-table-td bb-common" *ngIf =" colDef.sticky && col < groupByRowCol && colDef.visible == 'Y'" id = "Column_{{row}}_{{col}}" mat-cell  
            [style.left]="leftByIdJson[col]? leftByIdJson[col] : 'auto'" [style.bottom] = "(definedCellTotalUpdates && row >= (dataSourceLength - 4))? getFixRowBottom(row, span[colDef.display][row]) : 'auto'"
            [ngClass]="{ 'stickyClass' : colDef.sticky,'bb-sticky-cell':definedCellTotalUpdates && row >= (dataSourceLength - 4), 'totalBackground': definedCellTotalUpdates && row >= (dataSourceLength - 4),'bb-differ-background': definedCellTotalUpdates && (((row + 1)%2) == 0) && col == 0 && row < (dataSourceLength-4)}" 
            [attr.rowspan]="span[colDef.display][row]"[style.display]="span[colDef.display][row] ? '' : 'none'"
            [ngStyle]="{'background-color': (col == 0 && element['BG_COLOR'])? element['BG_COLOR'] : 'white', 'border-top': (definedCellTotalUpdates && row != 0 && row <= (dataSourceLength - 4) && element[displayColNameLst[1]] == borderSeparationKey)? '1px solid #666' : ''}">                           
              <span  style="padding-left: 10px;" [ngClass]="{ 'bb-number' : colDef.inputType == 'number','bb-text': colDef.inputType == 'text' }">{{definedCellTotalUpdates && element[colDef.name] == 'Total' ? 'Total Value in INR(‘000)' : element[colDef.name]}}</span> 
            </td>
            <!-- for sticky, uneditable and groupwise cells only End -->

            <!-- for sticky cells only Start -->
            <!-- Changed by Amey W. [ Css chnages for total column in table ] on 8-4-2020  -->
            <td class = "bb-table-td bb-common bb-disabled-cell" *ngIf ="colDef.sticky && col >= groupByRowCol && colDef.visible == 'Y'" id = "Column_{{row}}_{{col}}" mat-cell 
            [style.left]="leftByIdJson[col]? leftByIdJson[col] : 'auto' " [style.bottom] = "(definedCellTotalUpdates && row >= (dataSourceLength - 4))? getFixRowBottom(row) : 'auto'"
            [ngClass]="{ 'stickyClass_' : colDef.sticky,'lastChildRight': col == (displayedCols.length - 1), 'bb-fix-colum' : col == freezColumns - 1, 'bb-disabled-cell': col != (displayedCols.length - 1) ,'totalBackground' : definedCellTotalUpdates && col == (displayedCols.length - 1),
            'bb-editable-cell':(element[colDef.name+'_P'] && element[colDef.name+'_P'] == '0'),'bb-sticky-cell':definedCellTotalUpdates && row >= (dataSourceLength - 4),'totalBackground':definedCellTotalUpdates && row >= (dataSourceLength - 4)}" 
            [ngStyle]="{'border-top': (definedCellTotalUpdates && row != 0 && row <= (dataSourceLength - 4) && element[displayColNameLst[1]] == borderSeparationKey)? '1px solid #666' : ''}">       
              <span *ngIf ="colDef.name != 'Total'" [ngClass]="{ 'bb-number' : colDef.inputType == 'number','bb-text': colDef.inputType == 'text' }" >
                {{element[colDef.name]}}
              </span>
              <div *ngIf ="colDef.name == 'Total'">
              <!-- Changed by Amey W. [ Css chnages for total column in table ] on 8-4-2020  -->
                  <!-- <span *ngIf = "colDef.format == 'Y'" class = "bb-rupee-span">&#8377;</span> -->
                  <span class= "bb-row-total" [ngClass]="{ 'bb-number' : colDef.inputType == 'number','bb-text': colDef.inputType == 'text' }" > <!--'totalBackground' : colDef.inputType == 'number'-->
                    {{ currentChangeValue | calculateTotal: row: dataSource.data: defineCellsTotalIndxArr: displayColNameLst: freezColumns: definedCellTotalUpdates: defineCellsTotalIndxArrForQty}}</span>
              </div>
            </td>
            <!-- for sticky cells only End -->
            <!-- for non sticky and editable cells cells only Start -->
            <!-- Changed by Amey W. [ Css chnages for total column in table ] on 8-4-2020  -->
            <td class = "bb-table-td bb-common" *ngIf =" !colDef.sticky && col >= groupByRowCol && colDef.visible == 'Y'"  id = "Column_{{row}}_{{col}}" mat-cell [style.width]="colDef.width" 
              [style.bottom] = "(definedCellTotalUpdates && row >= (dataSourceLength - 4))? getFixRowBottom(row) : 'auto'"
              [style.left]="auto" [ngClass]="{ 'stickyClass_' : colDef.sticky,'bb-disabled-cell' :element[colDef.name+'_P'] == '1',
              'bb-sticky-cell' : definedCellTotalUpdates && row >= (dataSourceLength - 4),'totalBackground':definedCellTotalUpdates && row >= (dataSourceLength - 4)}" 
                (click) = "(definedCellTotalUpdates && element[colDef.name+'_P'] && element[colDef.name+'_P'] == '0')? isEditable(row, col) : '' "
                [ngStyle]="{'border-top': (definedCellTotalUpdates && row != 0 && row <= (dataSourceLength - 4) && element[displayColNameLst[1]] == borderSeparationKey)? '1px solid #666' : ''}">
              <!--commented by Sainath on 26-02-2020 -->
              <!-- <span *ngIf = "colDef.format == 'Y' || element[displayColNameLst[0]] == 'Total'" class = "bb-rupee-span" style="position: absolute;margin: 3px;">&#8377;</span>  -->
              <!--commented by Amey W on 10-04-2020 -->
              <!-- <span *ngIf = "element[displayColNameLst[0]] == 'Total'" class = "bb-rupee-span" style="position: absolute;margin: 3px;">&#8377;</span>  -->

              <ng-container *ngIf = "element[colDef.name+'_P']; else simpleInput">
                <input *ngIf = "!definedCellTotalUpdates && element[colDef.name+'_P'] == '0' " class="bb-input-text-field"
                [ngClass]="{ 'actiontext' : colDef.action }"
                [placeholder] = "colDef.placeholder"
                type="{{colDef.inputType}}"
                onClick="this.select();"
                [(ngModel)]="element[colDef.name]"
                (ngModelChange) = "setChangeValue($event, row, col)"
                [style.width] = "'inherit'"
                (blur) ="onBlurEmit()"
                [style.text-align] = "colDef.inputType == 'text'?'left':'right'"
                (focus) = "activeActionCell = row + '_' + col; onFocusEmit();"
                />
                <span *ngIf = "colDef.format != 'L' &&  !definedCellTotalUpdates && element[colDef.name+'_P'] == '1' " [ngClass]="{ 'bb-number' : colDef.inputType == 'number','bb-text': colDef.inputType == 'text' }">{{element[colDef.name]}}</span>

                <span *ngIf = "colDef.format == 'L' && !definedCellTotalUpdates && element[colDef.name+'_P'] == '1' " [ngClass]="{ 'bb-number' : colDef.inputType == 'number','bb-text': colDef.inputType == 'text' }" (click)="showAttachmentPlugin(element[colDef.name+'_html'])"  [innerHTML]="element[colDef.name+'_html']"></span>
                <!-- For Sell Planning Purpose Only: will activate txt field row only when clicked :Start-->
                <input #txtBox [id] ="row+'_'+col" *ngIf = "definedCellTotalUpdates && element[colDef.name+'_P'] == '0' && selectedRowState[row]" class="bb-input-text-field"
                [ngClass]="{ 'actiontext' : colDef.action }"
                [placeholder] = "colDef.placeholder"
                type="{{colDef.inputType}}"
                onClick="this.select();"
                (blur) ="onBlur(row)"
                [(ngModel)]="element[colDef.name]"
                (ngModelChange) = "setChangeValue($event, row, col)"
                [style.width] = "'inherit'"
             
                [style.text-align] = "colDef.inputType == 'text'?'left':'right'"
                />
                <!-- Changed by Amey W. [ Css chnages for total column in table ] on 10-4-2020  -->
                <span *ngIf = "definedCellTotalUpdates && (element[colDef.name+'_P'] == '1' || !selectedRowState[row])" [ngClass]="{ 'bb-number' : colDef.inputType == 'number','bb-text': colDef.inputType == 'text','bb-editable-text' :  !selectedRowState[row] && row < (dataSourceLength - 4), 'totalBackground' : element[displayColNameLst[0]] == 'Total' }">{{element[colDef.name]}}</span>
                <!-- For Sell Planning Purpose Only: will activate txt field row only when clicked :End-->

              </ng-container>
              <ng-template #simpleInput>
                  <input class="bb-input-text-field"
                  [ngClass]="{ 'actiontext' : colDef.action }"
                  [placeholder] = "colDef.placeholder"
                  type="{{colDef.inputType}}"
                  onClick="this.select();"
                  [(ngModel)]="element[colDef.name]"
                  (ngModelChange) = "setChangeValue($event, row, col)"
                  [style.width] = "'inherit'"
                  (blur) ="onBlurEmit()"
                  [style.text-align] = "colDef.inputType == 'text'?'left':'right'"
                  (focus) = "activeActionCell = row + '_' + col; onFocusEmit();"
                  />
              </ng-template>
              <span *ngIf = "colDef.action && (row + '_' + col == activeActionCell)" class = "bb-cell-action vision-ui-check" (click)="onCellActionPerform(colDef, element)"></span> 
            </td>
            <!-- for non sticky and editable cells cells only End --> 

             <!-- for non sticky and hidden cells cells only Start -->
             <td class = "bb-table-td bb-common" class = "bb-hidden-col" *ngIf =" !colDef.sticky && col >= groupByRowCol  && colDef.visible == 'N'; "  id = "Column_{{row}}_{{col}}" mat-cell [style.width]="colDef.width" [style.left]="auto" [ngClass]="{ 'stickyClass_' : colDef.sticky}">
                <span >{{element[colDef.name]}}</span>
            </td>
            <!-- for non sticky and hidden cells cells only End -->               
          </ng-container>

		<!--Changed by Sainath T. on 2-Mar-20 [Css chnages for total column in table]-->
          <ng-container *matFooterCellDef>
			<td *ngIf = "grandTotal" class = "bb-table-td bb-common bb-footer" style="padding-left: 10px!important;"
				mat-footer-cell [ngClass]="{ 'bb-footer-number' : colDef.inputType == 'number','bb-footer-txt': colDef.inputType == 'text', 'bb-hidden-col': colDef.visible == 'N' }">{{getGrandTotal(colDef.name, colDef.sticky, col)}}</td>
          </ng-container> 
        </ng-container>
        <tr  mat-header-row *matHeaderRowDef="displayColNameLst; sticky: true;" [style.height]="'40px'"></tr><!-- 170px -->
        <tr  mat-row *matRowDef="let row; columns: displayColNameLst;" [style.height]="bodyRowHeight+'px'" (click)="selection.toggle(row)"></tr>
        <ng-container *ngIf = "grandTotal">
          <tr mat-footer-row  *matFooterRowDef="displayColNameLst sticky: true;" [style.height]="'40px'"></tr>
        </ng-container>
      </table>
  </div>
  <ng-container  *ngIf = "displayPaginator" >
  <mat-paginator [ngClass]="{'hide-paginator': !displayPaginator }" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
  </ng-container> 
<!-- Added by Sainath T,. on 29-09-20- Start-->
<div *ngIf = "definedCellTotalUpdates && (cancelButton || finishButton || saveButton)">
  <ng-container *ngTemplateOutlet = "comomFooter"></ng-container>
</div>
</div>
<div *ngIf = "! definedCellTotalUpdates && (cancelButton || finishButton || saveButton)">
  <ng-container *ngTemplateOutlet = "comomFooter"></ng-container>
</div>
<ng-template #comomFooter>
  <bb-common-footer [isSalesPlanning] = "definedCellTotalUpdates">
      <back-button (click)="onCancel();" > 
          <span class="visionicon icon-nav-left" [ngStyle]="{'color' : !isMobile ? '#007bab' : 'var(--primaryDark)'}"></span>
          <span  [ngStyle]="{'color' : !isMobile ? '#007bab' : 'var(--primaryDark)'}">{{cancelButton}}</span>
      </back-button>
      <center-button (click)="finishButton && !disableSumbit? onFinish() : ''" > 
          <span [ngStyle]="{'color' : !isMobile ? '#007bab' : 'var(--primaryDark)'}"  [ngClass]="{'disable-Submit': disableSumbit}" >{{finishButton}}</span>
          <span [ngClass]="{'finishButtonIcon icon-finish footerActionBtn' : finishButton, 'disable-Submit': disableSumbit} " [ngStyle]="{'color' : !isMobile ? '#007bab' : 'var(--primaryDark)'}"></span>  
      </center-button>
      <confirm-button (click)="!sentBackButton ? onSave() : onSentBackButton()"> <!--  [ngStyle]= "{'visibility' : saveButton ? 'visible' : 'hidden'}" -->
      <span [ngStyle]="{'color' : !isMobile ? '#007bab' : 'var(--primaryDark)'}">{{ !sentBackButton ? saveButton : sentBackButton }}</span>
      <span [ngClass]="{'finishButtonIcon icon-finish footerActionBtn' : sentBackButton || saveButton } " [ngStyle]="{'color' : !isMobile ? '#007bab' : 'var(--primaryDark)'}"></span>
      </confirm-button>
  </bb-common-footer>
</ng-template>
<!-- Added by Sainath T,. on 29-09-20- End-->