@extends('site.layouts.default')
@section('content')
<link rel="stylesheet" href="{{ asset('css/payment.css')}}" />

<!-- btc tittle Wrapper Start -->
<div class="btc_tittle_main_wrapper">
	<div class="btc_tittle_img_overlay"></div>
	<div class="container-fluid">
		<div class="row">
			<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 full_width">
				<div class="btc_tittle_left_heading">
					<h1>{{ __('site.payment_page') }}</h1>
				</div>
			</div>
			<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 full_width">
				<div class="btc_tittle_right_heading">
					<div class="btc_tittle_right_cont_wrapper">
						<ul>
							<li><a href="#">Home</a>  <i class="fa fa-angle-right"></i>
							</li>
							<li><a href="#">Cars</a>  <i class="fa fa-angle-right"></i>
							</li>
							<li>{{ __('site.payment_page') }}</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- btc tittle Wrapper End -->
<!-- x tittle num Wrapper Start -->
<div class="x_title_num_mian_Wrapper float_left">
	<div class="container-fluid">
		<div class="x_title_inner_num_wrapper float_left">
			<div class="x_title_num_heading">
				<h3>Choose a car</h3>
				<p>Complete Your Step</p>
			</div>
			<div class="x_title_num_heading_cont">
				<div class="x_title_num_main_box_wrapper">
					<div class="x_icon_num">
						<p>1</p>
					</div>
					<h5>Time & place</h5>
				</div>
				<div class="x_title_num_main_box_wrapper">
					<div class="x_icon_num ">
						<p>2</p>
					</div>
					<h5>Car</h5>
				</div>
				<div class="x_title_num_main_box_wrapper">
					<div class="x_icon_num">
						<p>3</p>
					</div>
					<h5>checkout</h5>
				</div>

				<div class="x_title_num_main_box_wrapper x_title_num_main_box_wrapper3 x_title_num_main_box_wrapper_last">
					<div class="x_icon_num x_icon_num3">
						<p>4</p>
					</div>
					<h5>done!</h5>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- x tittle num Wrapper End -->
<!-- x car book sidebar section Wrapper Start -->
<div class="x_car_book_sider_main_Wrapper float_left">
	<div class="container-fluid">
		<div class="row">
			<div class="col-xl-3 col-lg-4 col-md-12 col-sm-12 col-12">
				<div class="x_car_book_left_siderbar_wrapper float_left">
					<div class="row">
						<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
							<!-- Filter Results -->
							<div class="car-filter accordion x_inner_car_acc_accor">

                <h3>{{ __('site.payment_summary') }}</h3>
								<hr>
								<!-- Resources -->
								<div class="x_car_access_filer_top_img">

									<h3>{{ __('site.type_'.$reservationDetails->type )}}  <br> <br>  {{ $reservationDetails->arac  }}</h3>

									<p>{{ $reservationDetails->total }} USD -
                ({{ $reservationDetails->total_try }}  TRY)</p>
								</div>
								<hr>
							 @if($reservationDetails->type == 'transfer')

								<div class="panel panel-default x_car_inner_acc_acordion_padding x_car_inner_acc_acordion_padding_last">
									<div class="panel-heading car_checkout_caret">
										<h5 class="panel-title"> <a href="#">{{ __('site.pickup_place') }}</a> </h5>
									</div>
									<div class="collapse show">
										<div class="panel-body">
											<div class="x_car_acc_filter_date">
												<ul>
													<li>{{ $reservationDetails->start_time }}</li>
													<li>{{ $reservationDetails->from_where}}</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
								<hr>
								<div class="panel panel-default x_car_inner_acc_acordion_padding x_car_inner_acc_acordion_padding_last">
									<div class="panel-heading car_checkout_caret">
										<h5 class="panel-title"> <a href="#"> {{ __('site.pickoff_place') }}</a> </h5>
									</div>
									<div class="collapse show">
										<div class="panel-body">
											<div class="x_car_acc_filter_date">
												<ul>

													<li> {{ $reservationDetails->to_where }}</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
								<hr>



								 @if($reservationDetails->return_mode == '1')
								<div class="panel panel-default x_car_inner_acc_acordion_padding x_car_inner_acc_acordion_padding_last">
									<div class="panel-heading car_checkout_caret">
										<h5 class="panel-title"> <a href="#"> {{ __('site.return_time') }}</a> </h5>
									</div>
									<div class="collapse show">
										<div class="panel-body">
											<div class="x_car_acc_filter_date">
												<ul>

													<li>{{ $reservationDetails->return_time }}</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
								<hr>
								@endif


              @endif


							@if($reservationDetails->type == 'rentacar_with_driver')

							<div class="panel panel-default x_car_inner_acc_acordion_padding x_car_inner_acc_acordion_padding_last">
								<div class="panel-heading car_checkout_caret">
									<h5 class="panel-title"> <a href="#">{{ __('site.pick_up_location') }}</a> </h5>
								</div>
								<div class="collapse show">
									<div class="panel-body">
										<div class="x_car_acc_filter_date">
											<ul>
												<li>{{ $reservationDetails->start_time }}</li>
												<li>{{ $reservationDetails->from_where}}</li>

											</ul>
										</div>
									</div>
								</div>
							</div>
							<hr>
							<div class="panel panel-default x_car_inner_acc_acordion_padding x_car_inner_acc_acordion_padding_last">
								<div class="panel-heading car_checkout_caret">
									<h5 class="panel-title"> <a href="#"> {{ __('site.duration') }}</a> </h5>
								</div>
								<div class="collapse show">
									<div class="panel-body">
										<div class="x_car_acc_filter_date">
											<ul>

												<li>	{{ $reservationDetails->duration }}</li>
											</ul>
										</div>
									</div>
								</div>
							</div>
							<hr>

						<div class="panel panel-default x_car_inner_acc_acordion_padding x_car_inner_acc_acordion_padding_last">
							<div class="panel-heading car_checkout_caret">
								<h5 class="panel-title"> <a href="#">{{ __('site.driver_lang') }}</a> </h5>
							</div>
							<div class="collapse show">
								<div class="panel-body">
									<div class="x_car_acc_filter_date">
										<ul>


												<li>{{ ucwords($reservationDetails->driver_languages) }}</li>

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

							@endif

              @if($reservationDetails->person_count)
							<div class="panel panel-default x_car_inner_acc_acordion_padding x_car_inner_acc_acordion_padding_last">
								<div class="panel-heading car_checkout_caret">
									<h5 class="panel-title"> <a href="#">{{ __('site.numberofpersons') }}</a> </h5>
								</div>
								<div class="collapse show">
									<div class="panel-body">
										<div class="x_car_acc_filter_date">
											<ul>

												<li>{{ $reservationDetails->person_count  }}</li>
											</ul>
										</div>
									</div>
								</div>
							</div>
              @endif


								<div class="x_car_acc_filter_bottom_total">
									<ul>
										<li>{{ __('site.total')}} <span> {{ $reservationDetails->total }} USD -
                  ({{ $reservationDetails->total_try }}  TRY)</span>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xl-9 col-lg-8 col-md-12 col-sm-12 col-12">
				<div class="x_carbooking_right_section_wrapper float_left">
					<div class="row">
						<div class="col-md-12">
							<div class="x_car_checkout_right_main_box_wrapper float_left">
								<div class="car-filter order-billing margin-top-0">
									<div class="heading-block text-left margin-bottom-0">
										<h4>Billing Details</h4>

									</div>
									<hr>


										<form action="{{ $action }}" id="spRezForm" method="post"  class="billing-form"  onsubmit="return false">

                      {!! csrf_field() !!}

										<ul class="list-unstyled row">
                      <li class="col-md-12">
                        <br>
                          <div class="card-wrapper"></div>
                      </li>
											<li class="col-md-12">
												<label>{{ __('site.card_holder_name') }}  *
													<input  id="CardHolderName" name="CardHolderName" type="text" value="{{ old('CardHolderName')}}" class="form-control" required>
		                      @if($errors->has('CardHolderName'))
		                       <div class="error">{{ $errors->first('CardHolderName') }}</div>
		                      @endif

												</label>
											</li>

                      <li class="col-md-12">
												<label>{{ __('site.card_number_name') }}  *
													<input  id="CardNumber" name="CardNumber" type="text" value="{{ old('CardNumber')}}" class="form-control" required>
		                      @if($errors->has('CardNumber'))
		                       <div class="error">{{ $errors->first('CardNumber') }}</div>
		                      @endif
												</label>
											</li>

                      <li class="col-md-6">
												<label>{{ __('site.card_expire_date') }}  *
													<input  id="CardExpireDat" name="CardExpireDat" type="text" value="{{ old('CardExpireDat')}}" class="form-control" required>
		                      @if($errors->has('CardExpireDat'))
		                       <div class="error">{{ $errors->first('CardExpireDat') }}</div>
		                      @endif
												</label>
											</li>


                      <li class="col-md-6">
												<label>{{ __('site.cvv') }}  *
													<input  id="CardCVV2" name="CardCVV2" type="text" value="{{ old('CardCVV2')}}" class="form-control" required>
		                      @if($errors->has('CardCVV2'))
		                       <div class="error">{{ $errors->first('CardCVV2') }}</div>
		                      @endif
												</label>
											</li>



                      <li class="col-md-12">
    										 <button type="submit" class="submitForm"  data="{{ __('site.loading_text')}}" id="quick-checkout-button-confirm"  style="width: auto; padding: 0 20px; " > {{ __('site.makereservation') }}<i class="fa fa-arrow-right"></i></button>

    									</li>


										<hr>


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

					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- x car book sidebar section Wrapper End -->


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        {!! SG::gv('terms_'.config('app.locale')) !!}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>

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



<div id="htmlOnay">

</div>

<div id="payment-section" class="col-lg-7 col-md-6 col-12 mt-4 pt-2">
        <div id="grilabs-online-credit-card" class="payment-box" style="display: none;">
            <div class="grilabs-popup-box" id="GrilabsPopupBox">
                <div class="pop-container">
                    <a class="btn btn-primary pop-close-btn">&times;</a>
                    <iframe frameborder="0" src="" width="400" height="500" id="GrilabsPaymentIframe">
                        <html>
                        <head></head>
                        <body></body>
                        </html>
                    </iframe>
                </div>
            </div>
        </div>
</div>

@push('js')
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>

<script>
var
    grilabs_popup_message = "{{ __('site.connacting_bank')}}<br><strong>{{ __('site.please_wait_bank')}}</strong>",
    gl_swal_alert_title = "{{ __('site.some_errors_happend')}}",
    gl_close_button = "{{ __('site.close')}}",
    error_undefined = "{{ __('site.unknown_error')}}";
</script>
<script src="{{ asset('js/jquery.card.js') }}"></script>
<script src="{{ asset('js/payment.js') }}"></script>

@endpush


@stop