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

<div class="container mt-5 mb-5">
	<div class="row">
		<div class="col-md-12 text-center">
			<h1 class="main-title home">
				{{ optionByKey('login_heading')}}
			</h1>
		</div>
		<div class="col-md-12">
			<div class="d-flex justify-content-center tipsaccount">
				<div id="incontroelegantePromoCarousel" data-bs-ride="carousel" class="carousel slide">
					<div class="carousel-inner">
						{!! optionByKey('login_page_slider') !!}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="container mt-5 mb-5 mobile-number-verification-start">
	<div class="row pb-5">
		<div class="col-12 d-flex align-items-center justify-content-start justify-content-sm-center">
			{!! optionByKey('mob_well_done_email') !!}	
		</div>
	</div>

	<div class="row pb-3">
		<div class="col-12">
			<h5 class="text-start fw-bold text-sm-center text-xl color-dark-3">
				{{ optionByKey('replyad_email') }}
			</h5>
			<div class="d-flex pt-2 d-flex align-items-center justify-content-start justify-content-sm-center">
				<div class="d-flex align-items-center">
					<span class="icon-check_circle text-green fs-5"></span>
				</div>
				<span class="mobile-number-verification-start__email ms-2">
					{{$email}}
				</span>
			</div>
		</div>
	</div>

	<div class="row mt-5 mb-4">
		{!! optionByKey('lets_verify_phone') !!}
	</div>


	<div class="row">
		<form method="POST" action="{{ route('phone-number-verification.submit') }}">
			@csrf
				<div class="col-lg-12 mb-4">
					<label class="fw-bold mb-2">
						*{{ optionByKey('verify_phone_number') }}
					</label>
					<div class="mobile-input-component">
						<div class="d-flex align-items-center">
							<div class="flex-grow">
								<div class="mob-tel-input">
									<div aria-label="Country Code Selector" aria-labelledby="listbox" role="button" tabindex="0" class="mvs__dropdown disabled">
										<span class="mvs__selection">
											<span class="mvs__flag in"></span>
										</span>
										<!---->
									</div>
									<input autocomplete="on" id="phone" maxlength="25" name="phone" placeholder="{{ optionByKey('verify_phone_place_holder') }}" tabindex="0" aria-describedby="" type="tel" class="form-control border-0 rounded-0" />
								</div>
								<p class="error-msg" id="error-msg" style="display: none;">{{ optionByKey('verified_phone_error')}}</p>
								@error('phone')
									<small class="text-danger">{{ $message }}</small>
								@enderror
								@error('normalized_phone')
									<small class="text-danger">{{ $message }}</small>
								@enderror
							  
							</div>
							<!---->
						</div>
						<!---->
					</div>        
				</div>
			<div class="col-md-12">
				<button id="send-btn" type="submit" class="btn btn-primary btn-block w-100 m-0 frm-btn fs-6 fw-normal disabled-btn">
					{{ optionByKey('send_verification_code') }}
				</button>
			</div>
		</form>	
	</div>
</div>

            
@endsection
@push('css-styles')

<link rel="stylesheet" href="{{ asset('static/css/login-signup.css') }}?v={{ filemtime(public_path('static/css/login-signup.css')) }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/css/intlTelInput.min.css" />

@endpush

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/intlTelInput.min.js"></script>

<script>
$(document).ready(function () {
	function formatIndianPhone(digits) {
		let formatted = "";
		if (digits.length > 0) formatted = digits.substring(0, 5);
		if (digits.length > 5) formatted += " " + digits.substring(5, 10);
		return formatted;
	}

	function isValidIndianNumber(digits) {
		return /^[6-9]\d{9}$/.test(digits);
	}

	$("#phone").on("input", function () {
		let input = $(this);
		let raw = input.val().replace(/\D/g, ""); // remove non-digits

		if (raw.startsWith("91")) {
			raw = raw.slice(2); // remove country code if typed manually
		}

		if (raw.length === 0) {
			input.val(""); // Remove everything including "+91 "
			$("#error-msg").hide();
			input.removeClass("invalid-input");
			$("#send-btn").addClass("disabled-btn");
			return;
		}

		if (raw.length > 10) {
			raw = raw.substring(0, 10);
		}

		const formatted = formatIndianPhone(raw);
		const fullInput = "+91 " + formatted;
		input.val(fullInput);

		if (raw.length === 10 && isValidIndianNumber(raw)) {
			$("#error-msg").hide();
			input.removeClass("invalid-input");
			$("#send-btn").removeClass("disabled-btn");
		} else {
			$("#error-msg").show();
			input.addClass("invalid-input");
			$("#send-btn").addClass("disabled-btn");
		}
	});

	$("#send-btn").on("click", function () {
		if ($(this).hasClass("disabled-btn")) return;
		const number = $("#phone").val();
	});
});

	

</script>

@endpush