Thank You

Sign In

Thank you !
Enquiry Number
Your enquiry is for.
CheckIn - CheckOut Dates
Guests
Total
€ 0.00
Your reservation is confirmed! You will soon receive an email containing critical information regarding your booking, and it is important that you take note of the details and information. If you would like to talk to one of the team here at yourbookng.com, please contact us on ...
Contact emailadmin@yourbookng.com
Helping you find your next stay
UK Office

Zimbabwe Office

Quick links

Save time, save money!

				
					<?php

/**
 * View for individual listing
 *
 * @param [List of objects] $data
 * @return void
 */
function display_single_listing()
{
    $current_url = $_GET['id'];
    $type_home = $_GET['type'];
    $get_currency = isset($_GET['currency']) ? $_GET['currency'] : YB_DEFAULT_CURRENCY;
    //$domain = "https://yourbookng.com/wordpress/images/amenities/";

    //$properties = array();

    //die($property_detail_call);
    //die("Listing " . json_encode($data->result->properties->property));

    // foreach($data as $listing){
    //     if($listing->pid == $current_url){


    //Is the property in the wishlist
    $user_id = apply_filters('determine_current_user', false);
    wp_set_current_user($user_id);

    $user_id = get_current_user_id();

    $get_properties_in_wishlist = get_user_meta($user_id, YB_SESSION . $user_id, true) ?: array();//die(json_encode($get_properties_in_wishlist));
    $property_in_wishlist = in_array($current_url, $get_properties_in_wishlist);

    //Availability calendar data
    //$api_aval_dates = YB_AVAILABILITY . '&pid=' . $current_url . '&start=' . date("Y-m-d") . '&month=' . 12;
    $available_dates = ApiCalls::apiCall(YB_AVAILABILITY . '&pid=' . $current_url . '&start=' . date("Y-m-d") . '&months=' . 12);

    $availability_dates = $minimum_stays_per_given_dates = array();

    //echo "Available day " . $api_aval_dates . "<br>" . json_encode($available_dates->result->days->day[0]);

    foreach ($available_dates->result->days->day as $day) {
        //sdie("Date available " . json_encode($day->avail));
        if ($day->avail == "1" && $day->booked == "0.0") {
            $date_aval = (array) $day->date;
            array_push($availability_dates, $date_aval[0]);
            array_push($minimum_stays_per_given_dates, $day->min_days);
            //die("Availability " . json_encode($date_aval));
        }
    }

    //Run an API call to get the min number of guests
    $get_min_guests = ApiCalls::apiCall(YB_PROPERTY_DETAILS . '&pid=' . $current_url);
    $min_guest_per_property = $get_min_guests->result->properties->property->sleeps->min;
    $checkout_date_given = !empty($type_home) ? $minimum_stays_per_given_dates[0] : 1;

    $checkout_date = date('Y-m-d', strtotime($availability_dates[0] . ' + '. $minimum_stays_per_given_dates[0].' days'));
    
    $property_detail_call = YB_PROPERTY_DETAILS . '&pid=' . $current_url . '&arrival_date=' . $availability_dates[0] . '&departure_date=' . $checkout_date . '&guests=' . $min_guest_per_property;
    $data = ApiCalls::apiCall($property_detail_call);
    //die("Start date " . $availability_dates[0] . " End date " . $availability_dates[1] . " Data is ". json_encode($data->result->properties->property));
    $listing = $data->result->properties->property;

    //die("Availability " . json_encode($availability_dates));
    wp_enqueue_script('additional-js', plugins_url('calendar.js', __FILE__));
    wp_localize_script('additional-js', 'availability_dates', $availability_dates);
    //die("Available dates " . json_encode($availability_dates));
    /*if(!empty($availability_data)){
                foreach($availability_data as $aval_data){
                    if($aval_data->pid == $current_url){
                        $availability_dates = array();
                        foreach($aval_data->dates->date as $date){
                            
                            $dates = (array)$date;
                            $availability_date = array($dates["@attributes"]["value"]);
                            $availability_dates = array_merge($availability_dates, $availability_date);

                        }
                        wp_enqueue_script( 'additional-js', plugins_url('calendar.js', __FILE__) );
                        wp_localize_script( 'additional-js', 'availability_dates', $availability_dates );
                        break;
                    }
                }
            }*/
    //End availability calendar

?>

    <div class="azp_element azp-element-azp-zvmeb6m1tr azp_row_section azp_row_section-default azp_row_section-15-gap pad-top-50">
        <div class="azp_container">
            <div class="azp_row azp_row-wrap">
                <div class="azp_element azp-element-azp-c1r6whtz4ki azp_col azp-col-66 list-single-main-wrapper">
                    <div></div>
                    <div class="azp_element lheadinfo azp-element-azp-ww8wcqb4j8">
                        <div class="lsingle-block-boxex lheadinfo-block">
                            <div class="lheadinfo-top-left">

                            </div>
                            <div class="lheadinfo-left-bot fl-wrap">

                            </div>
                        </div>
                    </div>

                    <!-- code ye slider -->
                    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"/>

                    <div class="azp_element lslider azp-element-azp-t5s8f37xyr authplan-hide-false">

                    <div class="yb_main_section">
                            <div class="yb_left_section">
                            <section id="image-carousel" class="splide" aria-label="Beautiful Images">
                            <div class="splide__track">
                                <ul class="splide__list">
                                    <?php $img_default_size = YB_IMAGE_QUALITY; $track_image = 1; foreach($listing->images->image as $image): if($track_image < 30): ?>
                                    <li class="splide__slide">
                                    <img class="splide__list_img" src="<?= ($image->url_large) ? $image->url_large : $image->url_large; ?>">
                                    </li>
                                    <?php endif; $track_image++; endforeach; ?>
                                </ul>
                            </div>
                            </section>
                    <section id="yb_property_gallery">












                        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/css/splide-core.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/css/splide.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/css/themes/splide-default.min.css">
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/css/themes/splide-sea-green.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/css/themes/splide-skyblue.min.css"> -->
    <style type="text/css">
#thumb .splide__list {
/* 
on small screens thumbs get cut off
how to fix?
*/
justify-content: center;
}
.popup_btn{
    width: 100%;
    background-color: #1f2d48 !important;
    color: #ffffff !important;
    font-size: 14px;
    font-family: 'Galano Bold';
    border-color: #1f2d48;
    margin-bottom: 20px;
}
.button-bar {
padding: 2rem;
background: #fff;
border-top: 1px solid gray;
position: fixed;
bottom: 0 !important;
width: 100vw;
left:0;
display: none;
}
.input_popups{
    border: 1px solid gray !important;
    margin-top: 10px;
    margin-right: 10px;
    border-radius: 5px !important;
}
.wrapper {
max-width: 1200px;
margin: 0 auto;
}
.splide__pagination__page{display: none;}

.splide__list_img {
width: 100%;
object-fit: contain !important;

}
.yb_min_stay {color: red !important;}
#thumb .splide__slide {
opacity: 0.3;
}

#thumb .splide__slide.is-active {
opacity: 1;
}

.wrapper{
    display: flex;
    flex-direction: row;
}

.splide___thumbnail{
    display: flex;
    flex-direction: column;
}
.checkincheckout_popup{
    display: flex;
    justify-content: space-between;
    margin-top:20px;
}   
.checkin-dates-popup{
    width: 49%;
    
}
/* .yb_mobile_view{
    display: none !important;
} */
.yb_guest_max_num,.yb_guest_max_num{
    display: flex;
    justify-content: space-between;
}
    </style>

<!-- 
<div class="wrapper">
<div class="splide " id="gallery">
    <div class="splide__track">
    <ul class="splide__list">
    <?php $img_default_size = YB_IMAGE_QUALITY; $track_image = 1; foreach($listing->images->image as $image): if($track_image < 9): ?>
        <li class="splide__slide">
        <img class="splide__list_img" src="<?= ($image->url_large) ? $image->url_large : $image->url_large; ?>">
        </li>
        <?php endif; $track_image++; endforeach; ?>
    </ul>
    </div>
</div>
<div id="thumb" class="splide">
    <div class="splide__track">
    <ul class="splide__list splide___thumbnail">
    <?php $track_image = 1; foreach($listing->images->image as $image): if($track_image < 9): ?>
        <li class="splide__slide">
        <img class="splide__list_img" src="<?= ($image->url_large) ? $image->url_large : $image->url_large; ?>">
        </li>
        <?php endif; $track_image++; endforeach; ?>
    </ul>
    </div>
</div>
</div> -->

    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/js/splide.min.js"></script>


    <script type="text/javascript">
        // import Splide from "https://cdn.skypack.dev/@splidejs/splide@3.6.12";
        document.addEventListener( 'DOMContentLoaded', function () {
            new Splide( '#image-carousel' ).mount();
            new Splide( '#image-carousel' ).mount();
            document.addEventListener( 'DOMContentLoaded', function () {
        new Splide( '#image-carousel', {
            heightRatio: 0.5,
        } ).mount();
        } );
} );

// var gallery = new Splide("#gallery", {
//   rewind: true,
//   pagination: false
// });

// var thumb = new Splide("#thumb", {
//   fixedWidth: 64,
//   fixedHeight: 64,
//   gap: 10,
//   rewind: true,
//   pagination: false,
//   //focus: 'center',
//   arrows: false,
//   isNavigation: true
// });

// gallery.sync(thumb);
// gallery.mount();


    </script>











                                </section>

                                <!-- <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script> -->

<!-- Initialize Swiper -->
<!-- <script>
var swiper = new Swiper(".mySwiper", {
    navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
    },
});
</script> -->

                                <section>

                                    <div class="leftsection">
                                    <div class="property_title_header yb_mobile_view">
                                                        <div class="property_title">
                                                            <h1 class="lhead-title"><?= $listing->name ?></h1>
                                                            <!-- <div class="geodir-category-location dis-flex-wrap">
                                                                <a href="https://www.google.com/maps/search/?api=1&query=<?= $listing->coords ?>">
                                                                    <li class="fas fa-map-marker-alt"></li>
                                                                    <?= $listing->address; ?>
                                                                </a>
                                                            </div> -->
                                                        </div>

                                                    </div>
                                        <h3 id="yb_overview_title">Overview</h3>
                                        <div id=yb_property_description>
                                            <?php 
                                                $real_text = breakLongText($listing->description->long, 400);

                                                foreach($real_text as $text){
                                                    echo $text . "<br><br>";
                                            ?>

                                            <?php
                                                }
                                            ?>
                                        </div>

                                        <div class="amenities">
                                            <div class="amenity">
                                                <div>
                                                    <h3>Popular Amenities</h3>
                                                </div>
                                                <div class="amenities_details">
                                                    <div id="amenity">
                                                        <?php $track = 1;
                                                        foreach ($listing->amenities->amenity as $amenity) : ?>
                                                            <?php if ($track == 3) : echo "</tr><tr>";
                                                                $track = 1;
                                                            endif; ?>
                                                            <div class="single_amenity">
                                                                <img src="<?= YB_AMENITY_ROOT . strtolower(str_replace(array(' ', '/'), '-', $amenity->name)) . '.png' ?>" width="30" height="30" alt="<?= $amenity->name ?>">
                                                                <span><?= $amenity->name ?></span>
                                                            </div>
                                                        <?php $track++;
                                                        endforeach; ?>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

                                </section>

                                <section>
                                    <div style="width:100%">
                                        <div>
                                            <?php
                                            $cords = explode(',', $listing->coords);
                                            //echo $cords[0] . " " . $cords[1];
                                            ?>
                                            <div id="map22"></div>
                                        </div>
                                    </div>
                                </section>


                                <h3>Availability Calendar</h3>
                                <div id='calendar'></div>
                                <div class="yb-listing-summary">
                                    <div class="available_calendar"></div>
                                    Available
                                </div>
                                <div class="yb-listing-summary">
                                    <div class="unavailable_calendar"></div>
                                    Unavailable
                                </div>
                                <!-- Calendar End -->
                                <?php if (!empty($listing->feedback->entry)) : ?>

                                    <!-- Feedback Start -->
                                    <div class="yb_review_title_section">
                                        <div class="yb_review_title">
                                            <h3>Clients' thoughts on <?= $listing->name ?> </h3>
                                        </div>
                                        <svg style="display: none">
                                            <symbol id="icon-bubble" viewBox="0 0 32 32">
                                                <title>speech bubble</title>
                                                <path class="path1" d="M16 2c8.837 0 16 5.82 16 13s-7.163 13-16 13c-0.849 0-1.682-0.054-2.495-0.158-3.437 3.437-7.539 4.053-11.505 4.144v-0.841c2.142-1.049 4-2.961 4-5.145 0-0.305-0.024-0.604-0.068-0.897-3.619-2.383-5.932-6.024-5.932-10.103 0-7.18 7.163-13 16-13z"></path>
                                            </symbol>
                                        </svg>
                                    </div>


                                    <div class="yb_reviews">
                                        <?php foreach ($listing->feedback->entry as $feed) : ?>
                                            <div class="yb_single_review">
                                                <div class="yb_user_info">
                                                    <div class="yb_user_icon">
                                                        <img src="https://secure.gravatar.com/avatar/bb90dcb0ceabfc8bf10c550f1ee95ee7?s=48&d=mm&r=g">
                                                    </div>
                                                    <div class="nameanddate">
                                                        <span class="yb_user_name"><?= $feed->author ?></span>
                                                        <time datetime="2016-05-12T12:00" class="c-article-tile__date" itemprop="datePublished">
                                                            <?= $feed->stay ?>
                                                        </time>
                                                    </div>
                                                </div>
                                                <div class="review_stars">
                                                    <!-- <?php foreach ($listing->feedback->entry as $listing_var) : ?>
                                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="15">
                                                            <path d="M381.2 150.3L524.9 171.5C536.8 173.2 546.8 181.6 550.6 193.1C554.4 204.7 551.3 217.3 542.7 225.9L438.5 328.1L463.1 474.7C465.1 486.7 460.2 498.9 450.2 506C440.3 513.1 427.2 514 416.5 508.3L288.1 439.8L159.8 508.3C149 514 135.9 513.1 126 506C116.1 498.9 111.1 486.7 113.2 474.7L137.8 328.1L33.58 225.9C24.97 217.3 21.91 204.7 25.69 193.1C29.46 181.6 39.43 173.2 51.42 171.5L195 150.3L259.4 17.97C264.7 6.954 275.9-.0391 288.1-.0391C300.4-.0391 311.6 6.954 316.9 17.97L381.2 150.3z" />
                                                        </svg>
                                                    <?php endforeach; ?> -->
                                                    ( <?= count($listing->feedback->entry) ?> reviews)
                                                </div>

                                                <div class="c-article-tile__body">
                                                    <p class="c-article-tile__title" itemprop="headline">
                                                        <?= $feed->feedback ?>
                                                    </p>
                                                </div>
                                            </div>
                                        <?php endforeach; ?>

                                    </div>

                                <?php endif; ?>
                            </div>
                            <div class="yb_right_section parent-sticky">
                                <div class="yb inner titlesticky">
                                    <div class="yb_top_right">
                                            <div class="yb_title_section">
                                                    <div class="property_title_header">
                                                        <div class="property_title">
                                                            <h1 class="lhead-title"><?= $listing->name ?></h1>
                                                            <!-- <div class="geodir-category-location dis-flex-wrap">
                                                                <a href="https://www.google.com/maps/search/?api=1&query=<?= $listing->coords ?>">
                                                                    <li class="fas fa-map-marker-alt"></li>
                                                                    <?= $listing->address; ?>
                                                                </a>
                                                            </div> -->
                                                        </div>
                                                        <div class="property_annemities">
                                                            <div class="yb_3buttons">
                                                                <span class="spanshare">
                                                                    <li class="fas fa-share"></li>
                                                                </span>
                                                            
                                                                <span class="spanwishlist">
                                                                    <?php if($property_in_wishlist){ ?>
                                                                        <i class="fas fa-heart yb_wishlist" data-pid="<?= $listing->pid ?>" data-method="remove"  id="remove_from_wishlist"></i>
                                                                    <?php }else {?>
                                                                        <li class="far fa-heart yb_wishlist" data-pid="<?= $listing->pid ?>" data-method="add" id="yb_wishlist"></li>
                                                                    <?php } ?>
                                                                </span>
                                                            </div>
                                                            <div class="yb_socialshare">
                                                                <a href="https://www.facebook.com/sharer/sharer.php?u=<?= YB_MAIN_DOMAIN . "/property/?id=" . $current_url; ?>" target="_blank" class="yb_fbshare yb_default_fontcolor">
                                                                    <i class="fab fa-facebook-f"></i>
                                                                </a>
                                                                
                                                                <a href="https://api.whatsapp.com/send?text=<?= YB_MAIN_DOMAIN . "/property/?id=" . $current_url; ?>" target="_blank"  class="yb_fbshare yb_default_fontcolor">
                                                                    <i class="fab fa-whatsapp"></i>
                                                                </a>

                                                                <a href="<?= YB_MAIN_DOMAIN . "/property/?id=" . $current_url; ?>" class="yb_fbshare yb_default_fontcolor">
                                                                    <i class="fab fa-linkedin-in"></i>
                                                                </a>

                                                                <a href="mailto:?&subject=&body=<?= YB_MAIN_DOMAIN . "/property/?id=" . $current_url; ?>"target="_blank"  class="yb_fbshare yb_default_fontcolor">
                                                                    <i class="fas fa-envelope"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <section class="top_amenities_list">
                                                        <div class="yb_top_amenities">
                                                            <div class="yb_appartment">
                                                                <span class="yb_appartment_icon"><i aria-hidden="true" class="fas fa-house-user yb_default_fontcolor"></i></span>
                                                                <span class="yb_appartment_name yb_default_textsize yb_bold_text yb_default_textcolor"><?= $listing->property_type->name?></span>
                                                            </div>
                                                            <div class="yb_bedroom">
                                                                <span class="yb_bedroom_icon"><i aria-hidden="true" class="fas fa-couch yb_default_fontcolor"></i></span>
                                                                <span class="yb_bedroom_number yb_default_textsize yb_bold_text yb_default_textcolor"><?= $listing->bedrooms ?> Bedrooms</span>
                                                            </div>
                                                            <div class="yb_bed">
                                                                <span class="yb_bedroom_icon"><i aria-hidden="true" class="fas fa-bed yb_default_fontcolor"></i></span>
                                                                <span class="yb_bedroom_number yb_default_textsize yb_bold_text yb_default_textcolor"><?= $listing->beds ?> Bed</span>
                                                            </div>
                                                            <div class="yb_bath">
                                                                <span class="yb_bedroom_icon"><i aria-hidden="true" class="fas fa-shower yb_default_fontcolor"></i></span>
                                                                <span class="yb_bedroom_number yb_default_textsize yb_bold_text yb_default_textcolor"><?= $listing->baths ?> Bathroom</span>
                                                            </div>
                                                        </div>
                                                    </section>

                                                    <section>
                                                        <div class="review_stars">
                                                            <?php if($listing->feedback->entry > 0){ foreach ($listing->feedback->entry as $listing_var) : ?>
                                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="15">
                                                                    <path d="M381.2 150.3L524.9 171.5C536.8 173.2 546.8 181.6 550.6 193.1C554.4 204.7 551.3 217.3 542.7 225.9L438.5 328.1L463.1 474.7C465.1 486.7 460.2 498.9 450.2 506C440.3 513.1 427.2 514 416.5 508.3L288.1 439.8L159.8 508.3C149 514 135.9 513.1 126 506C116.1 498.9 111.1 486.7 113.2 474.7L137.8 328.1L33.58 225.9C24.97 217.3 21.91 204.7 25.69 193.1C29.46 181.6 39.43 173.2 51.42 171.5L195 150.3L259.4 17.97C264.7 6.954 275.9-.0391 288.1-.0391C300.4-.0391 311.6 6.954 316.9 17.97L381.2 150.3z" />
                                                                </svg>
                                                            <?php endforeach; ?>
                                                            ( <?= count($listing->feedback->entry) ?> reviews) <?php } ?>
                                                        </div>
                        
                                                    </section>
                                            </div>
                                            <form class="reservation">
                                                <?php
                                                $currency = $get_currency;
                                                $price =  $listing->price->$get_currency;
                                                $min_stay = $minimum_stays_per_given_dates[0];

                                                //$price_per_night = !empty($checkout) ? ($price / $min_stay) : $price;

                                                $price_per_night = $price;

                                                //$new_date = date('Y-m-d', strtotime($availability_dates[0] . ' + '. $minimum_stays_per_given_dates[0].' days'));

                                                // $date = strtotime("+" . $listing->sleeps->min . " day", $availability_dates[0]);
                                                // echo date('M d, Y', $date);

                                                //$new_max_date = date('Y-m-d', strtotime($new_date . ' + 8 days'));
                                                ?>

                                                <div>
                                                    <label>Check-In</label>
                                                    <input type="date" value="<?= !empty($checkin) ? $checkin : $availability_dates[0] ?>" name="checkin" id="checkin" class="bookingDates">
                                                </div>
                                                <div>
                                                    <label>Check-Out</label>
                                                    <input type="date" value="<?= $checkout_date ?>" name="checkout" id="checkout" class="bookingDates">
                                                </div>
                                                <div>
                                                    <label>Guests</label>
                                                    <input type="number" min="1" class="bookingDates" max="<?= $listing->sleeps->max ?>" value="<?= !empty($guests) ? $guests : "1" ?>" data-max="<?= $listing->sleeps->max ?>" onkeyup="checkMax(this)" name="guests" id="guests">
                                                </div>
                                                <div class="yb_min_stay yb_guest_max_num">
                                                    Minimum number of stay
                                                    <span>: <?= $minimum_stays_per_given_dates[0] ?> days</span>
                                                </div>
                                                <div class="yb_guest_max_num">
                                                    Maximum number of guests 
                                                    <span>: <?= $listing->sleeps->max ?></span>
                                                </div>
                                                <div class="yb_bottom_prices">
                                                    <div class="yb_net_fee">
                                                        <span class="yb_cf_word">Accommodation Fee</span>&nbsp;
                                                        <span class="yb_cf_price">
                                                            <span id="yb_currency">
                                                                <?= $get_currency == "gbp" ? "£" : "€"; ?> 
                                                            </span>
                                                            <span id="price" class="yb_total_bookng_price">
                                                                <?= round($price_per_night, 2, PHP_ROUND_HALF_UP ) ?>
                                                            </span>
                                                        </span>
                                                        
                                                    </div>
                                                    
                                                </div>
                                                <div class="yb_price_footer">

                                                    <div class="yb_reser_total">
                                                        <span>Total</span>&nbsp;&nbsp;
                                                        <span class="yb_price_floatright">
                                                            <?= $get_currency == "gbp" ? "£" : "€" ?>
                                                            <span id="yb_total_bookng_price">
                                                                <?= round($price_per_night, 2, PHP_ROUND_HALF_UP ) ?>
                                                            <span>
                                                        </span>
                                                        
                                                    </div>
                                                    <div class="yb_reserve_btn">
                                                        <button class="reserve">Reserve</button>
                                                    </div>
                                                </div>
                                                <input type="hidden" name="total" id="total" class="yb_total_bookng_price" value="<?= round($price_per_night, 2, PHP_ROUND_HALF_UP ) ?>">
                                                <input type="hidden" name="pid" id="pid" value="<?= $listing->pid ?>">
                                            </form>
                                    </div>
                                    <div class="yb_contact">
                                        <h4 class="yb_contact_title">For enquries contact us</h4>
                                        <hr>
                                        <div class="yb_email">
                                            <i aria-hidden="true" class="fas fa-envelope"></i>
                                            <div class="yb_email_details">
                                                <span class="yb_email">help@yourbookng.com</span>
                                                <span class="yb_email_word">Email</span>
                                            </div>
                                        </div>
                                        <!-- <div class="yb_phone">

                                            <i aria-hidden="true" class="fas fa-phone-alt"></i>
                                            <div class="yb_email_details">
                                                <span class="yb_phone">+44 7805 540047</span>
                                                <span class="yb_phone_word">Phone</span>
                                            </div>
                                        </div> -->
                                    </div>
                                </div>


                                </div>
                            </div>                                                                
                        </div>
                </div>
            </div>
        </div>
        <div class="button-bar">
            <div class="bottom_bar_yb" style="display:flex; justify-content:space-between">
                <div class="yb_bottom_price">
                    <span style="font-weight: bold !important; font-size:24px !important;">
                        <?= $get_currency == "gbp" ? "£" : "€" ?>
                        <span id="yb_total_bookng_price" >
                            <?= round($price_per_night, 2, PHP_ROUND_HALF_UP ) ?>
                        <span>
                    </span>
                    <span class="yb_bookingdates" style="display: block;font-size:16px !important;">12/9/2022-18/9/2022</span>
                </div>
                <button class="reserve2" data-toggle="modal" data-target="#myModal">Reserve</button>
            </div>
            
        </div>
    </div>

    <style>
        td .fc-daygrid-day{
            height: 20px !important;
        }
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js" integrity="sha256-/H4YS+7aYb9kJ5OKhFYPUjSJdrtV6AeyJOtTkw6X72o=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script>
        
        jQuery(function(){
            let clientHeight = jQuery('.yb_top_right').height();
        
            //console.log(clientHeight);
            jQuery('.splide__list_img').height(clientHeight);
            //console.log("ndikuclickika1");
            jQuery(".yb-social").click(function(e){
                //console.log("ndikuclickika2");
                jQuery('.results').css('background-color', 'red');
            });

        });
        function initMap2() {
            // The location of Uluru
            //console.log("1 " + <?= $cords[0] ?> + "2 " + <?= $cords[1] ?>);
            const uluru = {
                lat: <?= $cords[0] ?>,
                lng: <?= $cords[1] ?>
            };
            // The map, centered at Uluru
            const map = new google.maps.Map(document.getElementById("map22"), {
                zoom: 12,
                center: uluru,
            });

            const marker = new google.maps.Marker({
                position: uluru,
                map: map,
            });
        }

        function checkMax(sender) {
            var inputVar = parseInt(sender.value);
            var max = parseInt(sender.dataset.max);

            if (inputVar > max) {
                sender.value = max;
            }

        }


        jQuery(function() {
            jQuery(".bookingDates").change(function(){
                var checkin = jQuery("#checkin").val();
                var checkout = jQuery("#checkout").val();
                var guests = jQuery("#guests").val();
                var pid = jQuery("#pid").val();
                var currency = "<?= $get_currency ?>";

                var forms = {
                    "pid": pid,
                    "checkin": checkin,
                    "checkout": checkout,
                    "guests": guests,
                    "currency": currency,
                };

                jQuery.post(window.cart.checkinDatesChanged, forms,
                    (data) => {
                        jQuery("#yb_total_bookng_price").html(data.<?= $get_currency ?>);
                        jQuery(".yb_total_bookng_price").html(data.<?= $get_currency ?>);
                        //console.log("Response back " + JSON.stringify(data));
                        //console.log("Currency back " + (data.gbp));
                    });
            });

            jQuery(".reserve").click(function(e) {
                e.preventDefault();

                var checkin = jQuery("#checkin").val();
                var checkout = jQuery("#checkout").val();
                var total = jQuery("#total").val();
                var guests = jQuery("#guests").val();
                var pid = jQuery("#pid").val();

                var forms = {
                    "pid": pid,
                    "checkin": checkin,
                    "checkout": checkout
                };

                window.location = "<?= YB_MAIN_DOMAIN ?>/checkout?checkin=" + checkin + "&checkout=" + checkout + "&pid=" + pid + "&guests=" + guests;

                // jQuery.post(window.cart.book, forms,
                //     (data) => {
                //         jQuery(".cart_message").css('display', 'block');
                //         jQuery(".response").text(data);
                //         jQuery("#cart_icon").append("<span class='cart_icon_number'>" + data + "</span>");
                //         //console.log("Response back " + JSON.stringify(data));
                //     });
            });
        });
    </script>

<script type="text/javascript">
        jQuery(function() {
            //console.log("ndikuclickika1");
            jQuery('.yb-social').click(function(e){
                //console.log("ndikuclickika2");
                jQuery('.results').css('background-color', 'red');
            });



            jQuery(".yb_wishlist").click(function(e) {
                e.preventDefault();

                var pid = this.dataset.pid;
                var method = this.dataset.method;
                console.log("Inside wish");
                console.log(method + " for " + pid);
                var forms = {
                    "pid": pid,
                    "method": method
                };

                jQuery.post(window.cart.rest, forms,
                    (data) => {
                        location.reload();
                    });
            });
        });
    </script>


    <script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBws-FHg6ASqiDYvNXFNJ6ZsfnFfeOFlSE&callback=initMap2">
    </script>
    <script>
    
            jQuery(".spanshare").click(function(){
                //console.log("elementor");
                jQuery(".yb_socialshare").toggle();
            });
        //Calendar events
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');

            var post_events = [{}];
            availability_dates.forEach(appendDate);

            function appendDate(item) {
                post_events.push({
                    start: item,
                    display: 'background',
                    color: '#9bdad2',
                    //title: '£345',
                });
            }

            //console.log(<?= json_encode($availability_dates) ?>);

            var calendar = new FullCalendar.Calendar(calendarEl, {
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
                },
                initialDate: '<?= $availability_dates[0] ?>',
                navLinks: true, // can click day/week names to navigate views
                businessHours: true, // display business hours
                editable: true,
                selectable: true,
                events: post_events,
                maxDate: "+3m", 
                // events: [

                // {
                //     start: '2022-05-19',
                //     end: '2022-05-24',
                //     overlap: false,
                //     display: 'background',
                //     color: '#ff9f89'
                // },

                // post_events                    

                // ],
            });

            calendar.render();
        });
    </script>

    <?php
}


//Put the full description of a listing in paragraphs
function breakLongText($text, $length = 200, $maxLength = 250){
    //Text length
    $textLength = strlen($text);

    //initialize empty array to store split text
    $splitText = array();

    //return without breaking if text is already short
    if (!($textLength > $maxLength)){
    $splitText[] = $text;
    return $splitText;
    }

    //Guess sentence completion
    $needle = '.';

    /*iterate over $text length 
    as substr_replace deleting it*/  
    while (strlen($text) > $length){

    $end = strpos($text, $needle, $length);

    if ($end === false){

    //Returns FALSE if the needle (in this case ".") was not found.
    $splitText[] = substr($text,0);
    $text = '';
    break;

    }

    $end++;
    $splitText[] = substr($text,0,$end);
    $text = substr_replace($text,'',0,$end);

    }
    
    if ($text){
    $splitText[] = substr($text,0);
    }

    return $splitText;

}
Location
Check In - Check Out
Adults
Children