@extends('layouts.guest')

@section('title', 'Iniciar Sesion | Veltrix v2')

@section('content')
    <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>
                <h1 class="h5 mb-0">Acceso al sistema</h1>
            </div>

            @if (! empty($desired_company_slug ?? ''))
                <div class="alert alert-info py-2">
                    Ingresarás directamente a la empresa <strong>/{{ (string) $desired_company_slug }}</strong> después del login.
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger py-2">
                    {{ $errors->first() }}
                </div>
            @endif

            <form method="POST" action="{{ route('login.store') }}" novalidate>
                @csrf

                <div class="mb-3">
                    <label class="form-label" for="email">Correo</label>
                    <input
                        id="email"
                        name="email"
                        type="email"
                        class="form-control"
                        value="{{ old('email', (string) ($prefill_email ?? '')) }}"
                        required
                        autofocus
                    >
                </div>

                <div class="mb-3">
                    <label class="form-label" for="password">Contraseña</label>
                    <div class="input-group">
                        <input id="password" name="password" type="password" class="form-control" 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="{{ url('registro-empresa') }}">
                <i class="bx bx-building-house me-1"></i>Registrar nueva empresa
            </a>
        </div>
    </div>
@endsection

@push('scripts')
<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>
@endpush