

 <div class="layout-container">
  <app-side-menu></app-side-menu>
   <div class="content-area">
       <app-main-header></app-main-header>
       <div class="container-fluid">
           <div class="row">
               <div class="col-sm-12">
                   <div class="content-wrapper">
                    <div class="header-content">
                      <svg  (click)="goBackButton()" style="cursor: pointer; margin-top: 15px;" width="24" height="25" viewBox="0 0 24 25" fill="none"
                          xmlns="http://www.w3.org/2000/svg">
                          <path d="M19 12.5H5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                          <path d="M12 19.5L5 12.5L12 5.5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                      </svg>
                      <h3 style="font-family: Roboto; font-size: 24px;">Change Password </h3>
                   </div>
                   <div class="row" style="gap:40px">
                    <!-- First Box - Password Requirements -->
                    <div class="col-sm-5">
                      <div class="password-box">
                        <h5>Password must contain</h5>
                        <div>
                          <ul style="list-style-type: disc; padding-left: 20px;">
                            <li>Should have a minimum of 8 characters</li>
                            <li>Should contain at least 1 uppercase letter</li>
                            <li>Should contain at least 1 lowercase letter</li>
                            <li>Should contain at least 1 special character</li>
                            <li>Should contain at least 1 number</li>
                            <li>Should not start or end with a blank space</li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  
                    <!-- Second Box - Password Change Form -->
                    <div class="col-sm-6">
                      <div class="password-change-box">
                        <p id="title" style="color: black; padding-left: 30px; padding-top: 10px;">Set a strong password to prevent unauthorized access to your account.</p>
                        <div class="card-body">
                          <div style="margin: 30px; margin-top: 20px;">
                         
                          <!-- Current Password -->
                          <div>
                          <div id="oldPasswordDiv" class="mb-2" style="position: relative;">
                            <label id="oldPasswordLabel" style="color: black; font-size: 15px;">Current Password</label>
                            <input 
                                type="{{isPasswordVisible ? 'text' : 'password'}}" 
                                id="oldPassword" 
                                name="oldPassword" 
                                placeholder="Enter Current Password" 
                                class="form-input" 
                                minlength="8" 
                                maxlength="16" 
                                (copy)="disableEvent($event)"
                              (paste)="disableEvent($event)"
                              (cut)="disableEvent($event)"
                              (contextmenu)="disableEvent($event)"
                                [(ngModel)]="user.oldPassword"
                                [type]="isPasswordVisible ? 'text' : 'password'"
                                (input)="checkOldPassword()"
                            />
                            
                            <!-- Eye icon to toggle password visibility -->
                            <i 
                                class="fas" 
                                [ngClass]="isPasswordVisible ? 'fa-eye' : 'fa-eye-slash'" 
                                (mousedown)="isPasswordVisible = true"
                                (mouseup)="isPasswordVisible = false"
                                (mouseleave)="isPasswordVisible = false"
                                style="position: absolute; top: 80%; right: 10px; transform: translateY(-80%); cursor: pointer;"z
                                >
                            </i>
                        </div>
                       <div *ngIf="!CurrentpasswordNameInput" class="error-message">{{ CurrentpasswordErrorMessage }}</div>
                       <div *ngIf="oldPasswordErrorMessage" class="error-message">
                        {{ oldPasswordErrorMessage }}
                      </div>
                      
                      <!-- Show success message if old password is correct -->
                      <div *ngIf="oldPasswordSuccessMessage" class="success-message" >
                        {{ oldPasswordSuccessMessage }}
                      </div>
                   
                  
                          <!-- New Password -->
                          <div id="nPasswordDiv" class="mb-2" style="position: relative;">
                            <label id="nPasswordLabel" style="font-size: 15px; color: black;">New Password</label>
                            <input
                                type="{{isNewPasswordVisible ? 'text' : 'password'}}"
                                id="newPassword"
                                name="newPassword"
                                placeholder="Enter New Password"
                                class="form-input"
                                minlength="8"
                                maxlength="16"
                                (copy)="disableEvent($event)"
                              (paste)="disableEvent($event)"
                              (cut)="disableEvent($event)"
                              (contextmenu)="disableEvent($event)"
                                [(ngModel)]="user.newPassword"
                                [type]="isNewPasswordVisible ? 'text' : 'password'"
                                (input)="newpasswordChange()"
                            />
                           
                            <!-- Eye icon to toggle password visibility -->
                            <i
                                class="fas"
                                [ngClass]="isNewPasswordVisible ? 'fa-eye' : 'fa-eye-slash'"
                                (mousedown)="isNewPasswordVisible = true"
                                (mouseup)="isNewPasswordVisible = false"
                                (mouseleave)="isNewPasswordVisible = false"
                                style="position: absolute; top: 80%; right: 10px; transform: translateY(-80%); cursor: pointer;"
                    >
                            </i>
                        </div>
                        <div *ngIf="!passwordNameInput" class="error-message" style="margin-bottom: 5px;">{{ passwordErrorMessage }}</div>
                        <div *ngIf="newPasswordErrorMessage" class="error-message">
                          {{ newPasswordErrorMessage }}
                        </div>
                        <div *ngIf="newPasswordSuccessMessage" class="success-message" >
                          {{ newPasswordSuccessMessage }}
                        </div>
                          <!-- Confirm Password -->
                          <div id="passwordDiv" class="mb-2" style="position: relative;">
                            <label id="passwordLabel" style="color: black; font-size: 15px;">Confirm Password</label>
                            <input 
                                type="{{isConfirmPasswordVisible ? 'text' : 'password'}}" 
                                id="confirmPassword" 
                                name="confirmPassword" 
                                placeholder="Confirm New Password" 
                                class="form-input" 
                                minlength="8" 
                                maxlength="16" 
                                (copy)="disableEvent($event)"
                              (paste)="disableEvent($event)"
                              (cut)="disableEvent($event)"
                              (contextmenu)="disableEvent($event)"
                              [type]="isConfirmPasswordVisible ? 'text' : 'password'"
                                [(ngModel)]="user.confirmPassword"
                                (input)="confirmPasswordChange()"
                            />
                            
                            <!-- Eye icon to toggle password visibility -->
                            <i 
                                class="fas" 
                                [ngClass]="isConfirmPasswordVisible ? 'fa-eye' : 'fa-eye-slash'" 
                                (mousedown)="isConfirmPasswordVisible = true"
                                (mouseup)="isConfirmPasswordVisible = false"
                                (mouseleave)="isConfirmPasswordVisible = false"
                                style="position: absolute; top: 80%; right: 10px; transform: translateY(-80%); cursor: pointer;" 
                                >
                            </i></div>
                            <div *ngIf="!confirmPasswordInput" class="error-message" style="margin-bottom: 5px;">{{ confirmPasswordErrorMessage }}</div>
                        </div>
                        
                      
                  
                          <div class="row mt-4">
                            <div class="col-sm-12 d-flex justify-content-end align-items-center">
                              <!-- Update Button -->
                              <button type="submit" style="width:174px; height: 40px;" class="btn btn-primary updateButton" 
                              (click)="changePasswordButton()" [disabled]="passwordUpdated">Update</button>
                            
                              <!-- Cancel Button with small gap -->
                              <button type="button" style="width: 174px; margin-left: 20px;" class="btn btn-outline-danger" (click)="cancelButton()" id="clear" data-toggle="modal"
                              data-target="#exampleModalCenter">Cancel</button>
                            </div>
                          </div>
                          
                          
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  
                
                   </div></div></div></div></div></div>
                   <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
                   aria-hidden="true">
                   <div class="modal-dialog modal-dialog-centered" role="document">
                     <div class="modal-content" style="width: fit-content;margin-left: 0;">
               
                       <div class="modal-body">
                         <p id="last-para">Are you sure you don't want to change your password?</p>
                       </div>
               
                       <div class="pop-container">
                         <button class="btn btn-primary " (click)="goBack()">Yes</button>
                         <button class="btn btn-danger" (click)="cancelButton()">No</button>
                       </div>
                     </div>
                   </div>
                 </div>
           