@extends('layouts.dashboardlayout')

@section('content')

	<div class="container">
            <hr class="my-3 bg-transparent border-0">

			 

            <div class="row">
                <div class="col-md-12 text-center">
                    <h1 class="main-title home">{{ optionByKey('buy_coins') }}</h1>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12 mt-5">
                    <div class="card bg-light border-0">
                        <div class="card-body">
                          <h5 class="h6">{{ optionByKey('your_coin_in') }}</h5>
                          <div class="d-flex mt-2 mb-1">
                            <span class="card-link small text-uppercase text-green">{{ optionByKey('current_coins') }}: <strong>{{$availableCoin}}</strong></span>
                            <span class="card-link small text-uppercase">{{ optionByKey('used_coins') }}: <strong>{{$usedCoin}}</strong></span>
                          </div>                          

                          <a class="small" data-href="{{ url('/c/account/transactions/')}}/">
                            <strong>{{ optionByKey('view_history') }}</strong>
                            <span class="icon-arrow-right"></span>
                          </a>                      

                        </div>

                    </div>

                </div>

            </div>
			
			<div class="row" style="display:none;">
				<div class="col-md-12 mt-5">
					<div class="coupon">
						<div class="card mt-2 border-0">
							<div class="card-body p-0">
								<h6 class="card-title">
									<span class="coupon-icon"></span>
									Do you have a Coupon?
								</h6>
								<div class="coupon-frm-box">
									<div class="coupon-input-field">
										<input type="text" class="form-control" id="coupon-code" placeholder="Insert coupon code" />
										<div id="error-message" class="error-message"></div>
										<div id="valid-message" class="succe-valid-message"></div>
									</div>
									<div class="couponfrm-btn">
										<button type="button" id="apply-coupon" class="text-uppercase btn btn-outline-primary">
											Apply
										</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		<form method="post" autocomplete="off" action="/c/account/coins" init-price="0">

			@csrf

            <div class="row">

                <div class="col-md-12 mt-5">                

                        <div class="coins-listing-group">						

						@foreach($coins as $key=>$coin)

							@if($key == 0)

								<div class="coins-item-box d-flex p-4 pt-3 pb-3 align-items-center position-relative mt-4" data-id="{{$coin->coin_name}}" data-coinid="{{$coin->id}}">

                                

                                    <input type="radio" name="coin_price" class="check-radio-btn" value="{{$coin->dis_amount}}">

									

										<div class="d-flex flex-grow-1">

											<div class="coins-icon-big me-3"></div>

											<h5 class="h5 mb-0 me-4">{{$coin->coin_name}} {{ optionByKey('coins_name') }}</h5>

										</div>

										<div class="flex-shrink-1 mt-3 mt-md-0">

											<div class="coin-gride-value">

											   {{ $currency_symbol }} {{$coin->dis_amount}}

											</div>

										</div>

                                </div>



						@else

							

									

							<div class="coins-item-box d-flex  p-4 pt-3 pb-3 align-items-center position-relative mt-4" data-id="{{$coin->coin_name}}" data-coinid="{{$coin->id}}">

                                <input type="radio" name="coin_price" class="check-radio-btn" value="{{$coin->dis_amount}}">

                                <div class="d-flex flex-grow-1">

                                    <div class="coins-icon-big me-3"></div>

                                    <h5 class="h5 mb-0 me-4">{{$coin->coin_name}} {{ optionByKey('coins_name') }} </h5>

                                    <div class="coins-sub-text text-muted">{{$coin->coin_offer}}</div>

                                </div>

                                <div class="d-flex flex-shrink-2 align-items-center mt-3 mt-md-0">

                                    <div class="coins-offer me-4">

                                       {{$coin->coin_discount}}% {{$coin->discount_name}}

                                    </div>

                                    <div class="coin-value ms-2">

                                        <div class="strike"><s>{{ $currency_symbol }} {{$coin->amount}}</s></div>

                                        <div class="coin-gride-value">

                                            {{ $currency_symbol }} {{$coin->dis_amount}}

                                        </div>

                                    </div>

                                </div>

                            </div>

					

						@endif



					   @endforeach		   

							



                        </div>

                  

                </div>

            </div>

             @if ($errors->any())

					<div class="alert alert-danger">

						<ul>

							@foreach ($errors->all() as $error)

								<li>{{ $error }}</li>

							@endforeach

						</ul>

					</div>

				@endif



            <div class="row box-disable" id="wrapperbtn">

			 <input type="hidden" value="" name="coin_dataid" id="coindataid" />

                <div class="col-12 mt-4 d-flex align-items-center justify-content-end">

                    <div class="card border-0">

                        <ul class="list-group list-group-flush">

                          <li class="list-group-item bg-light fs-6 text-end">
                            <strong>{{ optionByKey('totalwrite') }}:</strong>  <span class="text-muted">{{ $currency_symbol }} <span id="addAmount">0.00</span></span>
                          </li>

                          <li class="list-group-item bg-light fs-6 text-end">
                            <strong>{{ optionByKey('total_credits') }}:</strong> <span class="text-muted"><span id="addcoin">0 </span></span>
                          </li>

                        </ul>

                    </div>

                </div>

				

                <div class="col-12 col-md-3  ms-auto mt-3">

                    <button type="submit" name="continue" disabled="disabled" class="btn btn-primary btn-block w-100 common-btn-red">

                        {{ optionByKey('pay_now_btn') }} <span class="icon-right-arrow-svgrepo-com"></span>

                    </button>

                </div>

            </div>

	  </form>		

	<div class="row">
		<div class="col-md-12 mt-5">

			@include('includes.need_help')   
		
		</div>
	</div>
	
	
</div>


@endsection

@push('scripts')

<script> 

	document.addEventListener('DOMContentLoaded', function () {
		$('.coins-listing-group .coins-item-box').click(function(){
			$(this).addClass('active');
			$(this).siblings().removeClass('active');
			var selValue = $("input[type='radio']:checked").val();
			var getCoin = $(this).data("id");
			var getCoinid = $(this).data("coinid");
			$('input[name="coin_dataid"]').val(getCoinid);
			$('#addAmount').empty();
			$('#addAmount').prepend(selValue);
			$('#addcoin').empty();
			$('#addcoin').prepend(getCoin);
			$('.common-btn-red').removeAttr("disabled");
			$('#wrapperbtn').removeClass("box-disable");
		});

		$(".coins-item-box").click(function() {
		  if ( $('.coins-pay-buton-wrapper .common-btn-red').attr('disabled') == "disabled" ) {
			return false;
		  }
		});
	});

	//Coupon Code validation
	const couponInput = document.getElementById('coupon-code');
	const errorMessage = document.getElementById('error-message');
	const validMessage = document.getElementById('valid-message');
	function validateCouponCode(code) {
		if (code === '') {
			return { isValid: false, message: 'Please enter a coupon code.' };
		} else if (code.length < 5) {
			return { isValid: false, message: 'Coupon code must be at least 5 characters long.' };
		} else {
			return { isValid: true, message: 'Coupon code is valid!' };
		}
	}

	couponInput.addEventListener('keyup', function() {
		const couponCode = couponInput.value.trim();
		const { isValid, message } = validateCouponCode(couponCode);
		// Clear previous messages and styles
		couponInput.classList.remove('valid', 'invalid');
		errorMessage.textContent = '';
		validMessage.textContent = '';

		if (isValid) {
			couponInput.classList.add('valid');
			validMessage.textContent = message;
		} else {
			couponInput.classList.add('invalid');
			errorMessage.textContent = message;
		}
	});

	document.getElementById('apply-coupon').addEventListener('click', function() {
		const couponCode = couponInput.value.trim();
		const { isValid, message } = validateCouponCode(couponCode);

		// Clear previous messages and styles
		couponInput.classList.remove('valid', 'invalid');
		errorMessage.textContent = '';
		validMessage.textContent = '';

		if (isValid) {
			couponInput.classList.add('valid');
			validMessage.textContent = message;
		} else {
			couponInput.classList.add('invalid');
			errorMessage.textContent = message;
		}
	});
</script>



@endpush