@extends('layout.auth')

@section('title', 'Scan QR OTP')

@section('content')
<div class="login-box">
    <div class="login-logo">
        <b>Setup</b> OTP
    </div>

    <div class="card">
        <div class="card-body login-card-body">

            <p class="login-box-msg">
                Scan QR ini dengan Google Authenticator
            </p>

            <div class="text-center mb-3">
                <img src="https://api.qrserver.com/v1/create-qr-code/?size=250x250&data={{ urlencode($qrUrl) }}">
            </div>

            @if (session('error'))
                <div class="alert alert-danger">
                    {{ session('error') }}
                </div>
            @endif

            <form method="POST" action="{{ url('/register/verify') }}">
                @csrf

                <div class="input-group mb-3">
                    <input type="text" name="otp" class="form-control" placeholder="Masukkan OTP" required>
                    <div class="input-group-append">
                        <div class="input-group-text">
                            <span class="fas fa-key"></span>
                        </div>
                    </div>
                </div>

                <button class="btn btn-primary btn-block">
                    Verifikasi & Selesai
                </button>
            </form>

        </div>
    </div>
</div>
@endsection