<section class="content-header">
  <h4 translate class="subheader-title">
      <span class="subheader-icon fal fa-table"></span>&nbsp;Job Meta Master
  <small> </small>
</h4>
</section> 
<section class="content">
  <div class="box padding-15" style="display: block;">
    <div class="row">
      <div class="col-sm-9">
        <div class="" id="datatable_length">
          <button type="button" *ngIf="add==true" (click)="openJobMetaModal(jobmetaTemplate,'add')"
            class="btn btn-sm btn-outline-primary waves-effect waves-themed"><span class="fal fa-plus"></span>&nbsp;Add New</button>
          &nbsp; &nbsp; <a class="btn btn-sm btn-outline-primary waves-effect waves-themed" href="#/dashboard">
            <i class="fal fa-chart-area"></i>  Go back to dashboard</a>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="JobMeta Name" [(ngModel)]="searchText"
            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>
        <!--<input id="txtPending" type="text" class="form-control table-search" [(ngModel)]="searchText" placeholder="Search" aria-label="Search">-->
      </div>
    </div>
    <div class="table-responsive">
      <table class="table jambo_table table-striped table-condensed table-hover">
        <thead>
          <tr class="headings">
            <th style="width:60px">#</th>
            <th *ngIf="(edit==true || delete==true)" style="width:110px;">
              <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('project_subtitle')">
              Project Name
              <i *ngIf="key =='project_subtitle'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <th class="pointer" (click)="sort('jobmeta')">
              JobMeta
              <i *ngIf="key =='jobmeta'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
           <!-- <th class="pointer" (click)="sort('isexcelmeta')">
              Excel Meta
              <i *ngIf="key =='isexcelmeta'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <th class="pointer" (click)="sort('isrequired')">
              Required
              <i *ngIf="key =='isrequired'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <th class="pointer" (click)="sort('inputtype')">
              Input Type
              <i *ngIf="key =='inputtype'" 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 =='createddate'" 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 =='updateddate'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <!--<th>Status</th>-->
          </tr>
        </thead>
        <tbody>
          <tr
            *ngFor="let item of jobmetas| orderBy: key : reverse |filter:searchText|paginate: { itemsPerPage: itemsPerPage, currentPage: p};let i = index">
            <td>{{itemsPerPage * (p - 1) + i + 1}}</td>
            <td *ngIf="(edit==true || delete==true)">
              <span class="fal fa-pencil blue" style="cursor:pointer;"
                (click)="openJobMetaModal(jobmetaTemplate,'update',item)" title="Edit"
                *ngIf="edit==true"></span>&nbsp;&nbsp;
              <span *ngIf="item.active==1 && delete==true" class="img-active" style="cursor:pointer;"
                (click)="OpenConfirmTemplate(item)" title="Active"></span>
              <span *ngIf="item.active==0 && delete==true" class="img-inactive" style="cursor:pointer;"
                (click)="OpenConfirmTemplate(item)" title="Inactive"></span>
            </td>
            <td>{{item.project_subtitle}}</td>
            <td>{{item.jobmeta}}</td>
            <!-- <td>{{item.isexcelmeta}}</td>
           <td>{{item.isrequired}}</td>
            <td>{{item.inputtype}}</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="jobmetas.length==0 || (jobmetas |filter:searchText).length === 0">
            <td colspan="7" style="text-align:center;">No Records Found</td>
          </tr>
        </tbody>
      </table>
      <div *ngIf="jobmetas && jobmetas.length!=0" class="pull-right">
        <pagination-controls (pageChange)="p = $event"></pagination-controls>
      </div>
    </div>
  </div>
  <div class="row">
    <ng-template #jobmetaTemplate>
      <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="fal fa-plus"></span>&nbsp;Add New
            JobMeta</h4>
          <h4 class="modal-title pull-left" *ngIf="operation=='update'"><span class="fal fa-edit"></span>&nbsp;Edit
            JobMeta</h4>
          <button type="button" class="close pull-right" aria-label="Close" (click)="jobmetaModalRef.hide()">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
          <form [formGroup]="jobmetaForm" (ngSubmit)="Post(jobmetaForm.value)">
            <div class="modal-body" style="max-height: 60vh; overflow-y: auto;">
            <input type="hidden" name="jobmetaid" formControlName="jobmetaid" />
            <table class="table">
             
              <tr>
                <td>
                  <div class="form-group">            
                    <label class="labelfont" for="projectdefinitionid">Select Project<span style="color:red;">*</span></label>
                    <select formControlName="projectdefinitionid" id="projectdefinitionid" class="form-control">
                      <option value="0">Select Project</option>
                      <option *ngFor="let project of _projectlist; let i = index" [value]="project.projectdefinitionid">
                        {{project.project_subtitle}}
                      </option>
                    </select>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="form-group">
                    <label>JobMeta</label><span style="color:red;">*</span><input type="text" trim
                      placeholder="JobMeta Name" name="jobmeta" formControlName="jobmeta"
                      class="form-control" />
                    <div *ngIf="submitted && g.jobmeta.errors" class="invalid-feedback">
                      <div *ngIf="g.jobmeta.errors.required" class="errormsg">JobMeta Name is required
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
              
              <tr>
                <td>
                   <div class="form-group">            
                   <label class="labelfont" for="inputtype">Select Input Type<span style="color:red;">*</span></label>
                   <select  id="inputtype" class="form-control" formControlName="inputtype" (change)="onchangeinputtype(operation)">
                   <option value="0" selected>Select Inputtype</option>
                   <option value="text">Textbox</option>
                  <option value="dropdown">Drop down</option>
                  <option value="date">Date</option>
                  <option value="checkbox">Check box</option>
                  </select>
                   </div>
                </td>
              </tr>
              <tr *ngIf="metadataselectinputoptionflag==true">
                <td>
                  <div class="form-group">            
                    <label class="labelfont" for="selectoption">Enter Input Option<span style="color:red;">*</span></label>
                    <table class="table table-bordered table-striped">
                      <tr style="text-align: center;background-color: cornsilk;">
                        <td>#</td>
                        <td>
                          <input id="selectoption" class="form-control" formControlName="selectoption" style="border-style: outset;" placeholder="Enter Option Value"/>
                        </td>
                        <td>
                          <button type="button" class="btn btn-sm btn-outline-primary waves-effect waves-themed" (click)="addselectoptionlist();"><i class="fal fa-plus blue"></i></button>
                        </td>
                      </tr>
                      <tr *ngFor="let item of selectoptionlist;let i = index" style="text-align: center;background-color: ghostwhite;">
                        <td>{{i+1}}</td>
                        <td><span>{{item.Fieldselectoption}}</span></td>
                        <td>
                          <button type="button" class="btn btn-sm btn-outline-warning waves-effect waves-themed" (click)="updateselectoptionlist(item);"><i class="fa fa-trash"></i></button>
                        </td>
                      </tr>
                    </table>
                  </div>
                </td>
              </tr>
<tr>
<td colspan="2">
  <div class="form-group">
  
      <input type="checkbox" trim placeholder="isrequired" name="isrequired" formControlName="isrequired" /> <label>
        Is Required
      </label>
  </div>
</td>
</tr>
             <tr>
              <td colspan="2">
              <div class="form-group">
              
                  <input type="checkbox" trim placeholder="isexcelmeta" name="isexcelmeta" formControlName="isexcelmeta" /> <label>
                    Is Excel Meta
                  </label>
          
              </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>
            </table>
          </div>
            <div class="modal-body">
              <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]="jobmetaForm.invalid">
                <span *ngIf="operation=='add' && add==true">Add</span>
                <span *ngIf="operation!='add' && edit==true">Update</span>
              </button>
              <br>
              <br>
            </div>
          </form>
      </div>
    </ng-template>
  </div>
</section>