Build Folder Added

build/css/main.css

@@ -0,0 +1,69 @@
+.container {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media (min-width: 576px) {
+  .container {
+    max-width: 540px;
+  }
+}
+/* .calenderField {
+  display: block !important;
+  visibility:hidden
+} */
+@media (min-width: 768px) {
+  .container {
+    max-width: 950px;
+  }
+}
+
+@media (min-width: 992px) {
+  .container {
+    max-width: 960px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+@media (min-width: 1200px) and (max-width: 1300px) {
+  .container {
+    max-width: 1200px;
+  }
+}
+
+.toaster-card {
+  position: fixed;
+  z-index: 999999;
+  pointer-events: none;
+  top: 15px;
+  right: 15px;
+  padding: 10px 15px;
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  color: white;
+  box-shadow: 0 0 12px #999;
+  width: 300px;
+}
+
+.toaster-card img {
+  margin-right: 10px;
+}
+
+.toast-success {
+  background-color: #51a351;
+}
+
+.toast-error {
+  background-color: #bd362f;
+}
+
+.toast-warning {
+  background-color: #f89406;
+}
+

build/css/plugins/multiselect.min.css

@@ -0,0 +1,102 @@
+.selectData {
+  display: none;
+}
+
+.airlineSel {
+  font-size: 12px;
+  border-radius: 1px solid #0000ff59;
+  border-radius: 15px;
+  background: #b1c8dd;
+  padding: 3px 14px;
+}
+
+.SearchBox {
+  border: 1px solid black;
+  /* width: 300px; */
+  height: 30px;
+  cursor: pointer;
+  border-radius: 6px;
+}
+
+.SelectList {
+  display: none;
+  width: 300px;
+  position: relative;
+  overflow: auto;
+  background-color: gainsboro;
+  color: black;
+}
+
+.SelectList input {
+  width: 93%;
+  border: 1px solid #858585;
+  border-radius: 5px;
+  padding: 6px 10px;
+}
+.ShowAirline{
+  display: block !important;
+}
+
+.SelectList div {
+  position: sticky;
+  top: 0;
+  padding: 8px;
+  background-color: white;
+}
+
+.ListItem {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+.ListItem li {
+  padding: 10px;
+  background-color: #fff;
+  font-size: 14px;
+}
+.ListItem li:not(:last-child) {
+  border-bottom: 1px solid gray;
+  width: 100%;
+}
+.ListItem {
+  overflow: hidden;
+}
+.ShowAirlineList {
+  display: block !important;
+  border: 1px solid #939393;
+  border-radius: 5px;
+}
+.multiSelect {
+  position: relative;
+}
+.ShowAirlineList {
+  position: absolute;
+  top: 91.8%;
+}
+.airlinelist {
+  font-size: 13px;
+  margin: pa;
+  margin: 0px 5px;
+  background: #3f4fa2;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+  padding-left: 5px;
+  border-radius: 5px;
+  color: #fff;
+  white-space: nowrap;
+}
+.airlinelist button {
+  background: #3f4fa2;
+  border: none;
+  color: #fff;
+}
+.inputMultiSelectBox {
+  display: flex;
+  align-items: center;
+  margin-left: 20px;
+}
+.multiInp {
+  width: 300px;
+}

build/js/common.js

@@ -0,0 +1,161 @@
+// using  window for hide div
+
+window.addEventListener('mouseup', function (event) {
+  if (!event.target.matches('.TravelDropdown')) {
+    var container = document.getElementById('TravellerCount');
+    if (!container.contains(event.target)) {
+      container.classList.add('travel-content');
+    }
+  };
+  if (!event.target.matches('.dropdown-content')) {
+    var dropdowns = document.getElementsByClassName("dropdown-content");
+    var i;
+    for (i = 0; i < dropdowns.length; i++) {
+      var openDropdown = dropdowns[i];
+      if (openDropdown.classList.contains('show')) {
+        openDropdown.classList.remove('show');
+      }
+    }
+  };
+  if (!event.target.matches('.depart-content')) {
+    var dropdowns = document.getElementsByClassName("depart-content");
+    var i;
+    for (i = 0; i < dropdowns.length; i++) {
+      var openDropdown = dropdowns[i];
+
+      if (openDropdown.classList.contains('showdepart')) {
+        openDropdown.classList.remove('showdepart');
+      }
+    }
+  };
+
+  if (!event.target.matches('.tawakkal')) {
+    var dropdowns = document.getElementsByClassName("calenderField");
+    var i;
+    for (i = 0; i < dropdowns.length; i++) {
+      var openDropdown = dropdowns[i];
+      if (event.target != dropdowns && event.target.parentNode != dropdowns) {
+        if (openDropdown.classList.contains('showCalender')) {
+          openDropdown.classList.remove('showCalender');
+        }
+      }
+    }
+  };
+  if (!event.target.matches('.HotelNationality')) {
+    var dropdowns = document.getElementsByClassName("HotelNationality");
+    var i;
+    for (i = 0; i < dropdowns.length; i++) {
+      var openDropdown = dropdowns[i];
+      if (event.target != dropdowns && event.target.parentNode != dropdowns) {
+        if (!openDropdown.classList.contains('hideInput')) {
+          openDropdown.classList.add('hideInput');
+        }
+      }
+    }
+  };
+  if (!event.target.matches('.HotelDestination')) {
+    var dropdowns = document.getElementsByClassName("HotelDestination");
+    var i;
+    for (i = 0; i < dropdowns.length; i++) {
+      var openDropdown = dropdowns[i];
+      if (event.target != dropdowns && event.target.parentNode != dropdowns) {
+        if (!openDropdown.classList.contains('hideInput')) {
+          openDropdown.classList.add('hideInput');
+        }
+      }
+    }
+  };
+  if (!event.target.matches('.PrefAirline-two')) {
+    var container = document.getElementsByClassName('SelectList')[0];
+    if (!container.contains(event.target)) {
+      container.classList.remove('ShowAirlineList');
+      container.querySelector('input').value = '';
+    }
+  };
+  if (!event.target.matches('.PrefAirline-one')) {
+    var dropdowns = document.getElementsByClassName("PrefAirline-one")[0].querySelector('.SelectList');
+    if (dropdowns.classList.contains('ShowAirlineList')) {
+      dropdowns.classList.remove('ShowAirlineList');
+    }
+  };
+  if (!event.target.matches('.roomPaxDetails')) {
+    var container = document.getElementsByClassName('roomPaxDetails')[0];
+    if (!container.contains(event.target)) {
+      container.classList.remove('showRoomPax');
+    }
+  };
+});
+
+
+//  hotel and Flight tabs hide and show
+
+function openTab(cityName, elmnt) {
+
+  // CallCalendar()
+  var i, tabcontent, tablinks;
+  tabcontent = document.getElementsByClassName("tabcontent");
+  for (i = 0; i < tabcontent.length; i++) {
+    tabcontent[i].style.display = "none";
+  }
+  tablinks = document.getElementsByClassName("tablink");
+  for (i = 0; i < tablinks.length; i++) {
+    tablinks[i].style.backgroundColor = "";
+  }
+  document.getElementById(elmnt).style.display = "block";
+  //   elmnt.style.backgroundColor = color;
+  document.getElementById("flight_button").classList.remove('active');
+  document.getElementById("hotel_button").classList.remove('active')
+  document.getElementById(cityName).classList.add('active');
+  document.getElementById('target').classList.remove('d-none');
+  document.getElementById(elmnt).classList.remove('d-none');
+  document.querySelector('.mobileName').innerHTML = elmnt;
+
+
+}
+document.getElementById("flight_button").click();
+
+//  flight all tabs hide and show 
+
+(function () {
+  var d = document,
+    tabs = d.querySelector('.SearchTripTypeTabs'),
+    tab = d.querySelectorAll('li'),
+    contents = d.querySelectorAll('.content');
+  tabs.addEventListener('click', function (e) {
+    if (e.target && e.target.nodeName === 'LI') {
+      // change tabs
+      for (var i = 0; i < tab.length; i++) {
+        tab[i].classList.remove('active1');
+      }
+      e.target.classList.toggle('active1');
+
+
+      for (i = 0; i < contents.length; i++) {
+        contents[i].classList.remove('active1');
+      }
+      var tabId = '#' + e.target.dataset.tabId;
+      d.querySelector(tabId).classList.toggle('active1');
+    }
+  });
+})();
+
+function closeALLTab(elem) {
+  document.getElementById('target').classList.add('d-none')
+  document.getElementById('hotel_button').classList.remove('active')
+  document.getElementById('flight_button').classList.remove('active')
+  console.log(elem)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+

build/js/flight/flight.js

@@ -0,0 +1,748 @@
+let airportlist = [];
+let TravellerDetails = {
+    classType: 'Economy',
+    Adult: 1,
+    child: 0,
+    Infant: 0,
+};
+PaxCount('', '');
+bindMultiCityFrom();
+bindMultiCityFrom();
+GetAirportList(undefined, null);
+let AdvanceShowBtn = false
+let advancedSerch = true;
+// 
+
+
+async function GetAirportList(element, check) {
+    let inpVal = check ? element.value ? element.value : 'BOM' : 'BOM';
+    if (inpVal.length >= 3) {
+        const response = await fetch("https://adminapi.uat.futuretravelplatform.com/api/MasterSearch/GetAllMasterSearch/en/" + inpVal, {
+            method: 'GET',
+            headers: { 'Content-Type': 'application/json', 'OrgId': '2206040706597097092' }
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+        airportlist = await data;
+        autobind(element, check, airportlist);
+
+    }
+
+};
+
+function autobind(element, check, obj) {
+    check ? check == '0' ? element.closest(".searchBox").querySelector(".dropdown-content").classList.add('show') : element.closest(".searchBox").querySelector(".depart-content").classList.add('showdepart') : '';
+    let html = '';
+    let airlist = obj ? obj : airportlist;
+    airlist.map(e => {
+        html += ` <li class="dropdown-item" onclick="ApplyAirport(this)"  data-city-name=${e.ct} data-airport-name=${e.an} data-airport-code=${e.ac} 
+          data-country-code = ${e.cc}>
+                      <div class="autoCompleteIcon">
+                        <svg focusable="false" color="inherit" fill="currentcolor" aria-hidden="true"
+                          role="presentation" viewBox="0 0 150 150" preserveAspectRatio="xMidYMid meet"
+                          width="24px" height="24px" class="sc-bxivhb dttlRz sc-jxGEyO iICATY">
+                          <path
+                            d="M118.9 15.7L90.7 43.9l-80.9-25c-1.6-.4-3.3 0-4.6 1.1L.7 24.5c-.9.8-.9 2.1-.2 3 .2.2.4.3.6.4l65.2 40.4-24 24c-3.8 3.7-7.2 7.8-10.2 12.2l-18.2-5c-1.6-.4-3.3.1-4.6 1.2l-3.5 3.5c-1 .8-1 2.3-.2 3.3l.4.4 18.6 13.9.6.5-.2.5c-1.8 3.7-1.2 4.3 2.5 2.5l.5-.2c.2.2.3.4.5.6l13.9 18.6c.7 1 2.2 1.3 3.2.6.1-.1.3-.2.4-.3l3.5-3.5c1.1-1.3 1.6-3 1.2-4.6l-5-18.2c4.4-3 8.5-6.4 12.2-10.2l24-24 40.1 64.7c.6 1 1.8 1.4 2.8.8.2-.1.4-.3.6-.4l4.5-4.5c1.1-1.2 1.5-3 1.1-4.6l-24.9-80.3 28.4-28.4C150 15.9 152 4.9 148.7 1.6S134.4.2 118.9 15.7z">
+                          </path>
+                        </svg>
+                      </div>
+                      <div class="ListTypeCity">
+                        <span> ${e.ct}</span>
+                        <span>
+                          ${e.an}
+                        </span>
+                      </div>
+                      <span class="airportCode">${e.ac}</span>
+                    </li>`
+    });
+    element ? element.closest(".searchBox").querySelector(".dropdown-wrapper").innerHTML = html : '';
+}
+
+
+function ApplyAirport(element) {
+    let city_name = element.getAttribute("data-city-name");
+    let code = element.getAttribute("data-airport-code");
+    element.closest(".search-border").querySelector('input').value = city_name;
+    element.closest(".search-border").querySelector('input').setAttribute("data-airport-code", code);
+    let container = element.closest(".search-border").querySelector('input')
+    if (!container.classList.contains('Origin')) {
+        let nextform = element.closest('.MultiForm') ? element.closest('.MultiForm').nextElementSibling : '';
+        if (nextform) {
+            if (nextform.querySelector('.Origin')) {
+                nextform.querySelector('.Origin').value = city_name
+                nextform.querySelector('.Origin').setAttribute("data-airport-code", code)
+            };
+        };
+    }
+};
+
+//
+
+
+
+
+
+
+
+// advancedField()
+function advancedField(elem) {
+    console.log('asd')
+    console.log(elem)
+    elem.querySelector('.expand-less').classList.add('d-none');
+    elem.querySelector('.expand-more').classList.add('d-none');
+    if (advancedSerch) {
+        advancedSerch = false;
+        elem.closest('div').querySelector(".expander_more").classList.remove('d-none');
+        elem.querySelector('.expand-less').classList.remove('d-none');
+    } else {
+        advancedSerch = true;
+        elem.closest('div').querySelector(".expander_more").classList.add('d-none');
+        elem.querySelector('.expand-more').classList.remove('d-none');
+    }
+};
+
+
+
+function PaxCount(pax, btn_name) {
+    let Adul_num = parseInt(document.getElementById("adult").value);
+    let child_Num = parseInt(document.getElementById("child").value);
+    let Infant_child = parseInt(document.getElementById("infant").value);
+    let adult_minus_btn = document.getElementsByClassName("adult_minus_btn")[0];
+    let adult_plus_btn = document.getElementsByClassName("adult_plus_btn")[0];
+    let child_plus_btn = document.getElementsByClassName("child_plus_btn")[0];
+    let child_minus_btn = document.getElementsByClassName("child_minus_btn")[0];
+    let infant_plus_btn = document.getElementsByClassName("infant_plus_btn")[0];
+    let infant_minus_btn = document.getElementsByClassName("infant_minus_btn")[0];
+    if (btn_name == 'add') {
+        if (pax == "adult" || pax == "child") {
+            if (Adul_num + child_Num < 9) {
+                document.getElementById(pax).value = parseInt(document.getElementById(pax).value) + 1
+                Adul_num = parseInt(document.getElementById('adult').value);
+                child_Num = parseInt(document.getElementById('child').value);
+            }
+        }
+        if (pax == "infant") {
+            if (Infant_child < Adul_num) {
+                document.getElementById(pax).value = parseInt(document.getElementById(pax).value) + 1
+                Infant_child = parseInt(document.getElementById(pax).value);
+            }
+        }
+    } else {
+        if (pax == "adult") {
+            if (Adul_num > 1) {
+                document.getElementById(pax).value = parseInt(document.getElementById(pax).value) - 1
+                Adul_num--;
+            }
+            if (Infant_child > Adul_num) {
+                if (btn_name == 'remove') {
+                    document.getElementById('infant').value = Infant_child - 1;
+                    Infant_child--
+                }
+            }
+        } else if (pax == "child") {
+            if (child_Num > 0) {
+                document.getElementById(pax).value = parseInt(document.getElementById(pax).value) - 1;
+                child_Num--;
+            }
+        } else if (pax == "infant") {
+            if (Infant_child > 0) {
+                document.getElementById(pax).value = parseInt(document.getElementById(pax).value) - 1;
+                Infant_child = parseInt(document.getElementById(pax).value);
+            }
+        }
+    }
+    Adul_num == 1 ? adult_minus_btn.classList.add("disableBtn") : adult_minus_btn.classList.remove("disableBtn");
+    child_Num == 0 ? child_minus_btn.classList.add('disableBtn') : child_minus_btn.classList.remove('disableBtn');
+    Infant_child == 0 ? infant_minus_btn.classList.add("disableBtn") : infant_minus_btn.classList.remove("disableBtn");
+    if (Adul_num + child_Num == 9) {
+        adult_plus_btn.classList.add('disableBtn');
+        child_plus_btn.classList.add("disableBtn");
+    } else {
+        adult_plus_btn.classList.remove('disableBtn');
+        child_plus_btn.classList.remove("disableBtn");
+    }
+    if (Infant_child == Adul_num) infant_plus_btn.classList.add("disableBtn")
+    else infant_plus_btn.classList.remove('disableBtn');
+
+
+    let travel_no1 = Adul_num + (child_Num + Infant_child);
+    let paxSearch = document.getElementsByClassName('TravelerClassCount')
+    for (let i = 0; i < paxSearch.length; i++) {
+        paxSearch[i].innerHTML = `
+    <h4>${travel_no1} Traveller</h4> 
+    <h4>${TravellerDetails.classType}</h4>`
+    };
+    TravellerDetails.Adult = Adul_num;
+    TravellerDetails.child = child_Num;
+    TravellerDetails.Infant = Infant_child;
+
+
+};
+
+function ClassType(Btn, name) {
+    document.querySelectorAll('.classBtn').forEach(box => box.classList.remove('classTypeBorder'));
+    Btn.classList.add('classTypeBorder');
+    TravellerDetails.classType = name;
+    PaxCount('', '');
+};
+
+//  traveller div show and hide
+
+function ShowPaxCounter() {
+    document.getElementById('TravellerCount').classList.remove('travel-content');
+    document.getElementById('TravellerCount').classList.remove('d-none')
+
+}
+
+function ApplyTraveller() {
+    document.getElementById('TravellerCount').classList.add('travel-content');
+}
+
+
+
+
+
+///  multi city  
+
+function bindMultiCityFrom() {
+    var searchList = document.querySelectorAll(".MultiForm");
+    let html = ''
+    if (searchList.length < 6) {
+        let RemoveHtml = `<div class="closeMulticityCard" onclick='removeMultiCityForm(this)' >
+        <span class="material-icons" > close </span>
+            </div>
+         </div> `
+        html = `<div class="MCToFromDate MultiForm">
+    <div class="multiCityBody">
+      <div class="multiCityRemove">
+        <div class="multiCityFlightText">Flight 1</div>
+      </div>
+      <div class="order2">
+        <div class="toFromSearchWrapper">
+          <div class="toFromSearchOrigin search-border">
+            <label for="" class="toOrigin">
+              <div class="toOriginIcon">
+                <span class="material-icons">
+                  flight</span>
+              </div>
+              <div class="toOriginContent">
+                <h4>From</h4>
+                <div class="searchBox">
+                  <input class="Origin " autocomplete="off" onclick="autobind(this , '0' ,null)"
+                  onkeyup="GetAirportList(this , '0')"  type="text" data-airport-code="" placeholder="Origin"
+                    />
+                  <div id="myDropdown" class="dropdown-content">
+                    <div>
+                      <div class="mobileBack">
+                        <div class="mobileHead">
+                          <button class="mobileBackButton toggle">
+                            <span class="material-icons">
+                              arrow_back
+                            </span>
+                          </button>
+                          <div class="mobileTitle">
+                            <h4>Search destination</h4>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="mobileSearchInput">
+                        <input type="text" autocomplete="off" class="mobileSearch"
+                          placeholder="Search Where Are You Flying" />
+                        <span class="material-icons">
+                          search
+                        </span>
+                      </div>
+                    </div>
+
+                    <div class="toOriginPopular">
+                      <h4>TOP ORIGINS</h4>
+                    </div>
+                    <ul class="dropdown-wrapper">
+                    
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </label>
+          </div>
+          <div class="toFromSearchSweep" onclick="ExchangeValue(this)">
+            <span class="material-icons"> sync_alt </span>
+          </div>
+          <div class="toFromSearchDepart search-border">
+            <label class="toDepart" for="">
+              <div class="toDepartIcon">
+                <span class="material-icons">
+                  flight</span>
+              </div>
+              <div class="ToDepartContent searchBox">
+                <h4>To</h4>
+                <div>
+                  <input class="depart" autocomplete="off" onclick="autobind(this , '1' ,null)"
+                  onkeyup="GetAirportList(this , '1')" data-airport-code=""   type="text"
+                    placeholder="Destination" />
+                  <div id="departDropDown" class="depart-content">
+                    <div>
+                      <div class="mobileBack">
+                        <div class="mobileHead">
+                          <button class="mobileBackButton toggle">
+                            <span class="material-icons">
+                              arrow_back
+                            </span>
+                          </button>
+                          <div class="mobileTitle">
+                            <h4>Search destination</h4>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="mobileSearchInput">
+                        <input type="text" autocomplete="off" class="mobileSearch"
+                          placeholder="Search Where Are You Flying" />
+                        <span class="material-icons">
+                          search
+                        </span>
+                      </div>
+                    </div>
+                    <div class="toDepartPopular">
+                      <h4>TOP ORIGINS</h4>
+                    </div>
+                    <ul class="dropdown-wrapper">
+                     
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </label>
+          </div>
+        </div>
+      </div>
+      <div class="order3">
+        <div class="searchDate">
+          <label for="calenderForm" class="searchDateForm">
+            <div class="searchDateFormIcon">
+              <span class="material-icons">event_note</span>
+            </div>
+            <div class="searchDateFormHead">
+              <h4 class="searchDateFormHeadText">
+                Departure
+              </h4>
+              <input type="text" id="MultiCity-${searchList.length + 1}" />
+            </div>
+          </label>
+        </div>
+      </div>
+    </div> 
+    ${searchList.length >= 2 ? RemoveHtml : ''}
+ `
+        document.getElementById('multiCityForm').insertAdjacentHTML("beforebegin", html);
+        var searchList = document.querySelectorAll(".MultiForm");
+        let index = searchList.length == 2 ? 1 : searchList.length - 1
+        let date = searchList.length == 1 ? new Date : document.getElementById(`MultiCity-${+ (index)}`).value
+        console.log(date)
+        caleran("#MultiCity-" + (searchList.length), {
+            singleDate: true,
+            calendarCount: 1,
+            showHeader: false,
+            showFooter: false,
+            autoCloseOnSelect: true,
+            format: 'DD MMM YYYY',
+            minDate: date,
+            onafterselect: function (instance, start, end) {
+                CheckMultiDate(start, searchList.length)
+            }
+
+        });
+    }
+    if (searchList.length >= 5) document.getElementById("addMultiCityForm").style.visibility = 'hidden';
+
+};
+
+function CheckMultiDate(Date, index) {
+    var searchList = document.querySelectorAll(".MultiForm")
+    console.log(searchList)
+    for (let i = index; i < searchList.length; i++) {
+        caleran("#MultiCity-" + (i + 1), {
+            singleDate: true,
+            calendarCount: 1,
+            showHeader: false,
+            showFooter: false,
+            autoCloseOnSelect: true,
+            format: 'DD MMM YYYY',
+            minDate: Date._d,
+            onafterselect: function (instance, start, end) {
+                CheckMultiDate(start, (index + 1))
+            }
+        });
+
+    };
+};
+
+
+
+function removeMultiCityForm(elem) {
+    elem.closest(".MultiForm").remove();
+    document.getElementById("addMultiCityForm").style.visibility = 'visible';
+
+};
+
+let tripKey = 'IRT';
+function ChangeTab(type) {
+    tripKey = type;
+}
+
+
+
+
+function hideToaster(element) {
+    setTimeout(function () {
+        element.classList.add('d-none');
+        element.querySelector('span').innerHTML = '';
+    }, 1500);
+}
+
+
+
+/// drop down
+
+async function GetAirlineList(inp) {
+    console.log(inp.value)
+    let html = ''
+    if (inp.value.length >= 2) {
+        const response = await fetch("https://adminapi.uat.futuretravelplatform.com/api/MasterSearch/GetAllAirline/en/" + inp.value, {
+            method: 'GET',
+            headers: { 'Content-Type': 'application/json', 'OrgId': '2206040706597097092' }
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+        //  = await data;
+        data.map(e => {
+            html += ` <li class="ListOfAirline" data-airline-code='${e.airline_code}'>${e.airline_name} </li>`
+        })
+
+        console.log(data)
+        inp.closest('div').querySelector('.PrefferedAirline').innerHTML = html;
+    };
+    inp.closest('div').querySelector('.PrefferedAirline').classList.remove('aiplineDropdown');
+}
+
+function ExchangeValue(elmnt) {
+    let element = elmnt.closest('.toFromSearchWrapper');
+    let From = element.querySelector('.Origin');
+    let To = element.querySelector('.depart');
+    var from1 = From.value;
+    var form2 = From.getAttribute('data-airport-code');
+    element.querySelector('.Origin').value = To.value;
+    element.querySelector('.Origin').setAttribute('data-airport-code', To.getAttribute('data-airport-code'));
+    element.querySelector('.depart').value = from1;
+    element.querySelector('.depart').setAttribute('data-airport-code', form2);
+}
+//  caleran js  for calender
+
+caleran("#OW_Calender", {
+    singleDate: true,
+    calendarCount: 1,
+    showHeader: false,
+    showFooter: false,
+    autoCloseOnSelect: true,
+    format: 'DD MMM YYYY',
+    minDate: new Date,
+
+});
+
+
+var startDate, endDate, startInstance, endInstance;
+var fillInputs = function () {
+    startInstance.elem.value = startDate ? startDate.locale(startInstance.config.format).format('DD MMM YYYY') : "";
+    endInstance.elem.value = endDate ? endDate.locale(endInstance.config.format).format('DD MMM YYYY') : "";
+};
+document.querySelector("#flightStart").value = moment().format('DD MMM YYYY');
+document.querySelector("#flightEnd").value = moment().format('DD MMM YYYY');
+caleran("#flightStart", {
+    startEmpty: document.querySelector("#flightStart").value === "",
+    startDate: document.querySelector("#flightStart").value,
+    endDate: document.querySelector("#flightEnd").value,
+    enableKeyboard: false,
+    minDate: new Date,
+    oninit: function (instance) {
+        startInstance = instance;
+        if (!instance.config.startEmpty && instance.config.startDate) {
+            instance.elem.value = instance.config.startDate.locale(instance.config.format).format('DD MMM YYYY');
+            startDate = instance.config.startDate.clone();
+        }
+
+    },
+    onbeforeshow: function (instance) {
+        if (startDate) {
+            startInstance.config.startDate = startDate;
+            endInstance.config.startDate = startDate;
+        }
+        if (endDate) {
+            startInstance.config.endDate = endDate.clone();
+            endInstance.config.endDate = endDate.clone();
+        }
+        fillInputs();
+        instance.updateHeader();
+        instance.reDrawCells();
+    },
+    onfirstselect: function (instance, start) {
+        startDate = start.clone();
+        startInstance.globals.startSelected = false;
+        startInstance.hideDropdown();
+        endInstance.showDropdown();
+        endInstance.config.minDate = startDate.clone();
+        endInstance.config.startDate = startDate.clone();
+        endInstance.config.endDate = null;
+        endInstance.globals.startSelected = true;
+        endInstance.globals.endSelected = false;
+        endInstance.globals.firstValueSelected = true;
+        endInstance.setDisplayDate(start);
+        if (endDate && startDate.isAfter(endDate)) {
+            endInstance.globals.endDate = endDate.clone();
+        }
+        endInstance.updateHeader();
+        endInstance.reDrawCells();
+        fillInputs();
+    }
+});
+caleran("#flightEnd", {
+    startEmpty: document.querySelector("#flightEnd").value === "",
+    startDate: document.querySelector("#flightStart").value,
+    endDate: document.querySelector("#flightEnd").value,
+    enableKeyboard: false,
+    autoCloseOnSelect: true,
+    minDate: new Date,
+    oninit: function (instance) {
+        endInstance = instance;
+        if (!instance.config.startEmpty && instance.config.endDate) {
+            instance.elem.value = (instance.config.endDate.locale(instance.config.format).format('DD MMM YYYY'));
+            endDate = instance.config.endDate.clone();
+        }
+    },
+    onbeforeshow: function (instance) {
+        if (startDate) {
+            startInstance.config.startDate = startDate;
+            endInstance.config.startDate = startDate;
+        }
+        if (endDate) {
+            startInstance.config.endDate = endDate.clone();
+            endInstance.config.endDate = endDate.clone();
+        }
+        fillInputs();
+        instance.updateHeader();
+        instance.reDrawCells();
+    },
+    onafterselect: function (instance, start, end) {
+        startDate = start.clone();
+        endDate = end.clone();
+        endInstance.hideDropdown();
+        startInstance.config.endDate = endDate.clone();
+        startInstance.globals.firstValueSelected = true;
+        fillInputs();
+        endInstance.globals.startSelected = true;
+        endInstance.globals.endSelected = false;
+
+    }
+});
+
+// Flight Search query string
+
+function Searchflight(elem) {
+    let checkValidation = true;
+
+    let main_div = elem.closest('.CommonSearch');
+    let airlinelist = document.querySelectorAll(".airlinelist");
+    let airline_code = [];
+    if (airlinelist.length != 0) {
+        airlinelist.forEach(e => {
+            airline_code.push(e.getAttribute('data-airline-code'));
+        });
+    }
+    var querystring = {
+        "adult": TravellerDetails.Adult,
+        "child": TravellerDetails.child,
+        "infant": TravellerDetails.Infant,
+        "langcode": "EN",
+        "ref": document.getElementById('Refundable').checked,
+        "direct": document.getElementById('DirectFlights').checked,
+        "key": tripKey,
+        "triptype": CheckTriptype(tripKey),
+        'curr': 'AED',
+        "airlines": airline_code.length != 0 ? airline_code.join(',') : '',
+    }
+
+    let cl = checkClassType()
+    let origin = main_div.querySelector('.Origin').getAttribute("data-airport-code");
+    let depart = main_div.querySelector('.depart').getAttribute("data-airport-code");
+    if (tripKey == 'OW' || tripKey == 'IRT') {
+        let list = tripKey == 'OW' ? 1 : 2
+        for (let i = 0; i < list; i++) {
+            let start = tripKey == 'OW' ? document.getElementById('OW_Calender').value : document.getElementById('flightStart').value
+            if (!validator(origin, depart)) {
+                checkValidation = false
+            }
+            let end = document.getElementById('flightEnd').value
+            querystring[`dep${i + 1}`] = i == 0 ? origin : depart;
+            querystring[`ret${i + 1}`] = i == 0 ? depart : origin;
+            querystring[`cl${i + 1}`] = cl;
+            querystring[`dtt${i + 1}`] = tripKey == 'OW' ? moment(start).format('DD-MMM-YYYY') : i == 0 ? moment(start).format('DD-MMM-YYYY') : moment(end).format('DD-MMM-YYYY');
+        }
+    } else if (tripKey == 'NMC') {
+        var searchList = main_div.querySelectorAll(".MultiForm");
+        searchList.forEach((e, i) => {
+            let Origin = e.getElementsByClassName('Origin')[0].getAttribute("data-airport-code");
+            let depart = e.getElementsByClassName('depart')[0].getAttribute("data-airport-code");
+            if (!validator(Origin, depart)) {
+                checkValidation = false
+            }
+            querystring[`dep${i + 1}`] = Origin;
+            querystring[`ret${i + 1}`] = depart;
+            querystring[`dtt${i + 1}`] = moment(e.querySelector(`#MultiCity-${i + 1}`).value).format('DD-MMM-YYYY'); //  changes
+            querystring[`cl${i + 1}`] = cl;
+        })
+    }
+    if (!checkValidation) {
+        return
+    }
+    sessionStorage.setItem('SerachReqQueryObj', JSON.stringify(querystring));
+    const urlParams = new URLSearchParams(window.location.search);
+    var query = Object.keys(querystring).map(key => key + '=' + querystring[key]).join('&');
+    window.location.href = 'https://travel.neuholidays.com/Flight/search?' + query;
+}
+
+
+//  validation
+
+function validator(origin, depart) {
+    let element = document.getElementsByClassName('toast-warning')[0]
+    if (origin == depart) {
+        element.classList.remove('d-none')
+        element.querySelector('span').innerHTML = 'Departure must be different from arrival'
+        hideToaster(element)
+        return false
+    } if (!origin || !depart) {
+        element.classList.remove('d-none')
+        element.querySelector('span').innerHTML = 'Please enter departure and arrival city or airport'
+        hideToaster(element)
+        return false
+    } else return true
+};
+
+//  common  function
+
+function CheckTriptype(tripKey) {
+    if (tripKey == 'NMC') {
+        return '3'
+    } else if (tripKey == 'IRT') {
+        return '2'
+    } else if (tripKey == 'OW') {
+        return '1'
+    }
+};
+
+function checkClassType() {
+    if (TravellerDetails.classType == 'FirstClass') {
+        return 'F'
+    } else if (TravellerDetails.classType == 'BusinessClass') {
+        return 'C'
+    } else if (TravellerDetails.classType == 'PremiumEconomy') {
+        return 'W'
+    } else if (TravellerDetails.classType == 'Economy') {
+        return 'Y'
+    }
+}
+
+
+/// multi selector
+
+function Close(e) {
+    e.closest('.multiSelect').querySelector(".SelectList").classList.remove("ShowAirlineList");
+    e.closest("span").remove();
+    let check = document.querySelectorAll(".airlinelist");
+    if (check.length == 0) {
+        e.closest('.multiSelect').querySelector(".SearchBox").classList.add('multiInp')
+    }
+}
+function showAirlineList(elem) {
+    elem.closest('.multiSelect').querySelector(".SelectList").classList.add("ShowAirlineList");
+    elem.closest('.multiSelect').querySelector("input").focus();
+}
+function bindAirLine(airlinelist, elem) {
+    let html = "";
+    airlinelist.map((e, i) => {
+        html += ` <li class="option ${i == 0 ? 'selectAirline' : ''}" onclick="AddAirline(this)" data-airline-code='${e.airline_code}' data-airline-name='${e.airline_name}'>(${e.airline_code}) ${e.airline_name}  </li>`
+    })
+    elem.closest('.SelectList').querySelector('.ListItem').innerHTML = html;
+}
+
+async function GetAirlineDetails(elem) {
+    let key = window.event
+    let list = document.getElementsByClassName('selectAirline') ? document.getElementsByClassName('selectAirline')[0] : '';
+    if (list) {
+        if (key.keyCode == 38) {
+            console.log('low')
+            var prev = list.previousElementSibling;
+            if (prev) {
+                list.classList.remove("selectAirline");
+                prev.classList.add("selectAirline");
+            }
+        } else if (key.keyCode == 40) {
+            console.log('high')
+            var next = list.nextElementSibling;
+            if (next) {
+                list.classList.remove("selectAirline");
+                next.classList.add("selectAirline");
+            };
+        };
+    };
+    let val = elem.value;
+    if (val.length >= 2 && !(key.keyCode == 38) && !(key.keyCode == 40)) {
+        const response = await fetch("https://adminapi.uat.futuretravelplatform.com/api/MasterSearch/GetAllAirline/en/" + val, {
+            method: 'GET',
+            headers: { 'Content-Type': 'application/json', 'OrgId': '2206040706597097092' }
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+        let obj = await data;
+        obj ? bindAirLine(obj, elem) : ''
+    }
+    if (key.keyCode == 13) {
+        AddAirline(document.getElementsByClassName('selectAirline')[0])
+    }
+
+};
+
+function AddAirline(val) {
+    let check = document.querySelectorAll(".airlinelist");
+    if (check.length <= 2) {
+        let code = val.getAttribute("data-airline-code");
+        let name = val.getAttribute("data-airline-name");
+        let html = ` <span class='airlinelist' data-airline-code="${code}"> (${code}) ${name}
+      <button onclick="Close(this)">x</button>
+    </span>`;
+        val.closest('.multiSelect').querySelector(".SearchBox").insertAdjacentHTML("beforeend", html);
+        let maindiv = val.closest('.multiSelect').querySelector('input')
+        val.closest('.multiSelect').querySelector("input").value = '';
+        val.closest('div').classList.remove("ShowAirlineList");
+        val.closest('.multiSelect').querySelector(".SearchBox").classList.remove('multiInp');
+        val.remove();
+        bindAirLine([], maindiv);
+    }
+
+};
+
+
+function resetAllPaxCounter() {
+    document.getElementById("infant").value = 0;
+    document.getElementById("child").value = 0;
+    document.getElementById("adult").value = 1;
+    TravellerDetails.Adult = 1;
+    TravellerDetails.child = 0;
+    TravellerDetails.Infant = 0;
+    ClassType(document.getElementsByClassName('EconomyClass')[0] , 'Economy');
+
+};

build/js/hotel/hotel.js

@@ -0,0 +1,514 @@
+
+function roomCount() {
+    document.getElementById("roomPax").classList.add("showRoomPax");
+}
+
+function addmore_rooms() {
+    var rooms = document.querySelectorAll(".HotelNoRoomWrapper");
+    html = "";
+    let RemoveHtml = `
+        <div class="closeRoomCard" onclick="RemoveRoom(this)">
+        <span class="material-icons"> close </span>
+        </div>  `
+
+    if (rooms.length < 6) {
+        html = `<div class="HotelNoRoomWrapper">
+      <div class="HotelNoRoomTitle">
+        <span class="material-icons"> local_hotel </span>
+        <h4 class="Rooms_no">Room ${rooms.length + 1}</h4>
+      </div>
+      <div class="HotelNoRoomCount AdultPax">
+        <div class="HotelTravelerSteps">
+          <button  class="opacity" onclick="AddAdultPax(this , false)">
+            <span class="material-icons"> remove </span>
+          </button>
+          <input type="text" value="1" autocomplete="off"  readonly />
+          <button  onclick="AddAdultPax(this , true)">
+            <span class="material-icons"> add </span>
+          </button>
+        </div>
+      </div>
+      <div class="HotelNoRoomCount ChildPax">
+        <div class="HotelTravelerSteps">
+          <button class="opacity" onclick="AddChildPax(this , false)">
+            <span class="material-icons"> remove </span>
+          </button>
+          <input type="text" value="0" autocomplete="off" readonly />
+          <button   onclick="AddChildPax(this , true)">
+            <span class="material-icons"> add </span>
+          </button>
+        </div>
+      </div>
+      <div class="HotelNoageChild">
+        
+      </div>
+      ${rooms.length != 0 ? RemoveHtml : ''}
+    </div> `
+    }
+    if (rooms.length >= 5) document.getElementById('MoreOption').querySelector('.addMoreTravller').classList.add("HotelPaxSelectOption");
+    document.getElementById('MoreOption').querySelector('.addMoreTravller').insertAdjacentHTML("beforebegin", html)
+    TravellerCounter('');
+}
+addmore_rooms();
+
+
+function RemoveRoom(elem) {
+    elem.closest(".HotelNoRoomWrapper").remove();
+    let allRoom = document.querySelectorAll(".HotelNoRoomWrapper")
+    allRoom.forEach((e, i) => {
+        e.querySelector('.Rooms_no').innerHTML = `Room ${i + 1} `
+    });
+    TravellerCounter('');
+    document.getElementById('MoreOption').querySelector('.addMoreTravller').classList.remove("HotelPaxSelectOption");
+};
+
+
+function AddChildPax(elem, check) {
+
+    if (check) {
+        if (elem.previousElementSibling.value <= 3) {
+            elem.previousElementSibling.value++
+            elem.previousElementSibling.previousElementSibling.disabled = false
+            elem.previousElementSibling.previousElementSibling.style.opacity = '1'
+            children_number(elem, check, elem.previousElementSibling.value)
+            TravellerCounter('');
+        } if (elem.previousElementSibling.value == 4) {
+            elem.disabled = true;
+            elem.style.opacity = '0.6';
+        }
+    } else {
+        if (elem.nextElementSibling.value >= 1) {
+            elem.nextElementSibling.nextElementSibling.disabled = false;
+            elem.nextElementSibling.nextElementSibling.style.opacity = '1';
+            elem.nextElementSibling.value--;
+            children_number(elem, check, elem.nextElementSibling.value);
+            TravellerCounter('');
+        } if (elem.nextElementSibling.value == 0) {
+            elem.disabled = true;
+            elem.style.opacity = '0.6';
+        }
+    }
+    if (true) {
+        if (document.querySelector('.child_1')) {
+            document.querySelector('.Child-one').classList.remove('d-none');;
+        } else document.querySelector('.Child-one').classList.add('d-none');
+        if (document.querySelector('.child_2')) {
+            document.querySelector('.Child-two').classList.remove('d-none');
+        } else document.querySelector('.Child-two').classList.add('d-none');
+        if (document.querySelector('.child_3')) {
+            document.querySelector('.Child-three').classList.remove('d-none');
+        } else document.querySelector('.Child-three').classList.add('d-none');
+        if (document.querySelector('.child_4')) {
+            document.querySelector('.Child-four').classList.remove('d-none');
+        } else document.querySelector('.Child-four').classList.add('d-none');
+    }
+};
+function AddAdultPax(elem, check) {
+
+    if (check) {
+        if (elem.previousElementSibling.value <= 5) {
+            elem.previousElementSibling.value++;
+            elem.previousElementSibling.previousElementSibling.disabled = false;
+            elem.previousElementSibling.previousElementSibling.style.opacity = '1';
+            TravellerCounter('');
+        } if (elem.previousElementSibling.value == 6) {
+
+            elem.disabled = true;
+            elem.style.opacity = '0.6';
+        }
+    } else {
+        if (elem.nextElementSibling.value >= 2) {
+            elem.nextElementSibling.value--;
+            elem.nextElementSibling.nextElementSibling.disabled = false;
+            elem.nextElementSibling.nextElementSibling.style.opacity = '1';
+            TravellerCounter('');
+        } if (elem.nextElementSibling.value == 1) {
+            elem.disabled = true;
+            elem.style.opacity = '0.6';
+        }
+    }
+};
+
+
+
+
+function apply_people(elem) {
+    if (elem) {
+        TravellerCounter(elem.getAttribute('data-room'))
+        document.getElementById("roomPax").classList.remove("showRoomPax");
+        if (elem.getAttribute('data-room') == "addmore") {
+            document.getElementById("MoreOption").classList.remove("moreOptionWrapper")
+        } else document.getElementById("MoreOption").classList.add("moreOptionWrapper")
+    }
+};
+
+
+var RoomDetails = []
+function TravellerCounter(optionType) {
+    console.log(RoomDetails)
+    let searchRooms = [];
+    let totalRooms = "";
+
+    if (optionType === "1Room2Adult") {
+        let array_age = [];
+        let data = {
+            "adult": "2",
+            "child": "0",
+            "childAge": array_age
+        }
+        searchRooms.push(data);
+        totalRooms = "1";
+    } else if (optionType === "1Room1Adult") {
+        let array_age = [];
+        let data = {
+            "adult": "1",
+            "child": "0",
+            "childAge": array_age
+        }
+        totalRooms = "1";
+        searchRooms.push(data);
+    } else {
+        let roomElem = [...document.querySelector('#MoreOption').querySelectorAll('.HotelNoRoomWrapper')];
+        let roomData = roomElem.map(e => {
+            let adultVal = e.querySelector('.AdultPax').querySelector('input').value;
+            let childVal = e.querySelector('.ChildPax').querySelector('input').value;
+            let html = e.querySelector('.HotelNoageChild').querySelectorAll('.HotelNoageSelect');
+            let array_age = [...html].map(elem => elem.querySelector('.select_control').value);
+            return {
+                'adult': adultVal,
+                'child': childVal,
+                'childAge': array_age
+            }
+        });
+        searchRooms = [...roomData];
+        totalRooms = searchRooms.length;
+    }
+    RoomDetails = searchRooms;
+    getRoomsInfo(searchRooms);
+}
+TravellerCounter('1Room2Adult')
+
+function getRoomsInfo(rooms) {
+    let roomsInfo = rooms.reduce((acc, elem) =>
+    (
+        {
+            Adult: parseInt(acc.Adult) + parseInt(elem.adult),
+            Child: parseInt(acc.Child) + parseInt(elem.child)
+        })
+        , ({ Adult: 0, Child: 0 }));
+    roomsInfo['Rooms'] = rooms.length;
+    console.log(roomsInfo)
+    document.getElementById('RoomCount').value = `${rooms.length} Room, ${roomsInfo.Adult} Adult ${roomsInfo.Child > 0 ? ', ' + roomsInfo.Child + ' Child' : ''}`;
+}
+
+
+// child count
+
+function children_number(elem, check, index) {
+    let html = "";
+    console.log(index)
+    if (check) {
+        html += ` <div class="HotelNoageSelect child_${index}">
+      <select class="select_control" onchange="TravellerCounter('')">
+        <option value="1">Under 1</option>
+        <option value="2">2 </option>
+        <option value="3">3</option>
+        <option value="4">4</option>
+        <option value="5">5</option>
+        <option value="6">6</option>
+        <option value="7">7</option>
+        <option value="8">8</option>
+        <option value="9">9</option>
+        <option value="10">10</option>
+        <option value="11">11</option>
+      </select>
+    </div> 
+    `;
+        elem.closest(".HotelNoRoomWrapper").querySelector(".HotelNoageChild").insertAdjacentHTML("beforeend", html)
+    } else {
+        let elemet = elem.closest(".HotelNoRoomWrapper").querySelectorAll(".HotelNoageSelect");
+        let ind =
+            elemet.length - 1
+        elemet[ind].remove();
+    }
+    TravellerCounter('');
+};
+
+
+//  hote api 
+
+let HotelList = [];
+let NationalityList = [];
+getBindHotelList()
+async function getBindHotelList(inp) {
+    const response = await fetch("https://adminapi.uat.futuretravelplatform.com/api/CityMaster/GetSelectedCity?cityCode=39942,12568,41325,38997,33324&LangCode=EN", {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json', 'OrgId': '2206040706597097092' }
+    });
+    if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const data = await response.json();
+    HotelList = data
+    console.log(data)
+
+}
+//  onkeyup
+
+async function GethotelList(Input) {
+    if (Input.value.length >= 2) {
+        const response = await fetch("https://hotelapi.uat.futuretravelplatform.com/api/hotel/location?searchKey=" + Input.value + "&langCode=EN", {
+            method: 'GET',
+            headers: { 'Content-Type': 'application/json', 'OrgId': '2206040706597097092' }
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+        HotelList = data
+        autoHotelListbind(Input)
+        console.log(data)
+    }
+}
+
+//  bind hotel list
+
+function ShowHotelList(element) {
+    element.closest(".HotelSearchDestination").querySelector(".hideInput") ? element.closest(".HotelSearchDestination").querySelector(".hideInput").classList.remove('hideInput') : ''
+    autoHotelListbind(element)
+}
+function autoHotelListbind(element) {
+    let html = '';
+    HotelList.map(e => {
+        html += `
+       <div class="HotelSearchOtionContent" onclick="ApplyHotelCity(this)">
+         <span class="material-icons"> location_on </span>
+         <a data-countryCode="${e.countryCode}" data-cityCode="${e.cityCode}" data-city_Id="${e.city_Id}"  data-cityName="${e.cityName}"  data-displayName="${e.displayName}"> ${e.displayName}</a>
+      </div>`
+    });
+    element.closest(".HotelSearchDestination").querySelector(".HotelList").innerHTML = html;
+}
+
+function ApplyHotelCity(elem) {
+    console.log(elem)
+    let countryCode = elem.querySelector('a').getAttribute('data-countryCode');
+    let cityCode = elem.querySelector('a').getAttribute('data-cityCode');
+    let city_Id = elem.querySelector('a').getAttribute('data-city_Id');
+    let displayName = elem.querySelector('a').getAttribute('data-displayName');
+
+    let input = document.getElementById('FromHotel');
+    input.value = displayName;
+    input.setAttribute("data-countryCode", countryCode);
+    input.setAttribute("data-cityCode", cityCode);
+    input.setAttribute("data-city_Id", city_Id);
+
+    elem.closest('.HotelDestination').classList.add('hideInput');
+};
+
+
+
+
+
+
+///  nationality list bind 
+
+function showNationality(elem) {
+    elem.closest('.HotelSearchFormNationality').querySelector('.HotelNationality').classList.remove('hideInput');
+    autonationalityListbind(elem);
+}
+
+getBindNationalityList()
+async function getBindNationalityList() {
+    const response = await fetch("https://adminapi.uat.futuretravelplatform.com/api/CountryMaster/GetSelectedCountry/EN/MA,TN,NG,EG,AE,SA,BH,QA,KW,OM", {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json', 'OrgId': '2206040706597097092' }
+    });
+    if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const data = await response.json();
+    NationalityList = data
+}
+
+async function GetNationalityList(Input) {
+    if (Input.value) {
+        const response = await fetch("https://adminapi.uat.futuretravelplatform.com/api/MasterSearch/GetAllCountry/EN/" + Input.value, {
+            method: 'GET',
+            headers: { 'Content-Type': 'application/json', 'OrgId': '2206040706597097092' }
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+        NationalityList = data
+        autonationalityListbind(Input)
+    }
+}
+
+function autonationalityListbind(elem) {
+    let html = '';
+    NationalityList.map(e => {
+        html += `
+       <div class="HotelSearchOtionContent" onclick="ApplyNationality(this)">
+         <span class="material-icons"> location_on </span>
+         <a data-countryCode="${e.country_code}" data-countryName="${e.country_name}" > ${e.country_name}</a>
+      </div>`
+    });
+    elem.closest('.HotelSearchFormNationality').querySelector('.NationalityList').innerHTML = html;
+}
+
+function ApplyNationality(elem) {
+    let citycode = elem.querySelector('a').getAttribute('data-countryCode');
+    let countryName = elem.querySelector('a').getAttribute('data-countryName');
+    document.getElementById('FromNationality').value = countryName;
+    document.getElementById('FromNationality').setAttribute('data-countryCode', citycode);
+    elem.closest('.HotelNationality').classList.add('hideInput');
+}
+
+//  caleran js for calender
+
+
+var startDate, endDate, HotelStartInstance, HotelEndInstance;
+var HotelFillInputs = function () {
+    HotelStartInstance.elem.value = startDate ? startDate.locale(HotelStartInstance.config.format).format('DD MMM YYYY') : "";
+    HotelEndInstance.elem.value = endDate ? endDate.locale(HotelEndInstance.config.format).format('DD MMM YYYY') : "";
+};
+document.querySelector("#hotelStart").value = moment().format('DD MMM YYYY');
+document.querySelector("#hotelEnd").value = moment().format('DD MMM YYYY');
+caleran("#hotelStart", {
+    startEmpty: document.querySelector("#hotelStart").value === "",
+    startDate: document.querySelector("#hotelStart").value,
+    endDate: document.querySelector("#hotelEnd").value,
+    enableKeyboard: false,
+    minDate: new Date,
+    oninit: function (instance) {
+        HotelStartInstance = instance;
+        if (!instance.config.startEmpty && instance.config.startDate) {
+            instance.elem.value = instance.config.startDate.locale(instance.config.format).format('DD MMM YYYY');
+            startDate = instance.config.startDate.clone();
+        }
+    },
+    onbeforeshow: function (instance) {
+        if (startDate) {
+            HotelStartInstance.config.startDate = startDate;
+            HotelEndInstance.config.startDate = startDate;
+        }
+        if (endDate) {
+            HotelStartInstance.config.endDate = endDate.clone();
+            HotelEndInstance.config.endDate = endDate.clone();
+        }
+        HotelFillInputs();
+        instance.updateHeader();
+        instance.reDrawCells();
+    },
+    onfirstselect: function (instance, start) {
+        startDate = start.clone();
+        HotelStartInstance.globals.startSelected = false;
+        HotelStartInstance.hideDropdown();
+        HotelEndInstance.showDropdown();
+        HotelEndInstance.config.minDate = startDate.clone();
+        HotelEndInstance.config.startDate = startDate.clone();
+        HotelEndInstance.config.endDate = null;
+        HotelEndInstance.globals.startSelected = true;
+        HotelEndInstance.globals.endSelected = false;
+        HotelEndInstance.globals.firstValueSelected = true;
+        HotelEndInstance.setDisplayDate(start);
+        if (endDate && startDate.isAfter(endDate)) {
+            HotelEndInstance.globals.endDate = endDate.clone();
+        }
+        HotelEndInstance.updateHeader();
+        HotelEndInstance.reDrawCells();
+        HotelFillInputs();
+    }
+
+});
+caleran("#hotelEnd", {
+    startEmpty: document.querySelector("#hotelEnd").value === "",
+    startDate: document.querySelector("#hotelStart").value,
+    endDate: document.querySelector("#hotelEnd").value,
+    enableKeyboard: false,
+    autoCloseOnSelect: true,
+    minDate: new Date,
+    oninit: function (instance) {
+        HotelEndInstance = instance;
+        if (!instance.config.startEmpty && instance.config.endDate) {
+            instance.elem.value = (instance.config.endDate.locale(instance.config.format).format('DD MMM YYYY'));
+            endDate = instance.config.endDate.clone();
+        }
+        calcNumberOfNights(startDate, endDate)
+    },
+    onbeforeshow: function (instance) {
+        if (startDate) {
+            HotelStartInstance.config.startDate = startDate;
+            HotelEndInstance.config.startDate = startDate;
+        }
+        if (endDate) {
+            HotelStartInstance.config.endDate = endDate.clone();
+            HotelEndInstance.config.endDate = endDate.clone();
+        }
+        HotelFillInputs();
+        instance.updateHeader();
+        instance.reDrawCells();
+    },
+    onafterselect: function (instance, start, end) {
+        startDate = start.clone();
+        endDate = end.clone();
+        HotelEndInstance.hideDropdown();
+        HotelStartInstance.config.endDate = endDate.clone();
+        HotelStartInstance.globals.firstValueSelected = true;
+        HotelFillInputs();
+        HotelEndInstance.globals.startSelected = true;
+        HotelEndInstance.globals.endSelected = false;
+        calcNumberOfNights(startDate, endDate)
+
+    }
+});
+
+
+// hotel search query string 
+
+function searchHotel() {
+    let hotelDetails = document.getElementById('FromHotel')
+    let Nationality = document.getElementById('FromNationality').getAttribute('data-countryCode')
+    let element = document.getElementsByClassName('toast-warning')[0]
+    if (!hotelDetails) {
+        element.classList.remove('d-none')
+        element.querySelector('span').innerHTML = 'Please enter destination city'
+        hideToaster(element)
+        return
+    }
+    if (!Nationality) {
+        element.classList.remove('d-none')
+        element.querySelector('span').innerHTML = 'Please select nationality'
+        hideToaster(element)
+        return
+    }
+    let queryParams = {};
+    queryParams['CityCode'] = hotelDetails.getAttribute('data-cityCode');
+    queryParams['CityId'] = hotelDetails.getAttribute('data-city_Id');
+    queryParams['Country'] = hotelDetails.getAttribute('data-countryCode');
+    queryParams['nationality'] = Nationality;
+    queryParams['langCode'] = 'EN';
+    queryParams['checkinDate'] = moment(document.getElementById('hotelStart').value).format('DD-MMM-YYYY');
+    queryParams['checkoutDate'] = moment(document.getElementById('hotelEnd').value).format('DD-MMM-YYYY');
+
+    RoomDetails.map((e, i) => {
+        let room = []
+        room.push(parseInt(e.adult))
+        room.push(parseInt(e.child))
+        room.push(...e.childAge.map(no => parseInt(no)))
+        let roomdetails = room.join('-')
+        console.log(roomdetails)
+        queryParams[`room${i + 1}`] = roomdetails
+    })
+    // sessionStorage.setItem('SerachReqQueryObj', JSON.stringify(querystring));
+    const urlParams = new URLSearchParams(window.location.search);
+    var query = Object.keys(queryParams).map(key => key + '=' + queryParams[key]).join('&');
+    window.location.href = 'https://travel.neuholidays.com/hotel/result?' + query;
+
+};
+
+function calcNumberOfNights(checkInDate, checkOutDate) {
+    let night = moment(checkOutDate).diff(checkInDate, 'days');
+    document.getElementsByClassName('nightCountgBox')[0].querySelector('.nightNum').innerHTML = night;
+};