<section class="content-header">
    <h4 translate class="subheader-title">
    <span class="subheader-icon fal fa-table"></span>&nbsp;Application Master
    <small> </small>
  </h4>
</section>
<section class="content">
  <div class="box padding-15 clearfix" style="display: block;">
    <div class="row">
      <div class="col-sm-9">
        <div class="dataTables_length" id="datatable_length">
          <button type="button" *ngIf="add==true" (click)="openApplicationModal(applicationTemplate,'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="Application 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="white-space: nowrap;">
              <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('application')" style="white-space: nowrap;">
              Application
              <i *ngIf="key =='application'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <th class="pointer" (click)="sort('isexe')">Is Exe <i *ngIf="key =='isexe'"
                class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i></th>
            <th class="pointer" (click)="sort('isservice')">Is Service <i *ngIf="key =='isservice'"
                class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i></th>
            <th class="pointer" (click)="sort('iswebapp')">Is Web App <i *ngIf="key =='iswebapp'"
                class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i></th>
            <th class="pointer" (click)="sort('isoutlineconfigtemplate')">Is Out Line Config <i
                *ngIf="key =='isoutlineconfigtemplate'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <th class="pointer" (click)="sort('exepath')">Exe Path <i *ngIf="key =='exepath'"
                class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i></th>
            <th class="pointer" (click)="sort('serviceurl')">Service Url <i *ngIf="key =='serviceurl'"
                class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i></th>
            <th class="pointer" (click)="sort('weburl')">Web Url <i *ngIf="key =='weburl'"
                class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i></th>
            <th class="pointer" (click)="sort('appversion')">App Version <i *ngIf="key =='appversion'"
                class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i></th>
            <th class="pointer" (click)="sort('paramss')">Paramss <i *ngIf="key =='paramss'"
                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 applications| 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)="openApplicationModal(applicationTemplate,'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 style="white-space: nowrap;">{{item.application}}</td>
            <td>
              <span *ngIf="item.isexe == 1" class="glyphicon glyphicon-ok" style="color: green;"></span>
              <span *ngIf="item.isexe != 1" class="glyphicon glyphicon-remove" style="color: mediumvioletred;"></span>
            </td>
            <td>
              <span *ngIf="item.isservice == 1" class="glyphicon glyphicon-ok" style="color: green;"></span>
              <span *ngIf="item.isservice != 1" class="glyphicon glyphicon-remove"
                style="color: mediumvioletred;"></span>
            </td>
            <td>
              <span *ngIf="item.iswebapp == 1" class="glyphicon glyphicon-ok " style="color: green;"></span>
              <span *ngIf="item.iswebapp != 1" class="glyphicon glyphicon-remove"
                style="color: mediumvioletred;"></span>
            </td>
            <td>
              <span *ngIf="item.isoutlineconfigtemplate == 1" class="glyphicon glyphicon-ok"
                style="color: green;"></span>
              <span *ngIf="item.isoutlineconfigtemplate != 1" class="glyphicon glyphicon-remove"
                style="color: mediumvioletred;"></span>
            </td>
            <td>{{item.exepath}} </td>
            <td>{{item.serviceurl}} </td>
            <td>{{item.weburl}} </td>
            <td>{{item.appversion}} </td>
            <td>{{item.paramss}} </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="applications.length==0 || (applications |filter:searchText).length === 0">
            <td colspan="11" style="text-align:center;">No Records Found</td>
          </tr>

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

  </div>

</section>

<ng-template #applicationTemplate>
  <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
        Application</h4>
      <h4 class="modal-title pull-left" *ngIf="operation=='update'"><span class="fa fa-pencil"></span>&nbsp;Edit
        Application</h4>
      <button type="button" class="close pull-right" aria-label="Close" (click)="applicationModalRef.hide()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <form [formGroup]="applicationForm" (ngSubmit)="Post(applicationForm.value)">
        <input type="hidden" name="applicationid" formControlName="applicationid" />

        <div class="form-group row">
          <label class="col-md-3 control-label">
            Application<span style="color:red;">*</span>
          </label>
          <div class="col-md-9">
            <input type="text" trim placeholder="application" name="application" formControlName="application"
              class="form-control" />
          </div>
        </div>
        <div class="form-group row">
          <label class="col-md-3 control-label">
            Exe path
          </label>
          <div class="col-md-9">
            <input type="text" trim placeholder="exepath" name="exepath" formControlName="exepath"
              class="form-control" />
          </div>
        </div>
        <div class="form-group row">
          <label class="col-md-3 control-label">
            Service url
          </label>
          <div class="col-md-9">
            <!-- <input type="text" trim placeholder="serviceurl" name="serviceurl" formControlName="serviceurl"
              class="form-control" /> -->
            <select class="form-control" #Selserviceurlid formControlName="serviceurlid" id="serviceurlid"
              (change)="ChangeUrl(Selserviceurlid,'serviceurl')">
              <option [value]='0'>--Select--</option>
              <option *ngFor="let lst of appurlsservice;" [value]="lst.appurlid">
                {{lst.appurl}}
              </option>
            </select>
          </div>
        </div>
        <div class="form-group" style="padding-top: 20px;" *ngIf='ServiceFeatureselectedItems.length>0'>
          <label class="col-md-3">
            Features
          </label>
          <div *ngFor="let feature of ServiceFeatureselectedItems;let i = index" class="col-md-9">
            <div class="scolumn">
              <input type="checkbox" [checked]="feature.active" id={{feature.mdata}} (change)="ChangeActiveService($event)"
                name={{feature.mdata}}>
              <label for={{feature.mdata}}>{{feature.mdata}}</label><br>
            </div>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-md-3 control-label">
            App version
          </label>
          <div class="col-md-9">
            <input type="text" trim placeholder="appversion" name="appversion" formControlName="appversion"
              class="form-control" />
          </div>
        </div>
        <div class="form-group row">
          <label class="col-md-3 control-label">
            Paramss
          </label>
          <div class="col-md-9">
            <input type="text" trim placeholder="paramss" name="paramss" formControlName="paramss"
              class="form-control" />
          </div>
        </div>
        <div class="form-group row">
          <label class="col-md-3 control-label">
            Web url
          </label>
          <div class="col-md-9">
            <select class="form-control" formControlName="weburlid" #SelWeburlid id="weburlid"
              (change)="ChangeUrl2(SelWeburlid,'weburl')">
              <option [value]='0'>--Select--</option>
              <option *ngFor="let lst of appurlsweb;" [value]="lst.appurlid">
                {{lst.appurl}}
              </option>
            </select>
          </div>
        </div>

        <div class="form-group" style="padding-top: 20px;" *ngIf='WebFeatureselectedItems.length>0'>
          <label class="col-md-3">
            Features
          </label>
          <div *ngFor="let feature of WebFeatureselectedItems;let i = index" class="col-md-9">
            <div class="scolumn">
              <input type="checkbox" [checked]="feature.active" id={{feature.mdata}} (change)="ChangeActiveWeb($event)"
                name={{feature.mdata}}>
              <label for={{feature.mdata}}>{{feature.mdata}}</label><br>
            </div>
          </div>
        </div>

        <!-- <div class="row">
          <div class="col-md-3"></div>
          <div class="col-md-9">
            <div class="form-inline row">
              <div class="form-group row col-md-4">
                <label class="control-label">
                  <input type="checkbox" trim placeholder="isexe" name="isexe" formControlName="isexe" />Is exe
                </label>
              </div>
              <div class="form-group row col-md-4">
                <label class="control-label">
                  <input type="checkbox" trim placeholder="isservice" name="isservice" formControlName="isservice" />
                  Is service </label>
              </div>
              <div class="form-group row col-md-4">
                <label class="control-label">
                  <input type="checkbox" trim placeholder="iswebapp" name="iswebapp" formControlName="iswebapp" />
                  Is webapp </label>
              </div>
              <div class="form-group row col-md-6">
                <label>
                  <input type="checkbox" trim placeholder="isoutlineconfigtemplate" name="isoutlineconfigtemplate"
                    formControlName="isoutlineconfigtemplate" /> Is outline config template</label>
              </div>
            </div>
          </div>
        </div> -->

        <div class="form-group row">
          <label class="col-md-3 control-label">
            Is exe
          </label>
          <div class="col-md-9">
            <input type="checkbox" trim placeholder="isexe" name="isexe" formControlName="isexe" />
          </div>
        </div>
        <div class="form-group row">
          <label class="col-md-3 control-label">
            Is service
          </label>
          <div class="col-md-9">
            <input type="checkbox" trim placeholder="isservice" name="isservice" formControlName="isservice" />
          </div>
        </div>

        <div class="form-group row">
          <label class="col-md-3 control-label">
            Is webapp
          </label>
          <div class="col-md-9">
            <input type="checkbox" trim placeholder="iswebapp" name="iswebapp" formControlName="iswebapp" />
          </div>
        </div>


        <div class="form-group row">
          <label class="col-md-3 control-label">
            Is outline config template
          </label>
          <div class="col-md-9">
            <input type="checkbox" trim placeholder="isoutlineconfigtemplate" name="isoutlineconfigtemplate"
              formControlName="isoutlineconfigtemplate" />
          </div>
        </div>

        <!-- <div class="form-group row">
          <label class="col-md-3 control-label">
            Is allow multiple feature
          </label>
          <div class="col-md-9">
            <input type="checkbox" trim placeholder="isallowmultiplefeature" name="isallowmultiplefeature"
              formControlName="isallowmultiplefeature" />
          </div>
        </div> -->

        <!-- <div class="form-group row" style="padding-top: 20px;" *ngIf='FeatureselectedItems.length>0'>
          <label class="col-md-12">
            Features
          </label>
          <br/>
          <div *ngFor="let feature of FeatureselectedItems;let i = index" class="col-md-12">
            <div class="scolumn">
              <input type="checkbox" [checked]="feature.active" id={{feature.mdata}} (change)="ChangeActive1($event)"
                name={{feature.mdata}}>
              <label for={{feature.mdata}}>{{feature.mdata}}</label><br>
            </div>
          </div>
        </div>  -->

        <div *ngIf="operation=='update'">

          <div class="form-group row">           
            <div class="col-md-8">
              <input type="checkbox" (change)="ChangeActive()" name="active"
                formControlName="active" /><label>Active</label>
            </div>
          </div>

        </div>

        <div class="form-group">
          <button type="button" class="btn btn-outline-warning waves-effect waves-themed pull-right btn-sm" (click)="clearForm();">Cancel</button>
          <button type="submit" *ngIf="(edit==true || add==true)" class="btn btn-outline-primary btn-sm waves-effect waves-themed pull-right"
            [disabled]="applicationForm.invalid">
            <span *ngIf="operation=='add' && add==true">Add</span>
            <span *ngIf="operation!='add' && edit==true">Update</span>
          </button>
        </div>

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