<?php require $_SERVER["DOCUMENT_ROOT"].'/inc/conexao.php'; ?>
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
      <meta name="description" content="">
      <meta name="author" content="">
      <link rel="icon" href="/images/favicon.ico">
      <title><?php echo utf8_encode($_SESSION["configs"]["config_nome"]); ?> - Log in </title>
      <!-- Bootstrap 4.0-->
      <link rel="stylesheet" href="/assets/vendor_components/bootstrap/dist/css/bootstrap.min.css">
      <!-- Bootstrap extend-->
      <link rel="stylesheet" href="/css/bootstrap-extend.css">
      <!-- Theme style -->
      <link rel="stylesheet" href="/css/master_style.css">
      <!-- Unique_Admin skins -->
      <link rel="stylesheet" href="/css/skins/_all-skins.css">
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
   </head>
   <body class="hold-transition login-page">
      <section class="h-p100">
         <div class="container h-p100">
            <div class="row h-p100 align-items-center justify-content-md-center">
               <div class="col-lg-4 col-md-8 col-12">
                  <div class="box box-body rounded" id="loadingData">
                     <h3 class="login-box-msg">Inicie sua sessão</h3>
                     <form id="loginForm" action="/api/login" method="POST">
                        <div class="form-group has-feedback">
                           <input type="text" class="form-control" name="user" placeholder="Usuário">
                           <span class="ion ion-user form-control-feedback"></span>
                        </div>
                        <div class="form-group has-feedback">
                           <input type="password" class="form-control" name="pass" placeholder="Senha">
                           <span class="ion ion-locked form-control-feedback"></span>
                        </div>
                        <div class="row">
                           <div class="col-12">
                              <div class="checkbox text-center">
                                 <input type="checkbox" id="basic_checkbox_12" name="salvar" />
                                 <label for="basic_checkbox_12">Lembrar credenciais</label>
                              </div>
                           </div>
                           <!-- /.col -->
                           <div class="col-12 text-center">
                              <button type="submit" class="btn bg-orange btn-block mb-15">Acessar</button>
                           </div>
                           <!-- /.col -->
                           <div class="col-12 text-center">
                              <div class="fog-pwd">
                                 Problemas ao acessar? <a href="javascript:void(0)">Clique aqui</a><br>
                              </div>
                           </div>
                           <!-- /.col -->
                        </div>
                     </form>
                  </div>
                  <div class="social-auth-links text-center text-white">
                     <p>- Precisa de ajuda? -</p>
                     <a href="#" class="btn btn-rounded btn-success"><i class="fa fa-headphones"></i> &nbsp; Atendimento Online</a>
                  </div>
                  <!-- /.social-auth-links -->
                  <div class="margin-top-30 text-center text-white">
                     <p><a href="http://www.sistemafbet.com.br" target="_blank">Sistema FBET</a></p>
                  </div>
               </div>
            </div>
         </div>
      </section>
      <!-- jQuery 3 -->
      <script src="/assets/vendor_components/jquery/dist/jquery.min.js"></script>
      <!-- popper -->
      <script src="/assets/vendor_components/popper/dist/popper.min.js"></script>
      <!-- Bootstrap 4.0-->
      <script src="/assets/vendor_components/bootstrap/dist/js/bootstrap.min.js"></script>

      <script>
         $(function(){
            $(document).ready(function(){
               var spinner = '<div class="loadermodal"><center><img class="floader" src="/loaders/rings.svg" /> Validando dados...</center></div>';
               $('#loginForm').submit(function(e){
                  $('#msg').remove();
                  $('#loadingData').append(spinner);
                  var dados = $( this ).serialize();
                  var form = $(this);

                  $.ajax({
                     type: "POST",
                     url: form.attr('action'),
                     data: dados,
                     success: function( d )
                     {

                        JSON.parse(d);
                        var d = $.parseJSON(d);
                        if(d.status == 'success'){
                           $('#loadingData').prepend('<div class="callout callout-success" id="msg"><p>Redirecionando...</b></p> </div>');
                           location.href = d.url;
                        } else {
                           $('#loadingData').prepend('<div class="callout callout-danger" id="msg"><p>'+d.error+'</p> </div>');
                        }
                        $('.loadermodal').remove();
                     }
                  });
                  e.preventDefault();
               });
            });
         });
      </script>
   </body>
</html>