<div class="ng-card custom-shadow mb-0 mt-20">
    <div class="ng-cardHead">
        <div class="ng-cardLabel">
          <h3 class="ng-cardTitle">Minimum Stay</h3>
        </div>
        <button pButton type="button" label="Add Minimum Stay" class="btn btn-primary"
        [routerLink]="['/Services/Hotel/HotelManage/AddMinStay/'+ Extranet_Hotel_Id]"></button>
    </div>
    <div class="ng-searchBody">
        <div class="row">
            <div class="col-lg-3">
                <label class="formLabel">Room Name</label>
                <ng-select #OriginNg class="is-invalid" placeholder="Select" [multiple]="false" [(ngModel)]="Room_Id">
                    <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 *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>
        <div class="ng-searchFooter">
            <button type="button" (click)="Room_Id = ''" 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 custom-shadow actionButtonSticky">
        <div class="app-seperator"></div>
        <div class="actionButtonSticky">
            <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]="[
            '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="Result && Result.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(Result,cols,'Hotel Allocation')">Excel</button>
                        <button type="button" pButton class="btn-secondary mr-10" pTooltip="PDF" tooltipPosition="bottom"
                            (click)="_commonService.exportPdf(Result,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)="dt.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)="Edit(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="Result === null || Result" class="resultNotFound">
                    <td> No data found </td>
                </tr>
            </ng-template>
        </p-table>
    </div>
    </div>