@extends('layouts.app')
@section('content')
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<style>
    .bg-img{
  background: url('http://localhost/Bitacora/public/img/buque.jpg');
  height: 100vh;
  background-size: cover;
  background-position: center;
}
.bg-img:after{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.809);
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 999;
  text-align: center;
  padding: 60px 32px;
  width: 370px;
  transform: translate(-50%,-50%);
  background: rgba(255, 255, 255, 0.063);
  box-shadow: -1px 4px 28px 0px rgba(0,0,0,0.75);
}
.content header{
  color: white;
  font-size: 33px;
  font-weight: 600;
  margin: 0 0 35px 0;
  font-family: 'Montserrat',sans-serif;
}
.field{
  position: relative;
  height: 45px;
  width: 100%;
  display: flex;
  background: rgba(255,255,255,0.94);
}
.field span{
  color: #222;
  width: 40px;
  line-height: 45px;
}
.field input{
  height: 100%;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #222;
  font-size: 16px;
  font-family: 'Poppins',sans-serif;
}
.space{
  margin-top: 16px;
}
.show{
  position: absolute;
  right: 13px;
  font-size: 13px;
  font-weight: 700;
  color: #222;
  display: none;
  cursor: pointer;
  font-family: 'Montserrat',sans-serif;
}
.pass-key:valid ~ .show{
  display: block;
}
.pass{
  text-align: left;
  margin: 10px 0;
}
.pass a{
  color: white;
  text-decoration: none;
  font-family: 'Poppins',sans-serif;
}
.pass:hover a{
  text-decoration: underline;
}
.field input[type="submit"]{
  background: #3498db;
  border: 1px solid #2691d9;
  color: white;
  font-size: 18px;
  letter-spacing: 1px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Montserrat',sans-serif;
}
.field input[type="submit"]:hover{
  background: #2691d9;
}
.login{
  color: white;
  margin: 20px 0;
  font-family: 'Poppins',sans-serif;
}
i span{
  margin-left: 8px;
  font-weight: 500;
  letter-spacing: 1px;
  font-size: 16px;
  font-family: 'Poppins',sans-serif;
}
.signup{
  font-size: 15px;
  color: white;
  font-family: 'Poppins',sans-serif;
}
.signup a{
  color: #3498db;
  text-decoration: none;
}
.signup a:hover{
  text-decoration: underline;
}

</style>
<div class="bg-img">
    <div class="content">

      <header>Bitacora 3.0<br><p style="font-size:12px;">Corporativo Internacional Especializado</p></header>
      <form method="POST" action="{{ route('login') }}">
        @csrf
        <div class="field">
            <span class="fa fa-user"></span>
            <input id="usu" type="text" required autocomplete="Usuario" autofocus placeholder="Ingresa Usuario">
            <input id="email" type="hidden" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
        </div>
        <div class="field space">
            <span class="fa fa-lock"></span>
            <input type="password" id="pass" class="pass-key" name="password" required placeholder="*****">
            @error('password')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
          <span class="show">Mostrar</span>
        </div><br>
        <div class="field">
          <input type="submit" id="entrar" value="{{ __('Entrar') }}">
        </div>
</form>

</div>
</div>
<script>
    $(document).ready(function(){
        document.getElementById("usu").value = "";
        document.getElementById("pass").value = "";
        
        $('#entrar').mouseover(function(){
            var usuario = document.getElementById('usu');
            var email = usuario.value + "@cieagenciaaduanal.com";
            $('#email').val(email);
        });
    });

    const pass_field = document.querySelector('.pass-key');
    const showBtn = document.querySelector('.show');
    showBtn.addEventListener('click', function(){
     if(pass_field.type === "password"){
       pass_field.type = "text";
       showBtn.textContent = "Ocultar";
       showBtn.style.color = "#3498db";
     }else{
       pass_field.type = "password";
       showBtn.textContent = "Mostrar";
       showBtn.style.color = "#222";
     }
    });

    
  </script>
@endsection