@extends('layouts.auth')

@section('content')

<style>
.auth-wrapper {
    min-height: calc(100vh - 90px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 40px;
}

.auth-card {
    width: 440px;
    max-width: 95%;
    background: #ffffff;
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    text-align: center;
}

.auth-icon {
    font-size: 36px;
    color: #34548A;
    margin-bottom: 10px;
}

.sub-text {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 25px;
}

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

.otp-input {
    width: 55px;
    height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;

    padding: 0;
    margin: 0;

    color: #111 !important;
    background: #ffffff !important;

    border: 1px solid #d1d5db;
    border-radius: 8px;

    box-sizing: border-box;
}

.otp-input:focus {
    border-color: #34548A;
    outline: none;
    box-shadow: 0 0 6px rgba(52,84,138,0.25);
}

.switch-link {
    background: none;
    border: none;
    color: #34548A;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
}

.switch-link:hover {
    text-decoration: underline;
}

.bottom-link {
    font-size: 12px;
    color: #6b7280;
    margin-top: 15px;
}
input[type="text"],
input[type="tel"] {
    line-height: normal !important;
    padding: 0 !important;
}
</style>

<div class="auth-wrapper">
    <div class="auth-card">

        <div class="auth-icon">
            <i class="fas fa-shield-alt"></i>
        </div>

        <h4>Authenticator Verification</h4>
        <div class="sub-text">
            Enter the 6-digit code from your authenticator app.
        </div>

        {{-- Error --}}
        @if ($errors->has('otp'))
            <div class="alert alert-danger py-2">
                {{ $errors->first('otp') }}
            </div>
        @endif

        <form method="POST" action="{{ route('2fa.verify.post') }}">
            @csrf

            <div class="otp-wrapper">
                @for ($i = 0; $i < 6; $i++)
                    <input type="text"
                           inputmode="numeric"
                           maxlength="1"
                           class="otp-input"
                           required>
                @endfor
            </div>

            <input type="hidden" name="otp" id="final-otp">

            <div style="margin-top:20px;">
                <button type="submit" class="btn btn-primary btn-sm px-4">
                    Verify
                </button>
            </div>

            <div class="bottom-link">
                Code refreshes every 30 seconds
            </div>
        </form>

        {{-- Switch Section --}}
        <div style="margin-top:20px;">

            @if(auth()->user()->email_2fa_enabled)
                <form method="GET" action="{{ route('2fa.choose.email') }}">
                    @csrf
                    <button type="submit" class="switch-link">
                        <i class="fas fa-envelope mr-1"></i>
                        Use Email Instead
                    </button>
                </form>
            @endif

            <div class="bottom-link">
                <a href="{{ route('2fa.method') }}">
                    Back to Verification Options
                </a>
            </div>

        </div>

    </div>
</div>

{{-- OTP Auto Shift --}}
<script>
document.addEventListener("DOMContentLoaded", function () {

    const inputs = document.querySelectorAll(".otp-input");
    const finalInput = document.getElementById("final-otp");

    inputs.forEach((input, index) => {

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

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

    });

    function updateOtp() {
        let otp = "";
        inputs.forEach(input => otp += input.value);
        finalInput.value = otp;
    }

});
</script>

@endsection