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

<div class="card">
  <div class="card-header  border-0">
    <h4 class="card-title">{{'Holidays Lists' | translate}}</h4>
    <div class="card-options mt-sm-max-2 d-md-max-block">

      @if (permission?.includes('Holidays Create')) {
      <a (click)="addModelPopup(addholidaymodal)" href="javascript:void(0)"
        class="btn btn-success me-3 mb-md-max-2 mw-10 text-capitalize" id="create-new-holidays">{{'Add holiday' |
        translate}}</a>
      }
      @if (permission?.includes('Holidays Import Access')) {
      <a routerLink="/admin/holidays/import" class="btn btn-info me-3  mb-md-max-2 mw-10" id="importfile"><i
          class="feather feather-download"></i> {{'Import Holidays List' |
        translate}}</a>
      }
    </div>
  </div>

  <div class="card-body">
    <div class="table-responsive spruko-delete">
      @if (permission?.includes('Holidays Delete')) {
      <button type="button" [disabled]="sendingResponse['massdeleteholiday']"
        (click)="massDeleteholiday('massdeleteholiday')" 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['massdeleteholiday']) {
        <i class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      }
      <mat-form-field class="pull-right">

        <input type="text" matInput (keyup)="applyFilter($event)" [placeholder]="'search' | translate" #input>
      </mat-form-field>
      @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>

        <!-- ocassion Column -->
        <ng-container matColumnDef="ocassion">
          <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="ocassion"> {{'Name' | translate}}
          </th>
          <td mat-cell *matCellDef="let row">
            {{row?.occasion}}
          </td>

        </ng-container>
        <!-- Day Column -->
        <ng-container matColumnDef="day">
          <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="day"> {{'Day' | translate}}
          </th>
          <td mat-cell *matCellDef="let row">
            @if (row['enddate'] == row['startdate']) {
            {{row?.startdate | date : 'EEEE'}}
            } @else {
            {{row?.startdate | date : 'EEEE'}} -- {{row?.enddate | date : 'EEEE'}}
            }
          </td>

        </ng-container>
        <!-- Date Column -->
        <ng-container matColumnDef="date">
          <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="date"> {{'Date' | translate}}
          </th>
          <td mat-cell *matCellDef="let row">
            {{
            row.is_fixed == '1' ?
            (row?.startdate | date:'d MMM') + ' -- ' + (row?.enddate | date:'d MMM') :
            (row?.startdate | date:'d MMM y') + ' -- ' + (row?.enddate | date:'d MMM y')
            }}
          </td>

        </ng-container>
        <!-- Status Column -->
        <ng-container matColumnDef="status">
          <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="status"> {{'Status' | translate}}
          </th>
          <td mat-cell *matCellDef="let row">
            @if (permission?.includes('Holidays Edit')) {
            <label class="custom-switch form-switch mb-0">
              <input type="checkbox" name="status" data-id="{{row?.id}}" (click)="statusUpdate(row)"
                id="myonoffswitch{{row?.id}}" value="1" class="custom-switch-input tswitch"
                [checked]="row.status == '1' ? true : false">
              <span class="custom-switch-indicator"></span>
            </label>
            }
          </td>

        </ng-container>

        <!-- type Column -->
        <ng-container matColumnDef="type">
          <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="type"> {{'Holiday Type' | translate}}
          </th>
          <td mat-cell *matCellDef="let row">
            {{ row.is_fixed == '1' ? ('Repeats every year' | translate) : ('Only once in year' | translate) }}
          </td>

        </ng-container>

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

            <div>
              @if (permission?.includes('Holidays Edit')) {
              <button aria-label="Edit" (click)="editModelPopup(editholidaymodal, row)" class="action-btns1">
                <i class="feather feather-edit text-primary" [ngbTooltip]="'Edit' | translate"></i>
              </button>
              }
              @if (permission?.includes('Holidays Delete')) {
              <button aria-label="delete" [disabled]="sendingResponse['deleteholiday'+i]"
                (click)="deleteholiday(row, 'deleteholiday'+i)" class="action-btns1" id="delete-testimonial">
                <i class="feather feather-trash-2 text-danger" [ngbTooltip]="'Delete' | translate"></i>
                @if (sendingResponse['deleteholiday'+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>


<!-- // add holiday to agent modal start -->
<ng-template #addholidaymodal let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'Add holiday' | translate}}</h5>
    <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #addholidayData="ngForm" (ngSubmit)="addholiday(addholidayData, 'addholidays')">
      @if (holidayObj?.holidayid) {
      <input type="hidden" name="holiday_id" id="holiday_id" [ngModel]="holidayObj?.holidayid">
      }
      <div class="row">
        <div class="form-group">
          <label class="form-label">{{'Holiday Occasion' | translate}} <span class="text-red">*</span></label>
          <input type="text" #occasion="ngModel" [class.is-invalid]="occasion.invalid && occasion.touched" required
            name="occasion" class="form-control" [placeholder]="'occasion title' | translate" id="occasion"
            [(ngModel)]="holidayObj.occasion">
          @if ((occasion.invalid && occasion.touched) || occasion.dirty) {
          <div>
            @if (occasion.errors?.['required']) {
            <small class="text-danger">{{'occasion is required' |
              translate}}</small>
            }
          </div>
          }
        </div>
        <div class="col-lg-6">
          <div class="form-group">
            <label class="form-label">{{'Start Date' | translate}}: <span class="text-red">*</span></label>
            <div class="input-group">
              <div class="input-group">
                <input type="text" readonly class="form-control" name="startdate" placeholder="yyyy-mm-dd"
                  (click)="startDate.toggle()" [(ngModel)]="fromDate"
                  [minDate]="{year: currrentDate.year, month: currrentDate.month, day: currrentDate.day}" required
                  ngbDatepicker #startdateFormate="ngModel"
                  [class.is-invalid]="startdateFormate.invalid && startdateFormate.touched"
                  (dateSelect)="updateFromDatepickerMinDate()" #startDate="ngbDatepicker"
                  [firstDayOfWeek]="setting?.['start_week'] ?? 1">
                <button aria-label="start" class="btn btn-outline-secondary feather feather-calendar h-38"
                  (click)="startDate.toggle()" type="button"></button>
              </div>
            </div>
            @if ((startdateFormate.invalid && startdateFormate.touched) || startdateFormate.dirty) {
            <div>
              @if (startdateFormate.errors?.['required']) {
              <small class="text-danger">{{'start date is required' |
                translate}}</small>
              }
            </div>
            }
          </div>
        </div>
        <div class="col-lg-6">
          <div class="form-group">
            <label class="form-label">{{'End Date' | translate}}: <span class="text-red">*</span></label>
            <div class="input-group">
              <div class="input-group">
                <input type="text" readonly class="form-control" name="enddate" placeholder="yyyy-mm-dd"
                  [(ngModel)]="toDate" [minDate]="minFromDate" required ngbDatepicker #enddateFormate="ngModel"
                  (click)="endDate.toggle()" [class.is-invalid]="enddateFormate.invalid && enddateFormate.touched"
                  #endDate="ngbDatepicker" [firstDayOfWeek]="setting?.['start_week'] ?? 1">
                <button aria-label="end" class="btn btn-outline-secondary feather feather-calendar h-38"
                  (click)="endDate.toggle()" type="button"></button>
              </div>
            </div>
            @if ((enddateFormate.invalid && enddateFormate.touched) || enddateFormate.dirty) {
            <div>
              @if (enddateFormate.errors?.['required']) {
              <small class="text-danger">{{'end date is required'
                | translate}}</small>
              }
            </div>
            }
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">{{'Holiday Description' | translate}}<span class="text-red">*</span></label>
          <textarea type="text" #holidaydescription="ngModel" ngModel
            [class.is-invalid]="holidaydescription.invalid && holidaydescription.touched" name="holidaydescription"
            class="form-control" [placeholder]="'occasion title' | translate" id="holidaydescription"></textarea>

          @if ((holidaydescription.invalid && holidaydescription.touched) || holidaydescription.dirty) {
          <div>
            @if (holidaydescription.errors?.['required']) {
            <small class="text-danger">{{'start date is required' | translate}}</small>
            }
          </div>
          }
        </div>
        <div class="row">
          <div class="col-lg-6">
            <div class="form-group ">
              <label for="" class="form-label">{{'Background Color' | translate}} <span
                  class="text-red">*</span></label>
              <div class="form-control d-flex align-items-center gap-1" #ignoredPrimaryButton
                (click)="primaryColorToggle=!primaryColorToggle">
                <input type="text" [ngModel]="holidayObj['primaray_color']" required
                  [style.background]="holidayObj['primaray_color']" name="primary_color" class="color-picker-tag"
                  [cpAlphaChannel]="'disabled'" [(cpToggle)]="primaryColorToggle"
                  [cpIgnoredElements]="[ignoredPrimaryButton, ignoredPrimaryInput]" [cpOutputFormat]="'hex'"
                  [(colorPicker)]="holidayObj['primaray_color']" (cpSliderDragEnd)="primaryColor($event)"
                  #ignoredPrimaryInput #primaryColorModel="ngModel"
                  [class.is-invalid]="primaryColorModel.invalid && primaryColorModel.touched">
                {{holidayObj['primaray_color']}}
              </div>
              @if ((primaryColorModel.invalid && primaryColorModel.touched) || primaryColorModel.dirty) {
              <div>
                @if (primaryColorModel.errors?.['required']) {
                <small class="text-danger">{{'Primary Color is required' | translate}}</small>
                }
              </div>
              }
            </div>
          </div>
          <div class="col-lg-6">
            <div class="form-group ">
              <label for="" class="form-label">{{'Text Color' | translate}} <span class="text-red">*</span></label>
              <div class="form-control d-flex align-items-center gap-1" #ignoredPrimaryButton
                (click)="secondaryColorToggle=!secondaryColorToggle">
                <input type="text" [ngModel]="holidayObj['secondary_color']" required
                  [style.background]="holidayObj['secondary_color']" name="secondary_color" class="color-picker-tag"
                  [cpAlphaChannel]="'disabled'" [(cpToggle)]="secondaryColorToggle"
                  [cpIgnoredElements]="[ignoredPrimaryButton, ignoredPrimaryInput]" [cpOutputFormat]="'hex'"
                  [(colorPicker)]="holidayObj['secondary_color']" (cpSliderDragEnd)="secondaryColor($event)"
                  #ignoredPrimaryInput #secondaryColorModel="ngModel"
                  [class.is-invalid]="secondaryColorModel.invalid && secondaryColorModel.touched">
                {{holidayObj['secondary_color']}}
              </div>
              @if ((secondaryColorModel.invalid && secondaryColorModel.touched) || secondaryColorModel.dirty) {
              <div>
                @if (secondaryColorModel.errors?.['required']) {
                <small class="text-danger">{{'Secondary Color is required' | translate}}</small>
                }
              </div>
              }
            </div>
          </div>
        </div>

        <div class="form-group">
          <div class="switch_section">
            <div class="switch-toggle d-flex mt-4">
              <label class="form-label pe-2">{{'Status' | translate}}</label>
              <a class="onoffswitch2">
                <input type="checkbox" name="status" id="holidaystatus" ngModel
                  class=" toggle-class onoffswitch2-checkbox" value="1">
                <label for="holidaystatus" class="toggle-class onoffswitch2-label"></label>
              </a>
            </div>
          </div>
        </div>

        <div class="form-group">
          <div class="switch_section">
            <div class="switch-toggle d-flex mt-4">
              <label class="form-label pe-2">{{'Is-Fixed' | translate}}</label>
              <a class="onoffswitch2">
                <input type="checkbox" name="is_fixed" id="is_fixed" ngModel class=" toggle-class onoffswitch2-checkbox"
                  value="1">
                <label for="is_fixed" class="toggle-class onoffswitch2-label"></label>
              </a>
            </div>
            <small class="text-muted ps-2 ps-md-max-0"><i>({{ 'Activating this switch will ensure that this holiday is
                repeated every year.' | translate }})</i></small>
          </div>
        </div>

      </div>
      <div class="modal-footer">
        <button type="submit" [disabled]="addholidayData.invalid || sendingResponse['addholidays']"
          class="btn btn-primary holidaysave" id="btnsave">{{'Save'| translate}}@if (sendingResponse['addholidays']) {
          <i class="fa fa-spinner fa-spin mx-1"></i>
          }</button>
      </div>

    </form>
  </div>
</ng-template>
<!-- // add holiday to agent modal end -->
<!-- // edit holiday to agent modal start -->
<ng-template #editholidaymodal let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'Edit holiday' | translate}}</h5>
    <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #editholidayData="ngForm" (ngSubmit)="editholiday(editholidayData, 'editholiday')">
      @if (holidayObj?.holidayid) {
      <input type="hidden" name="holiday_id" id="holiday_id" [ngModel]="holidayObj?.holidayid">
      }
      <div class="row">
        <div class="form-group">
          <label class="form-label">{{'Holiday Occasion' | translate}} <span class="text-red">*</span></label>
          <input type="text" #occasion="ngModel" [class.is-invalid]="occasion.invalid && occasion.touched" required
            name="occasion" class="form-control" [placeholder]="'occasion title' | translate" id="occasion"
            [(ngModel)]="holidayObj.occasion">
          @if ((occasion.invalid && occasion.touched) || occasion.dirty) {
          <div>
            @if (occasion.errors?.['required']) {
            <small class="text-danger">{{'occasion is required' |
              translate}}</small>
            }
          </div>
          }
        </div>
        <div class="col-lg-6">
          <div class="form-group">
            <label class="form-label">{{'Start Date' | translate}}: <span class="text-red">*</span></label>
            <div class="input-group">
              <div class="input-group">
                <input type="text" readonly class="form-control" name="startdate" placeholder="yyyy-mm-dd"
                  (click)="startDate.toggle()" [(ngModel)]="fromDate"
                  [minDate]="{year: currrentDate.year, month: currrentDate.month, day: currrentDate.day}" required
                  ngbDatepicker #startdateFormate="ngModel"
                  [class.is-invalid]="startdateFormate.invalid && startdateFormate.touched"
                  (dateSelect)="updateFromDatepickerMinDate()" #startDate="ngbDatepicker"
                  [firstDayOfWeek]="setting?.['start_week'] ?? 1">
                <button aria-label="start" class="btn btn-outline-secondary feather feather-calendar h-38"
                  (click)="startDate.toggle()" type="button"></button>
              </div>
            </div>
            @if ((startdateFormate.invalid && startdateFormate.touched) || startdateFormate.dirty) {
            <div>
              @if (startdateFormate.errors?.['required']) {
              <small class="text-danger">{{'start date is required' |
                translate}}</small>
              }
            </div>
            }
          </div>
        </div>
        <div class="col-lg-6">
          <div class="form-group">
            <label class="form-label">{{'End Date' | translate}}: <span class="text-red">*</span></label>
            <div class="input-group">
              <div class="input-group">
                <input type="text" readonly class="form-control" name="enddate" placeholder="yyyy-mm-dd"
                  [(ngModel)]="toDate" [minDate]="minFromDate" required ngbDatepicker #enddateFormate="ngModel"
                  (click)="endDate.toggle()" [class.is-invalid]="enddateFormate.invalid && enddateFormate.touched"
                  #endDate="ngbDatepicker" [firstDayOfWeek]="setting?.['start_week'] ?? 1">
                <button aria-label="end" class="btn btn-outline-secondary feather feather-calendar h-38"
                  (click)="endDate.toggle()" type="button"></button>
              </div>
            </div>
            @if ((enddateFormate.invalid && enddateFormate.touched) || enddateFormate.dirty) {
            <div>
              @if (enddateFormate.errors?.['required']) {
              <small class="text-danger">{{'end date is required'
                | translate}}</small>
              }
            </div>
            }
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">{{'Holiday Description' | translate}}<span class="text-red">*</span></label>
          <textarea type="text" #holidaydescription="ngModel" [ngModel]="holidayObj['holidaydescription']"
            [class.is-invalid]="holidaydescription.invalid && holidaydescription.touched" name="holidaydescription"
            class="form-control" [placeholder]="'occasion title' | translate" id="holidaydescription"></textarea>

          @if ((holidaydescription.invalid && holidaydescription.touched) || holidaydescription.dirty) {
          <div>
            @if (holidaydescription.errors?.['required']) {
            <small class="text-danger">{{'start date is required' | translate}}</small>
            }
          </div>
          }
        </div>
        <div class="row">
          <div class="col-lg-6">
            <div class="form-group ">
              <label for="" class="form-label">{{'Background Color' | translate}} <span
                  class="text-red">*</span></label>
              <div class="form-control d-flex align-items-center gap-1" #ignoredPrimaryButton
                (click)="primaryColorToggle=!primaryColorToggle">
                <input type="text" [ngModel]="holidayObj['primaray_color']" required
                  [style.background]="holidayObj['primaray_color']" name="primary_color" class="color-picker-tag"
                  [cpAlphaChannel]="'disabled'" [(cpToggle)]="primaryColorToggle"
                  [cpIgnoredElements]="[ignoredPrimaryButton, ignoredPrimaryInput]" [cpOutputFormat]="'hex'"
                  [(colorPicker)]="holidayObj['primaray_color']" (cpSliderDragEnd)="primaryColor($event)"
                  #ignoredPrimaryInput #primaryColorModel="ngModel"
                  [class.is-invalid]="primaryColorModel.invalid && primaryColorModel.touched">
                {{holidayObj['primaray_color']}}
              </div>
              @if ((primaryColorModel.invalid && primaryColorModel.touched) || primaryColorModel.dirty) {
              <div>
                @if (primaryColorModel.errors?.['required']) {
                <small class="text-danger">{{'Primary Color is required' | translate}}</small>
                }
              </div>
              }
            </div>
          </div>
          <div class="col-lg-6">
            <div class="form-group ">
              <label for="" class="form-label">{{'Text Color' | translate}} <span class="text-red">*</span></label>
              <div class="form-control d-flex align-items-center gap-1" #ignoredPrimaryButton
                (click)="secondaryColorToggle=!secondaryColorToggle">
                <input type="text" [ngModel]="holidayObj['secondary_color']" required
                  [style.background]="holidayObj['secondary_color']" name="secondary_color" class="color-picker-tag"
                  [cpAlphaChannel]="'disabled'" [(cpToggle)]="secondaryColorToggle"
                  [cpIgnoredElements]="[ignoredPrimaryButton, ignoredPrimaryInput]" [cpOutputFormat]="'hex'"
                  [(colorPicker)]="holidayObj['secondary_color']" (cpSliderDragEnd)="secondaryColor($event)"
                  #ignoredPrimaryInput #secondaryColorModel="ngModel"
                  [class.is-invalid]="secondaryColorModel.invalid && secondaryColorModel.touched">
                {{holidayObj['secondary_color']}}
              </div>
              @if ((secondaryColorModel.invalid && secondaryColorModel.touched) || secondaryColorModel.dirty) {
              <div>
                @if (secondaryColorModel.errors?.['required']) {
                <small class="text-danger">{{'Secondary Color is required' | translate}}</small>
                }
              </div>
              }
            </div>
          </div>
        </div>

        <div class="form-group">
          <div class="switch_section">
            <div class="switch-toggle d-flex mt-4">
              <label class="form-label pe-2">{{'Status' | translate}}</label>
              <a class="onoffswitch2">
                <input type="checkbox" name="status" id="holidaystatus" [ngModel]="holidayObj?.status"
                  [checked]="holidayObj?.status == '1' ? true : false" class=" toggle-class onoffswitch2-checkbox">
                <label for="holidaystatus" class="toggle-class onoffswitch2-label"></label>
              </a>
            </div>
          </div>
        </div>


        <div class="form-group">
          <div class="switch_section">
            <div class="switch-toggle d-flex mt-4">
              <label class="form-label pe-2">{{'Is-Fixed' | translate}}</label>
              <a class="onoffswitch2">
                <input type="checkbox" name="is_fixed" id="is_fixed" [ngModel]="holidayObj?.is_fixed"
                  [checked]="holidayObj?.is_fixed == 1 ? true : false" class=" toggle-class onoffswitch2-checkbox">
                <label for="is_fixed" class="toggle-class onoffswitch2-label"></label>
              </a>
            </div>
            <small class="text-muted ps-2 ps-md-max-0"><i>({{ 'Activating this switch will ensure that this holiday is repeated every year.' | translate }})</i></small>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" [disabled]="editholidayData.invalid || sendingResponse['editholiday']"
          class="btn btn-primary holidaysave" id="btnsave">{{'Update'| translate}}@if (sendingResponse['editholiday']) {
          <i class="fa fa-spinner fa-spin mx-1"></i>
          }</button>
      </div>

    </form>
  </div>
</ng-template>
<!-- // edit holiday to agent modal end -->