@extends('layouts.content')
@section('title')
	Categories page
@stop
@section('content')
	<div class="content contentCategories">
		<div class="container">
			<div class="row">
				<div class="col-sm-12 cntcategories">
					<h1><?= ucfirst($category->name) ?> Category</h1>
					<div id="media" style="padding-bottom:30px;">
					<?php
						$total = $total;
				        $page = config('view.numPage');
						$categoriesparent = DB::table('categories')->where('parentID', '=', 0)->where('url_slug', '=', $category->url_slug)->first();
						if ($categoriesparent != null) {
							$categorychild = DB::table('categories')->where('parentID', '=', $categoriesparent->id)->get();
							if (!empty($categorychild)) {
								foreach($categorychild as $item){
									$mediachild = DB::table('media')->where('category_id', '=', $item->id)->orderBy('created_at', 'DESC')/*->take(12)*/->get();
					        		foreach($mediachild 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		}
								}
							} else{
								$mediachild = DB::table('media')->where('category_id', '=', $categoriesparent->id)->orderBy('created_at', 'DESC')/*->take(12)*/->get();
								
								foreach ($mediachild 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	}
							}
						} else{
					        if (!empty($media->toArray())) {
					    		foreach($media 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;
							} else{
							echo "<p style='font-size: 18px;color: #159;'>Sorry, it looks like there are not any items in this Category</p>";
							}
						}
					?>
					<script type="text/javascript">
					    jQuery(document).ready(function($){
					        /*setTimeout(function(){
					            $(".Productloader").css('display','none');
					        }, 1000);*/
					        //loadmore

					        var pageNumber = 2;
					        var total = '<?= $total ?>';
					        var page = '<?= $page ?>';
					        var url_slug ='<?= $category->url_slug ?>';
					        console.log(page *(pageNumber-1));
					        console.log(url_slug);
		                    if ((page *(pageNumber-1)) > total) {
		                        $("#showloadmore").hide();
		                    }
					        $(".load_more").click(function() {
					            $("#showloadmore").hide();   
					            $("#loading").show();   

					            $.ajax
					            ({
					                type: "GET",
					                url: "/loadmorecategories/" + pageNumber + '/' + url_slug,
					                success: function(msg)
					                {
					                    $('#media').append(msg);
					                    $("#showloadmore").show(); 
					                    $("#loading").hide();
					                    if ((pageNumber *page)-1 > total) {
					                        $("#showloadmore").hide();
					                    } else {
					                        pageNumber += 1;
					                    }
					                }
					            });
					        });
					        //end loadmore
					    });
					</script>
				</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>
@stop