@extends(backpack_view('layouts.auth'))

@section('content')
<div class="page page-center">
    <div class="container container-tight py-4">
        <div class="text-center mb-4 display-6 auth-logo-container">
            {!! backpack_theme_config('project_logo') !!}
        </div>
        <div class="card">
            <div class="card-body text-start">
                <div class="mb-3">
                    <h2 class="h2 text-center my-4">Two-Factor Authentication</h2>
                </div>
                {{-- Show QR code --}}
                @if(isset($qr))
                    <p>To complete your two-factor authentication setup, please scan the QR code below using the Google Authenticator app on your mobile device.</p>

                    <div class="mb-3 text-center">
                        <img src="data:image/svg+xml;base64,{{ base64_encode($qr) }}" alt="QR Code">
                    </div>

                    <ol class="">
                        <li>Install the <strong>Google Authenticator</strong> app from the App Store (iOS) or Google Play Store (Android), if not already installed.</li>
                        <li>Open the app and tap the <strong>“+”</strong> icon.</li>
                        <li>Select <strong>“Scan a QR code.”</strong></li>
                        <li>Use your phone’s camera to scan the QR code displayed above.</li>
                    </ol>
                @endif

                <p class="fw-bold">You must set up your Google Authenticator app before contining.  You will be unable to login otherwise</p>
                
                <h2>Backup Codes</h2>
                <p>In case you lost your device.  You can use a one time code to sign in.  Save these codes somewhere safe. The code can be used once.</p>
                <p class="text-center"><strong>{{  $backupCode }}</strong></p>
                
                <div class="form-footer">
                    <a class="btn btn-primary w-100" href="#" onclick="confirmReset2FA()">Confirm 2FA</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

<script>
    function confirmReset2FA() {
        let route = '{{  route("backpack.2fa.complete_reset_2fa") }}';
        $.ajax({
            url: route,
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(result) {

                window.location.href = '{{ route("backpack.account.info") }}?reset2fa=success';  
            },
            error: function(result) {
            // Show an alert with the result
                new Noty({
                    type: "error",
                    text: "Problem when reseting 3FA.  Please try again later."
                }).show();
            }
            
        });
        
    }
</script>