<div class="ng-backbtn mb-10">
    <a (click)="BackButton()">
        <svg class="ng-backsvg" fill="#000" focusable="false" viewBox="0 0 24 24" aria-hidden="true"
            role="presentatio">
            <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path>
        </svg>
        <span class="ng-backtext">Back</span>
    </a>
</div>
<div class="ng-card">
    <div class="ng-cardHead">
        <div class="ng-cardLabel">
            <h3 class="ng-cardTitle">Add Hotel Zones</h3>
        </div>
    </div>
    <div class="ng-searchBody" [formGroup]="hotelZoneForm">
        <div class="row mb-20">
             <div class="col-lg-4">
                <div class="formControlWrapper" [ngClass]="{'ErrorWrapper': validServ.onBlur(hotelZoneForm.controls['ZoneName'],'required')}">
                    <label class="formLabel">Zone Name<small class="astrick">*</small></label>
                    <input class="formInput" type="text" formControlName="ZoneName" [disabled]="Edit_Id" /> 
                    <span class="errorspan"
                            *ngIf="validServ.onBlur(hotelZoneForm.controls['ZoneName'],'required')">Please
                            enter zone name</span>
                </div>
            </div>
           <div class="col-lg-4">
                <div class="formControlWrapper" [ngClass]="{'ErrorWrapper': validServ.onBlur(hotelZoneForm.controls['Country'],'required')}">
                    <label class="formLabel">Country<small class="astrick">*</small></label>
                    <ng-select #CountryNg class="is-invalid" placeholder="Search" (keyup)="getCountryList($event.target)"
                        (close)="CountryList = []" notFoundText="Please enter 2 or more characters"  (change)="checkCountrySelection()"
                        [loading]="ddLoader.country" formControlName="Country" [readonly]="Edit_Id">
                        <ng-template ng-header-tmp>
                            <div class="temp_mobileBack">
                                <div class="temp_mobileHead">
                                    <div class="temp_mobileTitle">
                                        <h4>Country</h4>
                                    </div>
                                    <button matRipple (click)="CountryNg.close()" class="temp_mobileBackButton">
                                        <i class="material-icons"> close </i>
                                    </button>
                                </div>
                            </div>
                        </ng-template>
                        <ng-option *ngFor="let item of CountryList" [value]="item.country_code">
                            {{item.country_name }}
                        </ng-option>
                    </ng-select>
                    <span class="errorspan"
                            *ngIf="validServ.onBlur(hotelZoneForm.controls['Country'],'required')">Please
                            select country</span>
                </div>
            </div>
      <div class="col-lg-4">
                <div class="formControlWrapper" [ngClass]="{'ErrorWrapper': validServ.onBlur(hotelZoneForm.controls['City'],'required')}">
                    <label class="formLabel">City<small class="astrick">*</small></label>
                    <ng-select class="is-invalid" placeholder="Select"  formControlName="City" (keyup)="getCityList($event.target)"
                        (close)="CountryList = []" [readonly]="citySelection || Edit_Id" notFoundText="Please enter 2 or more characters" 
                        [loading]="ddLoader.city" (change)="getHotelsByCity()">
                        <ng-template ng-header-tmp>
                            <div class="temp_mobileBack">
                                <div class="temp_mobileHead">
                                    <div class="temp_mobileTitle">
                                        <h4>City</h4>
                                    </div>
                                    <button class="temp_mobileBackButton">
                                        <i class="material-icons"> close </i>
                                    </button>
                                </div>
                            </div>
                        </ng-template>
                        <ng-option *ngFor="let item of cityList" [value]="item.cityCode">
                            {{item.cityName }}, {{item.countryName}}
                        </ng-option>
                    </ng-select>
                    <span class="errorspan"
                            *ngIf="validServ.onBlur(hotelZoneForm.controls['City'],'required')">Please
                            select city</span>
                </div>
            </div>
        </div>
        <!-- <div class="showSelected">
             <div class="selectedShow" (click)="showDialog()">
               <span >Show Selected Hotels</span>
             </div>
             <div class="col-lg-3">
                <input class="formInput" formControlName="filterInput" (keyup)="filterHotels()" type="text" placeholder="Global Search Box"/>
             </div>
        </div> -->
        <!-- <div class="subHeading">Hotel Selection</div>
            <div class="tableWrapper formInputBorder">
                <table>
                    <tr>
                        <th>
                           <div>
                            <mat-checkbox></mat-checkbox>
                           </div>
                        </th>
                        <th>
                            Hotel Name
                        </th>
                        <th>
                            Hotel Star Category
                        </th>
                        <th>
                            Address
                        </th>
                        <th>
                           City
                        </th>
                    </tr>
                    <tr *ngFor="let data of filterHotelList">
                        <td>
                           <div>
                            <mat-checkbox></mat-checkbox>
                           </div>
                        </td>
                        <td>
                            {{data.hotelName}}
                        </td>
                        <td>
                            {{data.starRating}}
                        </td>
                        <td>
                            {{data.address}}
                        </td>
                        <td>
                            {{data.city}}
                        </td>
                    </tr>
                </table>
            </div> -->
    <div class="dataTable actionButtonSticky custom-shadow hotelSelectionT">
    <p-table styleClass="p-datatable-gridlines"  #dt [resizableColumns]="true" [value]="hotelList" 
        styleClass="p-datatable-gridlines" [rows]="10" 
        responsiveLayout="scroll" [paginator]="true" [rowHover]="true" dataKey="id" [globalFilterFields]="[
    'hotelName',
    'starRating',
    'address',
    'city',
]" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [showCurrentPageReport]="true">
        <ng-template pTemplate="caption">
            <p-toolbar>
                <ng-template pTemplate="left">
                    <div class="subHeading">Hotel Selection</div>
                    <!-- <button type="button" pButton class="btn btn-grey mr-10" pTooltip="CSV" tooltipPosition="bottom">CSV</button>
                    <button type="button" pButton class="btn btn-grey mr-10" pTooltip="XLS" tooltipPosition="bottom">Excel</button>
                    <button type="button" pButton class="btn btn-grey mr-10" pTooltip="PDF" tooltipPosition="bottom">PDF</button> -->
                </ng-template>
                <ng-template pTemplate="right">
                    <div class="selectedShow">
                        <button (click)="showDialog()" class="btn btn-primary">Show Selected Hotels</button>
                        <!-- <mat-checkbox></mat-checkbox> -->
                    </div>
                    <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="Global search Box" />
                        </span>
                    </div>
                </ng-template>
            </p-toolbar>
        </ng-template>
        <ng-template pTemplate="header">
            <tr>
                <th>
                    <mat-checkbox formControlName="selectAll" (change)="SelectDeselectHotels()"></mat-checkbox>
                </th>
                <th >
                    Hotel Name	                    
                    <!-- <p-sortIcon field="hotelName" class="p-sort-icon"></p-sortIcon> -->
                </th>
                <th >
                    Hotel Star Category	
                    <!-- <p-sortIcon field="starRating" class="p-sort-icon"></p-sortIcon> -->
                </th>
                <th >
                    Address
                    <!-- <p-sortIcon field="address" class="p-sort-icon"></p-sortIcon> -->
                </th>
                <th >
                    City
                    <!-- <p-sortIcon field="city" class="p-sort-icon"></p-sortIcon> -->
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-data>
            <tr>
                <td><mat-checkbox [checked]="data.check" (click)="checkHotelSelection(data.hotelId)"></mat-checkbox></td>
                <td>{{data.hotelName}}</td>
                <td>{{data.starRating}}</td>
                <td>{{data.address}}</td>
                <td>{{data.city}}</td>
            </tr>
        </ng-template>
    </p-table>
</div>
    </div>
    <div class="ng-Cardfooter text-right" *ngIf="hotelList && hotelList.length > 0">
        <button type="button" (click)="saveUpdateHotelZone()"  class="btn btn-primary">{{Edit_Id  ? 'Update' : 'Save'}}</button>
    </div>
</div>
<p-dialog draggable="false" header="Show Selected Hotels" [(visible)]="visible" class="hotelSelectionTable">
     <div class="tableWrapper formInputBorder">
        <table>
                    <tr>
                        <th>
                            Hotel Name
                        </th>
                        <th>
                            Hotel Star Category
                        </th>
                        <th>
                            Address
                        </th>
                        <th>
                           City
                        </th>
                    </tr>
                    <tr *ngFor="let data of SelectedHotels">
                        <td>{{data.hotelName}}</td>
                        <td>{{data.starRating}}</td>
                        <td>{{data.address}}</td>
                        <td>{{data.city}}</td>
                    </tr>
                </table>
     </div>
</p-dialog>
<p-toast></p-toast>