@extends('app')

@section('head_url', Request::url())

@section('content')

<div class="headersection">
	<div class="container">
		<h1>Venues in {{$states[0]->name}}</h1>
	</div>
</div>
<div class="filter-section">
	<div class="container venue-filter">
		<div class="col-md-12 no-padding ">
			<ul class="nav navbar-nav">
				<li class="dropdown photographer-city-select2 select-city-filter"  id="photographer-filter-select-event-city">
					<a class="filter-dropdown" id="filter-city-button">Event City <i class="fa fa-caret-right"></i><i class="fa fa-caret-up" style="display: none;"></i></a>
					<select name="city"  data-placeholder="Select City..." class="photographer-filter-list-event-city form-control chosen-select" tabindex="2">
						<option value=""></option>
						@foreach($cities as $city)
							<option value="{{$city->id}}">{{$city->city_name}}</option>
						@endforeach
					</select>
				</li>
				<li class="dropdown photographer-filter-dropdown">
					<a class="filter-dropdown">Venue Type<i class="fa fa-caret-right"></i><i class="fa fa-caret-up" style="display: none;"></i></a>
					<ul class="dropdown-menu" id="filter-venuetype">
						@foreach($venuecategories as $venuecategory)
							<li class="col-md-6 web-dropdown-option filter-venuetype"><a class="dropdown-menu-list-option" data-value="{{$venuecategory->id}}">{{$venuecategory->category_name}}</a></li>
						@endforeach
					  
					</ul>
				</li>
				<li class="dropdown photographer-filter-dropdown">
					<a class="filter-dropdown">Star Category<i class="fa fa-caret-right"></i><i class="fa fa-caret-up" style="display: none;"></i></a>
					<ul class="dropdown-menu" id="filter-starcategory">
						<li class="col-md-6 web-dropdown-option filter-starcategory"><a class="dropdown-menu-list-option" data-value="1">1 Star</a></li>
						<li class="col-md-6 web-dropdown-option filter-starcategory"><a class="dropdown-menu-list-option" data-value="2">2 Star</a></li>
						<li class="col-md-6 web-dropdown-option filter-starcategory"><a class="dropdown-menu-list-option" data-value="3">3 Star</a></li>
						<li class="col-md-6 web-dropdown-option filter-starcategory"><a class="dropdown-menu-list-option" data-value="4">4 Star</a></li>
						<li class="col-md-6 web-dropdown-option filter-starcategory"><a class="dropdown-menu-list-option" data-value="5">5 Star</a></li>
						<li class="col-md-6 web-dropdown-option filter-starcategory"><a class="dropdown-menu-list-option" data-value="5d">5 Star Deluxe</a></li>
					</ul>
				</li>
				<li class="dropdown photographer-filter-dropdown">
					<a class="filter-dropdown">Chain Property<i class="fa fa-caret-right"></i><i class="fa fa-caret-up" style="display: none;"></i></a>
					<ul class="dropdown-menu" id="filter-chainproperty">
						@foreach($chainproperties as $chainproperty)
							<li class="col-md-12 web-dropdown-option filter-chainproperty"><a class="dropdown-menu-list-option" data-value="{{$chainproperty->id}}">{{$chainproperty->chain_property}}</a></li>
						@endforeach
					  
					</ul>
				</li>
				<li class="dropdown photographer-filter-dropdown">
					<a class="filter-dropdown">Maximum Capacity<i class="fa fa-caret-right"></i><i class="fa fa-caret-up" style="display: none;"></i></a>
					<ul class="dropdown-menu" id="filter-maxcapacity">
						<li class="col-md-6 web-dropdown-option filter-maxcapacity"><a class="dropdown-menu-list-option" data-value="50">Less Than 50</a></li>
						<li class="col-md-6 web-dropdown-option filter-maxcapacity"><a class="dropdown-menu-list-option" data-value="100">50 - 100</a></li>
						<li class="col-md-6 web-dropdown-option filter-maxcapacity"><a class="dropdown-menu-list-option" data-value="150">101 - 150</a></li>
						<li class="col-md-6 web-dropdown-option filter-maxcapacity"><a class="dropdown-menu-list-option" data-value="200">151 - 200</a></li>
						<li class="col-md-6 web-dropdown-option filter-maxcapacity"><a class="dropdown-menu-list-option" data-value="250">201 - 250</a></li>
						<li class="col-md-6 web-dropdown-option filter-maxcapacity"><a class="dropdown-menu-list-option" data-value="300">251 - 300</a></li>
						<li class="col-md-6 web-dropdown-option filter-maxcapacity"><a class="dropdown-menu-list-option" data-value="350">301 - 350</a></li>
						<li class="col-md-6 web-dropdown-option filter-maxcapacity"><a class="dropdown-menu-list-option" data-value="400">351 - 400</a></li>
						<li class="col-md-6 web-dropdown-option filter-maxcapacity"><a class="dropdown-menu-list-option" data-value="450">401 - 450</a></li>
						<li class="col-md-6 web-dropdown-option filter-maxcapacity"><a class="dropdown-menu-list-option" data-value="500">451 - 500</a></li>
						<li class="col-md-6 web-dropdown-option filter-maxcapacity"><a class="dropdown-menu-list-option" data-value="1000">501 - 1000</a></li>
						<li class="col-md-6 web-dropdown-option filter-maxcapacity"><a class="dropdown-menu-list-option" data-value="10001">More Than 1000</a></li>
					</ul>
				</li>
				<li class="dropdown photographer-filter-dropdown">
					<a class="filter-dropdown">Rooms Required<i class="fa fa-caret-right"></i><i class="fa fa-caret-up" style="display: none;"></i></a>
					<ul class="dropdown-menu" id="filter-roomsrequired">
						<li class="col-md-6 web-dropdown-option filter-roomsrequired"><a class="dropdown-menu-list-option" data-value="50">Less Than 50</a></li>
						<li class="col-md-6 web-dropdown-option filter-roomsrequired"><a class="dropdown-menu-list-option" data-value="100">50 - 100</a></li>
						<li class="col-md-6 web-dropdown-option filter-roomsrequired"><a class="dropdown-menu-list-option" data-value="150">101 - 150</a></li>
						<li class="col-md-6 web-dropdown-option filter-roomsrequired"><a class="dropdown-menu-list-option" data-value="200">151 - 200</a></li>
						<li class="col-md-6 web-dropdown-option filter-roomsrequired"><a class="dropdown-menu-list-option" data-value="250">201 - 250</a></li>
						<li class="col-md-6 web-dropdown-option filter-roomsrequired"><a class="dropdown-menu-list-option" data-value="300">251 - 300</a></li>
						<li class="col-md-6 web-dropdown-option filter-roomsrequired"><a class="dropdown-menu-list-option" data-value="350">301 - 350</a></li>
						<li class="col-md-6 web-dropdown-option filter-roomsrequired"><a class="dropdown-menu-list-option" data-value="400">351 - 400</a></li>
						<li class="col-md-6 web-dropdown-option filter-roomsrequired"><a class="dropdown-menu-list-option" data-value="450">401 - 450</a></li>
						<li class="col-md-6 web-dropdown-option filter-roomsrequired"><a class="dropdown-menu-list-option" data-value="500">451 - 500</a></li>
						<li class="col-md-6 web-dropdown-option filter-roomsrequired"><a class="dropdown-menu-list-option" data-value="501">More Than 500</a></li>
					</ul>
				</li>
				
					
			</ul>
		</div>
		
	</div>
</div>


<div class="main-container">
	<div class="container">
		<div class="row">
			<div class="col-md-12 col-sm-12">
				<div class="venuescountsection">
					Showing <span class="count">{{count($countvenues)}}</span> Results in {{$states[0]->name}}
				</div>
				
			</div>
		</div>
		
		<div class="row displayvenues" id="filtered-venues">
		
			@foreach($allvenues as $venues)
				@include('pages.partials.venue')
			@endforeach
			
		</div>
		
		<div class="ajax-load text-center" style="display:none">
			<p><img src="{{URL::asset('public/site_assets/images/ajax-loader.gif')}}">Loading More venues</p>
		</div>
		
		
	</div>
</div>

<input type="hidden" class="hidden token" value="{{ csrf_token() }}"/>
<input type="hidden" class="hidden country_id" value="{{ $states[0]->id }}"/>
<script src="{{URL::asset('public/site_assets/js/jquery.min.js')}}"></script>
<script>
			
var page = 3; //track user scroll as page number, right now page number is 1
load_more(page); //initial content load
$(window).scroll(function() 
{ //detect page scroll
    if($(window).scrollTop() + $(window).height() >= $(document).height()) 
	{ //if user scrolled from top to bottom of the page
        page++; //page number increment
        load_more(page); //load content   
    }
});     
function load_more(page)
{
  $.ajax(
        {
            url: '{{ url('states') .'/'. $states[0]->id .'/properties?page=' }}' + page,
            type: "get",
            datatype: "html",
            beforeSend: function()
            {
                $('.ajax-load').show();
            }
        })
        .done(function(data)
        {
            if(data.length == 0)
			{
				//console.log(data.length);
               
                //notify user if nothing to load
                $('.ajax-load').html("No more records!");
                return;
            }
            $('.ajax-load').hide(); //hide loading animation once data is received
            $("#filtered-venues").append(data); //append data into #results element          
        })
        
 }
</script>
<script> var isDesktop = true; </script>
<script>
$(document).ready(function() 
{
	
	$("#photographer-filter-select-event-city").mouseover(function()
	{
        $(this).find("i.fa.fa-caret-right").hide();
        $(this).find("i.fa.fa-caret-up").show();
        $(this).find(".chosen-container").show();
		$(this).find(".chosen-container").addClass("chosen-with-drop");
		$(this).find(".chosen-container").addClass("chosen-container-active");
		$('.photographer-filter-list-event-city').trigger('chosen:open')
        //$(this).find(".photographer-filter-list-event-city").select2("open");
    });
    $("#photographer-filter-select-event-city").mouseleave(function()
	{
        $(this).find("i.fa.fa-caret-right").show();
        $(this).find("i.fa.fa-caret-up").hide();
        $(this).find(".chosen-container").hide();
		$(this).find(".chosen-container").removeClass("chosen-with-drop");
		$(this).find(".chosen-container").removeClass("chosen-container-active");
		$('.photographer-filter-list-event-city').trigger('chosen:close')
        //$(".photographer-filter-list-event-city").select2("close");
    });
	$(".photographer-filter-dropdown").mouseover(function()
	{
		$(this).find("i.fa.fa-caret-right").hide();
		$(this).find("i.fa.fa-caret-up").show();
		$(this).find("ul.dropdown-menu").show();
	});
	$(".photographer-filter-dropdown").mouseleave(function()
	{
		$(this).find("i.fa.fa-caret-right").show();
		$(this).find("i.fa.fa-caret-up").hide();
		$(this).find("ul.dropdown-menu").hide();
	});
	
	
	$(".web-dropdown-option a.dropdown-menu-list-option").click(function()
	{
		if($(this).parent().hasClass('active'))
		{
            $(this).parent().removeClass('active');
        }
		else 
		{
            $(this).parent().addClass('active');
           
        }
		send_filter_request("");
		
	});
	
	
	function send_filter_request(check)
	{
		var venue_type = [];
		var starcategory = [];
		var chainproperty = [];
		var maxcapacity = [];
		var roomsrequired = [];
		$('.filter-venuetype.active').each(function()
		{
            venue_type.push($(this).children('a').attr('data-value'));
        });
		$('.filter-starcategory.active').each(function()
		{
            starcategory.push($(this).children('a').attr('data-value'));
        });
		$('.filter-chainproperty.active').each(function()
		{
            chainproperty.push($(this).children('a').attr('data-value'));
        });
		$('.filter-maxcapacity.active').each(function()
		{
            maxcapacity.push($(this).children('a').attr('data-value'));
        });
		$('.filter-roomsrequired.active').each(function()
		{
            roomsrequired.push($(this).children('a').attr('data-value'));
        });
		console.log(venue_type);
		console.log(starcategory);
		console.log(chainproperty);
		console.log(maxcapacity);
		console.log(roomsrequired);
		
		
		
		
		
		
		
		
		
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
});
</script>
 
@endsection