<admin-page-header [title]="'Projects'"></admin-page-header>

<!-- Project List-->
<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card ">
    <div class="card-header border-0 d-md-max-block">
      <h4 class="card-title mb-lg-0 mb-2">{{'Projects'| translate}}</h4>
      <div class="card-options d-md-max-block">
        @if (permission?.includes('Project Create')) {
          <a (click)="addModelPopup(addProjectmodal)" href="javascript:void(0)" class="btn btn-success me-3 mb-md-max-2 mw-10" id="create-new-projects">{{'Add Project' |
          translate}}</a>
        }
        @if (permission?.includes('Project Assign')) {
          <a (click)="assignModelPopup(assignProjectmodal)" href="javascript:void(0)" class="btn btn-danger me-3  mb-md-max-2 mw-10" id="projectsassign">{{'Assign Projects' |
          translate}}</a>
        }
        @if (permission?.includes('Project Importlist')) {
          <a routerLink="/admin/projects/import" class="btn btn-info me-3  mb-md-max-2 mw-10" id="importfile"><i class="feather feather-download"></i> {{'Import file' | translate}}</a>
        }

      </div>
    </div>
    <div class="card-body">
      <div class="table-responsive spruko-delete">
        <div class="table-options">
          <div class="custom-buttons">
            @if (permission?.includes('Project Delete')) {
              <button type="button" [disabled]="sendingResponse['massdeleteprojects']" (click)="massDeleteProject('massdeleteprojects')" id="massdelete"
                class="btn btn-outline-light btn-sm mb-4 d-inline-flex align-items-center"><i class="fe fe-trash me-1"></i> {{'Delete'
                | translate}}
                @if (sendingResponse['massdeleteprojects']) {
                  <i class="fa fa-spinner fa-spin mx-1"></i>
                }</button>
              }
            </div>
            <mat-form-field class="pull-right">

              <input type="text" matInput (keyup)="applyFilter($event)" [placeholder]="'search' | translate" #input>
            </mat-form-field>
          </div>
          <div>
            @if (isloader) {
              <mat-progress-bar mode="indeterminate"></mat-progress-bar>
            }
            <table class="table table-bordered border-bottom text-nowrap ticketdeleterow w-100 dataTable no-footer dtr-inline" mat-table [dataSource]="dataSource" matSort>

              <!-- Sno Column -->
              <ng-container matColumnDef="sno">
                <th scope="col" class="wpx-40 text-center" mat-header-cell *matHeaderCellDef mat-sort-header="id"> {{'Sl.No' | translate}}
                </th>
                <td mat-cell *matCellDef="let row; let i = index" class="wpx-40 text-center"> {{i + 1 + (paginator.pageIndex * paginator.pageSize)}}
                </td>
              </ng-container>
              <!-- Checkbox Column -->
              <ng-container matColumnDef="select">
                <th scope="col" mat-header-cell class="wpx-40 text-center" *matHeaderCellDef>
                  <mat-checkbox (change)="$event ? toggleAllRows() : null" [checked]="selection.hasValue() && isAllSelected()" [indeterminate]="selection.hasValue() && !isAllSelected()"
                    [aria-label]="checkboxLabel()">
                  </mat-checkbox>
                </th>
                <td mat-cell class="wpx-40 text-center" *matCellDef="let row">
                  <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)"
                    [aria-label]="checkboxLabel(row)">
                  </mat-checkbox>
                </td>
              </ng-container>

              <!-- ticketdetails Column -->
              <ng-container matColumnDef="name">
                <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="name"> {{'Name' | translate}}
                </th>
                <td mat-cell *matCellDef="let row">
                  {{row?.name.slice(0, 40)}}
                </td>

              </ng-container>


              <!-- Actions Column -->
              <ng-container matColumnDef="actions">
                <th scope="col" mat-header-cell *matHeaderCellDef> {{'Actions' | translate}} </th>
                <td mat-cell *matCellDef="let row; let i = index">

                  <div>
                    @if (permission?.includes('Project Edit')) {
                      <button aria-label="Edit" (click)="editModelPopup(editProjectmodal, row)" class="action-btns1">
                        <i class="feather feather-edit text-primary" [ngbTooltip]="'Edit' | translate"></i>
                      </button>
                    }
                    @if (permission?.includes('Project Delete')) {
                      <button aria-label="delete" [disabled]="sendingResponse['deleteproject'+i]" (click)="deleteProject(row, 'deleteproject'+i)" class="action-btns1"
                        id="delete-testimonial">
                        <i class="feather feather-trash-2 text-danger" [ngbTooltip]="'Delete' | translate"></i>
                        @if (sendingResponse['deleteproject'+i]) {
                          <i class="fa fa-spinner fa-spin mx-1"></i>
                        }
                      </button>
                    }
                  </div>
                </td>
              </ng-container>

              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

              <!-- Row shown when there is no matching data. -->
              <tr class="mat-row" *matNoDataRow>
                @if (!input.value.length) {
                  <td class="mat-cell text-center" colspan="12">
                    {{'No data Found'| translate}}
                  </td>
                } @else {
                  <td class="mat-cell text-center" colspan="12"> {{'No data matching the filter'| translate}} " {{input.value}} " </td>
                }
              </tr>
            </table>

            <mat-paginator #paginator showFirstLastButtons [pageSizeOptions]="[10, 25, 50, 100]" (page)="onPaginateTable()" aria-label="Select page of users" [length]="paginator?.length"
              [pageIndex]="paginator?.pageIndex" [pageSize]="paginator?.pageSize">
            </mat-paginator>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Project List-->


  <!-- // add Project to agent modal start -->
  <ng-template #addProjectmodal let-modal>
    <div class="modal-header">
      <h5 class="modal-title">{{'Add Project' | translate}}</h5>
      <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
      </button>
    </div>
    <div class="modal-body">
      <form #addProjectData="ngForm" id="addProjectData" (ngSubmit)="addProject(addProjectData, 'addprojects')">

        @if (projectid) {
          <input type="hidden" name="id" id="projectid" [ngModel]="projectid">
        }
        <label class="form-label">{{'Name' | translate}} <span class="text-red">*</span></label>
        <input type="text" #name="ngModel" [class.is-invalid]="name.invalid && name.touched" required class="form-control" name="name" id="name" [ngModel]="projectname">
        @if ((name.invalid && name.touched) || name.dirty) {
          <div>
            @if (name.errors?.['required']) {
              <small class="text-danger">{{'Name is required' | translate}}</small>
            }
          </div>
        }

      </form>
    </div>
    <div class="modal-footer">
      <a href="javascript:;" class="btn btn-outline-danger" (click)="modal.dismiss('Close click')">{{'Close' |
      translate}}</a>
      <button type="submit" form="addProjectData" [disabled]="addProjectData.invalid || sendingResponse['addprojects']" class="btn btn-secondary" id="btnsave">{{'Save'| translate}}@if (sendingResponse['addprojects']) {
        <i
        class="fa fa-spinner fa-spin mx-1"></i>
      }</button>
    </div>
  </ng-template>
  <!-- // add Project to agent modal end -->
  <!-- // edit Project to agent modal start -->
  <ng-template #editProjectmodal let-modal>
    <div class="modal-header">
      <h5 class="modal-title">{{'Edit Project' | translate}}</h5>
      <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
      </button>
    </div>
    <div class="modal-body">
      <form #editProjectData="ngForm" id="editProjectData" (ngSubmit)="editProject(editProjectData, 'editproject')">

        @if (projectid) {
          <input type="hidden" name="id" [ngModel]="projectid">
        }
        <label class="form-label">{{'Name' | translate}} <span class="text-red">*</span></label>
        <input type="text" #name="ngModel" [class.is-invalid]="name.invalid && name.touched" required class="form-control" name="name" [ngModel]="projectname">
        @if ((name.invalid && name.touched) || name.dirty) {
          <div>
            @if (name.errors?.['required']) {
              <small class="text-danger">{{'Name is required' | translate}}</small>
            }
          </div>
        }
      </form>

    </div>
      <div class="modal-footer">
        <a href="javascript:;" class="btn btn-outline-danger" (click)="modal.dismiss('Close click')">{{'Close' |
        translate}}</a>
        <button type="submit" form="editProjectData" [disabled]="editProjectData.invalid || sendingResponse['editproject']" class="btn btn-secondary">{{'Update'| translate}}@if (sendingResponse['editproject']) {
          <i
          class="fa fa-spinner fa-spin mx-1"></i>
        }
      </button>
      </div>
  </ng-template>
  <!-- // edit Project to agent modal end -->
  <!-- // Assignproject to agent modal start -->
  <ng-template #assignProjectmodal let-modal>
    <div class="modal-header">
      <h5 class="modal-title">{{'Assign Project' | translate}}</h5>
      <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
      </button>
    </div>
    <div class="modal-body">
      <form #assProjectData="ngForm" id="assProjectData" (ngSubmit)="assignProject(assProjectData, 'assignproject')">
        <input type="hidden" name="projects_id" id="projects_id">
        <!-- <div class="modal-body"> -->
          <div class="form-group">
            <label class="form-label">{{'Select category' | translate}} <span class="text-danger">*</span> </label>
            <div class="custom-controls-stacked d-md-flex">
              <ng-select required class="form-control" [items]="categories" [loading]="!categories" #category_idselect [placeholder]="'Select category' | translate" [virtualScroll]="true"
                bindLabel="name" [multiple]="true" [searchable]="true" dropdownPosition="auto" bindValue="id" name="category_id" [ngModel]="selCat" #categorie="ngModel"  [class.is-invalid]="categorie.invalid && categorie.touched">
                <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                  <div><span>{{item?.name}}</span></div>
                </ng-template>
              </ng-select>
            </div>
            @if((categorie.invalid && categorie.touched) || categorie.dirty){
              <div>
                  @if(categorie.errors?.['required']){
                      <small class="text-danger"> {{'categorie is required' | translate}}</small>
                  }
              </div>
          }
          </div>
          <div class="form-group">
            <label class="form-label">{{'Projects' | translate}}</label>
            <div class="custom-controls-stacked d-md-flex">
              <input type="text" class="form-control" [disabled]="true" [value]="'All Projects Selected' | translate">
            </div>
          </div>
        <!-- </div> -->
      </form>
    </div>
        <div class="modal-footer">
          <a href="javascript:;" class="btn btn-outline-danger" (click)="modal.dismiss('Close click')">{{'Close' |
          translate}}</a>
          <button type="submit" form="assProjectData" [disabled]="assProjectData.invalid || sendingResponse['assignproject']" class="btn btn-secondary">{{'Save' | translate}}@if (sendingResponse['assignproject']) {
            <i
            class="fa fa-spinner fa-spin mx-1"></i>
          }</button>
        </div>
  </ng-template>
  <!-- // Assignproject to agent modal end -->