@extends('layout.home')
@section('content')

<style type="text/css">
	.config{
		padding-right: 0;
		padding-left: 0;
	}

	.topic{
		color:#2d8ee3;
		margin-bottom: 30px;
	}
	.article-content{
		word-wrap: break-word;

	}

	.item-content{

		height: 100%;    
	}
	.description{
		margin-right: 5px;
		margin-left: 5px;
	}
	.article-content{
		margin-right: 10px;
		margin-left: 10px;
	}

.row {
margin-top: 20px;
}

</style>
@include('layout/header-image')

<div class="container">
	@include('layout.direction')
	<div class="topic">
		{{$page}}
	</div>

	<div class="item-content">

		<div id="article-data">
			@include('layout/post')
		</div>

		@if($news->lastPage()>1)
		<p id="next">Show More</p>
		@endif
	</div>

</div>
<script type="text/javascript">
	var page = 1;
	$("#next").click(function() {
		page++;
		var href = location.search ;
		//alert(href+page);
		loadMoreData(page,href);

	});

	function loadMoreData(page,href){
		$.ajax(
		{
			url: href +'&page='+ page,
			type: "get"
		})
		.done(function(data)
		{
			console.log(data);		
			if(data.html == " "){
				 $('#next').hide();
				return;
			}
        // $('#next').hide();
        $("#article-data").append(data.html);
    })
		.fail(function(jqXHR, ajaxOptions, thrownError)
		{
			alert('server not responding...');
		});
	}


</script>
@endsection