@extends('layouts.user')
@section('title') {{ __('contents.newOtherRental') }}  @endsection
@section('content')
<h2 class="main-title d-block d-lg-none">{{ __('contents.newOtherRental') }}</h2>
<div class="bg-white card-box border-20">
	<h4 class="dash-title-three">{{ __('contents.selectRetnalType') }}</h4>
	<div class="col-md-12">
		<input type="hidden" id="selected" value=" ">
		<div class="row justify-content-center bring-top mb-25" >
			@php $i=0; @endphp
			@foreach($rental_types as $type)
			<div class="col-sm-4">
				<div class="radio-with-Icon">
					<center>
						<p class="radioOption-Item type float-right">
		                    <input type="radio" name="type" id="RentalType-{{ $i }}" value="{{ $type->id }}" class="ng-valid ng-dirty ng-touched ng-empty RType" aria-invalid="false" style="">
		                    <label for="RentalType-{{ $i++ }}">
		                        <i class="{{  (!empty($type->icon))?$type->icon:'fa-thin fa-city' }} fa-2x"></i> <br> {{ $type->{'title_'.app()->getLocale()} }} <br>
		                    </label>
		                </p>
	                </center>
				</div>
			</div>
			@endforeach
		</div>
		<div class="col-md-12 d-grid">
			<button id="next" href="" class="btn btn-two btn-block" disabled> Next</button>
		</div>
	</div>
</div>
@endsection
@section('script')
<script type="text/javascript">
	$(document).ready(function () {
		// Disable Next button by default
		$('#next').prop('disabled', true);

		// On radio button change
		$('.RType').change(function () {
			$('#next').prop('disabled', false);
		});

		// On click Next
		$('#next').click(function () {
			const selectedType = $('input[name="type"]:checked').val();
			if (!selectedType) {
				toastr.error("Oops! Please select a type to continue...");
				return;
			}
			const route = `{{ route("user.post-new-other-rental", [":dataId"]) }}`.replace(':dataId', selectedType);
			window.location.href = route;
		});
	});
</script>
@endsection