<div class="ng-backbtn mb-10">
  <a href="javascript:void(0)" (click)="back_to_listing()">
    <svg class="ng-backsvg" fill="#000" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation">
      <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 custom-shadow">
  <div class="ng-cardHead">
    <div class="ng-cardLabel">
      <h3 class="ng-cardTitle">Booking Details</h3>
    </div>
  </div>
  <div class="ng-searchBody" *ngIf="booking_customer_data">
    <div class="app-BkGrid2">
      <div class="bookingBorderCard">
        <div class="listView">
          <h5 class="w-40 tripId m-0">Trip ID</h5>
          <p class="w-60 text-start app-text mobi-w60">{{ booking_customer_data.trip_id }}</p>
        </div>
        <div class="listView">
          <h5 class="w-40 tripId m-0">Booking Date</h5>
          <p class="w-60 text-start app-text mobi-w60">{{ booking_customer_data.booking_date }}</p>
        </div>
      </div>
      <div class="bookingBorderCard">
        <div class="listView" *ngIf="
          booking_customer_data.customer_id != null &&
          booking_customer_data.customer_id != ''
        ">
          <h5 class="w-40 tripId m-0">Customer ID</h5>
          <p class="w-60 text-start app-text mobi-w60">{{ booking_customer_data.customer_id }}</p>
        </div>
        <div class="listView" *ngIf="
          booking_customer_data.customer_id != null &&
          booking_customer_data.customer_id != ''
        ">
          <h5 class="w-40 tripId m-0">Cutomer Contact</h5>
          <p class="w-60 text-start app-text mobi-w60">{{ booking_customer_data.customer_contact }}</p>
        </div>
        <div class="listView" *ngIf="
        booking_customer_data.customer_id != null &&
        booking_customer_data.customer_id != ''
      ">
          <h5 class="w-40 tripId m-0">Customer Email</h5>
          <p class="w-60 text-start app-text mobi-w60">{{ booking_customer_data.customer_email }}</p>
        </div>
        <div class="listView" *ngIf="
        booking_customer_data.customer_id != null &&
        booking_customer_data.customer_id != ''
      ">
          <h5 class="w-40 tripId m-0">Customer Profile Status</h5>
          <p class="w-60 text-start app-text mobi-w60">
          <span class="status"
          [ngClass]="{'status-success':booking_customer_data.customer_profile_status ,'status-failed':!booking_customer_data.customer_profile_status }">
          {{booking_customer_data.customer_profile_status?'Active':'Deactive'}}
        </span>
          </p>
        </div>
        <div class="listView">
          <h5 class="w-40 tripId m-0">Lead Guest</h5>
          <p class="w-60 text-start app-text mobi-w60">{{ booking_customer_data.lead_guest }}</p>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="ng-tab custom-shadow hotelTab_Wrapper">
  <p-tabView (onChange)="tabClick($event)">
    <!-- Itinerary tab -->
    <p-tabPanel header="Itinerary">
      <div *ngIf="tab_data_status.itinerary == 'success'" [formGroup]="StatusGroup">
        <div class=" Itinerary_Details" formArrayName="statusArr"
          *ngFor="let itinerary of itinerary_tab_data;let i = index">
          <div class="bookingMngmnt_gridWrap">
            <div class="bookingMngmnt_border">
              <div class="app-comCol">
                <h5 class="app-bgtext">Hotel Name</h5>
                <p class="app-text"> {{ itinerary.hotel_name }} ({{ itinerary.hotel_star_category }} Star) <span *ngIf="itinerary.default_hotel_name">, {{itinerary.default_hotel_name}}</span>
                </p>
              </div>
              <div class="app-comCol">
                <h5 class="app-bgtext">Hotel Address</h5>
                <p class="app-text">{{ itinerary.hotel_address }} <span *ngIf="itinerary.default_hotel_address">, {{itinerary.default_hotel_address}}</span></p>
              </div>
              <div class="app-comCol" *ngIf="cityList">
                <h5 class="app-bgtext">City Name</h5>
                <p class="app-text"> {{cityList[i].cityName}} </p>
              </div>
              <div class="app-comCol" *ngIf="cityList">
                <h5 class="app-bgtext">Country Name</h5>
                <p class="app-text"> {{cityList[i].country}} </p>
              </div>
              <div class="app-comCol">
                <h5 class="app-bgtext">Check In</h5>
                <p class="app-text"> {{ itinerary.checkin_date | date: "dd MMM yyyy" }} </p>
              </div>
              <div class="app-comCol">
                <h5 class="app-bgtext">Check Out</h5>
                <p class="app-text"> {{ itinerary.checkout_date | date: "dd MMM yyyy" }} </p>
              </div>
              <div class="app-comCol">
                <h5 class="app-bgtext">No of Nights</h5>
                <p class="app-text">{{ itinerary.no_of_nights }}</p>
              </div>
              <div class="app-comCol">
                <h5 class="app-bgtext">No of Rooms</h5>
                <p class="app-text">{{ itinerary.no_of_rooms }}</p>
              </div>
            </div>
            <div>
              <div class="app-comCol">
                <h5 class="app-bgtext"> Booking ID </h5>
                <p class="app-text"> {{ itinerary.booking_id }} </p>
              </div>
              <div class="app-comCol">
                <h5 class="app-bgtext">Booking Status</h5>
                <p class="app-text" [ngClass]="
                  map_booking_status(
                    itinerary.status_id,
                    itinerary.payment_status
                  ) == 'Confirmed'
                    ? 'text-success'
                    : 'text-danger'
                ">{{ map_booking_status( itinerary.status_id, itinerary.payment_status ) }} {{itinerary.status_id == '6' && itinerary.fail_cancel ? '('+ 'Auto Cancellation Failed'+')' :''}}</p>
              </div>
              <div class="app-comCol">
                <h5 class="app-bgtext">Confirmation Number</h5>
                <p class="app-text">{{itinerary.hotel_confirmation_number}}</p>
                <a class="bookingListHotel mb-0 pr-0" (click)="
                  openConfirmationNumberModal(
                    addConfirmationNumber,
                    itinerary
                  )
                ">
                  <u> 
                    <span *ngIf="
                      itinerary.hotel_confirmation_number == null ||
                      itinerary.hotel_confirmation_number == ''
                    ">Add</span>
                    <span *ngIf="
                      itinerary.hotel_confirmation_number != null &&
                      itinerary.hotel_confirmation_number != ''
                    ">Edit</span>
                  </u>
                </a>
              </div>
              <div class="app-comCol">
                <h5 class="app-bgtext"> Vendor Total Amount </h5>
                <p class="app-text">{{itinerary.supplier_currency}} {{itinerary.supplier_total_amount}}</p>
              </div>
              <div class="app-comCol" *ngIf="itinerary.supplier_cancellation_currency">
                <h5 class="app-bgtext"> Total Original Booking Rate </h5>
                <p class="app-text">{{itinerary.supplier_currency}} {{itinerary.supplier_total_amount}}</p>
              </div>
              <div class="app-comCol" *ngIf="itinerary.supplier_cancellation_currency">
                <h5 class="app-bgtext"> Total Vendor Cancellation Rate </h5>
                <p class="app-text">{{itinerary.supplier_cancellation_currency}} {{itinerary.supplier_cancellation_amount}}</p>
              </div>
            <div class="app-comCol">
              <h5 class="app-bgtext">Policy</h5>
              <a class="bookingListHotel mb-0" (click)="OpenCancellationPolicyModal(itinerary, true)">
                <u> Cancellation Policy </u>
              </a>
            </div>
            <div class="app-comCol">
              <h5 class="app-bgtext">Session ID </h5>
              <p class="app-text"> {{ itinerary.booking_guid }} </p>
            </div>
            <div class="app-comCol pb-0" *ngIf="itinerary.lan && itinerary.lon">
              <h5 class="app-bgtext"> Latitude | Longitude </h5>
              <div class="d-flex gap-8">
                <p class="app-text =">{{itinerary.lan +' '}}</p>
                <h5 class="app-bgtext">|</h5>
                <p class="app-text ml-5">{{''+itinerary.lon}}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="overflow-auto mt-20">
          <table class="table table-bordered mb-0 Bk_Mg-Tbl">
            <thead class="thead-light">
              <tr>
                <th>Room No.</th>
                <th>Room Name</th>
                <th>Confirmation Number</th>
                <th>Meal Type</th>
                <th>Guest</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let i = index; let room; of: itinerary.room_list">
                <td>{{ i + 1 }}</td>
                <td>{{ room.room_name }}</td>
                <td>{{ room.room_supplier_confirmation_number }}</td>
                <td>{{ room.meal_plan }}</td>
                <td> {{ room.adt }} Adult<span *ngIf="room.chd > 0">, {{ room.chd }} Child</span>
                </td>
                <td>{{ map_room_status(room.room_booking_status) }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div *ngIf="!itinerary_tab_data" style="display: flex; justify-content: center">
        <p>Itinerary Data not found</p>
      </div>
      </div>
    </p-tabPanel>
    <!-- Passengers tab -->
    <p-tabPanel header="Passengers">
      <div *ngIf="tab_data_status.passenger == 'success'">
        <div *ngFor="let bkg of guest_tab_data" class="ng-bookingDetail">
          <div class="app-mainGrid2">
            <div class="border-right">
              <div class="app-comCol">
                <h5 class="app-bgtext">Booking ID</h5>
                <p class="app-text"> {{ bkg.booking_id }}</p>
              </div>
              <div class="app-comCol">
                <h5 class="app-bgtext">Booking Status</h5>
                <p class="app-text" [ngClass]="
                map_booking_status(bkg.status_id, bkg.payment_status) ==
                'Confirmed'
                  ? 'text-success'
                  : 'text-danger'
              "> {{ map_booking_status(bkg.status_id, bkg.payment_status) }}</p>
              </div>
              <div class="app-comCol">
                <h5 class="app-bgtext">Booking Date</h5>
                <p class="app-text"> {{ bkg.booking_date }}</p>
              </div>
            </div>
          </div>
          <div class="overflow-auto mt-20">
            <table class="table table-bordered mb-0 Bk_Mg-Tbl">
              <thead class="thead-light">
                <tr>
                  <th>Room No.</th>
                  <th>Room Name</th>
                  <th>Meal Type</th>
                  <th>Guest</th>
                  <th>Guest Name</th>
                  <th>Guest Nationality</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let i = index; let room; of: bkg.room_list">
                  <td>{{ i + 1 }}</td>
                  <td class="passengerRoomName">
                    <span>{{ room.room_name }}</span>
                  </td>
                  <td>{{ room.meal_plan }}</td>
                  <td> {{ room.adt }} Adult<span *ngIf="room.chd > 0">, {{ room.chd }} Child</span>
                  </td>
                  <td class="passengerRoomName">
                    <div *ngFor="let guest of room.guest_list">
                      <span *ngIf="
                          guest.guest_name != null && guest.guest_name != ''
                        ">{{ guest.guest_name }}</span>
                      <span *ngIf="
                          guest.guest_name == null ||
                          guest.guest_name.trim() == ''
                        ">TBA</span>
                      <span *ngIf="guest.guest_type == 2"> ({{ guest.guest_age }} years)</span>
                    </div>
                  </td>
                  <td>{{itinerary_tab_data ? itinerary_tab_data[0].guest_nationality : ''}}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="app-comCol">
           <table class="table table-bordered mb-0 Bk_Mg-Tbl">
            <thead class="thead-light">
              <tr>
                <th class="app-bgtext text-left">Special Request:-</th>
              </tr>
            </thead>
            <tbody class="app-comCol">
              <tr class="app-text ml-2">
                <span *ngIf="bkg.special_request != null && bkg.special_request != ''
              ">{{ bkg.special_request }}</span><span *ngIf="
                bkg.special_request == null || bkg.special_request == ''
              ">N/A</span>
            </tr>
              </tbody>
           </table>
          </div>
        </div>
      </div>
      <div *ngIf="tab_data_status.passenger == 'failed'" style="display: flex; justify-content: center">
        <p>Passenger Data not found</p>
      </div>
    </p-tabPanel>
    <!-- Vendor Costing tab -->
    <p-tabPanel header="Vendor Costing">
     <div *ngIf="tab_data_status.costing == 'success'">
      <div class="ng-bookingDetail" *ngFor="let bkg of costing_tab_data.booking_list; let a = index">
        <div class="bookingMngmnt_gridWrap">
          <div class="border-right">
            <div class="app-comCol">
              <h5 class="app-bgtext">Trip Id</h5>
              <p class="app-text">{{ costing_tab_data.trip_id }}</p>
            </div>
            <div class="app-comCol">
              <h5 class="app-bgtext">Booking Id</h5>
              <p class="app-text">{{ bkg.booking_id }}</p>
            </div>
            <!-- <div class="app-comCol">
              <h5 class="app-bgtext">Vendor Name</h5>
              <p class="app-text">Amaan</p>
            </div> -->
            <div class="app-comCol" *ngIf="bkg.Contract">
              <h5 class="app-bgtext">Contract Name</h5>
              <p class="app-text">{{ bkg.Contract }}</p>
            </div>
            <div class="app-comCol">
              <h5 class="app-bgtext" *ngIf="bkg.Offer">Offer Details:</h5>
              <p class="app-text">{{ bkg.Offer }}</p>
            </div>
            <div class="app-comCol" *ngIf="bkg.Supplement">
              <h5 class="app-bgtext">Supplements:</h5>
              <p class="app-text">{{ bkg.Supplement }}</p>
            </div>
          </div>
          <div>
            <div class="app-comCol">
              <h5 class="app-bgtext">Vendor Invoice</h5>
              <a class="bookinglink mb-0 pr-0"> {{bkg.invoice_no ? bkg.invoice_no : ''}}
                <span (click)="openVendorInvoiceNumberModal(bkg.booking_id,bkg.invoice_no)">{{bkg.invoice_no ? ' Edit' :'Add'}}</span>
              </a>
            </div>
            <div class="app-comCol">
              <h5 class="app-bgtext">Currency</h5>
              <p class="app-text">{{ bkg.supplier_currency }}</p>
            </div>
            <div class="app-comCol">
              <h5 class="app-bgtext">Vendor Total</h5>
              <p class="app-text">{{ bkg.supplier_amount }}</p>
            </div>
            <!-- <div class="app-comCol">
              <h5 class="app-bgtext">Adjustment</h5>
              <p class="app-text">0.23</p>
            </div> -->
          </div>
          <!-- <div class="view-action-btnWrapper text-left">
            <button class="btn btn-primary" [matMenuTriggerFor]="menu">Action</button>
            <mat-menu #menu="matMenu">
              <button mat-menu-item>Action</button>
            </mat-menu>
          </div> -->
        </div>
        <div *ngFor="let Room_Details of bkg.room_details_list;let i=index">
          <div class="overflow-auto mt-20">
            <table class="table table-bordered mb-0 Bk_Mg-Tbl">
              <thead class="thead-light">
                <tr>
                  <th>Room No.</th>
                  <th>Room</th>
                  <th>Meal Type</th>
                  <th>Guest Count</th>
                  <th>Lead Guest</th>
                  <th>Confirmation Number</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>{{i+1}}</td>
                  <td>{{Room_Details.room_name}}</td>
                  <td>{{Room_Details.meal_plan}}</td>
                  <td>{{ Room_Details.adt }} Adult<span *ngIf="Room_Details.chd > 0">, {{ Room_Details.chd }} Child</span></td>
                  <td>{{Room_Details.lead_guest}}</td>
                  <td>{{Room_Details.hotel_confirmation_number}} 
                    <a class="bookinglink mb-0">
                      <span (click)="openConfirmationNumberModal( addConfirmationNumber,
                      Room_Details)"> {{ Room_Details.hotel_confirmation_number ? 'Edit' : 'Add'}} </span>
                  </a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="overflow-auto mt-20" *ngIf="Room_Details.Room_Allocation_Data && Room_Details.Room_Allocation_Data.Date.length > 0">
            <table class="table table-bordered mb-0 Bk_Mg-Tbl">
              <thead class="thead-light">
                <tr>
                  <th class="text-left">Date</th>
                  <th class="text-left" *ngFor="let Date of Room_Details.Room_Allocation_Data.Date">{{Date}}</th>
                  <!-- <th>Thur 05 Sep</th>
                  <th>Fri 06 Sep</th>
                  <th>Sat 07 Sep</th>
                  <th>Sun 08 Sep</th>
                  <th>Mon 09 Sep</th>
                  <th>Tue 10 Sep</th> -->
                  <th>Total</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="text-left">Price</td>
                  <td class="text-left" *ngFor="let Price of Room_Details.Room_Allocation_Data.Price">{{Price}}</td>
                  <td class="text-right">{{Room_Details.Room_Allocation_Data.total}}</td>
                </tr>
                <tr>
                  <td class="text-left">Allocation</td>
                  <td class="text-left" *ngFor="let allocation of Room_Details.Room_Allocation_Data.Allocation">{{allocation}}</td>
                  <td class="text-right">-</td>
                </tr>
                <tr>
                  <td class="text-left">Booked</td>
                  <td class="text-left" *ngFor="let booked of Room_Details.Room_Allocation_Data.Booked">{{booked}}</td>
                  <td class="text-right">-</td>
                </tr>
                <tr>
                  <td class="text-left">Available after booking</td>
                  <td class="text-left" *ngFor="let book_avail of Room_Details.Room_Allocation_Data.Available_after_booking">{{book_avail}}</td>
                  <td class="text-right">-</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
     </div>
    </p-tabPanel>
    <!-- Vendor Notes tab -->
    <p-tabPanel header="Vendor Notes">
      <div class="text-right mb-3">
        <button class="btn btn-primary" (click)="openSendAddNote()"> Add Notes </button>
      </div>
      <div class="overflow-auto">
        <table class="table table-bordered mb-0 Bk_Mg-Tbl">
          <thead class="thead-light">
            <tr>
              <th>Sr No</th>
              <th>Note</th>
              <th>Note By</th>
              <th>Noted On</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let note of note_tab_data; let i = index">
              <td>{{ i + 1 }}</td>
              <td class="max-width330">{{ note.note }}</td>
              <td>{{ note.note_by }}</td>
              <td>{{ note.noted_on }}</td>
            </tr>
          <ng-template pTemplate="emptymessage">
            <tr *ngIf="note_tab_data.length == 0" class="ResultNotFound">
                <td>
                    No data found
                </td>
            </tr>
        </ng-template>
          </tbody>
         
        </table>
      </div>
    </p-tabPanel>
  </p-tabView>
</div>

<!-- Notes Modal -->
<p-dialog header="Add Note" position="top" [(visible)]="isOpenAddNote" [modal]="true" [style]="{width: '35vw'}"
  [baseZIndex]="10000" [draggable]="false" [resizable]="false">
  <div class="modal-body p-0 overflow-auto">
    <div class="formControlWrapper" [formGroup]="notesform">
      <span class="formLabel">Note</span>
      <textarea class="form-control val-NotRequired" formControlName="Note" rows="4" placeholder=" " 
        [ngClass]="{'errorInput': validationServ.onBlur(notesform.get('Note'), 'required')}"></textarea>
      <span class="errorspan" *ngIf="validationServ.onBlur(notesform.get('Note'), 'required')">Please
        enter note </span>
    </div>
  </div>
  <ng-template pTemplate="footer">
    <button class="btn btn-primary" (click)="saveNotes()">
      Submit
    </button>
  </ng-template>
</p-dialog>
<!-- End -->
<!-- Cancellation Policy -->
<div class="cancellationpolicy_Modal">
  <p-dialog header="Cancellation Policy" position="top" [(visible)]="isOpenCancellationPolicyModal" [modal]="true"
    [style]="{ width: '37vw' }" [baseZIndex]="10000" [draggable]="false" [resizable]="false">
    <div>
      <div *ngFor="let c_p_room of selectedItinerary">
        <div class=" mb-3">
          <div *ngIf="is_roomwise_policy" class="app-modalHead mb-2">
            <span>{{ c_p_room.room_name }}</span>
          </div>
          <div class="tableWrapper" *ngIf="c_p_room.supplier_cancellation_policy">
            <h6 class="fw-400 mt-0">Supplier Cancellation Policy</h6>
            <div class=" mt-1" *ngIf="c_p_room.supplier_cancellation_policy.format_type != 'Text'">
              <li class="book-TableData" *ngFor="let can_p of c_p_room.supplier_cancellation_policy.policy"> From {{ can_p.from_date }} to {{ can_p.to_date }} charge of 
                <span *ngIf="can_p.format_type == 'Flat' || can_p.format_type == 'Percentage'">{{ can_p.currency == '%' ?
                  can_p.amount + can_p.currency : can_p.currency + ' ' +can_p.amount }}</span> 
                <span *ngIf="can_p.format_type == 'Night' || can_p.format_type == 'Nights'">{{can_p.amount + ' ' +can_p.currency}}</span>
              </li>
            </div>
            <div class=" mt-10" *ngIf="c_p_room.supplier_cancellation_policy.format_type == 'Text'">
              <p *ngFor="let can_p of c_p_room.supplier_cancellation_policy.policy"> {{can_p.text}} </p>
            </div>
          </div>
        </div>
      </div>
      <h6 class="mt-0">Cancellation Policy Timezone: {{selectedItinerary && selectedItinerary.length > 0 ? selectedItinerary[0].timezone : ''}} {{cityList ? '(' + cityList[0].cityName + ')' : ''}}</h6>
      <ng-template pTemplate="footer">
        <button mat-flat-button color="primary" (click)="isOpenCancellationPolicyModal = false"> Ok </button>
      </ng-template>
    </div>
  </p-dialog>
</div>
<!-- End -->
<!-- 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="form-control" readonly formControlName="room_name" placeholder="" />
      </div>
      <div class="formControlWrapper">
        <span class="formLabel">Confirmation Number</span>
        <input type="text" class="form-control" formControlName="confirmation_no" placeholder="" />
      </div>
   </div>
   </div>
    <div class="formControlWrapper">
      <span class="formLabel">Authorized Person</span>
      <input type="text" class="form-control" 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="form-control" 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 -->
<!-- Add Invoice Number -->
<p-dialog header="Add Invoice Number" position="top" [(visible)]="isOpenAddInvoiceNumberModal" [modal]="true"
  [style]="{ width: '30vw' }" [baseZIndex]="10000" [draggable]="false" [resizable]="false">
  <div class="modal-body AddConfirmationModal p-0">
    <div class="formControlWrapper">
      <span class="formLabel">Invoice Number</span>
      <input type="text" class="form-control" placeholder="" />
    </div>
    <div class="formControlWrapper">
      <span class="formLabel">Authorized Person</span>
      <input type="text" class="form-control" placeholder="" />
    </div>
    <div class="formControlWrapper calenderField">
      <span class="formLabel">Date of Invoice Issue</span>
      <p-calendar inputId="basic" placeholder="Select" [showIcon]="true" class="d-block"></p-calendar>
    </div>
    <div class="formControlWrapper">
      <span class="formLabel">Remarks</span>
      <textarea class="form-control" rows="2" placeholder=""></textarea>
    </div>
  </div>
  <ng-template pTemplate="footer">
    <button class="btn btn-primary mr-0"> Submit </button>
  </ng-template>
</p-dialog>
<!-- End -->
 <!-- Add Invoice Number -->
<p-dialog header="Add Invoice Number" position="top" [(visible)]="isOpenAddVendorInvoiceNumberModal" [modal]="true"
[style]="{ width: '30vw' }" [baseZIndex]="10000" [draggable]="false" [resizable]="false">
<div>
  <div class="formControlWrapper" [formGroup]="VendorInvoiceForm" [ngClass]="{'errorInput': validationServ.onBlur(VendorInvoiceForm.get('vendor_invoice_number'), 'required')}">
    <span class="formLabel">Invoice Number</span>
    <input type="text" formControlName="vendor_invoice_number" class="form-control"  placeholder="" />
    <span class="errorspan" *ngIf="validationServ.onBlur(VendorInvoiceForm.get('vendor_invoice_number'), 'required')">Please
      enter invoice number </span>
  </div>
</div>
<ng-template pTemplate="footer">
  <button class="btn btn-primary mr-0" (click)="SaveInvoiceNumber()"> Submit </button>
</ng-template>
</p-dialog>
<!-- End -->