@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;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #111 !important;
    background: #ffffff !important;
    border: 1px solid #d1d5db;
    border-radius: 8px;
}

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

.action-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

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

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

.small-btn {
    margin-top: 15px;
    font-size: 13px;
    padding: 6px 14px;
}

.bottom-link {
    font-size: 12px;
    color: #6b7280;
    margin-top: 15px;
}
</style>

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

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

        <h4>Email Verification</h4>

        <div class="sub-text">
            Enter the 6-digit code sent to your email.
        </div>

        {{-- Alerts --}}
        @if(session('success'))
            <div class="alert alert-success py-2">
                {{ session('success') }}
            </div>
        @endif

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

        {{-- ================= VERIFY FORM ================= --}}
        <form method="POST" action="{{ route('2fa.email.verify') }}">
            @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 class="action-row">
                {{-- VERIFY --}}
                <button type="submit" class="btn btn-primary btn-sm px-4">
                    Verify
                </button>

                {{-- RESEND (no validation) --}}
                <button type="button"
                        id="resend-btn"
                        onclick="document.getElementById('resend-form').submit();"
                        class="link-style">
                    <span id="resend-text">Resend Code</span>
                </button>
            </div>

            <div class="bottom-link">
                Code expires in 10 minutes
            </div>
        </form>

        {{-- Hidden Resend Form --}}
        <form id="resend-form"
              method="POST"
              action="{{ route('2fa.email.resend') }}"
              style="display:none;">
            @csrf
        </form>

        {{-- Switch to Authenticator --}}
        @if(auth()->user()->google2fa_enabled)
            <form method="GET" action="{{ route('2fa.verify') }}">
                <button type="submit" class="btn btn-outline-primary btn-sm small-btn">
                    <i class="fas fa-mobile-alt mr-1"></i>
                    Use Authenticator App
                </button>
            </form>
        @endif

        <div class="bottom-link">
            <a href="{{ route('2fa.method') }}">
                Back to Verification Options
            </a>
        </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>
{{-- Resend Timer Script --}}
<script>
let resendTimer = 60;

@if(session('otp_resent_at'))
    resendTimer = {{ 60 - now()->diffInSeconds(session('otp_resent_at'), absolute: true) }};
@endif

function startResendTimer() {

    const btn = document.getElementById('resend-btn');
    const text = document.getElementById('resend-text');

    if (!btn || !text) return;

    if (resendTimer > 0) {

        btn.disabled = true;
        text.innerHTML = "Resend in " + resendTimer + "s";

        resendTimer--;

        setTimeout(startResendTimer, 1000);

    } else {

        btn.disabled = false;
        text.innerHTML = "Resend Code";

    }
}

document.addEventListener("DOMContentLoaded", startResendTimer);
</script>

@endsection