@extends('auth.body.main')

@section('container')
<div class="row align-items-center justify-content-center height-self-center">
    <div class="col-lg-5 col-md-8 col-sm-10">
        <div class="card auth-card shadow-lg border-0 rounded-lg" style="background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);">
            <div class="card-body p-4">
                <div class="p-3">
                    <div class="text-center mb-4">
                        <h2 class="mb-2 font-weight-bold text-dark" style="letter-spacing: -0.5px;">Aurora POS</h2>
                        <p class="text-muted font-size-14">Inicie sesión para acceder al sistema</p>
                    </div>

                    <form action="{{ route('login') }}" method="POST">
                        @csrf
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="floating-label form-group">
                                    <input class="floating-input form-control @error('email') is-invalid @enderror @error('username') is-invalid @enderror" type="text" name="input_type" placeholder=" " value="{{ old('input_type') }}" autocomplete="off" required autofocus>
                                    <label>Correo electrónico o usuario</label>
                                </div>
                                @error('username')
                                <div class="mb-4" style="margin-top: -20px">
                                    <div class="text-danger small">Usuario o contraseña incorrecta.</div>
                                </div>
                                @enderror
                                @error('email')
                                <div class="mb-4" style="margin-top: -20px">
                                    <div class="text-danger small">Usuario o contraseña incorrecta.</div>
                                </div>
                                @enderror
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label class="text-muted font-size-13">Contraseña</label>
                                    <div class="input-group">
                                        <input class="floating-input form-control @error('email') is-invalid @enderror @error('username') is-invalid @enderror" type="password" id="login-password" name="password" placeholder="Ingrese su contraseña" required>
                                        <div class="input-group-append">
                                            <button type="button" id="toggle-login-pass" tabindex="-1" style="background: transparent; border: 1px solid #ced4da; border-left: 0; border-radius: 0 4px 4px 0; padding: 0 16px; display: flex; align-items: center; justify-content: center; outline: none; cursor: pointer; height: 100%;">
                                                <span id="eye-container">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#6c757d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                                        <circle cx="12" cy="12" r="3"></circle>
                                                    </svg>
                                                </span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12 mb-3">
                                <a href="#" class="text-primary font-size-13">¿Has olvidado tu contraseña?</a>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary btn-block py-2 font-weight-bold">Iniciar Sesión</button>
                        
                        <div class="text-center mt-4">
                            <p class="mb-0 text-muted font-size-13">
                                ¿No tienes cuenta? <a href="{{ route('register') }}" class="text-primary font-weight-bold">Registrarse</a>
                            </p>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('toggle-login-pass').addEventListener('click', function() {
    const input = document.getElementById('login-password');
    const container = document.getElementById('eye-container');
    
    const eyeOpen = `
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#6c757d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
            <circle cx="12" cy="12" r="3"></circle>
        </svg>
    `;
    
    const eyeClosed = `
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#6c757d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
            <line x1="1" y1="1" x2="23" y2="23"></line>
        </svg>
    `;

    if (input.type === 'password') {
        input.type = 'text';
        container.innerHTML = eyeClosed;
    } else {
        input.type = 'password';
        container.innerHTML = eyeOpen;
    }
});
</script>
@endsection