@extends('layouts.app-index')

@section('main-content')

<div class="background"></div>
<div class="container">
    <br>
    <h2>
        <div class="login-logo">
            <img src="../dist/img/dar.png" alt="Avatar" class="img img-responsive" style="left-margin:auto; max-width:auto; width: 75px; height: 75px"><br>
            <h2><b>Verify Code</b></h2>
            <h5> Please input the code from the <br>registered email your input.</h5>
        </div>
    </h2>

    <form id="verifyCodeForm" method="post" action="{{ route('forgotpassword.verifyCode') }}">
        @csrf
        <div class="form-item">
            <span class="material-icons-outlined">vpn_key</span>
            <input type="text" id="reset_code" name="reset_code" placeholder="Verification Code" autocomplete="off" required />

        </div>

        <div>
            <p style="margin: 0px 0px 30px 20px; text-align: left;">
                <a href="#" id="resendCodeLink">Didn't get a code?</a>
                <span id="countdownTimer" class="timermessage" style="display: none;">You can resend the code in <span id="timer"  class="timermessage" >180</span> seconds.</span>
            </p>
        </div>

        <div class="btn-group">
            <a href="{{ route('login') }}"><button type="button" class="btn btn-outline-secondary"><b>Cancel</b></button></a>
            <button type="submit" class="btn btn-outline-secondary"><b>Submit</b></button>
        </div>

    </form>

    
    @if(Session::has('error'))
        <div id="msg_alert" class="alert alert-danger" role="alert">
            {{ Session::get('error') }}
        </div>
    @endif

    @if(Session::has('success'))
        <div id="msg_alert2" class="alert alert-success" role="alert">
            {{ Session::get('success') }}
        </div>
    @endif
    
    <!-- Hidden form for resending code -->
    <form id="resendCodeForm" method="post" action="{{ route('forgotpassword.resendCode') }}" style="display: none;">
        @csrf
    </form>

</div>

<!-- JavaScript to handle resend code link and countdown timer -->
<script>
    document.getElementById('resendCodeLink').addEventListener('click', function(event) {
        event.preventDefault();
        resendCode();
    });

    function resendCode() {
        var form = document.getElementById('resendCodeForm');
        var formData = new FormData(form);

        fetch(form.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': formData.get('_token')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                startCountdown();
                showAlert('A new verification code has been sent to your email.', 'success');
            } else {
                showAlert('Error sending email.', 'danger');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('Error sending email.', 'danger');
        });
    }

    function startCountdown() {
        var countdown = 180;
        var timerElement = document.getElementById('timer');
        var resendLink = document.getElementById('resendCodeLink');
        var countdownTimer = document.getElementById('countdownTimer');

        resendLink.style.display = 'none';
        countdownTimer.style.display = 'inline';

        var interval = setInterval(function() {
            countdown--;
            timerElement.textContent = countdown;

            if (countdown <= 0) {
                clearInterval(interval);
                countdownTimer.style.display = 'none';
                resendLink.style.display = 'inline';
            }
        }, 1000);
    }

    function showAlert(message, type) {
        var alertDiv = document.createElement('div');
        alertDiv.className = `alert alert-${type}`;
        alertDiv.role = 'alert';
        alertDiv.textContent = message;
        document.querySelector('.container').prepend(alertDiv);

        setTimeout(function() {
            alertDiv.remove();
        }, 5000);
    }

    document.getElementById('reset_code').addEventListener('input', function() {
        this.value = this.value.replace(/\D/g, '');
    });

</script>

@endsection('main-content')