{{-- ══ 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 --}} {{-- Mientras ValidarPagoWebJob trabaja, este poll solo pregunta si ya hay desenlace (lectura de caché, sin llamadas externas). Va en su propio elemento porque Livewire v2 solo respeta el PRIMER wire:poll de un mismo nodo: compartirlo con el poll de mensajes hacía que uno de los dos nunca se ejecutara. --}} @if ($flujo === 'pago.procesando') @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 job valida el pago se queda fijo, porque el trabajo ocurre fuera del request y wire:loading no lo cubriría. --}} @if ($flujo === 'pago.procesando')
@else
@endif
{{-- 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) --}}
Enviando comprobante...
{{-- 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