@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 col-md-12">
				<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 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-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">Event 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-eventtype">
						@foreach($eventcategories as $eventcategory)
							<li class="col-md-6 web-dropdown-option filter-eventtype"><a class="dropdown-menu-list-option" data-value="{{$eventcategory->id}}">{{$eventcategory->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-6 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">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">
					Venues In {{$states[0]->name}} (<span class="count">{{count($countallvenues)}}</span>)
				</div>
				<input type="hidden" name="total_count" id="total_count" value="{{count($countallvenues)}}" />
			</div>
		</div>
		
		<div class="displayvenues" id="filtered-venues">
			@if($allvenues->count())
				<!-- results appear here -->
				@include('pages.templates.venues')

			@else
				 <p>There are no venues.</p>
			@endif
		</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="pageval" name="pageval" value="1"/>
<input type="hidden" class="hidden token" value="{{ csrf_token() }}"/>
<input type="hidden" class="hidden state_id" value="{{ $states[0]->id }}"/>
<script src="{{URL::asset('public/site_assets/js/jquery.min.js')}}"></script>
<script type="text/javascript">

	$(window).scroll(function()
	{
	    var page = $(".pageval").val();
		if(($(window).scrollTop() + $(window).height() >= $('#filtered-venues').height()) && ((page * 6) <= $("#total_count").val()))
		{

			var page1 = parseInt(page)+1;
			//console.log(page1);
			$(".pageval").val(page1);
			loadMoreData(page1, 'nonfilter');
	    }
	});


	function loadMoreData(page, filtervar)
	{
		var venue_type = [];
		var event_type = [];
		var starcategory = [];
		var chainproperty = [];
		var roomsrequired = $('.filter-roomsrequired.active').children('a').attr('data-value');
		var city = $('.photographer-filter-list-event-city').children("option:selected").val();
		$('.filter-venuetype.active').each(function()
		{
            venue_type.push($(this).children('a').attr('data-value'));
        });
        $('.filter-eventtype.active').each(function()
		{
            event_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'));
        });
		$.ajax(
	        {
	            url: '?page=' + page,
	            type: "get",
				data:{city:city, venue_type:venue_type, event_type:event_type, starcategory:starcategory, chainproperty:chainproperty, roomsrequired:roomsrequired},
	            beforeSend: function()
	            {
	                $('.ajax-load').show();
	            }
				,
				success: function (data)
				{

							$('.ajax-load').hide();
                    if(data.pendingCount == 0)
							{
                         if(filtervar == 'filter')
                         {
                             $(".venuescountsection .count").html(data.resultFound);
                             $("#filtered-venues").html(data.html);

                         }
								$('.ajax-load').html("No more records found");
								return;
							}
							if(filtervar == 'filter')
							{
								$(".venuescountsection .count").html(data.resultFound);
								$("#filtered-venues").html(data.html);

							}
							else
							{
								$("#filtered-venues").append(data.html);
							}


				}
	        });
	}
</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();
	});

	$('.photographer-filter-list-event-city').change(function()
	{
        //$(this).find(".select2-container").hide();
        $(".pageval").val(1);
		loadMoreData(1,'filter');
    });
	$(".web-dropdown-option a.dropdown-menu-list-option").click(function()
	{
		if($(this).parent().hasClass('active'))
		{
            $(this).parent().removeClass('active');
        }
		else
		{
            if($(this).parent().hasClass('filter-maxcapacity'))
			{
                $('.filter-maxcapacity').removeClass('active');
                $(this).parent().addClass('active');
            }
            else if($(this).parent().hasClass('filter-roomsrequired'))
			{
                $('.filter-roomsrequired').removeClass('active');
                $(this).parent().addClass('active');
            }
            else
			{
                $(this).parent().addClass('active');
            }
        }
		$(".pageval").val(1);
		loadMoreData(1,'filter');

	});

});
</script>
@endsection