@extends('layouts.auth')

@section('content')
<style>
    /* =========================
   2FA SETUP PAGE STYLES
========================= */

.setup-wrapper {
    min-height: calc(100vh - 90px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
}

.setup-card {
    width: 850px;
    max-width: 95%;
    background: #ffffff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.setup-flex {
    display: flex;
    gap: 40px;
    align-items: center;
}

.setup-left {
    flex: 1;
    text-align: center;
    border-right: 1px solid #e5e7eb;
    padding-right: 30px;
}

.setup-right {
    flex: 1;
    text-align: center;
    padding-left: 30px;
}

/* Responsive */
@media (max-width: 768px) {
    .setup-flex {
        flex-direction: column;
    }

    .setup-left {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        padding-right: 0;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .setup-right {
        padding-left: 0;
    }
}
.otp-wrapper {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.otp-input {
    width: 55px;
    height: 60px;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #f9fafb;
    transition: all 0.2s ease;
}

.otp-input:focus {
    border-color: #34548A;
    background: #ffffff;
    outline: none;
    box-shadow: 0 0 6px rgba(52,84,138,0.25);
}
</style>
<div class="setup-wrapper">

    <div class="setup-card">

        <div class="setup-flex">

            {{-- LEFT QR --}}
            <div class="setup-left">

                <h5 class="mb-3">Scan QR Code</h5>

                <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data={{ urlencode($qrCodeUrl) }}"
                     class="img-fluid mb-3">

               <p class="small text-muted mb-1">Manual Secret Key</p>
                <p class="small font-weight-bold text-break">
                    {{ auth()->user()->google2fa_secret }}
                </p>

            </div>

            {{-- RIGHT OTP --}}
            <div class="setup-right">

                <h5 class="mb-4">Enter 6-Digit Code</h5>

                <form method="POST" action="{{ route('2fa.enable') }}">
                    @csrf
                    @if ($errors->has('otp'))
                        <div class="alert alert-danger text-center py-2">
                            {{ $errors->first('otp') }}
                        </div>
                    @endif
                    <div class="otp-wrapper mb-4">
                        @for ($i = 0; $i < 6; $i++)
                            <input type="tel"
                                inputmode="numeric"
                                maxlength="1"
                                class="otp-input {{ $errors->has('otp') ? 'otp-error' : '' }}"
                                required>
                        @endfor
                    </div>

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

                    <button type="submit" class="btn btn-primary btn-sm px-4">
                        Verify & Enable
                    </button>

                    <p class="small text-muted mt-3">
                        Code refreshes every 30 seconds.
                    </p>

                </form>

            </div>

        </div>

    </div>

</div>

@endsection