@extends('simulador_ganancias.layouts.app')

@section('contenido')

<div class="login-container md: mx-3" id="div_login">
    <img src="images/subdomain/simulador_ganancias/gradient_taxes.png" alt="Gradient" class="gradient-taxes">
    <img src="images/subdomain/simulador_ganancias/gradient_taxes.png" alt="Gradient" class="gradient-secondary">
        <div class="login-box" id="loginBox">
            <img src="images/subdomain/simulador_ganancias/taxes.png" alt="Logo" class="logo">

            <!-- Formulario de Login -->
            <div id="form-login-container">
                <h1>Acceso al simulador de ganancias</h1>
                <p>Completá tus datos para acceder</p>
                {{-- Mostrar errores generales --}}
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <div id="alert-container"></div>
                <form class="form iq-subscribe form_login" role="form" method="POST" action="/login" id="form-login">
                    {{ csrf_field() }}
                    <div class="form-group">
                        <input type="text" class="form-control" id="loginUser" name="loginUser" placeholder="Usuario" required>
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" id="password" name="password" placeholder="Contraseña" required>
                    </div>
                    <button type="submit" class="btn btn-primary btn-taxes">Iniciar sesión</button>
                </form>
                <div class="text-center mt-3">
                    <a href="#" id="link-primera-vez" style="color: #3C5EF5; font-weight: 500;">
                        ¿Es tu primera vez? Creá tu clave aquí
                    </a>
                </div>
                <p class="mt-3 text-muted" style="font-size: 0.9em;">
                    Si no tenes usuario o te olvidaste tu clave, comunicate con RRHH para que te den acceso.
                </p>
            </div>

            <!-- Formulario para verificar usuario (primera vez) -->
            <div id="form-verificar-container" style="display: none;">
                <h1>Ingreso por primera vez</h1>
                <p>Ingresá tu usuario para verificar si podés crear tu clave</p>
                <div id="alert-verificar-container"></div>
                <form class="form iq-subscribe" id="form-verificar">
                    {{ csrf_field() }}
                    <div class="form-group">
                        <input type="text" class="form-control" id="verificar-loginUser" placeholder="Usuario" required>
                    </div>
                    <button type="submit" class="btn btn-primary btn-taxes" id="btn-verificar">Verificar usuario</button>
                    <button type="button" class="btn btn-secondary btn-block mt-2" id="btn-volver-login-desde-verificar">Volver al login</button>
                </form>
            </div>

            <!-- Formulario de Crear Clave (oculto por defecto) -->
            <div id="form-crear-clave-container" style="display: none;">
                <h1>Crear tu clave</h1>
                <p>Es tu primera vez ingresando. Por favor, creá tu clave personal.</p>
                <div id="alert-crear-clave-container"></div>
                <form class="form iq-subscribe" role="form" id="form-crear-clave">
                    {{ csrf_field() }}
                    <div class="form-group">
                        <input type="text" class="form-control" id="crear-loginUser" name="loginUser" readonly style="background-color: #e9ecef;">
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" id="crear-clave" name="clave" placeholder="Nueva clave (mínimo 6 caracteres)" required minlength="6">
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" id="crear-clave-confirmation" name="clave_confirmation" placeholder="Confirmar clave" required minlength="6">
                    </div>
                    <button type="submit" class="btn btn-primary btn-taxes" id="btn-crear-clave">
                        <span id="btn-crear-clave-text">Crear mi clave</span>
                        <span id="btn-crear-clave-loading" style="display: none;">
                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                            Creando...
                        </span>
                    </button>
                    <button type="button" class="btn btn-secondary btn-block mt-2" id="btn-volver-login">Volver al login</button>
                </form>
            </div>

        </div>

        <div class="info-box">
            <img src="images/subdomain/simulador_ganancias/line-pattern.png" alt="Pattern" class="dotted-pattern">
            <div>
                <h2>Portal Liquidacion Impuesto a las Ganancias</h2>
                <p>Evita dolores de cabeza en tu proyección de ganancias </p>
                <div class="line my-4"></div>
                <ul class="checklist">
                    <li>
                        <i class="ion-checkmark-circled"></i>
                        <span>Lleva un control de tu sueldo mes a mes</span>
                    </li>
                    <li>
                        <i class="ion-checkmark-circled"></i>
                        <span>Prevee cuanto te van a Retener de Ganancias</span>
                    </li>
                    <li>
                        <i class="ion-checkmark-circled"></i>
                        <span>Controla tu retención de ganancias</span>
                    </li>
                    <li>
                        <i class="ion-checkmark-circled"></i>
                        <span>Carga tus deducciones</span>
                    </li>
                </ul>
            </div>
            <p class="made-by-taxes">Desarrollado por Taxes Software SAS</p>
        </div>


</div>

@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Contenedores
    const formLoginContainer = document.getElementById('form-login-container');
    const formVerificarContainer = document.getElementById('form-verificar-container');
    const formCrearClaveContainer = document.getElementById('form-crear-clave-container');

    // Formularios
    const formVerificar = document.getElementById('form-verificar');
    const formCrearClave = document.getElementById('form-crear-clave');

    // Botones y links
    const linkPrimeraVez = document.getElementById('link-primera-vez');
    const btnVolverLoginDesdeVerificar = document.getElementById('btn-volver-login-desde-verificar');
    const btnVolverLogin = document.getElementById('btn-volver-login');
    const btnCrearClave = document.getElementById('btn-crear-clave');
    const btnCrearClaveText = document.getElementById('btn-crear-clave-text');
    const btnCrearClaveLoading = document.getElementById('btn-crear-clave-loading');

    // Contenedores de alertas
    const alertVerificarContainer = document.getElementById('alert-verificar-container');
    const alertCrearClaveContainer = document.getElementById('alert-crear-clave-container');

    // Click en "¿Es tu primera vez?"
    linkPrimeraVez.addEventListener('click', function(e) {
        e.preventDefault();
        mostrarFormularioVerificar();
    });

    // Volver al login desde verificar
    btnVolverLoginDesdeVerificar.addEventListener('click', function() {
        mostrarFormularioLogin();
    });

    // Volver al login desde crear clave
    btnVolverLogin.addEventListener('click', function() {
        mostrarFormularioLogin();
    });

    // Submit del formulario de verificar usuario
    formVerificar.addEventListener('submit', function(e) {
        e.preventDefault();
        const loginUser = document.getElementById('verificar-loginUser').value;

        if (!loginUser || loginUser.trim() === '') {
            mostrarError(alertVerificarContainer, 'Ingresá tu usuario');
            return;
        }

        verificarUsuarioPrimeraVez(loginUser);
    });

    function verificarUsuarioPrimeraVez(loginUser) {
        fetch('/auth/verificar_usuario', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
            },
            body: JSON.stringify({ loginUser: loginUser })
        })
        .then(response => response.json())
        .then(data => {
            if (!data.existe) {
                mostrarError(alertVerificarContainer, 'Usuario no encontrado. Verificá que esté bien escrito o contactá a RRHH.');
                return;
            }

            if (data.requiere_crear_clave) {
                // Usuario sin clave - mostrar formulario para crear
                mostrarFormularioCrearClave(loginUser);
            } else {
                // Usuario YA tiene clave
                mostrarError(alertVerificarContainer,
                    '<strong>Ya tenés una clave asignada.</strong><br>' +
                    'Si no la recordás, contactá a RRHH para que te la blanqueen.'
                );
            }
        })
        .catch(error => {
            console.error('Error:', error);
            mostrarError(alertVerificarContainer, 'Error al verificar usuario. Intentá de nuevo.');
        });
    }

    // Submit del formulario de crear clave
    formCrearClave.addEventListener('submit', function(e) {
        e.preventDefault();

        const loginUser = document.getElementById('crear-loginUser').value;
        const clave = document.getElementById('crear-clave').value;
        const claveConfirmation = document.getElementById('crear-clave-confirmation').value;

        // Validar que las claves coincidan
        if (clave !== claveConfirmation) {
            mostrarError(alertCrearClaveContainer, 'Las claves no coinciden');
            return;
        }

        // Validar longitud mínima
        if (clave.length < 6) {
            mostrarError(alertCrearClaveContainer, 'La clave debe tener al menos 6 caracteres');
            return;
        }

        // Deshabilitar botón
        btnCrearClave.disabled = true;
        btnCrearClaveText.style.display = 'none';
        btnCrearClaveLoading.style.display = 'inline';

        fetch('/auth/crear_clave', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
            },
            body: JSON.stringify({
                loginUser: loginUser,
                clave: clave,
                clave_confirmation: claveConfirmation
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.errores) {
                mostrarError(alertCrearClaveContainer, data.errores);
                habilitarBotonCrearClave();
                return;
            }

            if (data.redirect) {
                mostrarExito(alertCrearClaveContainer, 'Clave creada correctamente. Redirigiendo...');
                setTimeout(function() {
                    window.location.href = data.redirect;
                }, 1500);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            mostrarError(alertCrearClaveContainer, 'Error al crear la clave. Intentá de nuevo.');
            habilitarBotonCrearClave();
        });
    });

    // Funciones para mostrar/ocultar formularios
    function mostrarFormularioLogin() {
        formLoginContainer.style.display = 'block';
        formVerificarContainer.style.display = 'none';
        formCrearClaveContainer.style.display = 'none';
        limpiarAlerta(alertVerificarContainer);
        limpiarAlerta(alertCrearClaveContainer);
    }

    function mostrarFormularioVerificar() {
        formLoginContainer.style.display = 'none';
        formVerificarContainer.style.display = 'block';
        formCrearClaveContainer.style.display = 'none';
        document.getElementById('verificar-loginUser').value = '';
        document.getElementById('verificar-loginUser').focus();
        limpiarAlerta(alertVerificarContainer);
    }

    function mostrarFormularioCrearClave(loginUser) {
        formLoginContainer.style.display = 'none';
        formVerificarContainer.style.display = 'none';
        formCrearClaveContainer.style.display = 'block';
        document.getElementById('crear-loginUser').value = loginUser;
        document.getElementById('crear-clave').value = '';
        document.getElementById('crear-clave-confirmation').value = '';
        document.getElementById('crear-clave').focus();
        limpiarAlerta(alertCrearClaveContainer);
    }

    function habilitarBotonCrearClave() {
        btnCrearClave.disabled = false;
        btnCrearClaveText.style.display = 'inline';
        btnCrearClaveLoading.style.display = 'none';
    }

    function mostrarError(container, mensaje) {
        container.innerHTML = '<div class="alert alert-danger">' + mensaje + '</div>';
    }

    function mostrarExito(container, mensaje) {
        container.innerHTML = '<div class="alert alert-success">' + mensaje + '</div>';
    }

    function limpiarAlerta(container) {
        container.innerHTML = '';
    }
});
</script>
@endsection