@extends('layouts.content')
@section('title')
	Thanks for your Download
@stop
@section('content')
	<div class="content contentHome">
		<div class="container">
			<div class="row">	
				@include('partials.ads728x90')
				
				<div class="contentdownload">
					<?php foreach($imghidden as $item): ?>
						<span image-id="<?= $item->id ?>" class="spanHidden" style="display:none;"></span>
					<?php endforeach; ?>
					<div class="titleafter">
						<h1>Thanks for your Download</h1>
						<h3>your download should be starting momentarily</h3>
						<p>Here are a few other goodies you may enjoy below</p>
					</div>
					<div class="col-sm-12">
						<div id="media" style="padding-bottom:30px;">

						<?php 
					        $total = DB::table('media')->count();
					        $page = config('view.numPage');
					    	foreach($images as $item): ?>
						    	<div class="item_larger animated single-left col-sm-4" data-id="">
									<div class="item" id="<?= $item->id ?>">
										<input type="hidden" name="_token" value="{{ csrf_token() }}">
										<a href="<?= route('downloadpage', $item->id) ?>" class="head_item item_ajax">
											<img src="{{ config('view.filepath') }}thumb/<?= $item->name ?>">
										</a>
										<a class="content_item" href="<?= route('downloadpage', $item->id) ?>">
											<h3><?= strtoupper($item->title) ?></h3>
											<span class="the-date"><?= date("F j, Y", strtotime($item->created_at)) ?></span>
										</a>
										<div class="item_info">
											<a href="javascript:void(0);" class="buttonlike" align="right" image-id="<?= $item->id ?>"><img src="{{ config('view.rootpath') }}img/icon_like.png"> <b id="id<?= $item->id ?>"><?= $item->count_like ?></b></a>
											<a href="<?= route('downloadpage', $item->id) ?>" class="download" align="right"><img src="{{ config('view.rootpath') }}img/icon_download.png"> <?= $item->count_download ?></a>
										</div>
									</div>
								</div>
							<?php endforeach; ?>
						</div>
						<div class="divloadmore" id="showloadmore"><button id="loadMore" class="load_more btn btn-danger btn-lg btn-block"><i class="fa fa-plus-circle"></i> Load More</button></div>
						<div class="divloadmore" id="loading"><button id="loadMore" class="btn btn-danger btn-lg btn-block"><i class="fa fa-circle-o-notch fa-spin"></i> Loading</button></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- BEGIN JS FRAMEWORK -->
	<script type="text/javascript">
		$(document).ready(function () {
			var callDownload = function(){
				var ids = $('.spanHidden').attr("image-id");
				// redirect to imgdownload
				location.href="/imgdownload/" + ids;
	        }
	        setTimeout(callDownload,3000);

	    	/*loadmore*/
	        var pageNumber = 2;
	        var total = '<?= $total ?>';
	        var page = '<?= $page ?>';
	        $(".load_more").click(function() {
	            $("#showloadmore").hide();   
	            $("#loading").show();
	            var id = $('.spanHidden').attr("image-id");

	            $.ajax
	            ({
	                type: "GET",
	                url: "/loadmoredownload/" + pageNumber,
	                data: {'post_id' : id},
	                success: function(msg)
	                {
	                    $('#media').append(msg);
	                    $("#showloadmore").show(); 
	                    $("#loading").hide();
	                    if ((pageNumber *page)-1 > total) {
	                    	console.log(pageNumber *page);
	                    	console.log(total);
	                        $("#showloadmore").hide(); 
	                    } else {
	                        pageNumber += 1;
	                    }
	                }
	            });
	        });
	        //end loadmore
	    });
	</script>
@stop