<section class="content-header">
    <h2 translate class="subheader-title">
        <span class="subheader-icon fal fa-users"></span> Chart Value Master
    <small> </small>
    </h2>
</section>
  <section class="content">
<div class="box padding-15" style="display: block;">
  <div class="row">
    <div class="col-sm-8 col-md-9">
      <div class="dataTables_length" id="datatable_length">
       <button  type="button" (click)="openchartvalueModal(Chartvaluetemplate,'add')" class="btn btn-outline-primary waves-effect waves-themed btn-sm">
       <span class="fal fa-plus"></span>&nbsp; Add New</button>
       &nbsp; &nbsp; <a href="#/dashboard" class="btn btn-outline-primary waves-effect waves-themed btn-sm">
         <i class="fal fa-chart-area"></i> Go back to dashboard</a>
      </div>
      
    </div>
    <div class="col-sm-4 col-md-3">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search..." [(ngModel)]="searchText" [ngModelOptions]="{standalone: true}" aria-label="Search">
        <span class="input-group-append">
            <button class="btn btn-primary waves-effect waves-themed btn-sm" type="button">
              <span class="fal fa-search"></span>
            </button>
        </span>
      </div>
    </div>
  </div>
  <div class="box-body">
  <div class="table-responsive">
    <table class="table table-bordered table-condensed table-hover table-striped">
      <thead class="headings">
        <tr>
          <th class="sno_width">#</th>
          <th class="action_width" style="width: 100px;">
            <label style="font-weight:bold;margin-bottom:0px;">Action</label>&nbsp;&nbsp;
           
            <span *ngIf="showall==false" class="img-showactive" style="cursor:pointer;" (click)="getactiveinactive(false)" title="Show all"></span>
            <span *ngIf="showall==true" class="img-showall" style="cursor:pointer;" (click)="getactiveinactive(true)" title="Show only active"></span>
          </th>
          <th class="pointer" (click)="sort('projection')">
            Projection
            <i *ngIf="key =='errorcategory'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
          </th>
          <th class="pointer" (click)="sort('lcl')">
            LCL
            <i *ngIf="key =='errortype'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
          </th>
          <th class="pointer" (click)="sort('ucl')">
            UCL
            <i *ngIf="key =='errortype'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
          </th>
          <th class="pointer" (click)="sort('stagename')">
            Stage
            <i *ngIf="key =='errortype'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
          </th>
          <th class="pointer" (click)="sort('createdbyname')">
            Created By
            <i *ngIf="key =='createdbyname'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
          </th>
          <th class="pointer" (click)="sort('createdon')">
            Created Date
            <i *ngIf="key =='createdon'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
          </th>
          <th class="pointer" (click)="sort('updatedbyname')">
            Last Modified By
            <i *ngIf="key =='updatedbyname'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
          </th>
          <th class="pointer" (click)="sort('updatedon')">
            Last Modified Date
            <i *ngIf="key =='updatedon'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of chartvaluelst| orderBy: key : reverse |filter:searchText |paginate: { itemsPerPage: itemsPerPage, currentPage: p};let i = index">
          <td>{{itemsPerPage * (p - 1) + i + 1}}</td>
          <td >
            <!-- <span class="fal fa-plus green" style="cursor:pointer;margin-right: 10px;" (click)="callerrorremark(item)">
            </span> -->
            <span class="fal fa-pencil blue" style="cursor:pointer;" (click)="openchartvalueModal(Chartvaluetemplate,'update',item)">
            </span>&nbsp;&nbsp;
            <span *ngIf="item.active==1 " class="img-active" style="cursor:pointer;"
                  (click)="OpenConfirmTemplate(item)" title="Active"></span>
            <span *ngIf="item.active==0 " class="img-inactive" style="cursor:pointer;"
                  (click)="OpenConfirmTemplate(item)" title="Inactive"></span>
          </td>
          <td>{{item.projection}}</td>
          <td>{{item.lcl}}</td>
          <td>{{item.ucl}}</td>
          <td>{{item.stagename}}</td>
          <td>{{item.createdbyname}}</td>
            <td>{{item.createdon | date:'MM-dd-yyyy'}}</td>
            <td>{{item.updatedbyname}}</td>
            <td>{{item.updatedon | date:'MM-dd-yyyy'}}</td>						  
        </tr>
        <tr *ngIf=" chartvaluelst.length==0 || (chartvaluelst |filter:searchText).length === 0">
          <td colspan="11" style="text-align:center;">No Records Found</td></tr>

      </tbody>
    </table>
    <div *ngIf="chartvaluelst && chartvaluelst.length!=0" class="pull-right">
      <pagination-controls (pageChange)="p = $event"></pagination-controls>
    </div>
  </div>
  </div>
</div>
</section>

  <ng-template #Chartvaluetemplate>
    <div class="modal-content" id="mainNgCnt" ngDraggable [handle]="dragHandle">
      <div class="modal-header" style="cursor:move" #dragHandle>
        <h4 class="modal-title pull-left" *ngIf="operation=='add'"><span class="fa fa-plus"></span>&nbsp;Add New Chat value</h4>
        <h4 class="modal-title pull-left" *ngIf="operation=='update'"><span class="fa fa-plus"></span>&nbsp;Edit Chat value</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="clearForm()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
  
        <form [formGroup]="chartvalueForm" (ngSubmit)="Post(chartvalueForm.value)">
          <input type="hidden" name="chartmasterid" formControlName="chartmasterid" />
          <table class="table">
            <tr>
              <td>
                <div class="form-group">
                  <label>Projection</label><span style="color:red;">*</span>
                  <!-- <input type="text" trim placeholder="Error category" name="errorcategory" formControlName="errorcategory" class="form-control" /> -->
                  <input type="number" name="projection" placeholder="Projection" formControlName="projection" class="form-control" >

                  <div *ngIf="submitted && g.chartvaluelst.projection" class="invalid-feedback">
                    <div *ngIf="g.chartvaluelst.projection.required" class="errormsg">Projection is required</div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="form-group">
                  <label>LCL</label><span style="color:red;">*</span>
                  <input type="number" placeholder="LCL" name="lcl" formControlName="lcl" class="form-control" />
                  <div *ngIf="submitted && g.chartvaluelst.lcl" class="invalid-feedback">
                    <div *ngIf="g.chartvaluelst.lcl.required" class="errormsg">LCL Type is required</div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
                <td>
                  <div class="form-group">
                    <label>UCL</label><span style="color:red;">*</span>
                    <input type="number" placeholder="UCL" name="ucl" formControlName="ucl" class="form-control" />
                    <div *ngIf="submitted && g.chartvaluelst.ucl" class="invalid-feedback">
                      <div *ngIf="g.chartvaluelst.ucl.required" class="errormsg">UCL Type is required</div>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="form-group">
                    <label>Stage</label><span style="color:red;">*</span>
                    <select name="stageid" formControlName="stageid" class="form-control" >
                    <option value="0" selected>-- Select Stage --</option>
                    <option [ngValue]="s.stageid" *ngFor="let s of stagelst">{{s.stage}}</option>
                    </select>
                    <div *ngIf="submitted && g.chartvaluelst.stageid" class="invalid-feedback">
                      <div *ngIf="g.chartvaluelst.stageid.required" class="errormsg">Stage Type is required</div>
                    </div>
                  </div>
                </td>
              </tr>
            <tr *ngIf="operation=='update'">
              <td colspan="2">
                <div class="form-group">
                  <input type="checkbox" (change)="ChangeActive($event)" name="active" formControlName="active" /><label>Active</label>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="form-group">
                  <button type="button" class="btn btn-sm btn-outline-warning waves-effect waves-themed pull-right" (click)="clearForm();">Cancel</button>
                  <button type="submit" *ngIf="(edit==true || add==true)" class="btn btn-sm btn-outline-primary waves-effect waves-themed pull-right" [disabled]="chartvalueForm.invalid">
                    <span *ngIf="operation=='add' && add==true">Add</span>
                    <span *ngIf="operation!='add' && edit==true">Update</span>
                  </button>
                </div>
              </td>
            </tr>
          </table>
  
        </form>
  
  
      </div>
    </div>
  </ng-template>