@extends('app')

@section('head')
	@parent
	<title>Afana Brothers Co. - Products</title>
@stop

@section('content')

	<!-- Product detail -->
	<section class="sec-product-detail bg0 p-t-105 p-b-70">
		<div class="container">
			<div class="row">
				<div class="col-cm-12 col-md-7 col-lg-6">
					<div class="m-r--50 m-r-0-lg">


						<div class="txt-center wrap-pic-max-s w-full-lg p-t-4 p-b-35">
							<img src="{!! asset("img/$products->pic") !!}" alt="IMG">
						</div>
					

					</div>
				</div>

				<div class="col-md-5 col-lg-6">
					<div class="p-l-70 p-t-35 p-l-0-lg">
						<h4 class="js-name1 txt-l-104 cl3 p-b-16">
							{{ $products->name }}
						</h4>
						
						<p class="txt-s-101 cl6">
							{{ $products->description }}
						</p>

						<div class="txt-s-107 p-t-30 p-b-6">
							<span class="cl6">
								Category:
							</span>

							<span class="cl9">
								{{ $products->category_id == 1 ? 'Cattle' : ($products->category_id == 2 ? 'Sheep' : 'Animal Feed') }}
							</span>
						</div>

						<!-- Tab01 -->
						<div class="tab02 p-t-80">
							<!-- Nav tabs -->
							<ul class="nav nav-tabs" role="tablist">
								<li class="nav-item">
									<span class="nav-link active" data-toggle="tab" role="tab">Additional Information</span>
								</li>
							</ul>

							<!-- Tab panes -->
							<div class="tab-content">
								<!-- - -->
								<div class="tab-pane fade show active" id="info" role="tabpanel">
									<ul class="p-t-21">
										<li class="txt-s-101 flex-w how-bor2 p-tb-14">
											<span class="cl6 size-w-54">
												Counrty of Origin
											</span>

											<span class="cl9 size-w-55">
												{{ $products->country }}
											</span>
										</li>
									</ul>
								</div>


							</div>

						</div>

					</div>
				</div>
			</div>


		</div>
	</section>
	
	<!-- Related product -->
	<section class="sec-related bg0 p-b-85">
		<div class="container">
			<!-- slide9 -->
			<div class="wrap-slick9">
				<div class="flex-w flex-sb-m p-tb-33 p-rl-15 bo-t-1 bocl13">
					<h3 class="txt-l-112 cl3 m-r-20 respon1 p-tb-15">
						RELATED PRODUCTS
					</h3>

					<div class="wrap-arrow-slick9 flex-w m-t-6"></div>
				</div>

				<div class="slick9">
				@foreach ($related_products as $related_product)
					<!-- - -->
					<div class="item-slick9 p-all-15">
						<!-- Block1 -->
						<div class="block1">
							<div class="block1-bg wrap-pic-w bo-all-1 bocl12 hov3 trans-04">
								<img src="{!! asset("img/_$related_product->pic") !!}" alt="IMG">

								<div class="block1-content flex-col-c-m p-b-46">
								@if ($related_product->category_id == 1)
									<a href="{{ URL::route('product.info', ['category' => 'cattle', 'id' => $related_product->id]) }}" class="txt-m-103 cl3 txt-center hov-cl10 trans-04 js-name-b1">
										{{ $related_product->name }}
									</a>
								@elseif ($related_product->category_id == 2)
								<a href="{{ URL::route('product.info', ['category' => 'sheep', 'id' => $related_product->id]) }}" class="txt-m-103 cl3 txt-center hov-cl10 trans-04 js-name-b1">
										{{ $related_product->name }}
									</a>
								@else
								<a href="{{ URL::route('product.info', ['category' => 'feed', 'id' => $related_product->id]) }}" class="txt-m-103 cl3 txt-center hov-cl10 trans-04 js-name-b1">
										{{ $related_product->name }}
									</a>
								@endif

									<span class="block1-content-more txt-m-104 cl9 p-t-21 trans-04">
										{{ $related_product->category_id == 1 ? 'Cattle' : ($related_product->category_id == 2 ? 'Sheep' : 'Animal Feed') }}
									</span>

									<div class="block1-wrap-icon flex-c-m flex-w trans-05">
									@if ($related_product->category_id == 1)
										<a href="{{ URL::route('product.info', ['category' => 'cattle', 'id' => $related_product->id]) }}" class="block1-icon flex-c-m wrap-pic-max-w">
										<img src="{{ asset('img/icons/icon-view.png') }}" alt="ICON">
										</a>
									@elseif ($related_product->category_id == 2)
										<a href="{{ URL::route('product.info', ['category' => 'sheep', 'id' => $related_product->id]) }}" class="block1-icon flex-c-m wrap-pic-max-w">
										<img src="{{ asset('img/icons/icon-view.png') }}" alt="ICON">
										</a>
									@else
										<a href="{{ URL::route('product.info', ['category' => 'feed', 'id' => $related_product->id]) }}" class="block1-icon flex-c-m wrap-pic-max-w">
										<img src="{{ asset('img/icons/icon-view.png') }}" alt="ICON">
										</a>
									@endif
									</div>
								</div>
							</div>
						</div>
					</div>
				@endforeach
				</div>
			</div>
		</div>
    </section>
@stop