]<script src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&key=AIzaSyAG9NMmc4jsFHGdy2nJF1Z40deRX6k98AU&libraries=places"></script>
<link rel="stylesheet" link="css/bootstrap-theme.min.css">
<link rel="stylesheet" link="css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.toaster.js"></script>
 
 <style>
     .address p{
    font-size: 20px !important;
    line-height: 30px !important;
}


ul.property_detail.property_detail_show {
    margin: 0 -6px;
    padding-top: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
}


@media only screen and (max-width: 991px){
#property_detail[_ngcontent-c13] ul.property_detail[_ngcontent-c13] li[_ngcontent-c13] {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    width: 25%!important;
    padding: 10px;
}

}

@media only screen and (max-width: 639px){
#property_detail[_ngcontent-c13] ul.property_detail[_ngcontent-c13] li[_ngcontent-c13] {
    width: 50%!important;
}


.property_detail {
    margin: 0 -6px;
    padding-top: 0;
    display: block !important;
}

}
 </style>


<script type="text/javascript">

    var lat = '36.778259';
    var long = '-119.417931';
    var property_pdf_flyer = '';
    var mailto_user_email = '';
    var api_url = 'https://api.iusepropertywebsite.com';
    //var api_url = 'http://dev.singleproperty.com';
    var userID='';
   

    $(document).ready(function(){
        $("#fullsection").css("display", "none");   

        function initialize(lat,long) {
           
           var latlng = new google.maps.LatLng(lat,long);
            var map = new google.maps.Map(document.getElementById('map'), {
              center: latlng,
              zoom: 16
            });
            var marker = new google.maps.Marker({
              map: map,
              position: latlng,
              draggable: false,
              anchorPoint: new google.maps.Point(0, -29)
           });
        }
        
        function validateUrl(url){
            var youtubeExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^#\&\?]*).*/;            
            var vimeoExp = /(videos|video|channels|\.com)\/([\d]+)/;

            if (url != undefined || url != '') {
                var youtubeMatch = url.match(youtubeExp);    
                var vimeoMatch = url.match(vimeoExp);
                
                if (youtubeMatch && youtubeMatch[2].length == 11) {
                    // Do anything for being valid
                    // if need to change the url to embed url then use below line
                    return 'https://www.youtube.com/embed/' + youtubeMatch[2];
                }else if(vimeoMatch){
                    return 'https://player.vimeo.com/video/'+vimeoMatch[2];
                }else {
                    return url;
                }
            }
        }

        $.ajax({
            url: api_url+"/get-property-details",
            type: "post",
            data:  {slug: '1060-alfonso-ave-coral-gables-fl-33146-usa',type:'1', index: 'All'},
            success: function (response) {  
                //console.log(response);
                $("#fullsection").css("display", "block");  
                     
                   // console.log(response);

               var resp = $.parseJSON(response);
               if(resp.status == 0){
                    $("#fullsection").html('').text('No record found for this domain');
               }else{

                    //console.log(response);

                    userID = resp.usersPropertyDetails.user_id;
                    $('.address_resp').html(resp.usersPropertyDetails.property_address);
                    $("#price").html(resp.usersPropertyDetails.price);
                    $("#sq_feet").html(resp.usersPropertyDetails.size);
                    if(resp.usersPropertyDetails.sizelot!=0){
                       $("#lot").html(resp.usersPropertyDetails.sizelot);
                    }
                    else{
                        $("#lot_li").hide();
                    }
                    $("#sizelot_span").html(resp.usersPropertyDetails.sizelot_measurements);
                    $("#Bedrooms").html(resp.usersPropertyDetails.bedrooms);
                    $("#bathrooms").html(resp.usersPropertyDetails.bathrooms);
                    if(resp.usersPropertyDetails.parking!=0){
                      $("#parking_space").html(resp.usersPropertyDetails.parking);
                    }
                    else{
                        $("#parking_space_li").hide();
                    }
                    $("#year_built").html(resp.usersPropertyDetails.builtin);
                    $("#mls").html(resp.usersPropertyDetails.mls);

                    $('#property_description').html(resp.usersPropertyDetails.description);

                    lat = resp.usersPropertyDetails.latitude;
                    long = resp.usersPropertyDetails.longitude;

                    google.maps.event.addDomListener(window, 'load', initialize(lat,long));

                    var videostatuschk =  '1';
                    // alert('videostatus'+videostatuschk)
                    if(resp.usersPropertyDetails.featured_video != null && videostatuschk==1){
                        let URL = validateUrl(resp.usersPropertyDetails.featured_video);
                        if(URL){
                            $("#video").css('display','block');
                            $("#featurevideo").css('display','block');
                            $('#fvideo').html('').html('<iframe src="'+URL+'" width="805" height="538" frameborder="0" allowfullscreen></iframe>');
                        }
                    }

                    if(resp.usersPropertyDetails.featured_3d_video != null && videostatuschk==1){
                        let URL = validateUrl(resp.usersPropertyDetails.featured_3d_video);
                        if(URL){
                            $("#video_view").css('display','block');
                            $("#3d_video").css('display','block');
                            $('#fvideo1').html('').html('<iframe src="'+URL+'" width="805" height="538" frameborder="0" allowfullscreen></iframe>');
                        }
                    }


                    if(resp.usersPropertyDetails.property_logo_url != null){
                        $('#logo_img').html('').html('<a href="javascript:void(0)"><img class="logo_img" src="'+resp.usersPropertyDetails.property_logo_url+'"  alt="" /></a>');    

                        $("#company_logo").html('').html('<a href="javascript:void(0)"><img class="logo_img"  src="'+resp.usersPropertyDetails.property_logo_url+'"  alt="" /></a>');   

                    }

                    if(resp.usersPropertyDetails.property_contact_img_url != null){
                        $('.user_image').html('<img  src="'+resp.usersPropertyDetails.property_contact_img_url+'"  alt="" />'); 
                    }


                    if(resp.usersPropertyDetails.user_contact_website != null && resp.usersPropertyDetails.user_contact_website.includes('http')){
                        $('#user_website').html('<i class="fa fa-globe"></i><a  style="color:#000;" href=http://'+resp.usersPropertyDetails.user_contact_website+'>'+resp.usersPropertyDetails.user_contact_website+'</a>');    
                    }
                    else{
                        if(resp.usersPropertyDetails.user_contact_website != null){
                         $('#user_website').html('<i class="fa fa-globe"></i><a  style="color:#000;" href='+resp.usersPropertyDetails.user_contact_website+'>'+resp.usersPropertyDetails.user_contact_website+'</a>');  
                        }
                        else{
                            $('#user_website').hide();
                        }
                    }

                    if(resp.usersPropertyDetails.property_pdf_url != null){
                        property_pdf_flyer = resp.usersPropertyDetails.property_pdf_url;
                    }
                    if(resp.usersPropertyDetails.user_contact_email != null){
                       $('#mail_to_attach').attr('href',"mailto:"+resp.usersPropertyDetails.user_contact_email+'?subject=Single Property Website by iUSE photography- regarding DOMAIN URL&body=Hello I am interested in your property.I have seen your Single Property Website '+'https://'+resp.usersPropertyDetails.domain+" Thank You");
                        
                    }
                    $('#user_email').html('<i class="fa fa-paper-plane-o"></i><a style="color:#000;" href=mailto:'+resp.usersPropertyDetails.user_contact_email+'>'+resp.usersPropertyDetails.user_contact_email+'</a>');   
                    $('#user_phone').html('<i class="fa fa-phone"></i><a  style="color:#000;" href=tel:'+resp.usersPropertyDetails.user_contact_phone_no+'>'+resp.usersPropertyDetails.user_contact_phone_no+'</a>');   

                    $(".user_name").text(resp.usersPropertyDetails.user_contact_name);
                    
                    $("#property_id").val(resp.usersPropertyDetails.id);

                    var slider_images = resp.usersPropertyDetails.property_images;
                    if(Object.keys(slider_images[0]).length !== 0){
                        var slide = '';
                        $.each(slider_images, function( key, value ) {
                            slide += '<div class="item"><a href="javascript:void(0)"><img src="'+value.property_image_url+'" alt="" /></a></div>';
                        });
                        $('.my-custom-class').html('').html(slide);


                        var owl = $('#home_slider');
                        owl.owlCarousel({
                            items:1,
                            margin:0,
                            nav:true,
                            autoplay:true,
                            dots: ($("#home_slider .item").length > 1) ? true: false,
                            loop:($("#home_slider .item").length > 1) ? true: false,
                            autoHeight:true
                            //onInitialized  : counter, //When the plugin has initialized.
                            //onTranslated : counter //When the translation of the stage has finished.
                        });

                    }

               }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(textStatus, errorThrown);
            }
        });
        
    $("#send").click(function(){
        $('#contact_form').validate({
            errorElement: 'span', //default input error message container
            errorClass: 'help-block', // default input error message class
            focusInvalid: true, // do not focus the last invalid input
            rules: {
                    contact_name: {
                        required: true,
                    },
                    email: {
                        required: true,
                    },
                    phone_no: {
                        required: true
                    },
                 
                    message: {
                        required: true
                    }
                    
                },

                messages: {
                    contact_name: {
                        required: "Name is required",
                    },
                    email: {
                        required: "Email is required.",
                    },
                    phone_no: {
                        required: "Phone No is required."
                    },
                
                    message: {
                        required: "Message is required."
                    }
                },

            invalidHandler: function (event, validator) { //display error alert on form submit   
                $('.alert-danger', $('#contact_form')).show();
            },

            highlight: function (element) { // hightlight error inputs
                $(element).closest('.form_field').addClass('has-error'); // set error class to the control group
            },
            success: function (label) {
                label.closest('.form_field').removeClass('has-error');
                label.remove();
            },
            // errorPlacement: function (error, element) {
            //     error.insertAfter(element.closest('.form-group'));
            // },
        });
        var result = $("#contact_form").valid();    
        if($("#contact_name").val() != ''){
            $.ajax({
                url: api_url+"/save-contact-details",
                type: "post",
                data:  $('#contact_form').serialize(),
                success: function (response) {  
                    var resp = $.parseJSON(response);
                    // alert(resp.message);
                    $.toaster({ priority : 'success', title : '', message : 'Message Sent!'});
                    $('#contact_form')[0].reset();
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown);
                }
            });

        } 
 
        
    });

  });   


  function fbshareCurrentPage()
  {
    window.open("https://www.facebook.com/sharer/sharer.php?u="+escape(window.location.href)+"&t="+document.title, '', 
    'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
    return false; 
  }
  


</script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta property="og:image"  content="https://s3.amazonaws.com/singleproperty/uploads/users/284/property_images/A7406638_1700210943.jpg">
    <meta property="og:title"  content="1060 Alfonso Ave, Coral Gables, FL 33146, USA - iUSE Property Website">
    <meta property="og:description"  content="iUSE Property Website - Get a Property Website for your listing">


    <title>iUSE Property Website - Get a Property Website for your listing</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <!-- Main Style -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Lato:100i,300,300i,400,400i,700,700i" rel="stylesheet"> 
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" media="screen"
     href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
     <link href="css/global.css" rel="stylesheet">
</head>
<!-- style="display: none;" -->
<body  style="display: none;" id='fullsection'>
        <!-- Header Here -->
  <section  id="home">
        <header>
            <div class="container">
                <div id="logo_img" class="logo">
                    
                </div>
                <div class="header_left">
                    <p class="address_resp" >495 Brickell Avenue, unit 302
Miami, Florida, 33131</p>
                </div>
                <nav id="cssmenu">
                    <div id="head-mobile"></div>
                    <div class="button"><i class="fa fa-bars" aria-hidden="true"></i></div>
                    <ul class="list-inline">
                        <li><a href="#home" class="active">Home</a></li>
                        <li><a href="#property_detail">Property Details</a></li>
                        <li><a href="#property_desc">Property Description</a></li>
                        <li id="featurevideo" style="display:none  !important;"><a  href="#video">video</a></li>
                        <li id="3d_video" style="display:none !important;"><a   href="#video_view">3D view</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                    
                </nav>
                <div class="header_bottom_links">
                        <ul>
                            <li><a href="javascript:fbshareCurrentPage()"  class="fa fa-facebook"></a></li>
                            <li><a href="javascript:void(0)" class="fa fa-envelope-o" id="mail_to_attach"></a></li>
                            <li><a id="propery_pdf_link" href="javascript:void(0)">Download <span>Flyer</span></a></li>
                        </ul>
                </div>
            </div>
            
            <div class="overlay"></div>
        </header>
        
        <div id="gallery" class="home_slider">
            <div class="container">

              <div class="box-slider-center">

                <div id="home_slider" class="owl-carousel owl-theme my-custom-class">
                    <div class="item">
                        <a href="javascript:void(0)"><img src="img/slider_image1.jpg" alt="" /></a>
                    </div>
                    <div class="item">
                        <a href="javascript:void(0)"><img src="img/slider_image1.jpg" alt="" /></a>
                    </div>
                    <div class="item">
                        <a href="javascript:void(0)"><img src="img/slider_image1.jpg" alt="" /></a>
                    </div>
                    
                    
                </div>
                <div class="bottom_btn">
                    <a href="javascript:void(0)" class="request-showing" id="request_to_show">Request a showing</a>
                    <div class="arrow bounce"> <a href="#property_detail"><img src="img/arrow_down.png" alt="" /></a></div>
                </div>
                <div class="address">
                    <p class="address_resp"></p>
                </div>
            </div>

            </div>
        </div>
     <div id="counter"></div> 

    </section>

    <!-- Wrapper End -->
    
    <section id="property_detail">
        <div class="container">
            <h2>Property <span>Details</span></h2>
            <ul class="property_detail property_detail_show">
                <li>
                    <a href="javascript:void(0)" class="property_icon"><img src="img/property_icon1.png" alt="" /></a>
                    <p>Price ($)</p>
                    <div  class="property_rate">
                        <span  id="price">0</span>
                    </div>
                </li>
                
                <li>
                    <a href="javascript:void(0)" class="property_icon"><img src="img/property_icon2.png" alt="" /></a>
                    <p>Sq. Ft</p>
                    <div  class="property_rate">
                        <span id="sq_feet" >0</span>
                    </div>
                </li>
                
                <li id="lot_li">
                    <a href="javascript:void(0)" class="property_icon"><img src="img/property_icon3.png" alt="" /></a>
                    <p>Size Lot <span id="sizelot_span">(sf)</span></p>
                    <div class="property_rate">
                        <span id="lot"  >0</span>
                    </div>
                </li>
                
                <li>
                    <a href="javascript:void(0)" class="property_icon"><img src="img/property_icon4.png" alt="" /></a>
                    <p>Bedrooms</p>
                    <div  class="property_rate">
                        <span id="Bedrooms" >0</span>
                    </div>
                </li>
                
                <li>
                    <a href="javascript:void(0)" class="property_icon"><img src="img/property_icon5.png" alt="" /></a>
                    <p>Bathrooms</p>
                    <div  class="property_rate">
                        <span id="bathrooms" >0</span>
                    </div>
                </li>
                
                <li id="parking_space_li">
                    <a href="javascript:void(0)" class="property_icon"><img src="img/property_icon6.png" alt="" /></a>
                    <p>Parking</p>
                   <div class="property_rate">
                        <span id="parking_space">0</span>
                    </div>
                </li>
                
                <li>
                    <a href="javascript:void(0)" class="property_icon"><img src="img/property_icon7.png" alt="" /></a>
                    <p>Year Built</p>
                    <div   class="property_rate">
                        <span id="year_built" >0</span>
                    </div>
                </li>
                
                <li>
                    <a href="javascript:void(0)" class="property_icon"><img src="img/property_icon8.png" alt="" /></a>
                    <p>MLS #</p>
                    <div    class="property_rate">
                        <span id="mls">0</span>
                    </div>
                </li>
            </ul>
        </div>
    </section>
    
    <section id="property_desc">
        <div class="container">
            <h2>Property  <span>Description</span></h2>
            
            <div class="property_description_in">
                <p id="property_description"></p>
            </div>
            
            
        </div>
    </section>

    
    <section style="display:none;" id="video" class="video_section">
        <div class="video_top">
            <div class="container">
                <h2>Featured <span>Video</span></h2>
                <div id="fvideo" class="video_box">
                    
                </div>
            </div>
        </div>


    </section>
    
    <section style="display:none;" id="video_view" class="video_section">
        <div class="video_bottom1">
            <div class="container">
                <h2>Featured   <span>3D Walkthrough Tour</span></h2>
                
                <div id="fvideo1" class="video_box2">
                        
                    </div>
                
            </div>  
        </div>

    </section>
        
    
    
    <section class="login_contact">
        <div class="contact_top">
            <h2>Location <span>Shown on Map</span></h2>
            <div style="width: 100%; min-height: 400px;" id="map" class="map">
                
            </div>
        </div>
        
        <div class="contact_bottom" id="contact">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-lg-6">
                        <h2>Presented <span>By</span></h2>
                        <div class="contact_bottom_in">
                            <div class="contact_form_in show_in">
                                <div class="user_image"><img src="img/user_image1.jpg" alt="" /></div>
                                <h5 class="user_name">Annie Jose Gonzales</h5>
                                <ul class="user_contact">
                                    <li id="user_phone"><i class="fa fa-phone"></i></li>
                                    
                                    <li id="user_email"><i class="fa fa-paper-plane-o"></i></li>

                                    <li id="user_website"><i class="fa fa-globe"></i></li>
                                </ul>
                                
                                <a id="company_logo" href="javascript:void(0)"><img src="img/logo_added.jpg" alt="" /></a>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="col-md-2"></div> -->
                    <div class="col-md-12 col-lg-6" id="req_info">
                        <h2>Request <span>More Information</span></h2>
                        
                        <div class="contact_bottom_in">
                            <div class="contact_form_in">
                                
                                <div class="contact_form">
                                    
                                    <form id="contact_form" method="post" name="contact_form">
                                        <div class="form_field">
                                            <label>Name</label>
                                            <input required id="contact_name" name="contact_name" type="text" placeholder="" />
                                        </div>
                                        <div class="form_field">
                                            <label>Email </label>
                                            <input required name="email" id="email" type="text" placeholder="" />
                                        </div>
                                        <div class="form_field">
                                            <label>Phone</label>
                                            <input required name="phone_no" id="phone_no" type="text" placeholder="" />
                                        </div>
                                     
                                        <div class="form_field">
                                          <label>Request showing for Date</label>

                                            <div id="datetimepicker" class="input-append calender_date">
                                                <input required name="requested_time" id="requested_time" type="text"></input>
                                                <span class="add-on cal-picker">
                                                <i class="fa fa-calendar icon"></i>
                                            </span>
                                            </div>

                                        </div>

                                        <input type="hidden"  name="property_id" id="property_id">
                                        <div class="form_field">
                                            <label>Message</label>
                                            <textarea required name="message" id="message"></textarea>
                                        </div>
                                        <div class="form_field"><button id="send" type="button">Send Request</button></div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>



    <div class="footer">
         <div class="container">
        <h3>iUSE Property Website</h3>
        <ul class="footer_social_links">
            <li><a href="javascript:void(0)"><i class="fa fa-facebook"></i></a></li>
            <li><a href="javascript:void(0)"><i class="fa fa-instagram"></i></a></li>
            <li><a href="javascript:void(0)"><i class="fa fa-youtube"></i></a></li>
        </ul>
        
        <p style="color: #e80c79 !important;" class="copy_right copy_right_publish">This Property Website is created by  <a href="https://www.iusepropertywebsite.com" target="_new" style="color: #e80c79 !important;" class="copy_right_publish" >www.iUSEpropertyWebsite.com</a>
        </p>
    </div>
    </div>
    
    
    <!-- Included JS  -->
    <script src="js/bootstrap.min.js"></script>
      <script type="text/javascript"
     src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
    </script>
    <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

    <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>


    <script src="js/owl.carousel.min.js"></script>
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/custom.js"></script>
    <script>
        $('#propery_pdf_link').click(function(){
            var pid = '268';
            var  property_id = pid;
           var user_id = userID;
           $.ajax({
            url: api_url+"/create-property-pdf",
            type: "post",
            async:false,
            data:  {"property_id":property_id,"user_id":2},
            success: function (response) {
                var resp = $.parseJSON(response);
                    $.toaster({ priority : 'success', title : 'PDF', message : 'Download Successfully!'});
                    window.location.href = api_url + '/get-download?file=' + resp.pdfPath;
                }
            });
        });

       


        $(document).ready(function (){
            $('#cssmenu ul li a').pageNav({'scroll_shift': $('nav').outerHeight() + 155});
            
            $('#datetimepicker').datetimepicker({
             format: 'yyyy-MM-dd',
            });
        });
        
        (function ($)
        {
            $.fn.pageNav = function (User_Settings)
            {
                var $Navigation = this;

                var Settings = $.extend(
                    {
                        'scroll_shift': 0,
                        'active_shift': 0,
                        'active_item':  'active',
                        'duration':     900
                    }, User_Settings);


                var Sizes = [];
                $Navigation.each(function (Key, Value)
                {
                    Sizes[Key] = [];
                    Sizes[Key]['id'] = $(Value).attr('href');
                    Sizes[Key]['value'] = $(Sizes[Key]['id']).offset().top - Settings['scroll_shift'] - Settings['active_shift'];
                    Sizes[Key]['height'] = Sizes[Key]['value'] + $(Sizes[Key]['id']).outerHeight();

                });

                $(window).scroll(function (){
                    var Scroll = $(window).scrollTop();
                    for (var I = 0; I < Sizes.length; I++)
                    {
                        if ((Scroll >= Sizes[I]['value'] && Scroll <= Sizes[I]['height']))
                        {
                            $Navigation.removeClass(Settings['active_item']);
                            $('[href=' + Sizes[I]['id'] + ']').addClass(Settings['active_item']);
                        }
                    }
                });

            };
        })(jQuery);
    </script>
    

</body>

</html>