@extends('main')
@section('styles')
	<style media="screen">
	</style>
@endsection
@section('body_class') class="shopping-cart-page" @endsection
	@section('content')
		<div class="breadcrumbs">
			<div class="container">
				<div class="row">
					<div class="col-xs-12">
						<ul>
							<li class="home">
								<a href="{{ Route('mobily.site.home.page') }}">{{ __('Home') }}</a>
								<span>/</span>
							</li>
							<li>
								<a href="{{ Route('mobily.product.index') }}">{{ __('Products') }}</a>
								<span>/</span>
							</li>
							<li >
								{{ __('Shopping Cart') }}
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<section class="main-container col1-layout">
			<div class="container">
				<div class="block-title">
					<h2>{!! __('Shopping Cart') !!} </h2>
				</div>
				<div class="col-main">
					<div class="cart">
						@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('default')->content()) > 0)
							<div class="table-responsive">
								<fieldset>
									<table class="data-table cart-table" id="shopping-cart-table">
										<thead>
											<tr>
												<th>&nbsp;</th>
												<th><span class="nobr">{{ __('Item') }}</span></th>
												<th></th>
												<th width="10%" class="a-center"><span class="nobr">{{ __('Price') }}</span></th>
												<th width="20%" class="a-center">{{ __('Quantity') }}</th>
												<th width="10%"class="a-center">{{ __('Total') }}</th>
												<th width="5%" class="a-center">{{ __('Cancel') }}</th>
											</tr>
										</thead>
										<tfoot>
											<tr class="first last">
												<th class="a-right last" colspan="50">
													<a href="{{ Route('mobily.product.index') }}"  class="blog-preview_btn">{!! __('Continue Shopping') !!}</a>
													<form action="{{ url('/emptyCart') }}" method="POST" style="float:left">
														{!! csrf_field() !!}
														<input type="hidden" name="_method" value="DELETE">
														<button id="empty_cart_button" class="button btn-empty" title="Clear Cart" value="empty_cart" name="update_cart_action" type="submit"><span>{!! __('Clear Cart') !!}</span></button>
													</form>
												</th>
											</tr>
										</tfoot>
										<tbody>
											@foreach (Cart::instance('default')->content() as $item)
												<tr>
													<td class="image">
														<a class="product-image" title="{{ $item->name }}" href="{{ Route('mobily.product.show',[$item->model->category->slug,$item->model->slug]) }}">
															<img alt="{{ $item->name }}" src="{{ path_img($item->model->image_url) }}">
														</a>
													</td>
													<td>
														<h2 class="product-name">
															<a href="{{ Route('mobily.product.show',[$item->model->category->slug,$item->model->slug]) }}">{{ $item->name }}
															</a>
														</h2>
													</td>
													<td class="a-center">
														<a title="Edit item parameters" class="edit-bnt" href="#">
														</a>
													</td>
													<td class="a-right"><span class="cart-price"> <span class="price">{{ $item->price }} {{ __('EGP') }}</span> </span>
													</td>
													<td class="a-center movewishlist">
														<button data-id="qty-{!! $item->id !!}" data-rowid="{{ $item->rowId }}" name="button" class="button cart-refresh">
															<i class="fa fa-refresh"></i> {!! __('Refresh') !!}
														</button>
														<div class="quantity">
															<input type="number" id="qty-{!! $item->id !!}" class="input-text quantity"  value="{!! $item->qty !!}" name="quantity"  data-id="{{ $item->rowId }}" min="1" max="999" step="1">
															<div class="quantity-nav">
																<div class="quantity-button quantity-up">
																	+
																</div>
																<div class="quantity-button quantity-down">
																	-
																</div>
															</div>
														</div>
													</td>
													<td class="a-right movewishlist">
														<span class="cart-price"> <span class="price">{{ $item->subtotal }} {{ __('EGP') }}</span> </span>
													</td>
													<td class="a-center last">
														<form action="{{ url('cart', [$item->rowId]) }}" method="POST" class="side-by-side">
															{!! csrf_field() !!}
															<input type="hidden" name="_method" value="DELETE">
															<button type="submit" name="button" class="btn btn-danger btn-sm">
																<i class="fa fa-trash-o"></i> {!! __('Cancel') !!}
															</button>
														</form>
													</td>
												</tr>
											@endforeach
										</tbody>
									</table>
								</fieldset>
							</div>
							<div class="cart-collaterals row">
								<div class="col-sm-4">
									<div class="shipping">
										<h3>{!! __('Destination') !!}</h3>
										<div class="shipping-form">
											<select class="form-control" name="destination" id="destination" required>
												<option value="">{{ __('Select destination') }}</option>
												@foreach ($destinations as $destination)
													<option value="{{ $destination->id }}" data-amount="{{ $destination->amount }}">{{ $destination->title }}</option>
												@endforeach
											</select>
										</div>
									</div>
								</div>
								<div class="totals col-sm-4">
									<h3>{!! __('Cart Total') !!}</h3>
									<div class="inner">
										<table class="table shopping-cart-table-total" id="shopping-cart-totals-table">
											<tbody>
												<tr>
													<td  class="a-left" > {!! __('Subtotal') !!} </td>
													<td class="a-right" ><span class="price pull-right">{{ Cart::instance('default')->subtotal(false,false,false) }}</span></td>
													<td>{{ __('EGP') }}</td>
												</tr>
												<tr>
													<td  class="a-left" > {{ __('Delivery') }} </td>
													<td class="a-right" ><span class="pull-right text-right" id="amount_id">0.0</span></td>
													<td>{{ __('EGP') }}</td>
												</tr>
												<tr>
													<td  class="a-left" > {{ __('Order Total') }} </td>
													<td class="a-right" ><span class="pull-right text-right span-total" id="span-total" data-cart="{{ floatval(Cart::instance('default')->subtotal(false,false,false)) }}">{{ Cart::instance('default')->subtotal() }} </span></td>
													<td>{{ __('EGP') }}</td>
												</tr>
											</tbody>

										</table>
										<ul class="checkout">
											<li>
												{!! Form::open(array('route' => 'checkout.cart', 'method' => 'GET','class' => 'mb-0','id' => 'add-form')) !!}
												<input type="hidden" name="location" id="location" value="">
												<button class="button btn-proceed-checkout" title="Proceed to Checkout" type="submit"><span>{!! __('Proceed to Checkout') !!}</span></button>
												{!! Form::close() !!}
											</li>
										</ul>
									</div>
								</div>
							</div>
						@else
							<div class="cart-collaterals row">
								<div class="totals col-sm-4 col-sm-offset-4">
									<h3>{{ __('You have no items in your shopping cart') }}</h3>
									<div class="inner">
										<ul class="checkout">
											<li >
												<a href="{{ Route('mobily.product.index') }}" class="button btn-proceed-checkout">{{ __('Continue Shopping') }} </a>
											</li>
										</ul>
									</div>
								</div>
							</div>
						@endif
					</div>
				</div>
			</div>
		</section>
	@endsection
	@section('scripts')
		<script type="text/javascript">
			(function(){
				$.ajaxSetup({
					headers: {
						'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
					}
				});
				$('.cart-refresh').bind('click', function() {
					var id_qty = $(this).attr('data-id');
					var rowid = $(this).attr('data-rowid');
					$.ajax({
						type: "PATCH",
						method: "PATCH",
						url: '{{ url("/cart") }}' + '/' + rowid,
						data: {
							'quantity': $("#"+id_qty).val(),
						},
						success: function(data) {
							window.location.href = '{{ url('/cart') }}';
						}
					});
				});
				$('.quantity').each(function () {
					var spinner = $(this),
					input = spinner.find('input[type="number"]'),
					btnUp = spinner.find('.quantity-up'),
					btnDown = spinner.find('.quantity-down'),
					min = input.attr('min'),
					max = input.attr('max');
					btnUp.click(function () {
						var oldValue = parseFloat(input.val());
						var newVal = oldValue + 1;
						spinner.find("input").val(newVal);
						spinner.find("input").trigger("change");
					});
					btnDown.click(function () {
						var oldValue = parseFloat(input.val());
						if (oldValue <= min) {
							var newVal = oldValue;
						} else {
							var newVal = oldValue - 1;
						}
						spinner.find("input").val(newVal);
						spinner.find("input").trigger("change");
					});
				});
				//---------------------------------
				$('#destination').on("change",function(){
					var amount = $(':selected', this).data('amount');
					$('#amount_id').html(amount);
					$('#delivery').val(amount);
					$('#location').val($(':selected', this).val());
					var sum = {{ floatval(Cart::instance('default')->subtotal(false,false,false)) }} ;
					sum +=amount;
					$('.span-total').html(sum+ ' ' + "");
				});
				//---------------------------------
			})();
		</script>
	@endsection