@extends('masushuaia.plantilla')
@section('titulo', $titulo)
@section('breadcrumb1')
<a title="Salir" href="#" class="btn-blue py-1 px-2 mr-2" aria-hidden="true" onclick="javascript: $('#modalSalir').modal('toggle');"><span><i class="fas fa-arrow-left"></i></span></a>
@endsection
@section('breadcrumb')
<script>
    function fsalir() {
        location.href = "/";
    }
</script>
@endsection
@section('breadcrumb-list')
<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="/">Inicio</a></li><span class="px-2">/</span>
  <li class="breadcrumb-item active">Google Authenticator</li>
</ol>
@endsection

@section('contenido')
    <div class="row">
        <div class="col-4">
            <p>Abra su aplicación Google Authenticator y presione el icono "+" en la parte inferior derecha, y luego presione "Escanear código de barras".</p>
        </div>
    </div>
    <div class="row">
        <div class="col-2 text-center align-self-center">
            <div class="row">
                <div class="col-12">
                    <div id="spinner" class="m-5">
                        <div class="spinner-border m-5" role="status">
                            <span class="sr-only">Cargando...</span>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div id="codigo-qr"></div>
                </div>
            </div>
        </div>
    </div>
    <script>        
        $.ajax({
            type: 'get',
            async: 'true',
            url: '/googleAuthenticatorPairing/getQR',
            success: function(data) {
                $('#codigo-qr').append(data);
                $('#spinner').hide();
            }
        });
    </script>
@endsection