@extends('app')

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

@section('content')


<div class="headersection">
<div class="container">
<h1>Venues in {{$countries[0]->country_name}}</h1>
</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 {{$countries[0]->country_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>

 
@endsection
<input type="hidden" class="hidden token" value="{{ csrf_token() }}"/>
<input type="hidden" class="hidden country_id" value="{{ $countries[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('country') .'/'. $countries[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>