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


<div class="container mt-5 mb-5">

	<div class="row confirm-number-verification">
		<div class="col-lg-12">
				<div class="phone-icon-container">
					<div class="phone-icon">
						<svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 24 24" role="presentation" fill="none" style="flex: 0 0 auto;">
							<!---->
							<path
								d="M10.0376 5.31642L10.6866 6.47934C11.2723 7.52883 11.0372 8.90557 10.1147 9.82804C10.1147 9.82805 10.1147 9.82804 10.1147 9.82805C10.1146 9.82816 8.99588 10.9471 11.0245 12.9757C13.0525 15.0037 14.1714 13.8863 14.1722 13.8855C14.1722 13.8855 14.1722 13.8855 14.1722 13.8855C15.0947 12.9631 16.4714 12.7279 17.5209 13.3136L18.6838 13.9627C20.2686 14.8471 20.4557 17.0695 19.0628 18.4624C18.2258 19.2994 17.2004 19.9507 16.0669 19.9937C14.1588 20.066 10.9183 19.5831 7.6677 16.3325C4.41713 13.082 3.93421 9.84147 4.00655 7.93333C4.04952 6.79984 4.7008 5.77448 5.53781 4.93748C6.93076 3.54453 9.15317 3.73168 10.0376 5.31642Z"
								fill="currentColor"
							></path>
						</svg>
					</div>
				</div>
				<div class="d-flex flex-column">
					<p class="phone-number-verification-title text-center">{{ optionByKey('verify_check_phone') }}</p>
					<p class="fw-bold phone-number-verification-description text-center px-2">
						{{ optionByKey('send_6digit_code') }} {{ $phone }}
					</p>
					<span id="otp-timer" class="phone-number-verification-timer text-center fs-5 fw-bold">
						
					</span>
					
				
					
				</div>
			
		</div>
		
@if(session('otp'))			
	<div class="col-md-12 my-4">
		<div role="alert" class="p-4 alert alert-warning rounded-14 d-flex align-items-center">
			<div class="d-inline-flex me-2">
				<i aria-hidden="true" class="ye-ow fs-4 icon-exclamation-triangle mr-2"></i>
			</div>
			<div>
				<h6 class="mb-0 text-black">{{ optionByKey('verified_incorrect_code') }}</h6>
				<h5 class="small mb-0 text-muted">{{ optionByKey('verified_request_new_ones') }}</h5>
			</div>
		</div>
	</div>
@endif	
	   
 <form method="POST" action="{{ route('verify.otp') }}">
	@csrf
	<input type="hidden" id="phone" name="phone" value="{{ old('phone', session('phone')) }}">
		<input type="hidden" name="code" id="otp-hidden-code">
		<div class="col-lg-12">
			<div class="input-digits__wrapper">
				<h6 class="fw-bold mb-3">{{ optionByKey('verify_enter_code') }}</h6>
				<div class="otp-wrapper mb-3">
					<input type="text" id="input-digits-1" maxlength="1" class="otp-input" />
					<input type="text" id="input-digits-2" maxlength="1" class="otp-input" />
					<input type="text" id="input-digits-3" maxlength="1" class="otp-input" />
					<input type="text" id="input-digits-4" maxlength="1" class="otp-input" />
					<input type="text" id="input-digits-5" maxlength="1" class="otp-input" />
					<input type="text" id="input-digits-6" maxlength="1" class="otp-input" />
				</div>
				
				<div class="resend-text d-flex algin-items-center">
					{{ optionByKey('verify_didnt_receive') }}
					<button aria-label="Click to resend" type="button" onclick="resendOtp()" class="p-0 btn btn-normal ms-1 m-0" id="resend-btn">{{ optionByKey('verify_resend_click') }}</button>
				</div>
			</div>
		</div>

		<div class="col-md-12 mt-5 d-flex align-items-center">
			<button id="confirm-btn" disabled  type="submit" class="text-uppercase btn btn-primary btn-block m-auto frm-btn fs-6 fw-normal">
				{{ optionByKey('verify_confirm_code') }}
			</button>
		</div>
	 </form>
	 
		<div class="col-md-12 mt-4">
			<p class="text-center text-uppercase">
				<a  href="{{url('c/phone-number-verification')}}">{{ optionByKey('verify_change_number') }}</a>
			</p>
		</div>

	</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.addEventListener('DOMContentLoaded', function () {
    const timerDisplay = document.getElementById('otp-timer');
    const resendButton = document.getElementById('resend-btn');
    const OTP_DURATION = 120; // 2 minutes in seconds

    let timerInterval;

    function getRemainingTime() {
        const startTime = localStorage.getItem('otp_start_time');
        if (!startTime) return OTP_DURATION;
        const elapsed = Math.floor((Date.now() - parseInt(startTime)) / 1000);
        return Math.max(0, OTP_DURATION - elapsed);
    }

    function formatTime(seconds) {
        const minutes = String(Math.floor(seconds / 60)).padStart(2, '0');
        const secs = String(seconds % 60).padStart(2, '0');
        return `${minutes}:${secs}`;
    }

    function startTimer() {
        clearInterval(timerInterval);

        let timeLeft = getRemainingTime();

        if (timeLeft <= 0) {
            timerDisplay.textContent = '';
            resendButton.disabled = false;
            return;
        }

        resendButton.disabled = true;
        timerDisplay.textContent = formatTime(timeLeft);

        timerInterval = setInterval(() => {
            timeLeft--;

            timerDisplay.textContent = formatTime(timeLeft);
			
			if (timeLeft <= OTP_DURATION - 30) {
				resendButton.disabled = false;
			}			

            if (timeLeft <= 0) {
                clearInterval(timerInterval);
                timerDisplay.textContent = '';
                resendButton.disabled = false;
            }
        }, 1000);
    }

    // When user clicks resend
    window.resendOtp = function () {        
        localStorage.setItem('otp_start_time', Date.now().toString());
        startTimer();
		
		const phone = document.getElementById('phone').value;
		const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
		fetch('/c/phone-number-verification/resend-sms', {
			method: 'POST',
			headers: {
				'Content-Type': 'application/json',
				'X-CSRF-TOKEN': csrfToken,
				'Accept': 'application/json'
			},
			body: JSON.stringify({ phone: phone })
		})
		.then(response => response.json())
		.then(data => {
			if (data.success) {
				console.log(data.message);
			} else {
				console.log("Failed: " + data.message);
			}
		})
		.catch(error => {
			console.log("Request failed: " + error.message);
		});
    };

    // Set timer start time if not present
    if (!localStorage.getItem('otp_start_time')) {
        localStorage.setItem('otp_start_time', Date.now().toString());
    }

    // ⏳ Start countdown on page load
    startTimer();
});


$(document).ready(function() {
	const $inputs = $('.otp-input');
	const $button = $('#confirm-btn');
	$inputs.on('input', function() {
		const value = $(this).val();
		if (!/^\d$/.test(value)) {
			$(this).val('');
		}
		checkAllFilled();
	});

	$inputs.on('keyup', function(e) {
		const index = $inputs.index(this);
		const value = $(this).val();

		if (e.key >= '0' && e.key <= '9') {
			if (index < $inputs.length - 1 && value !== '') {
				$inputs.eq(index + 1).focus();
			}
		} else if (e.key === 'Backspace') {
			$(this).val('');
			if (index > 0) $inputs.eq(index - 1).focus();
		}

		checkAllFilled();
	});

	function checkAllFilled() {
		let allFilled = true;
		$inputs.each(function() {
			if ($(this).val().trim().length !== 1) {
				allFilled = false;
			}
		});
		$button.prop('disabled', !allFilled);
	}
});
	
</script>


<script>
const otpInputs = document.querySelectorAll('.otp-input');
const hiddenInput = document.getElementById('otp-hidden-code');

otpInputs.forEach((input, index) => {
    input.addEventListener('input', function () {
        // Optional: only allow numeric input
        this.value = this.value.replace(/[^0-9]/g, '');

        // Move to next input
        if (this.value.length === 1 && index < otpInputs.length - 1) {
            otpInputs[index + 1].focus();
        }

        // Update hidden input value
        updateHiddenCode();
    });

    input.addEventListener('keydown', function (e) {
        if (e.key === 'Backspace' && this.value === '' && index > 0) {
            otpInputs[index - 1].focus();
        }
    });
});

function updateHiddenCode() {
    let code = '';
    otpInputs.forEach(input => {
        code += input.value.trim();
    });
    hiddenInput.value = code;
}
</script>



@endpush