@extends('app')

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

@section('content')
    <style>


        .photographer-filter-dropdown ul.dropdown-menu {
            width: 240px;

        }
        @media only screen and (max-width: 800px){
            .filter >li{
                width: 33%;
                display: inline;
                float: left;
            }}

        @media only screen and (max-width: 600px){
            .filter >li{
                width: 50%;
                display: inline;
                float: left;
            }}
    </style>

<div class="headersection">
<div class="container">
<h1>{{$eventcategories->category_name}} Venues in {{$cities->city_name}}</h1>
</div>
</div>

<div class="filter-section">
	<div class="container venue-filter" style="width: 99%">
		<div class="col-md-12 no-padding ">
			<ul class="nav navbar-nav filter">
								<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-12 web-dropdown-option filter-starcategory"><a class="dropdown-menu-list-option" data-value="5d">5 Star Deluxe</a></li>
						<li class="col-md-12 web-dropdown-option filter-starcategory"><a class="dropdown-menu-list-option" data-value="5">5 Star</a></li>
						<li class="col-md-12 web-dropdown-option filter-starcategory"><a class="dropdown-menu-list-option" data-value="4">4 Star</a></li>
						<li class="col-md-12 web-dropdown-option filter-starcategory"><a class="dropdown-menu-list-option" data-value="3">3 Star</a></li>
						<li class="col-md-12 web-dropdown-option filter-starcategory"><a class="dropdown-menu-list-option" data-value="2">2 Star</a></li> 
						<li class="col-md-12 web-dropdown-option filter-starcategory"><a class="dropdown-menu-list-option" data-value="1">1 Star</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">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-12 web-dropdown-option filter-roomsrequired"><a class="dropdown-menu-list-option" data-value="50">Less Than 50</a></li>
						<li class="col-md-12 web-dropdown-option filter-roomsrequired"><a class="dropdown-menu-list-option" data-value="100">50 - 100</a></li>
						<li class="col-md-12 web-dropdown-option filter-roomsrequired"><a class="dropdown-menu-list-option" data-value="150">101 - 150</a></li>
						<li class="col-md-12 web-dropdown-option filter-roomsrequired"><a class="dropdown-menu-list-option" data-value="200">151 - 200</a></li>
						<li class="col-md-12 web-dropdown-option filter-roomsrequired"><a class="dropdown-menu-list-option" data-value="250">201 - 250</a></li>
						<li class="col-md-12 web-dropdown-option filter-roomsrequired"><a class="dropdown-menu-list-option" data-value="300">251 - 300</a></li>
						<li class="col-md-12 web-dropdown-option filter-roomsrequired"><a class="dropdown-menu-list-option" data-value="350">301 - 350</a></li>
						<li class="col-md-12 web-dropdown-option filter-roomsrequired"><a class="dropdown-menu-list-option" data-value="400">351 - 400</a></li>
						<li class="col-md-12 web-dropdown-option filter-roomsrequired"><a class="dropdown-menu-list-option" data-value="450">401 - 450</a></li>
						<li class="col-md-12 web-dropdown-option filter-roomsrequired"><a class="dropdown-menu-list-option" data-value="500">451 - 500</a></li>
						<li class="col-md-12 web-dropdown-option filter-roomsrequired"><a class="dropdown-menu-list-option" data-value="501">More Than 500</a></li>
					</ul>
				</li>
				
				<li class="dropdown photographer-filter-dropdown">
					<a class="filter-dropdown">Ceiling Height (in Ft.)<i class="fa fa-caret-right"></i><i class="fa fa-caret-up" style="display: none;"></i></a>
					<ul class="dropdown-menu" id="filter-ceiling"> 
						<li class="col-md-12 web-dropdown-option filter-ceiling"><a class="dropdown-menu-list-option" data-value="1,9.99">LESS THAN 10</a></li>
						<li class="col-md-12 web-dropdown-option filter-ceiling"><a class="dropdown-menu-list-option" data-value="10,15">10 - 15</a></li>
						<li class="col-md-12 web-dropdown-option filter-ceiling"><a class="dropdown-menu-list-option" data-value="15.01,20">16 - 20</a></li>
						<li class="col-md-12 web-dropdown-option filter-ceiling"><a class="dropdown-menu-list-option" data-value="20.01,25">21 - 25</a></li>
						<li class="col-md-12 web-dropdown-option filter-ceiling"><a class="dropdown-menu-list-option" data-value="25.01,30">26 - 30</a></li>
						<li class="col-md-12 web-dropdown-option filter-ceiling"><a class="dropdown-menu-list-option" data-value="30.01">MORE THAN 30</a></li>
					</ul>
				</li>

				<li class="dropdown photographer-filter-dropdown">
					<a class="filter-dropdown">Seating Style<i class="fa fa-caret-right"></i><i class="fa fa-caret-up" style="display: none;"></i></a>
					<ul class="dropdown-menu" id="filter-seatingStyle"> 
						<li class="col-md-12 web-dropdown-option filter-seatingStyle"><a class="dropdown-menu-list-option" data-value="theatre">Theater</a></li>
						<li class="col-md-12 web-dropdown-option filter-seatingStyle"><a class="dropdown-menu-list-option" data-value="classroom">Classroom</a></li>
						<li class="col-md-12 web-dropdown-option filter-seatingStyle"><a class="dropdown-menu-list-option" data-value="ushape">U-shape</a></li>
						<li class="col-md-12 web-dropdown-option filter-seatingStyle"><a class="dropdown-menu-list-option" data-value="boardroom">Boardroom</a></li>
						<li class="col-md-12 web-dropdown-option filter-seatingStyle"><a class="dropdown-menu-list-option" data-value="roundtable">Cluster</a></li>
						<li class="col-md-12 web-dropdown-option filter-seatingStyle"><a class="dropdown-menu-list-option" data-value="cocktail">Cocktail</a></li>
						<li class="col-md-12 web-dropdown-option filter-seatingStyle"><a class="dropdown-menu-list-option" data-value="reception">Reception</a></li>
						<li class="col-md-12 web-dropdown-option filter-seatingStyle"><a class="dropdown-menu-list-option" data-value="banquet">Banquet</a></li>
					</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 seatingValue hidden" id="filter-seatingValue"> 
						<li class="col-md-12 web-dropdown-option filter-seatingValue"><a class="dropdown-menu-list-option" data-value="1,49">LESS THAN 50</a></li>
				        <li class="col-md-12 web-dropdown-option filter-seatingValue"><a class="dropdown-menu-list-option" data-value="50,100">50 - 100</a></li>
				        <li class="col-md-12 web-dropdown-option filter-seatingValue"><a class="dropdown-menu-list-option" data-value="101,150">101 - 150</a></li>
				        <li class="col-md-12 web-dropdown-option filter-seatingValue"><a class="dropdown-menu-list-option" data-value="151,200">151 - 200</a></li>
				        <li class="col-md-12 web-dropdown-option filter-seatingValue"><a class="dropdown-menu-list-option" data-value="201,250">201 - 250</a></li>
				        <li class="col-md-12 web-dropdown-option filter-seatingValue"><a class="dropdown-menu-list-option" data-value="251,300">251 - 300</a></li>
				        <li class="col-md-12 web-dropdown-option filter-seatingValue"><a class="dropdown-menu-list-option" data-value="301,350">301 - 350</a></li>
				        <li class="col-md-12 web-dropdown-option filter-seatingValue"><a class="dropdown-menu-list-option" data-value="351,400">351 - 400</a></li>
				        <li class="col-md-12 web-dropdown-option filter-seatingValue"><a class="dropdown-menu-list-option" data-value="401,450">401 - 450</a></li>
				        <li class="col-md-12 web-dropdown-option filter-seatingValue"><a class="dropdown-menu-list-option" data-value="451,500">451 - 500</a></li>
				        <li class="col-md-12 web-dropdown-option filter-seatingValue"><a class="dropdown-menu-list-option" data-value="501,1000">501 - 1000</a></li>
				        <li class="col-md-12 web-dropdown-option filter-seatingValue"><a class="dropdown-menu-list-option" data-value="1001,200000">MORE THAN 1000</a></li>
					</ul>
				</li>

					
			</ul>
		</div>
		
	</div>
</div>

<div class="tp-breadcrumb">
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <ol class="breadcrumb">
          <li><a href="{{ URL::to('/') }}">Home</a></li>
          <li class="active">{{$cities->city_name}}</li>
		  <li class="active">{{$eventcategories->category_name}} Venues</li>
        </ol>
      </div>
    </div>
  </div>
</div>


<div class="main-container">
	<div class="container">
		<div class="row">
			<div class="col-md-12 col-sm-12">
				<div class="venuescountsection">
					<h3>{{$eventcategories->category_name}} Venues In {{$cities->city_name}} (<span class="count">{{$countallvenues}}</span>)</h3>
				</div>
				<input type="hidden" name="total_count" id="total_count" value="{{$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>
</div>

<input type="hidden" class="pageval" name="pageval" value="1"/>
<input type="hidden" class="hidden token" value="{{ csrf_token() }}"/>
<input type="hidden" class="hidden city_id" value="{{ $cities->id }}"/>
<script src="{{URL::asset('public/site_assets/js/jquery.min.js')}}"></script>
<script type="text/javascript">
	$(document).on('click','.filter-seatingStyle',function(){   
		$('.filter-seatingValue').removeClass('active');  
		if($(this).hasClass("active")==false){
          $('.seatingValue').removeClass('hidden');
		}else{
			$('.seatingValue').addClass('hidden');
		}
	});

$(document).on('click','.filter-locality',function(){ 
	var locality = $(this).children('a').attr('data-value');   
	var city_id = $('.city_id').val(); 
	console.log(city_id+'city');
	$('.filter-venuetype').removeClass('active');
	$('.filter-chainproperty').removeClass('active'); 
	if($(this).hasClass("active")!=''){  
	 var locality='';
    }
	var weburl='