<app-dns-loading [isDnsLoading]="isLoadingData"></app-dns-loading>
<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="button-svg-container" style="margin-top: 80px;  ">
                <h1 style="margin-bottom: 10px;font-weight:500">
                    Departments
                   </h1>
                <div style="display: flex;gap:20px">
                    
                    
                       <h3>
                        <button class="btn btn-primary" data-toggle="modal" data-target="#addModal">Add Department</button>
                    </h3>
                       <div style="position: relative;width: 200px;">
                         <i class="fas fa-search" style="position: absolute; right: 10px; top: 35%; transform: translateY(-50%); color: #ccc; /* Light gray color */"></i>
                         <input type="text" placeholder="Search"
                                style="margin-left: 0px; padding: 8px 10px; height: 38px;
                                      width:100%; margin-top: 0px; margin-bottom: 0px; padding-right: 35px; /* Increased padding-right */"
                                [(ngModel)]="searchText" (ngModelChange)="applyFilter()" matInput #input>
                       </div>
                </div>
                
            </div>
            
            <section class="example-container ">
                <table id="departmentTable" *ngIf="departmentDataSource.data.length > 0"
                    mat-table  [dataSource]="departmentDataSource"  matScrollable matSort >
                    <ng-container matColumnDef="checkbox">
                        <th mat-header-cell *matHeaderCellDef >
                            <input type="checkbox" id="mainCheckBox" />
                        </th>
                        <td mat-cell class="trbody" *matCellDef="let department; let i=index">
                            <input id="subCheckBox{{i}}" name="subCheckBox" class="subCheckBox" type="checkbox" value="{{department.departmentId}}"
                                        />
                        </td>
                    </ng-container>
                    <!-- <ng-container matColumnDef="departmentId">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header >ID</th>
                        <td mat-cell *matCellDef="let department" >{{department.departmentId}}</td>
                      </ng-container> -->
                      <ng-container matColumnDef="departmentId">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
                        <td mat-cell *matCellDef="let department">
                          {{department.departmentId}}  </td>
                      </ng-container>
        
        
                      <ng-container matColumnDef="departmentName">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Department Name</th>
                        <td mat-cell *matCellDef="let department" id="department-desc" > {{department.departmentName}} </td>
                      </ng-container>

                      <ng-container matColumnDef="departmentCode">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Department Code</th>
                        <td mat-cell *matCellDef="let department" id="department-desc" > {{department.departmentCode}} </td>
                      </ng-container>
        
        
                      
                      <!-- <ng-container matColumnDef="permissionValue">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Permissions</th>
                        <td mat-cell *matCellDef="let department" class="thAssigneddepartment4">
                          {{ department.permission.permissionValue }}
                        </td>
                      </ng-container> -->
                      
        
                      <ng-container matColumnDef="departmentStatus">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Created By</th>
                        <td mat-cell *matCellDef="let department"> {{department.createdBy}} </td>
                      </ng-container>
        
                      <ng-container matColumnDef="createdDateTime">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header >Created Date & Time</th>
                        <td mat-cell *matCellDef="let department"> {{department.createdDateTime?(department.createdDateTime+""| date:'MMM d, y, h:mm a'):"NA"}} </td>
                        
                      </ng-container>
        
                      <ng-container matColumnDef="modifiedBy">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header >Modified By</th>
                        <td mat-cell *matCellDef="let department"> {{department.modifiedBy}} </td>
                      </ng-container>
        
                      <ng-container matColumnDef="modifiedDateTime" >
                        <th mat-header-cell *matHeaderCellDef mat-sort-header >Modified Date & Time</th>
                        <td mat-cell *matCellDef="let department"> {{department.modifiedDateTime?(department.modifiedDateTime+""| date:'MMM d, y, h:mm a'):"NA"}}  </td>
                        
                      </ng-container>

                      <ng-container matColumnDef="active" >
                        <th mat-header-cell *matHeaderCellDef mat-sort-header >Status</th>
                        <td mat-cell *matCellDef="let department"> {{department.active}}</td>
                        
                      </ng-container>
        
                      <ng-container matColumnDef="edit">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header >Edit</th>
                        <td mat-cell *matCellDef="let department" > 
                           
                            <button  id="editIcon" name="editIcon"  (click)="fetchOneDepartment(department.departmentId)"  data-toggle="modal"
                            data-target="#updateModal"  >
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
                            fill="#5590AA">
                                <g id="edit" >
                                    <path id="Vector"
                                        d="M2.5 14.3761V17.5007H5.62543L14.8475 8.28116L11.7221 5.15659L2.5 14.3761ZM17.2562 5.87316C17.5813 5.54821 17.5813 5.01911 17.2562 4.69416L15.3101 2.7486C14.9851 2.42364 14.4558 2.42364 14.1308 2.7486L12.6056 4.27339L15.731 7.39795L17.2562 5.87316Z"
                                        />
                                </g>
                            </svg>
                        </button>
                        </td>
                        </ng-container>
        
                        <ng-container matColumnDef="delete">
                            <th mat-header-cell *matHeaderCellDef mat-sort-header >
                                    Delete
                            </th>
                            <td mat-cell *matCellDef="let department" > 
                                <!--(click)="deletedepartmentById(department.departmentId)"-->
                                <button (click)="deletedepartmentById(department.departmentId)"  id="trashIcon" >
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                        fill="#000000" version="1.1" id="Capa_1" width="15px" height="18px"
                                        viewBox="0 0 482.428 482.429" xml:space="preserve">
                                        <g>
                                            <g fill="#EB5547" >
                                                <path
                                                    d="M381.163,57.799h-75.094C302.323,25.316,274.686,0,241.214,0c-33.471,0-61.104,25.315-64.85,57.799h-75.098    c-30.39,0-55.111,24.728-55.111,55.117v2.828c0,23.223,14.46,43.1,34.83,51.199v260.369c0,30.39,24.724,55.117,55.112,55.117    h210.236c30.389,0,55.111-24.729,55.111-55.117V166.944c20.369-8.1,34.83-27.977,34.83-51.199v-2.828    C436.274,82.527,411.551,57.799,381.163,57.799z M241.214,26.139c19.037,0,34.927,13.645,38.443,31.66h-76.879    C206.293,39.783,222.184,26.139,241.214,26.139z M375.305,427.312c0,15.978-13,28.979-28.973,28.979H136.096    c-15.973,0-28.973-13.002-28.973-28.979V170.861h268.182V427.312z M410.135,115.744c0,15.978-13,28.979-28.973,28.979H101.266    c-15.973,0-28.973-13.001-28.973-28.979v-2.828c0-15.978,13-28.979,28.973-28.979h279.897c15.973,0,28.973,13.001,28.973,28.979    V115.744z" />
                                                <path
                                                    d="M171.144,422.863c7.218,0,13.069-5.853,13.069-13.068V262.641c0-7.216-5.852-13.07-13.069-13.07    c-7.217,0-13.069,5.854-13.069,13.07v147.154C158.074,417.012,163.926,422.863,171.144,422.863z" />
                                                <path
                                                    d="M241.214,422.863c7.218,0,13.07-5.853,13.07-13.068V262.641c0-7.216-5.854-13.07-13.07-13.07    c-7.217,0-13.069,5.854-13.069,13.07v147.154C228.145,417.012,233.996,422.863,241.214,422.863z" />
                                                <path
                                                    d="M311.284,422.863c7.217,0,13.068-5.853,13.068-13.068V262.641c0-7.216-5.852-13.07-13.068-13.07    c-7.219,0-13.07,5.854-13.07,13.07v147.154C298.213,417.012,304.067,422.863,311.284,422.863z" />
                                            </g>
                                        </g>
                                    </svg>
                                </button>
                            </td>
                            </ng-container>
                        <tr mat-header-row matSort *matHeaderRowDef="displayedDepartmentColumn" class="department-header"></tr>
                        <tr mat-row *matRowDef="let row; columns: displayedDepartmentColumn;"class="department-row"></tr>
                        <tr class="mat-row" *matNoDataRow>
                            <td  [attr.colspan]="displayedDepartmentColumn?.length" style="text-align:center;font-size:13px" >No data matching the search</td>
                        </tr>
        
                    </table>
        
            </section>
            <mat-paginator [pageSizeOptions]="[5, 10, 20 ]"
                           showFirstLastButtons [pageSize]="10"
                           aria-label="Select page of periodic elements">
        </mat-paginator>
        </div>
    </div>
</div>

<div class="modal fade" id="addModal" data-backdrop="static"
 data-keyboard="false" tabindex="-1" role="dialog"
    aria-labelledby="xlModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header" style=" background: #EDECFC; color: #000000;" id="modalHeader">
                <h5 class="modal-title" id="xlModalLabel">Add Department</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" style=" padding: 5px; padding-top: 0px;"
                        (click)="clearErrorMessages()">&times;</span>
                </button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <label style="font-weight: 500;">Department Name<span id="required">*</span></label>
                <input type="text" class="deptInput form-control" placeholder="Department Name"
                    [(ngModel)]="department.departmentName" (keyup)="validateDepartmentName()" minlength="2"
                    maxlength="31" /><br />
                <span *ngIf="departmentNameErrorInfo != ''">
                    <p id="errorMessage">{{departmentNameErrorInfo}}</p>
                </span>
                <!--   -->
               
                <!--  -->
                <label style="font-weight: 500;">Department Code<span id="required">*</span></label>
                <input type="text"  id="departmentCode" class="deptInput form-control" placeholder="Department Code"
                    [(ngModel)]="department.departmentCode" (keyup)="validateDepartmentCode()" minlength="1"
                    maxlength="16" /><br />
                <span *ngIf="departmentCodeErrorInfo != ''">
                    <p id="errorMessage">{{departmentCodeErrorInfo}}</p>
                </span>
                <!--  -->
                
                <!--  -->
            </div>
            <!-- Modal footer -->
            <div class="modal-footer" role="alert">
                <button type="submit" class="btn btn-primary saveButton" (click)="createDepartment()">Save</button>
                <!-- <button type="button" class="btn btn-secondary" data-dismiss="modal"
                        (click)=" clearErrorMessages(form)">Close</button> -->
                <button type="button" id="closeAddModal" class="btn btn-outline-danger closeButton" data-dismiss="modal"
                    (click)="clearErrorMessages()">Cancel</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="updateModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog"
    aria-labelledby="xlModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header" id="modalHeader" style=" background: #EDECFC; color: #000000;">
                <h5 class="modal-title" id="xlModalLabel">Update Department</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" style="padding: 5px; padding-top: 0px;"
                        (click)="clearErrorMessages()">&times;</span>
                </button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <label style="font-weight: 500;">Department Name<span id="required">*</span></label>
                <input type="text" class="deptInput form-control" placeholder="Department Name"
                    [(ngModel)]="existingDepartment.departmentName" (keyup)="validateUpdatedDepartmentName()"
                    minlength="3" maxlength="31" /><br />
                <span *ngIf="updatedDepartmentNameErrorInfo != ''">
                    <p id="errorMessage">{{updatedDepartmentNameErrorInfo}}</p>
                </span>
                <!--   -->
              
                <!--  -->
                <label style="font-weight: 500;">Department Code<span id="required">*</span></label>
                <input type="text" id="departmentCode" class="deptInput form-control" placeholder="Department Code"
                    [(ngModel)]="existingDepartment.departmentCode" (keyup)="validateUpdatedDepartmentCode()"
                    minlength="1" maxlength="16" /><br />
                <span *ngIf="updatedDepartmentCodeErrorInfo != ''">
                    <p id="errorMessage">{{updatedDepartmentCodeErrorInfo}}</p>
                </span>
                <!--  -->
                
                <!--  -->
            </div>
            <!-- Modal footer -->
            <div class="modal-footer" role="alert">
                <button type="submit" class="btn btn-primary saveButton" (click)="modifyDepartment()">Save</button>
                <!-- <button type="button" class="btn btn-secondary" data-dismiss="modal"
                        (click)=" clearErrorMessages(form)">Close</button> -->
                <button type="button" id="closeUpdateModal" class="btn btn-outline-danger closeButton"
                    data-dismiss="modal" (click)="clearErrorMessages()">Cancel</button>
            </div>
        </div>
    </div>
</div>
<div  hidden id="depDelete"  data-toggle="modal"
data-target="#deleteConfirmModal"  ></div>
<div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="deleteConfirmModalLabel">Confirm Deletion</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          Are you sure you want to delete department <strong>{{ departmentToDelete }}</strong>?
        </div>
        <div class="modal-footer">
          
          <button type="button" class="btn btn-danger" (click)="confirmDelete()" data-bs-dismiss="modal">Delete</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        </div>
      </div>
    </div>
  </div>