Merge pull request 'Exportar PDF relatorio chatbot' (#4) from Matheus.Maia/simples-painel:Saas into Saas

Reviewed-on: felipe.fontana/simples-painel#4

resources/views/admin/relatorios/historicoBots/historicoAtendimentoBots.blade.php

@@ -1,13 +1,21 @@
 <x-app-layout>
-    <div class="py-8 px-8">
-        <!-- Informações do Contato e do Atendente -->
+
+<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 -->
         <div class="border-gray-700 border-b-2 mb-8 pb-4">
             <div class="p-6 text-gray-900 dark:text-gray-100">
                 <h1 class="text-2xl font-bold">Histórico: {{$contato->nome ?? "Nome não encontrado"}}</h1>
             </div>
 
             <div class="mt-4 flex gap-12">
-                <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 lg:w-full md:w-[50%] flex-wrap p-6">
                     <h1 class="text-gray-800 dark:text-gray-100 text-lg">Informações do Contato</h1>
                     <div class="mt-5 dark:text-gray-100 text-gray-800 gap-6 p-6">
                         <div class="nome flex flex-col mb-5">
@@ -32,13 +40,14 @@
         </div>
 
         <!-- 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">
+        <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>
-            <div class="chat overflow-y-scroll h-[400px] px-8 py-4 flex flex-col gap-y-4">
+            <div class="chat px-8 py-4 flex flex-col gap-y-4">
+                <!-- Mensagens do Chat -->
             </div>
         </div>
     </div>
-</x-app-layout>
+</div>
 
 <script src="{{ asset('js/relatorios/historicoChamadas/index.js') }}"></script>
 <script src="{{ asset('js/relatorios/historicoChamadas/accordion.js') }}"></script>
@@ -51,3 +60,51 @@ const server_api = "{{env('APP_URL')}}";
 
 montaChat(messages, cliente_id);
 </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 do clone
+    const exportButton = clone.querySelector('#exportButton');
+    if (exportButton) {
+        exportButton.remove();
+    }
+
+    // Configurar opções do html2pdf
+    const options = {
+        margin:       0.5,
+        filename:     'historico_conversa.pdf',
+        image:        { type: 'jpeg', quality: 0.98 },
+        html2canvas:  { scale: 2, scrollX: 0, scrollY: -window.scrollY },
+        jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' },
+        pagebreak:    { mode: ['avoid-all', 'css', 'legacy'] },
+    };
+
+    html2pdf().set(options).from(clone).save();
+});
+</script>
+</x-app-layout>