<section class="content-header">
    <h4 translate class="subheader-title">
        <span class="subheader-icon fal fa-table"></span> Project Followup
    <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="dataTables_length" id="datatable_length">
         <button type="button" (click)="openProjectModal(projectflowTemplate,'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-3">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Project Followup"  [(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 class="table-responsive">
        <table
        class="table table-striped table-responsive-md table-bordered table-condensed">
        <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>
                 <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('workflow')">
                 Workflow
                 <i *ngIf="key =='remaindertype'"
                    class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
              <th class="pointer"
                 (click)="sort('remaindertype')">
                 Followup Type
                 <i *ngIf="key =='remaindertype'"
                    class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
              <th class="pointer"
                 (click)="sort('mailtemplatename')">
                 Mail Template
                 <i *ngIf="key =='mailtemplatename'"
                    class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
              <th (click)="sort('emailcc')">
               Email cc
               <i *ngIf="key =='emailcc'"
                  class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
              <th class="pointer"
                 (click)="sort('remainderorder')">
                 Remainder Order
                 <i *ngIf="key =='remainderorder'"
                    class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
              <th class="pointer"
                 (click)="sort('followupinterval')">
                 Followup Interval
                 <i *ngIf="key =='followupinterval'"
                    class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
              <th class="pointer"
                 (click)="sort('intervaltype')">
                 Interval type
                 <i *ngIf="key =='intervaltype'"
                    class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
              <th class="pointer"
                 (click)="sort('lastmailsenton')">
                  EMail Senton
                 <i *ngIf="key =='lastmailsenton'"
                    class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
           </tr>
        </thead>
        <tbody>
           <tr
              *ngFor="let item of projectfollowups| orderBy: key : reverse |filter:stageflowsearchText |paginate: { itemsPerPage: itemsPerPage, currentPage: p};let i = index">
              <td>{{itemsPerPage * (p - 1) + i + 1}}</td>
              <td *ngIf="(edit==true || delete==true)">
                 <span class="fa fa-pencil blue"
                 style="cursor:pointer;"
                 (click)="openProjectModal(projectflowTemplate,'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.workflow}}</td>
              <td>{{item.remaindertype}}</td>
              <td>{{item.mailtemplatename}}</td>
              <td title={{item.ccemail}}>
               {{item.ccemail | slice:0:15}}... 
            </td>
              <td>{{item.remainderorder}}</td>
              <td>{{item.followupinterval}}</td>
              <td>{{item.intervaltype}}</td>
              <td>{{item.lastmailsenton}}</td>
              <!--<td><span *ngIf="item.active==1" style="color:green">Active</span><span style="color:red" *ngIf="item.active==0">Inactive</span></td>-->
           </tr>
           <tr
              *ngIf="projectfollowups.length==0 || (projectfollowups |filter:searchText).length === 0">
              <td colspan="7" style="text-align:center;">No
                 Records
                 Found
              </td>
           </tr>
        </tbody>
     </table>
     <div *ngIf="projectfollowups && projectfollowups.length!=0"
        class="pull-right">
        <pagination-controls (pageChange)="p = $event">
        </pagination-controls>
     </div>
    </div>
  </div>

  <div class="row">
    <ng-template #projectflowTemplate>
       <div class="modal-content" id="mainNgCnt">
          <div class="custom-modal-header" style="cursor:move;" #dragHandle>
             <h4 class="" *ngIf="operation=='add'">Add Project Flow</h4>
             <h4 class="" *ngIf="operation=='update'">Edit Project Flow</h4>
             <button type="button" class="close pull-right" aria-label="Close" (click)="projectModalRef.hide()">
             <span aria-hidden="true">&times;</span>
             </button>
          </div>
          <div class="custom_body">
             <form [formGroup]="projectForm" (ngSubmit)="SaveProject(projectForm.value)">
             <input type="hidden" name="projectfollowupid" formControlName="projectfollowupid" />
             <div class="form-group">
               <label class="col-md-4 control-label">Workflow
               <span class="required">*</span>
               </label>
               <div class="col-md-8">
                  <select class="form-control" required formControlName="projectdefinitionid"
                  name="projectdefinitionid">
                  <option value="0">Select</option>
                  <option *ngFor="let m of projectdefinitions" [value]="m.projectdefinitionid">
                  {{m.project_subtitle}}</option>
               </select>
               </div>
            </div>
             <div class="form-group">
                <label class="col-md-4 control-label">Followup Type
                <span class="required">*</span>
                </label>
                <div class="col-md-8">
                   <select class="form-control" required formControlName="remaindertype" name="remaindertype">
                      <option value="Select">Select</option>
                      <option value="NoAction">No Action</option>
                      <option value="Followup">Follow up</option>
                      <option value="OverDue">Over Due</option>
                   </select>
                </div>
             </div>
             <div class="form-group">
                <label class="col-md-4 control-label">Mail Template
                <span class="required">*</span>
                </label>
                <div class="col-md-8">
                   <select class="form-control" required formControlName="mailtemplateid"
                      name="mailtemplateid">
                      <option value="0">Select</option>
                      <option *ngFor="let m of mailTemplates" [value]="m.mailtemplateid">
                      {{m.mailtemplatename}}</option>
                   </select>
                </div>
             </div>
             <div class="form-group">
                <label class="col-md-4 control-label">Email Cc
                <span class="required">*</span>
                </label>
                <div class="col-md-8">
                   <ng-multiselect-dropdown [placeholder]="'Select the required mail group...'"
                   [data]="userlist" textField=email [settings]="_dropdownSettings"
                   formControlName="emailcc" name="emailcc" [(ngModel)]="_userselectedItems"
                   (onDeSelect)="onItemDeSelect($event)" (onSelect)="onItemSelect($event);">
                   </ng-multiselect-dropdown>
                </div>
             </div>
             <div class="form-group">
                <label class="col-md-4 control-label">
                Remainder Order
                <span class="required">*</span>
                </label>
                <div class="col-md-8">
                   <input type="number" trim placeholder="Remainder Order" name="remainderorder" min=1
                      formControlName="remainderorder" class="form-control" oninput="validity.valid||(value='');" />
                </div>
             </div>
             <div class="form-group">
                <label class="col-md-4 control-label">
                Followup Interval Type
                <span class="required">*</span>
                </label>
                <div class="col-md-8">
                   <select class="form-control" required formControlName="intervaltype" name="intervaltype">
                      <option value="0">Select</option>
                      <option value="Hours">Hours</option>
                      <option value="Days">Days</option>
                      <option value="Weeks">Weeks</option>
                   </select>
                </div>
             </div>
             <div class="form-group">
                <label class="col-md-4 control-label">
                Followup Interval
                <span class="required">*</span>
                </label>
                <div class="col-md-8">
                   <input type="number" trim placeholder="Interval" name="followupinterval" min=1
                      formControlName="followupinterval" class="form-control" oninput="validity.valid||(value='');" />
                </div>
             </div>
             <div class="form-group">
                <label class="col-md-4 control-label">
                </label>
                <div class="col-md-8">
                   <input type="checkbox" name="active" (change)="ChangeActive($event)"
                      formControlName="active" /><label>Active</label>
                </div>
             </div>
             <div class="button-group">
                <button type="button" mat-button class="btn btn-info btn-xs pull-right m-r-10"
                   (click)="cancelForm();">Cancel</button>
                <button type="submit" mat-button class="btn btn-info btn-xs pull-right m-r-10" [disabled]="projectForm.invalid || projectForm.value.emailcc == 0 || projectForm.value.intervaltype == 0 || 
                projectForm.value.mailtemplateid == 0 || projectForm.value.remaindertype ==  'Select'">
                <span>Save</span></button>
                <!-- <button type="submit" class="btn-primary btn pull-right" >                                    
                   <span >Save&Continue</span></button> -->
             </div>
             </form>
          </div>
       </div>
    </ng-template>
 </div> 
</section>
<ngx-spinner bdColor="rgba(255, 255, 255, 0.8)" size="default" type="line-scale-party" [fullScreen]="false">
</ngx-spinner>
