@extends('frontend.layouts.master')

@section('title', $category->name)

@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']],
		"columnDefs": [ { "targets": [9], "orderable": false } ],
		"pageLength": 50
	});
</script>

@endsection

@section('content')

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

				<section class="module-header parallax {{ $header_image->css }}" data-background="{{ $header_image->imageURL }}">
					<div class="container-fluid">
						<div class="row">
							<div class="col-md-12 text-left">
								<h1 class="h1">Compare {{ $category->name }}</h1>
								<p>Our complete database.</p>
							</div>
						</div>
					</div>
				</section>
				<section class="module">
					<div class="container-fluid">
						<div class="row">
							<div class="col-md-12">
								<div class="table-responcive">
									<table class="table table-hover" id="dataTable">
										<thead>
											<tr>
												<th scope="col">Board Name</th>

												@foreach($attributes 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 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>
				</section>

@endsection