
<ol class="breadcrumb breadcrumb-arrow font-trirong">
  <li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
  <li><a href="javascript://"><clr-icon shape="lock"></clr-icon>{{ 'SECURITY' | translate }}</a></li>
  <li><a href="javascript://">{{'USER_GROUP_MAINTENANCE' | translate}}</a></li>

</ol>


<div class="dg-wrapper">
  <div class="clr-row">
    <div class="clr-col">
      <h3>{{'USER_GROUP_MAINTENANCE' | translate}}</h3>
  </div>
    <div class="clr-col" style="text-align: right;">
      <div class="btn-group">
        <button class="btn text-dark" (click)="downloadFiles()"><b>{{ 'DOWNLOAD_TEMPLATE' | translate }}</b></button>

      </div>
      <button class="btn btn-primary" (click)="csvImport()">{{ 'IMPORT' | translate }}</button>
        <button class="btn btn-outline" (click)="onExport()">
          <clr-icon shape="export"></clr-icon> {{ 'EXPORT_XLSX' | translate }}
        </button>
        <button id="add"  class="btn btn-primary" *ngIf="mcreate == 'true'" (click)="goToAdd()">
          <clr-icon shape="plus"></clr-icon> {{ 'ADD' | translate }}
      </button>
    </div>
  </div>







  <clr-datagrid [clrDgLoading]="loading">
    <clr-dg-placeholder> <ng-template #loadingSpinner><clr-spinner>{{'LOADING' | translate}} ... </clr-spinner></ng-template>
      <div *ngIf="error;else loadingSpinner">{{error}}</div></clr-dg-placeholder>

      <clr-dg-column [clrDgField]="'usrGrp'">
        <ng-container *clrDgHideableColumn="{hidden: false}">
          {{'USERGROUP_NO' | translate}}
        </ng-container>
      </clr-dg-column>
      <clr-dg-column [clrDgField]="'groupName'">
        <ng-container *clrDgHideableColumn="{hidden: false}">
          {{'GROUP_NAME' | translate}}
        </ng-container>
      </clr-dg-column>
      <clr-dg-column [clrDgField]="'groupDesc'">
        <ng-container *clrDgHideableColumn="{hidden: false}">
          {{'GROUP_DESC' | translate}}
        </ng-container>
      </clr-dg-column>
      <clr-dg-column [clrDgField]="'groupLevel'">
        <ng-container *clrDgHideableColumn="{hidden: false}">
          {{'GROUP_LEVEL' | translate}}
        </ng-container>
      </clr-dg-column>
      <clr-dg-column [clrDgField]="'status'">
        <ng-container *clrDgHideableColumn="{hidden: false}">
          {{'STATUS' | translate}}
        </ng-container>
      </clr-dg-column>
      <clr-dg-column [clrDgField]="'updateDateFormated'">
        <ng-container *clrDgHideableColumn="{hidden: false}">
          {{'UPDATED_DATE' | translate}}
        </ng-container>
      </clr-dg-column>

    <clr-dg-row *clrDgItems="let user of givendata;let i = index" [clrDgItem]="user">
      <clr-dg-cell>{{user.usrGrp}}</clr-dg-cell>
      <clr-dg-cell>{{user.groupName}}</clr-dg-cell>
      <clr-dg-cell >{{user.groupDesc}}</clr-dg-cell>
      <clr-dg-cell>{{user.groupLevel}}</clr-dg-cell>
      <clr-dg-cell>{{user.status}}</clr-dg-cell>
      <!-- <clr-dg-cell>{{user.usrGrp}}</clr-dg-cell> -->
      <clr-dg-cell>{{user.updateDateFormated}}</clr-dg-cell>

      <clr-dg-action-overflow>

        <button class="action-item" *ngIf="medit == 'true'"  (click)="goToEdit(user)">   {{'EDIT' | translate}}</button>
        <button class="action-item" (click)="onDelete(user)">{{'DELETE'|translate}}<clr-icon shape="trash" class="is-error"></clr-icon></button>
      </clr-dg-action-overflow>

      <clr-dg-row-detail *clrIfExpanded>
        <table class="table">
          <tr>
            <td class="td-title">username</td>
            <td class="td-content">{{user.groupName}}</td>
          </tr>


        </table>
      </clr-dg-row-detail>
    </clr-dg-row>

    <clr-dg-footer>
      <clr-dg-pagination #pagination [clrDgPageSize]="10">
        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
        of {{pagination.totalItems}} Records
      </clr-dg-pagination>
    </clr-dg-footer>
  </clr-datagrid>
</div>

<clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
  <h3 class="modal-title">Add User Group Maintenance</h3>
  <div class="modal-body">
        <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
      <div class="clr-row">
        <div class="clr-col-sm-12">
          <label for="name">User Group<span class="required-field">*</span></label>
         <input type="text" class="clr-input" formControlName="groupName">
         <div *ngIf="submitted && entryForm.controls.groupName.errors" class="error_mess">
          <div *ngIf="submitted && entryForm.controls.groupName.errors.required" class="error_mess">*This field is Required</div>
      </div>
        </div>
        <div class="clr-col-sm-12">
          <label for="name">Description<span class="required-field">*</span></label>
         <input type="text" class="clr-input" formControlName="groupDesc">
         <div *ngIf="submitted && entryForm.controls.groupDesc.errors" class="error_mess">
          <div *ngIf="submitted && entryForm.controls.groupDesc.errors.required" class="error_mess">*This field is Required</div>
      </div>
        </div>
        <div class="clr-col-sm-12">
          <label for="tags">Status<span class="required-field">*</span></label>
          <select  id="" formControlName="status">
            <option value="E">Enable</option>
              <option  value="D">Disable</option></select>
              <div *ngIf="submitted && entryForm.controls.status.errors" class="error_mess">
                <div *ngIf="submitted && entryForm.controls.status.errors.required" class="error_mess">*This field is Required</div>
            </div>
          </div>
          <div class="clr-col-sm-12">
            <label for="tags">Group Level<span class="required-field">*</span></label>
            <select  id="" formControlName="groupLevel">
              <option >10</option>
              <option >20</option>
             <option >30</option>
             <option >40</option>
             <option>50</option>
            </select>
            <div *ngIf="submitted && entryForm.controls.groupLevel.errors" class="error_mess">
              <div *ngIf="submitted && entryForm.controls.groupLevel.errors.required" class="error_mess">*This field is Required</div>
          </div>
            </div>
      </div>
      <br>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="modalAdd = false">Cancel</button>
        <button type="submit" class="btn btn-primary" >ADD</button>
        </div>
</form>
  </div>

</clr-modal>

<clr-modal [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
  <h3 class="modal-title">Update User Group Maintenance</h3>


  <div class="modal-body" *ngIf="rowSelected.usrGrp">
    <h2 class="heading">{{rowSelected.usrGrp}}</h2>
        <form (ngSubmit)="onUpdate(rowSelected.usrGrp)">
      <div class="clr-row">
        <div class="clr-col-sm-12">
          <label for="name">User Group<span class="required-field">*</span></label>
         <input type="text" class="clr-input" [(ngModel)]="rowSelected.groupName" name="groupName">
        </div>
        <div class="clr-col-sm-12">
          <label for="name">Description<span class="required-field">*</span></label>
         <input type="text" class="clr-input" [(ngModel)]="rowSelected.groupDesc" name="groupDesc">
        </div>
        <div class="clr-col-sm-12">
          <label for="tags">Status<span class="required-field">*</span></label>
          <select  id="" [(ngModel)]="rowSelected.status" name="status">
            <option value="E">Enable</option>
              <option  value="D">Disable</option></select>
          </div>
          <div class="clr-col-sm-12">
            <label for="tags">Group Level<span class="required-field">*</span></label>
            <select  id="" [(ngModel)]="rowSelected.groupLevel" name="groupLevel">
              <option >10</option>
              <option >20</option>
             <option >30</option>
             <option >40</option>
             <option>50</option>
            </select>
            </div>
      </div>
      <br>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="modaledit = false">Cancel</button>
        <button type="submit" class="btn btn-primary" >Update</button>
        </div>
</form>
  </div>

</clr-modal>
<clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">

  <div class="modal-body" *ngIf="rowSelected.usrGrp">
    <h1 class="delete">Are You Sure Want to delete?</h1>
    <h2 class="heading">{{rowSelected.usrGrp}}</h2>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
    <button type="submit" (click)="delete(rowSelected.usrGrp)" class="btn btn-primary" >Delete</button>
    </div>
  </div>
</clr-modal>



<clr-modal [(clrModalOpen)]="modalCsv" [clrModalSize]="'sm'" [clrModalStaticBackdrop]="false">
  <h3 class="modal-title">Import File</h3>
  <div class="modal-body">
      <input type="file" name="file" class="file" (change)="selectFile($event)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
  </div>
  <div class="modal-footer">
      <button class="btn btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">Import</button>
  </div>
</clr-modal>