title = "Packages Search"
url = "/packages-search"
layout = "default"
is_hidden = 0

[siteSearchInclude]
==
<style type="text/css">* { box-sizing: border-box; } body {margin: 0;}
*{box-sizing:border-box;}
body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}
.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;}
.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-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);}
#packages-country{width:100%;border-color:transparent;}
#iwx58{padding-top:20px;}
#iswa5{padding-top:20px;}
#iw6z2{display:flex;gap:15%;}
#ieqkf{display:flex;width:200px;}
#i7qpk{margin-right:10px;}
#i2le2{color:black;}
#adultsdiv{text-align:center;}
#ifghl{color:black;}
#ia1dg{display:flex;width:200px;}
#ipuxa{margin-right:10px;}
#ixcqk{color:black;}
#iyipg{color:black;}
#kids-ages{display:flex;gap:13%;}
select option {color:#000;}
</style>
<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"/>
<style>
#i4m9{background-image:url("storage/app/media/page-headers/package_page.jpg") !important;background-repeat-x:no-repeat !important;background-repeat-y:no-repeat !important;background-attachment:initial !important;background-origin:initial !important;background-clip:initial !important;background-color:initial !important;background-position-x:50% !important;background-position-y:50% !important;background-size:cover !important;margin-bottom: 1.8em;}
.fl-slide-text >h3{text-shadow: -1px 1px 4px black;}
</style>  

<div id="i4m9" class="inner-banner">
    <div class="fl-slide-text">
        <h3>Search Packages</h3>
    </div>
</div> 
<div class="search-n-book">
    <h2 class="search-n-book-title">
        <b>Search & Book</b>
        <span>FIND YOUR PERFECT PACKAGE</span>
    </h2>
    <form id="search-n-book-form" class="search-n-book-form">
        <div>
            <div class="search-n-book-form-row">
                <select id="packages-country" name="country">
                    <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" id="iwx58">
                            <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" value="2021-02-02" name="t-start" class="t-input-check-in"/>
                        </div>
                        <div class="t-check-out" id="iswa5">
                            <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" value="2021-02-28" name="t-end" class="t-input-check-out"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="search-n-book-form-row">
                <div id="iw6z2">
                    <div class="modal-impulse-buynumber" id="ieqkf">
                        <label id="i7qpk">Adults</label>
                        <span class="minus">
                            <p id="i2le2">-</p>
                        </span>
                        <input id="adultsdiv" type="text" value="1"/>
                        <span class="plus">
                            <p id="ifghl">+</p>
                        </span>
                    </div>
                    <div class="modal-impulse-buynumber" id="ia1dg">
                        <label id="ipuxa">Kids</label>
                        <span class="kidsminus">
                            <p id="ixcqk">-</p>
                        </span>
                        <input type="text" id="kids" value="0" class="modal-impulse-buynumber-input"/>
                        <span class="kidsplus">
                            <p id="iyipg">+</p>
                        </span>
                    </div>
                    <!---->
                </div>
            </div>
            <div id="kids-ages-div" class="search-n-book-form-row">
                <div id="kids-ages"></div>
            </div>
            <div id="booking"></div>
            <button id="search-now" class="search-now">
                SEARCH NOW
            </button>
        </div>
    </form>
    <div id="packagesspinner">
        <center>
            <img src="/storage/app/media/packagespinner.gif"/>
        </center>
    </div>
    <br/>
    <br/>
    <div id="packages-grid" class="grid cards-grid"></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="/themes/ketikidis-octobercms-success/assets/js/t-datepicker.min.js"></script>
<script type="text/javascript">
      function trial(hotelid){
       var startdate  = $('.t-input-check-in').val(); 
       var enddate = $('.t-input-check-out').val(); 
       let kids = parseInt($('.modal-impulse-buynumber-input').val()); 
       let adults = parseInt($('#adultsdiv').val()); 
       let passengerGroups = []; 
       let accomodation = []; 
       var destinationCodes = []; 
       var establishmentIDs = []; 
       var flight = ""; 
       var childrenAges = []; 
       childrenAges.push(kids); 
       establishmentIDs.push(""+hotelid); 
       accomodation = { EstablishmentIDs: establishmentIDs, DestinationCodes: destinationCodes };
       passengerGroups.push({ adults: adults, childrenAges: childrenAges }); 
       let query = ""; 
       query = { DateFrom: new Date(startdate), DateTo: new Date(enddate), LanguageCode: "EN", CurrencyCode: "USD", PassengerGroups: passengerGroups, Accommodation: accomodation } 
       //do module
       let module = [];
       module.push("Accommodation");
       var websiteID = 1475;
       var returnURL = "http://api.direct-reservation.net/" + "?websiteID=" + websiteID+ "&query=" + JSON.stringify(query) + '&modules=' + JSON.stringify(module);
       //returnURL += "&modules=" + JSON.stringify(modules); 
       console.log(returnURL); window.open(returnURL);}
</script>
<script>
    $.noConflict();
    jQuery(document).ready(function ($) {
        $('#kids-ages-div').hide();
  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();
 }
            $('#packagesspinner').hide();
            // Call global the function
            $('.t-datepicker').tDatePicker({
                // options here
                titleCheckIn: 'Check In',
                titleCheckOut: 'Check Out',
                formatDate: 'yyyy-mm-dd',
            });
        $(document).ready(function () {
            $('.book-button').click(function (){
			    alert("");
			    var card = jQuery(this).parent().find('.grid-card');
			    var cardid = $(card).attr("id");
			    console.log(cardid);
			    return false;
			});
            $('#search-now').click(function () {
                var startdate  = $('.t-input-check-in').val();
                var enddate = $('.t-input-check-out').val();
               // console.log(startdate);
                //console.log(enddate);
                $("#packages-grid").empty();
                $('#packagesspinner').show();
                $("#search-n-book-form").submit(function (e) {
                    e.preventDefault();
                });
                var countryid = $("select#packages-country").val();
                var base_url = "{{ url('/') }}";
                // var url = 'https://seeksocialdevelopent.club/packages.php?length=1&start='+startdate+'&end='+enddate+'&country=' + countryid;
                var url = base_url + '/packages.php?length=1&start='+startdate+'&end='+enddate+'&country=' + countryid;
                //console.log(url);
                $.ajax({
                    url: url,
                    type: 'get',
                    success: function (data) {
                        $('#packagesspinner').hide();
                        // ... do something with the data...
                        //loop through data and display on form
                        console.log(typeof(data));
                        var response = data;
                        if(response == "No packages" || response.length < 1){
                            var hoteldiv = '<div class=grid-card>' +
                    '<div>' +
                        '<h3 class="card-title">No packages found. Please Try Again</h3>' +
                    '</div>' +
                '</div>';
                             $('#packages-grid').append(hoteldiv);
                        }
                        else{
                        console.log(response);
                        response.forEach(function (rateplan) {
                            var hotel = rateplan.hoteldetails;
                            //console.log(rateplan);
                            var rate = rateplan.ratedetails;
                            var rateplans = rateplan.rateplandetails;
                            rateplans.forEach(function (ratedetail,i){
                            //var hotel = rate;var hotelid = i;
                            //console.log(hotelid);
                            var hoteloriginalid = hotel.establishmentid;
                            var hoteloriginalname = hotel.name;
                            //var rateplanid = hotel.rateplanid;
                            //var rateplanid = hotel.rateplanid;
                            var CheckIn = ratedetail.startDate;
                            var CheckOut = ratedetail.endDate;
                            //var rateplanamount = rate[hoteloriginalid][rateplanid].PricePerNight;
                           // console.log(rateplanamount);
                            var hotelname = ratedetail.name[0].value;
                            var description = ratedetail.description[0].value;
                            var paymentPolicy = ratedetail.paymentPolicy[0].value;
                            var cancellationPolicy = ratedetail.cancellationPolicy[0].value;
                            var mealPlanCode = ratedetail.mealPlanCode;
                            var images = ratedetail.images;
                            var backgroundimage = '';
                            if(images.length === 0){}
                            else{
                                backgroundimage= 'https://az416281.vo.msecnd.net/rateplans/'+images[0].url;
                            }
                            //console.log(backgroundimage);
                            var urlalias = hotel.url_alias;
                            var hoteladdress1 = hotel.address1;
                            var hoteladdress2 = hotel.address2;
                            startdate = new Date(startdate).getTime();
                            enddate = new Date(enddate).getTime();
                            var hoteldiv = '<div class="grid-card" id="'+hoteloriginalid+'" style="background-image: url("'+backgroundimage +'"");">' +
                    '<div>' +
                        '<h3 class="card-title">' + hotelname + '</h3>' +
                        '<h4 class="card-desc">Available from : ' + CheckIn + '</h4>' +
                        '<h4 class="card-desc">Available to : ' + CheckOut + '</h4>' +
                        '<h4 class="card-desc">Hotel Name : '+hoteloriginalname+'</h4>' +
                        '<h4 class="card-desc"></h4>' +
                        '<div hidden id="rate'+hotelid+'">' +
                            '<div classs="cancellationPolicy" >'+cancellationPolicy+'</div>' +
                            '<div classs="paymentPolicy" >'+paymentPolicy+'</div>' +
                            '<div classs="Description" >'+description+'</div>' +
                        '</div>' +
                        '<button type="button" class="book-button" onclick="trial('+hoteloriginalid+');">BOOK NOW</button>' +
                        '<div class="likebtn-container">' +
                            '<div class="likebtn btn">' +
                                '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-heart fa-w-16">' +
                                    '<path fill="currentColor" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"></path>' +
                                '</svg>' +
                            '</div>' +
                        '</div>' +
                    '</div>' +
                '</div>';
                            $('#packages-grid').append(hoteldiv);
                            //"href="/packagecheckout?length=1&bookFrom='+startdate+'&bookTo='+enddate+'&packageid=' + hotelid + '&hotelid='+hoteloriginalid+'"
                            });
                        });
                    }
                    }
                })
                .fail(function( jqXHR, textStatus ) {
  alert( "Request failed: " + textStatus );
});
            });
            $('.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>
            <!--    -->