<div class="ng-card mt-20 mb-0">
    <div class="ng-cardHead">
        <div class="ng-cardLabel">
            <h3 class="ng-cardTitle">Room Contract</h3>
        </div>
        <button [routerLink]="['/Services/Hotel/HotelManage/RoomContractAdd/'+ Extranet_Hotel_Id]"
            class="btn btn-primary">
            Add Room Rates </button>
    </div>
    <div class="ng-searchBody">
        <div class="row">
            <div class="col-lg-3">
                <div class="formControlWrapper">
                    <label class="formLabel">Room Name</label>
                    <ng-select #OriginNg class="is-invalid" placeholder="Select" [(ngModel)]="ExtranetRoom">
                        <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 AllRoomsData" [value]="data.extranet_room_id">{{data.room_name + (data.room_view_name ? ', ' : '') 
                            + data.room_view_name}}</ng-option>
                    </ng-select>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="formControlWrapper">
                    <label class="formLabel">Rate Plan</label>
                    <ng-select #RateNg class="is-invalid" placeholder="Select" [(ngModel)]="ExtranetRatePlan">
                        <ng-template ng-header-tmp>
                            <div class="temp_mobileBack">
                                <div class="temp_mobileHead">
                                    <div class="temp_mobileTitle">
                                        <h4>Rate Plan</h4>
                                    </div>
                                    <button matRipple (click)="RateNg.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 AllRatePlan"
                            [value]="data.extranet_rate_plan_id">{{data.rate_plan_name}}</ng-option>
                    </ng-select>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="formControlWrapper">
                    <label class="formLabel">Meal Plan</label>
                    <ng-select #MealNg class="is-invalid" placeholder="Select" [(ngModel)]="ExtranetMealPlan">
                        <ng-template ng-header-tmp>
                            <div class="temp_mobileBack">
                                <div class="temp_mobileHead">
                                    <div class="temp_mobileTitle">
                                        <h4>Meal Plan</h4>
                                    </div>
                                    <button matRipple (click)="MealNg.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 AllMealPlan"
                            [value]="data.extranet_meal_plan_id">{{data.meal_plan_name}}</ng-option>
                    </ng-select>
                </div>
            </div>
        </div>
    </div>
    <div class="ng-searchFooter">
        <button type="button" (click)="Reset()" class="btn btn-secondary mr-10 ResetBtn">Reset</button>
        <button type="button" (click)="Search()" class="btn btn-primary SearchBtn">Search</button>
    </div>
</div>
<div class="dataTable actionButtonSticky custom-shadow">
    <p-table #dt [resizableColumns]="true" [columns]="cols" [value]="Result"
        [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="Result && Result.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)="dt.exportCSV()">CSV</button>
                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="XLS"
                        tooltipPosition="bottom"
                        (click)="_commonService.exportExcel(Result,cols,'Room Contarct')">Excel</button>
                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="PDF"
                        tooltipPosition="bottom"
                        (click)="_commonService.exportPdf(Result,cols,'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)="dt.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)="updateStatus(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>
                            <button mat-menu-item (click)="RoomView(data.extranet_contract_id)">
                                <span class="flex-center">
                                    <span> View Contract </span>
                                </span>
                            </button>
                        </mat-menu>
                    </div>
                </td>
            </tr>
        </ng-template>
        <ng-template pTemplate="emptymessage">
            <tr *ngIf="Result === null || Result" class="resultNotFound">
                <td> No data found </td>
            </tr>
        </ng-template>
    </p-table>
</div>