@extends('layouts.auth')

@section('content')

<div class="row">
    <div class="col-md-4 bg-white">
        <div class="auth-fluid">    
            <div class="auth-fluid-form-box">
                <div class="card-body d-flex flex-column">
                
                    <div class="text-center mt-3 mb-3">
                        <img src="{{ asset('fondo/5.jpg') }}" alt="dark logo" class="img-fluid" style="height:130px;">
                    </div>
            
            
                    <form method="POST" action="{{ route('login') }}">
                       {{ csrf_field() }}
                
                        <h4 class="mt-4 font-weight-bold">Iniciar sesión</h4>
                        <p class="text-muted mb-4">Introduzca su dirección de correo electrónico y contraseña para acceder a su cuenta.</p>
                        
                       <div class="row">
                    
                            <div class="col-md-12">
                                <div class="form-group mb-4">
                                   <label class="font-weight-bold">Correo Electrónico</label>
                                   <input type="email" class="form-control dimension correo" name="user_email" required style="border-radius: 8px;">
                                </div>
                            </div>
                    
                            <div class="col-md-12 mb-3">
                                <label class="font-weight-bold">Contraseña</label>
                                <a class="text-muted f-12" data-toggle="modal" data-target="#olvidado">Has olvidado tu contraseña ?</a>
                                <div class="input-group mb-2">
                                    <div class="input-group-prepend" onclick="mostrarPassword()">
                                        <div class="input-group-text">
                                            <i class="fa fa-eye-slash icon"></i>
                                        </div>
                                    </div>
                                    <input type="password" class="form-control dimension password" name="password" required id="txtPassword" style="border-top-right-radius: 8px; border-bottom-right-radius: 8px;">
                                </div>
                            </div>
                            
                            
                            <div class="col-md-12">
                                <div class="form-group">
                                    <a class="text-info" href="#" onclick="cambio_admin('1')">Inicia sesion como Administrador</a>
                                </div>
                            </div>
                            
                            <div class="col-md-12">
                                <div class="form-group">
                                    <a class="text-info" href="#" onclick="cambio_admin('2')">Inicia sesion como Usuario</a>
                                </div>
                            </div>
                    
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <button class="button-login btn-block" type="submit">Login</button>
                                </div>
                            </div>
                        </div>
                
                    </form>
            
                </div>      
            </div>
        </div>
    </div>    


    <div class="col-md-8 d-none d-sm-block" style="background-image: url('{{ asset('assets/blanco.png')}}'); background-size: cover;"></div>

</div>
    
    
    
<div class="modal fade" id="olvidado" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">Olvido su Contraseña</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <form action="{{route('autenticacion.clave')}}" method="post">
            {{ csrf_field() }}
            
            <h4 class="text-center mt-2 mb-3">Olvido su Contraseña</h4>
            
            <div class="col-md-12">
                <div class="form-group">
                   <input type="email" class="form-control" placeholder="Correo Electrónico" name="email">
                </div>
            </div>
            
            
            <div class="col-md-12">
                <div class="form-group">
                    <button type="submit" class="btn btn-info btn-block">Aceptar</button>
                </div>
            </div>
            
        </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>


@endsection

@push('script')
<script type="text/javascript">

    function mostrarPassword(){
        var cambio = document.getElementById("txtPassword");
		if(cambio.type == "password"){
			cambio.type = "text";
			$('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');
		}else{
			cambio.type = "password";
			$('.icon').removeClass('fa fa-eye').addClass('fa fa-eye-slash');
		}
    }
  
    $(document).ready(function(){
        $('.correo').val('myvirtualoffice@aprendemlm.com');
        $('.password').val('123456');
    });
    
    function cambio_admin(valor){
        
        if(valor == 1){
            $('.correo').val('myvirtualoffice@aprendemlm.com');
            $('.password').val('123456');
        }
        
        if(valor == 2){
            $('.correo').val('20@aprendemlm.com');
            $('.password').val('Prueba.2024');
        }
    }
  
</script>
@endpush