<div class="app-mainHeader mt-20">
  <div>Season Setting</div>
  <button pButton type="button" label="Add New Season" class="btn-primary" [routerLink]="[
      '/Services/ActivityServices/ExpServices/Manage/AddNewSeason'
    ]"></button>
</div>
<div class="app-mainCard">
  <div class="app-mainGrid4">
    <div class="">
      <label class="formLabel">Season Name</label>
      <input class="formInput" [(ngModel)]="Season_name" type="text">
    </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)="SearchSeason()" class="btn-primary btn"></button>
  </div>
</div>
<div class="app-mainCard">
  <p-table #dt [value]="SeasonData" [rows]="25" responsiveLayout="scroll" styleClass="p-datatable-gridlines"
    [paginator]="true" [columns]="cols" [globalFilterFields]="[
      'activitySeason.season_name',
      'country.name',
      'activitySeason.is_active',
      'status'
    ]" [(selection)]="SeasonData" [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 (click)="dt.exportCSV()" class="btn-secondary mr-10" pTooltip="CSV" label="CSV"
            tooltipPosition="bottom"></button>
          <button type="button" pButton (click)="exportExcel()" class="btn-secondary mr-10" pTooltip="XLS" label="Excel"
            tooltipPosition="bottom"></button>
          <button type="button" pButton (click)="exportPdf()" 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)="dt.filterGlobal(searchInp.value, 'contains')"
                placeholder="Search..." />
            </span>
          </div>
        </ng-template>
      </p-toolbar>
    </ng-template>
    <ng-template pTemplate="header" let-SeasonData>
      <tr>
        <th pSortableColumn="activitySeason.season_name">
          Season Name
          <p-sortIcon field="activitySeason.season_name" class="p-sort-icon"></p-sortIcon>
        </th>
        <th pSortableColumn="seasondateRange.fromDate">
          Season Date Range
          <p-sortIcon field="seasondateRange.fromDate" class="p-sort-icon"></p-sortIcon>
        </th>
        <th pSortableColumn="activitySeason.is_active">
          Status
          <p-sortIcon field="activitySeason.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-SeasonData>
      <tr>
        <td>{{SeasonData.activitySeason.season_name}}</td>
        <td>
          <span class="d-block" *ngFor="let date of SeasonData.seasondateRange; let i = index">{{date.fromDate | date:
            'dd MMM yyyy'}} - {{date.toDate| date: 'dd MMM yyyy'}}</span>
        </td>
        <td>
          <span class="product-badge"
            [ngClass]="{'status-active':SeasonData.activitySeason.is_active,'status-inactive':SeasonData.activitySeason.is_active == false}">{{
            SeasonData.activitySeason.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 mat-menu-item (click)="Edit(SeasonData.activitySeason.activity_season_id)">
                <span class="flex-center">
                  <span class="mr-10 f-20 material-icons"> edit </span>
                  <span> Edit </span>
                </span>
              </button>
              <button mat-menu-item
                (click)="UpdateStatus(SeasonData.activitySeason.activity_season_id, SeasonData.activitySeason.is_active)">
                <span class="flex-center">
                  <span class="mr-10 f-20 material-icons"> check_circle </span>
                  <span> {{SeasonData.activitySeason.is_active ? 'Deactivate' : 'Activate' }} </span>
                </span>
              </button>
            </mat-menu>
          </div>
        </td>
      </tr>
    </ng-template>
    <ng-template pTemplate="emptymessage">
      <tr *ngIf="SeasonData === null || SeasonData" class="ResultNotFound">
        <td>
          No data found
        </td>
      </tr>
    </ng-template>
  </p-table>
</div>