<section class="content-header">
  <h4 translate class="subheader-title">
      <span class="subheader-icon fal fa-tasks"></span>&nbsp;Job Master
  <small> </small>
</h4>
</section>
<!--<div class="row pull-right">
    <app-helpdesk [jobId]="sendjobId" [pageName]="sendPageName"></app-helpdesk>
  </div>-->
<section class="content">
<div class="box">
  <div class="box-header with-border">
    <div class="row">
      <div class="col-md-2"  id="datatable_length">        
          <button type="button" *ngIf="add==true" (click)="openjobModal(jobTemplate,'add')"
          class="btn btn-outline-primary waves-effect waves-themed btn-sm">
               <span class="fal fa-plus"></span>&nbsp; Add New
       
          </button>         
      </div>
      <div class="col-md-5">
        <div class="form-inline pull-right">
          <div class="form-group">
            <label>Product Type: <span class="required">*</span>
            </label>
            <div class="multi_select_col" style="width: 50% !important;">
              <ng-multiselect-dropdown [placeholder]="'Select The Product Type...'" [data]="jobProductTypeList"
                textField="project_subtitle" [settings]="_ddlProjecttypeSettings"
                name="ddljobproducttype" [(ngModel)]="_userselectedItems" (onDeSelect)="onItemDeSelect($event)"
                (onSelect)="onItemSelect($event);" (onSelectAll)="onSelectAll($event)"
                (onDeSelectAll)="onDeSelectAll($event)">
              </ng-multiselect-dropdown>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-2">
        <div class="form-inline pull-right" >
        <input type="checkbox" (change)="selectarchivejob($event)"  style=" margin-top: 4px;">
        <label class="control-label" style="margin-top: 6px !important;">
            <span>Archive</span> 
           </label> 
        </div>
      </div>
      <div class="col-md-3 text-right">
        <div class="form-inline pull-right">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Job 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>
        </div>
        </div>
      </div>
    </div>
  </div>
  <div class="box-body padding-15">
    <div class="table-responsive">
      <table class="table table-bordered table-condensed table-striped 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('projectname')">
              Project Code
              <i *ngIf="key =='projectname'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>

            <th class="pointer" (click)="sort('project_subtitle')">
              Product Type
              <i *ngIf="key =='project_subtitle'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>

            <th class="pointer" (click)="sort('jobno')">
              Job No
              <i *ngIf="key =='jobno'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>

            <th class="pointer" (click)="sort('title')">
              Title
              <i *ngIf="key =='title'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <th class="pointer" (click)="sort('isbn')">
              ISBN
              <i *ngIf="key =='isbn'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <th class="pointer" (click)="sort('startdate')">
              Start Date
              <i *ngIf="key =='startdate'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>

            <th class="pointer" (click)="sort('enddate')">
              End Date
              <i *ngIf="key =='enddate'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <th class="pointer" (click)="sort('jobstatus')">
              Job Status
              <i *ngIf="key =='jobstatus'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <th class="pointer" (click)="sort('isarchieve')">
              Archive Status
              <i *ngIf="key =='isarchieve'" 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 jobs| 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)" style="text-align: center;">
             <!--  <span class="fal fa-pencil blue" style="cursor:pointer;" (click)="moveToJobDefinition(item);"
                title="Edit" *ngIf="edit==true"></span>&nbsp;&nbsp;
              <span class="fal fa-user green" style="cursor:pointer;" (click)="openlotModal(lotTemplate,item);"
                title="Add Chapter" *ngIf="edit==true"></span>-->
                &nbsp;&nbsp;<span class="fal fa-trash red" style="cursor: pointer;" (click)="jobdeteleModal(item);" 
                title="Delete Job"> 
                </span>
            </td>
            <td>{{item.projectname}}</td>
            <td>{{item.project_subtitle}}</td>
            <td>{{item.jobno}}</td>
            <td>{{item.title}}</td>
            <td>{{item.isbn }}</td>
            <td>
              <span *ngIf="item.isdaterequired==true"> {{item.startdate | date:'dd-MM-yyyy'}}</span>
            </td>
            <td>
              <span *ngIf="item.isdaterequired==true"> {{item.enddate | date:'dd-MM-yyyy'}}</span>
            </td>
            <td>
              <span *ngIf="item.jobstatus == 'R'">Ready for Production</span>
              <span *ngIf="item.jobstatus == 'P'">Process</span>
              <span *ngIf="item.jobstatus == 'C'">Completed</span>
              <span *ngIf="item.jobstatus == 'M'">Bypass</span>
              <span *ngIf="item.jobstatus == 'F'">Reverse</span>
              <span *ngIf="item.jobstatus == 'B'">BackForward</span>
              <span *ngIf="item.jobstatus == 'H'">Hold</span>
            </td>
            <td>
              <span *ngIf="item.isarchieve == '1'">True</span>
              <span *ngIf="item.isarchieve == null">False</span>
              
            </td>
            <td>
              <span> {{item.createdbyname}}</span>
            </td>
            <td>
              <span> {{item.createdon | date:'dd-MM-yyyy'}}</span>
            </td>
            <td>
              <span> {{item.updatedbyname }}</span>
            </td>
            <td>
              <span> {{item.updatedon | date:'dd-MM-yyyy'}}</span>
            </td>
          </tr>
          <tr *ngIf="jobs.length==0 || (jobs |filter:searchText).length === 0">
            <td colspan="14" style="text-align:center;">No Records Found</td>
          </tr>

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

<ng-template #jobTemplate>
  <div class="modal-content" id="mainNgCnt" ngDraggable [handle]="dragHandle">
    <div class="modal-header" style="cursor:move;" #dragHandle>
      <h4 *ngIf="operation=='add'">Add New Job</h4>
      <h4 *ngIf="operation=='update'">Edit Job</h4>
      <button type="button" class="close pull-right" aria-label="Close" (click)="jobModalRef.hide()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="custom_body">

      <form [formGroup]="jobForm" (ngSubmit)="Post(jobForm.value)">
        <input type="hidden" name="jobid" formControlName="jobid" />
        <div class="form-group row">
          <label class="col-md-4 control-label">
            Project Code<span style="color:red;">*</span>
          </label>
          <div class="col-md-8">
            <select formControlName="projectid" id="projectid" class="form-control" (change)="onchangeproject()">
              <option value="0">Select Project Code</option>
              <option *ngFor="let i of projectsUnique" value="{{i.projectid}}">
                {{i.projectname}}
              </option>
            </select>
            <div *ngIf="submitted && g.projectid.errors" class="invalid-feedback">
              <div *ngIf="g.projectid.errors.required" class="errormsg">Project Code is required</div>
            </div>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-md-4 control-label">
            Product Type<span style="color:red;">*</span>
          </label>
          <div class="col-md-8">
            <!--<input type="text" trim placeholder="Enter tooltip" name="tooltip" formControlName="projectdefinitionid" class="form-control" />-->
            <select formControlName="projectdefinitionid" id="projectdefinitionid" class="form-control"
              (change)="onChangeProjectDefinition()">
              <option value="0">Select Product Type</option>
              <option *ngFor="let projectdefinition of projectdefinitions"
                value="{{projectdefinition.projectdefinitionid}}">
                {{projectdefinition.project_subtitle}}
              </option>
            </select>
            <div *ngIf="submitted && g.projectdefinitionid.errors" class="invalid-feedback">
              <div *ngIf="g.projectdefinitionid.errors.required" class="errormsg">Product Type is required</div>
            </div>
          </div>
        </div>
        <!-- <div class="form-group row">
          <label class="col-md-4 control-label">
            State Code<span style="color:red;">*</span>
          </label>
          <div class="col-md-8">
            <select formControlName="statecode" id="statecode" class="form-control" (change)="onChangestatecode()">
              <option value="0">Select State Code</option>
              <option *ngFor="let i of statecode" value="{{i.statecodeid}}">
                {{i.statename}}
              </option>
            </select>
            <div *ngIf="submitted && g.statecode.errors" class="invalid-feedback">
              <div *ngIf="g.statecode.errors.required" class="errormsg">State Code is required</div>
            </div>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-md-4 control-label">
            Frequency<span style="color:red;">*</span>
          </label>
          <div class="col-md-8">
            <select formControlName="frequency" id="frequency" class="form-control" (change)="onChangefrequency()">
              <option value="0">Select Frequency</option>
              <option *ngFor="let i of frequency" value="{{i.frequencyid}}">
                {{i.frequencytype}}
              </option>
            </select>
            <div *ngIf="submitted && g.frequency.errors" class="invalid-feedback">
              <div *ngIf="g.frequency.errors.required" class="errormsg">Frequency is required</div>
            </div>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-md-4 control-label">
            Job No<span style="color:red;">*</span>
          </label>
          <div class="col-md-8">
            <input type="text" trim placeholder="Job No" name="jobno" formControlName="jobno" class="form-control" />
          </div>
        </div>
        <div class="form-group row">
          <label class="col-md-4 control-label">
            Title
          </label>
          <div class="col-md-8">
            <input type="text" trim placeholder="Title" name="title" formControlName="title" class="form-control" />
          </div>
        </div> -->
        <div *ngIf="projectid_not_unique != projectdefinitionid && projectdefinitionid ">
        <div class="form-group row">
          <label class="col-md-4 control-label">Upload Excel<span style="color:red;">*</span>
          </label>
          <div class="col-md-8">
              <input class="col-sm-10" style="padding-right: 0px;" type="file"  
                      files-input (change)="fileuploadchange(i,$event)" formControlName="jobinputfile" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
          </div>
        </div>
        <div class="form-group row" *ngIf="exceltemplate">
          <label class="col-md-4 control-label">Download Excel
          </label>
          <div class="col-md-8"> 
             <Button type="button" style="padding-right: 6px;margin-left: 12px;" class="btn-outline-primary" (click)="downloadexcel_template()">Download</Button>
          </div>
        </div>
        <div class="form-group row">
          <span class="col-md-12 control-label" style="color:red; font-weight: bold;">Instruction: Upload only .xlsx or .xls or .csv files</span>
        </div>
        </div>
        <div *ngIf="projectid_not_unique == projectdefinitionid">
          <div class="form-group row">
            <label class="col-md-4 control-label">
              No. of lots<span style="color:red;">*</span>
            </label>
            <div class="col-md-8">
              <input type="number" trim placeholder="Enter no. of lot" name="tooltip" formControlName="nooflots" class="form-control" min="1" />
              <div *ngIf="submitted && g.nooflots.errors" class="invalid-feedback">
                <div *ngIf="g.nooflots.errors.required" class="errormsg">No. of lots is required</div>
                <div *ngIf="g.nooflots.errors.min && g.nooflots.errors.min.actual < 0" class="errormsg">Value must be non-negative</div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="form-group row">
          <label class="col-md-4 control-label">
            Start & End Date
          </label>
          <div class="col-md-8">
            <input type="checkbox" [checked]=false formControlName="isdaterequired">
            <label>&nbsp;Is Required</label>
            <input type="text" *ngIf="g.isdaterequired.value" placeholder="Start & End Date" class=" form-control"
              (bsValueChange)="onValueChange($event)" id="selectedDaterange" bsDaterangepicker
              formControlName="selectedDaterange" [bsConfig]="{ adaptivePosition: true,dateInputFormat:'MM/DD/YYYY'}">
            <input type="text" *ngIf="col.key == 'createdon'" placeholder="Date range" style="cursor: pointer;" class="btn btn-default btn-xs m-l-15"
                  (ngModelChange)="postDateChange($event, col.key)" [(ngModel)]=col.search bsDaterangepicker [bsConfig]="{ adaptivePosition: true, dateInputFormat:'MM/DD/YYYY'}">
          </div>
        </div> -->
        <div class="form-group pull-right">
          <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="m-r-10 btn btn-sm btn-outline-primary waves-effect waves-themed pull-right"
            [disabled]="jobForm.invalid">
            <span *ngIf="operation=='add' && add==true" >Add</span>
            <span *ngIf="operation!='add' && edit==true">Update</span>
          </button>
        </div>
        <!--
              <td>
                <div class="form-group row">
                  <label class="labelfont" for="parentjobid">Parent job</label>
                  <select formControlName="parentjobid" id="parentjobid" class="form-control">
                    <option value="0">Select parent job</option>
                    <option *ngFor="let job of parentjobs; let i = index" [value]="job.jobid">
                      {{job.job}}
                    </option>
                  </select>
                </div>
              </td>-->
        <!--<tr *ngIf="operation=='update'">
              <td colspan="2">
                <div class="form-group row">
                  <input type="checkbox" (change)="ChangeActive($event)" name="active" formControlName="active" /><label>Active</label>
                </div>
              </td>
            </tr>-->

      </form>
    </div>
  </div>
</ng-template>
</div>

<div class="row">

<ng-template #lotTemplate>
  <!-- <app-addlot [job]="job" [lotModalRef]="lotModalRef"></app-addlot> -->
  <app-addlotwithexcel [job]="job" [lotModalRef]="lotModalRef"></app-addlotwithexcel>
</ng-template>
</div>
<div class="row">
  <ng-template #ErrorPopUpTemplate style="width:80%">
     <!-- <div class="modal-content" ngDraggable [handle]="dragHandle" > -->
        <div class="modal-header" style="cursor:move;" #dragHandle>
         <h4 class="modal-title">Message</h4>
         <button type="button" class="close pull-right" aria-label="Close" (click)="closeerrorpopup()">
         <span aria-hidden="true">&times;</span>
         </button>
      </div>
      <div class="modal-body">
       <div style="visibility:visible">
         <div class="form-group">
{{Errormsg}}
       </div>
       </div>
       <br>
      <button type="button" style="float: right;" class="btn btn-outline-primary waves-effect waves-themed btn-sm" (click)="closeerrorpopup()" ng-dblclick="return false"> Ok</button>
      </div>
       <!-- </div> -->
    </ng-template>
 </div>
 <ngx-spinner bdColor = "rgba(255, 255, 255, 0.8)" size = "small" color = "#000000" type = "ball-fall" [fullScreen] = "false"><p style="color: black;" > Loading... </p></ngx-spinner>