@extends('frontend.layouts.master')

@section('title', 'Home')

@section('meta_tags')
	<meta name="description" content="Electric longboard, skateboard, and boardsports community with photos, videos, a message board, board specs/comparisons, classifieds and more.">
@endsection

@section('styles')
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript">
	$('#dataTable').dataTable({
		"order": [[0, 'asc']],
		"order": [[3, 'desc']],
		"columnDefs": [ { "targets": [7], "orderable": false } ],
		"pageLength": 25
	});
</script>
@endsection

@section('content')
				<!-- 
				@php

				$header_image = \App\Models\Site\Header\Image::inRandomOrder()->first();

				@endphp

				<section class="module-header full-height parallax {{ $header_image->css }}" data-background="{{ $header_image->imageURL }}">
					<div class="container">
						<div class="row">
							<div class="col-md-12">

								@if (Auth::guest())

									<h2 class="h2 m-b-15">Welcome to {{ config('app.name') }}</h2>
									<h4 class="h4 m-b-30">Your electric boardsports community site.</h4>
									<p>
										<a class="btn btn-circle btn-brand wow fadeInDown" data-wow-delay="0.9s" href="{{ route('frontend.account.login') }}">Login</a>
										<a class="btn btn-circle btn-brand wow fadeInDown" data-wow-delay="0.9s" href="{{ route('frontend.account.register') }}">Signup</a>
									</p>

								@else

									<h2 class="h2 m-b-15">Welcome back {{ Auth::user()->name }}</h2>
									<h4 class="h4 m-b-30">Your electric boardsports community site.</h4>
									<p><a class="btn btn-circle btn-brand wow fadeInDown" data-wow-delay="0.9s"  href="{{ route('frontend.account.index') }}">My Account</a></p>

								@endif

							</div>
						</div>
					</div>
				</section> -->

				@php $header_image = \App\Models\Site\Header\Image::inRandomOrder()->first(); @endphp

				<section class="module-header parallax {{ $header_image->css }} text-bottom" data-background="{{ $header_image->imageURL }}">
					<div class="container">
						<div class="row">
							<div class="col-md-12 text-left">
								<h1 class="h1">eBoards.info</h1>
								<p>Your electric longboard, skateboard and boardsports community.</p>
							</div>
						</div>
					</div>
				</section>
				<section class="module">
					<div class="container">
						<div class="row">
							<div class="col-md-12">
								<div class="module-title my-0">
									<h2 class="mb-0">Recent News</h2>
									<p class="font-serif">Articles written by our staff about site updates, industry news and more.</p>
								</div>
							</div>
						</div>
						<div class="row blog-grid">

							@foreach($articles as $article)

								<div class="col-md-4 post-item">
									<article class="post">
										<div class="post-preview">
											<a href="{{ route('frontend.article.show', $article->slug) }}"><img src="{{ $article->image_half_url }}" alt="{{ $article->subject }}"></a>
										</div>
										<div class="post-wrapper">
											<div class="post-header">
												<h2 class="post-title"><a href="{{ route('frontend.article.show', $article->slug) }}">{{ $article->subject }}</a></h2>
												<ul class="post-meta h5">
													<li>{{ $article->created_at->diffForHumans() }}</li>
												</ul>
											</div>
											<div class="post-content">
												<p>{{ str_limit($article->body, 300) }}</p>
											</div>
											<div class="post-more"><a href="{{ route('frontend.article.show', $article->slug) }}">Read More →</a></div>
										</div>
									</article>
								</div>

							@endforeach

						</div>
						<div class="row">
							<div class="col-md-12 mb-0">
								<div class="text-center mb-0"><a class="btn btn-lg btn-circle btn-brand mb-0" href="{{ route('frontend.article.index') }}">Visit News</a></div>
							</div>
						</div>
					</div>
				</section>
				<section class="module">
					<div class="container">
						<div class="row">
							<div class="col-md-12">
								<div class="module-title my-0">
									<h2 class="mb-0">{{ str_singular($category->name) }} Comparison</h2>
									<p class="font-serif">A table with the high level attributes for each {{ strtolower(str_singular($category->name)) }} in our database.  For a larger, full width table, click on the full comparison table button below the table.</p>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12">
								<div class="table-responsive">
									<table class="table table-hover" id="dataTable">
										<thead>
											<tr>
												<th scope="col">{{ str_singular($category->name) }} Name</th>

												@foreach($attributes->take(6) as $attribute)

													<th scope="col">{{ $attribute->name }}</th>

												@endforeach

												<th scope="col"></th>

											</tr>
										</thead>
										<tbody>

											@foreach($products->sortBy('name') as $product)

												<tr>
													<td><a href="{{ route('frontend.product.show', $product->slug ) }}">{{ $product->name }}</a></td>

													@foreach($attributes->take(6) as $attribute)

														<td>
															
														@php

															$value = null;
															$value = $product->values->where('attribute_id', $attribute->id)->first();

														@endphp

														@if($attribute->type_id == '1' || $attribute->type_id == '2' || $attribute->type_id == '5')

																@if(!empty($value))

																	{{ $attribute->unit_before }}{{ $value->value }}{{ $attribute->unit_after }}

																@endif

														@elseif($attribute->type_id == '3')

															@php

																$single_select_option = null;

																if(isset($value))
																{
																	$single_select_option = $options->where('id', $value->value)->first();
																}

															@endphp

															@if(isset($single_select_option)){{ $attribute->unit_before }}{{ $single_select_option->name }}{{ $attribute->unit_after }}@endif

														@elseif($attribute->type_id == '4')

															@php

																$multiple_select_options = null;
																if(isset($value)) { $multiple_select_options = explode(',', $value->value); }

															@endphp
																
															@foreach($multiple_select_options as $option)

																@php $value = $options->where('id', $option)->first(); @endphp

																{{ $value->name }}@if($loop->remaining > 0),@endif

															@endforeach

														@elseif($attribute->type_id == '6')

														@elseif($attribute->type_id == '7')

														@endif

														</td>

													@endforeach

													<td><a href="{{ route('frontend.product.show', $product->slug ) }}">Show More!</a></td>
												</tr>

											@endforeach

										</tbody>
									</table>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12">
								<div class="text-center"><a class="btn btn-lg btn-circle btn-brand mt-4" href="{{ route('frontend.product.category.compare', $category->slug) }}">View Full Comparison Table</a></div>
							</div>
						</div>
					</div>
				</section>
				<section class="module">
					<div class="container">
						<div class="row">
							<div class="col-md-12">
								<div class="module-title my-0">
									<h2 class="mb-0">Recent Topics</h2>
									<p class="font-serif">Discussion threads started by our visitors that any signed in user can partisipate in.</p>
								</div>
							</div>
						</div>
						<div class="row blog-grid">

							@if($topics->count() == 0)

								<div class="col-sm-12">
									<p class="text-center">There are no topics.<br>Be the first to post by visting out forums.</p>
								</div>

							@else

								<table class="table table-hover">
									<thead>
										<tr>
											<th width="55%">Topic</th>
											<th width="10%"></th>
											<th width="10%"></th>
											<th width="25%" class="text-right"> <div class="small">Latest Reply</div></th>
										</tr>
									</thead>
									<tbody>

										@foreach($topics as $topic)

											<tr>
												<td><a href="{{ route('frontend.forum.topic.show', $topic->id) }}">{{ str_limit($topic->subject, 70) }}</a><div class="small">Posted by <a href="{{ route('frontend.user.show', $topic->user->id ) }}">{{ $topic->user->name }}</a> in <a href="{{ route('frontend.forum.topic.show', $topic->id) }}">{{ $topic->parent->name }}</a> {{ $topic->created_at->diffForHumans() }}</div></td>
												<td class="text-center">{{ $topic->replies->count() }}<div class="small">Replies</div></td>
												<td class="text-center">{{ $topic->views->count() }}<div class="small">Views</div></td>

												@if( $topic->replies->count() === 0 )

													<td class="text-right">
														No Replies
													</td> 

												@else

													<td class="text-right">
														<small>By <a href="{{ route('frontend.user.show', $topic->replies()->latest()->first()->user->id ) }}">{{ $topic->replies()->latest()->first()->user->name }}</a></small><div class="small">{{ $topic->replies()->latest()->first()->created_at->diffForHumans() }}</div>
													</td>               

												@endif

											</tr>

										@endforeach

									</tbody>
								</table>

							@endif

						</div>
						<div class="row m-t-20">
							<div class="col-md-12">
								<div class="text-center"><a class="btn btn-lg btn-circle btn-brand" href="{{ route('frontend.forum.category.index') }}">Visit Forums</a></div>
							</div>
						</div>
					</div>
				</section>
@endsection