@extends('layouts.authentication.master')
@section('title', 'Login')

@section('css')
@endsection

@section('style')
<style>
    .login-card .login-main .theme-form .show-hide {
        top: 70% !important;
    }

    img {
        width: 250px;
        height: auto !important;
    }

    .otp-container {
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    .otp-input {
        width: 40px;
        height: 50px;
        font-size: 24px;
        text-align: center;
        border: 2px solid #203468;
        border-radius: 5px;
        outline: none;
    }

    .error-message {
        color: red;
        font-size: 14px;
        margin-top: 5px;
        text-align: center;
        display: none;
    }
</style>
@endsection

@section('content')
@php
    $logo = asset('assets/images/logo/login-logo.svg');
@endphp
<div class="container-fluid p-0">
    <div class="row m-0">
        <div class="col-12 p-0">
            <div class="login-card">
                <div>
                    <div>
                        <h1><a class="logo">
                                <img class="img-fluid for-light" src="{{ $logo }}" alt="log-in page">
                            </a></h1>
                    </div>
                    <div class="login-main">
                        @include('layouts.alerts')
                        <form class="theme-form" method="POST" action="{{ route('verify-otp.post') }}">
                            @csrf
                            <h4 style="color: #203468; font-weight: bold;">Reset Password</h4>
                            <div class="form-group">
                                <label class="col-form-label">Enter Code</label>
                                <div class="otp-container">
                                    <input type="text" class="otp-input" maxlength="1" oninput="moveNext(this, 0)" onkeydown="movePrev(event, 0)">
                                    <input type="text" class="otp-input" maxlength="1" oninput="moveNext(this, 1)" onkeydown="movePrev(event, 1)">
                                    <input type="text" class="otp-input" maxlength="1" oninput="moveNext(this, 2)" onkeydown="movePrev(event, 2)">
                                    <input type="text" class="otp-input" maxlength="1" oninput="moveNext(this, 3)" onkeydown="movePrev(event, 3)">
                                    <input type="text" class="otp-input" maxlength="1" oninput="moveNext(this, 4)" onkeydown="movePrev(event, 4)">
                                    <input type="text" class="otp-input" maxlength="1" oninput="moveNext(this, 5)" onkeydown="movePrev(event, 5)">
                                </div>
                                <input type="hidden" name="otp" id="otp-hidden">
                                <span id="otp-error" class="error-message">Please enter a valid 6-digit OTP.</span>
                            </div>
                            <div class="form-group mb-0">
                                <div class="mt-5 text-center">
                                    <button type="submit" class="btn btn-primary btn-block custom_btn_black">Verify Code</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    let inputs = document.querySelectorAll('.otp-input');
    let otpHidden = document.getElementById('otp-hidden');
    let otpError = document.getElementById('otp-error');
    let form = document.querySelector('.theme-form');

    function moveNext(el, index) {
        if (el.value.length === 1 && index < inputs.length - 1) {
            inputs[index + 1].focus();
        }
        updateOtpHiddenField();
    }

    function movePrev(event, index) {
        if (event.key === "Backspace" && index > 0 && event.target.value === '') {
            inputs[index - 1].focus();
        }
        updateOtpHiddenField();
    }

    function updateOtpHiddenField() {
        let otpValue = '';
        inputs.forEach(input => {
            otpValue += input.value;
        });
        otpHidden.value = otpValue;

        // Hide error message if OTP is fully entered
        if (otpValue.length === 6) {
            otpError.style.display = "none";
        }
    }

    form.addEventListener('submit', function (event) {
        updateOtpHiddenField();
        if (otpHidden.value.length < 6) {
            event.preventDefault(); // Prevent form submission
            otpError.style.display = "block"; // Show error message
        }
    });
</script>
@endsection