@extends('main')
@section('styles')
@endsection
@section('page-title')
	<section class="navigation">
		<div class="breadcrumbs-wrap">
			<div class="container clearfix">
				<div class="row">
					<div class="col-md-12">
						<h2>
							{{ __('Compare products') }}
						</h2>
						<ul class="breadcrumbs ul--inline ul--no-style">
							<li>
								<a href="{{ Route('mobily.site.home.page') }}">{{ __('Home') }}</a>
							</li>
							<span>/</span>
							<li>
								<a href="{{ Route('mobily.product.index') }}">{{ __('Products') }}</a>
							</li>
							<span>/</span>
							<li class="active">
								{{ __('Compare products') }}
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</section>
@endsection
@section('content')
	<section class="cart-wrap">
		<div class="section-content">
			<div class="container">
				@if (session()->has('success_message'))
					<div class="alert alert-success">
						{{ session()->get('success_message') }}
					</div>
				@endif
				@if (session()->has('error_message'))
					<div class="alert alert-danger">
						{{ session()->get('error_message') }}
					</div>
				@endif
				@if (sizeof(Cart::instance('compare')->content()) > 0)
					<div class="table-responsive">
						<table class="table table-cart m-b-30">
							<tbody>
								<tr>
									@php
										$count = count($products) ? count($products) : 1;
										$width = ceil(100/$count);
									@endphp
									@foreach ($products as $product)
										<td style="Width:{{ $width }}px">
											<table class="table table-cart m-b-30">
												<tr>
													<td>
														<img class="same-size" alt="{{ $product->title }}"  data-title="{{ $product->title }}" src="{{ asset($product->image_url) }}">
													</td>
												</tr>
												<tr>
													<td class="text-left pro-cart">
														<h2>{{ $product->title }}</h2>
														@if ($product->price2)
															<div class="pro__price">
																@if ($product->offer)
																	<span class="old">
																		{{ $product->price2 }}
																	</span>
																	<span class="current">
																		{{ $product->offer }}
																	</span>
																@else
																	<span class="current">
																		{{ $product->price2 }}
																	</span>
																@endif
															</div>
															{{ __('EGP') }}
														@endif
														<div class="row no-gutters m-t-20">
															@if (@$product->category)
																<div class="col-md-12">
																	<div class="li-item">
																		<i class="fa fa-check-circle" aria-hidden="true"></i>
																		<b>{{ __('Category') }}</b> : {!! @$product->category->title !!}
																	</div>
																</div>
															@endif
															@if (@$product->style)
																<div class="col-md-12">
																	<div class="li-item">
																		<i class="fa fa-check-circle" aria-hidden="true"></i>
																		<b>{{ __('Style') }}</b> : {!! @$product->style->title !!}
																	</div>
																</div>
															@endif
															@if (@$product->led)
																<div class="col-md-12">
																	<div class="li-item">
																		<i class="fa fa-check-circle" aria-hidden="true"></i>
																		<b>{{ __('Led') }}</b> : {!! @$product->led->title !!}
																	</div>
																</div>
															@endif
															@if (@$product->roomSetting)
																<div class="col-md-12">
																	<div class="li-item">
																		<i class="fa fa-check-circle" aria-hidden="true"></i>
																		<b>{{ __('Room Setting') }}</b> : {!! @$product->roomSetting->title !!}
																	</div>
																</div>
															@endif
															<div class="col-md-12">
																<div class="li-item">
																	<i class="fa fa-check-circle" aria-hidden="true"></i>
																	<b>{{ __('Dimensions') }}</b> : {!! @$product->length !!}×{!! @$product->width !!}×{!! @$product->height !!}
																</div>
															</div>
														</div>
													</td>
												</tr>
												<tr>
													<td class="same-size2">
														@if ($product->finish->count())
															<div class="row">
																<div class="col-md-12">
																	<h3 class="text-center">{{ __('Finishes') }}</h3>
																</div>
															</div>
															<div class="row">
																@foreach ($product->finish as $key => $finish)
																	<div class="col-md-2 ">
																		<a href="{{ asset($finish->photo) }}"  data-title="{{ $finish->title }}" data-lightbox="finish">
																			<img alt="{{ $finish->title }}"  data-title="{{ $finish->title }}" src="{{ asset($finish->photo) }}">
																		</a>
																	</div>
																@endforeach
															</div>
														@endif
													</td>
												</tr>

											</table>
										</td>
									@endforeach
								</tr>
							</tbody>
						</table>
					</div>
					<div class="cart-button clearfix">
						<tr>
							<td class="text-left">
								<form action="{{ url('emptyCompare') }}" method="POST" class="remove">
									{!! csrf_field() !!}
									<input type="hidden" name="_method" value="DELETE">
									<button class="btn btn-black icon"  title="{{ __('Remove All') }}" type="submit">
										<i class="zmdi zmdi-close"></i> {{ __('Remove All') }}
									</button>
								</form>
							</td>
						</tr>
					</div>
				@else
					<h3>{{ __('You have no items in your Compare list') }}</h3>
					<a href="{{ Route('mobily.product.index') }}" class="btn btn-primary cart-btn">{{ __('Continue Shopping') }}</a>
				@endif
			</div>
		</div>
	</section>
@endsection
@section('scripts')
	<script type="text/javascript">
		jQuery(document).ready(function($){
			var maxHeight = 200;
			$('.same-size').each(function() {
				maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
			});
			$('.same-size').each(function() {
				$(this).height(maxHeight);
			});
			var maxHeight = 10;
			$('.same-size2').each(function() {
				maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
			});
			$('.same-size2').each(function() {
				$(this).height(maxHeight);
			});

		});
	</script>
@endsection