<div id="layout-wrapper">
  <div class="inner-pg-sp">
    <div class="container-fluid">

      <div class="row">
        <div class="col-12">
          <div class="d-sm-flex align-items-center justify-content-between navbar-header p-0"></div>
        </div>
      </div>

      <div class="container-fluid">
        <div class="col-xl-12 mt-4">

          <!-- CARD 1: User Selection + Permissions Table -->
          <div class="card border mb-4">
            <div class="card-body">
              <div class="table-section">
                <div class="row">
                  <div class="col-lg-12">
                    <div class="card-body mt-2 p-0">
                      <div class="card mb-0 mt-2">
                        <div class="card-header font-edit-13-child mb-3">
  {{ "userPermission" | translate }}
</div>
                        <div class="card-body">

                          <!-- User Selection -->
                          <div class="card shadow-sm mb-4">
                            <div class="card-body">
                              <form [formGroup]="permission" class="row align-items-center">
                                <label class="col-md-2 col-form-label fw-semibold">
                                  {{ "userCode" | translate }}
                                </label>
                                <div class="col-md-6">
                                  <ng-select class="form-select" formControlName="userCode" [items]="users"
                                    bindLabel="userName" bindValue="userId"
                                    placeholder="{{ 'choose' | translate }}" (change)="onUserChange()"
                                    [searchable]="true" [clearable]="false" [dropdownPosition]="'auto'"
                                    [virtualScroll]="true" [bufferAmount]="20" appendTo="body">
                                    <ng-template ng-option-tmp let-item="item">
                                      <div class="d-flex flex-column">
                                        <span class="fw-medium">{{ item.userName }}</span>
                                        <small class="text-muted">{{ item.userId }}</small>
                                      </div>
                                    </ng-template>
                                    <ng-template ng-label-tmp let-item="item">
                                      <span>{{ item.userName }} ({{ item.userId }})</span>
                                    </ng-template>
                                  </ng-select>
                                </div>
                              </form>
                            </div>
                          </div>

                          <!-- Permissions Table -->
                          <div class="card shadow-sm" *ngIf="showPermissions">
                            <div class="card-body">
                              <h4 class="card-title mb-3">{{ "menu" | translate }}</h4>
                              <div class="table-responsive scrollable-table">
                                <table class="table table-hover table-bordered table-sm permission-table">
                                  <thead class="table-light">
                                    <tr>
                                      <th style="width: 50px">#</th>
                                      <th>{{ "type" | translate }}</th>
                                      <th style="width: 100px;" class="text-center">{{ "allow" | translate }}</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr *ngFor="let item of menuItems; let i = index">
                                      <td class="text-muted">{{ i + 1 }}</td>
                                      <td>{{ item.endpoint | translate }}</td>
                                      <td class="text-center">
                                        <input type="checkbox" [(ngModel)]="item.checked" />
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </div>
                              <div class="text-end mt-3">
                                <button class="btn btn-primary btn-sm px-4" (click)="savePermissions()">
                                  {{ "save" | translate }}
                                </button>
                              </div>
                            </div>
                          </div>

                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- CARD 2: Create Third Party User Form -->
          <div class="card border">
            <div class="card-body">
              <div class="table-section">
                <div class="row">
                  <div class="col-lg-12">
                    <div class="card-body mt-2 p-0">
                      <div class="card mb-0 mt-2">
                        <div class="card-header font-edit-13-child mb-3">
                            {{ "createThirdPartyUser" | translate }}
                        </div>
                        <div class="card-body">

                          <form [formGroup]="thirdPartyForm" autocomplete="off">

                            <div class="row g-3 mb-3">
                              <!-- SUS_USERCODE -->
                              <div class="col-md-6">
                                <div class="d-flex align-items-center gap-2">
                                  <label for="SUS_USERCODE" class="text-nowrap">
                                    {{ "SUS_USERCODE" | translate }}<span class="mandatory">*</span>
                                  </label>
                                  <div class="position-relative w-100">
                                    <input type="text" id="SUS_USERCODE" class="form-control"
                                      formControlName="SUS_USERCODE"
                                      placeholder="{{ 'SUS_USERCODE' | translate }}"
                                       />
                                    <div class="text-danger"
                                      *ngIf="thirdPartyForm.get('SUS_USERCODE')?.touched && thirdPartyForm.get('SUS_USERCODE')?.invalid">
                                      <div *ngIf="thirdPartyForm.get('SUS_USERCODE')?.errors?.['required']">
                                        {{ "fieldRequired" | translate }}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>

                              <!-- SUS_EMPCODE -->
                              <div class="col-md-6">
                                <div class="d-flex align-items-center gap-2">
                                  <label for="SUS_EMPCODE" class="text-nowrap">
                                    {{ "SUS_EMPCODE" | translate }}<span class="mandatory">*</span>
                                  </label>
                                  <div class="position-relative w-100">
                                    <input type="text" id="SUS_EMPCODE" class="form-control"
                                      formControlName="SUS_EMPCODE"
                                      placeholder="{{ 'SUS_EMPCODE' | translate }}"
                                      appNoWhitespaces />
                                    <div class="text-danger"
                                      *ngIf="thirdPartyForm.get('SUS_EMPCODE')?.touched && thirdPartyForm.get('SUS_EMPCODE')?.invalid">
                                      <div *ngIf="thirdPartyForm.get('SUS_EMPCODE')?.errors?.['required']">
                                        {{ "fieldRequired" | translate }}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>

                            <div class="row g-3 mb-3">
                              <!-- SUS_NAME -->
                              <div class="col-md-6">
                                <div class="d-flex align-items-center gap-2">
                                  <label for="SUS_NAME" class="text-nowrap">
                                    {{ "SUS_NAME" | translate }}<span class="mandatory">*</span>
                                  </label>
                                  <div class="position-relative w-100">
                                    <input type="text" id="SUS_NAME" class="form-control"
                                      formControlName="SUS_NAME"
                                      placeholder="{{ 'SUS_NAME' | translate }}"
                                      appNoWhitespaces />
                                    <div class="text-danger"
                                      *ngIf="thirdPartyForm.get('SUS_NAME')?.touched && thirdPartyForm.get('SUS_NAME')?.invalid">
                                      <div *ngIf="thirdPartyForm.get('SUS_NAME')?.errors?.['required']">
                                        {{ "fieldRequired" | translate }}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>

                              <!-- SUS_PASSWORD -->
                              <div class="col-md-6">
                                <div class="d-flex align-items-start gap-2">
                                  <label for="SUS_PASSWORD" class="text-nowrap">
                                    {{ "SUS_PASSWORD" | translate }}<span class="mandatory">*</span>
                                  </label>
                                  <div class="w-100">
                                    <div class="password-wrapper">
                                    <input [type]="passwordType" id="SUS_PASSWORD" class="form-control" formControlName="SUS_PASSWORD"
                                      placeholder="{{ 'SUS_PASSWORD' | translate }}" appNoWhitespaces />
                                        <app-password-hide-show #passShowMenu class="password-eye align-items" [showPassword]="true"
                                          (onEyeClick)="toggleSetupPass()"></app-password-hide-show>
                                    </div>
                                    <div class="text-danger"
                                      *ngIf="thirdPartyForm.get('SUS_PASSWORD')?.touched && thirdPartyForm.get('SUS_PASSWORD')?.invalid">
                                      <div *ngIf="thirdPartyForm.get('SUS_PASSWORD')?.errors?.['required']">
                                        {{ "fieldRequired" | translate }}
                                      </div>
                                      <div *ngIf="thirdPartyForm.get('SUS_PASSWORD')?.errors?.['pattern']">
                                        {{ "passwordPattern" | translate }}
                                      </div>
                                    </div>
                                  </div>
                                  </div>
                                  </div>
                            </div>

                            <div class="row g-3 mb-3">
                              <!-- SUS_EMAIL -->
                              <div class="col-md-6">
                                <div class="d-flex align-items-center gap-2">
                                  <label for="SUS_EMAIL" class="text-nowrap">
                                    {{ "SUS_EMAIL" | translate }}<span class="mandatory">*</span>
                                  </label>
                                  <div class="position-relative w-100">
                                    <input type="email" id="SUS_EMAIL" class="form-control"
                                      formControlName="SUS_EMAIL"
                                      placeholder="{{ 'SUS_EMAIL' | translate }}"
                                      appNoWhitespaces />
                                    <div class="text-danger"
                                      *ngIf="thirdPartyForm.get('SUS_EMAIL')?.touched && thirdPartyForm.get('SUS_EMAIL')?.invalid">
                                      <div *ngIf="thirdPartyForm.get('SUS_EMAIL')?.errors?.['required']">
                                        {{ "fieldRequired" | translate }}
                                      </div>
                                      <div *ngIf="thirdPartyForm.get('SUS_EMAIL')?.errors?.['email']">
                                        {{ "invalidEmail" | translate }}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>

                              <!-- SUS_USERCELLNO -->
                              <div class="col-md-6">
                                <div class="d-flex align-items-center gap-2">
                                  <label for="SUS_USERCELLNO" class="text-nowrap">
                                    {{ "SUS_USERCELLNO" | translate }}<span class="mandatory">*</span>
                                  </label>
                                  <div class="position-relative w-100">
                                    <input type="tel" id="SUS_USERCELLNO" class="form-control"
                                      formControlName="SUS_USERCELLNO"
                                      placeholder="{{ 'SUS_USERCELLNO' | translate }}"
                                      (keypress)="onlyNumbers($event)"
                                      appNoWhitespaces />
                                    <div class="text-danger"
                                      *ngIf="thirdPartyForm.get('SUS_USERCELLNO')?.touched && thirdPartyForm.get('SUS_USERCELLNO')?.invalid">
                                      <div *ngIf="thirdPartyForm.get('SUS_USERCELLNO')?.errors?.['required']">
                                        {{ "fieldRequired" | translate }}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>

                            <div class="row g-3 mb-3">
                              <!-- SUS_ACTIVE -->
                              <div class="col-md-6">
                                <div class="d-flex align-items-center gap-2">
                                  <input type="checkbox" id="SUS_ACTIVE" class="form-check-input"
                                    formControlName="SUS_ACTIVE" />
                                  <label for="SUS_ACTIVE" class="form-check-label">
                                    {{ "SUS_ACTIVE" | translate }}
                                  </label>
                                </div>
                              </div>

                              <!-- SUS_THIRDPARTY -->
                              <div class="col-md-6">
                                <div class="d-flex align-items-center gap-2">
                                  <input type="checkbox" id="SUS_THIRDPARTY" class="form-check-input"
                                    formControlName="SUS_THIRDPARTY" />
                                  <label for="SUS_THIRDPARTY" class="form-check-label">
                                    {{ "SUS_THIRDPARTY" | translate }}
                                  </label>
                                </div>
                              </div>
                            </div>

                            <div class="text-end mt-3">
                              <button class="btn btn-primary btn-sm px-4" (click)="submitForm()">
                                {{ "save" | translate }}
                              </button>
                            </div>

                          </form>

                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

    </div>
  </div>
</div>