<?php

$postID = $post->ID;
$pidxSiteID = get_field('pidx_site_id', 'option');

// Build the List Options
$menuList = "";
if (get_sub_field("show_featured_properties", $postID)) {
	$menuList = $menuList . "<div id='featuredCol' class='flex col mgl-20 brk-700-mgl-0 text-center site-white-bk'><div><a class='featured-link pd-5 brk-700-pd-0'>" . get_sub_field("featured_properties_title", $postID) . "</a></div></div>";
	$startFeed ="featured";
}
// Always show new for now - if (get_sub_field("show_new_properties")) {
	$menuList = $menuList . "<div id='newCol' class='flex col mgl-20 brk-700-mgl-0 text-center '><div><a class='new-link pd-5 brk-700-pd-0'>" . get_sub_field("new_properties_title") . "</a></div></div>";
//}
if (get_sub_field("show_custom_properties")) {
	$menuList = $menuList . "<div id='customCol' class='flex col mgl-20 brk-700-mgl-0 text-center '><div><a class='custom-link pd-5 brk-700-pd-0'>" . get_sub_field("custom_properties_title") . "</a></div></div>";
}

?>

<div class="flex col w-100-p brk-700-w-initial brk-700-order-1 properties-page-top">

    <style>
        .propItem{ transition:0.5s;}
        .prop-cell{
            transition:0.5s;
            background-color:#F2F2F2;
            box-shadow:1px 1px 10px #aaaaaa;
            box-sizing:border-box;
            margin-right: auto; margin-left: auto;
        /* 	cursor:pointer; */
        }
        .prop-cell:hover{
            box-shadow:1px 1px 4px #000;
        }
        .prop-cell-active{
            box-shadow:1px 1px 4px #000;
        }

        .grow { transition: all .2s ease-in-out; }
        .grow:hover { transform: scale(1.01);  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

		.details-button{
			display: inline-block;
			padding: 8px 12px;
			margin: 15px;
/* 			background: #FA6288; */
			border: solid 1px #D5D5D5;
			background-color:<?php echo get_field('color_1', 'option'); ?>;
			color:<?php echo get_field('color_2', 'option'); ?>;
			width: 200px;
		}
		.details-button:hover{
			background-color:<?php echo get_field('color_2', 'option'); ?>;
			color:<?php echo get_field('color_1', 'option'); ?>;
		}
		.details-button span{
			display: inline-block;
		}

		.icon-color{color:<?php echo get_field('color_2', 'option'); ?>}

/* 		.details-button span:before{
			font-family: 'FontAwesome';
			content: '\f085';
			position: relative;
			margin-right: 5px;
			font-size: 110%;
		}
*/

        @media handheld, screen and (max-width:700px){

        }

		</style>

	<div class="section-form site-color-2-bk p-sticky property_page_form">

			<div class="flex row justify-center font-25 brk-700-font-12 pdt-10">
				<div class="flex col justify-center site-black font-w-700 brk-700-dis-none">
					<div class="block pdb-10">Find Your Home</div>
				</div>

				<?php echo $menuList; ?>

				<div class="flex col justify-center mgl-40 brk-700-mgl-0">
					<div class="btn-group block text-center brk-900-dis-none pdb-10">
						<a href="#" id="list" class="btn btn-default btn-sm"><i class="fas fa-list"></i> List View</a> |
						<a href="#" id="grid" class="btn btn-default btn-sm site-white"><i class="fas fa-border-all"></i> Grid View</a>
					</div>
				</div>
			</div>

	</div>

	<div class="flex row brk-700-col justify-center w-85-p brk-1800-w-100-p mgl-auto mgr-auto brk-700-w-100-p">
		<div class="flex col w-100-p brk-700-w-initial brk-700-order-2">
			<div class="pd-30 overflow-autoSTOP brk-700-overflow-initialSTOP property-containerSTOP brk-700-pd-0 brk-700-mgl-auto brk-700-mgr-auto">
				<!-- Load the Feed -->
				<div id="propRowAjax" class="flex row brk-1200-col row-wrap justify-center">
				</div>
			</div>
		</div>
	</div>
</div>
<script>


	<?php // Set start feed
		if ($startFeed == "featured"){ ?>
			$(document).ready(function(){ $(".featured-link").trigger("click");});
		<?php } else { ?>
			$(document).ready(function(){ $(".new-link").trigger("click");});
	<?php } ?>


	function propImageResize() {
		width=$(".post-image").width();
		$(".post-image").css({"height":width/1.49});
	}

    $(window).resize(function() {
		propImageResize();
	});

	// Property List Buttons
	$('.featured-link').click(function(){
		$('#newCol, #customCol').removeClass( "site-white-bk" );
		$('#newCol, #customCol').addClass( "site-color-2-bk" );
		$('#featuredCol').removeClass("site-color-2-bk").addClass( "site-white-bk" );
		display_list("<?php echo $pidxSiteID;?>","featured",<?php echo $postID ?>, "<?php echo get_sub_field("fp_price_low") ?>", "<?php echo get_sub_field("fp_price_high"); ?>","<?php echo get_sub_field("fp_zip_codes"); ?>","<?php echo get_sub_field("fp_select_days"); ?>")
		propImageResize();
	});

	$('.new-link').click(function(){
		$('#featuredCol,#customCol').removeClass( "site-white-bk" );
		$('#featuredCol,#customCol').addClass( "site-color-2-bk" );
		$('#newCol').removeClass("site-color-2-bk").addClass( "site-white-bk" );
		display_list("<?php echo $pidxSiteID;?>","new",<?php echo $postID ?>, "<?php echo get_sub_field("new_price_low") ?>", "<?php echo get_sub_field("new_price_high"); ?>","<?php echo get_sub_field("np_zip_codes"); ?>","<?php echo get_sub_field("np_select_days"); ?>");
		propImageResize();
	});
	$('.custom-link').click(function(){
		$('#newCol,#featuredCol').removeClass( "site-white-bk" );
		$('#newCol,#featuredCol').addClass( "site-color-2-bk" );
		$('#customCol').removeClass("site-color-2-bk").addClass( "site-white-bk" );
		display_list("<?php echo $pidxSiteID;?>","custom",<?php echo $postID ?>, "<?php echo get_sub_field("custom_price_low") ?>", "<?php echo get_sub_field("custom_price_high"); ?>","<?php echo get_sub_field("cp_zip_codes"); ?>","<?php echo get_sub_field("cp_select_days"); ?>");
		propImageResize();
	});

	//Ajax to load XML Feed Lists
	function display_list(pidxSiteID,listType,postID,minPrice,maxPrice,zipCode,selectDays){
		$.post("<?php echo THEME_DIR; ?>/template_parts/property_section/featured_new_a_ajax.php", {"pidxSiteID": pidxSiteID,"propList":listType,"postID":postID, "minPrice":minPrice, "maxPrice":maxPrice,"zipCode":zipCode,"selectDays":selectDays}, function(result){
			$("#propRowAjax").html(result);
		});
		propImageResize();
	}

	// Grid / List Buttons
	$('#list').click(function(event) {
		event.preventDefault();
       //$('.propItem').css({"transition" : "all 0.5s linear"});
        $('.propItem').addClass('w-100-p').removeClass('w-20-p');
        $('.prop-cell').addClass('w-100-p');
        $('.rowItem ').removeClass('table-row').addClass('table-cell');
        var rowWidth = $('.rowItem').width();
		$('#list').addClass('site-white');
		$('#grid').removeClass('site-white');
	});
	$('#grid').click(function(event) {
		event.preventDefault();
        $('.propItem').removeClass('w-100-p').addClass('w-25-p');
        $('.prop-cell').removeClass('w-100-p');
        $('.rowItem ').removeClass('table-cell').addClass('table-row');
        var rowWidth = $('.rowItem').width();
		$('#grid').addClass('site-white');
		$('#list').removeClass('site-white');
	});
</script>
