<?php

include_once 'casafari.class.php';

//$client_url = 'https://crmapi.proppydev.com';
//$client_secret = 'ZXh0ZXJuYWxkZXY6Rml0aDVmQmRmZ3NkeEhWTUF4aXpkNW9yNjhn';
$client_url = 'https://crmapi.casafaricrm.com';
$client_secret = 'dGVuIEhvb3BlbiAtIENyZWF0aW9uIE1lZGlhOnRlbkhvb3BlbjIwMjQq';

$casafari_api = new CasafariAPI($client_url, $client_secret);

$params = [
    'PropertyIncludes' => [
        'IncludeFeatures' => true,
        'IncludeBrokers' => true,
        'IncludeAgency' => true,
        'UseHtmlDescription' => false
    ],
    'PropertyId' => ($_GET['id'] ?: null),
    'Reference' => ($_GET['reference'] ?: null),
    'BusinessTypeIds' => [
        'Sale'
    ],
    'PropertyTypeIds' => ($_GET['type'] ? [$_GET['type']] : []),
    'Sold' => false,
    //'Featured' => true,
    'VisibleOnWebsite' => true,
    'PriceFrom' => ($_GET['price_from'] ?: null),
    'PriceTo' => ($_GET['price_to'] ?: null),
    'MinBedrooms' => ($_GET['bedrooms'] == 'Studio' ? null : $_GET['bedrooms']),
    'MaxBedrooms' => ($_GET['bedrooms'] != 6 ? ($_GET['bedrooms'] == 'Studio' ? 0 : $_GET['bedrooms']) : null),
    'Lang' => 'en',
    'PropertyListSorts' => [
        'SortBy' => 'DateDesc'
    ],
    'InnertLocations' => [
        'RegionIds' => [],
        'CityIds' =>  ($_GET['location'] ? [$_GET['location']] : []),
        'LocalityIds' => ($_GET['locality'] == 'lagos' ? [12782, 96262, 96263] : ($_GET['locality'] != '' ? [$_GET['locality']] : [])),
        'Zonenames' => $_GET['zone'] ? [$_GET['zone']] : []
    ],
    'OnFocus' => ($_GET['onfocus'] == 1 ? true : null),
    'CorrelationId' => 'string',
    'EchoToken' => 'string',
    'PrimaryLangId' => 0,
    'RetransmissionIndicator' => true,
    'TimeStamp' => 'string',
    'Version' => 0,
    'SequenceNmbr' => 1,
    'MaxResponses' => 10
];

$properties_json = $casafari_api->getProperties($params);

//print_r(($_GET['locality'] == 'lagos' ? [12782] : ($_GET['locality'] != '' ? [$_GET['locality']] : [])));

//header('Content-type: application/json; charset=utf-8');
//echo json_encode($properties);
//echo '<pre>'.print_r($properties_json, true).'</pre>';

?>

<!-- start Card Carousel -->
<link id='font-awesome-css' href='https://new.tenhoopenrealty.com/wp-content/plugins/unlimited-elements-for-elementor-premium/assets_libraries/font-awesome6/fontawesome-all.min.css' type='text/css' rel='stylesheet'>
<link id='font-awesome-4-shim-css' href='https://new.tenhoopenrealty.com/wp-content/plugins/unlimited-elements-for-elementor-premium/assets_libraries/font-awesome6/fontawesome-v4-shims.min.css' type='text/css' rel='stylesheet'>
<link id='owl-carousel-css' href='https://new.tenhoopenrealty.com/wp-content/plugins/unlimited-elements-for-elementor-premium/assets_libraries/owl-carousel-new/assets/owl.carousel.css' type='text/css' rel='stylesheet'>
<link id='uc_ac_assets_file_animate_css_77907-css' href='https://new.tenhoopenrealty.com/wp-content/uploads/ac_assets/uc_classic_carousel/animate.css' type='text/css' rel='stylesheet'>

<style>
    /* widget: Card Carousel */

    #uc_card_carousel_elementor_d7f3f5c-wrapper {
        min-height: 1px;
    }

    #uc_card_carousel_elementor_d7f3f5c * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }


    #uc_card_carousel_elementor_d7f3f5c .elementor-icon-list-items {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    #uc_card_carousel_elementor_d7f3f5c .owl-dots {
        position: absolute;
        margin-top: -50px;
        top: 0;
        left: 0;
    }

    #uc_card_carousel_elementor_d7f3f5c .elementor-icon-list-item .elementor-icon-list-icon {
        font-size: 25px;
    }

    #uc_card_carousel_elementor_d7f3f5c .elementor-icon-list-item .elementor-icon-list-text {
        font-size: 23px;
        margin-left: 5px;
    }

    #uc_card_carousel_elementor_d7f3f5c .ue-carousel-item {
        overflow: hidden;
        transition: 0.3s;
    }

    #uc_card_carousel_elementor_d7f3f5c .uc_classic_carousel_container_holder {
        display: block;
        position: relative;
        width: 100%;
        box-sizing: border-box;
    }

    #uc_card_carousel_elementor_d7f3f5c .uc_classic_carousel_placeholder {
        position: relative;
    }

    #uc_card_carousel_elementor_d7f3f5c .uc_classic_carousel_placeholder img,
    #uc_card_carousel_elementor_d7f3f5c .ue_card_carousel_image_overlay {
        transition: all 300ms;
    }

    .card_carousel_title {
        font-size: 21px;

        margin-top: 5px;
        color: var( --e-global-color-primary );
        font-family: "Bulter", Sans-serif;
        font-size: 24px;
        font-weight: 400;
        line-height: 1.5em;
        text-align: center;
    }

    .card_carousel_text {
        margin-top: 2px;
        color: var( --e-global-color-primary );
        font-family: "Arquitecta", Sans-serif;
        font-size: 20px;
        font-weight: 400;
        line-height: 1.5em;
        text-align: center;
    }

    .uc_classic_carousel .uc_classic_carousel_border {
        display: block;
        margin: 0 auto;
    }

    .uc_classic_carousel .uc_classic_carousel_placeholder img {
        width: 100%;

        display: inline-flex;
        height: 220px;
        width: 100% !important;
        object-fit: cover;
    }

    .uc_classic_carousel .uc_classic_carousel_content {
        display: flex;
        flex-flow: column nowrap;
    }

    .uc_classic_carousel .ue_button {
        margin-top: auto;

    }

    .uc_classic_carousel .uc_classic_carousel_content .uc_more_btn {
        display: inline-block;
        text-decoration: none;
        transition: all 0.5s ease;
    }

    #uc_card_carousel_elementor_d7f3f5c .owl-dots .active {
        width: 25px;
        border-radius: 10px;

        background-color: var( --e-global-color-accent );
    }

    #uc_card_carousel_elementor_d7f3f5c .owl-dots {
        overflow: hidden;
        text-align: left;
    }

    #uc_card_carousel_elementor_d7f3f5c .owl-dot {
        border-radius: 50%;
        display: inline-block;

    width: 8px;
    height: 8px;
    background-color: #c6c6c6;
    margin: 0px 5px;

    }

    #uc_card_carousel_elementor_d7f3f5c .owl-nav .owl-prev {
        position: absolute;
        display: inline-block;
        text-align: center;
    }

    #uc_card_carousel_elementor_d7f3f5c .owl-nav .owl-next {
        position: absolute;
        display: inline-block;
        text-align: center;
    }

    #uc_card_carousel_elementor_d7f3f5c .owl-nav .disabled {
        display: none;
    }


    #uc_card_carousel_elementor_d7f3f5c .ue-item-icon {
        line-height: 1em;
        display: inline-flex;
        justify-content: center;
        align-items: center;

    }

    #uc_card_carousel_elementor_d7f3f5c .ue-item-icon svg {
        height: 1em;
        width: 1em;
    }

    #uc_card_carousel_elementor_d7f3f5c .ue-item-icon-wrapper {
        display: flex;
    }

    #uc_card_carousel_elementor_d7f3f5c .uc_classic_carousel_container_holder {
        max-width: ;
    }

    @media screen and (max-width: 1024px) {
        #uc_card_carousel_elementor_d7f3f5c .uc_classic_carousel_container_holder {
            max-width: ;
        }
    }

    @media screen and (max-width: 767px) {
        #uc_card_carousel_elementor_d7f3f5c .uc_classic_carousel_container_holder {
            max-width: ;
        }
    }

    margin-left: 5px;
    margin-left: 5px;
    margin-left: 5px;
    margin-left: 5px;    

</style>

<div class="uc_classic_carousel" id="uc_card_carousel_elementor_d7f3f5c-wrapper">
    <div class="uc_carousel owl-carousel uc-items-wrapper  " id="uc_card_carousel_elementor_d7f3f5c">
        <?php foreach($properties_json->PropertyList as $property) { ?>
        <div class="uc_classic_carousel_container_holder ue-item elementor-repeater-item">
            <div class="ue-carousel-item">
                <div class="uc_classic_carousel_placeholder">
                    <a href="https://new.tenhoopenrealty.com/property-details?reference=<?php echo $property->reference;?>" title="<?php echo $property->locale[0]->title;?>"> 
                        <img fetchpriority="high" decoding="async" src="<?php echo $property->photos[0]->Url;?>" alt="construction" width="768" height="295">
                    </a>
                </div>
                <div class="uc_classic_carousel_content" style="direction:ltr;">
                    <div class="card_carousel_title"><?php echo $property->price ? number_format($property->price, 0, ',', ' ').' '.$property->currency : 'P. O. A.';?></div>
                    <p class="card_carousel_text"><?php echo $property->reference . ' - ' . $property->location->zone.', '.$property->location->City; ?></p>
                    <ul class="elementor-icon-list-items elementor-inline-items">
                        <li class="elementor-icon-list-item elementor-inline-item">
                            <span class="elementor-icon-list-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="34.479" height="24.467" viewBox="0 0 34.479 24.467">
                                    <path id="Path_29" data-name="Path 29" d="M-11.578-6.363c.111.005.179.01.246.011.768.011.866.112.866.894q0,.869,0,1.738c0,.529-.176.7-.707.7h-.4c0,.713,0,1.394,0,2.074,0,.529-.177.7-.706.705q-.713,0-1.425,0c-.405,0-.567-.125-.653-.518-.141-.655-.287-1.309-.4-1.969-.04-.238-.13-.3-.356-.3-1.621.008-3.243,0-4.864,0h-20.6c-.135.665-.274,1.318-.4,1.973-.14.736-.219.807-.978.807-.416,0-.834,0-1.25,0a.545.545,0,0,1-.619-.616c0-.705,0-1.411,0-2.163-.2,0-.379.007-.56,0a.522.522,0,0,1-.549-.545q-.014-1.111,0-2.223a.526.526,0,0,1,.565-.563c.171-.007.341,0,.544,0V-7.765q0-1.46,0-2.919A2.238,2.238,0,0,1-41.6-13.041v-.4q0-4.482,0-8.964a2.2,2.2,0,0,1,2.286-2.3h23.244a2.2,2.2,0,0,1,2.271,2.28q0,4.482,0,8.964v.4a2.267,2.267,0,0,1,2.179,1.8,2.531,2.531,0,0,1,.044.552c0,1.434,0,2.869,0,4.34m-3.336-6.669v-.373q0-4.431,0-8.861a1.167,1.167,0,0,0-1.321-1.324H-39.17a1.167,1.167,0,0,0-1.323,1.321q0,4.431,0,8.861v.367h1.113c0-.731,0-1.446,0-2.161a2.2,2.2,0,0,1,2.281-2.27c2.154,0,4.31.036,6.463-.013a2.3,2.3,0,0,1,2.383,2.4c-.041.677-.007,1.359-.007,2.039h1.113c0-.753,0-1.482,0-2.21a2.2,2.2,0,0,1,2.2-2.212q3.354-.007,6.707,0a2.2,2.2,0,0,1,2.214,2.2c0,.649,0,1.3,0,1.947,0,.1.013.2.02.3Zm-27.8,6.658H-12.69v-4.151c0-.977-.413-1.388-1.4-1.388H-41.321c-.1,0-.209,0-.313,0a1.1,1.1,0,0,0-1.075,1.071c-.021,1.48-.007,2.961-.007,4.465m-1.1,2.224H-11.6V-5.223H-43.813Zm14.431-8.892c0-.788.034-1.561-.011-2.33a1.055,1.055,0,0,0-1.077-.983q-3.35-.019-6.7,0a1.058,1.058,0,0,0-1.079.982c-.045.769-.011,1.543-.011,2.331Zm12.243,0c0-.765.016-1.493-.005-2.22a1.1,1.1,0,0,0-1.115-1.1q-3.332-.018-6.664,0a1.019,1.019,0,0,0-1.067.9c-.061.8-.016,1.606-.016,2.414ZM-42.7-1.348a2.558,2.558,0,0,0,.445-.007c.082-.016.2-.086.217-.152.111-.491.2-.986.3-1.488H-42.7Zm29.989-.008V-2.994h-.95c.087.431.2.833.241,1.244.037.346.186.461.511.4a1.779,1.779,0,0,1,.2-.01" transform="translate(44.944 24.702)" fill="#b49968"></path>
                                </svg> </span>
                            <span class="elementor-icon-list-text"><?php echo $property->bedrooms;?></span>
                        </li>
                        <li class="elementor-icon-list-item elementor-inline-item">
                            <span class="elementor-icon-list-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="34.548" height="23.62" viewBox="0 0 34.548 23.62">
                                    <g id="Group_19" data-name="Group 19" transform="translate(0)">
                                        <path id="Path_30" data-name="Path 30" d="M-9.055-7.31l1.419,1.482a.541.541,0,0,1,.151.684.846.846,0,0,1-.508.384.88.88,0,0,1-.594-.257c-.681-.633-1.33-1.3-2.008-1.939a.814.814,0,0,0-.5-.213q-6.79-.017-13.58,0a.762.762,0,0,0-.471.2c-.685.646-1.344,1.32-2.033,1.963a.836.836,0,0,1-.563.25.865.865,0,0,1-.525-.367.53.53,0,0,1,.134-.687q.609-.609,1.23-1.207a3.44,3.44,0,0,1,.3-.229c-.583-.2-1.111-.341-1.6-.561a7.543,7.543,0,0,1-4.347-5.271c-.821-3.122-1.653-6.242-2.532-9.349a1.433,1.433,0,0,1,1.42-1.869q15.3.035,30.606.014h.468A14.524,14.524,0,0,0-2.6-26.01a1.3,1.3,0,0,0-1.332-1.109c-.736,0-1.471.007-2.206.014-.021,0-.041.016-.1.041,0,.255.007.528,0,.8a.673.673,0,0,1-.633.722.668.668,0,0,1-.638-.716c-.011-.471-.014-.943,0-1.414a.623.623,0,0,1,.693-.679c1.09-.005,2.184-.06,3.269.013a2.515,2.515,0,0,1,2.217,2.354c.025.528.005,1.057.024,1.585a.514.514,0,0,0,.143.348,1.4,1.4,0,0,1,.494,1.6c-.67,2.452-1.323,4.909-1.995,7.361a30.322,30.322,0,0,1-.952,3.225,7.254,7.254,0,0,1-5.14,4.478l-.3.079M-33-19.658c.028.123.049.222.075.32.562,2.089,1.116,4.18,1.688,6.267a6.248,6.248,0,0,0,6.1,4.649q7.288,0,14.576,0a6.21,6.21,0,0,0,6-4.5c.55-1.938,1.06-3.886,1.587-5.831.079-.292.151-.586.234-.9H-17.993v.385c0,1.321.009,2.643,0,3.964a2.221,2.221,0,0,1-2.367,2.337c-2.171,0-4.343-.035-6.512.014a2.339,2.339,0,0,1-2.44-2.437c.024-1.3.005-2.6.005-3.895v-.365Zm4.989-3.362a1.532,1.532,0,0,0-.022.168c0,2.526-.006,5.053,0,7.579a.99.99,0,0,0,1.128,1.053q3.255,0,6.51,0a1.019,1.019,0,0,0,1.144-1.145q0-3.651,0-7.3c0-.112-.01-.223-.016-.352Zm25.626,2.053c.1-.343.192-.672.28-1s.169-.654.265-1.033h-16.12v2.034ZM-29.325-23h-4.594c.19.706.367,1.365.543,2.02h4.05Z" transform="translate(35.148 28.374)" fill="#b49968"></path>
                                    </g>
                                </svg> </span>
                            <span class="elementor-icon-list-text"><?php echo $property->bathrooms;?></span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <?php } ?>
    </div>
</div>
<!-- end Card Carousel -->

<script>

/* Card Carousel scripts: */ 

jQuery(document).ready(function(){	
  
  function uc_card_carousel_elementor_d7f3f5c_start(){
      
    var objCarousel = jQuery('#uc_card_carousel_elementor_d7f3f5c');
        
    function initCarousel(){
      
          
      objCarousel.owlCarousel({
                loop: true,
                rtl:false,
                autoplay:true,
                paddingType: "none",    
                autoplayHoverPause:true,
                navText : ["<i class=''></i>","<i class=''></i>"],
                nav: false,
                rewindNav : false,
                center:false,
                mouseDrag:true,
                touchDrag:true,                    
                setActiveClassOnMobile:true,
                changeItemOnClick:false,
                autoplayTimeout:3000,
                smartSpeed: 1000,  
                dots:true,
                shuffle:false,
                scrollToHead:false,
                scrollToHeadOffset: 0,
                autoWidth: false,
                mousewheelControl: false,               
                              
                responsive: {
  
                       0 : {
                            items:1,
                            slideBy: 1,
                            scrollToHeadForceOnMobile: false,        
                            margin:20,
                                                            dotsEach: 1,
                            	
  
                            	        
                        },
                        768 : {
                            items:2,
                            slideBy: 1,
                            margin:20,
                                                            dotsEach: 1,
                            	
  
                            	        
                        },
                        980 : {
                            items:3,
                            slideBy: 1,
                            margin:30,
                             
                                dotsEach: 1,
                            	
  
                            	        
                        }  
                }
      });
    
    }
    
    initCarousel();
    
    objCarousel.on("uc_ajax_refreshed",function(){      
         objCarousel.trigger('destroy.owl.carousel');      
          initCarousel();      
    });  
    
    			
			objCarousel.trigger("uc-object-ready");
			jQuery(document).trigger("uc-remote-parent-init", [objCarousel]);
			  
    
}if(jQuery("#uc_card_carousel_elementor_d7f3f5c").length) uc_card_carousel_elementor_d7f3f5c_start();
  jQuery( document ).on( 'elementor/popup/show', (event, id, objPopup) => { 
  if(objPopup.$element.has(jQuery("#uc_card_carousel_elementor_d7f3f5c")).length) uc_card_carousel_elementor_d7f3f5c_start();});	
});

</script>