121 lines
7.6 KiB
PHP
121 lines
7.6 KiB
PHP
<div class="w-full max-w-md mx-auto flex flex-col" style="height:100dvh">
|
|
|
|
{{-- ══ PASO 1: Formulario de inicio ══ --}}
|
|
@if ($paso === 'telefono')
|
|
<div class="flex flex-col items-center justify-center h-full px-6">
|
|
<div class="w-full bg-[#202c33] rounded-2xl shadow-2xl p-8">
|
|
|
|
<div class="flex flex-col items-center mb-8">
|
|
<div class="w-20 h-20 bg-[#00a884] rounded-full flex items-center justify-center mb-4 shadow-lg">
|
|
<svg class="w-10 h-10 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8.625 9.75a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z" />
|
|
</svg>
|
|
</div>
|
|
<h1 class="text-white text-2xl font-semibold">Chat en vivo</h1>
|
|
<p class="text-[#8696a0] text-sm mt-1 text-center">Ingresa tu número para comenzar</p>
|
|
</div>
|
|
|
|
<form wire:submit.prevent="iniciar" class="space-y-4">
|
|
<div>
|
|
<label class="block text-[#8696a0] text-xs font-medium mb-1 uppercase tracking-wider">Teléfono *</label>
|
|
<input wire:model.defer="telefono" type="tel" placeholder="Ej: 3001234567"
|
|
class="w-full bg-[#2a3942] text-white rounded-xl px-4 py-3 text-sm outline-none border border-transparent focus:border-[#00a884] transition placeholder-[#8696a0]">
|
|
@error('telefono')
|
|
<span class="text-red-400 text-xs mt-1 block">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
<div>
|
|
<label class="block text-[#8696a0] text-xs font-medium mb-1 uppercase tracking-wider">Nombre (opcional)</label>
|
|
<input wire:model.defer="nombre" type="text" placeholder="Tu nombre"
|
|
class="w-full bg-[#2a3942] text-white rounded-xl px-4 py-3 text-sm outline-none border border-transparent focus:border-[#00a884] transition placeholder-[#8696a0]">
|
|
</div>
|
|
<button type="submit"
|
|
class="w-full bg-[#00a884] hover:bg-[#06cf9c] text-white font-semibold py-3 rounded-xl transition text-sm shadow-lg">
|
|
<span wire:loading.remove wire:target="iniciar">Comenzar chat →</span>
|
|
<span wire:loading wire:target="iniciar">Conectando...</span>
|
|
</button>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ══ PASO 2: Interfaz de chat ══ --}}
|
|
@else
|
|
<div class="flex flex-col h-full bg-[#0b141a]"
|
|
x-data
|
|
x-on:scroll-chat.window="$nextTick(() => { let el = document.getElementById('pub-messages'); if(el) el.scrollTop = el.scrollHeight; })">
|
|
|
|
{{-- Header --}}
|
|
<div class="bg-[#202c33] px-4 py-3 flex items-center gap-3 shadow-md flex-shrink-0">
|
|
<div class="w-10 h-10 bg-[#00a884] rounded-full flex items-center justify-center flex-shrink-0">
|
|
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8.625 9.75a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z" />
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-white font-semibold text-sm truncate">Soporte en línea</p>
|
|
<p class="text-[#8696a0] text-xs">
|
|
@if ($estadoConv === 'agente') Atendido por un agente
|
|
@elseif ($estadoConv === 'cerrada') Conversación cerrada
|
|
@else Bot activo
|
|
@endif
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Mensajes --}}
|
|
<div class="flex-1 overflow-y-auto px-4 py-4 space-y-2" id="pub-messages"
|
|
wire:poll.3000ms="cargarMensajes">
|
|
@forelse($mensajes as $msg)
|
|
@if ($msg['tipo'] === 'usuario')
|
|
<div class="flex justify-end">
|
|
<div class="max-w-[78%] bg-[#005c4b] text-white rounded-xl rounded-tr-sm px-4 py-2 shadow text-sm">
|
|
<p class="whitespace-pre-line break-words">{{ $msg['contenido'] }}</p>
|
|
<span class="text-[#8696a0] text-[10px] float-right mt-1 ml-2">{{ $msg['created_at'] }}</span>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="flex justify-start">
|
|
<div class="max-w-[78%] bg-[#202c33] text-white rounded-xl rounded-tl-sm px-4 py-2 shadow text-sm">
|
|
@if ($msg['tipo'] === 'agente')
|
|
<span class="text-amber-400 text-[10px] font-semibold block mb-0.5">Agente</span>
|
|
@endif
|
|
<p class="whitespace-pre-line break-words">{{ $msg['contenido'] }}</p>
|
|
<span class="text-[#8696a0] text-[10px] float-right mt-1 ml-2">{{ $msg['created_at'] }}</span>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
@empty
|
|
<div class="text-center text-[#8696a0] text-sm py-10">Iniciando chat...</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
{{-- Input --}}
|
|
@if ($estadoConv !== 'cerrada')
|
|
<div class="bg-[#202c33] px-3 py-3 flex items-end gap-2 flex-shrink-0">
|
|
<textarea
|
|
wire:model.defer="input"
|
|
wire:keydown.enter.prevent="enviar"
|
|
rows="1"
|
|
placeholder="Escribe un mensaje..."
|
|
class="flex-1 bg-[#2a3942] text-white text-sm rounded-xl px-4 py-3 resize-none outline-none placeholder-[#8696a0] max-h-28"
|
|
style="overflow-y:auto;"
|
|
></textarea>
|
|
<button wire:click="enviar"
|
|
class="w-11 h-11 bg-[#00a884] hover:bg-[#06cf9c] rounded-full flex items-center justify-center transition flex-shrink-0">
|
|
<svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
@else
|
|
<div class="bg-[#202c33] px-4 py-4 text-center text-[#8696a0] text-sm flex-shrink-0">
|
|
Esta conversación ha sido cerrada.
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|