Implementa modal de validacao de tamanho no frontend no lugar do toast

docker-compose.yml

@@ -1,5 +1,3 @@
-version: '3.8'
-
 services:
   app:
     build:

resources/views/admin/orders/create.php

@@ -1,4 +1,84 @@
-<div class="max-w-3xl mx-auto bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+<?php 
+$hasError = isset($_SESSION['flash_error']);
+$errorMsg = $_SESSION['flash_error'] ?? '';
+if ($hasError) {
+    unset($_SESSION['flash_error']); // Prevent toast from showing
+}
+?>
+<div class="max-w-3xl mx-auto bg-white rounded-xl shadow-sm border border-gray-100 p-6" x-data="{
+    showModal: <?= $hasError ? 'true' : 'false' ?>,
+    modalTitle: 'Aviso',
+    modalMessage: <?= json_encode($errorMsg) ?>,
+    validateForm(e) {
+        let totalSize = 0;
+        let maxSize = 20 * 1024 * 1024; // 20 MB
+
+        let attachments = document.querySelector('input[name=\'attachments[]\']').files;
+        for(let i = 0; i < attachments.length; i++) {
+            if (attachments[i].size > maxSize) {
+                this.showError('Arquivo Muito Grande', 'O anexo \'' + attachments[i].name + '\' excede o limite permitido de 20 MB.');
+                e.preventDefault();
+                return false;
+            }
+            totalSize += attachments[i].size;
+        }
+
+        let csvFile = document.querySelector('input[name=\'csv_file\']').files[0];
+        if (csvFile) {
+            totalSize += csvFile.size;
+        }
+
+        if (totalSize > 40 * 1024 * 1024) { // 40 MB limite de segurança frontend
+            this.showError('Tamanho Total Excedido', 'O tamanho total de todos os arquivos excede o limite de submissão do servidor.');
+            e.preventDefault();
+            return false;
+        }
+
+        // Popula o campo oculto do Quill
+        document.querySelector('input[name=content]').value = window.quill.root.innerHTML;
+        return true;
+    },
+    showError(title, message) {
+        this.modalTitle = title;
+        this.modalMessage = message;
+        this.showModal = true;
+    }
+}">
+
+    <!-- Modal de Erro -->
+    <div x-show="showModal" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-cloak>
+        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+            <!-- Background overlay -->
+            <div x-show="showModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" @click="showModal = false"></div>
+
+            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+            
+            <!-- Painel do Modal -->
+            <div x-show="showModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" class="inline-block align-bottom bg-white rounded-xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full p-6">
+                
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-lg leading-6 font-bold text-gray-900" id="modal-title" x-text="modalTitle"></h3>
+                    <button @click="showModal = false" type="button" class="text-gray-400 hover:text-gray-500 focus:outline-none">
+                        <span class="sr-only">Fechar</span>
+                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+                
+                <div class="mt-2">
+                    <p class="text-sm text-gray-600" x-text="modalMessage"></p>
+                </div>
+
+                <div class="mt-6 flex justify-end">
+                    <button type="button" @click="showModal = false" class="inline-flex justify-center w-full rounded-lg border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-200 sm:w-auto sm:text-sm transition-colors">
+                        Fechar
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <h3 class="text-lg font-semibold text-gray-800 mb-6">Nova Ordem Judicial</h3>
 
 
@@ -6,7 +86,7 @@
     <!-- Quill Styles -->
     <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
 
-    <form action="/admin/orders/store" method="POST" enctype="multipart/form-data" class="space-y-6" id="orderForm">
+    <form action="/admin/orders/store" method="POST" enctype="multipart/form-data" class="space-y-6" id="orderForm" @submit="validateForm($event)">
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div class="col-span-2">
                 <label class="block text-sm font-medium text-gray-700 mb-1">Título / Identificação da Ordem</label>
@@ -138,9 +218,5 @@
         }
     });
 
-    var form = document.getElementById('orderForm');
+    // Validator handled by AlpineJS validateForm() method.
-    form.onsubmit = function () {
-        var content = document.querySelector('input[name=content]');
-        content.value = quill.root.innerHTML;
-    };
 </script>