<div class="ng-card custom-shadow">
  <div class="ng-cardHead">
    <div class="ng-cardLabel">
      <h3 class="ng-cardTitle">Hotel Booking</h3>
    </div>
  </div>
  <div class="ng-searchBody">
    <form [formGroup]="HotelBookingFiltersForm">
      <div class="row">
        <div class="col-lg-3">
          <div class="formControlWrapper">
            <span class="formLabel"> Trip ID </span>
            <input type="text" class="formInput" formControlName="fltr_trip_id" />
          </div>
        </div>
        <div class="col-lg-3">
          <div class="formControlWrapper">
            <span class="formLabel"> Booking ID </span>
            <input type="text" class="formInput" formControlName="fltr_booking_id" />
          </div>
        </div>
        <div class="col-lg-3">
          <div class="formControlWrapper hotelsearch_singleselect">
            <span class="formLabel">Company</span>
            <ng-select #CompanyNg [items]="Companylist" class="is-invalid" placeholder="Select" bindLabel="CompanyName"
              bindValue="CompanyID" formControlName="fltr_company">
              <ng-template ng-header-tmp>
                <div class="temp_mobileBack">
                  <div class="temp_mobileHead">
                    <div class="temp_mobileTitle">
                      <h4>Company</h4>
                    </div>
                    <button matRipple (click)="CompanyNg.close()" class="temp_mobileBackButton">
                      <i class="material-icons"> close </i>
                    </button>
                  </div>
                </div>
              </ng-template>
              <ng-template ng-header-tmp>
                <div class="select-mobileHeader">
                  <button matRipple class="select-mobileBack">
                    <i class="material-icons"> arrow_back </i>
                  </button>
                  <div class="select-mobileTitle">Company</div>
                </div>
              </ng-template>
            </ng-select>
          </div>
        </div>
        <div class="col-lg-3">
          <div class="hotelsearch_singleselect formControlWrapper">
            <span class="formLabel">Branch</span>
            <ng-select #BranchNg [items]="Entitylist" class="is-invalid" placeholder="Select" bindLabel="EntityName"
              bindValue="EntityId" formControlName="fltr_branch">
              <ng-template ng-header-tmp>
                <div class="temp_mobileBack">
                  <div class="temp_mobileHead">
                    <div class="temp_mobileTitle">
                      <h4>Branch</h4>
                    </div>
                    <button matRipple (click)="BranchNg.close()" class="temp_mobileBackButton">
                      <i class="material-icons"> close </i>
                    </button>
                  </div>
                </div>
              </ng-template>
              <ng-template ng-header-tmp>
                <div class="select-mobileHeader">
                  <button matRipple class="select-mobileBack">
                    <i class="material-icons"> arrow_back </i>
                  </button>
                  <div class="select-mobileTitle">Branch</div>
                </div>
              </ng-template>
            </ng-select>
          </div>
        </div>
        <div class="col-lg-3">
          <div class="formControlWrapper">
            <span class="formLabel"> Hotel Name </span>
            <input type="text" class="formInput" formControlName="fltr_hotel_name" />
          </div>
        </div>
        <div class="col-lg-3">
          <div class="formControlWrapper">
            <span class="formLabel">Country</span>
            <ng-select #CountryNg [items]="Countrylist" class="is-invalid" placeholder="Select" bindLabel="country_name"
              bindValue="country_code" formControlName="fltr_country" (change)="onCountrySelect($event)">
              <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-template ng-header-tmp>
                <div class="select-mobileHeader">
                  <button matRipple class="select-mobileBack">
                    <i class="material-icons"> arrow_back </i>
                  </button>
                  <div class="select-mobileTitle">Country</div>
                </div>
                <div class="select-search">
                  <span class="material-icons"> search </span>
                  <input type="text" #searchType (input)="CountryNg.filter(searchType.value)" />
                </div>
              </ng-template>
            </ng-select>
          </div>
        </div>
        <div class="col-lg-3">
          <div class="formControlWrapper">
            <span class="formLabel">City</span>
            <ng-select #CityNg [readonly]="!HotelBookingFiltersForm.get('fltr_country').value" [items]="Citylist"
              class="is-invalid" placeholder="Select" bindLabel="city_name" bindValue="city_code"
              formControlName="fltr_city">
              <ng-template ng-header-tmp>
                <div class="temp_mobileBack">
                  <div class="temp_mobileHead">
                    <div class="temp_mobileTitle">
                      <h4>City</h4>
                    </div>
                    <button matRipple (click)="CityNg.close()" class="temp_mobileBackButton">
                      <i class="material-icons"> close </i>
                    </button>
                  </div>
                </div>
              </ng-template>
              <ng-template ng-header-tmp>
                <div class="select-mobileHeader">
                  <button matRipple class="select-mobileBack">
                    <i class="material-icons"> arrow_back </i>
                  </button>
                  <div class="select-mobileTitle">City</div>
                </div>
                <div class="select-search">
                  <span class="material-icons"> search </span>
                  <input type="text" #searchType (input)="CityNg.filter(searchType.value)" />
                </div>
              </ng-template>
            </ng-select>
          </div>
        </div>
        <div class="col-lg-3">
          <div class="formControlWrapper hotelsearch_singleselect">
            <span class="formLabel">Star Rating</span>
            <ng-select #StarRatingNg [items]="StarRating" class="is-invalid" placeholder="Select" bindLabel="value"
              bindValue="key" formControlName="fltr_star_rating">
              <ng-template ng-header-tmp>
                <div class="temp_mobileBack">
                  <div class="temp_mobileHead">
                    <div class="temp_mobileTitle">
                      <h4>Star Rating</h4>
                    </div>
                    <button matRipple (click)="StarRatingNg.close()" class="temp_mobileBackButton">
                      <i class="material-icons"> close </i>
                    </button>
                  </div>
                </div>
              </ng-template>
              <ng-template ng-header-tmp>
                <div class="select-mobileHeader">
                  <button matRipple class="select-mobileBack">
                    <i class="material-icons"> arrow_back </i>
                  </button>
                  <div class="select-mobileTitle">Star Rating</div>
                </div>
              </ng-template>
            </ng-select>
          </div>
        </div>
        <div class="col-lg-3">
          <div class="formControlWrapper">
            <span class="formLabel"> Guest Name </span>
            <input type="text" class="formInput" formControlName="fltr_guest_name" />
          </div>
        </div>
        <div class="col-lg-3">
          <div class="formControlWrapper">
            <span class="formLabel"> Contact Number </span>
            <input type="text" class="formInput" formControlName="fltr_guest_contact_no" />
          </div>
        </div>
        <div class="col-lg-3">
          <div class="formControlWrapper hotelsearch_singleselect">
            <span class="formLabel">Booking Status</span>
            <ng-select #BookingStatusNg [items]="BookingStatus" class="is-invalid" placeholder="Select"
              bindLabel="value" bindValue="key" formControlName="fltr_booking_status">
              <ng-template ng-header-tmp>
                <div class="temp_mobileBack">
                  <div class="temp_mobileHead">
                    <div class="temp_mobileTitle">
                      <h4>Booking Status</h4>
                    </div>
                    <button matRipple (click)="BookingStatusNg.close()" class="temp_mobileBackButton">
                      <i class="material-icons"> close </i>
                    </button>
                  </div>
                </div>
              </ng-template>
              <ng-template ng-header-tmp>
                <div class="select-mobileHeader">
                  <button matRipple class="select-mobileBack">
                    <i class="material-icons"> arrow_back </i>
                  </button>
                  <div class="select-mobileTitle">Booking Status</div>
                </div>
              </ng-template>
            </ng-select>
          </div>
        </div>
        <div class="col-lg-3">
          <div class="formControlWrapper hotelsearch_singleselect">
            <span class="formLabel">Invoice Status</span>
            <ng-select #InvoiceStatusNg [items]="InvoiceStatus" class="is-invalid" placeholder="Select"
              bindLabel="value" bindValue="key" formControlName="fltr_invoice_status">
              <ng-template ng-header-tmp>
                <div class="temp_mobileBack">
                  <div class="temp_mobileHead">
                    <div class="temp_mobileTitle">
                      <h4>Invoice Status</h4>
                    </div>
                    <button matRipple (click)="InvoiceStatusNg.close()" class="temp_mobileBackButton">
                      <i class="material-icons"> close </i>
                    </button>
                  </div>
                </div>
              </ng-template>
              <ng-template ng-header-tmp>
                <div class="select-mobileHeader">
                  <button matRipple class="select-mobileBack">
                    <i class="material-icons"> arrow_back </i>
                  </button>
                  <div class="select-mobileTitle">Invoice Status</div>
                </div>
              </ng-template>
            </ng-select>
          </div>
        </div>
        <!-- <div class="col-lg-3">
          <div class="formControlWrapper hotelsearch_singleselect">
            <span class="formLabel">Vendor Name</span>
            <ng-select #VendorNg class="is-invalid" placeholder="Select">
              <ng-template ng-header-tmp>
                <div class="temp_mobileBack">
                  <div class="temp_mobileHead">
                    <div class="temp_mobileTitle">
                      <h4>Vendor Name</h4>
                    </div>
                    <button matRipple (click)="VendorNg.close()" class="temp_mobileBackButton">
                      <i class="material-icons"> close </i>
                    </button>
                  </div>
                </div>
              </ng-template>
              <ng-template ng-header-tmp>
                <div class="select-mobileHeader">
                  <button matRipple class="select-mobileBack">
                    <i class="material-icons"> arrow_back </i>
                  </button>
                  <div class="select-mobileTitle">supplier</div>
                </div>
              </ng-template>
            </ng-select>
          </div>
        </div>
        <div class="col-lg-3">
          <div class="formControlWrapper hotelsearch_singleselect">
            <span class="formLabel">Contract Name</span>
            <ng-select #ContractNg class="is-invalid" placeholder="Select">
              <ng-template ng-header-tmp>
                <div class="temp_mobileBack">
                  <div class="temp_mobileHead">
                    <div class="temp_mobileTitle">
                      <h4>Contract Name</h4>
                    </div>
                    <button matRipple (click)="ContractNg.close()" class="temp_mobileBackButton">
                      <i class="material-icons"> close </i>
                    </button>
                  </div>
                </div>
              </ng-template>
              <ng-template ng-header-tmp>
                <div class="select-mobileHeader">
                  <button matRipple class="select-mobileBack">
                    <i class="material-icons"> arrow_back </i>
                  </button>
                  <div class="select-mobileTitle">supplier</div>
                </div>
              </ng-template>
            </ng-select>
          </div>
        </div>
        <div class="col-lg-3">
          <div class="formControlWrapper hotelsearch_singleselect">
            <span class="formLabel">Offers</span>
            <ng-select #OfferNg class="is-invalid" placeholder="Select">
              <ng-template ng-header-tmp>
                <div class="temp_mobileBack">
                  <div class="temp_mobileHead">
                    <div class="temp_mobileTitle">
                      <h4>Offers</h4>
                    </div>
                    <button matRipple (click)="OfferNg.close()" class="temp_mobileBackButton">
                      <i class="material-icons"> close </i>
                    </button>
                  </div>
                </div>
              </ng-template>
              <ng-template ng-header-tmp>
                <div class="select-mobileHeader">
                  <button matRipple class="select-mobileBack">
                    <i class="material-icons"> arrow_back </i>
                  </button>
                  <div class="select-mobileTitle">supplier</div>
                </div>
              </ng-template>
            </ng-select>
          </div>
        </div>
        <div class="col-lg-3">
          <div class="formControlWrapper hotelsearch_singleselect">
            <span class="formLabel">Supplements</span>
            <ng-select #SupplementsNg class="is-invalid" placeholder="Select">
              <ng-template ng-header-tmp>
                <div class="temp_mobileBack">
                  <div class="temp_mobileHead">
                    <div class="temp_mobileTitle">
                      <h4>Supplements</h4>
                    </div>
                    <button matRipple (click)="SupplementsNg.close()" class="temp_mobileBackButton">
                      <i class="material-icons"> close </i>
                    </button>
                  </div>
                </div>
              </ng-template>
              <ng-template ng-header-tmp>
                <div class="select-mobileHeader">
                  <button matRipple class="select-mobileBack">
                    <i class="material-icons"> arrow_back </i>
                  </button>
                  <div class="select-mobileTitle">supplier</div>
                </div>
              </ng-template>
            </ng-select>
          </div>
        </div> -->
        <div class="col-lg-3">
          <div class="formControlWrapper">
            <span class="formLabel">Confirmation No.</span>
            <input type="text" class="formInput" />
          </div>
        </div>
        <div class="col-lg-3">
          <div class="formControlWrapper">
            <div class="">
              <span class="formLabel">Date Type</span>
            </div>
            <ng-select #DateTypeNg class="is-invalid" placeholder="Select" [items]="Date_Type"
              formControlName="fltr_date">
              <ng-template ng-header-tmp>
                <div class="temp_mobileBack">
                  <div class="temp_mobileHead">
                    <div class="temp_mobileTitle">
                      <h4>Date Type</h4>
                    </div>
                    <button matRipple (click)="DateTypeNg.close()" class="temp_mobileBackButton">
                      <i class="material-icons"> close </i>
                    </button>
                  </div>
                </div>
              </ng-template>
              <ng-template>
                <div class="select-mobileHeader">
                  <button matRipple class="select-mobileBack">
                    <i class="material-icons"> arrow_back </i>
                  </button>
                  <div class="select-mobileTitle">Payment Status</div>
                </div>
              </ng-template>
            </ng-select>
          </div>
        </div>
        <div class="col-lg-3 calenderField">
          <div class="formControlWrapper">
            <span class="formLabel">From Date</span>
            <p-calendar #DateNg [showIcon]="true" formControlName="from_Date" placeholder="Select"
              (onClose)="applyToDate(HotelBookingFiltersForm.controls['from_Date'].value)" [readonlyInput]="true"
              inputId="range1" [showButtonBar]="true" dateFormat="dd M yy">
              <ng-template pTemplate="header">
                <div class="temp_mobileBack">
                  <div class="temp_mobileHead">
                    <div class="temp_mobileTitle">
                      <h4>Date</h4>
                    </div>
                    <button matRipple (click)="DateNg.hideOverlay()" class="temp_mobileBackButton">
                      <i class="material-icons"> close </i>
                    </button>
                  </div>
                </div>
              </ng-template>
            </p-calendar>
          </div>
        </div>
        <div class="col-lg-3 calenderField">
          <div class="formControlWrapper">
            <span class="formLabel">To Date</span>
            <p-calendar #DatesNg [showIcon]="true" formControlName="To_Date" [minDate]="To_Date_Start"
              [readonlyInput]="true" inputId="range2" [showButtonBar]="true" dateFormat="dd M yy" placeholder="Select">
              <ng-template pTemplate="header">
                <div class="temp_mobileBack">
                  <div class="temp_mobileHead">
                    <div class="temp_mobileTitle">
                      <h4>Date</h4>
                    </div>
                    <button matRipple (click)="DatesNg.hideOverlay()" class="temp_mobileBackButton">
                      <i class="material-icons"> close </i>
                    </button>
                  </div>
                </div>
              </ng-template>
            </p-calendar>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-3">
          <mat-checkbox formControlName="under_cancel">Under Free Cancellation</mat-checkbox>
        </div>
      </div>
    </form>
  </div>
  <div class="ng-searchFooter">
    <div class="MainDivBtn-1">
      <button class="btn btn-secondary mr-10 ResetBtn" (click)="search_form_reset()">Reset</button>
      <button class="btn btn-primary SearchBtn" (click)="search_bookings()">Search</button>
    </div>
  </div>
  <div class="dataTable custom-shadow actionButtonSticky">
    <p-table #dt [columns]="cols" [rowsPerPageOptions]="[10, 20, 50, 100]" [paginator]="true" [rows]="10"
      currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [value]="HotelBookingList"
      responsiveLayout="scroll" [showCurrentPageReport]="true" [globalFilterFields]="['trip_id',
             'booking_id',
             'hotel_name',
             'hotel_city',
             'hotel_country',
             'no_of_rooms',
             'no_of_nights',
             'booking_date',
             'checkin_date',
             'checkout_date',
             'lead_guest',
             'guest_nationality_code',
             'guest_mobile_no',
             'room_names_custom',
             'supplier_name',
             'supplier_ref_no',
             'agency_type',
             'payment_gateway_name',
             'booking_status_custom',
             'total',
             'booking_guid',
             'assigned_user_name',
             'assigned_user_name_2',]" [resizableColumns]="true" styleClass="p-datatable-gridlines"
      [sortField]="'custom_booking_date'" [sortOrder]="-1">
      <ng-template pTemplate="caption">
        <p-toolbar>
          <ng-template pTemplate="left">
            <button type="button" (click)="dt.exportCSV()" class="btn btn-grey mr-10">CSV</button>
            <button type="button" (click)="commonserv.exportExcel(HotelBookingList,cols,'Hotel booking management')"
              class="btn btn-grey mr-10">Excel</button>
            <button type="button" (click)="commonserv.exportPdf(HotelBookingList,cols,'Hotel booking management')"
              class="btn btn-grey">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" let-columns>
        <tr>
          <th scope="col" pSortableColumn="trip_id">
            <span>Trip ID</span>
            <p-sortIcon field="trip_id" class="p-sort-icon "></p-sortIcon>
          </th>
          <th scope="col" pSortableColumn="booking_id">
            <span>Booking ID</span>
            <p-sortIcon field="booking_id" class="p-sort-icon"></p-sortIcon>
          </th>
          <th scope="col" pSortableColumn="hotel_name">
            <span> Hotel Name</span>
            <p-sortIcon field="hotel_name" class="p-sort-icon"></p-sortIcon>
          </th>
          <th scope="col" pSortableColumn="hotel_country">
            <span>Country</span>
            <p-sortIcon field="hotel_country" class="p-sort-icon"></p-sortIcon>
          </th>
          <th scope="col" pSortableColumn="hotel_city">
            <span>City</span>
            <p-sortIcon field="hotel_city" class="p-sort-icon"></p-sortIcon>
          </th>
          <th scope="col" pSortableColumn="custom_booking_date">
            <span>Booking Date</span>
            <p-sortIcon field="custom_booking_date" class="p-sort-icon"></p-sortIcon>
          </th>
          <th scope="col" pSortableColumn="custom_checkin_date">
            <span>Check In Date</span>
            <p-sortIcon field="custom_checkin_date" class="p-sort-icon"></p-sortIcon>
          </th>
          <th scope="col" pSortableColumn="custom_checkout_date">
            <span>Check Out Date</span>
            <p-sortIcon field="custom_checkout_date" class="p-sort-icon"></p-sortIcon>
          </th>
          <th scope="col" pSortableColumn="no_of_nights">
            <span>No Of Nights</span>
            <p-sortIcon field="no_of_nights" class="p-sort-icon"></p-sortIcon>
          </th>
          <th scope="col" pSortableColumn="no_of_rooms">
            <span>No Of Rooms</span>
            <p-sortIcon field="no_of_rooms" class="p-sort-icon"></p-sortIcon>
          </th>
          <th scope="col" pSortableColumn="room_names_custom">
            <span>Room Name</span>
            <p-sortIcon field="room_names_custom" class="p-sort-icon"></p-sortIcon>
          </th>
          <th scope="col" pSortableColumn="lead_guest">
            <span>Lead Guest</span>
            <p-sortIcon field="lead_guest" class="p-sort-icon"></p-sortIcon>
          </th>
          <th scope="col" pSortableColumn="guest_nationality_code">
            <span>Lead Nationality</span>
            <p-sortIcon field="guest_nationality_code" class="p-sort-icon"></p-sortIcon>
          </th>
          <th scope="col" pSortableColumn="guest_mobile_no">
            <span>Lead Mobile Number</span>
            <p-sortIcon field="guest_mobile_no" class="p-sort-icon"></p-sortIcon>
          </th>
          <!-- <th scope="col" pSortableColumn="">
            <span>Vendor Name</span>
            <p-sortIcon field="" class="p-sort-icon"></p-sortIcon>
          </th>
          <th scope="col" pSortableColumn="">
            <span>Contract Name</span>
            <p-sortIcon field="" class="p-sort-icon"></p-sortIcon>
          </th>
          <th scope="col" pSortableColumn="">
            <span>Offers</span>
            <p-sortIcon field="" class="p-sort-icon"></p-sortIcon>
          </th>
          <th scope="col" pSortableColumn="">
            <span>Supplements</span>
            <p-sortIcon field="" class="p-sort-icon"></p-sortIcon>
          </th> -->
          <th scope="col" pSortableColumn="hotel_confirmation_number">
            <span>Confirmation No</span>
            <p-sortIcon field="hotel_confirmation_number" class="p-sort-icon"></p-sortIcon>
          </th>
          <th scope="col" pSortableColumn="supplier_total_amount">
            <span>Vendor Booking Amount</span>
            <p-sortIcon field="supplier_total_amount" class="p-sort-icon"></p-sortIcon>
          </th>
          <th scope="col" pSortableColumn="booking_status_custom">
            <span>Booking Status</span>
            <p-sortIcon field="booking_status_custom" class="p-sort-icon"></p-sortIcon>
          </th>
          <th scope="col" pSortableColumn="booking_guid">
            <span>GUID</span>
            <p-sortIcon field="booking_guid" class="p-sort-icon"></p-sortIcon>
          </th>
          <th scope="col" pSortableColumn="Action" field="Action">
            <span>Action</span>
          </th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-HotelBooking let-columns="columns">
        <tr>
          <td>{{HotelBooking.trip_id}}</td>
          <td>{{HotelBooking.booking_id}}</td>
          <td class="max-width330">{{HotelBooking.hotel_name}}</td>
          <td>{{HotelBooking.hotel_country}}</td>
          <td>{{HotelBooking.hotel_city}}</td>
          <td>{{HotelBooking.booking_date}}</td>
          <td>{{HotelBooking.checkin_date}}</td>
          <td>{{HotelBooking.checkout_date}}</td>
          <td>{{HotelBooking.no_of_nights}}</td>
          <td>{{HotelBooking.no_of_rooms}}</td>
          <td>{{HotelBooking.room_names_custom }}</td>
          <td>{{HotelBooking.lead_guest}}</td>
          <td>{{HotelBooking.guest_nationality_code}}</td>
          <td>{{HotelBooking.guest_mobile_no}}</td>
          <!-- <td></td>
          <td></td>
          <td></td>
          <td></td> -->
          <td>{{HotelBooking.hotel_confirmation_number}}</td>
          <td>{{HotelBooking.total}} </td>
          <td>{{map_booking_status(HotelBooking.status_id, HotelBooking.payment_status)}}</td>
          <td>{{HotelBooking.booking_guid}}</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 class="d-flex align-center" (click)="select_booking(HotelBooking.trip_id)">
                  View
                </button>
                <button mat-menu-item class="d-flex align-center" (click)="openConfirmationNumberModal(HotelBooking)">
                  {{HotelBooking.hotel_confirmation_number ? 'Edit Confirmation Number' : 'Add Confirmation Number'}}
                </button>
              </mat-menu>
            </div>
          </td>
        </tr>
      </ng-template>
      <ng-template pTemplate="emptymessage">
        <tr *ngIf="HotelBookingList === null || HotelBookingList" class="ResultNotFound">
          <td>
            No data found
          </td>
        </tr>
      </ng-template>
    </p-table>
  </div>
  <!-- table -->
</div>
<!-- Add Confirmation Number -->
<p-dialog header="Add Confirmation Number" position="top" [(visible)]="isOpenAddConfirmationNumberModal" [modal]="true"
  [style]="{ width: '30vw' }" [baseZIndex]="10000" [draggable]="false" [resizable]="false" *ngIf="confirmationForm">
  <div class="modal-body AddConfirmationModal p-0" [formGroup]="confirmationForm">
   <div formArrayName="hotel_confirmation_number">
    <div *ngFor="let room_confirmation_form of confirmationForm.controls['hotel_confirmation_number']['controls'];let i=index" [formGroupName]="i">
      <div class="formControlWrapper">
        <span class="formLabel">Room Name</span>
        <input type="text" class="formInput" readonly formControlName="room_name" placeholder="" />
      </div>
      <div class="formControlWrapper">
        <span class="formLabel">Confirmation Number</span>
        <input type="text" class="formInput" formControlName="confirmation_no" placeholder="" />
      </div>
   </div>
   </div>
    <div class="formControlWrapper">
      <span class="formLabel">Authorized Person</span>
      <input type="text" class="formInput" formControlName="hotel_confirmation_staff_name" placeholder="" />
    </div>
    <div class="formControlWrapper calenderField">
      <span class="formLabel">Date Of Confirmation</span>
      <p-calendar inputId="basic" placeholder="Select" [showIcon]="true" formControlName="hotel_confirmation_number_date" class="d-block"></p-calendar>
    </div>
    <div class="formControlWrapper">
      <span class="formLabel">Remarks</span>
      <textarea class="formInput" rows="2" placeholder=""
        formControlName="hotel_confirmation_staff_remarks"></textarea>
    </div>
  </div>
  <ng-template pTemplate="footer">
    <button class="btn btn-primary" (click)="saveConfirmationNumber()"> Submit </button>
  </ng-template>
</p-dialog>
<!-- End -->