Fix: socket permissions para nginx
This commit is contained in:
@@ -0,0 +1,281 @@
|
||||
@extends('layouts.landing')
|
||||
|
||||
@section('title', 'Chat WhatsApp')
|
||||
|
||||
@section('content')
|
||||
<div class="container-fluid">
|
||||
<div class="row" style="height:calc(100vh - 180px)">
|
||||
|
||||
{{-- Panel izquierdo: lista de prospectos --}}
|
||||
<div class="col-md-4 col-lg-3 pr-md-1 mb-3 mb-md-0">
|
||||
<div class="card shadow h-100 d-flex flex-column">
|
||||
<div class="card-header py-2 d-flex align-items-center justify-content-between">
|
||||
<h6 class="m-0 font-weight-bold text-primary">
|
||||
<i class="fab fa-whatsapp mr-1"></i> Conversaciones
|
||||
</h6>
|
||||
<a href="{{ route('promocion.index') }}" class="btn btn-sm btn-secondary">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-body p-0" style="overflow-y:auto; flex:1">
|
||||
@forelse($prospectos as $item)
|
||||
@php
|
||||
$alumno = $item['alumno'];
|
||||
$user = $item['user'];
|
||||
$ultimo = $item['ultimo'];
|
||||
@endphp
|
||||
<a href="#"
|
||||
class="prospecto-item d-flex align-items-center p-3 border-bottom text-dark text-decoration-none"
|
||||
data-id="{{ $alumno->id }}"
|
||||
data-nombre="{{ $user ? $user->name.' '.$user->apellidoPaterno : 'Alumno #'.$alumno->id }}"
|
||||
data-avatar="{{ $user?->profile_photo_url ?? '' }}">
|
||||
<div class="position-relative flex-shrink-0 mr-3">
|
||||
@if($user && $user->profile_photo_url)
|
||||
<img src="{{ $user->profile_photo_url }}"
|
||||
class="rounded-circle" width="40" height="40"
|
||||
style="object-fit:cover" alt="">
|
||||
@else
|
||||
<div class="rounded-circle bg-secondary d-flex align-items-center justify-content-center"
|
||||
style="width:40px;height:40px">
|
||||
<i class="fas fa-user text-white small"></i>
|
||||
</div>
|
||||
@endif
|
||||
@if($item['no_leidos'] > 0)
|
||||
<span class="badge badge-danger badge-counter position-absolute"
|
||||
style="top:-4px;right:-6px;min-width:18px"
|
||||
id="badge-{{ $alumno->id }}">
|
||||
{{ $item['no_leidos'] }}
|
||||
</span>
|
||||
@else
|
||||
<span class="badge badge-danger badge-counter d-none position-absolute"
|
||||
style="top:-4px;right:-6px;min-width:18px"
|
||||
id="badge-{{ $alumno->id }}">0</span>
|
||||
@endif
|
||||
</div>
|
||||
<div style="min-width:0;flex:1">
|
||||
<div class="font-weight-bold small text-truncate">
|
||||
{{ $user ? $user->name.' '.$user->apellidoPaterno : 'Alumno #'.$alumno->id }}
|
||||
</div>
|
||||
<div class="small text-muted text-truncate">
|
||||
{{ $ultimo?->mensaje ?? 'Sin mensajes' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="small text-muted ml-2 flex-shrink-0">
|
||||
{{ $ultimo?->created_at?->format('H:i') ?? '' }}
|
||||
</div>
|
||||
</a>
|
||||
@empty
|
||||
<div class="text-center text-muted py-5">
|
||||
<i class="fab fa-whatsapp fa-3x mb-2 d-block text-success"></i>
|
||||
Sin conversaciones aún.
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Panel derecho: historial + envío --}}
|
||||
<div class="col-md-8 col-lg-9 pl-md-1">
|
||||
<div class="card shadow h-100 d-flex flex-column">
|
||||
{{-- Header del chat --}}
|
||||
<div class="card-header py-2 d-flex align-items-center" id="chatHeader" style="display:none!important">
|
||||
<div class="rounded-circle bg-secondary d-flex align-items-center justify-content-center mr-3"
|
||||
style="width:36px;height:36px;overflow:hidden" id="chatAvatar">
|
||||
<i class="fas fa-user text-white small"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-weight-bold" id="chatNombre">—</div>
|
||||
<div class="small text-muted" id="chatTel"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Estado vacío --}}
|
||||
<div class="card-body d-flex align-items-center justify-content-center" id="chatVacio">
|
||||
<div class="text-center text-muted">
|
||||
<i class="fab fa-whatsapp fa-4x text-success mb-3 d-block"></i>
|
||||
Selecciona un prospecto para ver la conversación
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Mensajes --}}
|
||||
<div class="card-body p-3 d-none" id="chatMensajes"
|
||||
style="flex:1;overflow-y:auto;background:#ece5dd;">
|
||||
</div>
|
||||
|
||||
{{-- Input de envío --}}
|
||||
<div class="card-footer p-2 d-none" id="chatFooter">
|
||||
<form id="chatForm" class="d-flex">
|
||||
<input type="text" id="chatInput" class="form-control form-control-sm mr-2"
|
||||
placeholder="Escribe un mensaje..." autocomplete="off">
|
||||
<button type="submit" class="btn btn-sm btn-success">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
</form>
|
||||
<div id="chatError" class="small text-danger mt-1 d-none"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
<script>
|
||||
(function () {
|
||||
let alumnoActual = null;
|
||||
let echoChannel = null;
|
||||
|
||||
const $vacio = document.getElementById('chatVacio');
|
||||
const $mensajes = document.getElementById('chatMensajes');
|
||||
const $footer = document.getElementById('chatFooter');
|
||||
const $header = document.getElementById('chatHeader');
|
||||
const $nombre = document.getElementById('chatNombre');
|
||||
const $tel = document.getElementById('chatTel');
|
||||
const $avatar = document.getElementById('chatAvatar');
|
||||
const $input = document.getElementById('chatInput');
|
||||
const $error = document.getElementById('chatError');
|
||||
const $form = document.getElementById('chatForm');
|
||||
|
||||
// Seleccionar prospecto
|
||||
document.querySelectorAll('.prospecto-item').forEach(el => {
|
||||
el.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
document.querySelectorAll('.prospecto-item').forEach(x => x.classList.remove('bg-light'));
|
||||
this.classList.add('bg-light');
|
||||
|
||||
alumnoActual = this.dataset.id;
|
||||
const nombre = this.dataset.nombre;
|
||||
const avatar = this.dataset.avatar;
|
||||
|
||||
$nombre.textContent = nombre;
|
||||
|
||||
if (avatar) {
|
||||
$avatar.innerHTML = `<img src="${avatar}" class="rounded-circle" style="width:36px;height:36px;object-fit:cover" alt="">`;
|
||||
} else {
|
||||
$avatar.innerHTML = '<i class="fas fa-user text-white small"></i>';
|
||||
}
|
||||
|
||||
$header.style.removeProperty('display');
|
||||
$vacio.classList.add('d-none');
|
||||
$mensajes.classList.remove('d-none');
|
||||
$footer.classList.remove('d-none');
|
||||
$error.classList.add('d-none');
|
||||
|
||||
cargarMensajes(alumnoActual);
|
||||
suscribirCanal(alumnoActual);
|
||||
|
||||
// Limpiar badge
|
||||
const badge = document.getElementById('badge-' + alumnoActual);
|
||||
if (badge) badge.classList.add('d-none');
|
||||
});
|
||||
});
|
||||
|
||||
function cargarMensajes(id) {
|
||||
$mensajes.innerHTML = '<div class="text-center py-3"><i class="fas fa-spinner fa-spin"></i></div>';
|
||||
$tel.textContent = '';
|
||||
|
||||
axios.get(`/promociones/chat/${id}`)
|
||||
.then(res => {
|
||||
$tel.textContent = res.data.alumno.tel ?? '';
|
||||
renderMensajes(res.data.logs);
|
||||
})
|
||||
.catch(() => {
|
||||
$mensajes.innerHTML = '<div class="text-center text-danger py-3">Error al cargar mensajes.</div>';
|
||||
});
|
||||
}
|
||||
|
||||
function renderMensajes(logs) {
|
||||
$mensajes.innerHTML = '';
|
||||
logs.forEach(log => agregarMensaje(log));
|
||||
$mensajes.scrollTop = $mensajes.scrollHeight;
|
||||
}
|
||||
|
||||
function agregarMensaje(log) {
|
||||
const enviado = log.tipo === 'enviado';
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = `d-flex mb-2 ${enviado ? 'justify-content-end' : 'justify-content-start'}`;
|
||||
|
||||
let contenido = '';
|
||||
|
||||
if (log.media_type === 'image' && log.mensaje) {
|
||||
contenido = `<img src="/storage/${log.mensaje}" class="img-fluid rounded" style="max-width:200px" alt="imagen">`;
|
||||
} else if (log.media_type && log.mensaje) {
|
||||
const nombre = log.mensaje.split('/').pop();
|
||||
contenido = `<a href="/storage/${log.mensaje}" target="_blank" class="btn btn-sm btn-outline-secondary">
|
||||
<i class="fas fa-paperclip mr-1"></i>${nombre}
|
||||
</a>`;
|
||||
} else {
|
||||
contenido = escHTML(log.mensaje ?? '');
|
||||
}
|
||||
|
||||
wrapper.innerHTML = `
|
||||
<div class="px-3 py-2 rounded shadow-sm" style="max-width:70%;background:${enviado ? '#dcf8c6' : '#fff'};word-break:break-word">
|
||||
${contenido}
|
||||
<div class="text-right" style="font-size:.7rem;color:#999;margin-top:4px">${log.created_at}</div>
|
||||
</div>`;
|
||||
|
||||
$mensajes.appendChild(wrapper);
|
||||
$mensajes.scrollTop = $mensajes.scrollHeight;
|
||||
}
|
||||
|
||||
function suscribirCanal(id) {
|
||||
if (echoChannel) {
|
||||
window.Echo.leave(echoChannel);
|
||||
}
|
||||
|
||||
echoChannel = `whatsapp-chat.${id}`;
|
||||
|
||||
window.Echo.private(echoChannel)
|
||||
.listen('NuevoMensajeWhatsApp', (e) => {
|
||||
if (String(alumnoActual) === String(e.alumno_id)) {
|
||||
agregarMensaje({
|
||||
tipo: e.tipo,
|
||||
mensaje: e.mensaje,
|
||||
media_type: e.media_type,
|
||||
created_at: e.created_at,
|
||||
});
|
||||
} else {
|
||||
// Actualizar badge del prospecto en la lista
|
||||
const badge = document.getElementById('badge-' + e.alumno_id);
|
||||
if (badge) {
|
||||
const n = (parseInt(badge.textContent) || 0) + 1;
|
||||
badge.textContent = n;
|
||||
badge.classList.remove('d-none');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
const texto = $input.value.trim();
|
||||
if (!texto || !alumnoActual) return;
|
||||
|
||||
$input.disabled = true;
|
||||
$error.classList.add('d-none');
|
||||
|
||||
axios.post('/promociones/chat/send', { alumno_id: alumnoActual, mensaje: texto })
|
||||
.then(res => {
|
||||
$input.value = '';
|
||||
agregarMensaje(res.data);
|
||||
})
|
||||
.catch(err => {
|
||||
const msg = err.response?.data?.error ?? 'Error al enviar el mensaje.';
|
||||
$error.textContent = msg;
|
||||
$error.classList.remove('d-none');
|
||||
})
|
||||
.finally(() => {
|
||||
$input.disabled = false;
|
||||
$input.focus();
|
||||
});
|
||||
});
|
||||
|
||||
function escHTML(str) {
|
||||
const d = document.createElement('div');
|
||||
d.appendChild(document.createTextNode(str));
|
||||
return d.innerHTML;
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user