<ol class="breadcrumb breadcrumb-arrow font-trirong mm-breadcrumb">
  <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://">{{'MENU_ACCESS_CONTROL' | translate}}</a></li>
</ol>

<section class="mac-hero">
  <div class="mac-hero__content">
    <div class="mac-hero__icon">
      <clr-icon shape="shield-check"></clr-icon>
    </div>
    <div>
      <h2 class="mac-hero__title">{{'MENU_ACCESS_CONTROL' | translate}}</h2>
      <p class="mac-hero__subtitle">{{'SECURITY' | translate}}</p>
    </div>
  </div>
  <div class="mac-hero__actions">
    <span class="mac-chip">{{'EDIT_MODE' | translate}}</span>
    <div class="mac-sep"></div>
    <label class="mac-label">{{'FOR' | translate}}</label>
    <select class="mac-select" (change)="idofselected($event.target.value)">
      <option *ngFor="let sub of givendata" [value]="sub.usrGrp" [selected]="sub.usrGrp== 40">{{sub.groupName}}</option>
    </select>
    <button id="add" class="mac-btn mac-btn-primary" (click)="getbyuseriddata()">
      <clr-icon shape="refresh"></clr-icon>
      <span class="mac-btn-text">{{'RELOAD' | translate}}</span>
    </button>
    <div class="mac-toggle">
      <span class="mac-toggle__label" *ngIf="!toggle">{{'SHOW_ALL' | translate}}</span>
      <span class="mac-toggle__label" *ngIf="toggle">{{'ONLY_MAIN_MENU' | translate}}</span>
      <label class="switch">
        <input type="checkbox" ([ngModel])="toggle" checked (click)="toggleCheckbox()">
        <span class="slider round"></span>
      </label>
    </div>
  </div>
</section>

<div class="mac-container">
  <div class="clr-row">
    <div class="clr-col-12 mac-actions">
      <button id="add" class="mac-btn mac-btn-primary" (click)="modaladd()" [disabled]="!toggle">
        <clr-icon shape="plus"></clr-icon>
        <span>{{'ADD' | translate}}</span>
      </button>
      <div *ngIf="!toggle" class="error-message mac-hint">
        {{'CLOSE_TOGGLE_TO_ACTIVATE_ADD_BUTTON' | translate}}
      </div>
    </div>
  </div>

  <div class="mac-toolbar">
    <div class="mac-toolbar__left">
      <div class="mac-search">
        <clr-icon shape="search"></clr-icon>
        <input class="mac-search__input" type="text" placeholder="{{'SEARCH' | translate}}" [(ngModel)]="filterText" />
      </div>
    </div>
    <div class="mac-toolbar__right mac-stats">
      <div class="mac-stat">
        <div class="mac-stat__value">{{ totalItems }}</div>
        <div class="mac-stat__label">{{'TOTAL_ITEMS' | translate}}</div>
      </div>
      <div class="mac-stat">
        <div class="mac-stat__value">{{ mainMenuCount }}</div>
        <div class="mac-stat__label">{{'MAIN_MENUS' | translate}}</div>
      </div>
      <div class="mac-stat">
        <div class="mac-stat__value">{{ subMenuCount }}</div>
        <div class="mac-stat__label">{{'SUB_MENUS' | translate}}</div>
      </div>
    </div>
  </div>

  <clr-datagrid class="mac-grid" [clrDgLoading]="loading" *ngIf="!toggle">
    <clr-dg-placeholder>
      <ng-template #loadingSpinner>
        <clr-spinner>{{'LOADING' | translate}} ... </clr-spinner>
      </ng-template>
      <div *ngIf="alldata?.length === 0;else loadingSpinner">{{'NO_DATA_AVAILABLE' | translate}}</div>
    </clr-dg-placeholder>

    <clr-dg-column [clrDgField]="'no'" class="mac-col mac-col--no">
      <ng-container *clrDgHideableColumn="{hidden: false}">
        <span class="mac-col-title">
          <clr-icon shape="hashtag"></clr-icon> {{'NO' | translate}}
        </span>
      </ng-container>
    </clr-dg-column>
    <clr-dg-column [clrDgField]="'menuname'" class="mac-col mac-col--name">
      <ng-container *clrDgHideableColumn="{hidden: false}">
        <span class="mac-col-title">
          <clr-icon shape="tag"></clr-icon> {{'MENU_ITEM_NAME' | translate}}
        </span>
      </ng-container>
    </clr-dg-column>
    <clr-dg-column [clrDgField]="'mvisible'" class="mac-col mac-col--perm">
      <ng-container *clrDgHideableColumn="{hidden: false}">
        <span class="mac-col-title">
          <clr-icon shape="eye"></clr-icon> {{'VIEW' | translate}}
        </span>
      </ng-container>
    </clr-dg-column>
    <clr-dg-column [clrDgField]="'mcreate'" class="mac-col mac-col--perm">
      <ng-container *clrDgHideableColumn="{hidden: false}">
        <span class="mac-col-title">
          <clr-icon shape="plus"></clr-icon> {{'CREATE' | translate}}
        </span>
      </ng-container>
    </clr-dg-column>
    <clr-dg-column [clrDgField]="'medit'" class="mac-col mac-col--perm">
      <ng-container *clrDgHideableColumn="{hidden: false}">
        <span class="mac-col-title">
          <clr-icon shape="edit"></clr-icon> {{'EDIT' | translate}}
        </span>
      </ng-container>
    </clr-dg-column>
    <clr-dg-column [clrDgField]="'mdelete'" class="mac-col mac-col--perm">
      <ng-container *clrDgHideableColumn="{hidden: false}">
        <span class="mac-col-title">
          <clr-icon shape="trash"></clr-icon> {{'DELETE' | translate}}
        </span>
      </ng-container>
    </clr-dg-column>
    <clr-dg-column [clrDgField]="'mquery'" class="mac-col mac-col--perm">
      <ng-container *clrDgHideableColumn="{hidden: false}">
        <span class="mac-col-title">
          <clr-icon shape="search"></clr-icon> {{'QUERY' | translate}}
        </span>
      </ng-container>
    </clr-dg-column>
    <clr-dg-column [clrDgField]="'mexport'" class="mac-col mac-col--perm">
      <ng-container *clrDgHideableColumn="{hidden: false}">
        <span class="mac-col-title">
          <clr-icon shape="export"></clr-icon> {{'EXPORT' | translate}}
        </span>
      </ng-container>
    </clr-dg-column>

    <clr-dg-row *ngFor="let all of filteredAllData;let i=index">
      <clr-dg-cell>{{i+1}}</clr-dg-cell>
      <clr-dg-cell *ngIf="all.menuId==0">
        <b>{{all.menuItemDesc}}</b>
      </clr-dg-cell>
      <clr-dg-cell *ngIf="all.menuId!==0">&nbsp;&nbsp;&nbsp;{{all.menuItemDesc}}</clr-dg-cell>
      <clr-dg-cell>
        <input type="checkbox" [checked]="selected ===all.mvisible">
      </clr-dg-cell>
      <clr-dg-cell>
        <input type="checkbox" [checked]="selected ===all.mcreate">
      </clr-dg-cell>
      <clr-dg-cell>
        <input type="checkbox" [checked]="selected ===all.medit">
      </clr-dg-cell>
      <clr-dg-cell>
        <input type="checkbox" [checked]="selected ===all.mdelete">
      </clr-dg-cell>
      <clr-dg-cell>
        <input type="checkbox" [checked]="selected ===all.mquery">
      </clr-dg-cell>
      <clr-dg-cell>
        <input type="checkbox" [checked]="selected ===all.mexport">
      </clr-dg-cell>

      <clr-dg-action-overflow>
        <button class="mac-action-item" (click)="modalEdit(all)">
          {{'EDIT' | translate}}
          <clr-icon shape="edit" class="is-error"></clr-icon>
        </button>
        <button class="mac-action-item" *ngIf="all.menuId!==0" (click)="modalDelete(all)">
          {{'DELETE' | translate}}
          <clr-icon shape="trash" class="is-error"></clr-icon>
        </button>
        <button class="mac-action-item" *ngIf="all.menuId==0" (click)="modaldeletemainmenu(all)">
          {{'DELETE_MENU_SUBMENU' | translate}}
          <clr-icon shape="edit" class="is-error"></clr-icon>
        </button>
      </clr-dg-action-overflow>

      <clr-dg-row-detail *clrIfExpanded>
        <table class="table">
          <tr>
            <td class="td-title">{{'MENUNAME' | translate}}</td>
            <td class="td-content"></td>
          </tr>
        </table>
      </clr-dg-row-detail>
    </clr-dg-row>

    <clr-dg-footer class="mac-grid-footer">
      <clr-dg-pagination #pagination [clrDgPageSize]="10">
        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">{{'RECORDS_PER_PAGE' | translate}}</clr-dg-page-size>
        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
        {{'OF' | translate}} {{pagination.totalItems}} {{'RECORDS' | translate}}
      </clr-dg-pagination>
    </clr-dg-footer>
  </clr-datagrid>

  <clr-datagrid class="mac-grid" [clrDgLoading]="loading" *ngIf="toggle">
    <clr-dg-placeholder>
      <ng-template #loadingSpinner>
        <clr-spinner>{{'LOADING' | translate}} ... </clr-spinner>
      </ng-template>
      <div *ngIf="alldata?.length === 0;else loadingSpinner">{{'NO_DATA_AVAILABLE' | translate}}</div>
    </clr-dg-placeholder>

    <clr-dg-column [clrDgField]="'no'" class="mac-col mac-col--no">
      <ng-container *clrDgHideableColumn="{hidden: false}">
        <span class="mac-col-title">
          <clr-icon shape="hashtag"></clr-icon> {{'NO' | translate}}
        </span>
      </ng-container>
    </clr-dg-column>
    <clr-dg-column [clrDgField]="'menuname'" class="mac-col mac-col--name">
      <ng-container *clrDgHideableColumn="{hidden: false}">
        <span class="mac-col-title">
          <clr-icon shape="tag"></clr-icon> {{'MENU_ITEM_NAME' | translate}}
        </span>
      </ng-container>
    </clr-dg-column>
    <clr-dg-column [clrDgField]="'mvisible'" class="mac-col mac-col--perm">
      <ng-container *clrDgHideableColumn="{hidden: false}">
        <span class="mac-col-title">
          <clr-icon shape="eye"></clr-icon> {{'VIEW' | translate}}
        </span>
      </ng-container>
    </clr-dg-column>
    <clr-dg-column [clrDgField]="'mcreate'" class="mac-col mac-col--perm">
      <ng-container *clrDgHideableColumn="{hidden: false}">
        <span class="mac-col-title">
          <clr-icon shape="plus"></clr-icon> {{'CREATE' | translate}}
        </span>
      </ng-container>
    </clr-dg-column>
    <clr-dg-column [clrDgField]="'medit'" class="mac-col mac-col--perm">
      <ng-container *clrDgHideableColumn="{hidden: false}">
        <span class="mac-col-title">
          <clr-icon shape="edit"></clr-icon> {{'EDIT' | translate}}
        </span>
      </ng-container>
    </clr-dg-column>
    <clr-dg-column [clrDgField]="'mdelete'" class="mac-col mac-col--perm">
      <ng-container *clrDgHideableColumn="{hidden: false}">
        <span class="mac-col-title">
          <clr-icon shape="trash"></clr-icon> {{'DELETE' | translate}}
        </span>
      </ng-container>
    </clr-dg-column>
    <clr-dg-column [clrDgField]="'mquery'" class="mac-col mac-col--perm">
      <ng-container *clrDgHideableColumn="{hidden: false}">
        <span class="mac-col-title">
          <clr-icon shape="search"></clr-icon> {{'QUERY' | translate}}
        </span>
      </ng-container>
    </clr-dg-column>
    <clr-dg-column [clrDgField]="'mexport'" class="mac-col mac-col--perm">
      <ng-container *clrDgHideableColumn="{hidden: false}">
        <span class="mac-col-title">
          <clr-icon shape="export"></clr-icon> {{'EXPORT' | translate}}
        </span>
      </ng-container>
    </clr-dg-column>
    <ng-container *ngFor="let all of filteredAllData;let i=index">
      <clr-dg-row *ngIf="all.menuId==0">
        <clr-dg-cell>{{i+1}}</clr-dg-cell>
        <clr-dg-cell>
          <b>{{all.menuItemDesc}}</b>
        </clr-dg-cell>
        <clr-dg-cell>
          <input type="checkbox" [checked]="selected ===all.mvisible">
        </clr-dg-cell>
        <clr-dg-cell>
          <input type="checkbox" [checked]="selected ===all.mcreate">
        </clr-dg-cell>
        <clr-dg-cell>
          <input type="checkbox" [checked]="selected ===all.medit">
        </clr-dg-cell>
        <clr-dg-cell>
          <input type="checkbox" [checked]="selected ===all.mdelete">
        </clr-dg-cell>
        <clr-dg-cell>
          <input type="checkbox" [checked]="selected ===all.mquery">
        </clr-dg-cell>
        <clr-dg-cell>
          <input type="checkbox" [checked]="selected ===all.mexport">
        </clr-dg-cell>
        <clr-dg-action-overflow>
          <button class="mac-action-item" (click)="Sync(all.menuItemId?.menuItemId,all)">
            {{'SYNC' | translate}}
            <clr-icon shape="shrink" class="is-error"></clr-icon>
          </button>
        </clr-dg-action-overflow>
        <clr-dg-row-detail *clrIfExpanded>
          <table class="table">
            <tr>
              <td class="td-title">{{'MENUNAME' | translate}}</td>
              <td class="td-content"></td>
            </tr>
          </table>
        </clr-dg-row-detail>
      </clr-dg-row>
    </ng-container>
    <clr-dg-footer class="mac-grid-footer">
      <clr-dg-pagination #pagination [clrDgPageSize]="10">
        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">{{'RECORDS_PER_PAGE' | translate}}</clr-dg-page-size>
        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
        {{'OF' | translate}} {{pagination.totalItems}} {{'RECORDS' | translate}}
      </clr-dg-pagination>
    </clr-dg-footer>
  </clr-datagrid>

  <clr-modal class="mac-modal" [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
    <h3 class="modal-title mac-modal-title">
      <clr-icon shape="plus"></clr-icon> {{'ADD_MENU_ACCESS_CONTROL' | translate}}
    </h3>
    <div class="modal-body">
      <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
        <div class="clr-row">
          <div class="clr-col-sm-12 mac-form-group">
            <label class="mac-form-label" for="name">{{'MENU_NAME' | translate}}
              <span class="required-field">*</span>
            </label>
            <select name="" id="" class="mac-form-select w-100" (change)="idselected($event.target.value)">
              <option *ngFor="let sub of menus" [value]="sub.menuItemId">{{sub.menuItemDesc}}</option>
            </select>
            <div class="mac-form-help">{{'CHOOSE_MAIN_MENU_FOR_ACCESS' | translate}}</div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="mac-btn mac-btn-outline" (click)="modalAdd = false">
            <clr-icon shape="times"></clr-icon>
            <span>{{'CANCEL' | translate}}</span>
          </button>
          <button type="submit" class="mac-btn mac-btn-primary">
            <clr-icon shape="check"></clr-icon>
            <span>{{'ADD' | translate}}</span>
          </button>
        </div>
      </form>
    </div>
  </clr-modal>

  <clr-modal class="mac-modal" [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
    <h3 class="modal-title mac-modal-title">
      <clr-icon shape="edit"></clr-icon> {{'UPDATE_MENU_ACCESS_CONTROL' | translate}}
    </h3>
    <div class="modal-body" *ngIf="rowSelected.menuItemId">
      <div class="mac-form-help">{{'MENU_ID' | translate}}: 
        <code class="clr-code">{{rowSelected.menuItemId.menuItemId}}</code>
      </div>
      <form (ngSubmit)="onUpdate(rowSelected.menuItemId.menuItemId,rowSelected.usrGrp.usrGrp)">
        <div class="mac-perms">
          <label class="mac-perm">
            <input type="checkbox" clrCheckbox name="mvisible" [(ngModel)]="selected ===rowSelected.mvisible" (change)="rowSelected.mvisible === $event.target.checked ? 'y' : 'n'">
            <span class="mac-perm__icon">
              <clr-icon shape="eye"></clr-icon>
            </span>
            <span class="mac-perm__label">{{'VIEW' | translate}}</span>
          </label>
          <label class="mac-perm">
            <input type="checkbox" clrCheckbox name="mcreate" [(ngModel)]="selected ===rowSelected.mcreate" (change)="rowSelected.mcreate === $event.target.checked ? 'y' : 'n'">
            <span class="mac-perm__icon">
              <clr-icon shape="plus"></clr-icon>
            </span>
            <span class="mac-perm__label">{{'CREATE' | translate}}</span>
          </label>
          <label class="mac-perm">
            <input type="checkbox" clrCheckbox name="medit" [(ngModel)]="selected ===rowSelected.medit" (change)="rowSelected.medit === $event.target.checked ? 'y' : 'n'">
            <span class="mac-perm__icon">
              <clr-icon shape="edit"></clr-icon>
            </span>
            <span class="mac-perm__label">{{'EDIT' | translate}}</span>
          </label>
          <label class="mac-perm">
            <input type="checkbox" clrCheckbox name="mdelete" [(ngModel)]="selected ===rowSelected.mdelete" (change)="rowSelected.mdelete === $event.target.checked ? 'y' : 'n'">
            <span class="mac-perm__icon">
              <clr-icon shape="trash"></clr-icon>
            </span>
            <span class="mac-perm__label">{{'DELETE' | translate}}</span>
          </label>
          <label class="mac-perm">
            <input type="checkbox" clrCheckbox name="mquery" [(ngModel)]="selected ===rowSelected.mquery" (change)="rowSelected.mquery === $event.target.checked ? 'y' : 'n'">
            <span class="mac-perm__icon">
              <clr-icon shape="search"></clr-icon>
            </span>
            <span class="mac-perm__label">{{'QUERY' | translate}}</span>
          </label>
          <label class="mac-perm">
            <input type="checkbox" clrCheckbox name="mexport" [(ngModel)]="selected ===rowSelected.mexport" (change)="rowSelected.mexport === $event.target.checked ? 'y' : 'n'">
            <span class="mac-perm__icon">
              <clr-icon shape="export"></clr-icon>
            </span>
            <span class="mac-perm__label">{{'EXPORT' | translate}}</span>
          </label>
        </div>
        <div class="modal-footer">
          <button type="button" class="mac-btn mac-btn-outline" (click)="modaledit = false">
            <clr-icon shape="times"></clr-icon>
            <span>{{'CANCEL' | translate}}</span>
          </button>
          <button type="submit" class="mac-btn mac-btn-primary">
            <clr-icon shape="check"></clr-icon>
            <span>{{'UPDATE' | translate}}</span>
          </button>
        </div>
      </form>
    </div>
  </clr-modal>

  <clr-modal class="mac-modal" [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
    <div class="modal-body">
      <div class="mac-delete-header">
        <div class="mac-delete-icon">
          <clr-icon shape="exclamation-triangle" size="48"></clr-icon>
        </div>
        <h1 class="mac-delete-title">{{'ARE_YOU_SURE_WANT_TO_DELETE' | translate}}?</h1>
        <p class="mac-delete-subtitle">{{'THIS_ACTION_CANNOT_BE_UNDONE' | translate}}</p>
      </div>
      <div class="mac-delete-details" *ngIf="rowSelected.menuItemId">
        <div class="mac-delete-detail-item">
          <span class="mac-delete-detail-label">{{'MENU_ITEM_ID' | translate}}:</span>
          <span class="mac-delete-detail-value">{{rowSelected.menuItemId.menuItemId}}</span>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="mac-btn mac-btn-outline" (click)="modaldelete = false">
          <clr-icon shape="times"></clr-icon>
          <span>{{'CANCEL' | translate}}</span>
        </button>
        <button type="submit" (click)="delete(rowSelected.menuItemId.menuItemId,rowSelected.usrGrp.usrGrp)" class="mac-btn mac-btn-error">
          <clr-icon shape="trash"></clr-icon>
          <span>{{'DELETE' | translate}}</span>
        </button>
      </div>
    </div>
  </clr-modal>

  <clr-modal class="mac-modal" [(clrModalOpen)]="modaldelete1" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
    <div class="modal-body">
      <div class="mac-delete-header">
        <div class="mac-delete-icon">
          <clr-icon shape="exclamation-triangle" size="48"></clr-icon>
        </div>
        <h1 class="mac-delete-title">{{'ARE_YOU_SURE_WANT_TO_DELETE_MAIN_MENU_WITH_SUBMENU' | translate}}?</h1>
        <p class="mac-delete-subtitle">{{'THIS_ACTION_CANNOT_BE_UNDONE' | translate}}</p>
      </div>
      <div class="mac-delete-details" *ngIf="rowSelected.menuItemId">
        <div class="mac-delete-detail-item">
          <span class="mac-delete-detail-label">{{'MENU_ITEM_ID' | translate}}:</span>
          <span class="mac-delete-detail-value">{{rowSelected.menuItemId.menuItemId}}</span>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="mac-btn mac-btn-outline" (click)="modaldelete1 = false">
          <clr-icon shape="times"></clr-icon>
          <span>{{'CANCEL' | translate}}</span>
        </button>
        <button type="submit" (click)="delete1(rowSelected.menuItemId.menuItemId,rowSelected.usrGrp.usrGrp)" class="mac-btn mac-btn-error">
          <clr-icon shape="trash"></clr-icon>
          <span>{{'DELETE' | translate}}</span>
        </button>
      </div>
    </div>
  </clr-modal>
</div>