<div class="app-mainHeader mt-20">Overview</div>
<div class="exp-card" *ngIf="ActivityData">
    <div class="exp-carousel">
        <p-carousel [value]="activityImages" [numVisible]="1" [numScroll]="1" [responsiveOptions]="responsiveOptions">
            <ng-template let-activityImages pTemplate="item">
                <img [src]="activityImages.image_url" alt="logo" />
            </ng-template>
        </p-carousel>
    </div>
    <div>
        <div class="exp-heading">
            {{ActivityData.activityContents[0].activity_name}}
        </div>
    </div>
    <div class="exp-heading" [innerHTML]="ActivityData.activityContents[0].activity_description">

    </div>
</div>
<div class="box_wrapper" [formGroup]="formgroup">
    <div class="box-header">Allocation</div>
    <div class="card">
        <div class="app-mainGrid4">
            <div class="mb-20">
                <label class="formLabel">Option </label>
                <ng-select [items]="rateDetails" appendTo="body" (change)="GetSlotsById($event.activity_contract_id ,false)" bindLabel="option_name" bindValue="activity_contract_id" formControlName="option_name">
                </ng-select>
            </div>
            <div class="mb-20">
                <label class="formLabel">Time Slot </label>
                <ng-select #select formControlName="slot_id" (change)="getAllocationDetails()">
                    <ng-option *ngFor="let item of AllSlots" [value]="item.activity_slot_id">
                        {{ item.start_time | date : 'HH:mm'}} to {{item.end_time| date : 'HH:mm'}}
                    </ng-option>
                </ng-select>
            </div>
        </div>
        <div class="exp-calendar" formGroupName="Calender">
            <div class="common_calendar" *ngIf="datelist">
                <p-calendar [inline]="true" [showOtherMonths]="false" [readonlyInput]="true">
                    <ng-template pTemplate="date" let-date>
                        <span class="text-end w-100 fs-30">{{ date.day }} </span>
                        <div *ngIf="bindAllocationdate(date) then highlightedDate else normalDate"></div>
                        <ng-template #highlightedDate>
                            <div class="mt-20 w-10" formGroupName="{{convertproperadate(date)}}">
                                <div class="d-flex">
                                    <div class="calenderContent align-start">
                                        <span>Allocated:</span>
                                        <span>Booked:</span>
                                        <span>Remaining:</span>
                                    </div>
                                    <div class="calenderContent align-center">
                                        <span>
                      <div class="d-flex justify-center">
                        <span class="material-icons mr-5 p-5" (click)="handlePlus(convertproperadate(date))">
                          add_circle
                        </span>
                                        <input class="p-5 w-40 text-center" (change)="SaveAllocation(Calender.get(convertproperadate(date)))" formControlName="allocation_count" />
                                        <span (click)="handleMinus(convertproperadate(date))" [ngClass]="{'disabled': Calender.get(convertproperadate(date)).get('allocation_count').value == 0}" class="material-icons ml-5 p-5">
                          remove_circle
                        </span>
                                    </div>
                                    </span>
                                    <span> {{Calender.get(convertproperadate(date)).get('booking_count').value}}</span>
                                    <span> {{Calender.get(convertproperadate(date)).get('_allocation_type').value == '1' ? 'Free Sale' :
                      Calender.get(convertproperadate(date)).get('_allocation_type').value == '2' ? 'Stop Sale' :
                      Calender.get(convertproperadate(date)).get('remaining_count').value}} </span>
                                    <span>
                      <button class="btn-primary" (click)="StopSale(Calender.get(convertproperadate(date)))">Stop
                        Sale</button>
                    </span>
                                </div>
                            </div>
            </div>
            </ng-template>
            <ng-template #normalDate>
                <div class="mt-20 w-10"></div>
            </ng-template>
            </ng-template>
            </p-calendar>
        </div>
    </div>
</div>
</div>
<div class="box-wrapper">
    <div class="box-header">Season</div>
    <div class="card">
        <!-- <div class="app-mainCard"> -->
        <p-table #dtseason [value]="SeasonData" [rows]="3" 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)="dtseason.exportCSV()" class="btn-secondary mr-10" pTooltip="CSV" label="CSV" tooltipPosition="bottom"></button>
                        <button type="button" pButton (click)="exportseasonExcel()" class="btn-secondary mr-10" pTooltip="XLS" label="Excel" tooltipPosition="bottom"></button>
                        <button type="button" pButton (click)="exportseasonPdf()" 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" let-season>
                <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-season>
                <tr>
                    <td>{{ season.activitySeason.season_name }}</td>
                    <td>
                        <span class="d-block" *ngFor="let date of season.seasondateRange; let i = index">12 Feb 2022 - 02 Mar 2022
            </span>
                    </td>
                    <td>
                        <span class="product-badge" [ngClass]="{
                'status-active': season.activitySeason.is_active,
                'status-inactive': season.activitySeason.is_active == false
              }">{{
              season.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)="EditSeason(season.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)="
                    UpdateSeasonStatus(
                      season.activitySeason.activity_season_id,
                      season.activitySeason.is_active
                    )
                  ">
                  <span class="flex-center">
                    <span class="mr-10 f-20 material-icons">
                      check_circle
                    </span>
                    <span>
                      {{
                      season.activitySeason.is_active
                      ? "Deactivate"
                      : "Activate"
                      }}
                    </span>
                  </span>
                </button>
                            </mat-menu>
                        </div>
                    </td>
                </tr>
            </ng-template>
        </p-table>
    </div>
</div>
<div class="box-wrapper">
    <div class="box-header">Slots</div>
    <div class="card">
        <!-- <div class="app-mainCard"> -->
        <p-table #dtseason [value]="AllSlotsData" [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 (click)="dtseason.exportCSV()" class="btn-secondary mr-10" pTooltip="CSV" label="CSV" tooltipPosition="bottom"></button>
                        <button type="button" pButton (click)="exportseasonExcel()" class="btn-secondary mr-10" pTooltip="XLS" label="Excel" tooltipPosition="bottom"></button>
                        <button type="button" pButton (click)="exportseasonPdf()" 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-AllSlotsData>
                <tr>
                    <td>{{ AllSlotsData.activity_slot_id }}</td>
                    <td>
                        <span class="d-block">{{
              AllSlotsData.start_time | date: "H:mm"
              }}</span>
                    </td>
                    <td>
                        <span class="product-badge">{{
              AllSlotsData.end_time | date: "H:mm"
              }}</span>
                    </td>
                    <td>
                        <span class="product-badge">{{
              AllSlotsData.cut_off_time | date: "H:mm"
              }}</span>
                    </td>
                    <td>
                        <span class="booking-history-status" [ngClass]="{
              'booking-history-status-success': AllSlotsData.is_active,
              'booking-history-status-fail': AllSlotsData.is_active == false
            }">
              {{ AllSlotsData.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)="EditSlot(AllSlotsData.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)="UpdateStatusSlot(AllSlotsData.activity_slot_id, AllSlotsData.is_active)" mat-menu-item>
                  <span class="flex-center">
                    <span class="mr-10 f-20 material-icons">
                      check_circle
                    </span>
                    <span>{{
                      AllSlotsData.is_active ? "Deactive" : "Activate"
                      }}</span>
                  </span>
                </button>
                            </mat-menu>
                        </div>
                    </td>
                </tr>
            </ng-template>
            <ng-template pTemplate="emptymessage">
                <tr *ngIf="AllSlotsData === null || AllSlotsData" class="ResultNotFound">
                    <td>
                        No data found
                    </td>
                </tr>
            </ng-template>
        </p-table>
    </div>
</div>
<div class="box-wrapper">
    <div class="box-header">Rates</div>
    <div class="card">
        <p-table #Ratedt [value]="rateDetails" [rows]="10" responsiveLayout="scroll" electionMode="multiple" styleClass="p-datatable-gridlines" [paginator]="true" [globalFilterFields]="[
      'option_name',
      'nationality',
      'date',
      'currency_code',
      'contract_days',
      'is_pickup_included',
      'is_drop_off_included'
    ]" [(selection)]="rateDetails" [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)="Ratedt.filterGlobal(searchInp.value, 'contains')"
                  placeholder="Search..." />
              </span>
                        </div>
                    </ng-template>
                </p-toolbar>
            </ng-template>
            <ng-template pTemplate="header">
                <tr>
                    <th pSortableColumn="option_name">
                        Option Name
                        <p-sortIcon field="option_name" class="p-sort-icon"></p-sortIcon>
                    </th>
                    <th pSortableColumn="nationality">
                        Nationality
                        <p-sortIcon field="nationality" class="p-sort-icon"></p-sortIcon>
                    </th>
                    <th pSortableColumn="date">
                        Date Range/Season
                        <p-sortIcon field="date" class="p-sort-icon"></p-sortIcon>
                    </th>
                    <th pSortableColumn="currency_code">
                        Currency
                        <p-sortIcon field="currency_code" class="p-sort-icon"></p-sortIcon>
                    </th>
                    <th pSortableColumn="slot">
                        Slot
                        <p-sortIcon field="slot" class="p-sort-icon"></p-sortIcon>
                    </th>
                    <th pSortableColumn="is_pickup_included">
                        Pickup Included
                        <p-sortIcon field="is_pickup_included" class="p-sort-icon"></p-sortIcon>
                    </th>
                    <th pSortableColumn="is_drop_off_included">
                        Drop Off Included
                        <p-sortIcon field="is_drop_off_included" class="p-sort-icon"></p-sortIcon>
                    </th>
                    <th pSortableColumn="is_active">
                        Status
                    </th>
                    <th pSortableColumn="rating">
                        Action
                    </th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rateDetails>
                <tr>
                    <td>{{rateDetails.option_name}}</td>
                    <td>{{rateDetails.nationality}}</td>
                    <td>
                        <span *ngIf="rateDetails.date">
              <span class="d-block" *ngFor="let item of rateDetails.date.split(','); let i = index">{{rateDetails.date
                == null ? '' :
                item | date: 'dd MMM YYYY' }} {{


                i == 0 && rateDetails.date.split(',').length > 1? '-' : ''}} </span>
                        </span>
                    </td>
                    <td>{{rateDetails.currency_code}}</td>
                    <td>
                        <span *ngFor="let  item of SoltsDetailsConvParse(rateDetails.activity_slot)"> {{item.date}}</span>
                    </td>
                    <td>{{rateDetails.is_pickup_included ? "Yes" : "No"}}</td>
                    <td>{{rateDetails.is_drop_off_included? "Yes" : "No"}}</td>
                    <td>
                        <span class="product-badge" [ngClass]="{'status-active':rateDetails.is_active,'status-inactive' : rateDetails.is_active == false}">{{
              rateDetails.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)="EditRateConfig(rateDetails.activity_contract_id) ">
                  <span class="flex-center">
                    <span> Edit Rate</span>
                  </span>
                </button>
                                <button mat-menu-item (click)="EditDetails(rateDetails.activity_contract_id) ">
                  <span class="flex-center">
                    <span> Edit Details</span>
                  </span>
                </button>
                                <button mat-menu-item (click)="EditAllocation(rateDetails.activity_contract_id) ">
                  <span class="flex-center">
                    <span> Edit Allocation </span>
                  </span>
                </button>
                                <button mat-menu-item (click)="EditCancelPoli(rateDetails.activity_contract_id)">
                  <span class="flex-center">
                    <span> Edit Cancellation Policy </span>
                  </span>
                </button>
                                <!-- <button mat-menu-item (click)="EditAllocation(rateDetails.activity_contract_id) ">
                  <span class="flex-center">
                    <span> Edit No Show Policy </span>
                  </span>
                </button> -->
                                <button mat-menu-item (click)="UpdateRateStatus(rateDetails.activity_contract_id ,rateDetails.is_active)">
                  <span class="flex-center">
                    <span>{{rateDetails.is_active
                      ? 'Deactivate' : 'Activate' }}
                    </span>
                  </span>
                </button>
                            </mat-menu>
                        </div>
                    </td>
                </tr>
            </ng-template>
        </p-table>
    </div>
</div>
<div class="box-wrapper">
    <div class="box-header">Optional Add-Ons</div>
    <div class="card">
        <p-table #dtOpt [value]="OptAddData" [columns]="cols" [rows]="3" [resizableColumns]="true" styleClass="p-datatable-gridlines" responsiveLayout="scroll" selectionMode="multiple" [(selection)]="OptAddData" [paginator]="true" [globalFilterFields]="[
      'add_on_name',
      'add_on_description',
      'rate_type',
      'currency_code',
      'rate',
      'is_active'
    ]" [rowHover]="true" dataKey="id" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [showCurrentPageReport]="true">
            <ng-template pTemplate="caption">
                <p-toolbar *ngIf="OptAddData">
                    <ng-template pTemplate="left">
                        <div class="p-button-set">
                            <button type="button" pButton class="btn-secondary mr-10" pTooltip="Copy" label="Copy" tooltipPosition="bottom"></button>
                            <button type="button" pButton (click)="dtOpt.exportCSV()" class="btn-secondary mr-10" pTooltip="CSV" label="CSV" tooltipPosition="bottom"></button>
                            <button type="button" pButton (click)="exportOptExcel()" class="btn-secondary mr-10" pTooltip="XLS" label="Excel" tooltipPosition="bottom"></button>
                            <button type="button" pButton (click)="exportOptPdf()" 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>
                        </div>
                    </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)="dtOpt.filterGlobal(searchInp.value, 'contains')"
                  placeholder="Search..." />
              </span>
                        </div>
                    </ng-template>
                </p-toolbar>
            </ng-template>
            <ng-template pTemplate="header">
                <tr>
                    <th pSortableColumn="add_on_name">
                        Add-On
                        <p-sortIcon field="add_on_name" class="p-sort-icon"></p-sortIcon>
                    </th>
                    <th pSortableColumn="add_on_description">
                        Description
                        <p-sortIcon field="add_on_description" class="p-sort-icon"></p-sortIcon>
                    </th>
                    <th pSortableColumn="rate_type">
                        Rate Type
                        <p-sortIcon field="rate_type" class="p-sort-icon"></p-sortIcon>
                    </th>
                    <th pSortableColumn="currency_code">
                        Currency
                        <p-sortIcon field="currency_code" 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="Action">Action</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-ons>
                <tr>
                    <td>{{ ons.add_on_name }}</td>
                    <td>{{ ons.add_on_description }}</td>
                    <td>{{ ons.rate_type }}</td>
                    <td>{{ ons.currency_code }}</td>
                    <td>
                        <span class="product-badge" [ngClass]="{
              'status-active': ons.is_active,
              'status-inactive': ons.is_active == false
            }">{{ ons.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)="EditOpt(ons.activity_add_on_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)="UpdateOptStatus(ons.activity_add_on_id, ons.is_active)">
                  <span class="flex-center">
                    <span class="mr-10 f-20 material-icons"> check_circle </span>
                    <span>
                      {{ ons.is_active ? "Deactivate" : "Activate" }}
                    </span>
                  </span>
                </button>
                            </mat-menu>
                        </div>
                    </td>
                </tr>
            </ng-template>
        </p-table>
    </div>
</div>