<div class="app-mainHeader mt-20">
  Search Slots
  <button pButton type="button" label="Add Slots" class="btn-primary"
    [routerLink]="['/Services/ActivityServices/ExpServices/Manage/AddSlots']"></button>
</div>
<div class="app-mainCard">
  <div class="app-mainGrid4">
    <div class="">
      <label class="formLabel">Slot Start Time</label>
      <div class="mobiGrid app-mainGrid3">
        <div class="w-33">
          <ng-select [(ngModel)]="StartTime" [multiple]="false" [multiple]="false" placeholder="Select">
            <ng-option *ngFor="let item of CommonVari.HoursAndMinutes" [value]="item.hour+':'+item.minute">
              {{ item.hour }} : {{item.minute}}</ng-option>
          </ng-select>
        </div>
      </div>
    </div>
    <div class="">
      <label class="formLabel">Slot End Time</label>
      <div class="mobiGrid app-mainGrid3">
        <div class="w-33">
          <ng-select [(ngModel)]="EndTime" [multiple]="false" [multiple]="false" placeholder="Select">
            <ng-option *ngFor="let item of CommonVari.HoursAndMinutes" [value]="item.hour+':'+item.minute">
              {{item.hour}} : {{item.minute}}</ng-option>
          </ng-select>
        </div>
      </div>
    </div>
  </div>
  <div class="mt-20">
    <button pButton type="button" label="Reset" (click)="reset()" class="btn-secondary btn mr-10"></button>
    <button pButton type="button" label="Search" (click)="GetAllSlot()" class="btn-primary btn"></button>
  </div>
</div>
<div class="app-mainCard">
  <div class="">
    <!-- <div class="app-mainCard"> -->
    <p-table #dtseason [value]="AllSlots" [rows]="25" responsiveLayout="scroll" styleClass="p-datatable-gridlines"
      [paginator]="true" [columns]="cols" [globalFilterFields]="[
      'activity_slot_id',
      'start_time',
      'end_time',
      'cut_off_time',
      'is_active'
    ]" [rowHover]="true" dataKey="id" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
      [showCurrentPageReport]="true">
      <ng-template pTemplate="caption">
        <p-toolbar>
          <ng-template pTemplate="left">
            <button type="button" pButton class="btn-secondary mr-10" pTooltip="Copy" label="Copy"
            tooltipPosition="bottom"></button>
            <button type="button" pButton class="btn-secondary mr-10" pTooltip="CSV" label="CSV"
              tooltipPosition="bottom"></button>
            <button type="button" pButton class="btn-secondary mr-10" pTooltip="XLS" label="Excel"
              tooltipPosition="bottom"></button>
            <button type="button" pButton class="btn-secondary mr-10" pTooltip="PDF" label="PDF"
              tooltipPosition="bottom"></button>
              <button type="button" pButton class="btn-secondary" pTooltip="Print" label="Print"
              tooltipPosition="bottom"></button>
          </ng-template>
          <ng-template pTemplate="right">
            <div class="p-d-flex p-ai-center">
              <span class="p-input-icon-left">
                <i class="pi pi-search"></i>
                <input pInputText type="search" #searchInp (input)="dtseason.filterGlobal(searchInp.value, 'contains')"
                  placeholder="Search..." />
              </span>
            </div>
          </ng-template>
        </p-toolbar>
      </ng-template>
      <ng-template pTemplate="header">
        <tr>
          <th pSortableColumn="activity_slot_id">
            Slot Id
            <p-sortIcon field="activity_slot_id" class="p-sort-icon"></p-sortIcon>
          </th>
          <th pSortableColumn="start_time">
            Slot Start Time
            <p-sortIcon field="start_time" class="p-sort-icon"></p-sortIcon>
          </th>
          <th pSortableColumn="end_time">
            Slot End Time
            <p-sortIcon field="end_time" class="p-sort-icon"></p-sortIcon>
          </th>
          <th pSortableColumn="cut_off_time">
            Cut-Off Time (in Hrs)
            <p-sortIcon field="cut_off_time" class="p-sort-icon"></p-sortIcon>
          </th>
          <th pSortableColumn="is_active">
            Status
            <p-sortIcon field="is_active" class="p-sort-icon"></p-sortIcon>
          </th>
          <th pSortableColumn="rating">
            Action
            <p-sortIcon field="rating" class="p-sort-icon"></p-sortIcon>
          </th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-AllSlots>
        <tr>
          <td>{{ AllSlots.activity_slot_id }}</td>
          <td>
            <span class="d-block">{{
              AllSlots.start_time | date: "H:mm"
              }}</span>
          </td>
          <td>
            <span class="product-badge">{{
              AllSlots.end_time | date: "H:mm"
              }}</span>
          </td>
          <td>
            <span class="product-badge">{{
              AllSlots.cut_off_time | date: "H:mm"
              }}</span>
          </td>
          <td>
            <span class="booking-history-status" [ngClass]="{
              'booking-history-status-success': AllSlots.is_active,
              'booking-history-status-fail': AllSlots.is_active == false
            }">
              {{ AllSlots.is_active ? "Active" : "Deactive" }}</span>
          </td>
          <td>
            <div class="actionButton">
              <button mat-icon-button [matMenuTriggerFor]="menu">
                <span class="material-icons"> more_horiz </span>
              </button>
              <mat-menu #menu="matMenu">
                <button (click)="Edit(AllSlots.activity_slot_id)" mat-menu-item>
                  <span class="flex-center">
                    <span class="mr-10 f-20 material-icons"> edit </span>
                    <span> Edit </span>
                  </span>
                </button>
                <button (click)="UpdateStatus(AllSlots.activity_slot_id, AllSlots.is_active)" mat-menu-item>
                  <span class="flex-center">
                    <span class="mr-10 f-20 material-icons">
                      check_circle
                    </span>
                    <span>{{
                      AllSlots.is_active ? "Deactive" : "Activate"
                      }}</span>
                  </span>
                </button>
              </mat-menu>
            </div>
          </td>
        </tr>
      </ng-template>
      <ng-template pTemplate="emptymessage">
        <tr *ngIf="AllSlots === null || AllSlots" class="ResultNotFound">
          <td>
            No data found
          </td>
        </tr>
      </ng-template>
    </p-table>
  </div>
</div>
<p-toast></p-toast>