@extends('layout')

@section('header')
    {{-- Assuming a simple header or no header for a full-screen verification page --}}
    @include('components.header-inner', [
        'title' => 'Enter OTP',
    ])
@endsection

@section('content')
    <style>
        footer.mobile-footer {
            display: none;
        }

        /* 🎨 Main Container */
        .otp-container {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px 16px;
            box-sizing: border-box;
            text-align: center;
        }

        /* 📝 Instructions Text */
        .otp-instruction {
            font-size: 16px;
            color: #444;
            line-height: 1.5;
            margin-bottom: 30px;
            font-weight: 500;
        }

        /* 🔢 OTP Input Group */
        .otp-input-group {
            display: flex;
            justify-content: space-between;
            margin-bottom: 40px;
            padding: 0 10px;
            /* Padding for spacing inputs */
        }

        /* 📥 Individual OTP Input Fields */
        .otp-input {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            /* Makes the circle shape */
            font-size: 24px;
            text-align: center;
            border: 2px solid #ddd;
            outline: none;
            box-sizing: border-box;
            color: #333;
            font-weight: 700;
            transition: all 0.2s ease;
        }

        /* Styles for pre-filled OTP (Matching the image) */
        .otp-input.filled {
            background: linear-gradient(180deg, #66BB6A 0%, #4CAF50 100%);
            /* Green gradient */
            border-color: #4CAF50;
            color: #fff;
            box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3);
        }

        /* Style for empty OTP spots */
        .otp-input:not(.filled) {
            background-color: #f7f7f7;
            border-color: #eee;
        }

        /* utton Row */
        .button-row {
            display: flex;
            gap: 15px;
            /* Spacing between buttons */
            padding: 0 10px;
        }

        /* Resend OTP Button (Orange/Red) */
        .resend-btn {
            flex: 1;
            padding: 14px;
            border-radius: 10px;
            border: none;
            color: #fff;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            background: linear-gradient(180deg, #FF7043 0%, #F4511E 100%);
            /* Orange/Red gradient */
            box-shadow: 0 6px 15px rgba(244, 81, 30, 0.2);
            transition: transform .08s ease;
        }

        /* Verify OTP Button (Green) */
        .verify-btn {
            flex: 1;
            padding: 14px;
            border-radius: 10px;
            border: none;
            color: #fff;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            background: linear-gradient(180deg, #66BB6A 0%, #4CAF50 100%);
            /* Green gradient */
            box-shadow: 0 6px 15px rgba(76, 175, 80, 0.2);
            transition: transform .08s ease;
        }

        /* Active State */
        .resend-btn:active,
        .verify-btn:active {
            transform: translateY(1px);
        }

        /* Mobile Responsiveness */
        @media (max-width: 480px) {
            .otp-input {
                width: 50px;
                height: 50px;
                font-size: 22px;
            }

            .otp-input-group {
                padding: 0;
            }

            .button-row {
                gap: 10px;
                padding: 0;
            }

            .resend-btn,
            .verify-btn {
                padding: 12px;
                font-size: 15px;
            }
        }
    </style>

    <div class="otp-container">

        <div class="otp-instruction">
            Enter your 4-digit code. Please enter here to Verify your Number.
        </div>

        <form id="otpForm" onsubmit="return verifyOtp(event)">
            <div class="otp-input-group">
                <input type="tel" class="otp-input" maxlength="1" id="otp1" inputmode="numeric"
                    required>
                <input type="tel" class="otp-input" maxlength="1" id="otp2"
                    inputmode="numeric" required>
                <input type="tel" class="otp-input" maxlength="1" id="otp3" inputmode="numeric" required>
                <input type="tel" class="otp-input" maxlength="1" id="otp4" inputmode="numeric" required>
            </div>

            <div class="button-row">
                <button type="button" class="resend-btn">Resent OTP</button>
                <button type="submit" class="verify-btn">Verify OTP</button>
            </div>
        </form>

    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const inputs = document.querySelectorAll('.otp-input');

            inputs.forEach((input, index) => {
                input.addEventListener('input', (e) => {
                    if (e.target.value.length === 1 && index < inputs.length - 1) {
                        inputs[index + 1].focus();
                    }
                    if (e.target.value.length === 1) {
                        e.target.classList.add('filled');
                    } else {
                        e.target.classList.remove('filled');
                    }
                });
                input.addEventListener('keydown', (e) => {
                    if (e.key === 'Backspace' && e.target.value.length === 0 && index > 0) {
                        inputs[index - 1].focus();
                    }
                });
            });
        });

        function verifyOtp(e) {
            e.preventDefault();
            const otp = Array.from(document.querySelectorAll('.otp-input')).map(input => input.value).join('');

            if (otp.length === 4) {
                alert('Verifying OTP: ' + otp);
                window.location.href = '{{ route('welcome') }}'; 
            } else {
                alert('Please enter the complete 4-digit OTP.');
            }
            return false;
        }
    </script>
@endsection