|
|
@ -1,5 +1,13 @@ |
|
|
|
<x-app-layout> |
|
|
|
<x-app-layout> |
|
|
|
<div class="py-8 px-8"> |
|
|
|
|
|
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="py-8 px-8"> |
|
|
|
|
|
|
|
<div class="flex justify-end mb-4"> |
|
|
|
|
|
|
|
<button id="exportButton" class="bg-blue-900 hover:bg-opacity-90 transition-all text-white py-2 px-6 rounded text-lg">Exportar PDF</button> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div id="paginatoda"> |
|
|
|
<!-- Informações do Contato e do Atendente --> |
|
|
|
<!-- Informações do Contato e do Atendente --> |
|
|
|
<div class="border-gray-700 border-b-2 mb-8 pb-4"> |
|
|
|
<div class="border-gray-700 border-b-2 mb-8 pb-4"> |
|
|
|
<div class="p-6 text-gray-900 dark:text-gray-100"> |
|
|
|
<div class="p-6 text-gray-900 dark:text-gray-100"> |
|
|
@ -29,13 +37,13 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 px-6 py-6 m:rounded-lg overflow-y-scroll lg:w-full md:w-[50%] flex-wrap p-6"> |
|
|
|
<div class="bg-white dark:bg-gray-800 px-6 py-6 m:rounded-lg overflow-y-scroll lg:w-full md:w-[50%] flex-wrap p-6 atendente-info"> |
|
|
|
<h1 class="text-gray-800 dark:text-gray-100 text-lg px-6">Informações do atendente</h1> |
|
|
|
<h1 class="text-gray-800 dark:text-gray-100 text-lg px-6">Informações do atendente</h1> |
|
|
|
<div class="atendentes mt-4 flex flex-col gap-4"> |
|
|
|
<div class="atendentes mt-4 flex flex-col gap-4"> |
|
|
|
@foreach ($atendentes as $atendente) |
|
|
|
@foreach ($atendentes as $atendente) |
|
|
|
<div class="accordion text-gray-800 dark:text-gray-100 " onclick="clickedAccordion(event)"> |
|
|
|
<div class="accordion text-gray-800 dark:text-gray-100" onclick="clickedAccordion(event)"> |
|
|
|
<div class="bg-gray-300 dark:bg-gray-600 flex items-center gap-6 cursor-pointer hover:bg-gray-700 px-6 py-5"> |
|
|
|
<div class="bg-gray-300 dark:bg-gray-600 flex items-center gap-6 cursor-pointer hover:bg-gray-700 px-6 py-5"> |
|
|
|
<i class="fas fa-play text-xs icon "></i> |
|
|
|
<i class="fas fa-play text-xs icon"></i> |
|
|
|
<span class="date">{{ \Carbon\Carbon::parse($atendente->data_atendimento)->format('d/m/Y')}}</span> |
|
|
|
<span class="date">{{ \Carbon\Carbon::parse($atendente->data_atendimento)->format('d/m/Y')}}</span> |
|
|
|
<span class="hour">{{ \Carbon\Carbon::parse($atendente->data_atendimento)->format('H:i:s')}}</span> |
|
|
|
<span class="hour">{{ \Carbon\Carbon::parse($atendente->data_atendimento)->format('H:i:s')}}</span> |
|
|
|
<span class="id">#{{$atendente->protocolo}}</span> |
|
|
|
<span class="id">#{{$atendente->protocolo}}</span> |
|
|
@ -66,13 +74,14 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<!-- Histórico de Conversa --> |
|
|
|
<!-- Histórico de Conversa --> |
|
|
|
<div class="bg-white dark:bg-gray-800 px-6 py-6 m:rounded-lg overflow-y-scroll lg:w-full md:w-[50%] flex-wrap p-6" style="height: 1000px; overflow: hidden;"> |
|
|
|
<div id="historicoConversa" class="bg-white dark:bg-gray-800 px-6 py-6 m:rounded-lg lg:w-full md:w-[50%] flex-wrap p-6"> |
|
|
|
<h1 class="text-gray-800 dark:text-gray-100 text-lg">Histórico de Conversa</h1> |
|
|
|
<h1 class="text-gray-800 dark:text-gray-100 text-lg">Histórico de Conversa</h1> |
|
|
|
<div class="chat overflow-y-scroll h-[1000px] px-8 py-4 flex flex-col gap-y-4"> |
|
|
|
<div class="chat h-auto px-8 py-4 flex flex-col gap-y-4"> |
|
|
|
|
|
|
|
<!-- Mensagens do Chat --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</x-app-layout> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<script src="{{ asset('js/relatorios/historicoChamadas/index.js') }}"></script> |
|
|
|
<script src="{{ asset('js/relatorios/historicoChamadas/index.js') }}"></script> |
|
|
|
<script src="{{ asset('js/relatorios/historicoChamadas/accordion.js') }}"></script> |
|
|
|
<script src="{{ asset('js/relatorios/historicoChamadas/accordion.js') }}"></script> |
|
|
@ -85,3 +94,56 @@ const server_api = "{{env('APP_URL')}}"; |
|
|
|
|
|
|
|
|
|
|
|
montaChat(messages, cliente_id); |
|
|
|
montaChat(messages, cliente_id); |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
|
|
document.getElementById('exportButton').addEventListener('click', function () { |
|
|
|
|
|
|
|
const paginatoda = document.getElementById('paginatoda'); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (!paginatoda) { |
|
|
|
|
|
|
|
console.error('Elemento não encontrado!'); |
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Clonar o conteúdo para exportação |
|
|
|
|
|
|
|
const clone = paginatoda.cloneNode(true); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Adicionar header e footer ao clone |
|
|
|
|
|
|
|
const header = document.createElement('div'); |
|
|
|
|
|
|
|
header.style.textAlign = 'center'; |
|
|
|
|
|
|
|
header.style.marginBottom = '20px'; |
|
|
|
|
|
|
|
header.innerHTML = '<h2>Relatório de Atendimento</h2>'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const footer = document.createElement('div'); |
|
|
|
|
|
|
|
footer.style.textAlign = 'center'; |
|
|
|
|
|
|
|
footer.style.marginTop = '20px'; |
|
|
|
|
|
|
|
footer.innerHTML = '<p>Gerado pelo ZAPI</p>'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Adicionar header e footer ao clone |
|
|
|
|
|
|
|
clone.prepend(header); |
|
|
|
|
|
|
|
clone.append(footer); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Remover o botão de exportação e informações do atendente do clone |
|
|
|
|
|
|
|
const exportButton = clone.querySelector('#exportButton'); |
|
|
|
|
|
|
|
const atendenteInfo = clone.querySelector('.atendente-info'); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (exportButton) { |
|
|
|
|
|
|
|
exportButton.remove(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (atendenteInfo) { |
|
|
|
|
|
|
|
atendenteInfo.remove(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const options = { |
|
|
|
|
|
|
|
margin: 0.5, |
|
|
|
|
|
|
|
filename: 'historico_conversa.pdf', |
|
|
|
|
|
|
|
image: { type: 'jpeg', quality: 0.98 }, |
|
|
|
|
|
|
|
html2canvas: { scale: 2 }, |
|
|
|
|
|
|
|
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }, |
|
|
|
|
|
|
|
pagebreak: { mode: ['css', 'legacy'] }, |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
html2pdf().set(options).from(clone).save(); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
</x-app-layout> |
|
|
|