title = "Search results"
url = "/search"
layout = "default"
is_hidden = 0

==

<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href="/themes/ketikidis-octobercms-success/assets/css/t-datepicker.min.css" rel="stylesheet" type="text/css">
<link href="/themes/ketikidis-octobercms-success/assets/css/t-datepicker-blue.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script>

        function getHtls(){
        //     var country = ( $('#packages-country').val() === null ) ? $("select#packages-country option").map(function() {return $(this).val();}).get() : $('#packages-country').val();
        //     //var startdate   = ( $('.t-input-check-in').val() === 'null' ) ? (new Date().toISOString().slice(0, 10)) : $('.t-input-check-in').val();
            
        //     var today = new Date();
        //     var tomorrow = new Date(today);
        //     tomorrow.setDate(tomorrow.getDate() + 1);
            
        //     //var enddate     = ( $('.t-input-check-out').val() === 'null' ) ? new Date(tomorrow).toISOString().slice(0, 10) : $('.t-input-check-out').val();
            
        //     //momment js implementation to bypass the 1969 date
        //     var start = $('#checkinrange').text().trim().split('-')[0];
        //     var end = $('#checkinrange').text().trim().split('-')[1];
            
        //     var startdate = moment(start, 'MMMM DD, YYYY').format('YYYY-MM-DD');
        //     var enddate = moment(end, 'MMMM DD, YYYY').format('YYYY-MM-DD');
            
        //     // console.log('start', startdate);
        //     // console.log('enddate', enddate);
            
        //     var adults      = parseInt($('#adults').val());
        //     var kids        = parseInt($('#kids').val());
        //     var roomsConfig = [];
        //     var configs     = {"adults":{"value": adults},"kids":{"value": 0},"kidAges":{}};
        //   // configs = encodeURIComponent(JSON.stringify(configs));
        //     roomsConfig.push(configs);
        //     var roomsConfig = JSON.stringify(roomsConfig);
        //     var bookFrom = new Date(startdate).getTime();
        //     var bookTo = new Date(enddate).getTime();
            
        //     // console.log('bookF', bookFrom);
        //     // console.log('bookT', bookTo);
            
        //     window.location.href = '/search?&country='+country+'&roomsConfig=' + roomsConfig+'&bookFrom='+bookFrom+'&bookTo='+bookTo+'&display-mod=cards-grid';
         var country = ( $('#packages-country').val() === null ) ? $("select#packages-country option").map(function() {return $(this).val();}).get() : $('#packages-country').val();
             
            // var startdate = $('.t-input-check-in').val();
            // var enddate = $('.t-input-check-out').val();
            //var startdate   = ( $('.t-input-check-in').val() === 'null' ) ? new Date().toISOString().slice(0, 10) : $('.t-input-check-in').val();
            
            var today = new Date();
            var tomorrow = new Date(today);
            tomorrow.setDate(tomorrow.getDate() + 1);
            
            //var enddate     = ( $('.t-input-check-out').val() === 'null' ) ? new Date(tomorrow).toISOString().slice(0, 10) : $('.t-input-check-out').val();
            
            
            //momment js implementation to bypass the 1969 date
            var start = $('#checkinrange').text().trim().split('-')[0];
            var end = $('#checkinrange').text().trim().split('-')[1];
            
            // console.log('start', start);
            // console.log('enddate', end);
            
            var startdate = moment(start, 'MMMM DD, YYYY').format('YYYY-MM-DD');
            var enddate = moment(end, 'MMMM DD, YYYY').format('YYYY-MM-DD');
            
            // console.log('start', startdate);
            // console.log('enddate', enddate);
            
            var adults = parseInt($('#adults').val());
            var kids = parseInt($('#kids').val());
            var roomsConfig = [];
            var configs = {"adults":{"value": adults},"kids":{"value": 0},"kidAges":{}};
           // configs = encodeURIComponent(JSON.stringify(configs));
            roomsConfig.push(configs);
            var roomsConfig = JSON.stringify(roomsConfig);
            var bookFrom = new Date(startdate).getTime();
            var bookTo = new Date(enddate).getTime();
            
            // console.log('bookF', bookFrom);
            // console.log('bookT', bookTo);
            window.location.href = '/search?&country='+country+'&roomsConfig=' + roomsConfig+'&bookFrom='+bookFrom+'&bookTo='+bookTo+'&display-mod=cards-grid';
            
    }
</script>
<style type="text/css">
    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
    }

    .price-range .ui-slider-range {
        background-image: initial;
        background-position-x: initial;
        background-position-y: initial;
        background-size: initial;
        background-repeat-x: initial;
        background-repeat-y: initial;
        background-attachment: initial;
        background-origin: initial;
        background-clip: initial;
        background-color: rgb(20, 159, 229);
    }

    .price-range.ui-slider .ui-slider-handle {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
        border-bottom-left-radius: 12px;
    }
    .listing-result li:nth-child(2):after, .listing-result li:nth-child(3):after{
    display: none;
}
    .price-range .ui-state-default,
    .price-range.ui-widget-content .ui-state-default {
        background-color: rgb(0, 0, 0);
        border-top-width: initial;
        border-right-width: initial;
        border-bottom-width: initial;
        border-left-width: initial;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
        border-top-color: initial;
        border-right-color: initial;
        border-bottom-color: initial;
        border-left-color: initial;
        border-image-source: initial;
        border-image-slice: initial;
        border-image-width: initial;
        border-image-outset: initial;
        border-image-repeat: initial;
    }

    .search-n-book .search-now {
        text-align: center;
        background-color: rgb(20, 159, 229);
        border-top-width: initial;
        border-right-width: initial;
        border-bottom-width: initial;
        border-left-width: initial;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
        border-top-color: initial;
        border-right-color: initial;
        border-bottom-color: initial;
        border-left-color: initial;
        border-image-source: initial;
        border-image-slice: initial;
        border-image-width: initial;
        border-image-outset: initial;
        border-image-repeat: initial;
        color: rgb(255, 255, 255);
        text-transform: uppercase;
        padding-top: 10px;
        padding-right: 48px;
        padding-bottom: 10px;
        padding-left: 48px;
        font-size: 20px;
        font-weight: 700;
        margin-top: 24px;
        width: 100%;
    }

    .search-n-book {
        background-image: url("");
        background-size: cover;
        max-width: 900px;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
    }

    .search-n-book-title {
        text-transform: uppercase;
        text-align: center;
        font-size: 40px;
        font-weight: lighter;
    }

    .search-n-book-title b {
        display: block;
        color: rgb(20, 159, 229);
        font-weight: bold;
    }

    .search-n-book-form [name="destination"]::before {
        content: "";
        background-image: url("/plugins/razzzila/travel/assets/images/grey-map-point.svg");
    }

    .search-n-book-form .search-n-book-form-row {
        padding-left: 48px;
        height: 62px;
        text-align: left;
        border-bottom-width: 2px;
        border-bottom-style: solid;
        border-bottom-color: rgb(238, 238, 238);
        line-height: 62px;
    }

    .search-n-book-form .search-n-book-form-row input,
    .search-n-book-form .search-n-book-form-row select {
        border-top-width: initial;
        border-right-width: initial;
        border-bottom-width: initial;
        border-left-width: initial;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
        border-top-color: initial;
        border-right-color: initial;
        border-bottom-color: initial;
        border-left-color: initial;
        border-image-source: initial;
        border-image-slice: initial;
        border-image-width: initial;
        border-image-outset: initial;
        border-image-repeat: initial;
        background-color: transparent;
        width: 100%;
        font-size: 21px;
        font-weight: 300;
    }

    .search-n-book-form .search-n-book-form-row select {
        color: rgb(52, 52, 52);
    }

    .search-n-book-form .search-n-book-form-row select:disabled {
        color: rgb(125, 125, 125);
</style>
<style>
    .modal-impulse-buynumber-input {
        width: 56px;
        height: 48px;
       background: #ececec;
        opacity: 1;
        border: transparent;
        text-align: center;
    }

    .number {
        margin: 10px;
    }

    .kidsminus {
        width: 60px;
        height: 60px;
        background: #ececec;
        border-radius: 4px 0px 0px 4px;
        opacity: 1;
        border: 1px solid #ddd;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        top: 50%;
    }

    .kidsplus {
        width: 60px;
        height: 60px;
        background: #ececec;
        border-radius: 0px 4px 4px 0px;
        opacity: 1;
        border: 1px solid #ddd;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        top: 50%;
    }
        .kidageminus{
       width: 60px;
    height: 60px;
			 background: #ececec;
      border-radius: 4px 0px 0px 4px;
opacity: 1;
			border:1px solid #ddd;
      display: inline-block;
      vertical-align: middle;
      text-align: center;
  top: 50%; 
    }
    .kidagesplus{
        width: 60px;
    height: 60px;
 background: #ececec;
border-radius: 0px 4px 4px 0px;
opacity: 1;
			border:1px solid #ddd;
      display: inline-block;
      vertical-align: middle;
      text-align: center;
  top: 50%;
    }

    .minus {
        width: 60px;
        height: 60px;
         background: #ececec;
        border-radius: 4px 0px 0px 4px;
        opacity: 1;
        border: 1px solid #ddd;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        top: 50%;
    }

    .plus {
        width: 60px;
        height: 60px;
         background: #ececec;
        border-radius: 0px 4px 4px 0px;
        opacity: 1;
        border: 1px solid #ddd;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        top: 50%;
    }

    select option {
        margin: 40px;
        background: #D3D3D3;
        color: #000;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    }
     #packages-country + [data-select2-id^="select2-data"]{
        margin-top: -12px;
    }
    
    #packages-country + [data-select2-id^="select2-data"] .select2-selection.select2-selection--multiple {
        border: none;
        padding-bottom: 0px;
    }
    
    #packages-country + [data-select2-id^="select2-data"] .select2-search__field{
        height: 30px;
    }
    .drp-buttons .btn.applyBtn {
        background-color: #007bff !important;
    }
</style>
<div class="search-n-book">
    <h2 class="search-n-book-title">
        <b>Search & Book</b>
        <span>LET'S START PLANNING</span>
    </h2>
    <form class="search-n-book-form" id="search-n-book-form" action="javascript:;" onsubmit="getHtls(this.form)">
        <div>
            <div class="search-n-book-form-row">
                <!--<select id="packages-country" name="country" style="width: 100%;border-color: transparent;">-->
                <select id="packages-country" class="input-select-multiple" name="country[]" style="width: 100%;border-color: transparent;" multiple="multiple">
                    <!--<option value="0" selected="selected">Where would you like to go</option>-->
                    <option value="23">Anguilla</option>
                    <option value="24">Antigua and Barbuda</option>
                    <option value="34">Aruba</option>
                    <option value="33">Bahamas</option>
                    <option value="21">Barbados</option>
                    <option value="32">Curaçao</option>
                    <option value="22">Dominica</option>
                    <option value="20">Grenada</option>
                    <option value="28">Jamaica</option>
                    <option value="27">Montserrat</option>
                    <option value="19">Saint Lucia</option>
                    <option value="29">St Kitts and Nevie</option>
                    <option value="18">St Vincent</option>
                    <option value="30">Trinidad</option>
                    <option value="25">Virgin Islands British</option>
                    <option value="26">Virgin Islands US</option>
                </select>
            </div>
            <div class="search-n-book-form-row">
                <div class="checkinout">
                    <!--<div class="t-datepicker">-->
                    <!--    <div class="t-check-in" style="padding-top: 20px;">-->
                    <!--        <div class="t-dates t-date-check-in">➜<label class="t-date-info-title"></label><span-->
                    <!--                class="t-day-check-in"> 02</span><span class="t-month-check-in"> Feb </span><span-->
                    <!--                class="t-year-check-in"> 2021</span></div><input type="hidden"-->
                    <!--            class="t-input-check-in" value="" name="bookFrom">-->
                    <!--    </div>-->
                    <!--    <div class="t-check-out" style="padding-top: 20px;">-->
                    <!--        <div class="t-dates t-date-check-out">➜<label class="t-date-info-title"></label><span-->
                    <!--                class="t-day-check-out"> 28</span><span class="t-month-check-out"> Feb </span><span-->
                    <!--                class="t-year-check-out"> 2021</span></div><input type="hidden"-->
                    <!--            class="t-input-check-out" value="" name="bookTo">-->
                    <!--    </div>-->
                    <!--</div>-->
                    
                        <div id="checkinrange">
                            <i class="fa fa-calendar"></i>&nbsp;
                            <span></span> <i class="fa fa-caret-down"></i>
                        </div>
                </div>
            </div>
            <div class="search-n-book-form-row">
                <div style="display: flex; gap: 15%;">
                    <div class="modal-impulse-buynumber" style="display: flex; width: 200px;">
                        <label style="margin-right: 10px;">Adults</label>
                        <span class="minus">
                            <p style="color : black;">-</p>
                        </span>
                        <input class="modal-impulse-buynumber-input" type="text" value="1" id="adults" />
                        <span class="plus">
                            <p style="color : black;">+</p>
                        </span>
                    </div>
                    <div class="modal-impulse-buynumber" style="display: flex; width: 200px;">
                        <label style="margin-right: 10px;">Kids</label>
                        <span class="kidsminus">
                            <p style="color : black;">-</p>
                        </span>
                        <input class="modal-impulse-buynumber-input" id="kids" type="text" value="0" />
                        <span class="kidsplus">
                            <p style="color : black;">+</p>
                        </span>
                    </div>
                    <!---->
                </div>
            </div>
            <div id="booking"></div>
            <div class="search-n-book-form-row" id="kids-ages-div">
            <div id="kids-ages" style="display: flex; gap: 15%;">
            </div>
            </div>
             <button class="search-now" id="search-now">
                SEARCH NOW
            </button>
        </div>
    </form>
    <br><br>
</div>
<div class="content-container" id="search-div"> <div id="app"></div> </div>
<script src="/themes/ketikidis-octobercms-success/assets/js/t-datepicker.min.js"></script>

<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
    
    
       $(function() {
    
    var urlParams = new URLSearchParams(window.location.search);
    var start = Number(urlParams.get('bookFrom'));
    var end   = Number(urlParams.get('bookTo'));
    
    // var start = moment().subtract(0, 'days');
    // var end = moment().add(1, 'month');

    function cb(start, end) {
        $('#checkinrange span').html( moment(start).format('MMMM D, YYYY') + ' - ' + moment(end).format('MMMM D, YYYY'));
    }

    $('#checkinrange').daterangepicker({
        startDate: moment(start),
        endDate: moment(end),
        // ranges: {
        //   'Today': [moment(), moment()],
        //   'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        //   'Last 7 Days': [moment().subtract(6, 'days'), moment()],
        //   'Last 30 Days': [moment().subtract(29, 'days'), moment()],
        //   'This Month': [moment().startOf('month'), moment().endOf('month')],
        //   'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        // }
    }, cb);

    cb(start, end);

});
    
    
    // Call global the function
function formatDate(sdate){
var today = new Date(sdate);
var dd = today.getDate();

var mm = today.getMonth()+1; 
var yyyy = today.getFullYear();
if(dd<10) 
{
    dd='0'+dd;
} 

if(mm<10) 
{
    mm='0'+mm;
} 
today = yyyy+'-'+mm+'-'+dd;
//console.log(today);
return today;
}
    var urlParams = new URLSearchParams(window.location.search);
    if(urlParams){
       $('html, body').animate({
        scrollTop: $("#search-div").offset().top
    }, 2000);
    }
    var start = Number(urlParams.get('bookFrom'));
    var end = Number(urlParams.get('bookTo'));
    var country = urlParams.get('country');
   if(start === 0 || end === 0){
       start = new Date();
       end = new Date();
     var bookfrom = formatDate(start);
    var bookto = formatDate(end);
     $("#packages-country").val("18").change();
   }
   else{
    var bookfrom = formatDate(start);
    var bookto = formatDate(end);
     $("#packages-country").val(country).change();
    //console.log(bookfrom + ' ' + bookto);
   }
    // $('.t-datepicker').tDatePicker({
    //   // options here
    //   dateCheckIn : bookfrom,
    //   dateCheckOut: bookto
    // });
    $('.kidageminus').click(function () {
			   alert("here");
			});
			$('.kidagesplus').click(function () {
			    alert('here');
			});
function createChildAgeDiv(count){
      $('#kids-ages-div').show();
      if(count == 3){
          var kidsdiv = '<div class="search-n-book-form-row" id="kids-ages-div-3"><div id="kids-ages'+count+'" style="display: flex; gap: 13%;"></div></div>';
          $('#booking').append(kidsdiv);
         var kidsage = '<div class="modal-impulse-buynumber" id="kidsage'+count+'" style="display : flex; width: 200px;"><label style="padding-right: 20px;">Age'+count+'</label><span class="kidageminus"><p style="color: black;">-</p></span><input class="modal-impulse-buynumber-input" type="number" value="1"><span class="kidagesplus"><p style="color: black;">+</p></span></div>';
      $('#kids-ages3').append(kidsage);
      }
      if(count == 4){
         var kidsage = '<div class="modal-impulse-buynumber" id="kidsage'+count+'" style="display : flex; width: 200px;"><label style="padding-right: 20px;">Age'+count+'</label><span class="kidageminus"><p style="color: black;">-</p></span><input class="modal-impulse-buynumber-input" type="number" value="1"><span class="kidagesplus"><p style="color: black;">+</p></span></div>';
      $('#kids-ages3').append(kidsage);
      }
      if(count > 4){
           $("#kids.modal-impulse-buynumber-input").val(4);
          alert("Maximum number of Kids is 4");
      }
      else if(count < 3){
      //based on count, add or remove age field
      var kidsage = '<div class="modal-impulse-buynumber" id="kidsage'+count+'" style="display : flex; width: 200px;"><label style="padding-right: 20px;">Age'+count+'</label><span class="kidageminus"><p style="color: black;">-</p></span><input class="modal-impulse-buynumber-input" type="number" value="1"><span class="kidagesplus"><p style="color: black;">+</p></span></div>';
      $('#kids-ages').append(kidsage);
      }
      
  }
function removeChildAgeDiv(count){
    if(count == 0){
        $('#kids-ages-div').hide();
    }
    if(count < 3){
        $('#kids-ages-div-3').remove();
    }
    var countdivtoremove = count + 1;
      //based on count, add or remove age field
      var divclass = "#kidsage"+countdivtoremove;
      //console.log(divclass);

      $(divclass).remove();
 }
  $(document).ready(function() {
      $('#kids-ages-div').hide();
			$('.minus').click(function () {
				var $input = $(this).parent().find('input');
				var count = parseInt($input.val()) - 1;
				count = count < 1 ? 1 : count;
				$input.val(count);
				$input.change();
				return false;
			});
			$('.plus').click(function () {
				var $input = jQuery(this).parent().find('input');
				$input.val(parseInt($input.val()) + 1);
				$input.change();
				return false;
			});
			
		    $('.kidsminus').click(function () {
				var $input = $(this).parent().find('input');
				var count = parseInt($input.val()) - 1;
				count = count < 0 ? 0 : count;
				$input.val(count);
				$input.change();
				removeChildAgeDiv(count);
				return false;

			});
			$('.kidsplus').click(function () {
				var $input = jQuery(this).parent().find('input');
				var count = parseInt($input.val()) + 1;
				$input.val(count);
				$input.change();
				createChildAgeDiv(count);
				return false;
			});
		});
		
});
</script>
<script>
let url = window.location.href;
var arr = url.split('?');
const queryString = window.location.search;
console.log(arr);
if (url.length > 1 && arr[1] !== '' && arr[1]) {
}
else{
  var x = document.getElementById("search-div");
  x.style.display = "none";
}  
</script>
<script>
    window.caribbeanListing = {
        baseUrl: '/webapi/v1/hotel-search',
        urlAlias: '/hotel/',
        favoriteType: 'hotel',
        showRoomsConfigurator: true,
        filtersBlackList: ['adults', 'kids'],
        mapApiKey: 'AIzaSyAoUo-gAEfbSoxEJ-oWxoc47yArTi09ZCc'
    };
</script>
<script src="/themes/ketikidis-octobercms-success/assets/js/dist/listing.js"></script>

<style>
    .destination-near-li li {
        text-align: left;
    }
    .destination-near{
        display: none !important;
    }
</style>