@extends('app')

@section('head_url', Request::url())
@section('meta_title',$states[0]->meta_title.' | '.getcong('site_name'))
@section('meta_keywords',$states[0]->meta_keyword)
@section('meta_description',$states[0]->meta_description)

@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;

        }
        .chosen-select{
            display:none;
        }
        }

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

            }
            .chosen-select{
                display:none;
            }
        }

        /*a.filter-city-button:focus + .chosen-select {*/
        /*    display:block;*/
        /*}*/
    </style>
   <!--  <script>
        $(document).ready(function(){
            $("#filter-city-button").on("click",function(){

                $(".chosen-select").css("display","block !imporatant");


            });
        });
    </script> -->

<div class="headersection">
	<div class="container">
		<h1>Venues in {{$states[0]->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 col-md-12 filter">
{{--				<li style="z-index: 1000" class="dropdown photographer-city-select2 select-city-filter"  id="photographer-filter-select-event-city">--}}
{{--					<a tabindex="0" class="filter-dropdown filter-city-button" 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"  id="chosen-select" data-placeholder="Select City..." class="photographer-filter-list-event-city form-control chosen-select" tabindex="2">--}}
{{--						<option value="Select City"></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">Event City<i class="fa fa-caret-right"></i><i class="fa fa-caret-up" style="display: none;"></i></a>
                 
                 <ul class="dropdown-menu" id="filter-citytype">
                     @foreach($cities as $city)
                         <li class="col-md-12 web-dropdown-option filter-citytype"><a class="dropdown-menu-list-option" data-value="{{$city->id}}">{{$city->city_name}}</a></li>
                     @endforeach

                 </ul> 
             </li>
             <li class="dropdown photographer-filter-dropdown">
					<a class="filter-dropdown">Locality<i class="fa fa-caret-right"></i><i class="fa fa-caret-up" style="display: none;"></i></a> 
					<ul class="dropdown-menu" id="filter-locality"> 
						@foreach($filter_venue_add as $value)
							<li class="col-md-12 web-dropdown-option filter-locality"><a class="dropdown-menu-list-option" data-value="{{$value}}">{{str_replace('_', "", $value)}}</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-12 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">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-12 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-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="main-container">
	<div class="container">
		<div class="row">
			<div class="col-md-12 col-sm-12">
				<div class="venuescountsection">
					<h3>Venues In <span class="statNum"><span class="stateNamChng">{{$states[0]->name}}</span> (<span class="count">{{count($countallvenues)}}</span>)
				</span><span class="loadingCount hidden"><img src="{{URL::asset('public/site_assets/images/ajax-loader.gif')}}"></span></h3>
				</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> -->