{{-- ══ PASO 1: Ingreso de correo ══ --}} @if ($paso === 'email')

Chat en vivo

Ingresa tu correo para comenzar

@error('email') {{ $message }} @enderror
{{-- ══ PASO 2: No existe — ofrecer registro ══ --}} @elseif ($paso === 'registro')

No encontramos tu cuenta

No existe una cuenta con el correo
{{ $email }}

¿Deseas crear una cuenta?

@error('nombreRegistro') {{ $message }} @enderror
@error('cedulaRegistro') {{ $message }} @enderror
@error('celularRegistro') {{ $message }} @enderror
{{-- ══ PASO 4: Verificación OTP ══ --}} @elseif ($paso === 'verificacion')

Verifica tu identidad

Enviamos un código de 6 dígitos a
{{ $emailMascarado }}

@if (session('otp_reenviado'))

{{ session('otp_reenviado') }}

@endif @if ($errorEnvioOtp)
{{ $errorEnvioOtp }}
@endif
@error('codigoIngresado') {{ $message }} @enderror
{{-- ══ PASO 3: Interfaz de chat ══ --}} @else
{{-- Header --}}

{{ $nombreUsuario ?: 'Soporte en línea' }}

@if ($estadoConv === 'agente') Atendido por un agente @elseif ($estadoConv === 'cerrada') Conversación cerrada @else Bot activo @endif

{{-- Saldo si hay usuario identificado --}} @if ($saldoUsuario !== null)

Saldo

${{ number_format($saldoUsuario) }}

@endif {{-- Menú de opciones --}}
{{-- Badge: nuevos mensajes mientras se lee el historial --}} {{-- Reintento automático de validación de pago. Va en su propio elemento: Livewire v2 solo respeta el PRIMER wire:poll de un mismo nodo, así que compartirlo con el poll de mensajes hacía que este nunca se ejecutara. Solo se renderiza mientras hay un pago pendiente, así no gasta requests. --}} @if ($flujo === 'pago.pendiente') @endif {{-- Mensajes --}}
@forelse($mensajes as $msg) {{-- ── Mensaje del USUARIO ── --}} @if ($msg['tipo'] === 'usuario')
@if (($msg['tipo_ui'] ?? 'text') === 'imagen')
Comprobante enviado
{{ $msg['created_at'] }}
@else

{{ $msg['contenido'] }}

{{ $msg['created_at'] }}
@endif
{{-- ── Mensajes del BOT / AGENTE ── --}} @else
@php $tipoUi = $msg['tipo_ui'] ?? 'text'; $payload = $msg['payload'] ?? []; @endphp {{-- TEXTO normal --}} @if ($tipoUi === 'text')
@if ($msg['tipo'] === 'agente') Agente @endif

{{ $msg['contenido'] }}

{{ $msg['created_at'] }}
{{-- BUTTONS: texto + fila de botones --}} @elseif ($tipoUi === 'buttons')
@if ($msg['contenido'])

{{ $msg['contenido'] }}

{{ $msg['created_at'] }}
@endif
@foreach ($payload['botones'] ?? [] as $btn) @if ($btn['disabled'] ?? false) @else @endif @endforeach
{{-- CARD: tarjeta de servicio o promo --}} @elseif ($tipoUi === 'card')
@if (!empty($payload['imagen'])) @endif

{{ $payload['titulo'] ?? '' }}

@if (!empty($payload['descripcion']))

{{ $payload['descripcion'] }}

@endif @if (!empty($payload['precio']))

${{ number_format($payload['precio']) }}

@endif @if (!empty($payload['detalle']))

{{ $payload['detalle'] }}

@endif @if (!empty($payload['accion'])) @endif
{{ $msg['created_at'] }}
{{-- CARDS SLIDER: servicios / promos en carrusel horizontal --}} @elseif ($tipoUi === 'cards_slider')
@if ($msg['contenido'])

{{ $msg['contenido'] }}

{{ $msg['created_at'] }}
@endif {{-- Scroll horizontal de cards --}}
@foreach ($payload['cards'] ?? [] as $card)
@if (!empty($card['imagen'])) @else
@endif

{{ $card['titulo'] ?? '' }}

@if (!empty($card['precio']))

${{ number_format($card['precio']) }}

@endif @if (!empty($card['detalle']))

{{ $card['detalle'] }}

@endif @if (!empty($card['descripcion']))

{{ $card['descripcion'] }}

@endif @if (!empty($card['accion'])) @endif
@endforeach
{{-- LINK: botón de pago externo --}} @elseif ($tipoUi === 'link')

{{ $msg['contenido'] }}

{{ $payload['label'] ?? 'Ir a pagar' }} @if (!empty($payload['nota']))

{{ $payload['nota'] }}

@endif
{{ $msg['created_at'] }}
{{-- VALIDACION: resultado de comprobante de pago --}} @elseif ($tipoUi === 'validacion')
{{-- Header estado --}} @php $estado = $payload['estado'] ?? 'no_encontrado'; $esConfirmado = $estado === 'confirmado'; $esIncorrecto = $estado === 'monto_incorrecto'; @endphp

@if ($esConfirmado) ✅ Pago confirmado @elseif ($esIncorrecto) ⚠️ Monto no coincide @else ⏳ Verificando pago... @endif

{{-- Datos extraídos --}}

Datos del comprobante

@foreach (['banco' => 'Banco', 'valor' => 'Valor', 'remitente' => 'De', 'referencia' => 'Referencia', 'fecha' => 'Fecha'] as $key => $label) @if (!empty($payload['ia_datos'][$key]))
{{ $label }} {{ $payload['ia_datos'][$key] }}
@endif @endforeach
{{-- Botones de acción --}}
@foreach ($payload['botones'] ?? [] as $btn) @endforeach
{{ $msg['created_at'] }}
{{-- CREDENCIALES: tarjeta con usuario/contraseña --}} @elseif ($tipoUi === 'credenciales')
{{-- Encabezado servicio --}}

{{ $payload['servicio'] ?? 'Credenciales' }}

✅ Compra exitosa
{{-- Mensaje de gracias --}} @if (!empty($msg['contenido']))

{{ $msg['contenido'] }}

@endif {{-- Campos con copiar individual --}}
@if (!empty($payload['email']))

Usuario / Email

{{ $payload['email'] }}

@endif @if (!empty($payload['password']))

Contraseña

{{ $payload['password'] }}

@endif @if (!empty($payload['perfil']))

Perfil

{{ $payload['perfil'] }}

@endif @if (!empty($payload['vence']))

📅 Vence: {{ $payload['vence'] }}

@endif
{{-- Botón Copiar todo --}}
{{ $msg['created_at'] }}
{{-- BANCO: datos de transferencia bancaria --}} @elseif ($tipoUi === 'banco')

Pago por Bre-B

@if (!empty($payload['banco']))
Banco / Billetera {{ $payload['banco'] }}
@endif

Llave Bre-B

{{ $payload['clave'] ?? '' }}

¡Copiado!

@if (!empty($payload['titular']))
Titular {{ $payload['titular'] }}
@endif
Monto exacto ${{ number_format($payload['monto'] ?? 0) }}

Envía el comprobante con el ícono 📷 de abajo y el sistema lo validará automáticamente

{{ $msg['created_at'] }}
{{-- fallback --}} @else

{{ $msg['contenido'] }}

{{ $msg['created_at'] }}
@endif
@endif @empty
Iniciando chat...
@endforelse {{-- Burbuja optimista: el mensaje del usuario aparece antes de que el servidor responda, igual que en WhatsApp. Se borra sola cuando Livewire devuelve la lista real. --}} {{-- "Escribiendo…" mientras el bot procesa cualquier acción --}}
{{-- Input + upload --}} @if ($estadoConv !== 'cerrada')
{{-- Preview local de la imagen seleccionada --}} {{-- Indicador: subiendo archivo (fase Alpine) --}}
Subiendo imagen...
{{-- Indicador: analizando con IA (fase Livewire server) --}}
Analizando comprobante con IA...
{{-- Botón adjuntar foto --}} {{-- wire:ignore: su contenido y su altura los maneja Alpine. Sin esto, el poll de 3s le devolvería la altura original mientras el usuario está escribiendo. --}}
@else
Esta conversación ha sido cerrada.
@endif {{-- Visor de imagen a pantalla completa --}}
@endif