<style>
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Layout wrapper ── */
.container {
    min-height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 16px;
}

/* ── Card — mobile-first base (< 480px) ── */
.form {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    background-color: white;
    border-radius: 12px;
    padding: 20px 16px;
    margin: 0 auto;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.title {
    font-size: 17px;
    font-weight: bold;
    color: black;
    text-align: center;
}

.message {
    color: #a3a3a3;
    font-size: 12px;
    margin-top: 4px;
    text-align: center;
    line-height: 1.5;
}

.inputs {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 5px;
    width: 100%;
}

.inputs input {
    width: 36px;
    height: 40px;
    text-align: center;
    font-size: 16px;   /* ≥16px prevents iOS zoom */
    font-weight: 600;
    border: none;
    border-bottom: 2px solid #d2d2d2;
    border-radius: 4px 4px 0 0;
    background: #f9f9fb;
    transition: border-color 0.2s, background 0.2s;
    -webkit-appearance: none;
}

.inputs input:focus {
    border-bottom: 2px solid royalblue;
    background: #eef1ff;
    outline: none;
}

.action {
    margin-top: 20px;
    padding: 10px 16px;
    border-radius: 8px;
    border: none;
    background-color: royalblue;
    color: white;
    cursor: pointer;
    align-self: stretch;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: background 0.2s, transform 0.1s;
}

.action:hover  { background-color: #2752d8; }
.action:active { transform: scale(0.98); }

.secondary-action {
    margin-top: 10px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background-color: #f8f9fa;
    color: #555;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s;
}

.secondary-action:hover { background-color: #efefef; }

/* ── Validation & alert ── */
.text-danger { color: #dc3545; }
.small       { font-size: 11px; }
.mt-2        { margin-top: 8px; }

.alert {
    width: 100%;
    max-width: 320px;
    text-align: center;
    padding: 9px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 13px;
}
.alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }

/* ── Small phones 360–479px ── */
@media (min-width: 360px) {
    .form {
        max-width: 340px;
        padding: 22px 20px;
    }
    .title   { font-size: 18px; }
    .message { font-size: 13px; }

    .inputs { gap: 6px; }
    .inputs input {
        width: 38px;
        height: 42px;
        font-size: 17px;
    }

    .action          { font-size: 15px; padding: 11px 18px; }
    .secondary-action { font-size: 13px; }
    .alert           { max-width: 340px; font-size: 13px; }
}

/* ── Tablets / large phones 480–767px ── */
@media (min-width: 480px) {
    .form {
        max-width: 380px;
        padding: 28px 28px;
    }
    .title   { font-size: 20px; }
    .message { font-size: 14px; }

    .inputs { gap: 8px; margin-top: 18px; }
    .inputs input {
        width: 42px;
        height: 46px;
        font-size: 18px;
    }

    .action          { font-size: 15px; padding: 12px 20px; margin-top: 24px; }
    .secondary-action { font-size: 14px; padding: 9px 18px; }
    .alert           { max-width: 380px; font-size: 14px; }
}

/* ── Desktop 768px+ ── */
@media (min-width: 768px) {
    .form {
        max-width: 420px;
        padding: 36px 36px;
    }
    .title   { font-size: 22px; }
    .message { font-size: 14px; }

    .inputs { gap: 10px; margin-top: 20px; }
    .inputs input {
        width: 48px;
        height: 52px;
        font-size: 20px;
    }

    .action          { font-size: 16px; padding: 13px 24px; margin-top: 28px; }
    .secondary-action { font-size: 14px; padding: 9px 20px; }
    .alert           { max-width: 420px; }
}

/* ── Large desktop 1200px+ ── */
@media (min-width: 1200px) {
    .form {
        max-width: 440px;
        padding: 40px 40px;
    }
    .title   { font-size: 24px; }

    .inputs input {
        width: 52px;
        height: 56px;
        font-size: 22px;
    }

    .action { font-size: 17px; padding: 14px 28px; }
}
</style>

<div class="container">
    <?php if(session('status')): ?>
        <div class="alert alert-success"><?php echo e(session('status')); ?></div>
    <?php endif; ?>

    
    <form class="form" method="POST" action="<?php echo e(route('otp.verify')); ?>" id="otp-verify-form">
        <?php echo csrf_field(); ?>
        <div class="title">Enter OTP</div>
        <div class="message">Enter the 6‑digit code we sent you</div>

        
        <input type="hidden" name="code" id="otp-hidden" value="<?php echo e(old('code')); ?>" />

        
        <div class="inputs">
            <?php for($i = 0; $i < 6; $i++): ?>
                <input type="text" maxlength="1" pattern="\d*" inputmode="numeric"
                       class="otp-digit <?php $__errorArgs = ['code'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                       data-index="<?php echo e($i); ?>"
                       <?php echo e($i === 0 ? 'autofocus' : ''); ?> />
            <?php endfor; ?>
        </div>

        <?php $__errorArgs = ['code'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
            <div class="text-danger small mt-2"><?php echo e($message); ?></div>
        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>

        <button type="submit" class="action">Verify</button>
    </form>

    
    <form method="POST" action="<?php echo e(route('otp.resend')); ?>" class="mt-2">
        <?php echo csrf_field(); ?>
        <button type="submit" class="secondary-action">Resend OTP</button>
    </form>
</div>

<script>
(function () {
    const form        = document.getElementById('otp-verify-form');
    const hiddenInput = document.getElementById('otp-hidden');
    const digitInputs = document.querySelectorAll('.otp-digit');

    digitInputs[0].focus();

    digitInputs.forEach((input, index) => {
        input.addEventListener('input', function () {
            this.value = this.value.replace(/[^0-9]/g, '');
            if (this.value.length === 1 && index < digitInputs.length - 1) {
                digitInputs[index + 1].focus();
            }
        });

        input.addEventListener('keydown', function (e) {
            if (e.key === 'Backspace' && this.value.length === 0 && index > 0) {
                digitInputs[index - 1].focus();
            }
        });

        input.addEventListener('paste', function (e) {
            e.preventDefault();
            const pasteData = e.clipboardData.getData('text')
                                .replace(/[^0-9]/g, '')
                                .slice(0, 6);
            for (let i = 0; i < pasteData.length; i++) {
                if (digitInputs[index + i]) {
                    digitInputs[index + i].value = pasteData[i];
                }
            }
            const nextIndex = index + pasteData.length;
            digitInputs[Math.min(nextIndex, digitInputs.length - 1)].focus();
        });
    });

    form.addEventListener('submit', function () {
        let code = '';
        digitInputs.forEach(input => (code += input.value));
        hiddenInput.value = code;
    });

    // Pre-fill on validation error
    const oldCode = hiddenInput.value;
    if (oldCode) {
        for (let i = 0; i < Math.min(oldCode.length, 6); i++) {
            digitInputs[i].value = oldCode[i];
        }
    }
})();
</script>
<?php /**PATH C:\Users\startup sabbir\Desktop\jannat\sarvice-accounts\accounting-system\resources\views/auth/verify-otp.blade.php ENDPATH**/ ?>