@extends('main')
@section('styles')
@endsection
@section('content')
	<div class="shop-header bg-color--grey fix-head">
		<div class="container space-y--15">
			<div class="row align-items-center">
				<div class="col-9">
					<h1 class="category-title text-right">{!! __('Total shopping cart') !!}
						@if (sizeof(Cart::instance('default')->content()) > 0)
							<small class="cart-total">
								({{ floatval(Cart::instance('default')->subtotal(false,false,false)) }})
								{{ __('EGP') }}
							</small>
						@endif</h1>
					</div>
					<div class="col-3 text-left">
						<a href="javascript:history.back()" class="back-link">{!! __('Back') !!} <i class="fa fa-long-arrow-left"></i> </a>
					</div>
				</div>
			</div>
		</div>
		<div class="b-seller segments">
			<div class="container">
				<div class="cart-product-area">
					@livewire('mob-app.cart.total-cart',['showButtons' => false])
				</div>
				<div class="shop-list-products-wrapper">
				</div>
				<div class="shop-header bg-color--grey fix-head">
					<div class="container space-y--15">
						<div class="row align-items-center">
							<div class="col-12">
								<h3 class="category-title text-right">{!! __('Place of delivery') !!}</h3>
							</div>
						</div>
					</div>
				</div>
				<div class="shipping">
					<div class="shipping-form">
						{!! Form::open(array('route' => 'mobily.checkout.save', 'method' => 'POST','class' => 'mb-0','id' => 'add-form')) !!}
						<div class="row">
							<div class="col col-12">
								<ol class="one-page-checkout" id="checkoutSteps">
									<li id="opc-billing" class="section allow ">
										@foreach ($addresses as $key => $address)
											<div class="step a-item">
												<input class="radio check-input" type="radio" name="delivery_address" id="delivery-address{!! $key !!}" @if ($loop->first)
													checked
												@endif value="{!! $address->id !!}">
												<label class="form-check-label" for="delivery-address{!! $key !!}">
													<p class="one_page_heading">{!! $address->region !!}</p>
													<b>{!! $address->phone !!}</b>
													<br>
													<b>{!! $address->address !!}</b>
												</label>
											</div>
										@endforeach
										<div class="step a-item">
											<input class="radio check-input" type="radio" name="delivery_address" id="delivery-addres00" value="0" @if (count($addresses) < 1 ) checked @endif>
												<label class="form-check-label" for="delivery-addres00">
													<p class="one_page_heading">{!! __('Place New Delivery') !!}</p>
												</label>
												<div class="new-address row" >
													<div class="col col-12">
														<input class="input-text placeh2" required name="phone" type="text" placeholder="{{ __('Mobile number') }}" value="{{ $address->phone ?? \Auth::user()->mobile }}" />
													</div>
													<div class="col col-4">
														<label for="city" style="margin-top:10px">{{ __('Conservatism') }}</label>
													</div>
													<div class="col col-8">
														<select class="input-text" name="city">
															<option >القاهرة</option>
														</select>
													</div>
													<div class="col col-4">
														<label for="city" style="margin-top:10px">{{ __('City / District') }}</label>
													</div>
													<div class="col col-8">
														<select class="input-text" name="destination_id" id="destination_id" 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 class="col col-12">
														<textarea name="address" rows="3" cols="80" class="input-text placeh2" required placeholder="{{ __('Detailed address') }}"></textarea>
													</div>
												</div>
											</div>
										</li>
									</ol>
								</div>
							</div>
							<div class="shop-header bg-color--grey fix-head">
								<div class="col col-12 space-y--15">
									<h3 class="category-title text-right">{!! __('Payment method') !!}</h3>
								</div>
							</div>
							<div class="container space-y--15">
								<div class="row">
									<div class="col col-12">
										<div class="full-width">
											<input type="radio" name="delivery_pay" id="delivery_pay" value="1" class="radio" checked>
											<label for="delivery_pay">{!! __('Cash on delivery') !!}</label>
											<div class="divider-br">	</div>
											<input type="radio" name="delivery_pay" disabled id="fawry_pay" value="0" class="radio">
											<label for="fawry_pay">{!! __('Pay by Fawry') !!}</label>
											<div class="divider-br">	</div>
											<input type="radio" name="delivery_pay" disabled id="visa_pay" value="0" class="radio">
											<label for="visa_pay">{!! __('Pay using visa') !!}</label>
											<div class="text-center">
												<img src="{!! asset('images/cash-delivery.png') !!}" width="100">
												<img src="{!! asset('images/visa.png') !!}" width="100">
												<img src="{!! asset('images/master.png') !!}" width="100">
												<div class="divider-br">	</div>

											</div>

											<input type="hidden" name="location" id="location" value="">
										</div>
										<div class="flex-full-width">
											<button class="button btn-proceed-checkout" title="{!! __('Proceed Order') !!}" type="submit"><span class="txt">{!! __('Proceed Order') !!}</span></button>
											<a href="{{ Route('mobily.product.index') }}" class="button btn-continue"> {!! __('Continue Shopping') !!}</a>

										</div>
									</div>
								</div>
							</div>
							{!! Form::close() !!}
						</div>
					</div>
				</div>
				<div class="divider-br"></div>
			</div>
		</div>
	@endsection
	@section('scripts')
		{!! Html::script(Theme::current()->assetPath.'/js/jquery.validate.js') !!}
		<script type="text/javascript">
			jQuery(document).ready(function($){
				$('.new-address').hide();
				$('.block-content.sam').matchHeight({
					byRow: true,
					property: 'height',
					target: null,
					remove: false
				});
				$('.cks').click(function() {
					$('.hli').removeClass('hli');
					$('.chk').hide();
					$('.box-chk').show();
					$('.box-chk').removeClass('hide');
					$(this).addClass('hli').find('input').prop('checked', true);
					$(this).find('input').prop('checked', true);
					if ($(this).find('input').val() == 0) {
						$('.new-address').show();
						$('.unicase-input-text').prop('required',true);
					}
					else {
						$('.new-address').hide();
						$('#amount_id').html($(this).data('id'));
						var city = $(this).data('city');
						$('#city_id').html(" ({!! __('To') !!} "+city + " )");
						$('.unicase-form-control').prop('required',false);
					}
					$(this).find('.chk').show();
					$(this).find('.box-chk').hide();
				});
				$('#destination_id').on("change",function(){
					var amount = $(':selected', this).data('amount');
					var city = $(':selected', this).text();
					$('#amount_id').html(amount);
					$('#city_id').html(" ({!! __('To') !!} "+city + " )");
					$('#delivery').val(amount);
					var sum = {{ floatval(Cart::instance('default')->subtotal(false,false,false)) }} ;
					sum +=amount;
					$('.span-total').html(sum+ ' ' + "{{ __('EGP') }}");
				});
				$('input[type="radio"]').click(function(){
					if ($(this).is(':checked'))
					{
						if ($(this).val() == 0) {
							$('.new-address').show();
							$('.unicase-input-text').prop('required',true);
						}
						else {
							$('.new-address').hide();
							$('#amount_id').html($(this).data('id'));
							var city = $(this).data('city');
							$('#city_id').html(" ({!! __('To') !!} "+city + " )");
							$('.unicase-form-control').prop('required',false);
						}
					}
				});
				$.validator.messages.required = "{{__('This field is required.')}}";
				$.validator.messages.email = "{{__('Please enter a valid Email.')}}";
				$("#add-form").validate({
					submitHandler: function(event) {
						$(".preloader-activate").addClass("preloader-active");
						event.preventDefault();
						return false;
					},
					rules: {
						delivery_address: { // <- NAME of every radio in the same group
							required: true
						}
					},
					invalidHandler: function(event, validator) {
						// 'this' refers to the form
						var errors = validator.numberOfInvalids();
						if (errors) {
							var message = errors == 1
							? 'You missed 1 field. It has been highlighted'
							: 'You missed ' + errors + ' fields. They have been highlighted';
							$("div.error span").html(message);
							$("div.error").show();
						} else {
							$("div.error").hide();
						}
					}
				});
			});
		</script>
	@endsection