<div class="ng-card mt-20">
    <div class="ng-cardHead">
        <div class="ng-cardLabel">
            <h3 class="ng-cardTitle">Overview</h3>
        </div>
    </div>
    <div class="ng-searchBody">
        <div class="overview-Hotelcard" *ngIf="Hotel_Details">
            <img [src]="Hotel_Details['thumbnail_image']" alt="Hotel Image">
            <div>
                <h4 class="overview-Hotelheading">{{Hotel_Details['hotel_name']}}</h4>
                <div class="hotel-rating">
                    <span class="material-icons" *ngIf="Hotel_Details['star_rating'] >= 1">star</span>
                    <span class="material-icons" *ngIf="Hotel_Details['star_rating'] >= 2">star</span>
                    <span class="material-icons" *ngIf="Hotel_Details['star_rating'] >= 3">star</span>
                    <span class="material-icons" *ngIf="Hotel_Details['star_rating'] >= 4">star</span>
                    <span class="material-icons" *ngIf="Hotel_Details['star_rating'] == 5">star</span>
                </div>
                <h5 class="hotel-address">{{Hotel_Details['address']}}</h5>
            </div>
        </div>
        <div class="overview-Pricingcalendar">
            <div class="box-header border-b">Inventory and Pricing Calendar</div>
            <div class="ng-searchBody">
                <div [formGroup]="OverviewForm">
                    <div class="row align-end">
                        <div class="col-lg-4">
                            <div class="formControlWrapper">
                                <label class="formLabel">Room</label>
                                <ng-select #OriginNg class="is-invalid" formControlName="extranet_room_id"
                                    placeholder="Select" (change)="SearchOverview()">
                                    <ng-template ng-header-tmp>
                                        <div class="temp_mobileBack">
                                            <div class="temp_mobileHead">
                                                <div class="temp_mobileTitle">
                                                    <h4>Room Name</h4>
                                                </div>
                                                <button matRipple (click)="OriginNg.close()"
                                                    class="temp_mobileBackButton">
                                                    <i class="material-icons"> close </i>
                                                </button>
                                            </div>
                                        </div>
                                    </ng-template>
                                    <ng-option value="">Select</ng-option>
                                    <ng-option *ngFor="let data of AllRooms"
                                        [value]="data.extranet_room_id">{{data.room_name}}{{data.room_view ? (', ' +
                                        data.room_view) : '' }}</ng-option>
                                </ng-select>
                            </div>
                        </div>
                        <div class="col-lg-1 pl-0">
                            <div class="mt-20 formControlWrapper">
                                <button pButton class="btn-primary btn" label="Reset" (click)="Reset()"></button>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="formControlWrapper mb-30"
                                [ngClass]="{'ErrorWrapper': validserv.onBlur(OverviewForm.controls['date'],'required') || validserv.onBlur(OverviewForm.get('date'), 'todate') || validserv.onBlur(OverviewForm.get('date'), 'range')}">
                                <label class="formLabel">Search Rates
                                    <small class="astrick">*</small>
                                </label>
                                <p-calendar #RangeCalendar [minDate]="MinDate" placeholder="Select date"
                                    [showIcon]="true" selectionMode="range" dateFormat="dd M yy" formControlName="date"
                                    [readonlyInput]="true" [showButtonBar]="true"
                                    (onSelect)="SearchOverview()"></p-calendar>
                                <span class="errorspan" *ngIf="validserv.onBlur(OverviewForm.get('date'), 'todate')">
                                    Please select date range
                                </span>
                                <span class="errorspan" *ngIf="validserv.onBlur(OverviewForm.get('date'), 'required')">
                                    Please select search rates date
                                </span>
                                <span class="errorspan" *ngIf="validserv.onBlur(OverviewForm.get('date'), 'range')">
                                    Select a date range with a maximum span of 30 days
                                </span>
                                <!-- <span class="errorspan">Please select from date</span> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="table-Btnflex" *ngIf="OverViewObj && OverViewObj.Date.length > 9">
                    <button (click)="calculateColumnWidths('left')">
                        <span class="material-icons">arrow_back</span>
                    </button>
                    <button (click)="calculateColumnWidths('right')">
                        <span class="material-icons">arrow_forward</span>
                    </button>
                </div>
                <div class="tableMainWrap" #tableContainer *ngIf="OverViewObj">
                    <table class="border-left-0 border-top-0 border-bottom-0">
                        <tr>
                            <table class="border-wrap border-left-0 noBorderLastChild">
                                <tr>
                                    <th class="sticky border-left-0">
                                        <div class="min-width200 text-left">Rooms</div>
                                    </th>
                                    <th *ngFor="let Date of OverViewObj.Date">
                                        <div class="min-width100 tableDate">
                                            <span class="weekData">{{Date | date : 'EEE'}}</span>
                                            <span class="numData">{{Date | date : 'd'}}</span>
                                            <span class="monthData">{{Date | date : 'MMM'}}</span>
                                        </div>
                                    </th>
                                </tr>
                            </table>
                        </tr>
                        <tr *ngFor="let room_data of OverViewObj.RoomDetails;let i = index">
                            <table class="border-0 sticky">
                                <tr class="formBorderSpace">
                                    <div class="wPx-300 room-wrap sub-header">
                                        {{room_data.room_name}}
                                    </div>
                                </tr>
                            </table>
                            <table class="border-left-0 border-right-0 noBorderLastChild w-100">
                                <tr class="pointer">
                                    <td class="sticky border-left-0 border-right-2">
                                        <div class="min-width200 text-right">
                                            Status
                                        </div>
                                    </td>
                                    <td class="overview-hover"
                                        [ngClass]="{'rowColorRed':status =='STOPSALE','rowColorGreen':(status !='STOPSALE' && status)}"
                                        *ngFor="let status of room_data.status;let status_ind=index">
                                        <div class="min-width100">
                                            <div class=" soldOut">
                                                <div class="min-width100 ">
                                                    {{status == 'STOPSALE' ? 'Sold Out' : ''}}
                                                </div>

                                                <mat-menu #menu="matMenu">
                                                    <button mat-menu-item
                                                        *ngIf="status == 'STOPSALE' || status == 'FREESALE'"
                                                        (click)="Update_Status(i,status_ind,'status','COUNTSALE')">
                                                        <span class="flex-center">
                                                            <span> Open </span>
                                                        </span>
                                                    </button>
                                                    <button mat-menu-item
                                                        *ngIf="status == 'STOPSALE' || status == 'COUNTSALE'"
                                                        (click)="Update_Status(i,status_ind,'status','FREESALE')">
                                                        <span class="flex-center">
                                                            <span> Free Sale </span>
                                                        </span>
                                                    </button>
                                                    <button mat-menu-item *ngIf="status != 'STOPSALE'"
                                                        (click)="Update_Status(i,status_ind,'status','STOPSALE')">
                                                        <span class="flex-center">
                                                            <span> Sold Out </span>
                                                        </span>
                                                    </button>
                                                </mat-menu>
                                                <button [matMenuTriggerFor]="menu" class="btn-hover" *ngIf="status">
                                                    <span class="material-icons"> more_vertic </span>
                                                </button>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="formInputBorder pointer">
                                    <td class="sticky border-left-0">
                                        <div class="min-width200 text-right">
                                            Allocation
                                        </div>
                                    </td>
                                    <td [ngClass]="{'rowColorBlue':(allocation.value || allocation.value === 0) }"
                                        *ngFor="let allocation of room_data.allocation;let allocation_ind = index">
                                        <div class="min-width100 d-flex"
                                            *ngIf="(allocation.value || allocation.value === 0) && allocation.value != 'FREESALE'">
                                            <input type="number"
                                                [readonly]="OverViewObj.RoomDetails[i].status[allocation_ind] == 'STOPSALE'"
                                                (change)="Update_Status(i,allocation_ind,'allocation',$event)"
                                                [value]="allocation.value" class="formInput text-center pointer" min="0"
                                                oninput="this.value = this.value.replace(/[^0-9.]|(?<=\..*)\./g, '') ">

                                        </div>
                                        <div class="min-width100 d-flex"
                                            *ngIf="!allocation.value && allocation.value != 0">
                                            <input type="text" readonly class="formInput text-center pointer">

                                        </div>
                                        <div class="min-width100 d-flex justify-center"
                                            *ngIf="allocation.value == 'FREESALE'">
                                            {{allocation.value}}
                                        </div>
                                    </td>
                                </tr>
                                <tr class="formInputBorder">
                                    <td class="sticky border-left-0">
                                        <div class="min-width200 text-right">
                                            Net Sold
                                        </div>
                                    </td>
                                    <td [ngClass]="{'rowColorgray':(net_sold || net_sold === 0) }"
                                        *ngFor="let net_sold of room_data.net_sold">
                                        <div class="min-width100" *ngIf="net_sold || net_sold === 0">
                                            {{net_sold}}
                                        </div>
                                    </td>
                                </tr>
                                <tr class="formInputBorder">
                                    <td class="sticky border-left-0">
                                        <div class="min-width200 text-right">
                                            Available
                                        </div>
                                    </td>
                                    <td *ngFor="let availability of room_data.availability">
                                        <div class="min-width100" *ngIf="availability || availability === 0">
                                            {{availability}}
                                        </div>
                                    </td>

                                </tr>
                            </table>
                            <table class="w-100 border-top-0 border-left-0 border-right-0">
                                <tr *ngFor="let contrtact_det of room_data.RoomContractDetails; let j=index">
                                    <table class="border-wrap border-left-0 border-right-0 sticky">
                                        <tr class="formBorderSpace">
                                            <td colspan="6" class="border-0">
                                                <div class="collapse-wrap text-left w-100">
                                                    <div class="room-wrap">
                                                        {{contrtact_det.contract_name}} ({{contrtact_det.rate_plan}},
                                                        {{contrtact_det.meal_plan}}) ({{room_data.currency_code}})
                                                    </div>
                                                    <div class="expandAdd" *ngIf="contrtact_det.aria_collapse" (click)="CollapseContract(i,j)">
                                                        <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#48465b">
                                                            <path
                                                                d="M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
                                                        </svg>
                                                        <span>Expand to update rates</span>
                                                    </div>
                                                    <div class="expandAdd" *ngIf="!contrtact_det.aria_collapse" (click)="CollapseContract(i,j)">
                                                        <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#48465b">
                                                            <path
                                                                d="M280-440h400v-80H280v80ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
                                                        </svg>
                                                        <span>Collapse</span>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <ng-container *ngIf="!contrtact_det.aria_collapse">
                                            <tr *ngFor="let adult_array of contrtact_det.AdultData;let j=index">
                                                <table class="border-left-0 border-right-0 w-100 noBorderLastChild">
                                                    <tr class="formInputBorder">
                                                        <td class="border-left-0 border-top-0 border-bottom-0 sticky text-left">
                                                            <div class="min-width200">
                                                                {{j+1}} Adult
                                                            </div>
                                                        </td>
                                                        <td *ngFor="let adult_rate_on_date of adult_array.value;let adult_rate_ind = index"
                                                            [ngClass]="{'rowColorRed':room_data.status[adult_rate_ind] == 'STOPSALE'}">
                                                            <div class="min-width100 text-right">
                                                                {{adult_rate_on_date}}
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </tr>
                                            <tr class="formBorderSpace" *ngIf="contrtact_det.child_age_range_1">
                                                <div class="wPx-300 room-wrap sub-header sticky">
                                                    Child Age Range: {{contrtact_det.child_age_range_1}}
                                                </div>
                                            </tr>
                                            <tr *ngFor="let adult_array of contrtact_det.ChildDataRange1;let j=index">
                                                <table class="border-left-0 border-right-0 border-bottom-0 w-100 noBorderLastChild">
                                                    <tr class="formInputBorder">
                                                        <td class="border-left-0 sticky text-left">
                                                            <div class="min-width200">
                                                                {{j+1}} Child
                                                            </div>
                                                        </td>
                                                        <td *ngFor="let adult_rate_on_date of adult_array.value;let adult_rate_ind = index"
                                                            [ngClass]="{'rowColorRed':room_data.status[adult_rate_ind] == 'STOPSALE'}">
                                                            <div class="min-width100 text-right">
                                                                {{adult_rate_on_date}}
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </tr>
                                            <tr class="formBorderSpace" *ngIf="contrtact_det.child_age_range_2">
                                                <div class="wPx-300 room-wrap sub-header sticky">
                                                    Child Age Range: {{contrtact_det.child_age_range_2}}
                                                </div>
                                            </tr>
                                            <tr *ngFor="let adult_array of contrtact_det.ChildDataRange2;let j=index">
                                                <table>
                                                    <tr class="formInputBorder">
                                                        <td class="border-left-0 sticky text-left">
                                                            <div class="min-width200">
                                                                {{j+1}} Child
                                                            </div>
                                                        </td>
                                                        <td *ngFor="let adult_rate_on_date of adult_array.value;let adult_rate_ind = index"
                                                            [ngClass]="{'rowColorRed':room_data.status[adult_rate_ind] == 'STOPSALE'}">
                                                            <div class="min-width100 text-right">
                                                                {{adult_rate_on_date}}
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </tr>
                                        </ng-container>
                                    </table>
                                </tr>
                            </table>
                        </tr>
                    </table>
                </div>
                <div class="no-data-found" #tableContainer *ngIf="!OverViewObj">
                    No Data Found
                </div>
            </div>
        </div>
        <div class="box-wrapper">
            <div class="box-header">Rooms</div>
            <div class="card">
                <div class="actionButtonSticky">
                    <p-table #RoomData [resizableColumns]="true" [columns]="RoomCol" [value]="AllRooms"
                        [rowsPerPageOptions]="[10, 25, 50, 100]" styleClass="p-datatable-gridlines" [rows]="10"
                         responsiveLayout="scroll" [paginator]="true"
                        [rowHover]="true" dataKey="id" [globalFilterFields]="[
                    'room_name',
                    'room_view',
                    'max_adult_occupancy',
                    'max_child_occupancy',
                    'max_child_age',
                    'max_total_occupancy',
                    'is_extra_bed_supported',
                    'is_free_child',
                    'extranet_room_id',
                    'Custom_created_on',
                    'updated_by',
                    'status',
                    'Custom_updated_on',
                    'created_by',
                ]" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
                        [showCurrentPageReport]="true">
                        <ng-template pTemplate="caption">
                            <p-toolbar *ngIf="RoomCol && RoomCol.length > 0">
                                <ng-template pTemplate="left" *ngIf="_commonService.MenuTabList.Rooms.Download">
                                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="CSV"
                                        tooltipPosition="bottom" (click)="RoomData.exportCSV()">CSV</button>
                                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="XLS"
                                        tooltipPosition="bottom"
                                        (click)="_commonService.exportExcel(AllRooms,RoomCol,'Hotel Rooms')">Excel</button>
                                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="PDF"
                                        tooltipPosition="bottom"
                                        (click)="_commonService.exportPdf(AllRooms,RoomCol,'Hotel Rooms')">PDF</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)="RoomData.filterGlobal(searchInp.value, 'contains')"
                                                placeholder="Search" />
                                        </span>
                                    </div>
                                </ng-template>
                            </p-toolbar>
                        </ng-template>
                        <ng-template pTemplate="header">
                            <tr>
                                <th pSortableColumn="status">
                                    Status
                                    <p-sortIcon field="status" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="room_name">
                                    Room Name
                                    <p-sortIcon field="room_name" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="room_view">
                                    Room View
                                    <p-sortIcon field="room_view" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="max_adult_occupancy">
                                    Max Adult Occupancy
                                    <p-sortIcon field="max_adult_occupancy" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="max_child_occupancy">
                                    Max Child Occupancy
                                    <p-sortIcon field="max_child_occupancy" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="max_child_age">
                                    Max Child Age
                                    <p-sortIcon field="max_child_age" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="max_total_occupancy">
                                    Max Total Occupancy
                                    <p-sortIcon field="max_total_occupancy" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="is_extra_bed_supported">
                                    Extrabed Supported
                                    <p-sortIcon field="is_extra_bed_supported" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="is_free_child">
                                    Free Child Allowed
                                    <p-sortIcon field="is_free_child" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="extranet_room_id">
                                    Room Id
                                    <p-sortIcon field="extranet_room_id" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="created_by">
                                    Created By
                                    <p-sortIcon field="created_by" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="created_on">
                                    Created On
                                    <p-sortIcon field="created_on" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="updated_by">
                                    Updated By
                                    <p-sortIcon field="updated_by" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="Custom_updated_on">
                                    Updated On
                                    <p-sortIcon field="Custom_updated_on" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="hotel_name">Action</th>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-data>
                            <tr>
                                <td>
                                    <span class="status"
                                        [ngClass]="{'status-success':data.is_active,'status-failed':data.is_active == false}">
                                        {{data.status}}
                                    </span>
                                </td>
                                <td>{{data.room_name}}</td>
                                <td>{{data.room_view}}</td>
                                <td>{{data.max_adult_occupancy}}</td>
                                <td>{{data.max_child_occupancy}}</td>
                                <td>{{data.max_child_age}}</td>
                                <td>{{data.max_total_occupancy}}</td>
                                <td>{{data.is_extra_bed_supported}}</td>
                                <td>{{data.is_free_child}}</td>
                                <td>{{data.extranet_room_id}}</td>
                                <td>{{data.created_by}}</td>
                                <td>{{data.Custom_created_on}}</td>
                                <td>{{data.updated_by}}</td>
                                <td>{{data.Custom_updated_on}}</td>
                                <td>
                                    <button mat-icon-button [matMenuTriggerFor]="menu">
                                        <span class="material-icons"> more_horiz </span>
                                    </button>
                                    <mat-menu #menu="matMenu">
                                        <button mat-menu-item (click)="EditRoom(data.extranet_room_id)">
                                            <span class="flex-center">
                                                <span> Edit </span>
                                            </span>
                                        </button>
                                        <button mat-menu-item *ngIf="_commonService.MenuTabList.Rooms.IsActive"
                                            (click)="updateRoomStatus(data.extranet_room_id,data.is_active)">
                                            <span class="flex-center">
                                                <span> {{ !data.is_active ? 'Active' : 'Deactive'}}</span>
                                            </span>
                                        </button>
                                        <button mat-menu-item (click)="CloneRoom(data.extranet_room_id)">
                                            <span class="flex-center">
                                                <span> Clone Rule </span>
                                            </span>
                                        </button>
                                    </mat-menu>
                                </td>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="emptymessage">
                            <tr *ngIf="AllRooms === null || AllRooms" class="resultNotFound">
                                <td> No data found </td>
                            </tr>
                        </ng-template>
                    </p-table>
                </div>
            </div>
        </div>
        <div class="box-wrapper">
            <div class="box-header">Season</div>
            <div class="card">
                <div class="actionButtonSticky">
                    <p-table #Seasondata [resizableColumns]="true" [columns]="SeasonCols" [value]="SeasonResult"
                        [rowsPerPageOptions]="[10, 25, 50, 100]" styleClass="p-datatable-gridlines" [rows]="10"
                         responsiveLayout="scroll" [paginator]="true"
                        [rowHover]="true" dataKey="id" [globalFilterFields]="[
                    'season_name',
                    'date_range_arr',
                    'extranet_season_id',
                    'updated_by',
                    'created_by',
                    'status',
                    'Custom_created_on',
                    'Custom_updated_on',
                ]" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
                        [showCurrentPageReport]="true">
                        <ng-template pTemplate="caption">
                            <p-toolbar *ngIf="SeasonResult && SeasonResult.length > 0">
                                <ng-template pTemplate="left" *ngIf="_commonService.MenuTabList.HotelSeason.Download">
                                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="CSV"
                                        tooltipPosition="bottom" (click)="Seasondata.exportCSV()">CSV</button>
                                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="XLS"
                                        tooltipPosition="bottom"
                                        (click)="_commonService.exportExcel(SeasonResult,SeasonCols,'Hotel Season')">Excel</button>
                                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="PDF"
                                        tooltipPosition="bottom"
                                        (click)="_commonService.exportPdf(SeasonResult,SeasonCols,'Hotel Season')">PDF</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)="Seasondata.filterGlobal(searchInp.value, 'contains')"
                                                placeholder="Search" />
                                        </span>
                                    </div>
                                </ng-template>
                            </p-toolbar>
                        </ng-template>
                        <ng-template pTemplate="header">
                            <tr>
                                <th pSortableColumn="status">
                                    Status
                                    <p-sortIcon field="status" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="season_name">
                                    Season Name
                                    <p-sortIcon field="season_name" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="date_range">
                                    Date Range
                                    <p-sortIcon field="date_range" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="extranet_season_id">
                                    Season Id
                                    <p-sortIcon field="extranet_season_id" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="created_by">
                                    Created By
                                    <p-sortIcon field="created_by" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="created_on">
                                    Created On
                                    <p-sortIcon field="created_on" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="updated_on">
                                    Updated By
                                    <p-sortIcon field="updated_on" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="hotel_name">
                                    Updated On
                                    <p-sortIcon field="hotel_name" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th>Action</th>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-data>
                            <tr>
                                <td>
                                    <span class="status"
                                        [ngClass]="{'status-success':data.is_active,'status-failed':data.is_active == false}">
                                        {{data.status}}
                                    </span>
                                </td>
                                <td>{{data.season_name}}</td>
                                <td><span *ngFor="let item of data.date_range_arr" class="d-block">{{item}}</span></td>
                                <td>{{data.extranet_season_id}}</td>
                                <td>{{data.created_by}}</td>
                                <td>{{data.Custom_created_on}}</td>
                                <td>{{data.updated_by}}</td>
                                <td>{{data.Custom_updated_on}}</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(data.extranet_season_id)">
                                                <span class="flex-center">
                                                    <span> Edit </span>
                                                </span>
                                            </button>
                                            <button mat-menu-item
                                                *ngIf="_commonService.MenuTabList.HotelSeason.IsActive"
                                                (click)="updateSeasonStatus(data.extranet_season_id,data.is_active)">
                                                <span class="flex-center">
                                                    <span> {{ !data.is_active ? 'Active' : 'Deactive'}}</span>
                                                </span>
                                            </button>
                                        </mat-menu>
                                    </div>
                                </td>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="emptymessage">
                            <tr *ngIf="SeasonResult === null || SeasonResult" class="resultNotFound">
                                <td> No data found </td>
                            </tr>
                        </ng-template>
                    </p-table>
                </div>
            </div>
        </div>
        <div class="box-wrapper">
            <div class="box-header">Room Contract</div>
            <div class="card">
                <div class="actionButtonSticky">
                    <p-table #Contractdata [resizableColumns]="true" [columns]="ContractCols" [value]="Contract_Results"
                        [rowsPerPageOptions]="[10, 25, 50, 100]" styleClass="p-datatable-gridlines" [rows]="10"
                         responsiveLayout="scroll" [paginator]="true"
                        [rowHover]="true" dataKey="id" [globalFilterFields]="[
                    'extranet_contract_id',
                    'contract_name',
                    'extranet_room_id',
                    'room_name',
                    'rate_plan_name',
                    'meal_plan_name',
                    'nationality_type',
                    'nationality_applicable_type',
                    'nationality',
                    'date_range',
                    'currency_code',
                    'is_meal_addon_applicable',
                    'addon_name',
                    'last_updated',
                    'Custom_created_on',
                    'updated_by',
                    'status',
                    'Custom_updated_on',
                    'created_by',
                ]" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
                        [showCurrentPageReport]="true">
                        <ng-template pTemplate="caption">
                            <p-toolbar *ngIf="Contract_Results && Contract_Results.length > 0">
                                <ng-template pTemplate="left" *ngIf="_commonService.MenuTabList.RoomContract.Download">
                                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="CSV"
                                        tooltipPosition="bottom" (click)="Contractdata.exportCSV()">CSV</button>
                                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="XLS"
                                        tooltipPosition="bottom"
                                        (click)="_commonService.exportExcel(Contract_Results,ContractCols,'Room Contarct')">Excel</button>
                                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="PDF"
                                        tooltipPosition="bottom"
                                        (click)="_commonService.exportPdf(Contract_Results,ContractCols,'Room Contarct')">PDF</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)="Contractdata.filterGlobal(searchInp.value, 'contains')"
                                                placeholder="Search" />
                                        </span>
                                    </div>
                                </ng-template>
                            </p-toolbar>
                        </ng-template>
                        <ng-template pTemplate="header">
                            <tr>
                                <th pSortableColumn="status">
                                    Contract Status
                                    <p-sortIcon field="status" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="extranet_contract_id">
                                    Contract Id
                                    <p-sortIcon field="extranet_contract_id" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="contract_name">
                                    Contract Name
                                    <p-sortIcon field="contract_name" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="extranet_room_id">
                                    Room Id
                                    <p-sortIcon field="extranet_room_id" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="room_name">
                                    Room Name
                                    <p-sortIcon field="room_name" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="rate_plan_name">
                                    Rate Plan
                                    <p-sortIcon field="rate_plan_name" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="meal_plan_name">
                                    Meal Plan
                                    <p-sortIcon field="meal_plan_name" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="nationality_type">
                                    Nationality Type
                                    <p-sortIcon field="nationality_type" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="nationality_applicable_type">
                                    Nationality Applicability
                                    <p-sortIcon field="nationality_applicable_type" 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_range">
                                    Date Range/Season
                                    <p-sortIcon field="date_range" 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_meal_addon_applicable">
                                    Meal Add On
                                    <p-sortIcon field="is_meal_addon_applicable" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="addon_name">
                                    Meals
                                    <p-sortIcon field="addon_name" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="created_by">
                                    Created By
                                    <p-sortIcon field="created_by" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="created_on">
                                    Created On
                                    <p-sortIcon field="created_on" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="updated_by">
                                    Updated By
                                    <p-sortIcon field="updated_by" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="updated_on">
                                    Updated On
                                    <p-sortIcon field="updated_on" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="last_updated">
                                    Last updated
                                    <p-sortIcon field="last_updated" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th>Action</th>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-data>
                            <tr>
                                <td>
                                    <span class="status"
                                        [ngClass]="{'status-success':data.is_active,'status-failed':data.is_active == false}">
                                        {{data.status}}
                                    </span>
                                </td>
                                <td>{{data.extranet_contract_id}}</td>
                                <td>{{data.contract_name}}</td>
                                <td>{{data.extranet_room_id}}</td>
                                <td>{{data.room_name}}</td>
                                <td>{{data.rate_plan_name}}</td>
                                <td>{{data.meal_plan_name}}</td>
                                <td>{{data.nationality_type}}</td>
                                <td>{{data.nationality_applicable_type}}</td>
                                <td>{{data.nationality}}</td>
                                <td><span *ngFor="let item of data.date_range_arr" class="d-block">{{item}}</span></td>
                                <td>{{data.currency_code}}</td>
                                <td>{{data.is_meal_addon_applicable}}</td>
                                <td>{{data.addon_name}}</td>
                                <td>{{data.created_by}}</td>
                                <td>{{data.Custom_created_on}}</td>
                                <td>{{data.updated_by}}</td>
                                <td>{{data.Custom_updated_on}}</td>
                                <td>{{data.last_updated}}</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(data.extranet_block_date_rule_id)">
                                            <span class="flex-center">
                                                <span> Edit </span>
                                            </span>
                                        </button> -->
                                            <button mat-menu-item
                                                *ngIf="_commonService.MenuTabList.RoomContract.IsActive"
                                                (click)="updateContractStatus(data.extranet_contract_id,data.is_active)">
                                                <span class="flex-center">
                                                    <span> {{ !data.is_active ? 'Active' : 'Deactive'}}</span>
                                                </span>
                                            </button>
                                            <button mat-menu-item
                                                (click)="Update(data.extranet_contract_id,'UpdateAdultRate')">
                                                <span class="flex-center">
                                                    <span> Update Adult Rate</span>
                                                </span>
                                            </button>
                                            <button mat-menu-item
                                                (click)="Update(data.extranet_contract_id,'UpdateChildRate')">
                                                <span class="flex-center">
                                                    <span> Update Child Rate</span>
                                                </span>
                                            </button>
                                            <button mat-menu-item
                                                (click)="Update(data.extranet_contract_id,'UpdateNationality')">
                                                <span class="flex-center">
                                                    <span> Update Nationality</span>
                                                </span>
                                            </button>
                                            <button mat-menu-item
                                                (click)="Update(data.extranet_contract_id,'UpdateMealAddOn')">
                                                <span class="flex-center">
                                                    <span> Update Meal Add-On Mapping</span>
                                                </span>
                                            </button>
                                            <button mat-menu-item
                                                (click)="Update(data.extranet_contract_id,'UpdateCancellationPolicy')">
                                                <span class="flex-center">
                                                    <span> Update Cancellation Policy</span>
                                                </span>
                                            </button>
                                            <button mat-menu-item (click)="EditContract(data.extranet_contract_id)">
                                                <span class="flex-center">
                                                    <span> Clone Contract </span>
                                                </span>
                                            </button>
                                        </mat-menu>
                                    </div>
                                </td>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="emptymessage">
                            <tr *ngIf="Contract_Results === null || Contract_Results" class="resultNotFound">
                                <td> No data found </td>
                            </tr>
                        </ng-template>
                    </p-table>
                </div>
            </div>
        </div>
        <div class="box-wrapper">
            <div class="box-header">Allocation</div>
            <div class="card">
                <div class="actionButtonSticky">
                    <p-table #Allocationdata [resizableColumns]="true" [columns]="Allocationcols"
                        [value]="AllocationResult" [rowsPerPageOptions]="[10, 25, 50, 100]"
                        styleClass="p-datatable-gridlines" [rows]="10" 
                        responsiveLayout="scroll" [paginator]="true" [rowHover]="true" dataKey="id"
                        [globalFilterFields]="[
                    'season_name',
                    'room_name',
                    'updated_by',
                    'created_by',
                    'Custom_created_on',
                    'Custom_updated_on',
                ]" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
                        [showCurrentPageReport]="true">
                        <ng-template pTemplate="caption">
                            <p-toolbar *ngIf="AllocationResult && AllocationResult.length > 0">
                                <ng-template pTemplate="left"
                                    *ngIf="_commonService.MenuTabList.RoomAllocation.Download">
                                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="CSV"
                                        tooltipPosition="bottom" (click)="Allocationdata.exportCSV()">CSV</button>
                                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="XLS"
                                        tooltipPosition="bottom"
                                        (click)="_commonService.exportExcel(AllocationResult,Allocationcols,'Hotel Allocation')">Excel</button>
                                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="PDF"
                                        tooltipPosition="bottom"
                                        (click)="_commonService.exportPdf(AllocationResult,Allocationcols,'Hotel Allocation')">PDF</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)="Allocationdata.filterGlobal(searchInp.value, 'contains')"
                                                placeholder="Search" />
                                        </span>
                                    </div>
                                </ng-template>
                            </p-toolbar>
                        </ng-template>
                        <ng-template pTemplate="header">
                            <tr>
                                <th pSortableColumn="extranet_room_id">
                                    Room ID
                                    <p-sortIcon field="extranet_room_id" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="room_name">
                                    Room Name
                                    <p-sortIcon field="room_name" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="created_by">
                                    Created By
                                    <p-sortIcon field="created_by" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="created_on">
                                    Created On
                                    <p-sortIcon field="created_on" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="updated_on">
                                    Updated By
                                    <p-sortIcon field="updated_on" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="hotel_name">
                                    Updated On
                                    <p-sortIcon field="hotel_name" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th>Action</th>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-data>
                            <tr>
                                <td>{{data.extranet_room_id}}</td>
                                <td>{{data.room_name}}</td>
                                <td>{{data.created_by}}</td>
                                <td>{{data.Custom_created_on}}</td>
                                <td>{{data.updated_by}}</td>
                                <td>{{data.Custom_updated_on}}</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)="EditAllocation(data.extranet_allocation_id)">
                                                <span class="flex-center">
                                                    <span> Edit </span>
                                                </span>
                                            </button>
                                        </mat-menu>
                                    </div>
                                </td>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="emptymessage">
                            <tr *ngIf="AllocationResult === null || AllocationResult" class="resultNotFound">
                                <td> No data found </td>
                            </tr>
                        </ng-template>
                    </p-table>
                </div>
            </div>
        </div>
        <div class="box-wrapper">
            <div class="box-header">Offers</div>
            <div class="card">
                <div class="actionButtonSticky">
                    <p-table #OffersData [resizableColumns]="true" [rowsPerPageOptions]="[10, 25, 50, 100]"
                        [columns]="OfferCols" [value]="OffersResult" styleClass="p-datatable-gridlines" [rows]="10"
                         responsiveLayout="scroll" selectionMode="multiple"
                        [paginator]="true" [rowHover]="true" dataKey="id" [globalFilterFields]="[
                        'offer_name',
                        'offer_type',
                        'room_name',
                        'is_combinable_offer',
                        'discount_code',
                        'offer_days',
                        'extranet_offer_id',
                        'Custom_multi_day',
                        'currency_code',
                        'updated_by',
                        'Custom_updated_on',
                        'status',
                ]" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
                        [showCurrentPageReport]="true">
                        <ng-template pTemplate="caption">
                            <p-toolbar *ngIf="OffersResult && OffersResult.length > 0">
                                <ng-template pTemplate="left" *ngIf="_commonService.MenuTabList.HotelOffers.Download">
                                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="CSV"
                                        tooltipPosition="bottom" (click)="OffersData.exportCSV()">CSV</button>
                                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="XLS"
                                        tooltipPosition="bottom"
                                        (click)="_commonService.exportExcel(OffersResult,OfferCols,'Offers')">Excel</button>
                                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="PDF"
                                        tooltipPosition="bottom"
                                        (click)="_commonService.exportPdf(OffersResult,OfferCols,'Offers')">PDF</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)="OffersData.filterGlobal(searchInp.value, 'contains')"
                                                placeholder="Search" />
                                        </span>
                                    </div>
                                </ng-template>
                            </p-toolbar>
                        </ng-template>
                        <ng-template pTemplate="header">
                            <tr>
                                <th pSortableColumn="status">
                                    Status
                                    <p-sortIcon field="status" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="offer_name">
                                    Offer Name
                                    <p-sortIcon field="offer_name" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="offer_type">
                                    Offer Type
                                    <p-sortIcon field="offer_type" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="room_name">
                                    Room Name
                                    <p-sortIcon field="room_name" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="is_combinable_offer">
                                    Combinable Offer
                                    <p-sortIcon field="is_combinable_offer" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="discount_code">
                                    Discount Code
                                    <p-sortIcon field="discount_code" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="offer_days">
                                    Offer days
                                    <p-sortIcon field="offer_days" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="extranet_offer_id">
                                    Offer Id
                                    <p-sortIcon field="extranet_offer_id" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="created_by">
                                    Created By
                                    <p-sortIcon field="created_by" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="created_on">
                                    Created On
                                    <p-sortIcon field="created_on" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="updated_by">
                                    Updated By
                                    <p-sortIcon field="updated_by" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="updated_on">
                                    Updated On
                                    <p-sortIcon field="updated_on" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th>Action</th>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-data>
                            <tr>
                                <td>
                                    <span class="status"
                                        [ngClass]="{'status-success':data.is_active,'status-failed':data.is_active == false}">
                                        {{data.status}}
                                    </span>
                                </td>
                                <td>{{data.offer_name}}</td>
                                <td>{{data.offer_type}}</td>
                                <td>{{data.room_name}}</td>
                                <td>{{data.is_combinable_offer}}</td>
                                <td>{{data.discount_code}}</td>
                                <td>{{data.offer_days}}</td>
                                <td>{{data.extranet_offer_id}}</td>
                                <td>{{data.created_by}}</td>
                                <td>{{data.Custom_created_on}}</td>
                                <td>{{data.updated_by}}</td>
                                <td>{{data.Custom_updated_on}}</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)="EditOffer(data.extranet_offer_id)">
                                                <span class="flex-center">
                                                    <span> Edit </span>
                                                </span>
                                            </button>
                                            <button mat-menu-item
                                                *ngIf="_commonService.MenuTabList.HotelOffers.IsActive"
                                                (click)="updateStatus(data.extranet_offer_id,data.is_active)">
                                                <span class="flex-center">
                                                    <span> {{ !data.is_active ? 'Active' : 'Deactive'}}</span>
                                                </span>
                                            </button>
                                        </mat-menu>
                                    </div>
                                </td>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="emptymessage">
                            <tr *ngIf="OffersResult === null || OffersResult" class="resultNotFound">
                                <td> No data found </td>
                            </tr>
                        </ng-template>
                    </p-table>
                </div>
            </div>
        </div>
        <div class="box-wrapper">
            <div class="box-header">Supplements</div>
            <div class="card">
                <div class="actionButtonSticky">
                    <p-table #SupplementData [resizableColumns]="true" [rowsPerPageOptions]="[10, 25, 50, 100]"
                        [columns]="SupplementCols" [value]="SupplementResult" styleClass="p-datatable-gridlines"
                        [rows]="10"  responsiveLayout="scroll"
                        selectionMode="multiple" [paginator]="true" [rowHover]="true" dataKey="id" [globalFilterFields]="[
                        'supplement_name',
                        'supplement_rate_type',
                        'room_name',
                        'supplement_type',
                        'supplement_dates',
                        'supplement_days',
                        'extranet_supplement_id',
                        'currency_code',
                        'updated_by',
                        'Custom_updated_on',
                        'status',
                ]" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
                        [showCurrentPageReport]="true">
                        <ng-template pTemplate="caption">
                            <p-toolbar *ngIf="SupplementResult && SupplementResult.length > 0">
                                <ng-template pTemplate="left"
                                    *ngIf="_commonService.MenuTabList.HotelSupplements.Download">
                                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="CSV"
                                        tooltipPosition="bottom" (click)="SupplementData.exportCSV()">CSV</button>
                                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="XLS"
                                        tooltipPosition="bottom"
                                        (click)="_commonService.exportExcel(SupplementResult,SupplementCols,'Suppliments')">Excel</button>
                                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="PDF"
                                        tooltipPosition="bottom"
                                        (click)="_commonService.exportPdf(SupplementResult,SupplementCols,'Suppliments')">PDF</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)="SupplementData.filterGlobal(searchInp.value, 'contains')"
                                                placeholder="Search" />
                                        </span>
                                    </div>
                                </ng-template>
                            </p-toolbar>
                        </ng-template>
                        <ng-template pTemplate="header">
                            <tr>
                                <th pSortableColumn="status">
                                    Status
                                    <p-sortIcon field="status" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="supplement_name">
                                    Supplement Name
                                    <p-sortIcon field="supplement_name" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="supplement_rate_type">
                                    Supplement Rate Type
                                    <p-sortIcon field="supplement_rate_type" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="room_name">
                                    Room Name
                                    <p-sortIcon field="room_name" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="supplement_type">
                                    Supplement Type
                                    <p-sortIcon field="supplement_type" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="supplement_dates">
                                    Supplement Dates
                                    <p-sortIcon field="supplement_dates" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="supplement_days">
                                    Supplement Days
                                    <p-sortIcon field="supplement_days" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="extranet_supplement_id">
                                    Supplement Id
                                    <p-sortIcon field="extranet_supplement_id" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="created_by">
                                    Created By
                                    <p-sortIcon field="created_by" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="created_on">
                                    Created On
                                    <p-sortIcon field="created_on" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="updated_by">
                                    Updated By
                                    <p-sortIcon field="updated_by" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="updated_on">
                                    Updated On
                                    <p-sortIcon field="updated_on" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th>Action</th>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-data>
                            <tr>
                                <td>
                                    <span class="status"
                                        [ngClass]="{'status-success':data.is_active,'status-failed':data.is_active == false}">
                                        {{data.status}}
                                    </span>
                                </td>
                                <td>{{data.supplement_name}}</td>
                                <td>{{data.supplement_rate_type}}</td>
                                <td>{{data.room_name}}</td>
                                <td>{{data.supplement_type}}</td>
                                <td><span *ngFor="let item of data.date_range_arr" class="d-block">{{item}}</span></td>
                                <td>{{data.supplement_days}}</td>
                                <td>{{data.extranet_supplement_id}}</td>
                                <td>{{data.created_by}}</td>
                                <td>{{data.Custom_created_on}}</td>
                                <td>{{data.updated_by}}</td>
                                <td>{{data.Custom_updated_on}}</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)="EditSupplement(data.extranet_supplement_id)">
                                                <span class="flex-center">
                                                    <span> Edit </span>
                                                </span>
                                            </button>
                                            <button mat-menu-item
                                                *ngIf="_commonService.MenuTabList.HotelSupplements.IsActive"
                                                (click)="updateStatus(data.extranet_supplement_id,data.is_active)">
                                                <span class="flex-center">
                                                    <span> {{ !data.is_active ? 'Active' : 'Deactive'}}</span>
                                                </span>
                                            </button>
                                        </mat-menu>
                                    </div>
                                </td>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="emptymessage">
                            <tr *ngIf="SupplementResult === null || SupplementResult" class="resultNotFound">
                                <td> No data found </td>
                            </tr>
                        </ng-template>
                    </p-table>
                </div>
            </div>
        </div>
        <div class="box-wrapper">
            <div class="box-header">Meal Add-On</div>
            <div class="card">
                <div class="actionButtonSticky">
                    <p-table #dt [resizableColumns]="true" [rowsPerPageOptions]="[10, 25, 50, 100]"
                        styleClass="p-datatable-gridlines" [rows]="10" 
                        responsiveLayout="scroll" selectionMode="multiple" [paginator]="true" [rowHover]="true"
                        dataKey="id" [columns]="MealCols" [value]="MealsResult" [globalFilterFields]="[
                    'addon_name',
                    'meal_plan_name',
                    'currency',
                    'adult_rate',
                    'is_paid_child',
                    'status',
                    'is_extra_bed_supported',
                    'is_free_child',
                    'extranet_meal_addon_id',
                    'Custom_created_on',
                    'updated_by',
                    'Custom_updated_on',
                    'created_by',
                ]" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
                        [showCurrentPageReport]="true">
                        <ng-template pTemplate="caption">
                            <p-toolbar *ngIf="MealsResult && MealsResult.length > 0">
                                <ng-template pTemplate="left" *ngIf="_commonService.MenuTabList.MealAddOn.Download">
                                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="CSV"
                                        tooltipPosition="bottom" (click)="dt.exportCSV()">CSV</button>
                                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="XLS"
                                        tooltipPosition="bottom"
                                        (click)="_commonService.exportExcel(MealsResult,MealCols,'Hotel Meals')">Excel</button>
                                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="PDF"
                                        tooltipPosition="bottom"
                                        (click)="_commonService.exportPdf(MealsResult,MealCols,'Hotel Meals')">PDF</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">
                            <tr>
                                <th pSortableColumn="status">
                                    Status
                                    <p-sortIcon field="status" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="addon_name">
                                    Meal Add-On Name
                                    <p-sortIcon field="addon_name" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="meal_plan_name">
                                    Meal Plan
                                    <p-sortIcon field="meal_plan_name" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="currency">
                                    Currency
                                    <p-sortIcon field="currency" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="adult_rate">
                                    Adult Rate
                                    <p-sortIcon field="adult_rate" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="is_paid_child">
                                    Paid Child
                                    <p-sortIcon field="is_paid_child" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="extranet_meal_addon_id">
                                    Meal Add-On Id
                                    <p-sortIcon field="extranet_meal_addon_id" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="created_by">
                                    Created By
                                    <p-sortIcon field="created_by" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="Custom_created_on">
                                    Created On
                                    <p-sortIcon field="Custom_created_on" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="updated_by">
                                    Updated By
                                    <p-sortIcon field="updated_by" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="Custom_updated_on">
                                    Updated On
                                    <p-sortIcon field="Custom_updated_on" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th>Action</th>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-data>
                            <tr>
                                <td>
                                    <span class="status"
                                        [ngClass]="{'status-success':data.is_active,'status-failed':data.is_active == false}">
                                        {{data.status}}
                                    </span>
                                </td>
                                <td>{{data.addon_name}}</td>
                                <td>{{data.meal_plan_name}}</td>
                                <td>{{data.currency}}</td>
                                <td>{{data.adult_rate}}</td>
                                <td>{{data.is_paid_child}}</td>
                                <td>{{data.extranet_meal_addon_id}}</td>
                                <td>{{data.created_by}}</td>
                                <td>{{data.Custom_created_on}}</td>
                                <td>{{data.updated_by}}</td>
                                <td>{{data.Custom_updated_on}}</td>
                                <td>
                                    <button mat-icon-button [matMenuTriggerFor]="menu">
                                        <span class="material-icons"> more_horiz </span>
                                    </button>
                                    <mat-menu #menu="matMenu">
                                        <button mat-menu-item (click)="EditMeals(data.extranet_meal_addon_id)">
                                            <span class="flex-center">
                                                <span> Edit </span>
                                            </span>
                                        </button>
                                        <button mat-menu-item *ngIf="_commonService.MenuTabList.MealAddOn.IsActive"
                                            (click)="updateMealsStatus(data.extranet_meal_addon_id,data.is_active)">
                                            <span class="flex-center">
                                                <span> {{ !data.is_active ? 'Active' : 'Deactive'}}</span>
                                            </span>
                                        </button>
                                    </mat-menu>
                                </td>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="emptymessage">
                            <tr *ngIf="MealsResult === null || MealsResult" class="resultNotFound">
                                <td> No data found </td>
                            </tr>
                        </ng-template>
                    </p-table>
                </div>
            </div>
        </div>
        <div class="box-wrapper">
            <div class="box-header">Block Dates</div>
            <div class="card">
                <div class="actionButtonSticky">
                    <p-table #dt [resizableColumns]="true" [columns]="BlockDateCols" [value]="BlockDateResult"
                        [rowsPerPageOptions]="[10, 25, 50, 100]" styleClass="p-datatable-gridlines" [rows]="10"
                         responsiveLayout="scroll" [paginator]="true"
                        [rowHover]="true" dataKey="id" [globalFilterFields]="[
                    'rule_name',
                    'block_date_type',
                    'date_range_arr',
                    'created_by',
                    'Custom_created_on',
                    'updated_by',
                    'status',
                    'Custom_updated_on',
                ]" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
                        [showCurrentPageReport]="true">
                        <ng-template pTemplate="caption">
                            <p-toolbar *ngIf="BlockDateResult && BlockDateResult.length > 0">
                                <ng-template pTemplate="left"
                                    *ngIf="_commonService.MenuTabList.HotelBlockDates.Download">
                                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="CSV"
                                        tooltipPosition="bottom" (click)="dt.exportCSV()">CSV</button>
                                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="XLS"
                                        tooltipPosition="bottom"
                                        (click)="_commonService.exportExcel(BlockDateResult,BlockDateCols,'Hotel Block Dates')">Excel</button>
                                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="PDF"
                                        tooltipPosition="bottom"
                                        (click)="_commonService.exportPdf(BlockDateResult,BlockDateCols,'Hotel Block Dates')">PDF</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">
                            <tr>
                                <th pSortableColumn="status">
                                    Status
                                    <p-sortIcon field="status" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="rule_name">
                                    Rule Name
                                    <p-sortIcon field="rule_name" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="block_date_type">
                                    Block Date Type
                                    <p-sortIcon field="block_date_type" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="date_range">
                                    Dates
                                    <p-sortIcon field="date_range" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="created_by">
                                    Created By
                                    <p-sortIcon field="created_by" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="created_on">
                                    Created On
                                    <p-sortIcon field="created_on" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="updated_by">
                                    Updated By
                                    <p-sortIcon field="updated_by" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="updated_on">
                                    Updated On
                                    <p-sortIcon field="updated_on" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th>Action</th>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-data>
                            <tr>
                                <td>
                                    <span class="status"
                                        [ngClass]="{'status-success':data.is_active,'status-failed':data.is_active == false}">
                                        {{data.status}}
                                    </span>
                                </td>
                                <td>{{data.rule_name}}</td>
                                <td>{{data.block_date_type}}</td>
                                <td><span *ngFor="let item of data.date_range_arr" class="d-block">{{item}}</span></td>
                                <td>{{data.created_by}}</td>
                                <td>{{data.Custom_created_on}}</td>
                                <td>{{data.updated_by}}</td>
                                <td>{{data.Custom_updated_on}}</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(data.extranet_block_date_rule_id)">
                                                <span class="flex-center">
                                                    <span> Edit </span>
                                                </span>
                                            </button>
                                            <button mat-menu-item
                                                *ngIf="_commonService.MenuTabList.HotelBlockDates.IsActive"
                                                (click)="updateStatus(data.extranet_block_date_rule_id,data.is_active)">
                                                <span class="flex-center">
                                                    <span> {{ !data.is_active ? 'Active' : 'Deactive'}}</span>
                                                </span>
                                            </button>
                                        </mat-menu>
                                    </div>
                                </td>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="emptymessage">
                            <tr *ngIf="BlockDateResult === null || BlockDateResult" class="resultNotFound">
                                <td> No data found </td>
                            </tr>
                        </ng-template>
                    </p-table>
                </div>
            </div>
        </div>
        <div class="box-wrapper">
            <div class="box-header">Minimum Stay</div>
            <div class="card">
                <div class="actionButtonSticky">
                    <p-table #MinStay [resizableColumns]="true" [columns]="cols" [value]="MinStayResult"
                        [rowsPerPageOptions]="[10, 25, 50, 100]" styleClass="p-datatable-gridlines" [rows]="10"
                         responsiveLayout="scroll" [paginator]="true"
                        [rowHover]="true" dataKey="id" [globalFilterFields]="[
            'season_name',
            'room_name',
            'extranet_room_id',
            'updated_by',
            'created_by',
            'status',
            'date_range_arr',
            'Custom_created_on',
            'Custom_updated_on',
        ]" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
                        [showCurrentPageReport]="true">
                        <ng-template pTemplate="caption">
                            <p-toolbar *ngIf="MinStayResult && MinStayResult.length > 0">
                                <ng-template pTemplate="left" *ngIf="_commonService.MenuTabList.MinStay.Download">
                                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="CSV"
                                        tooltipPosition="bottom" (click)="dt.exportCSV()">CSV</button>
                                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="XLS"
                                        tooltipPosition="bottom"
                                        (click)="_commonService.exportExcel(MinStayResult,cols,'Hotel Allocation')">Excel</button>
                                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="PDF"
                                        tooltipPosition="bottom"
                                        (click)="_commonService.exportPdf(MinStayResult,cols,'Hotel Allocation')">PDF</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)="MinStay.filterGlobal(searchInp.value, 'contains')"
                                                placeholder="Search" />
                                        </span>
                                    </div>
                                </ng-template>
                            </p-toolbar>
                        </ng-template>
                        <ng-template pTemplate="header">
                            <tr>
                                <th pSortableColumn="extranet_room_id">
                                    Room ID
                                    <p-sortIcon field="extranet_room_id" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="room_name">
                                    Room Name
                                    <p-sortIcon field="room_name" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="date_ranges">
                                    Minimum Stay Date Range
                                    <p-sortIcon field="date_ranges" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="created_by">
                                    Created By
                                    <p-sortIcon field="created_by" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="created_on">
                                    Created On
                                    <p-sortIcon field="created_on" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="updated_by">
                                    Updated By
                                    <p-sortIcon field="updated_by" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th pSortableColumn="updated_on">
                                    Updated On
                                    <p-sortIcon field="updated_on" class="p-sort-icon"></p-sortIcon>
                                </th>
                                <th>Action</th>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-data>
                            <tr>
                                <td>{{data.extranet_room_id}}</td>
                                <td>{{data.room_name}}</td>
                                <td><span *ngFor="let item of data.date_range_arr" class="d-block">{{item}}</span></td>
                                <td>{{data.created_by}}</td>
                                <td>{{data.Custom_created_on}}</td>
                                <td>{{data.updated_by}}</td>
                                <td>{{data.Custom_updated_on}}</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)="EditMinStay(data.extranet_room_min_stay_id)">
                                                <span class="flex-center">
                                                    <span> Edit </span>
                                                </span>
                                            </button>
                                        </mat-menu>
                                    </div>
                                </td>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="emptymessage">
                            <tr *ngIf="MinStayResult === null || MinStayResult" class="resultNotFound">
                                <td> No data found </td>
                            </tr>
                        </ng-template>
                    </p-table>
                </div>
            </div>
        </div>
    </div>
</div>