@extends('website.webLayout.main')
@section('webContent')
<style>
    .height {
        height: 90vh
    }
</style>
<div class="bg-theme pt-5 pb-5">
    <div class="container bg-theme height mt-5 pb-5">
        <div class="row justify-content-center">
            <div class="col-md-6 bg-white p-5 mt-5">
                <form method="POST" action="{{ route('otp.check') }}">
                    @csrf
                    <h1 class="text-center"><b>Check</b> <span class="color">Your Email</span> </h1>
                    <h3 class="text-center">OTP</h3>

                    <x-text-input id="email" class="form-control" type="hidden" name="email" value="{{ session()->get('email') }}" required autofocus autocomplete="username" />
                    <x-input-error :messages="$errors->get('email')" class="error-message" />


                    <div class="form-group">
                        <label for="password">Otp</label>
                        <x-text-input id="password" class="form-control" type="text" name="otp" required autocomplete="current-password" />
                        <x-input-error :messages="$errors->get('password')" class="error-message" />
                    </div>

                    <div class="row">
                        <div class="col-12 text-center ">
                            <x-primary-button class="btn btn-primary">
                                {{ __('Verify') }}
                            </x-primary-button>
                </form>
                <button class="btn btn-primary" id="otpButton" onclick="getOTP()" disabled>Resend OTP <span id="timer30">(30s)</span></button>
                <button class="btn btn-primary" id="resend">Resend OTP </button>
                <p>Don't have an account yet? <a href="{{ route('register') }}">Sign Up!</a></p>
            </div>
        </div>
    </div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
    $('#resend').hide();
    var email = $('#email').val();

    $('#resend').click(function() {
        // alert(email);
        var url = "{{ route('resendOtp', ['email' => ':email']) }}";
        url = url.replace(':email', email);

        $.ajax({
            url: url,
            type: 'GET',
            success: function(response) {
                enableOTPButton();
                alert('Kindly check Email!');
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    });;


    function enableOTPButton() {
        let countdown = 30;
        let button = $('#otpButton');
        updateButtonText(countdown);
        button.prop('disabled', true);

        let timer = setInterval(function() {
            countdown--;
            $('#timer30').val(countdown);
            if (countdown <= 0) {
                $('#resend').show();
                $('#otpButton').hide();
                clearInterval(timer);
            } else {
                updateButtonText(countdown);
            }
        }, 1000);
    }

    function updateButtonText(countdown) {
        $('#otpButton').text(`Resend OTP (${countdown}s)`);
    }

    function getOTP() {
        $('#otpButton').prop('disabled', true);
        enableOTPButton();
    }

    enableOTPButton();
</script>
@endsection