@extends('layouts.dashboardlayout')
@section('content')

  <div class="container">
            <hr class="my-3 bg-transparent border-0">
            <div class="row">                
                <div class="col-md-12 mt-3">
                    <div class="alert alert-tips-detail text-center mb-0 detail d-flex align-items-center justify-content-center">
                        <div class="img-tips"></div>
                        <div id="carousel-f53435435" class="carousel slide" data-bs-ride="carousel">
                            <div class="carousel-inner">
							
							@foreach(DashboardSliderBottom() as $key=>$notifaction)			

								<div class="carousel-item <br />
<b>Warning</b>:  Undefined variable $key in <b>/home/sdukoin/public_html/resources/views/users/my_cart.blade.php</b> on line <b>15</b><br />
active">

									{{$notifaction->name}}

								</div>

							@endforeach	
								
                            </div>
                        </div>
                                                
                    </div>
                </div>
            </div>
		<form id="payabl" class="payabl" method="POST" action="{{ url('c/cardpayonlinepay') }}">
			<input type="hidden" name="order_id_last" value="{{ $carts->pay_order_id }}" > 
			@csrf
            <div class="row mt-5">			
                <div class="col-md-8">                    
                    <h3 class="fs-5 fw-bold mb-3">{!! optionByKey('com_your_purchage') !!}</h3>                    
                    <div class="type-of-payment">
                        <div class="card mb-3 del-icon">                        
                            <div class="card-body position-relative p-2">
                              <h5 class="card-title fs-6 fw-bold d-flex align-items-start mb-3 flex-column">
                                {{ optionByKey('coin_packages')}} {{$carts->total_coin}}
                                <small>1 {{ optionByKey('shopping_product')}}</small>
                              </h5>
                              <div class="coin-buy-text fs-6 fw-bold mt-2 mb-0">
                                {{$currency_symbol}} {{ $carts->amount }}
                              </div>
                              
                            </div> 
                            <span class="icon-bin position-absolute"></span>                        
                        </div>
                        <div class="card active">                        
                            <div class="card-body">
                                <h5 class="card-title fs-6 fw-bold d-flex align-items-center mb-0">
                                    <div class="coins-icon-big me-1"></div>
                                    <span class="visa-icon-cus"></span>
                                </h5>                             
                            </div>                            
                        </div>
                    </div>

                    <div class="mt-4 d-flex">
                        <div class="me-3 d-inline-block">
                            <label for="terms" class="switch switch-left-right">
                                <input id="terms" type="checkbox" name="terms" class="switch-input form-control">
                                <span data-on="{{optionByKey('yes_btn')}}" data-off="{{optionByKey('no_btn')}}" class="switch-label"></span>
                                <span class="switch-handle"></span>
                            </label>                           
                        </div>
                        <div class="txt_privacy pe-md-3">
                           {!! optionByKey('terms_shopping_cart') !!}	
						@error('terms')
							 <div id="terms-error" class="error-message">
								{{ $message }}
							 </div>
						@enderror						   
                        </div>
						
                    </div>

                    <div id="terms-error1" class="text-strong danger error-message" style="display: none;">
					{{ optionByKey('terms_error') }}
                    </div>

                    <div class="row">
                    <div class="col-md-12 mt-5">
                        {!! optionByKey('comman_informations') !!}		
                    </div>
                    <div class="col-md-12 mt-5">
						{!! optionByKey('billing_address') !!}                        
                    </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="payment-summary-wrapper p-3">
                        <div class="payment-summary position-relative mb-3">
                            <h2 class="payment-sec-title mb-0">{!! optionByKey('order_summary') !!}</h2>
                            <div class="payment-order-code small">
                                <strong>{!! optionByKey('order_code') !!} : </strong> {{$carts->pay_order_id}}
                            </div>
                            <div class="cart-qy">(01)</div>
                        </div>
                        <div class="sub-total border px-3 p-2 mb-3 rounded-2">
						{{ optionByKey('subtotal_price') }} <span class="float-end">{{$currency_symbol}} {{ $carts->amount }}</span>
                        </div>
                        
                        <button type="submit" name="paynow" id="paynowBtn" class="btn btn-primary btn-block w-100">
							{{ optionByKey('buy_button') }}
                        </button>
                    </div>
                </div>
		    </div>
			</form>
        </div>
	

	<div class="payloader d-flex align-items-center justify-content-center text-center">
		<div class="spinner-border mb-4" style="width: 3rem; height: 3rem; display:none;" role="status">
			<span class="visually-hidden"></span>
		</div>		
	</div>

	

@endsection
@push('scripts')
<script>
    $(document).ready(function() {
        const termsElement = $('#terms');
        const termsErrorElement = $('#terms-error1');
        const termsContainer = $('.switch-left-right');
        $('button[name="paynow"]').click(function(event) {
            let isValid = true;
            if (!termsElement.prop('checked')) {
                event.preventDefault();  
                termsContainer.css('border', '1px solid red');  
                termsErrorElement.show();  
                isValid = false;  
                termsContainer[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
                termsElement.focus(); 
				$('.spinner-border').css('display', 'none');
				$('body').removeClass('overflow-hidden');				
            } else {
                termsContainer.css('border', '0px solid green'); 
                termsErrorElement.hide(); 
				$('.payloader').addClass('payment-loader');
				$('.spinner-border').css('display', 'block');
				$('body').addClass('overflow-hidden');
            }
            if (!isValid) {
                return;
            }
        });

        termsElement.change(function() {
            if (termsElement.prop('checked')) {
                termsContainer.css('border', '0px solid green');   
                termsErrorElement.hide();  
            }
        });
    });
	

</script>
@if (session('message'))
<script>
// PayerrorModal
var $items = $('#payerrorModal');
if($items.length){
    $("#payerrorModal").css("display", "block")
    $('body').addClass('modal-open');
}
$('.closepayerro').on('click', function () {
	$("#payerrorModal").css("display", "none");
	$('body').removeClass('modal-open');
});

</script>
@endif


@endpush