@extends('main')
@section('styles')
	<style media="screen">
	.hide{display: none}
	</style>
@endsection
@section('content')
	<div class="breadcrumbs">
		<div class="container">
			<div class="row">
				<div class="col-xs-12">
					<ul>
						<li class="home">
							<a href="{{ Route('site.home.page') }}">{{ __('Home') }}</a>
							<span>/</span>
						</li>
						<li >
							{{ __("Checkout") }}
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<section class="main-container col1-layout">
		<div class="main container">
			<div class="col-main">
				<div class="cart">
					<div class="block-title">
						<h2>{{ __("Checkout") }}</h2>
					</div>
					<div class="cart-collaterals row">
						<div class="col-sm-8">
							@if (!isDesktop())
								@livewire('front-end.cart.total-cart',['showButtons' => false])
							@endif
							{!! Form::open(array('route' => 'checkout.save', 'method' => 'POST','class' => 'mb-0','id' => 'add-form')) !!}
							<div class="cart">
								<div class="page-title">
									<h4>{!! __('Place of delivery') !!}</h4>
								</div>
							</div>
							<div class="row">
								@foreach ($addresses as $key => $address)
									<div class="col-md-4">
										<div class="block cks block-compare  @if ($loop->first) hli @endif " for="delivery-address{!! $key !!}" data-id="{!! Optional($address->destination)->amount !!}" data-city="{!! Optional($address->destination)->title !!}">
											<div class="block-title">
												<span>{!! Optional($address->destination)->title !!}</span>
											</div>
											<div class="block-content sam">
												<ol id="compare-items">
													<li class="item last odd"> <i class="fa fa-check chk"></i><i class="fa fa-square-o box-chk @if ($loop->first) hide @endif"></i>
														{!! $address->address !!}
													</li>
												</ol>
											</div>
											<input class="opacity0 radio check-input" type="radio" name="delivery_address" id="delivery-address{!! $key !!}" @if ($loop->first) checked @endif value="{!! @$address->id !!}" >
											</div>
										</div>
									@endforeach
									<div class="col-md-4">
										<div class="block cks block-compare">
											<div class="block-title "><span>{!! __('New address') !!}</span></div>
											<div class="block-content sam"> <i class="fa fa-check chk"></i>
												<i class="fa fa-square-o box-chk"></i>
												{!! __('Add new address') !!}
											</div>
											<input class="opacity0 radio check-input" type="radio" @if (count($addresses) < 1 ) checked @endif name="delivery_address" id="delivery-addres00" value="0">
											</div>
										</div>
										<div class="col-md-8 new-address">
											<div class="block block-compare">
												<div class="block-title "><span>{!! __('Place New Delivery') !!}</span></div>
												<div class="block-content ">
													<div class="row">
														<div class="col-sm-3">
															<label for="phone">{{ __('Mobile') }}</label>
														</div>
														<div class="col-sm-8">
															<div class="input-text-wrap">
																<input name="phone" type="text" class="input-text color-2" placeholder="{{ __('Mobile') }}" value="{{ $address->phone ?? \Auth::user()->mobile }}" required>
															</div>
														</div>
													</div>
													<div class="row">
														<div class="col-sm-3">
															<label for="city">{{ __('Conservatism') }}</label>
														</div>
														<div class="col-sm-8">
															<div class="input-text-wrap">
																<select class="" name="city">
																	<option >القاهرة</option>
																</select>
															</div>
														</div>
													</div>
													<div class="row">
														<div class="col-sm-3">
															<label for="destination_id">{{ __('City / District') }}</label>
														</div>
														<div class="col-sm-8">
															<div class="input-text-wrap">
																<select class="input-text color-2" 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>
													</div>
													<div class="row">
														<div class="col-sm-3">
															<label for="address">{{ __('Detailed address') }}</label>
														</div>
														<div class="col-sm-8">
															<div class="input-text-wrap">
																<textarea name="address" rows="3" cols="80" class="input-text color-2" required placeholder="{{ __('Detailed address') }}"></textarea>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-md-12">
											<div class="cart">
												<div class="page-title">
													<h4>{!! __('Payment method') !!}</h4>
												</div>
											</div>
											<input type="radio" name="delivery_pay" id="delivery_pay" value="1" class="radio" checked>
											<label for="delivery_pay">{!! __('Cash on delivery') !!}</label>
											<div class="divid-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="divid-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>
											<input type="hidden" name="location" id="location" value="">
											<button class="button btn-proceed-checkout " title="Proceed to Checkout" type="submit"><span class="txt">{!! __('Proceed to Checkout') !!}</span></button>
											<a href="{{ Route('product.index') }}" class="btn-orang btn-block"> {!! __('Continue Shopping') !!}</a>
										</div>
									</div>
									{!! Form::close() !!}
								</div>
								<div class="totals col-sm-4">
									@if (isDesktop())
										@livewire('front-end.cart.total-cart',['showButtons' => false])
										@widget('Sidebar\DeliveryReturns')
									@endif
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
		@endsection
		@section('scripts')
			{!! Html::script(Theme::current()->assetPath.'/js/jquery.validate.js') !!}
			<script type="text/javascript">
				jQuery(document).ready(function($){
					$('.block-content.sam').matchHeight({
						byRow: true,
						property: 'height',
						target: null,
						remove: false
					});
					@if (count($addresses) < 1 )
					$('.new-address').show();
					@else
					$('.new-address').hide();
					@endif
					$('.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');
							var amount = $(this).data('id');

							var sum = {{ floatval(Cart::instance('default')->subtotal(false,false,false)) }} ;
							sum -= {{ session()->has('coupon') ? session()->get('coupon')['discount'] : 0 }} ;
							sum +=amount;
							$('.span-total').html(sum+ ' ' + "{{ __('EGP') }}");
							$('#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 -= {{ session()->has('coupon') ? session()->get('coupon')['discount'] : 0 }} ;
						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 true;
						},
						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