@extends('layouts.auth')

@section('modals')
<!-- Modal Metodo Autenticacion -->
<div class="modal fade" id="metodoauth" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modal-title-metodoauth"><i class="fas fa-shield-alt mx-2"></i> Metodos de Recuperación de Contraseña</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&minus;</span>
          </button>
        </div>
        {{-- Formulario --}}
            <div class="modal-body">
                @csrf
                <div class="list-group" id="list-method"></div>
            </div>
            <div class="modal-footer">
            </div>
        {{-- Fin Formulario <hr> --}}
      </div>
    </div>
</div>

<!-- Modal de Preguntas de Autenticacion -->
<div class="modal fade" id="preguntasauth" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modal-title-metodoauth"><i class="far fa-question-circle fa-lg mx-2"></i> Preguntas de Seguridad</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&minus;</span>
          </button>
        </div>
        <form id="form-respuestas">
        {{-- Formulario --}}
            <div class="modal-body">
                @csrf
                <div id="list-preguntas"></div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Comprobar Respuestas</button>
            </div>
        {{-- Fin Formulario <hr> --}}
        </form>
      </div>
    </div>
</div>

<!-- Modal de Restauracion de Contraseña -->
<div class="modal fade" id="new-password" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modal-title-password"><i class="fas fa-key fa-lg mx-2"></i> Nueva Contraseña</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&minus;</span>
          </button>
        </div>
        <form id="form-password">
        {{-- Formulario --}}
            <div class="modal-body">
                @csrf
                <div class="row text-center">
                    <div class="col-md-12 form-group">
                        <label for="password">Nueva Contraseña</label>
                        <div class="input-group">
                            <input type="password" class="form-control" name="password" id="password">
                            <div class="input-group-append views_password" action="hide">
                              <span class="input-group-text"><i class="fas fa-eye"></i></span>
                            </div>
                            <div class="input-group-append">
                                <span class="btn input-group-text" data-toggle="tooltip" data-placement="top" data-html="true" title="<p>La Contraseña debe: <br> • Tener más de 6 caracteres <br> • Tener al menos una mayúscula <br> • Tener al menos un número <br> • Tener al menos uno de estos caracteres especiales:<br> ! @ # $ % & / * .  <br> • No use espacios en blanco</p>"><i class="fas fa-info-circle"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 form-group">
                        <label for="password_confirmation">Confirmar Contraseña</label>
                        <div class="input-group">
                            <input type="password" class="form-control" name="password_confirmation" id="password_confirmation">
                            <div class="input-group-append views_password" action="hide">
                              <span class="input-group-text"><i class="fas fa-eye"></i></span>
                            </div>
                            <div class="input-group-append">
                                <span class="btn input-group-text" data-toggle="tooltip" data-placement="top" data-html="true" title="<p>La Contraseña debe: <br> • Tener más de 6 caracteres <br> • Tener al menos una mayúscula <br> • Tener al menos un número <br> • Tener al menos uno de estos caracteres especiales:<br> ! @ # $ % & / * .  <br> • No use espacios en blanco</p>"><i class="fas fa-info-circle"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Guardar</button>
            </div>
        {{-- Fin Formulario <hr> --}}
        </form>
      </div>
    </div>
</div>
@endsection

@section('content')
                    <p class="login-box-msg">Ingresa tu correo electrónico para autenticarte.</p>
                    <form id="form-authcorreo">
                        @csrf

                        <div class="row mb-3">
                            
                            <div class="col-md-12 text-center">
                                <label for="email" class="col-form-label text-md-end">{{ __('Correo Electrónico') }}</label>
                                <input id="email" type="email" name="email" class="form-control" value="{{ old('email') }}" required autocomplete="email" autofocus>
                            </div>
                        </div>

                        <div class="row mb-0">
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary">{{ __('Verificar correo electrónico ') }}</button>

                                <a href="{{route('login')}}" class="btn font-weight-bold"><i class="fa fa-arrow-left"></i> Volver</a>
                            </div>
                        </div>
                    </form>


                {{-- <form method="POST" action="{{ route('password.email') }}">
                    @csrf

                    <div class="row mb-3">
                        
                        <div class="col-md-12">
                            <label for="email" class="col-form-label text-md-end">{{ __('Correo electrónico') }}</label>
                            <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>

                            @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>

                    <div class="row mb-0">
                        <div class="col-md-12">
                            <button type="submit" class="btn btn-primary">
                                {{ __('Recuperar contraseña') }}
                            </button>

                            <a href="{{route('login')}}" class="btn font-weight-bold"><i class="fa fa-arrow-left"></i> Volver</a>
                        </div>
                    </div>
                </form> --}}
@endsection

@section('scripts')
    <script>
        $(document).ready(function(){
            var id = "";
            var correo = "";
            var metodo = "";

            //activa el efecto de mostrar y ocultar Ccedula
            $(".views_password").on('click', function(e){
                e.preventDefault();
                var action = $(this).attr("action");
                console.log(action);
                if (action == 'hide') {
                    $(this).prev().attr('type', 'text');
                    $(this).attr('action', 'show').html('<span class="input-group-text"><i class="fas fa-eye-slash"></i></span>');
                }
                if (action == 'show') {
                    $(this).prev().attr('type', 'password');
                    $(this).attr('action', 'hide').html('<span class="input-group-text"><i class="fas fa-eye"></i></span>');
                }
            });

        // Captura el evento de cierre del modal para recetera el formulario y restaurara el campo Cedula
            $('#new-password').on('hidden.bs.modal', function (event) {
                console.log('evento');
                $('#form-password').trigger('reset');
                $("#password").attr('type', 'password');
                $("#password_confirmation").attr('type', 'password');
                $(".views_password").attr('action', 'hide').html('<span class="input-group-text"><i class="fas fa-eye"></i></span>');
            })

            $('.btn').tooltip();

        // Verificar correo y optener preguntas de seguridad
            $(document).on('submit', '#form-authcorreo', async function(e){
                $("#email").attr('class', 'form-control')
                e.preventDefault();
                correo = $("input[name=email]").val();
                let row = await show('/userauthentication/show/', correo),
                method = ''
                icon = ''
                idUser = '';
                console.log(row);
                if (row[0] >= 1) {
                    $("#email").attr('class', 'form-control')
                    Swal.fire({
                        title: 'Correo Electrónico Verificado',
                        text: "",
                        icon: 'success',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        cancelButtonText: 'Salir',
                        confirmButtonText: 'Recuperar Contraseña'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            idUser = row[0];
                            row[1].forEach(e => {
                                //console.log(e);
                                if (e.id == 1) {
                                    icon = '<i class="far fa-envelope fa-lg mx-2"></i>';
                                } else if (e.id == 2) {
                                    icon = '<i class="far fa-question-circle fa-lg mx-2"></i>';
                                } else if (e.id == 3){
                                    icon = '<i class="fas fa-phone-alt fa-lg mx-2"></i>';
                                }
                                method +=`
                                    <button type="button" class="list-group-item list-group-item-action callout callout-info method" data-idUser="${idUser}" data-idMetodo="${e.id}">
                                        <div class="d-flex w-100 justify-content-center">
                                            <h5 class="mb-1"> ${icon} ${e.descripcion}</h5>
                                        </div>
                                    </button>
                                `
                            });
                        $('#list-method').html(method);
                        $('#metodoauth').modal('show');
                        }
                    });
                    //
                }else if(row === 'inactivo') {
                    Swal.fire({
                        title: 'Correo Electrónico Bloqueado',
                        text: "Póngase en contacto con la Dirección General de Informática",
                        icon: 'error'
                    })
                    $("#email").attr('class', 'form-control is-invalid')
                }else{
                    Swal.fire({
                        title: 'Error en Correo Electrónico',
                        text: "Parece que el correo es incorrecto o no existe, verifique e intente otra vez",
                        icon: 'error'
                    })
                    $("#email").attr('class', 'form-control is-invalid')
                }
            })
        // Cuando se definan los otros metodos de autenticacion hay que configurara los metodos y funciones que le corresponden solo esta configurado el de preguntas
            // Obtener las preguntas de seguridad que le pertenecen al usuario
            $(document).on('click', '.method', async function() {
                id = $(this).attr("data-idUser");
                metodo = $(this).attr("data-idMetodo");
                let row = await show('/userauthentication/questions/show/', id),
                preguntas = '';
                //console.log(row[0].id);
                if(row[0].id){
                    row.forEach(e => {
                        //console.log(e);
                        preguntas+= `
                                <div class="form-group">
                                    <div class="form-check text-center">
                                        <label for="respuesta${e.id}">¿${e.descripcion}?</label>
                                    </div>
                                    <input type="hidden" name="idResp[]" id="idResp${e.id}" value="${e.id}">
                                    <input class="form-control" type="text" name="respuesta[]" id="respuesta${e.id}" placeholder="Respuesta">
                                </div>
                            `; 
                    })

                    $('#list-preguntas').html(preguntas);
                    $('#preguntasauth').modal('show');
                    
                }else{
                    console.log('no hay preguntas');
                    Swal.fire({
                        title: 'Metodo no Configurado',
                        text: "El este usuario no tiene configurado este método de recuperación de contraseña, pruebe con otro o contacte a soporte",
                        icon: 'warning'
                    })
                }


            })

            // Enviar las respuesta para verificarlas
            $(document).on('submit', '#form-respuestas', async function(e){
                e.preventDefault();
                //console.log('id user: '+id);
                let form = new FormData(this);
                    form.delete('_method');
                let row = await findout('/userauthentication/answers/show/', form, id);
                console.log(row);
                if(row && row.data === 3){
                    $('#metodoauth').modal('hide');
                    $('#preguntasauth').modal('hide');
                    $('#new-password').modal('show');
                }else if(row && row.data === 'inactivo'){
                    Swal.fire({
                        title: 'Error de Autenticación',
                        text: "Llego al máximo de intentos, su Usuario fue Bloqueado",
                        icon: 'error',
                        showConfirmButton: false
                    })
                    setTimeout(function() {window.location ="{{route('login')}}"}, 2500);
                }else{
                    Swal.fire({
                        title: 'Atención',
                        text: "Alguna de las respuestas que copiaste son erradas, solo tienes tres intentos, si fallas tu usuario será bloqueado",
                        icon: 'warning'
                    })
                }

            })

            // Atualizar la nueva contraseña
            $(document).on('submit', '#form-password', async function(e){
                e.preventDefault();
                //console.log('form-password: '+ id);
                let form = new FormData(this);
                    form.append('_method', 'PUT');
                let row = await update('/userauthentication/newpassword/update/', form, id);
                    console.log(row);
                if (row.data == true){
                    $('#new-password').modal('hide');
                    setTimeout(function() {window.location ="{{route('login')}}"}, 2500);
                }
            })
        })

    </script>
@endsection