@extends('layouts.app')
@section('breadcrumbs')
@include('__partials.breadcrumbs', [
'data' => [
['route' => 'home', 'name' => 'Home'],
['route' => '', 'name' => 'Inicio'],
['route' => '', 'name' => 'Ajustes']
],
'show_add_button' => false
])
@endsection
@section('content')

<link rel="stylesheet" href="{{ asset('assets/css/switch.css')}}">
@if($user->towfa_active == 0)
<style>
    .twofa {
        display: none;
    }

    #android_a, #ios_a{
        color: #0C83E2;
    }

    #android_a:hover, #ios_a:hover{
        text-decoration: underline;
        color: #A9A9A9;
    }
</style>
@endif
<div class="container">
    <div class="row mb-2">
        <div class="col-12 d-flex justify-content-end">
            <a href="{{ route('home') }}" class="btn btn-primary"><i class="fa fa-home" aria-hidden="true"></i> Home</a>
        </div>
    </div>
    @if (session('status'))
    <div class="alert alert-success">
        {{ session('status') }}
    </div>
    @endif
    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif
    <div class="row mb-2">
        <div class="col-12">
            <h4>SEGURIDAD</h4>
        </div>
    </div>
    <div class="row">
        <form class="col-6" method="POST" action="{{ route('inicio.actualizarDatos') }}">
            {{ csrf_field() }}

            <div class="row">
                <div class="col-12 form-group">
                    <label style="margin-right:2.6%;">Contraseña Actual <span class="required">*</span></label>
                    <input type="password" name="pass_before" class="form-control border border-dark" required>
                </div>
            </div>

            <div class="row">
                <div class="col-12 form-group">
                    <label style="margin-right:3.4%;">Nueva Contraseña <span class="required">*</span></label>
                    <input type="password" name="pass_ingresada" class="form-control border border-dark" required>
                </div>
            </div>

            <div class="row">
                <div class="col-12 form-group">
                    <label style="margin-right:1%;">Confirmar Contraseña <span class="required">*</span></label>
                    <input type="password" name="confirmation" class="form-control border border-dark" required>
                </div>
            </div>

            <div class="row d-flex justify-content-around">
                <button class="btn btn-primary">Actualizar</button>
            </div>
        </form>
        <div class="col-6">
            <h4>Como crear una contraseña segura</h4>
            <p class="text-secondary">
            <ul>
                <li>Su nueva contraseña debe tener mínimo 8 caracteres, entre mayor cantidad de caracteres haya mas
                    segura es su contraseña</li>
                <li>Debe ser alfanúmerica, debe contener tanto letras como numeros</li>
                <li>Debe contener caracteres especiales como: # $ % ^ & * ( ) + = - [ ] \ ' ; , .</li>
                <li>Debe contener mayúsculas y minúsculas</li>
            </ul>
            </p>
        </div>
    </div>
    <hr class="my-4">
    <div class="row mb-2">
        <div class="col-12">
            <h4>Autenticación de 2 factores</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <p>Este método de autenticación permite tener mayor seguridad en su cuenta de usuario a través de la aplicación movil <b>Google Authenticator</b> disponible tanto en <a id="android_a" target="_blank" href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=es_CO&gl=US">Android</a> como en <a id="ios_a" target="_blank" href="https://apps.apple.com/es/app/google-authenticator/id388497605">iOS</a>. <br>Puede Activar o deshabilitar este método de autenticación haciendo click en el interruptor.</p>
        </div>
    </div>
    <div class="row mb-4">
        <div class="col-12">
            <label class="toggle-control">
                <input type="checkbox" id="switchTowFa" data-route="{{route('settings.towfa')}}"
                    data-token="{{csrf_token()}}" @if($user->towfa_active == 1)
                checked="checked"
                @endif
                >
                <span class="control"></span>
            </label>
        </div>
    </div>
    <div class="row twofa">
        <div class="col-12 d-flex justify-content-start align-items-center">
            {!! QrCode::size(150)->generate($google2fa->getQRCodeUrl($companyName, $user->email, $secretKey)); !!}
            <p class="ml-3">
                Escaneé este código <b>QR</b> o introduzca la siguiente clave <b>{{ $secretKey }}</b> (Debe escoger la
                opción <b>basada en tiempo</b>) en la aplicación de <b>Google Authenticator</b> para sincronizar su
                cuenta con la autenticación de doble factor.
            </p>
        </div>
    </div>
    <div class="row twofa">
        <div class="col-12 alert alert-warning">
            <p>
                Recuerde que al utilizar este medida de seguridad deberá siempre acceder con las claves que genere la
                aplicación de autenticación en su teléfono y no podrá acceder a su usuario sin estas claves generadas.
            </p>
        </div>
    </div>
    <hr class="my-4">
    <div class="row">
        <div class="col-12">
            <h4>Validación de 2 factores para firmas</h4>
        </div>        
    </div>
    <div class="row">
        <div class="col-12 d-flex justify-content-start align-items-center">
            {!! QrCode::size(200)->generate($google2fa->getQRCodeUrl($FirmaName, $user->email, $firmaKey)); !!}
            <p class="ml-3">
                Escaneé este código <b>QR</b> o introduzca la siguiente clave <b>{{ $firmaKey }}</b> (Debe escoger la
                opción <b>basada en tiempo</b>) en la aplicación de <b>Google Authenticator</b> para sincronizar su
                cuenta con el sistema doble factor para generar claves de acceso que le permitirá firmar documentos.
            </p>
        </div>
    </div>
</div>
<script src="{{ asset('assets/js/ajustesUsers.js') }}"></script>
@endsection