<section class="content-header">
    <h4 translate class="subheader-title">
        <span class="subheader-icon fal fa-table"></span> Project 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="dataTables_length" id="datatable_length">
         <button type="button" (click)="openProjectModal(projectTemplate,'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 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 class="table-responsive">
      <table class="table table-bordered table-condensed table-hover table-striped">
        <thead>
          <tr class="headings">
            <th style="width:60px">#</th>
            <th *ngIf="readOnly==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('projectcode')">
              Project Code
              <i *ngIf="key =='projectcode'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <th class="pointer" (click)="sort('projectname')">
              Project Name
              <i *ngIf="key =='projectname'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <th class="pointer" (click)="sort('projectlocation')">
              Project Location
              <i *ngIf="key =='projectlocation'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <th class="pointer" (click)="sort('description')">
              Description
              <i *ngIf="key =='description'" 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('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 projectList| orderBy: key : reverse |filter:searchText|paginate: { itemsPerPage: itemsPerPage, currentPage: p};let i = index">
            <td>{{itemsPerPage * (p - 1) + i + 1}}</td>
            <td *ngIf="readOnly==true">                          
              <span class="fal fa-pencil blue" style="cursor:pointer;" (click)="openProjectModal(projectTemplate,'update',item)"
                title="Edit"  *ngIf="edit==true"></span>&nbsp;&nbsp;
              <span  class="img-active" style="cursor:pointer;" (click)="statusChange(item,'deactivate');"
                title="Active" *ngIf="item.active==1 && delete==true"></span>
              <span  class="img-inactive" style="cursor:pointer;" (click)="statusChange(item,'activate');"
                title="Inactive" *ngIf="item.active!=1 && delete==true"></span>
            </td>
            <td>{{item.projectcode}}</td>
            <td>{{item.projectname}}</td>
            <td>{{item.projectlocation}}</td> 
            <td>{{item.description}}</td>            
            <td>{{item.startdate}}</td>
            <td>{{item.enddate}}</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="projectList.length==0 || (projectList |filter:searchText).length === 0">
            <td colspan="12" style="text-align:center;">No Records Found</td>
          </tr>
        </tbody>
      </table>
      <div *ngIf="projectList && projectList.length!=0" class="pull-right">
        <pagination-controls (pageChange)="p = $event"></pagination-controls>
      </div>
    </div>
  </div>

  <div class="row">
     <ng-template #projectTemplate>
      <div class="modal-content" id="mainNgCnt"  ngDraggable [handle]="dragHandle">  <!--[handle]="dragHandle"-->
        <div class="modal-header" style="cursor:move" #dragHandle>
          <h4 class="modal-title pull-left" *ngIf="operation=='add'">Add New Project</h4>
          <h4 class="modal-title pull-left" *ngIf="operation=='update'">Edit Project</h4>
          <button type="button" class="close pull-right" aria-label="Close" (click)="projectModalRef.hide()">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form [formGroup]="projectForm" (ngSubmit)="Post(projectForm.value);">
            <input type="hidden" name="projectid" formControlName="projectid" />
            <table class="table">
              <tr>
                <td>
                  <div class="form-group row">
                    <label class="col-md-3">Project Code<span style="color:red;">*</span>
                    </label>
                    <div class="col-md-9">
                    <input type="text" trim placeholder="Project Code" 
                    name="projectcode" formControlName="projectcode" class="form-control" />
                    <div *ngIf="submitted && g.projectcode.errors" class="invalid-feedback">
                      <div *ngIf="g.projectcode.errors.required" class="errormsg">Project Code is required</div>
                    </div> 
                  </div>
                  </div> 

                </td>
              </tr>
              <tr>
                <td>
                    <div class="form-group row">
                        <label class="col-md-3">Project Name<span style="color:red;">*</span>
                        </label>
                        <div class="col-md-9">
                        <input type="text" trim placeholder="Project Name"
                      name="projectname" formControlName="projectname" class="form-control" />
                    <div *ngIf="submitted && g.projectname.errors" class="invalid-feedback">
                      <div *ngIf="g.projectname.errors.required" class="errormsg">Project Name is required</div>
                    </div>
                  </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                    <div class="form-group row">
                        <label class="col-md-3">Customer Name<span style="color:red;">*</span> 
                        </label>
                        <div class="col-md-9">
                    <select class="form-control" id="ddlCustomer" (change)="oncustomerChanged($event);" formControlName="customerid" name="customerid">
                        <option value="0" >--Select--</option>
                        <option *ngFor="let b of activeCustomerList" [value]="b.customerid">
                          {{b.customername}}
                      </select>                  
                  </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                    <div class="form-group row">
                        <label class="col-md-3">Customer Contact<span style="color:red;">*</span> 
                        
                        </label>
                        <div class="col-md-9">
                    <select class="form-control" id="ddlCustomerContact" (change)="onCustomerContactChanged($event);" formControlName="customercontactid" name="customercontactid" >
                        <option value="0" >--Select--</option>
                        <option *ngFor="let b of activeCustomerContactList" [value]="b.customercontactid">
                          {{b.name}}
                      </select>                     
                  </div> 
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                    <div class="form-group row">
                        <label class="col-md-3">Project Location</label>
                        <div class="col-md-9">
                        <input type="text" trim placeholder="Project Location"
                      name="projectlocation" formControlName="projectlocation" class="form-control" />                  
                    </div>       
                    </div>           
                </td>
              </tr>
              <tr>
                <td>
                    <div class="form-group row">
                        <label class="col-md-3">Project Type</label>
                        <div class="col-md-9">
                        <input type="text" trim placeholder="Project Type"
                      name="project_type" formControlName="project_type" class="form-control" />                  
                    </div>                  
                    </div>
                </td>
              </tr>
              <tr>
                <td>
                    <div class="form-group row">
                        <label class="col-md-3">Description</label>
                        <div class="col-md-9">
                        <input type="text" trim placeholder="Enter Description"
                      name="description" formControlName="description" class="form-control" />  
                      </div>                  
                  </div>
                </td>
              </tr>               
              <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>
              <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"  class="btn btn-sm btn-outline-primary waves-effect waves-themed pull-rightt" >
                      <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>
  </div>  
</section>
<ngx-spinner bdColor="rgba(255, 255, 255, 0.8)" size="default" type="line-scale-party" [fullScreen]="false">
</ngx-spinner>
