<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Identity Verification</title>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <!-- Tailwind -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
        
        * { box-sizing: border-box; }

        html { height: 100%; }
        body { 
            font-family: 'Plus Jakarta Sans', sans-serif; 
            background: radial-gradient(circle at top left, #062a27 43%, #61d7d4 112%);
            background-attachment: fixed;
            position: relative;
            min-height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem 1.5rem;
        }

        .master-card {
            background: #ffffff;
            box-shadow: 0 32px 64px rgba(0, 0, 0, 0.35);
            width: 100%;
            max-width: 450px;
            border-radius: 2.5rem;
            position: relative;
            z-index: 10;
        }

        /* OTP inputs */
        .otp-input {
            background: #f0fdfa;
            border: 1.5px solid #b2e8e6;
            transition: all 0.25s ease;
            color: #0f3534;
        }

        .otp-input:focus {
            border-color: #00ada8;
            background: #ffffff;
            box-shadow: 0 0 0 4px rgba(0, 173, 168, 0.1);
            outline: none;
        }

        /* Success Overlay */
        #otpSuccessOverlay {
            display: none;
            background: white;
            z-index: 110;
        }

        .success-circle {
            animation: successPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }

        @keyframes successPop {
            0% { transform: scale(0); opacity: 0; }
            70% { transform: scale(1.1); }
            100% { transform: scale(1); opacity: 1; }
        }

        .cta-btn {
            background: radial-gradient(circle at top left, #00ada8 0%, #007d79 100%);
            transition: all 0.25s ease;
            box-shadow: 0 8px 24px rgba(0, 125, 121, 0.4);
        }

        .cta-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 14px 32px rgba(0, 125, 121, 0.5);
        }
    </style>
</head>
<body>

    <div class="master-card p-10 overflow-hidden relative">
        
        <!-- Success Overlay -->
        <div id="otpSuccessOverlay" class="absolute inset-0 flex flex-col items-center justify-center text-center px-6">
            <div class="success-circle w-20 h-20 rounded-full flex items-center justify-center shadow-2xl mb-6"
                style="background: radial-gradient(circle at top left, #00ada8 0%, #007d79 100%); box-shadow: 0 20px 40px rgba(0,125,121,0.4);">
                <i class="fa-solid fa-check text-white text-3xl"></i>
            </div>
            <h3 class="text-xl font-black text-slate-800 tracking-tight">Identity Verified</h3>
            <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mt-2">Launching Workspace...</p>
        </div>

        <!-- Modal Header -->
        <div class="text-center mb-8">
            <div class="w-14 h-14 rounded-2xl mx-auto mb-4 flex items-center justify-center shadow-lg"
                style="background: radial-gradient(circle at top left, #00ada8 0%, #007d79 100%);">
                <i class="fa-solid fa-mobile-screen-button text-white text-xl"></i>
            </div>
            <h3 class="text-2xl font-black text-slate-900">Verify Identity</h3>
            <p class="text-slate-400 text-[10px] font-black uppercase tracking-widest mt-2">OTP sent to:</p>
            <p id="otpTarget" class="text-[#00ada8] text-xs font-bold mt-1 italic"><?php echo e($email ?? ''); ?></p>
        </div>

        <!-- OTP Form -->
        <form id="otpForm" method="POST" action="<?php echo e(route('otp.verify')); ?>">
            <?php echo csrf_field(); ?>
            <div class="flex justify-between gap-2 mb-8">
                <input type="text" maxlength="1" class="otp-input w-12 h-14 rounded-xl text-center text-xl font-bold" autofocus>
                <input type="text" maxlength="1" class="otp-input w-12 h-14 rounded-xl text-center text-xl font-bold">
                <input type="text" maxlength="1" class="otp-input w-12 h-14 rounded-xl text-center text-xl font-bold">
                <input type="text" maxlength="1" class="otp-input w-12 h-14 rounded-xl text-center text-xl font-bold">
                <input type="text" maxlength="1" class="otp-input w-12 h-14 rounded-xl text-center text-xl font-bold">
                <input type="text" maxlength="1" class="otp-input w-12 h-14 rounded-xl text-center text-xl font-bold">
            </div>
            <input type="hidden" name="otp" id="otpValue">

            <?php if($errors->has('otp')): ?>
                <p class="text-red-500 text-xs font-semibold mb-3"><?php echo e($errors->first('otp')); ?></p>
            <?php endif; ?>

            <?php if(session('status')): ?>
                <p class="text-emerald-500 text-xs font-semibold mb-3"><?php echo e(session('status')); ?></p>
            <?php endif; ?>

            <!-- Verify Button -->
            <button type="button" onclick="window.validateOtp()"
                class="cta-btn w-full text-white py-5 rounded-2xl font-black text-[11px] uppercase tracking-[0.2em]">
                Verify & Enter
            </button>
        </form>

        <!-- Timer / Resend -->
        <div class="mt-8 text-center">
            <p id="timerText" class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">
                Resend in <span id="countdown" class="font-black" style="color:#00ada8">00:59</span>
            </p>
            <form id="resendForm" method="POST" action="<?php echo e(route('otp.resend')); ?>">
                <?php echo csrf_field(); ?>
                <button id="resendBtn"
                    class="hidden text-[10px] font-black uppercase tracking-widest hover:underline" style="color:#00ada8" type="submit">
                    ↻ Resend OTP
                </button>
            </form>
        </div>

    </div>

    <script>
        $(document).ready(function() {
            const otpInputs = $('.otp-input');
            const hiddenOtp = $('#otpValue');

            window.validateOtp = function() {
                let code = '';
                otpInputs.each(function() {
                    code += ($(this).val() || '').trim();
                });

                if (!code) {
                    return;
                }

                hiddenOtp.val(code);

                const overlay = $('#otpSuccessOverlay');
                overlay.css('display', 'flex').addClass('success-circle');

                setTimeout(() => {
                    $('#otpForm').submit();
                }, 1200);
            };

            otpInputs.each(function(index) {
                $(this).on('input', function() {
                    if (this.value.length >= 1) {
                        const next = otpInputs.get(index + 1);
                        if (next) {
                            next.focus();
                        } else {
                            window.validateOtp();
                        }
                    }
                });

                $(this).on('keydown', function(e) {
                    if (e.key === 'Backspace' && !this.value && index > 0) {
                        otpInputs.eq(index - 1).focus();
                    }
                    if (e.key === 'Enter') {
                        window.validateOtp();
                    }
                });
            });

            // Timer logic
            let time = 59;
            const timerInterval = setInterval(() => {
                let s = time % 60;
                $('#countdown').text(`00:${s < 10 ? '0' : ''}${s}`);
                if (--time < 0) {
                    clearInterval(timerInterval);
                    $('#timerText').addClass('hidden');
                    $('#resendBtn').removeClass('hidden');
                }
            }, 1000);
        });
    </script>
</body>
</html>
<?php /**PATH D:\laragon\app\laraveladmin\resources\views/auth/otp.blade.php ENDPATH**/ ?>