@extends('master.layout')
{{-- @extends('gestdoc.politica') --}}
@section('conteudo')


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>

<div class="container  pt-4 ">
    <nav class="row mt-4">
        <nav class="col-md-5 col-sm-12 align-center animate__animated animate__fadeInLeft ">

            <form  id="formLogin"  class="shadow-lg border text-center w-md-75 rounded p-4 bg-light border-success needs-validation" novalidate>
                <br>
                @csrf
                <img src="{{ asset('img/logo.png') }}" width="150" alt="LOGO GESTDOC">
                <br>
                <b><label for="">INICIE SESSÃO</label></b>
                <br> <small>Continue para entrar</small> <br>
                <i class="fa fa-lock mt-3 text-success"></i>
                <br>
                <br>
                <div class="input-group mb-3">
                    <span class="input-group-text" id="basic-addon1"><i class="fa fa-envelope"></i></span>
                    <input type="email" name="emailForm" id="emailForm" required class="form-control" placeholder="Seu email" style="outline: none" aria-label="Username" aria-describedby="basic-addon1">
                    <div class="valid-feedback text-end">
                        Boa!
                    </div>
                </div>

                <div class="input-group mb-3">
                    <span class="input-group-text" id="basic-addon1"><i class="fa fa-user-secret"></i></span>
                    <input type="password" name="senhaForm" id="senhaForm" required class="form-control" placeholder="Senha" style="outline: none" aria-label="Username" aria-describedby="basic-addon1">
                    <div class="valid-feedback text-end">
                        Boa!
                      </div>
                </div>
                <nav class="text-start">

                    <b><a href="#">Esqueceu a sua senha?</a></b>
                    <br>
                    <br>
                    <small class="text-justify">
                        Este computador não está reconhecido? Tente o login e lhe mostraremos opções para solicitar o reconhecimento deste dispositivo para ser um dos seus dispositivos de acesso!
                    </small>
                </nav>
                <br><br>
                <nav class="text-end">

                    <button class="btn btn-success"  ><b>  Prosseguir </b><i class="fa fa-chevron-right fa-sm"></i></button>
                </nav>
                <br><br>
            </form>



        </nav>
        <nav class="col-md-7 col-sm-12 align-center animate__animated animate__fadeInUp">
            <div class="row">
                <nav class="col-12">

                    <div class="accordion accordion-flush" id="accordionFlushExample">
                        <div class="accordion-item">
                        <h2 class="accordion-header" id="flush-headingOne">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                            POLÍTICAS
                            </button>
                        </h2>
                        <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                            <div class="accordion-body ">
                            <p class="text-justify">
                                A GESTDOC TECH poderá estabelecer Termos  de Uso e Políticas de Privacidade específicas aplicáveis à determinada solução, que complementará e/ou prevalecerá sobre estes Termos de Uso e Políticas de Privacidade.
                                <a href="">Ver políticas</a>
                            </p>

                            </div>
                        </div>
                        </div>
                        <div class="accordion-item">
                        <h2 class="accordion-header" id="flush-headingTwo">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                            AJUDA
                            </button>
                        </h2>
                        <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
                            <div class="accordion-body">
                                Caso tenha alguma necessidade de saber como fazer alguma coisa no nosso sistema, disponibilizamos alguns tutoriais para ajudar você a estar mais livre. Consulte a area de <a href="">Ajuda</a>
                            </div>
                        </div>
                        </div>
                        <div class="accordion-item">
                        <h2 class="accordion-header" id="flush-headingThree">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                            GESTDOC
                            </button>
                        </h2>
                        <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
                            <div class="accordion-body">

                                Somos a sua fiel empresa de gestão documental, disposta para armazenar e cuidar com carinho os seus preciosos documentos. Nosso sistema ajudará você no que for possível. Copyright &copy; {{ now()->year }} com amor.
                            </div>
                        </div>
                    </div>
                </nav>

            </div>
            <div class="row p-5">
                <nav class="col-12 w-100 mt-4 text-center">

                    <label>O QUE PODE FAZER NO NOSSO SITE?</label>
                    <hr>
                    <nav class="row">
                        <div class="card col animate__animated animate__fadeInRight  "  >
                            <div class="card-body">
                                <button class="btn mb-2 shadow btn-lg animate__animated animate__bounceIn bg-success rounded-circle mt-2  " style="height: 90px; width:90px;">
                                    <i class="fa fa-file fa-2x text-white "></i>
                                </button>
                                <h5 class="card-title">01</h5>
                                <h6 class="card-subtitle mb-2 text-muted">GERIR DOCUMENTOS</h6>
                              {{-- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> --}}

                            </div>
                        </div>
                        <div class="card col  animate__animated animate__bounceIn"  >
                            <div class="card-body">
                                <button class="btn mb-2 shadow btn-lg animate__animated animate__bounceIn bg-success rounded-circle mt-2  " style="height: 90px; width:90px;">
                                    <i class="fa fa-box fa-2x text-white "></i>
                                </button>
                                <h5 class="card-title">02</h5>
                                <h6 class="card-subtitle mb-2 text-muted">GERIR CAIXAS</h6>
                              {{-- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> --}}

                            </div>
                        </div>
                        <div class="card col  animate__animated animate__fadeInLeft"  >
                            <div class="card-body">
                                <button class="btn mb-2 shadow btn-lg  bg-success rounded-circle mt-2  " style="height: 90px; width:90px;">
                                    <i class="fa fa-users fa-2x text-white "></i>
                                </button>
                                <h5 class="card-title">03</h5>
                                 <h6 class="card-subtitle mb-2 text-muted">GERIR ACESSOS</h6>
                              {{-- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> --}}

                            </div>
                        </div>
                    </nav>
                    <br>
                    <nav class="row">
                        <div class="card col animate__animated animate__fadeInRight "  >
                            <div class="card-body">
                                <button class="btn mb-2 shadow btn-lg animate__animated animate__bounceIn bg-success rounded-circle mt-2  " style="height: 90px; width:90px;">
                                    <i class="fa fa-chart-bar fa-2x text-white "></i>
                                </button>
                                <h5 class="card-title">04</h5>
                                <h6 class="card-subtitle mb-2 text-muted">CONTROLO POR DASHBOARD</h6>
                              {{-- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> --}}

                            </div>
                        </div>
                        <div class="card col  animate__animated animate__bounceIn"  >
                            <div class="card-body">
                                <button class="btn mb-2 shadow btn-lg animate__animated animate__bounceIn bg-success rounded-circle mt-2  " style="height: 90px; width:90px;">
                                    <i class="fa fa-search fa-2x text-white "></i>
                                </button>
                                <h5 class="card-title">05</h5>
                                <h6 class="card-subtitle mb-2 text-muted">PESQUISAS RÁPIDAS</h6>
                              {{-- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> --}}

                            </div>
                        </div>
                        <div class="card col  animate__animated animate__fadeInLeft"  >
                            <div class="card-body">
                                <button class="btn mb-2 shadow btn-lg animate__animated animate__bounceIn bg-success rounded-circle mt-2  " style="height: 90px; width:90px;">
                                    <i class="fa fa-infinity fa-2x text-white "></i>
                                </button>
                                <h5 class="card-title">06</h5>
                                <h6 class="card-subtitle mb-2 text-muted">E OUTROS RECURSOS</h6>
                              {{-- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> --}}

                            </div>
                        </div>
                    </nav>
                    <br>

                </nav>

            </div>
        </nav>

    </nav>
</div>

<button type="button" class="btn btn-primary invisible" id="openModal" data-bs-toggle="modal" data-bs-target="#mdCarregando" data-bs-whatever="@mdo">Open modal for @mdo</button>

  <!-- Modal -->
  <div class="modal fade" id="mdCarregando" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">

      <div class="modal-content">
        <div class="modal-header   ">
          <label class="modal-title" id="staticBackdropLabel">Acessando o sistema</label>
          <button  class="btn-close fecharModalLogin invisible" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <br>
            <br>
            <br>

            <br>
            <nav class="carregando text-center">
                <div class="spinner-grow text-success" role="status">
                </div> <br><br>
                <small class=" ">Acessando o sistema... <br> (<span id="infoResultLogin">Verificando a autenticação da conta</span>)</small>
            </nav>
            <nav class="resultado resultadoNegativo rounded p-5 bg-danger text-center invisible text-white">

                <i class="fa fa-times"></i>

                <br><br>
                <h3>Usuário ou senha incorrecta</h3>

            </nav>
            <nav class="resultado resultadoPositivo rounded p-5 bg-success text-center invisible text-white">
                <i class="fa fa-check"></i>
                <br><br>
                <h4>Exito no acesso <br>    Aguarde um instante...</h4>
            </nav>
            <br><br>
            <br>

            <br>
            <br>
            <nav class="nivelVerificacao">
                <label for="customRange3" class="form-label">Nível de verificação : <b><label for="" id="verificationLevelNumber" ></label></b></label>
                <input type="range" id="verificationLevel" disabled class="form-range" min="1" max="3" step="1" value="1" id="customRange3">
            </nav>
            <br>
        </div>
        <div class="modal-footer">

        </div>
      </div>
    </div>
  </div>

<script>
   // Example starter JavaScript for disabling form submissions if there are invalid fields

(function () {
  'use strict'

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  var forms = document.querySelectorAll('.needs-validation')
  // Loop over them and prevent submission
  Array.prototype.slice.call(forms)
    .forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }
        else{
            event.preventDefault()
            logar();
        }
        form.classList.add('was-validated')

      }, false)
    })
    $("#verificationLevelNumber").text('01');




})()
function logar (){
    $("#openModal").click();
    $("#verificationLevel").val(1);
    $(".resultado").hide();
    $(".resultado").removeClass('invisible');
    $("#verificationLevelNumber").text('01');

    $(".nivelVerificacao").show();
    $(".carregando").show();
    var email= $("#emailForm").val();
    var senha= $("#senhaForm").val();
    $("#verificationLevel").animate({
        value: "1"

    }, 3000, function() {
        $("#verificationLevelNumber").text('01');
        $.post( "{{route('logar')}}", { 'email': email ,'senha': senha ,'_token': '{{ csrf_token() }}'}, function(result){

            if(result){
                $("#verificationLevelNumber").text('02');
                $("#verificationLevel").val(2);
                $("#infoResultLogin").text("Verificando a autenticação do dispositivo");
                $("#verificationLevel").animate({
                    value: "2"
                }, 3000, function() {

                    $.post( "{{route('device')}}", { '_token': '{{ csrf_token() }}'}, function(res){
                        // alert(res)
                        if(res){
                            $("#verificationLevel").val(3);
                            $("#infoResultLogin").text("Verificação finalizada");
                            $("#verificationLevel").animate({
                                value: "3"
                            }, 3000, function() {

                                $(".resultado").hide();
                                $(".carregando").hide();
                                $(".nivelVerificacao").hide();
                                $(".resultadoPositivo").show();
                                $("#verificationLevel").animate({
                                    value: "3"
                                }, 3000, function() {
                                    if(res==1){
                                    //   $.alert("Olá, benvindo")
                                        $(location).attr('href','{{ route('us.me') }}');
                                    }
                                    else{
                                        // alert("Olá")
                                        // $.alert("Olá benvindo 2")
                                        $(location).attr('href','{{ route('us.escessodevices') }}');
                                    }

                                });
                               });
                        }

                    } ).fail(function(){
                        $.alert("Não está sendo possível prosseguir com o acesso ao sistema devido a alguma interferência. Estamos tentando resolver esse problema")
                    });
                });
            }
            else{

                $("#verificationLevel").val(3);
                $("#infoResultLogin").text("Verificação finalizada");
                $("#verificationLevel").animate({
                    value: "3"
                }, 3000, function() {
                    $.post( "{{route('sair')}}", { '_token': '{{ csrf_token() }}'});
                    $("#verificationLevelNumber").text('03');
                    $(".resultado").hide();
                    $(".carregando").hide();
                    $(".nivelVerificacao").hide();
                    $(".resultadoNegativo").show();
                    $("#verificationLevel").animate({
                            value: "3"
                        }, 3000, function() {

                            $("#emailForm").val("");
                            $("#senhaForm").val("");
                            $("#emailForm").focus();
                            $(".fecharModalLogin").click();

                        });
                });
            }
        } ).fail(function(){
            // alert("Erro ao acessar o server")
            $.alert({
                title: 'Olá!',
                content: 'Houve um erro ao acessar o servidor, tente novamente mais tarde',
            });
        });
    });



}
</script>

@endsection