<div class="card shadow-sm border-0 vx-auth-card">
    <div class="card-body p-4 p-lg-5">
        <div class="d-flex align-items-center gap-2 mb-3">
            <span class="vx-auth-icon"><i class="bx bxs-lock-alt"></i></span>
            <h2 class="h5 mb-0">Acceso al sistema</h2>
        </div>
        <?php if (!empty($desired_company_slug ?? '')): ?>
            <div class="alert alert-info py-2">
                Ingresarás directamente a la empresa <strong>/<?= e((string) $desired_company_slug) ?></strong> después del login.
            </div>
        <?php endif; ?>
        <form action="<?= e(url('login')) ?>" method="post" novalidate>
            <?= csrf_field() ?>
            <div class="mb-3">
                <label class="form-label" for="email">Correo</label>
                <input type="email" class="form-control" id="email" name="email" value="<?= e(old('email', $prefill_email ?? '')) ?>" required>
            </div>
            <div class="mb-3">
                <label class="form-label" for="password">Contraseña</label>
                <div class="input-group">
                    <input type="password" class="form-control" id="password" name="password" required>
                    <button
                        type="button"
                        class="btn btn-outline-secondary vx-password-toggle"
                        id="toggleLoginPassword"
                        data-target="password"
                        aria-label="Mostrar contraseña"
                        aria-pressed="false"
                    >
                        <i class="bx bx-show"></i>
                    </button>
                </div>
            </div>
            <button type="submit" class="btn btn-primary w-100">Iniciar sesión</button>
        </form>
        <hr>
        <a class="btn btn-outline-secondary w-100" href="<?= e(url('registro-empresa')) ?>">
            <i class="bx bx-building-house me-1"></i>Registrar nueva empresa
        </a>
    </div>
</div>

<script>
    window.addEventListener('DOMContentLoaded', () => {
        const toggleButton = document.getElementById('toggleLoginPassword');
        if (!(toggleButton instanceof HTMLButtonElement)) {
            return;
        }

        const targetId = toggleButton.dataset.target || '';
        const passwordInput = document.getElementById(targetId);
        if (!(passwordInput instanceof HTMLInputElement)) {
            return;
        }

        const icon = toggleButton.querySelector('i');
        const setVisible = (visible) => {
            passwordInput.type = visible ? 'text' : 'password';
            toggleButton.setAttribute('aria-pressed', visible ? 'true' : 'false');
            toggleButton.setAttribute('aria-label', visible ? 'Ocultar contraseña' : 'Mostrar contraseña');
            if (icon) {
                icon.className = visible ? 'bx bx-hide' : 'bx bx-show';
            }
        };

        toggleButton.addEventListener('click', () => {
            const visible = passwordInput.type !== 'password';
            setVisible(!visible);
        });

        setVisible(false);
    });
</script>
