@extends('frontend.layouts.master')
@section('style')
    <style>
        .otp-input {
            width: 50px;
            height: 50px;
            font-size: 24px;
            text-align: center;
            margin-right: 10px;
            border-radius: 5px;
            border: 1px solid #ced4da;
        }

        .otp-input:focus {
            outline: none;
            border-color: #A3484D; /* Custom color */
            box-shadow: 0 0 5px rgba(163, 72, 77, 0.5); /* Shadow with your main color */
        }

        .otp-container {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
    </style>
@endsection
@section('content')
    <section class="section border-0 m-0 py-4">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                    <div class="card">
                        <div class="card-body">
                            <h3 class="text-center mb-3">Verify OTP</h3>
                            <p class="text-center mb-0">We send OTP code to {{auth('web')->user()->email}}</p>
                            <form action="{{route('send-verify-code')}}" method="POST" class="mb-3 text-center">
                                @csrf
                                @method("PATCH")
                                <button class="btn btn-primary btn-sm mt-2" type="submit">Resend code</button>
                            </form>
                            <!-- Form to submit OTP to Laravel -->
                            <form action="{{ route('verify-account') }}" method="POST">
                                @csrf <!-- Include CSRF token for security -->

                                <div class="otp-container">
                                    <input type="text" maxlength="1" class="otp-input" name="otp[]" id="otp-1" required>
                                    <input type="text" maxlength="1" class="otp-input" name="otp[]" id="otp-2" required>
                                    <input type="text" maxlength="1" class="otp-input" name="otp[]" id="otp-3" required>
                                    <input type="text" maxlength="1" class="otp-input" name="otp[]" id="otp-4" required>
                                    <input type="text" maxlength="1" class="otp-input" name="otp[]" id="otp-5" required>
                                    <input type="text" maxlength="1" class="otp-input" name="otp[]" id="otp-6" required>
                                </div>

                                <div class="text-center">
                                    <button type="submit" class="btn btn-primary w-100">Validate OTP</button>
                                    <a href="{{route('home')}}" class="btn btn-secondary mt-2">Skip now</a>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('script')
    <script>
        // Handle OTP input and automatically focus on the next field
        const otpInputs = document.querySelectorAll('.otp-input');
        otpInputs.forEach((input, index) => {
            input.addEventListener('input', () => {
                if (input.value.length === 1 && index < otpInputs.length - 1) {
                    otpInputs[index + 1].focus();
                }
                if (input.value.length === 0 && index > 0) {
                    otpInputs[index - 1].focus();
                }
            });
        });


    </script>
@endsection