<style>

.inicio {
    background-color: #EAA354;
    border-color: #EAA354;
}
    @media (min-width: 700px) {
    .login-box {
      width: 650px;
   } 
   .login-box .card2 {
    display: flex;
    flex-direction: row;
    align-items: center;
   }
   .login-box .card2 img {
    width: 90%;
   }
   .login-box .card2 .card3 {
    width: 100%;
   }
    }
  </style>

<div class="login-page">
  <div class="back"></div>
  <div class="login-box">

    <!-- /.login-logo -->
    <div class="card card2" style="border-radius: 20px">

      <div class="card-body login-card-body card1"  style="display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-content: center;border-radius: 20px;width: 100%;">
        <img src="vistas/dist/img/Logo.png" class="img-responsive" style="border-radius: 10px">
      </div>

      <div class="card-body login-card-body card3" style="border-radius: 20px">
        

        <form method="post">

            <div id="signup">
              <h4 class="login-box-msg" style="color: #eaa354;">Ingresar al sistema</h4>

                <div class="row" >

                    <div class="input-group mb-3">
                      <select class="form-control input-lg " name="area" id="area" required>
                        <option value="">Seleccionar Area</option>
                        <?php 

                            $item = null;
                            $valor = null;

                            $area = ControladorArea:: ctrMostrarArea($item, $valor);
                            foreach($area as $key => $value){
                              echo '<option value="'.$value["id"].'">'.$value["nombre"].'</option>';
                              
                            }
                            ?>
                        
                      </select>
                      <div class="input-group-append">
                        <div class="input-group-text">
                          <span class="fas fa-warehouse"></span>
                        </div>
                      </div>
                    </div>

                    <div class="input-group mb-3">
                      <input type="text" class="form-control" placeholder="Usuario" name="ingUsuario" required>
                      <div class="input-group-append">
                        <div class="input-group-text">
                          <span class="fas fa-user"></span>
                        </div>
                      </div>
                    </div>

                </div>
                
                <div class="row">
                  <div class="input-group mb-3">
                    <input type="password" class="form-control" placeholder="Contraseña" name="ingPassword" required>
                    <div class="input-group-append">

                      <div class="input-group-text">
                        <span class="fas fa-lock"></span>
                      </div>
                    </div>
                  </div>
                </div>

                <?php
                 /* // Datos
                  $token = 'apis-token-7604.X1zJD1xO3tk5-idvU2Fpz2slTVM-4AXO';
                  date_default_timezone_set('America/Lima');
                  $fecha = date('Y-m-d');
              
                  // Iniciar llamada a API
                  $curl = curl_init();

                  curl_setopt_array($curl, array(
                    // para usar la api versión 2
                    CURLOPT_URL => 'https://api.apis.net.pe/v2/sunat/tipo-cambio?date=' . $fecha,
                    // para usar la api versión 1
                    // CURLOPT_URL => 'https://api.apis.net.pe/v1/tipo-cambio-sunat?fecha=' . $fecha,
                    CURLOPT_RETURNTRANSFER => true,
                    CURLOPT_SSL_VERIFYPEER => 0,
                    CURLOPT_ENCODING => '',
                    CURLOPT_MAXREDIRS => 2,
                    CURLOPT_TIMEOUT => 0,
                    CURLOPT_FOLLOWLOCATION => true,
                    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
                    CURLOPT_CUSTOMREQUEST => 'GET',
                    CURLOPT_HTTPHEADER => array(
                      'Referer: https://apis.net.pe/tipo-de-cambio-sunat-api',
                      'Authorization: Bearer ' . $token
                    ),
                  ));

                  $response = curl_exec($curl);

                  curl_close($curl);
                  // Datos listos para usar
                  $tipoCambioSunat = json_decode($response, true); */

                  echo '<input type="hidden" class="form-control" name="ingTasadecambio" placeholder="Tasa de cambio" step=".01" value="3.800">' ;  /*'.$tipoCambioSunat["precioCompra"].'*/ 

                
                  ?>

                
                  <div class="row">
                    <!-- /.col -->
                    <div class="input-group mb-3">
                      <button type="submit" class="btn btn-warning btn-block inicio">Ingresar</button>

                      
                    </div>

                    <a href="#" id="olvidar" title="Recuperar Clave" style="color: #eaa354;">Recuperar Clave</a>
                    <!-- /.col -->
                  </div>

            
              <?php 
                $login = new ControladorUsuarios();
                $login -> ctrIngresoUsuario();
              
              ?>

            </div>
        </form>
        <!-- /.login-card-body -->
      

        <div id="recuperarclave">

            <form action="modulos/recuperarClaveConLink.php" method="post">

              <p class="login-box-msg recuperarPass">
                      Recuperar tu Clave
                  </p>
                  <div class="row" >
                      <div class="input-group mb-3">
                          <input type="email" class="form-control" name="email"  placeholder="ingrese Correo" required autocomplete="off" style="margin: 0px 20px">
                      </div>
                  </div>

                  <div class="row" >
                    <div class="input-group mb-3">
                      <input type="submit" class="btn btn-primary btn-block " value="RECUPERAR CLAVE" style="margin: 0px 20px" />
                    </div>
                  </div>

                      <a href="#" id="volver" class="mt-3 mb-4" title="Volver" style="margin: 0px 20px" >Volver</a>
                      <br>
                      <br>
            </form>

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


<script type="text/javascript">
 $('#recuperarclave').hide(); 

$('#olvidar').on('click', function() {
    $('#signup').hide(); //para ocultar
    $("#recuperarclave").fadeIn("slow"); //mostrar
});

$('#volver').on('click', function() {
    $('#recuperarclave').hide(); //para ocultar
    $("#signup").fadeIn("slow"); //mostrar
});
</script>
<!-- /.login-box -->