vue-hotel-search-widget 1.0.0

package/src/components/HotelSearchWidget.vue

@@ -0,0 +1,1410 @@
+<template>
+  <div class="thsw-root sw-container" :style="themeStyle">
+      <div class="sw-card-box">
+        <form class="sw-srh-h-grid" @submit.prevent="handleSubmit">
+          <!-- Destination Field -->
+          <div
+            :class="[
+              'sw-form-field',
+              'sw-pos-rel',
+              'br-left',
+              { 'thsw-field-error': fieldErrors.destination }
+            ]"
+          >
+            <label for="destination">Destination</label>
+            <div class="sw-custom-dropdown" ref="destinationDropdownRef">
+              <div class="sw-custom-dropdown-trigger">
+                <input
+                  class="hotel-destination-input"
+                  :value="destinationQuery"
+                  @input="handleDestinationQueryChange"
+                  @focus="setIsDestinationDropdownOpen(true)"
+                  placeholder="Where are you going?"
+                />
+              </div>
+              <div v-if="isDestinationDropdownOpen" class="sw-dropdown">
+                <ul class="sw-dropdown-list">
+                  <li class="sw-srh-loc" @click="handleAroundCurrentLocation">
+                    <div class="sw-flex sw-align-center sw-gap-5 sw-justify-between">
+                      <div class="sw-flex sw-align-center sw-gap-15">
+                        <span class="sw-hotel-search-form-icon sw-fill">
+                          <svg
+                            width="26px"
+                            height="26px"
+                            fill="currentColor"
+                            viewBox="0 0 24 24"
+                            xmlns="http://www.w3.org/2000/svg"
+                            data-testid="MyLocationIcon"
+                            class="sw-bg-color-loc"
+                          >
+                            <path
+                              fillRule="evenodd"
+                              d="M12.0283 3a.7614.7614 0 0 1 .7614.7614v1.1544c3.328.3533 5.9726 2.9958 6.329 6.3228h1.1482a.7614.7614 0 0 1 0 1.5228h-1.1467c-.3505 3.3337-2.9978 5.9831-6.3305 6.3368v1.1404a.7614.7614 0 0 1-1.5228 0v-1.1404c-3.3327-.3537-5.98-3.0031-6.3306-6.3368H3.7897a.7614.7614 0 0 1 0-1.5228h1.1481c.3565-3.327 3.001-5.9696 6.3291-6.3228V3.7614A.7614.7614 0 0 1 12.0283 3m5.6086 9.007c0 3.0976-2.5111 5.6086-5.6086 5.6086s-5.6086-2.511-5.6086-5.6086 2.511-5.6085 5.6086-5.6085 5.6086 2.511 5.6086 5.6085m-3.5479-.0001c0 1.1381-.9226 2.0607-2.0607 2.0607-1.138 0-2.0606-.9226-2.0606-2.0607 0-1.138.9226-2.0606 2.0606-2.0606s2.0607.9226 2.0607 2.0606m1.5228 0c0 1.9791-1.6044 3.5835-3.5835 3.5835s-3.5834-1.6044-3.5834-3.5835 1.6044-3.5834 3.5834-3.5834 3.5835 1.6044 3.5835 3.5834"
+                              clipRule="evenodd"
+                            ></path>
+                          </svg>
+                        </span>
+                        <h5 class="sw-fw500">Around Current Location</h5>
+                      </div>
+                    </div>
+                  </li>
+                  <li v-if="isDestinationLoading" class="sw-dropdown-list-item">
+                    <div class="sw-dropdown-list-card">
+                      <h6 class="sw-text-label">Searching...</h6>
+                    </div>
+                  </li>
+                  <template
+                    v-if="
+                      !isDestinationLoading &&
+                      destinationQuery.trim().length < MIN_SEARCH_CHARS
+                    "
+                  >
+                    <li
+                      v-for="option in STATIC_LOCATIONS"
+                      :key="option.geoId"
+                      class="sw-dropdown-list-item"
+                      @click="handleDestinationSelect(option)"
+                    >
+                      <div class="sw-dropdown-list-card">
+                        <span class="sw-hotel-search-form-icon">
+                          <svg
+                            width="30px"
+                            height="30px"
+                            fill="currentColor"
+                            viewBox="0 0 24 24"
+                            xmlns="http://www.w3.org/2000/svg"
+                            data-testid="LocationIcon"
+                          >
+                            <path
+                              d="M13.5 8.0056c0 .8294-.6716 1.5017-1.5 1.5017s-1.5-.6723-1.5-1.5017.6716-1.5017 1.5-1.5017 1.5.6723 1.5 1.5017"
+                            ></path>
+                            <path
+                              fillRule="evenodd"
+                              d="M12 17.0359c2.7614 0 5-6.2457 5-9.0102C17 5.261 14.7614 3.02 12 3.02S7 5.2611 7 8.0257c0 2.7645 2.2386 9.0102 5 9.0102m2.1803-4.1114C15.0205 11.1538 15.5 9.1236 15.5 8.0257 15.5 6.088 13.9314 4.52 12 4.52S8.5 6.088 8.5 8.0257c0 1.098.4795 3.1281 1.3197 4.8988.414.8726.8717 1.5863 1.3208 2.0583.4658.4896.7566.5531.8595.5531s.3937-.0635.8595-.5531c.4491-.472.9068-1.1857 1.3208-2.0583"
+                              clipRule="evenodd"
+                            ></path>
+                            <path
+                              d="M16.8904 14.2118c-.1965.4142.0122.9154.4396 1.0813q.2178.0845.4184.175c1.5348.6914 1.7516 1.3369 1.7516 1.4976 0 .1606-.2168.8061-1.7516 1.4975-1.394.628-3.425 1.0553-5.7484 1.0553s-4.3544-.4273-5.7484-1.0553C4.7168 17.7718 4.5 17.1263 4.5 16.9657s.2168-.8062 1.7516-1.4976a8.5 8.5 0 0 1 .4184-.175c.4274-.1659.6361-.6671.4396-1.0813-.1528-.322-.5183-.493-.8522-.3682C4.2674 14.5873 3 15.7098 3 16.9657c0 2.2392 4.0294 4.0545 9 4.0545s9-1.8153 9-4.0545c0-1.2559-1.2674-2.3784-3.2574-3.1221-.3339-.1248-.6994.0462-.8522.3682"
+                            ></path>
+                          </svg>
+                        </span>
+                        <div>
+                          <h5 class="sw-fw500 sw-text-ellipsis">{{ option.geoTitle }}</h5>
+                          <h6 class="sw-text-label sw-text-ellipsis">
+                            {{ option.displayName }}
+                          </h6>
+                        </div>
+                      </div>
+                    </li>
+                  </template>
+                  <li
+                    v-if="
+                      !isDestinationLoading &&
+                      destinationQuery.trim().length >= MIN_SEARCH_CHARS &&
+                      destinationResults.length === 0
+                    "
+                    class="sw-dropdown-list-item"
+                  >
+                    <div class="sw-dropdown-list-card">
+                      <h6 class="sw-text-label">No results found</h6>
+                    </div>
+                  </li>
+                  <li
+                    v-for="option in destinationResults"
+                    :key="option.geoId"
+                    class="sw-dropdown-list-item"
+                    @click="handleDestinationSelect(option)"
+                  >
+                    <div class="sw-dropdown-list-card">
+                      <span class="sw-hotel-search-form-icon">
+                        <svg
+                          width="30px"
+                          height="30px"
+                          fill="currentColor"
+                          viewBox="0 0 24 24"
+                          xmlns="http://www.w3.org/2000/svg"
+                          data-testid="LocationIcon"
+                        >
+                          <path
+                            d="M13.5 8.0056c0 .8294-.6716 1.5017-1.5 1.5017s-1.5-.6723-1.5-1.5017.6716-1.5017 1.5-1.5017 1.5.6723 1.5 1.5017"
+                          ></path>
+                          <path
+                            fillRule="evenodd"
+                            d="M12 17.0359c2.7614 0 5-6.2457 5-9.0102C17 5.261 14.7614 3.02 12 3.02S7 5.2611 7 8.0257c0 2.7645 2.2386 9.0102 5 9.0102m2.1803-4.1114C15.0205 11.1538 15.5 9.1236 15.5 8.0257 15.5 6.088 13.9314 4.52 12 4.52S8.5 6.088 8.5 8.0257c0 1.098.4795 3.1281 1.3197 4.8988.414.8726.8717 1.5863 1.3208 2.0583.4658.4896.7566.5531.8595.5531s.3937-.0635.8595-.5531c.4491-.472.9068-1.1857 1.3208-2.0583"
+                            clipRule="evenodd"
+                          ></path>
+                          <path
+                            d="M16.8904 14.2118c-.1965.4142.0122.9154.4396 1.0813q.2178.0845.4184.175c1.5348.6914 1.7516 1.3369 1.7516 1.4976 0 .1606-.2168.8061-1.7516 1.4975-1.394.628-3.425 1.0553-5.7484 1.0553s-4.3544-.4273-5.7484-1.0553C4.7168 17.7718 4.5 17.1263 4.5 16.9657s.2168-.8062 1.7516-1.4976a8.5 8.5 0 0 1 .4184-.175c.4274-.1659.6361-.6671.4396-1.0813-.1528-.322-.5183-.493-.8522-.3682C4.2674 14.5873 3 15.7098 3 16.9657c0 2.2392 4.0294 4.0545 9 4.0545s9-1.8153 9-4.0545c0-1.2559-1.2674-2.3784-3.2574-3.1221-.3339-.1248-.6994.0462-.8522.3682"
+                          ></path>
+                        </svg>
+                      </span>
+                      <div>
+                        <h5 class="sw-fw500 sw-text-ellipsis">{{ option.geoTitle }}</h5>
+                        <h6 class="sw-text-label sw-text-ellipsis">
+                          {{ option.displayName }}
+                        </h6>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          <!-- Nationality Field -->
+          <div
+            :class="[
+              'sw-form-field',
+              'sw-pos-rel',
+              { 'thsw-field-error': fieldErrors.nationality }
+            ]"
+          >
+            <label for="nationality">Nationality</label>
+            <div class="sw-custom-dropdown" ref="nationalityDropdownRef">
+              <div class="sw-custom-dropdown-trigger">
+                <input
+                  class="hotel-destination-input"
+                  :value="nationalityQuery"
+                  @input="handleNationalityQueryChange"
+                  @focus="setIsNationalityDropdownOpen(true)"
+                  :placeholder="formData.nationality"
+                />
+              </div>
+              <div v-if="isNationalityDropdownOpen" class="sw-dropdown">
+                <ul class="sw-dropdown-list">
+                  <li v-if="isCountryLoading" class="sw-dropdown-list-item">
+                    <div class="sw-dropdown-list-box">
+                      <div>
+                        <h5 class="sw-fw500 sw-text-ellipsis">Searching...</h5>
+                      </div>
+                    </div>
+                  </li>
+                  <template
+                    v-if="
+                      !isCountryLoading &&
+                      nationalityQuery.trim().length < MIN_SEARCH_CHARS
+                    "
+                  >
+                    <li
+                      v-for="option in STATIC_COUNTRIES"
+                      :key="option.country_id"
+                      class="sw-dropdown-list-item"
+                      @click="handleNationalitySelect(option)"
+                    >
+                      <div class="sw-dropdown-list-box">
+                        <div>
+                          <h5 class="sw-fw500 sw-text-ellipsis">
+                            {{ option.country_name }}
+                          </h5>
+                        </div>
+                        <h6 class="sw-dropdown-item-badge sw-en-font">
+                          {{ option.country_code }}
+                        </h6>
+                      </div>
+                    </li>
+                  </template>
+                  <li
+                    v-if="
+                      !isCountryLoading &&
+                      nationalityQuery.trim().length >= MIN_SEARCH_CHARS &&
+                      countryResults.length === 0
+                    "
+                    class="sw-dropdown-list-item"
+                  >
+                    <div class="sw-dropdown-list-box">
+                      <div>
+                        <h5 class="sw-fw500 sw-text-ellipsis">No results found</h5>
+                      </div>
+                    </div>
+                  </li>
+                  <template
+                    v-if="
+                      !isCountryLoading &&
+                      nationalityQuery.trim().length >= MIN_SEARCH_CHARS
+                    "
+                  >
+                    <li
+                      v-for="option in filteredNationalityOptions"
+                      :key="option.country_id"
+                      class="sw-dropdown-list-item"
+                      @click="handleNationalitySelect(option)"
+                    >
+                      <div class="sw-dropdown-list-box">
+                        <div>
+                          <h5 class="sw-fw500 sw-text-ellipsis">
+                            {{ option.country_name }}
+                          </h5>
+                        </div>
+                        <h6 class="sw-dropdown-item-badge sw-en-font">
+                          {{ option.country_code }}
+                        </h6>
+                      </div>
+                    </li>
+                  </template>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          <!-- Check-in/Check-out Dates -->
+          <div class="sw-srh-wrap">
+            <div
+              :class="[
+                'sw-form-field',
+                'sw-pos-rel',
+                'sw-com-cal',
+                { 'thsw-field-error': fieldErrors.checkIn }
+              ]"
+            >
+              <label for="checkIn">Check-in</label>
+              <input
+                id="checkIn"
+                class="hotel-destination-input"
+                readonly
+                :value="formatDate(formData.checkIn)"
+                placeholder="Select date"
+                @click="showCalendar"
+              />
+              <Calendar
+                ref="calendarRef"
+                v-model="dateRange"
+                selectionMode="range"
+                :numberOfMonths="2"
+                :minDate="new Date()"
+                dateFormat="dd M yy"
+                class="thsw-range-calendar"
+                @update:modelValue="handleDateRangeChange"
+              />
+            </div>
+            <div
+              :class="[
+                'sw-form-field',
+                'sw-pos-rel',
+                'sw-com-cal',
+                { 'thsw-field-error': fieldErrors.checkOut }
+              ]"
+            >
+              <label for="checkOut">Check-out</label>
+              <input
+                id="checkOut"
+                class="hotel-destination-input"
+                readonly
+                :value="formatDate(formData.checkOut)"
+                placeholder="Select date"
+                @click="showCalendar"
+              />
+            </div>
+          </div>
+
+          <!-- Rooms & Guests -->
+          <div class="sw-form-field">
+            <label for="rooms">Rooms & Guests</label>
+            <div class="sw-custom-dropdown" ref="roomsGuestsMenuRef">
+              <div
+                class="sw-custom-dropdown-trigger"
+                @click="setIsRoomsGuestsMenuOpen(!isRoomsGuestsMenuOpen)"
+              >
+                <span>{{ formData.roomsGuests }}</span>
+              </div>
+              <div v-if="isRoomsGuestsMenuOpen" class="sw-rooms-guests-menu">
+                <h3 class="sw-rooms-guests-title">Number of Travellers</h3>
+                <div
+                  v-for="(room, index) in rooms"
+                  :key="index"
+                  class="sw-room-section"
+                >
+                  <div class="sw-room-header">
+                    <svg
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      version="1.1"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+                        <g transform="translate(-4092.000000, -824.000000)">
+                          <g transform="translate(4092.000000, 824.000000)">
+                            <rect
+                              fill="#FFFFFF"
+                              opacity="0"
+                              x="0"
+                              y="0"
+                              width="24"
+                              height="24"
+                            ></rect>
+                            <g
+                              transform="translate(3.000000, 6.000000)"
+                              fill="var(--primary)"
+                              fillRule="nonzero"
+                            >
+                              <path
+                                d="M18.011072,5.62815523 L18.011072,1.13048375 C18.011072,0.514180505 17.4892314,0.012765343 16.8478226,0.012765343 L2.14333676,0.012765343 C1.50192802,0.012765343 0.980087404,0.514180505 0.980087404,1.13048375 L0.980087404,5.62820217 C0.42596144,5.70920578 0,6.17002527 0,6.72475451 L0,9.50863177 C0,9.70302166 0.164015424,9.86061733 0.366323907,9.86061733 L0.75877892,9.86061733 L0.75877892,11.5970794 C0.75877892,11.7914693 0.922794344,11.949065 1.12510283,11.949065 L1.78639075,11.949065 L1.78639075,12.6268014 C1.78639075,12.8211913 1.95040617,12.978787 2.15271465,12.978787 C2.35502314,12.978787 2.51903856,12.8211913 2.51903856,12.6268014 L2.51903856,11.949065 L16.4721697,11.949065 L16.4721697,12.6268014 C16.4721697,12.8211913 16.6361362,12.978787 16.8384936,12.978787 C17.0408509,12.978787 17.2048175,12.8211913 17.2048175,12.6268014 L17.2048175,11.949065 L17.8661054,11.949065 C18.0684627,11.949065 18.2324293,11.7914693 18.2324293,11.5970794 L18.2324293,9.86061733 L18.6248355,9.86061733 C18.8271928,9.86061733 18.9911594,9.70302166 18.9911594,9.50863177 L18.9911594,6.72475451 C18.9911594,6.17002527 18.5651979,5.70915884 18.011072,5.62815523 Z M1.71268638,1.13048375 C1.71268638,0.902350181 1.90586118,0.716736462 2.14328792,0.716736462 L16.8477738,0.716736462 C17.0852005,0.716736462 17.2783753,0.902350181 17.2783753,1.13048375 L17.2783753,5.61553069 L15.99209,5.61553069 C16.2480283,5.35079061 16.5083625,5.0723935 16.7779769,4.77451986 C16.8978869,4.64203249 16.897838,4.44492058 16.777928,4.31248014 C15.7181285,3.14210469 14.8307943,2.28950181 13.6130848,1.27151264 C13.4752494,1.1562491 13.2700591,1.1562491 13.1321748,1.27151264 C11.9144165,2.28954874 11.0271311,3.14215162 9.96738046,4.31248014 C9.84747044,4.44492058 9.84742159,4.64203249 9.96733162,4.77451986 C10.2369949,5.07244043 10.4972802,5.35083755 10.7532185,5.61553069 L8.23764781,5.61553069 C8.49358612,5.35079061 8.75396915,5.0723935 9.02358355,4.77451986 C9.14349357,4.64203249 9.14349357,4.44492058 9.0235347,4.31248014 C7.96388175,3.14229242 7.07654756,2.28968953 5.85869152,1.27151264 C5.72085604,1.1562491 5.51566581,1.1562491 5.37778149,1.27151264 C4.15992545,2.28968953 3.27259126,3.14229242 2.2129383,4.31248014 C2.09297943,4.44492058 2.09297943,4.64203249 2.21288946,4.77451986 C2.4825527,5.0723935 2.74288689,5.35079061 2.99882519,5.61553069 L1.71268638,5.61553069 L1.71268638,1.13048375 Z M11.7640283,5.61553069 C11.4269614,5.28306859 11.0864756,4.92981588 10.7309949,4.54352347 C11.6067044,3.59142599 12.3820411,2.84643682 13.3726787,2.00519134 C14.3633162,2.84638989 15.138653,3.59142599 16.0144113,4.54352347 C15.6589794,4.92981588 15.3184447,5.28306859 14.9813779,5.61553069 L11.7640283,5.61553069 Z M4.0096838,5.61553069 C3.67261697,5.28302166 3.33208226,4.92981588 2.97660154,4.54352347 C3.85216452,3.59161372 4.62764781,2.84648375 5.61833419,2.00519134 C6.60902057,2.84648375 7.38450386,3.59161372 8.26006684,4.54352347 C7.90463496,4.92981588 7.56410026,5.28302166 7.22698458,5.61553069 L4.0096838,5.61553069 Z M17.4997815,11.2450939 L1.49142674,11.2450939 L1.49142674,9.86061733 L17.4997815,9.86061733 L17.4997815,11.2450939 Z M18.2585116,9.15664621 L0.732647815,9.15664621 L0.732647815,6.72475451 C0.732647815,6.50131408 0.921866324,6.31950181 1.15445758,6.31950181 L17.8367018,6.31950181 C18.0692931,6.31950181 18.2585116,6.50131408 18.2585116,6.72475451 L18.2585116,9.15664621 Z"
+                              ></path>
+                            </g>
+                          </g>
+                        </g>
+                      </g>
+                    </svg>
+                    Room {{ index + 1 }}
+                  </div>
+                  <div class="sw-room-controls-group">
+                    <div class="sw-room-control-item">
+                      <div class="sw-room-control-label">
+                        <span>Adult (18+ years)</span>
+                      </div>
+                      <div class="sw-room-control-buttons">
+                        <button
+                          type="button"
+                          :class="[
+                            'sw-count-button',
+                            room.adults === 1 ? 'sw-disabled' : 'sw-active'
+                          ]"
+                          @click="decrementAdults(index)"
+                          :disabled="room.adults === 1"
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            height="20"
+                            fill="var(--sw-white)"
+                            viewBox="0 -960 960 960"
+                          >
+                            <path d="M200-440v-80h560v80H200Z"></path>
+                          </svg>
+                        </button>
+                        <span class="sw-count-value">{{ room.adults }}</span>
+                        <button
+                          type="button"
+                          :class="[
+                            'sw-count-button',
+                            room.adults >= MAX_ADULTS_PER_ROOM
+                              ? 'sw-disabled'
+                              : 'sw-active'
+                          ]"
+                          @click="incrementAdults(index)"
+                          :disabled="room.adults >= MAX_ADULTS_PER_ROOM"
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            height="20"
+                            fill="var(--sw-white)"
+                            viewBox="0 -960 960 960"
+                          >
+                            <path
+                              d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"
+                            ></path>
+                          </svg>
+                        </button>
+                      </div>
+                    </div>
+                    <div class="sw-room-control-item">
+                      <div class="sw-room-control-label">
+                        <span>Child (0-17 years)</span>
+                      </div>
+                      <div class="sw-room-control-buttons">
+                        <button
+                          type="button"
+                          :class="[
+                            'sw-count-button',
+                            room.children === 0 ? 'sw-disabled' : 'sw-active'
+                          ]"
+                          @click="decrementChildren(index)"
+                          :disabled="room.children === 0"
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            height="20"
+                            fill="var(--sw-white)"
+                            viewBox="0 -960 960 960"
+                          >
+                            <path d="M200-440v-80h560v80H200Z"></path>
+                          </svg>
+                        </button>
+                        <span class="sw-count-value">{{ room.children }}</span>
+                        <button
+                          type="button"
+                          :class="[
+                            'sw-count-button',
+                            room.children >= 4 ? 'sw-disabled' : ''
+                          ]"
+                          @click="incrementChildren(index)"
+                          :disabled="room.children >= 4"
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            height="20"
+                            fill="var(--sw-white)"
+                            viewBox="0 -960 960 960"
+                          >
+                            <path
+                              d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"
+                            ></path>
+                          </svg>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="">
+                    <div v-if="room.children > 0" class="sw-room-controls-child">
+                      <span
+                        v-for="(_, childIndex) in Array.from({ length: room.children })"
+                        :key="childIndex"
+                        class="sw-room-control-label"
+                      >
+                        Child {{ childIndex + 1 }}
+                      </span>
+                    </div>
+                    <div class="sw-room-controls-child">
+                      <div
+                        v-for="(_, childIndex) in Array.from({ length: room.children })"
+                        :key="childIndex"
+                        class="sw-child-age-item"
+                      >
+                        <Dropdown
+                          :modelValue="room.childAges[childIndex] ?? 0"
+                          :options="childAgeOptions"
+                          @update:modelValue="
+                            (value) => updateChildAge(index, childIndex, value)
+                          "
+                          placeholder="Age"
+                          class="child-age-dropdown"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <button
+                    v-if="rooms.length > 1 && index > 0"
+                    type="button"
+                    class="sw-remove-room-button"
+                    @click="handleRemoveRoom(index)"
+                    :aria-label="`Remove Room ${index + 1}`"
+                  >
+                    ×
+                  </button>
+                </div>
+                <div class="sw-rooms-guests-footer">
+                  <button
+                    v-if="rooms.length < 6"
+                    type="button"
+                    class="sw-add-room-button"
+                    @click="handleAddRoom"
+                  >
+                    <svg
+                      width="14"
+                      height="14"
+                      viewBox="0 0 16 16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path fill="none" d="M0 0h16v16H0z"></path>
+                      <path d="M15 7H9V1H7v6H1v2h6v6h2V9h6z"></path>
+                    </svg>
+                    Add another room
+                  </button>
+                  <div class="sw-rooms-guests-cta">
+                    <button
+                      type="button"
+                      class="sw-reset-button"
+                      @click="resetRooms"
+                    >
+                      Reset
+                    </button>
+                    <button
+                      type="button"
+                      class="sw-apply-button"
+                      @click="setIsRoomsGuestsMenuOpen(false)"
+                    >
+                      Apply
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Search Button -->
+          <Button
+            type="submit"
+            label="Search"
+            icon="pi pi-search"
+            class="sw-search-button br-right"
+          />
+        </form>
+
+        <!-- Advanced Search Options -->
+        <div class="sw-advanced-search-options">
+          <Accordion>
+            <AccordionTab header="Advanced Search options">
+              <div class="sw-hsrh-advan-cont">
+                <h5>Star Rating:</h5>
+                <div class="sw-hsrh-chk-main">
+                  <label
+                    v-for="rating in [5, 4, 3, 2, 1]"
+                    :key="rating"
+                    class="sw-star-checkbox-wrap sw-checkbox-wrap"
+                  >
+                    <input
+                      type="checkbox"
+                      :checked="selectedStarRatings.includes(rating)"
+                      @change="handleStarRatingToggle(rating)"
+                    />
+                    <div class="sw-star-checkbox">
+                      <span class="sw-en-font">{{ rating }}</span>
+                      <svg
+                        width="14"
+                        height="14"
+                        viewBox="0 0 18 17"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M3.35375 16.6825L4.7865 10.5133L0 6.36525L6.31525 5.81725L8.77875 0L11.2422 5.81725L17.5575 6.36525L12.771 10.5133L14.2038 16.6825L8.77875 13.4095L3.35375 16.6825Z"
+                          fill="#ffae43"
+                        />
+                      </svg>
+                    </div>
+                  </label>
+                </div>
+              </div>
+              <div class="sw-hsrh-advan-cont">
+                <h5>Meal Type:</h5>
+                <div class="sw-hsrh-chk-main">
+                  <label
+                    v-for="mealType in mealTypeOptions"
+                    :key="mealType.value"
+                    class="sw-checkbox-wrap"
+                  >
+                    <input
+                      type="checkbox"
+                      :checked="selectedMealTypes.includes(mealType.value)"
+                      @change="handleMealTypeToggle(mealType.value)"
+                    />
+                    <div class="sw-star-checkbox">{{ mealType.label }}</div>
+                  </label>
+                </div>
+              </div>
+            </AccordionTab>
+          </Accordion>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+import Button from 'primevue/button'
+import Dropdown from 'primevue/dropdown'
+import Calendar from 'primevue/calendar'
+import Accordion from 'primevue/accordion'
+import AccordionTab from 'primevue/accordiontab'
+import { JSEncrypt } from 'jsencrypt'
+import { hotelSearchWidgetStyles } from './hotel-search-widget.styles.js'
+
+const props = defineProps({
+  config: {
+    type: Object,
+    default: () => ({})
+  },
+  minWidth: {
+    type: [Number, String],
+    default: undefined
+  }
+})
+
+const STYLE_ELEMENT_ID = 'thsw-hotel-styles'
+const PRIMEICONS_LINK_ID = 'thsw-primeicons'
+const MIN_SEARCH_CHARS = 3
+const MAX_ADULTS_PER_ROOM = 6
+
+const STATIC_LOCATIONS = [
+  {
+    geoId: '618704',
+    geoTitle: 'Dubai',
+    geoName: 'United Arab Emirates',
+    displayName: 'Dubai, United Arab Emirates',
+    type: 'city',
+    countryCode: 'AE',
+    lattitude: 25.27063,
+    longitude: 55.30037
+  },
+  {
+    geoId: '804926',
+    geoTitle: 'Dubai Hills',
+    geoName: 'Dubai, United Arab Emirates',
+    displayName: 'Dubai Hills, Dubai, United Arab Emirates',
+    type: 'neighborhood',
+    countryCode: 'AE',
+    lattitude: 25.103307,
+    longitude: 55.247966
+  },
+  {
+    geoId: '618818',
+    geoTitle: 'Dubai Media City',
+    geoName: 'Dubai, United Arab Emirates',
+    displayName: 'Dubai Media City, Dubai, United Arab Emirates',
+    type: 'neighborhood',
+    countryCode: 'AE',
+    lattitude: 25.094279,
+    longitude: 55.154095
+  },
+  {
+    geoId: '618493',
+    geoTitle: 'Dubai Internet City',
+    geoName: 'Dubai, United Arab Emirates',
+    displayName: 'Dubai Internet City, Dubai, United Arab Emirates',
+    type: 'neighborhood',
+    countryCode: 'AE',
+    lattitude: 25.097792,
+    longitude: 55.163026
+  },
+  {
+    geoId: '618494',
+    geoTitle: 'Dubai Studio City',
+    geoName: 'Dubai, United Arab Emirates',
+    displayName: 'Dubai Studio City, Dubai, United Arab Emirates',
+    type: 'neighborhood',
+    countryCode: 'AE',
+    lattitude: 25.041623,
+    longitude: 55.251897
+  },
+  {
+    geoId: '618670',
+    geoTitle: 'Dubai Sports City',
+    geoName: 'Dubai, United Arab Emirates',
+    displayName: 'Dubai Sports City, Dubai, United Arab Emirates',
+    type: 'neighborhood',
+    countryCode: 'AE',
+    lattitude: 25.036236,
+    longitude: 55.217676
+  },
+  {
+    geoId: '618631',
+    geoTitle: 'Dubai Production City',
+    geoName: 'Dubai, United Arab Emirates',
+    displayName: 'Dubai Production City, Dubai, United Arab Emirates',
+    type: 'neighborhood',
+    countryCode: 'AE',
+    lattitude: 25.032507,
+    longitude: 55.189725
+  },
+  {
+    geoId: '618733',
+    geoTitle: 'Ski Dubai',
+    geoName: 'Dubai, United Arab Emirates',
+    displayName: 'Ski Dubai, Dubai, United Arab Emirates',
+    type: 'point_of_interest',
+    countryCode: 'AE',
+    lattitude: 25.117395,
+    longitude: 55.198021
+  },
+  {
+    geoId: '2442684',
+    geoTitle: 'Dubai',
+    geoName: 'Dubai, United Arab Emirates',
+    displayName: 'Dubai, Dubai, United Arab Emirates',
+    type: 'hotel',
+    countryCode: '',
+    lattitude: 25.273935,
+    longitude: 55.32799
+  },
+  {
+    geoId: '1487637',
+    geoTitle: 'Dubai Luxury Stay - Downtown Dubai',
+    geoName: 'Dubai, United Arab Emirates',
+    displayName: 'Dubai Luxury Stay - Downtown Dubai, Dubai, United Arab Emirates',
+    type: 'hotel',
+    countryCode: '',
+    lattitude: 25.076485,
+    longitude: 55.144405
+  },
+  {
+    geoId: '1910103',
+    geoTitle: 'Dubai Arch',
+    geoName: 'Dubai, United Arab Emirates',
+    displayName: 'Dubai Arch, Dubai, United Arab Emirates',
+    type: 'hotel',
+    countryCode: '',
+    lattitude: 25.071701,
+    longitude: 55.143578
+  },
+  {
+    geoId: '737327',
+    geoTitle: 'Angsana Dubai',
+    geoName: 'Dubai, United Arab Emirates',
+    displayName: 'Angsana Dubai, Dubai, United Arab Emirates',
+    type: 'hotel',
+    countryCode: '',
+    lattitude: 25.215,
+    longitude: 55.279
+  },
+  {
+    geoId: '2231257',
+    geoTitle: 'Dubai Backpackers',
+    geoName: 'Dubai, United Arab Emirates',
+    displayName: 'Dubai Backpackers, Dubai, United Arab Emirates',
+    type: 'hotel',
+    countryCode: '',
+    lattitude: 25.09714,
+    longitude: 55.17065
+  },
+  {
+    geoId: '2322561',
+    geoTitle: 'Dubai Hostel',
+    geoName: 'Dubai, United Arab Emirates',
+    displayName: 'Dubai Hostel, Dubai, United Arab Emirates',
+    type: 'hotel',
+    countryCode: '',
+    lattitude: 25.09696,
+    longitude: 55.1776
+  },
+  {
+    geoId: '2323808',
+    geoTitle: 'Hostel Dubai',
+    geoName: 'Dubai, United Arab Emirates',
+    displayName: 'Hostel Dubai, Dubai, United Arab Emirates',
+    type: 'hotel',
+    countryCode: '',
+    lattitude: 25.19179,
+    longitude: 55.26195
+  },
+  {
+    geoId: '2442649',
+    geoTitle: 'Dubai 360',
+    geoName: 'Dubai, United Arab Emirates',
+    displayName: 'Dubai 360, Dubai, United Arab Emirates',
+    type: 'hotel',
+    countryCode: '',
+    lattitude: 25.088923,
+    longitude: 55.146818
+  }
+]
+
+const RSA_PUBLIC_KEY = `-----BEGIN PUBLIC KEY-----
+MIICITANBgkqhkiG9w0BAQEFAAOCAg4AMIICCQKCAgB0rRSHGZK/FtK15IRfQxtl
+dN5ToPtfXGzTNBe1vGhow5xqp6BLubMKKPwCj3zOJiAm1Ip1VNqqYxWnaL8ZErBF
+rErtE0r7kn50QgGgJCpdrWJ4unhaoe1su207d9oY6D6OBH90v1aXA6ZjN7zTJmiq
+FJZOOTQE6t/XwNAOphq/B6Lcr1iQSQmSqaMozy4OQ4NvIzNTQn5tcs9qJBMsKFeU
+cSp8VK76JBNEqSuEHNmbV2d/IQ5XAqVUiAs34kH2xWRSbBmy0WK3c3QKGzC1MRWM
+9JauLN56TKUFOmUSjfWY3caJru6HxsiMTGKnvflXHfgA2aLAPxu72pIHoCTy5Hxj
+AUoKM7qXUn/kQj4Ci0M/0LRF4boqd37wpbyVNeXNvqm+dLjxklf/+NHMfNL2Wvb4
+ekHUVI8nMVPgswIcQ7q/Njf9DC+LA+/duf8m9JDjI3J6r9y1gQugdkLETGzF2Gj1
+ToU0Pocrg6CFHImqq2z+cOeWnURrV0f0I1UWWGCb79OZxZ5oDjM9uCLRsoe8+Npg
+ACZNf4AbnM7OUNj5TEYs6t/tUYouvTB7gH452I3EH6KWBl+ZTgCg0RFkOMazNOjn
+4J0yfbaPvpVgKzF2WRyn63mTO2tdLRl5s9uqMFhXmCs6IzEqBpxMKL1aS6ONZLDG
+5qPtpCPJnUFQEBTVlSO15QIDAQAB
+-----END PUBLIC KEY-----`
+
+const HOTEL_SEARCH_BASE_URL = 'https://hotelapihub.dev.futuretravelplatform.com'
+const HOTEL_SEARCH_PATH = '/api/v1/hotels/search-form'
+const HOTEL_SEARCH_URL = `${HOTEL_SEARCH_BASE_URL}${HOTEL_SEARCH_PATH}`
+const COUNTRY_SEARCH_BASE_URL = 'https://adminapi.dev.futuretravelplatform.com'
+const COUNTRY_SEARCH_PATH = '/api/MasterSearch/GetAllCountry/EN'
+
+const STATIC_COUNTRIES = [
+  {
+    country_code: 'KW',
+    country_name: 'Kuwait',
+    country_id: '2108231234183749619'
+  },
+  {
+    country_code: 'BH',
+    country_name: 'Bahrain',
+    country_id: '2108231234168861036'
+  },
+  {
+    country_code: 'QA',
+    country_name: 'Qatar',
+    country_id: '2108231234193188713'
+  },
+  {
+    country_code: 'OM',
+    country_name: 'Oman',
+    country_id: '2108231234191323057'
+  }
+]
+
+const mealTypeOptions = [
+  { label: 'Breakfast Only', value: 2 },
+  { label: 'Breakfast or Lunch or Dinner', value: 3 },
+  { label: 'Breakfast or Lunch and Dinner', value: 4 },
+  { label: 'All Inclusive', value: 5 },
+  { label: 'Room Only', value: 1 }
+]
+
+const childAgeOptions = [
+  { label: 'Under 1', value: 0 },
+  ...Array.from({ length: 17 }, (_, i) => ({
+    label: `${i + 1}`,
+    value: i + 1
+  }))
+]
+
+const theme = computed(() => props.config?.theme || {})
+const primaryColor = computed(() => theme.value.primary ?? '#2c0a82')
+const secondaryColor = computed(() => theme.value.secondary ?? '#2c0a82')
+const primaryLightColor = computed(() => theme.value.primaryLight ?? '#f3e2ff')
+const fontName = computed(() => props.config?.fontName)
+const redirectionDomain = computed(() => props.config?.redirectionDomain)
+
+const getInitialDates = () => {
+  const today = new Date()
+  today.setHours(0, 0, 0, 0)
+  const tomorrow = new Date(today)
+  tomorrow.setDate(today.getDate() + 1)
+  return { today, tomorrow }
+}
+
+const { today, tomorrow } = getInitialDates()
+
+const formData = ref({
+  destination: 'Destination',
+  nationality: 'Select Nationality',
+  checkIn: today,
+  checkOut: tomorrow,
+  roomsGuests: '1 Room, 2 Adult'
+})
+
+const destinationQuery = ref('')
+const nationalityQuery = ref('')
+const isDestinationDropdownOpen = ref(false)
+const isNationalityDropdownOpen = ref(false)
+const isRoomsGuestsMenuOpen = ref(false)
+
+const destinationDropdownRef = ref(null)
+const nationalityDropdownRef = ref(null)
+const roomsGuestsMenuRef = ref(null)
+const calendarRef = ref(null)
+
+const rooms = ref([{ adults: 2, children: 0, childAges: [] }])
+
+const destinationResults = ref([])
+const isDestinationLoading = ref(false)
+const countryResults = ref([])
+const isCountryLoading = ref(false)
+const selectedDestination = ref(null)
+const selectedNationality = ref(null)
+const isAroundCurrentLocation = ref(false)
+const currentLocationCoords = ref(null)
+
+const fieldErrors = ref({
+  destination: false,
+  nationality: false,
+  checkIn: false,
+  checkOut: false
+})
+
+const selectedStarRatings = ref([])
+const selectedMealTypes = ref([])
+const dateRange = ref([today, tomorrow])
+
+const filteredNationalityOptions = computed(() => {
+  return nationalityQuery.value.trim().length === 0
+    ? STATIC_COUNTRIES
+    : countryResults.value
+})
+
+const themeStyle = computed(() => {
+  const style = {
+    '--primary': primaryColor.value,
+    '--secondary': secondaryColor.value,
+    '--primary-light': primaryLightColor.value
+  }
+
+  if (fontName.value) {
+    style['--font-family'] = fontName.value
+  }
+
+  if (props.minWidth !== undefined) {
+    style.minWidth =
+      typeof props.minWidth === 'number' ? `${props.minWidth}px` : props.minWidth
+  }
+
+  return style
+})
+
+const ensureStylesInjected = () => {
+  if (typeof document === 'undefined') {
+    return
+  }
+
+  if (document.getElementById(STYLE_ELEMENT_ID)) {
+    return
+  }
+
+  const style = document.createElement('style')
+  style.id = STYLE_ELEMENT_ID
+  style.textContent = hotelSearchWidgetStyles
+  document.head.appendChild(style)
+}
+
+const ensurePrimeIconsLoaded = () => {
+  if (typeof document === 'undefined') {
+    return
+  }
+
+  if (document.getElementById(PRIMEICONS_LINK_ID)) {
+    return
+  }
+
+  const link = document.createElement('link')
+  link.id = PRIMEICONS_LINK_ID
+  link.rel = 'stylesheet'
+  link.href = 'https://unpkg.com/primeicons@7.0.0/primeicons.css'
+  document.head.appendChild(link)
+}
+
+const buildRequestToken = () => {
+  if (!redirectionDomain.value) {
+    return ''
+  }
+
+  const domainKey = `${redirectionDomain.value}~${Date.now()}`
+  const encryptor = new JSEncrypt()
+  encryptor.setPublicKey(RSA_PUBLIC_KEY)
+  return encryptor.encrypt(domainKey) || ''
+}
+
+const handleInputChange = (field, value) => {
+  formData.value[field] = value
+}
+
+const handleDestinationQueryChange = (event) => {
+  const value = event.target.value
+  destinationQuery.value = value
+  selectedDestination.value = null
+  isAroundCurrentLocation.value = false
+  currentLocationCoords.value = null
+  if (value.trim().length > 0) {
+    fieldErrors.value.destination = false
+  }
+}
+
+const handleNationalityQueryChange = (event) => {
+  const value = event.target.value
+  nationalityQuery.value = value
+  selectedNationality.value = null
+  if (value.trim().length > 0) {
+    fieldErrors.value.nationality = false
+  }
+}
+
+const handleDestinationSelect = (option) => {
+  handleInputChange('destination', option.displayName)
+  destinationQuery.value = option.displayName
+  selectedDestination.value = option
+  isAroundCurrentLocation.value = false
+  currentLocationCoords.value = null
+  isDestinationDropdownOpen.value = false
+  fieldErrors.value.destination = false
+}
+
+const handleNationalitySelect = (option) => {
+  handleInputChange('nationality', option.country_name)
+  nationalityQuery.value = option.country_name
+  selectedNationality.value = option
+  isNationalityDropdownOpen.value = false
+  fieldErrors.value.nationality = false
+}
+
+const handleAroundCurrentLocation = () => {
+  const label = 'Around Current Location'
+  handleInputChange('destination', label)
+  destinationQuery.value = label
+  selectedDestination.value = null
+  isAroundCurrentLocation.value = true
+  isDestinationDropdownOpen.value = false
+  fieldErrors.value.destination = false
+
+  if (!navigator.geolocation) {
+    currentLocationCoords.value = null
+    return
+  }
+
+  navigator.geolocation.getCurrentPosition(
+    (position) => {
+      currentLocationCoords.value = {
+        lat: position.coords.latitude,
+        lng: position.coords.longitude
+      }
+    },
+    () => {
+      currentLocationCoords.value = null
+    }
+  )
+}
+
+const handleStarRatingToggle = (rating) => {
+  if (selectedStarRatings.value.includes(rating)) {
+    selectedStarRatings.value = selectedStarRatings.value.filter(
+      (value) => value !== rating
+    )
+  } else {
+    selectedStarRatings.value = [...selectedStarRatings.value, rating].sort(
+      (a, b) => a - b
+    )
+  }
+}
+
+const handleMealTypeToggle = (mealType) => {
+  if (selectedMealTypes.value.includes(mealType)) {
+    selectedMealTypes.value = selectedMealTypes.value.filter(
+      (value) => value !== mealType
+    )
+  } else {
+    selectedMealTypes.value = [...selectedMealTypes.value, mealType]
+  }
+}
+
+const handleRemoveRoom = (roomIndex) => {
+  if (rooms.value.length <= 1) {
+    return
+  }
+  rooms.value = rooms.value.filter((_, index) => index !== roomIndex)
+}
+
+const handleAddRoom = () => {
+  if (rooms.value.length >= 6) {
+    return
+  }
+  rooms.value = [...rooms.value, { adults: 1, children: 0, childAges: [] }]
+}
+
+const resetRooms = () => {
+  rooms.value = [{ adults: 2, children: 0, childAges: [] }]
+}
+
+const incrementAdults = (index) => {
+  if (rooms.value[index].adults >= MAX_ADULTS_PER_ROOM) {
+    return
+  }
+  const newRooms = [...rooms.value]
+  newRooms[index].adults += 1
+  rooms.value = newRooms
+}
+
+const decrementAdults = (index) => {
+  const newRooms = [...rooms.value]
+  newRooms[index].adults = Math.max(1, newRooms[index].adults - 1)
+  rooms.value = newRooms
+}
+
+const incrementChildren = (index) => {
+  if (rooms.value[index].children >= 4) {
+    return
+  }
+  const newRooms = [...rooms.value]
+  newRooms[index].children += 1
+  newRooms[index].childAges = [...newRooms[index].childAges, 0]
+  rooms.value = newRooms
+}
+
+const decrementChildren = (index) => {
+  const newRooms = [...rooms.value]
+  newRooms[index].children = Math.max(0, newRooms[index].children - 1)
+  newRooms[index].childAges = newRooms[index].childAges.slice(0, -1)
+  rooms.value = newRooms
+}
+
+const updateChildAge = (roomIndex, childIndex, value) => {
+  const newRooms = [...rooms.value]
+  newRooms[roomIndex].childAges[childIndex] = value
+  rooms.value = newRooms
+}
+
+const formatDate = (date) => {
+  if (!date) {
+    return ''
+  }
+  return date.toLocaleDateString('en-GB', {
+    weekday: 'short',
+    day: '2-digit',
+    month: 'short'
+  })
+}
+
+const formatQueryDate = (date) => {
+  if (!date) {
+    return ''
+  }
+  return date.toLocaleDateString('en-GB', {
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric'
+  })
+}
+
+const handleDateRangeChange = (value) => {
+  dateRange.value = value
+  const start = value?.[0] ?? null
+  const end = value?.[1] ?? null
+  handleInputChange('checkIn', start)
+  handleInputChange('checkOut', end)
+
+  if (start && end) {
+    if (calendarRef.value) {
+      calendarRef.value.hide()
+    }
+    fieldErrors.value.checkIn = false
+    fieldErrors.value.checkOut = false
+  }
+}
+
+const showCalendar = () => {
+  if (calendarRef.value) {
+    calendarRef.value.show()
+  }
+}
+
+const validateRequiredFields = () => {
+  const destinationValid = destinationQuery.value.trim().length > 0
+  const nationalityValid = nationalityQuery.value.trim().length > 0
+  const checkInValid = !!formData.value.checkIn
+  const checkOutValid = !!formData.value.checkOut
+
+  fieldErrors.value = {
+    destination: !destinationValid,
+    nationality: !nationalityValid,
+    checkIn: !checkInValid,
+    checkOut: !checkOutValid
+  }
+
+  return destinationValid && nationalityValid && checkInValid && checkOutValid
+}
+
+const handleSearch = () => {
+  const destination = selectedDestination.value
+  const nationality = selectedNationality.value
+  const roomParams = rooms.value.map((room, index) => {
+    const parts = [room.adults, room.children, ...room.childAges]
+    return `room${index + 1}=${parts.join('-')}`
+  })
+  const latitudeValue = isAroundCurrentLocation.value
+    ? (currentLocationCoords.value?.lat?.toString() ?? '0')
+    : (destination?.lattitude?.toString() ?? '0')
+  const longitudeValue = isAroundCurrentLocation.value
+    ? (currentLocationCoords.value?.lng?.toString() ?? '0')
+    : (destination?.longitude?.toString() ?? '0')
+  const queryParams = {
+    curr: 'INR',
+    geoId: isAroundCurrentLocation.value ? '' : (destination?.geoId ?? ''),
+    Country: isAroundCurrentLocation.value ? '' : (destination?.countryCode ?? ''),
+    nationality: nationality?.country_code ?? '',
+    checkinDate: formData.value.checkIn ? formatQueryDate(formData.value.checkIn) : '',
+    checkoutDate: formData.value.checkOut ? formatQueryDate(formData.value.checkOut) : '',
+    lc: 'EN',
+    StarRatings:
+      selectedStarRatings.value.length > 0
+        ? selectedStarRatings.value.join(',')
+        : '',
+    MealTypes:
+      selectedMealTypes.value.length > 0 ? selectedMealTypes.value.join(',') : '',
+    FreeCancellation: 'false',
+    geoName: isAroundCurrentLocation.value
+      ? 'Around Current Location'
+      : (destination?.displayName ?? ''),
+    Lat: latitudeValue,
+    Long: longitudeValue,
+    is_around_current_location: isAroundCurrentLocation.value ? 'true' : 'false',
+    currtime: Date.now().toString(),
+    mgcc: '',
+    type: isAroundCurrentLocation.value ? '' : (destination?.type ?? '')
+  }
+  const encodedPairs = Object.entries(queryParams).map(
+    ([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
+  )
+  const queryString = `/hotel/result?${[...encodedPairs, ...roomParams].join('&')}`
+  console.log('Query string:', queryString)
+  if (redirectionDomain.value) {
+    const domainOnly = redirectionDomain.value
+      .replace(/^https?:\/\//i, '')
+      .split('/')[0]
+    const normalizedDomain = `https://${domainOnly}`
+    const redirectUrl = `${normalizedDomain}${queryString}`
+    window.open(redirectUrl, '_blank', 'noopener,noreferrer')
+  }
+}
+
+const handleSubmit = (e) => {
+  e.preventDefault()
+  if (!validateRequiredFields()) {
+    return
+  }
+  handleSearch()
+}
+
+// Watch for destination query changes
+let destinationSearchTimeout = null
+watch(destinationQuery, (query) => {
+  const trimmedQuery = query.trim()
+  if (trimmedQuery.length < MIN_SEARCH_CHARS) {
+    destinationResults.value = []
+    return
+  }
+
+  if (destinationSearchTimeout) {
+    clearTimeout(destinationSearchTimeout)
+  }
+
+  destinationSearchTimeout = setTimeout(async () => {
+    const controller = new AbortController()
+
+    try {
+      isDestinationLoading.value = true
+      const headers = {
+        'Content-Type': 'application/json'
+      }
+      const token = buildRequestToken()
+      if (token) {
+        headers.token = token
+      }
+
+      const response = await fetch(HOTEL_SEARCH_URL, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify({
+          searchTerm: trimmedQuery,
+          languageCode: 'EN',
+          lattitude: '',
+          longitude: ''
+        }),
+        signal: controller.signal
+      })
+
+      if (!response.ok) {
+        throw new Error('Destination search failed')
+      }
+
+      const data = await response.json()
+      destinationResults.value = data.data?.locations ?? data.locations ?? []
+    } catch (error) {
+      if (!(error instanceof DOMException && error.name === 'AbortError')) {
+        destinationResults.value = []
+      }
+    } finally {
+      isDestinationLoading.value = false
+    }
+  }, 300)
+})
+
+// Watch for nationality query changes
+let nationalitySearchTimeout = null
+watch(nationalityQuery, (query) => {
+  const trimmedQuery = query.trim()
+  if (trimmedQuery.length < MIN_SEARCH_CHARS) {
+    countryResults.value = []
+    return
+  }
+
+  if (nationalitySearchTimeout) {
+    clearTimeout(nationalitySearchTimeout)
+  }
+
+  nationalitySearchTimeout = setTimeout(async () => {
+    const controller = new AbortController()
+
+    try {
+      isCountryLoading.value = true
+      const headers = {
+        'Content-Type': 'application/json'
+      }
+      const token = buildRequestToken()
+      if (token) {
+        headers.token = token
+      }
+
+      const response = await fetch(
+        `${COUNTRY_SEARCH_BASE_URL}${COUNTRY_SEARCH_PATH}/${encodeURIComponent(trimmedQuery)}`,
+        {
+          method: 'GET',
+          headers,
+          signal: controller.signal
+        }
+      )
+
+      if (!response.ok) {
+        throw new Error('Nationality search failed')
+      }
+
+      const data = await response.json()
+      countryResults.value = data ?? []
+    } catch (error) {
+      if (!(error instanceof DOMException && error.name === 'AbortError')) {
+        countryResults.value = []
+      }
+    } finally {
+      isCountryLoading.value = false
+    }
+  }, 300)
+})
+
+// Watch for rooms changes to update display text
+watch(
+  rooms,
+  () => {
+    const totalAdults = rooms.value.reduce((sum, room) => sum + room.adults, 0)
+    const totalChildren = rooms.value.reduce((sum, room) => sum + room.children, 0)
+    const roomsText = rooms.value.length === 1 ? 'Room' : 'Rooms'
+    const adultsText = totalAdults === 1 ? 'Adult' : 'Adults'
+    const childrenText =
+      totalChildren === 0
+        ? ''
+        : totalChildren === 1
+          ? `, ${totalChildren} Child`
+          : `, ${totalChildren} Children`
+    const displayText = `${rooms.value.length} ${roomsText}, ${totalAdults} ${adultsText}${childrenText}`
+    handleInputChange('roomsGuests', displayText)
+  },
+  { deep: true }
+)
+
+// Handle click outside
+const handleClickOutside = (event) => {
+  const target = event.target
+
+  const isInsidePrimeDropdown =
+    target.closest('.p-dropdown-panel') !== null ||
+    target.closest('.p-dropdown-items-wrapper') !== null ||
+    target.closest('.p-dropdown-item') !== null ||
+    target.closest('.p-component')?.classList.contains('p-dropdown') !== false ||
+    target.closest('[data-pc-section="panel"]') !== null ||
+    target.closest('[data-pc-name="dropdown"]') !== null
+
+  if (
+    destinationDropdownRef.value &&
+    !destinationDropdownRef.value.contains(target)
+  ) {
+    isDestinationDropdownOpen.value = false
+  }
+  if (
+    nationalityDropdownRef.value &&
+    !nationalityDropdownRef.value.contains(target)
+  ) {
+    isNationalityDropdownOpen.value = false
+  }
+
+  if (
+    !isInsidePrimeDropdown &&
+    roomsGuestsMenuRef.value &&
+    !roomsGuestsMenuRef.value.contains(target)
+  ) {
+    isRoomsGuestsMenuOpen.value = false
+  }
+}
+
+onMounted(() => {
+  ensureStylesInjected()
+  ensurePrimeIconsLoaded()
+  document.addEventListener('mousedown', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mousedown', handleClickOutside)
+  if (destinationSearchTimeout) {
+    clearTimeout(destinationSearchTimeout)
+  }
+  if (nationalitySearchTimeout) {
+    clearTimeout(nationalitySearchTimeout)
+  }
+})
+</script>
+
+<style>
+/* Styles are injected via JavaScript */
+</style>