<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</a></li>
  <li><a href="javascript://">User Maintenance</a></li>
</ol>

<section class="um-hero">
  <div class="um-hero__content">
    <div class="um-hero__icon"><clr-icon shape="user"></clr-icon></div>
    <div>
      <h2 class="um-hero__title">User Maintenance</h2>
      <p class="um-hero__subtitle">Add New User</p>
    </div>
  </div>
</section>

<div class="um-add-container">
  <div class="um-form-card">
    <form [formGroup]="entryForm" (ngSubmit)="onSubmit()" class="um-form">
      <div class="clr-row">
        <div class="clr-col-md-6 clr-col-sm-12">
          <label for="first_name" class="um-form-label">First Name<span class="required-field">*</span></label>
          <input type="text" id="first_name" class="um-form-input" formControlName="first_name">
          <div *ngIf="submitted && entryForm.controls.first_name.errors" class="um-error-message">
            <div *ngIf="submitted && entryForm.controls.first_name.errors.required">*This field is Required</div>
          </div>
        </div>
        
        <div class="clr-col-md-6 clr-col-sm-12">
          <label for="last_name" class="um-form-label">Last Name<span class="required-field">*</span></label>
          <input type="text" id="last_name" class="um-form-input" formControlName="last_name">
          <div *ngIf="submitted && entryForm.controls.last_name.errors" class="um-error-message">
            <div *ngIf="submitted && entryForm.controls.last_name.errors.required">*This field is Required</div>
          </div>
        </div>
        
        <div class="clr-col-md-6 clr-col-sm-12">
          <label for="mob_no" class="um-form-label">Mobile Number<span class="required-field">*</span></label>
          <input type="text" id="mob_no" class="um-form-input" formControlName="mob_no" required pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$">
          <div *ngIf="submitted && entryForm.controls.mob_no.errors" class="um-error-message">
            <div *ngIf="submitted && entryForm.controls.mob_no.errors.required">*This field is Required</div>
            <div *ngIf="submitted && entryForm.controls.mob_no.errors.pattern">* Please Follow your pattern,+91 Enter 10 digit Mobile Number.</div>
          </div>
        </div>
        
        <div class="clr-col-md-6 clr-col-sm-12">
          <label for="email" class="um-form-label">Email<span class="required-field">*</span></label>
          <input type="text" id="email" class="um-form-input" formControlName="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
          <div *ngIf="submitted && entryForm.controls.email.errors" class="um-error-message">
            <div *ngIf="submitted && entryForm.controls.email.errors.required">*This field is Required</div>
            <div *ngIf="submitted && entryForm.controls.email.errors.pattern">*Email must be a valid email address</div>
          </div>
        </div>
        
        <div class="clr-col-md-6 clr-col-sm-12">
          <label for="new_password" class="um-form-label">New Password<span class="required-field">*</span></label>
          <input type="password" id="new_password" class="um-form-input" formControlName="new_password" minlength="6">
          <div *ngIf="submitted && entryForm.controls.new_password.errors" class="um-error-message">
            <div *ngIf="entryForm.controls.new_password.errors.required">*Password is required</div>
            <div *ngIf="entryForm.controls.new_password.errors.minlength">* Password must be at least 6 characters</div>
          </div>
        </div>
        
        <div class="clr-col-md-6 clr-col-sm-12">
          <label for="confirm_password" class="um-form-label">Confirm New Password<span class="required-field">*</span></label>
          <input type="password" id="confirm_password" class="um-form-input" formControlName="confirm_password">
          <div *ngIf="submitted && entryForm.controls.confirm_password.errors" class="um-error-message">
            <div *ngIf="entryForm.controls.confirm_password.errors.required">* Confirm Password is required</div>
            <div *ngIf="entryForm.controls.confirm_password.errors.confirmedValidator">* Password and Confirm Password must be match.</div>
          </div>
        </div>
        
        <div class="clr-col-md-6 clr-col-sm-12">
          <label for="usrGrpId" class="um-form-label">User Group<span class="required-field">*</span></label>
          <select id="usrGrpId" class="um-form-select" formControlName="usrGrpId">
            <option value="">Select User Group</option>
            <option *ngFor="let group of usergrpdata" [value]="group.usrGrp">{{group.groupName}}</option>
          </select>
          <div *ngIf="submitted && entryForm.controls.usrGrpId.errors" class="um-error-message">
            <div *ngIf="submitted && entryForm.controls.usrGrpId.errors.required">*This field is Required</div>
          </div>
        </div>
        
        <div class="clr-col-md-6 clr-col-sm-12">
          <label for="accesstype" class="um-form-label">Access Type<span class="required-field">*</span></label>
          <select id="accesstype" class="um-form-select" formControlName="accesstype">
            <option value="">Select Access Type</option>
            <option *ngFor="let access of accessdata" [value]="access.name">{{access.name}}</option>
          </select>
          <div *ngIf="submitted && entryForm.controls.accesstype.errors" class="um-error-message">
            <div *ngIf="submitted && entryForm.controls.accesstype.errors.required">*This field is Required</div>
          </div>
        </div>
      </div>
      
      <div class="um-form-actions">
        <button type="button" class="um-btn um-btn-outline" (click)="goback()">
          <clr-icon shape="times"></clr-icon>
          <span>Cancel</span>
        </button>
        <button type="submit" class="um-btn um-btn-primary">
          <clr-icon shape="check"></clr-icon>
          <span>Add User</span>
        </button>
      </div>
    </form>
  </div>
</div>

<!-- Customer Modal -->
<clr-modal [(clrModalOpen)]="customer" [clrModalSize]="'lg'">
  <h3 class="modal-title"><b>Select From List:</b></h3>
  <div class="modal-body">
    <div class="clr-row">
      <div class="clr-col-md-12 clr-col-sm-12">
        <input id="data" type="text" placeholder="Enter search Criteria" class="um-form-input">
      </div>
    </div>

    <clr-datagrid [clrDgLoading]="loading">
      <clr-dg-placeholder>
        <clr-spinner>Loading ...</clr-spinner>
      </clr-dg-placeholder>
      <clr-dg-column [clrDgField]="'id'">
        <ng-container *clrDgHideableColumn="{hidden: false}">
          No
        </ng-container>
      </clr-dg-column>
      <clr-dg-column [clrDgField]="'customerId'">
        <ng-container *clrDgHideableColumn="{hidden: false}">
          Customer Code
        </ng-container>
      </clr-dg-column>
      <clr-dg-column [clrDgField]="'customerCode'">
        <ng-container *clrDgHideableColumn="{hidden: false}">
          Customer Id
        </ng-container>
      </clr-dg-column>
      <clr-dg-column [clrDgField]="'customerName'">
        <ng-container *clrDgHideableColumn="{hidden: false}">
          Customer Name
        </ng-container>
      </clr-dg-column>

      <clr-dg-row *clrDgItems="let user of custdata;let i = index" [clrDgItem]="user">
        <clr-dg-cell>{{i+1}}</clr-dg-cell>
        <clr-dg-cell (click)="getcustID(user.customerId)" class="um-clickable-cell">{{user.customerCode}}</clr-dg-cell>
        <clr-dg-cell>{{user.customerId}}</clr-dg-cell>
        <clr-dg-cell>{{user.customerName}}</clr-dg-cell>

        <clr-dg-row-detail *clrIfExpanded>
          <table class="table">
            <tr>
              <td class="td-title">No</td>
              <td class="td-content">{{user.id}}</td>
            </tr>
            <tr>
              <td class="td-title">Customer Code</td>
              <td class="td-content">{{user.customerCode}}</td>
            </tr>
            <tr>
              <td class="td-title">Customer Id</td>
              <td class="td-content">{{user.customerId}}</td>
            </tr>
            <tr>
              <td class="td-title">Customer Name</td>
              <td class="td-content">{{user.customerName}}</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]">Records 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>

<!-- Department Modal -->
<clr-modal [(clrModalOpen)]="department" [clrModalSize]="'lg'">
  <h3 class="modal-title"><b>Select From List:</b></h3>
  <div class="modal-body">
    <div class="clr-row">
      <div class="clr-col-md-12 clr-col-sm-12">
        <input id="data" type="text" placeholder="Enter search Criteria" class="um-form-input">
      </div>
    </div>

    <clr-datagrid [clrDgLoading]="loading">
      <clr-dg-placeholder>
        <clr-spinner>Loading ...</clr-spinner>
      </clr-dg-placeholder>
      <clr-dg-column [clrDgField]="'id'">
        <ng-container *clrDgHideableColumn="{hidden: false}">
          No
        </ng-container>
      </clr-dg-column>
      <clr-dg-column [clrDgField]="'customerId'">
        <ng-container *clrDgHideableColumn="{hidden: false}">
          Department Code
        </ng-container>
      </clr-dg-column>

      <clr-dg-row *clrDgItems="let user of departmentdata;let i = index" [clrDgItem]="user">
        <clr-dg-cell>{{i+1}}</clr-dg-cell>
        <clr-dg-cell (click)="getdepid(user.departmentCode)" class="um-clickable-cell">{{user.departmentCode}}</clr-dg-cell>

        <clr-dg-row-detail *clrIfExpanded>
          <table class="table">
            <tr>
              <td class="td-title">No</td>
              <td class="td-content">{{user.id}}</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]">Records 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>

<!-- Position Modal -->
<clr-modal [(clrModalOpen)]="position" [clrModalSize]="'lg'">
  <h3 class="modal-title"><b>Select From List:</b></h3>
  <div class="modal-body">
    <div class="clr-row">
      <div class="clr-col-md-12 clr-col-sm-12">
        <input id="data" type="text" placeholder="Enter search Criteria" class="um-form-input">
      </div>
    </div>

    <clr-datagrid [clrDgLoading]="loading">
      <clr-dg-placeholder>
        <clr-spinner>Loading ...</clr-spinner>
      </clr-dg-placeholder>
      <clr-dg-column [clrDgField]="'id'">
        <ng-container *clrDgHideableColumn="{hidden: false}">
          No
        </ng-container>
      </clr-dg-column>
      <clr-dg-column [clrDgField]="'customerId'">
        <ng-container *clrDgHideableColumn="{hidden: false}">
          Position Code
        </ng-container>
      </clr-dg-column>

      <clr-dg-row *clrDgItems="let user of positiondata;let i = index" [clrDgItem]="user">
        <clr-dg-cell>{{i+1}}</clr-dg-cell>
        <clr-dg-cell (click)="getposid(user.positionCode)" class="um-clickable-cell">{{user.positionCode}}</clr-dg-cell>

        <clr-dg-row-detail *clrIfExpanded>
          <table class="table">
            <tr>
              <td class="td-title">No</td>
              <td class="td-content">{{user.id}}</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]">Records 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>