Retornos - Envio Nacional<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio\"><\/script>\r\n <script>\r\n tailwind.config = {\r\n darkMode: 'class',\r\n theme: {\r\n extend: {\r\n colors: {\r\n primary: {\r\n 50: '#f5f3ff',\r\n 100: '#ede9fe',\r\n 200: '#ddd6fe',\r\n 300: '#c4b5fd',\r\n 400: '#a78bfa',\r\n 500: '#8b5cf6',\r\n 600: '#7c3aed',\r\n 700: '#6d28d9',\r\n 800: '#5b21b6',\r\n 900: '#4c1d95',\r\n }\r\n },\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/appwrite@14.0.1\"><\/script>\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jsqr@1.4.0\/dist\/jsQR.min.js\"><\/script>\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@ericblade\/quagga2@1.8.4\/dist\/quagga.min.js\"><\/script>\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/tesseract.js@5.1.0\/dist\/tesseract.min.js\"><\/script>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.2\/css\/all.min.css\">\r\n \r\n <script src=\"https:\/\/cdn.sheetjs.com\/xlsx-0.20.1\/package\/dist\/xlsx.full.min.js\"><\/script>\r\n \r\n <style>\r\n \/* Tema Roxo - Estilo Envio Nacional - OTIMIZADO MOBILE *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n -webkit-tap-highlight-color: rgba(139, 92, 246, 0.2);\r\n }\r\n \r\n body {\r\n font-family: 'Inter', sans-serif !important;\r\n background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%) !important;\r\n min-height: 100vh;\r\n color: #ffffff !important;\r\n overflow-x: hidden;\r\n position: relative;\r\n font-size: 16px;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n touch-action: manipulation;\r\n }\r\n \r\n \/* Grid de fundo *\/\r\n body::before {\r\n content: '';\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: \r\n linear-gradient(rgba(139, 92, 246, 0.1) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(139, 92, 246, 0.1) 1px, transparent 1px);\r\n background-size: 50px 50px;\r\n z-index: 0;\r\n pointer-events: none;\r\n }\r\n \r\n \/* Cards com glass effect *\/\r\n .product-card,\r\n .bg-white {\r\n background: rgb(118, 116, 236) !important;\r\n backdrop-filter: blur(10px) !important;\r\n border: 1px solid rgba(167, 139, 250, 0.5) !important;\r\n box-shadow: 0 8px 32px rgba(139, 92, 246, 0.3) !important;\r\n color: #ffffff !important;\r\n }\r\n \r\n \/* Garantir contraste em textos dentro dos cards *\/\r\n .product-card * {\r\n color: inherit;\r\n }\r\n \r\n .product-card .text-gray-900,\r\n .product-card .text-gray-800,\r\n .product-card .text-gray-700,\r\n .product-card .text-gray-600,\r\n .product-card .text-gray-500 {\r\n color: #ffffff !important;\r\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\r\n }\r\n \r\n .product-card:hover {\r\n box-shadow: 0 12px 40px rgba(139, 92, 246, 0.4) !important;\r\n border-color: rgba(139, 92, 246, 0.6) !important;\r\n }\r\n \r\n \/* Bot\u00f5es prim\u00e1rios roxos com texto contrastante *\/\r\n .bg-blue-600,\r\n .bg-blue-500,\r\n button[type=\"submit\"]:not(.bg-green-500):not(.bg-purple-500):not(.bg-red-500) {\r\n background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;\r\n box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4) !important;\r\n color: #ffffff !important;\r\n font-weight: 600 !important;\r\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;\r\n }\r\n \r\n .bg-blue-600:hover,\r\n .bg-blue-500:hover {\r\n background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;\r\n }\r\n \r\n \/* Navega\u00e7\u00e3o com contraste otimizado *\/\r\n .nav-link {\r\n color: #ffffff !important;\r\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\r\n font-weight: 500 !important;\r\n }\r\n \r\n .nav-link.active {\r\n border-bottom-color: #a78bfa !important;\r\n color: #a78bfa !important;\r\n font-weight: 700 !important;\r\n text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\r\n }\r\n \r\n .nav-link:hover {\r\n color: #c4b5fd !important;\r\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\r\n }\r\n \r\n \/* Inputs - Touch Friendly *\/\r\n input, select, textarea {\r\n background: rgba(167, 139, 250, 0.2) !important;\r\n border-color: rgba(167, 139, 250, 0.5) !important;\r\n color: #ffffff !important;\r\n font-size: 16px !important;\r\n min-height: 48px;\r\n padding: 0.75rem 1rem !important;\r\n border-radius: 8px;\r\n }\r\n \r\n @media (max-width: 640px) {\r\n input, select, textarea {\r\n font-size: 16px !important;\r\n }\r\n }\r\n \r\n input::placeholder, select::placeholder, textarea::placeholder {\r\n color: rgba(255, 255, 255, 0.6) !important;\r\n }\r\n \r\n input:focus, select:focus, textarea:focus {\r\n border-color: #a78bfa !important;\r\n ring-color: rgba(167, 139, 250, 0.6) !important;\r\n background: rgba(167, 139, 250, 0.25) !important;\r\n }\r\n \r\n \/* Garantir que o conte\u00fado fique acima do fundo *\/\r\n #login-screen,\r\n #main-system {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n \r\n \/* Texto vis\u00edvel sobre fundo escuro *\/\r\n .text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600 {\r\n color: #ffffff !important;\r\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\r\n }\r\n \r\n \/* Textos em containers com fundo roxo *\/\r\n body > div:not(#login-screen):not(#main-system) {\r\n color: #ffffff !important;\r\n }\r\n \r\n \/* Garantir contraste em par\u00e1grafos *\/\r\n p {\r\n color: inherit;\r\n }\r\n \r\n \/* Datas e informa\u00e7\u00f5es secund\u00e1rias *\/\r\n .text-gray-600 {\r\n color: rgba(255, 255, 255, 0.9) !important;\r\n }\r\n \r\n \/* T\u00edtulos e nomes com alto contraste *\/\r\n h1, h2, h3, h4, h5, h6 {\r\n color: #ffffff !important;\r\n background: none !important;\r\n -webkit-text-fill-color: #ffffff !important;\r\n text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\r\n font-weight: 700 !important;\r\n }\r\n \r\n \/* Nomes de produtos em branco para contraste *\/\r\n .product-name {\r\n color: #ffffff !important;\r\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\r\n }\r\n \r\n \/* Textos em negrito mant\u00e9m contraste adequado *\/\r\n .font-bold,\r\n .font-semibold {\r\n color: #ffffff !important;\r\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\r\n }\r\n \r\n \/* Labels e textos pequenos com contraste otimizado *\/\r\n label, .text-sm {\r\n color: #ffffff !important;\r\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\r\n }\r\n \r\n \/* Textos secund\u00e1rios mant\u00eam boa legibilidade *\/\r\n .text-gray-500 {\r\n color: rgba(255, 255, 255, 0.85) !important;\r\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\r\n }\r\n \r\n .text-xs {\r\n color: rgba(255, 255, 255, 0.9) !important;\r\n }\r\n \r\n \/* Badges e status *\/\r\n .status-badge {\r\n color: #1f2937 !important;\r\n }\r\n \r\n \/* Modais com fundo claro para leitura perfeita *\/\r\n #image-capture-modal > div,\r\n #video-capture-modal > div,\r\n #barcode-scanner-modal > div,\r\n #share-modal > div,\r\n #catalog-modal > div {\r\n background: #ffffff !important;\r\n color: #000000 !important;\r\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;\r\n }\r\n \r\n #image-capture-modal label,\r\n #video-capture-modal label,\r\n #barcode-scanner-modal label,\r\n #share-modal label,\r\n #catalog-modal label,\r\n #image-capture-modal .text-sm,\r\n #video-capture-modal .text-sm,\r\n #barcode-scanner-modal .text-sm,\r\n #share-modal .text-sm,\r\n #catalog-modal .text-sm,\r\n #image-capture-modal h3,\r\n #video-capture-modal h3,\r\n #barcode-scanner-modal h3,\r\n #share-modal h3,\r\n #catalog-modal h3,\r\n #image-capture-modal button,\r\n #video-capture-modal button,\r\n #barcode-scanner-modal button,\r\n #share-modal button,\r\n #catalog-modal button {\r\n color: #000000 !important;\r\n text-shadow: none !important;\r\n }\r\n \r\n \/* Bot\u00f5es em modais mant\u00eam cores espec\u00edficas *\/\r\n #image-capture-modal .bg-blue-500,\r\n #video-capture-modal .bg-blue-500,\r\n #barcode-scanner-modal .bg-blue-500,\r\n #share-modal .bg-blue-500,\r\n #catalog-modal .bg-blue-500,\r\n #image-capture-modal .bg-purple-500,\r\n #video-capture-modal .bg-purple-500 {\r\n color: #ffffff !important;\r\n }\r\n \r\n \/* Inputs em modais com fundo branco *\/\r\n #image-capture-modal input,\r\n #video-capture-modal input,\r\n #barcode-scanner-modal input,\r\n #share-modal input,\r\n #catalog-modal input {\r\n background: #f9fafb !important;\r\n color: #000000 !important;\r\n border-color: #d1d5db !important;\r\n }\r\n \r\n #image-capture-modal input::placeholder,\r\n #video-capture-modal input::placeholder,\r\n #barcode-scanner-modal input::placeholder,\r\n #share-modal input::placeholder,\r\n #catalog-modal input::placeholder {\r\n color: #6b7280 !important;\r\n }\r\n \r\n \/* Estilos originais do sistema *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n \r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);\r\n min-height: 100vh;\r\n color: #ffffff;\r\n overflow-x: hidden;\r\n position: relative;\r\n }\r\n \r\n \/* Grid de fundo *\/\r\n .grid-background {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: \r\n linear-gradient(rgba(139, 92, 246, 0.1) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(139, 92, 246, 0.1) 1px, transparent 1px);\r\n background-size: 50px 50px;\r\n z-index: 0;\r\n pointer-events: none;\r\n }\r\n \r\n .tab-content { display: none; }\r\n .tab-content.active { display: block; }\r\n .nav-link { transition: all 0.3s ease; }\r\n .nav-link.active { border-bottom-color: #02070f; color: #3b82f6; }\r\n \r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n .card-animation { animation: fadeIn 0.5s ease-out forwards; }\r\n \r\n .product-card {\r\n background: rgb(118, 116, 236);\r\n border-radius: 16px;\r\n box-shadow: 0 8px 32px rgba(139, 92, 246, 0.2);\r\n overflow: hidden;\r\n transition: all 0.3s ease;\r\n border: 1px solid rgba(139, 92, 246, 0.3);\r\n min-height: 300px;\r\n backdrop-filter: blur(10px);\r\n }\r\n \r\n .product-card:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 12px 40px rgba(139, 92, 246, 0.4);\r\n border-color: rgba(139, 92, 246, 0.6);\r\n }\r\n \r\n .card-header {\r\n padding: 1.5rem;\r\n border-bottom: 2px solid rgba(139, 92, 246, 0.2);\r\n background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(124, 58, 237, 0.05) 100%);\r\n }\r\n \r\n .card-body { \r\n padding: 1.25rem;\r\n background: rgb(118, 116, 236);\r\n }\r\n .card-footer {\r\n padding: 1rem 1.25rem;\r\n background: rgb(118, 116, 236);\r\n border-top: 2px solid rgba(139, 92, 246, 0.2);\r\n }\r\n \r\n .btn-action {\r\n padding: 0.875rem 1.25rem;\r\n border-radius: 12px;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n transition: all 0.2s ease;\r\n border: none;\r\n cursor: pointer;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.5rem;\r\n min-height: 48px;\r\n touch-action: manipulation;\r\n }\r\n \r\n @media (max-width: 640px) {\r\n .btn-action {\r\n width: 100%;\r\n font-size: 0.95rem;\r\n }\r\n }\r\n \r\n .btn-edit {\r\n background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);\r\n color: white;\r\n }\r\n \r\n .btn-delete {\r\n background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\r\n color: white;\r\n }\r\n \r\n .btn-finish {\r\n background: linear-gradient(135deg, #10b981 0%, #059669 100%);\r\n color: white;\r\n width: 100%;\r\n padding: 0.75rem;\r\n }\r\n \r\n .btn-actions-group {\r\n display: flex;\r\n gap: 0.5rem;\r\n }\r\n \r\n .btn-actions-group button {\r\n flex: 1;\r\n }\r\n \r\n .status-badge {\r\n padding: 0.375rem 0.75rem;\r\n border-radius: 9999px;\r\n font-size: 0.75rem;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n }\r\n \r\n .status-bom {\r\n background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);\r\n color: #021409;\r\n border: 1px solid #16a34a;\r\n }\r\n \r\n .status-ruim {\r\n background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\r\n color: #92400e;\r\n border: 1px solid #d97706;\r\n }\r\n \r\n .status-quebrado {\r\n background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);\r\n color: #991b1b;\r\n border: 1px solid #ef4444;\r\n }\r\n \r\n .status-itens-faltando {\r\n background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\r\n color: #92400e;\r\n border: 1px solid #f59e0b;\r\n }\r\n \r\n .status-ao-remetente {\r\n background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);\r\n color: #1e40af;\r\n border: 1px solid #3b82f6;\r\n }\r\n \r\n .status-Itens_faltantes {\r\n background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);\r\n color: #991b1b;\r\n border: 1px solid #ef4444;\r\n }\r\n \r\n .status-Ao_Remetente {\r\n background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);\r\n color: #991b1b;\r\n border: 1px solid #ef4444;\r\n }\r\n \r\n .cards-grid {\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 1rem;\r\n padding: 0.75rem;\r\n }\r\n \r\n @media (min-width: 640px) {\r\n .cards-grid {\r\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\r\n gap: 1.5rem;\r\n padding: 1rem;\r\n }\r\n }\r\n \r\n @media (min-width: 1024px) {\r\n .cards-grid {\r\n grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\r\n gap: 2rem;\r\n padding: 1.5rem;\r\n }\r\n }\r\n \r\n .product-photos-section {\r\n margin: 1rem 0;\r\n padding: 1rem;\r\n background: rgb(118, 116, 236);\r\n border-radius: 8px;\r\n }\r\n \r\n .photos-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));\r\n gap: 0.75rem;\r\n }\r\n \r\n .photo-item {\r\n aspect-ratio: 1;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n cursor: pointer;\r\n border: 2px solid #e5e7eb;\r\n position: relative;\r\n }\r\n \r\n .photo-item.group:hover .opacity-0 {\r\n opacity: 1;\r\n }\r\n \r\n .photo-item img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n \r\n .product-item {\r\n display: flex;\r\n align-items: center;\r\n padding: 0.75rem;\r\n background: rgb(118, 116, 236);\r\n border: 1px solid #e5e7eb;\r\n border-radius: 8px;\r\n }\r\n \r\n .product-image {\r\n width: 3rem;\r\n height: 3rem;\r\n border-radius: 8px;\r\n object-fit: cover;\r\n margin-right: 0.75rem;\r\n cursor: pointer;\r\n }\r\n \r\n \/* Sugest\u00f5es de produtos (autocomplete) *\/\r\n .product-suggestions {\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\r\n scrollbar-width: thin;\r\n scrollbar-color: #cbd5e1 #f1f5f9;\r\n }\r\n \r\n .product-suggestions::-webkit-scrollbar {\r\n width: 6px;\r\n }\r\n \r\n .product-suggestions::-webkit-scrollbar-track {\r\n background: #f1f5f9;\r\n border-radius: 3px;\r\n }\r\n \r\n .product-suggestions::-webkit-scrollbar-thumb {\r\n background: #cbd5e1;\r\n border-radius: 3px;\r\n }\r\n \r\n .product-suggestions::-webkit-scrollbar-thumb:hover {\r\n background: #94a3b8;\r\n }\r\n \r\n .suggestion-item:active {\r\n background-color: #dbeafe !important;\r\n }\r\n \r\n \/* Scanner de c\u00f3digo de barras - Quagga overlay *\/\r\n #barcode-video {\r\n position: relative;\r\n }\r\n \r\n #barcode-video canvas.drawingBuffer {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n }\r\n \r\n .hidden { display: none !important; }\r\n \r\n \/* ESTILOS MOBILE ESPEC\u00cdFICOS *\/\r\n @media (max-width: 640px) {\r\n body {\r\n padding-bottom: env(safe-area-inset-bottom);\r\n }\r\n \r\n .product-card {\r\n min-height: auto;\r\n margin-bottom: 0.75rem;\r\n }\r\n \r\n .card-header {\r\n padding: 1rem;\r\n }\r\n \r\n .card-body {\r\n padding: 1rem;\r\n }\r\n \r\n .card-footer {\r\n padding: 0.875rem 1rem;\r\n }\r\n \r\n \/* Header compacto *\/\r\n h1 {\r\n font-size: 1.5rem !important;\r\n }\r\n \r\n h2 {\r\n font-size: 1.25rem !important;\r\n }\r\n \r\n h3 {\r\n font-size: 1.125rem !important;\r\n }\r\n \r\n \/* Navega\u00e7\u00e3o mobile *\/\r\n .nav-link {\r\n padding: 0.75rem 0.5rem !important;\r\n font-size: 0.8rem !important;\r\n }\r\n \r\n .nav-link i {\r\n display: block;\r\n margin: 0 auto 0.25rem;\r\n font-size: 1.125rem;\r\n }\r\n \r\n \/* Modais fullscreen em mobile *\/\r\n #image-capture-modal > div,\r\n #video-capture-modal > div,\r\n #barcode-scanner-modal > div,\r\n #share-modal > div,\r\n #catalog-modal > div {\r\n max-width: 100% !important;\r\n margin: 0 !important;\r\n border-radius: 0 !important;\r\n min-height: 100vh;\r\n }\r\n \r\n \/* Grid de fotos responsivo *\/\r\n .photos-grid {\r\n grid-template-columns: repeat(4, 1fr) !important;\r\n gap: 0.5rem !important;\r\n }\r\n \r\n \/* Produtos no cat\u00e1logo *\/\r\n #catalog-products-grid {\r\n grid-template-columns: repeat(2, 1fr) !important;\r\n gap: 0.75rem !important;\r\n }\r\n \r\n \/* Bot\u00f5es de a\u00e7\u00e3o em linha em mobile *\/\r\n .btn-actions-group {\r\n flex-direction: column !important;\r\n gap: 0.5rem !important;\r\n }\r\n \r\n .btn-actions-group button {\r\n width: 100% !important;\r\n }\r\n \r\n \/* Status badges menores *\/\r\n .status-badge {\r\n font-size: 0.65rem !important;\r\n padding: 0.25rem 0.5rem !important;\r\n }\r\n \r\n \/* Container de produtos *\/\r\n .product-entry {\r\n padding: 0.875rem !important;\r\n }\r\n \r\n \/* Ajustar espa\u00e7amentos *\/\r\n .space-y-6 > * + * {\r\n margin-top: 1rem !important;\r\n }\r\n \r\n .space-x-4 > * + * {\r\n margin-left: 0.5rem !important;\r\n }\r\n \r\n \/* Fotos de produtos menores *\/\r\n .product-image {\r\n width: 2.5rem !important;\r\n height: 2.5rem !important;\r\n }\r\n \r\n \/* Grid responsivo de formul\u00e1rio *\/\r\n .grid-cols-2 {\r\n grid-template-columns: 1fr !important;\r\n }\r\n \r\n .md\\:grid-cols-2 {\r\n grid-template-columns: 1fr !important;\r\n }\r\n \r\n .md\\:grid-cols-4 {\r\n grid-template-columns: 1fr !important;\r\n }\r\n }\r\n \r\n \/* Melhorias de performance mobile *\/\r\n * {\r\n -webkit-overflow-scrolling: touch;\r\n }\r\n \r\n img, video {\r\n max-width: 100%;\r\n height: auto;\r\n }\r\n \r\n \/* Prevent zoom on input focus iOS *\/\r\n @supports (-webkit-touch-callout: none) {\r\n input, select, textarea {\r\n font-size: 16px !important;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased text-gray-800\">\r\n \r\n <div class=\"grid-background\"><\/div>\r\n\r\n \r\n <div id=\"login-screen\" class=\"min-h-screen flex items-center justify-center p-4\">\r\n <div class=\"max-w-md w-full space-y-6 sm:space-y-8\">\r\n <div class=\"text-center\">\r\n <div class=\"mx-auto h-14 w-14 sm:h-16 sm:w-16 flex items-center justify-center rounded-full bg-blue-100\">\r\n <i class=\"fas fa-undo text-xl sm:text-2xl text-blue-600\"><\/i>\r\n <\/div>\r\n <h2 class=\"mt-4 sm:mt-6 text-2xl sm:text-3xl font-extrabold text-gray-900\">\r\n Retornos - Envio Nacional\r\n <\/h2>\r\n <p class=\"mt-2 text-sm text-gray-600\">Realize o login para acessar<\/p>\r\n <\/div>\r\n <div class=\"bg-white py-6 sm:py-8 px-4 sm:px-6 shadow rounded-lg\" style=\"background: rgb(118, 116, 236) !important;\">\r\n <form id=\"login-form\" class=\"space-y-5 sm:space-y-6\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-2\">Email<\/label>\r\n <input id=\"email\" type=\"email\" required autocomplete=\"email\"\r\n class=\"mt-1 block w-full px-3 sm:px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-base\"\r\n placeholder=\"Digite seu email\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-2\">Senha<\/label>\r\n <input id=\"password\" type=\"password\" required autocomplete=\"current-password\"\r\n class=\"mt-1 block w-full px-3 sm:px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-base\"\r\n placeholder=\"Digite sua senha\">\r\n <\/div>\r\n <div id=\"login-feedback\" class=\"text-sm text-center text-red-600\"><\/div>\r\n <button type=\"submit\" \r\n class=\"w-full flex justify-center items-center py-3 sm:py-3.5 px-4 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-blue-600 hover:bg-blue-700 min-h-[48px]\">\r\n <i class=\"fas fa-sign-in-alt mr-2\"><\/i> Entrar\r\n <\/button>\r\n <button type=\"button\" id=\"register-btn\"\r\n class=\"w-full flex justify-center items-center py-3 sm:py-3.5 px-4 border border-gray-300 rounded-md shadow-sm text-base font-medium text-gray-700 bg-white hover:bg-gray-50 min-h-[48px]\">\r\n <i class=\"fas fa-user-plus mr-2\"><\/i> Criar Conta\r\n <\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"main-system\" class=\"hidden max-w-7xl mx-auto p-2 sm:p-4 md:p-6 lg:p-8\">\r\n \r\n <div class=\"bg-white rounded-lg shadow-lg p-3 sm:p-6 mb-3 sm:mb-6\" style=\"background: rgb(118, 116, 236) !important;\">\r\n <div class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3\">\r\n <div class=\"flex-1\">\r\n <h1 class=\"text-xl sm:text-3xl font-bold text-gray-900\">Controle de Retornos<\/h1>\r\n <p class=\"text-gray-600 mt-1 text-sm sm:text-base\">Sistema Envio Nacional<\/p>\r\n <\/div>\r\n <div class=\"flex items-center gap-2 sm:gap-4 w-full sm:w-auto\">\r\n <span id=\"user-display-name\" class=\"text-xs sm:text-sm text-gray-600 flex-1 sm:flex-initial truncate\"><\/span>\r\n <button id=\"logout-btn\" class=\"bg-red-500 hover:bg-red-600 text-white px-3 sm:px-4 py-2 rounded-lg text-sm whitespace-nowrap min-h-[44px]\">\r\n <i class=\"fas fa-sign-out-alt sm:mr-2\"><\/i><span class=\"hidden sm:inline\">Sair<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-white rounded-lg shadow mb-3 sm:mb-6\" style=\"background: rgb(118, 116, 236) !important;\">\r\n <nav class=\"flex justify-around sm:justify-start sm:space-x-8 px-2 sm:px-6 overflow-x-auto\">\r\n <button class=\"nav-link py-3 sm:py-4 px-2 sm:px-1 border-b-2 font-medium text-xs sm:text-sm active flex-shrink-0 flex flex-col sm:flex-row items-center min-h-[60px] sm:min-h-0\" data-tab=\"register\">\r\n <i class=\"fas fa-plus-circle sm:mr-2 mb-1 sm:mb-0\"><\/i><span class=\"text-center\">Registrar<\/span>\r\n <\/button>\r\n <button class=\"nav-link py-3 sm:py-4 px-2 sm:px-1 border-b-2 font-medium text-xs sm:text-sm flex-shrink-0 flex flex-col sm:flex-row items-center min-h-[60px] sm:min-h-0\" data-tab=\"all\">\r\n <i class=\"fas fa-list sm:mr-2 mb-1 sm:mb-0\"><\/i><span class=\"text-center\">Todos <span class=\"hidden sm:inline\">(<\/span><span id=\"all-count\">0<\/span><span class=\"hidden sm:inline\">)<\/span><\/span>\r\n <\/button>\r\n <button class=\"nav-link py-3 sm:py-4 px-2 sm:px-1 border-b-2 font-medium text-xs sm:text-sm flex-shrink-0 flex flex-col sm:flex-row items-center min-h-[60px] sm:min-h-0\" data-tab=\"archived\">\r\n <i class=\"fas fa-archive sm:mr-2 mb-1 sm:mb-0\"><\/i><span class=\"text-center\">Arquivo <span class=\"hidden sm:inline\">(<\/span><span id=\"archived-count\">0<\/span><span class=\"hidden sm:inline\">)<\/span><\/span>\r\n <\/button>\r\n <button class=\"nav-link py-3 sm:py-4 px-2 sm:px-1 border-b-2 font-medium text-xs sm:text-sm flex-shrink-0 flex flex-col sm:flex-row items-center min-h-[60px] sm:min-h-0\" data-tab=\"ranking\">\r\n <i class=\"fas fa-chart-bar sm:mr-2 mb-1 sm:mb-0\"><\/i><span class=\"text-center\">Ranking<\/span>\r\n <\/button>\r\n <button class=\"nav-link py-3 sm:py-4 px-2 sm:px-1 border-b-2 font-medium text-xs sm:text-sm flex-shrink-0 flex flex-col sm:flex-row items-center min-h-[60px] sm:min-h-0\" data-tab=\"catalog\">\r\n <i class=\"fas fa-box sm:mr-2 mb-1 sm:mb-0\"><\/i><span class=\"text-center\">Cat\u00e1logo<\/span>\r\n <\/button>\r\n <\/nav>\r\n <\/div>\r\n\r\n \r\n <div id=\"tab-register\" class=\"tab-content active\">\r\n <div class=\"bg-white rounded-lg shadow p-3 sm:p-6\" style=\"background: rgb(118, 116, 236) !important;\">\r\n <h2 class=\"text-xl sm:text-2xl font-bold mb-4 sm:mb-6\">Registrar Novo Retorno<\/h2>\r\n <form id=\"register-form\" class=\"space-y-4 sm:space-y-6\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-2\">C\u00f3digo do Retorno<\/label>\r\n <div class=\"flex gap-2\">\r\n <input type=\"text\" id=\"return-code\" required\r\n class=\"flex-1 px-3 sm:px-4 py-3 border rounded-lg focus:ring-blue-500 focus:border-blue-500 text-base\"\r\n placeholder=\"Ex: RET-001\">\r\n <button type=\"button\" id=\"scan-barcode-btn\" class=\"bg-purple-500 hover:bg-purple-600 text-white px-3 sm:px-4 py-3 rounded-lg min-w-[48px] min-h-[48px]\">\r\n <i class=\"fas fa-barcode\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-2\">Canal de Venda<\/label>\r\n <select id=\"sales-channel\" required\r\n class=\"w-full px-3 sm:px-4 py-3 border rounded-lg focus:ring-blue-500 focus:border-blue-500 text-base\">\r\n <option value=\"\">Selecione...<\/option>\r\n <option value=\"Shopee\">Shopee<\/option>\r\n <option value=\"Mercado Livre\">Mercado Livre<\/option>\r\n <option value=\"Loja F\u00edsica\">Loja F\u00edsica<\/option>\r\n <option value=\"Site\">Site<\/option>\r\n <option value=\"WhatsApp\">WhatsApp<\/option>\r\n <option value=\"Outro\">Outro<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-2\">Nome do Vendedor<\/label>\r\n <input type=\"text\" id=\"seller-name\" required\r\n class=\"w-full px-3 sm:px-4 py-3 border rounded-lg focus:ring-blue-500 focus:border-blue-500 text-base\"\r\n placeholder=\"Nome do vendedor\">\r\n <\/div>\r\n\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-2\">Observa\u00e7\u00f5es<\/label>\r\n <textarea id=\"return-observations\" rows=\"3\"\r\n class=\"w-full px-3 sm:px-4 py-3 border rounded-lg focus:ring-blue-500 focus:border-blue-500 text-base resize-none\"\r\n placeholder=\"Observa\u00e7\u00f5es sobre o retorno...\"><\/textarea>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <div class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 sm:gap-0 mb-4\">\r\n <h3 class=\"text-base sm:text-lg font-semibold\">Produtos<\/h3>\r\n <button type=\"button\" id=\"add-product-button\" class=\"w-full sm:w-auto bg-green-500 hover:bg-green-600 text-white px-4 py-3 rounded-lg min-h-[48px]\">\r\n <i class=\"fas fa-plus mr-2\"><\/i>Adicionar Produto\r\n <\/button>\r\n <\/div>\r\n <div id=\"product-entries-container\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <h3 class=\"text-base sm:text-lg font-semibold mb-3\">Fotos e V\u00eddeos (<span id=\"photo-count-indicator\">0\/10<\/span>)<\/h3>\r\n <div id=\"product-photos-container\" class=\"grid grid-cols-4 sm:grid-cols-5 gap-2 sm:gap-4 mb-3\"><\/div>\r\n <div class=\"flex flex-col sm:flex-row gap-2 sm:gap-3\">\r\n <button type=\"button\" id=\"add-product-photo-btn\" class=\"flex-1 bg-blue-500 hover:bg-blue-600 text-white px-4 py-3 rounded-lg min-h-[48px]\">\r\n <i class=\"fas fa-camera mr-2\"><\/i>Adicionar Foto\r\n <\/button>\r\n <button type=\"button\" id=\"add-product-video-btn\" class=\"flex-1 bg-purple-500 hover:bg-purple-600 text-white px-4 py-3 rounded-lg min-h-[48px]\">\r\n <i class=\"fas fa-video mr-2\"><\/i>Adicionar V\u00eddeo\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-4 px-6 rounded-lg text-base sm:text-lg min-h-[56px]\">\r\n <i class=\"fas fa-save mr-2\"><\/i>Registrar Retorno\r\n <\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"tab-all\" class=\"tab-content\">\r\n <div class=\"mb-3 sm:mb-6 px-2 sm:px-0\">\r\n <input type=\"text\" id=\"search-all\" placeholder=\"\ud83d\udd0e Buscar retorno...\" \r\n class=\"w-full px-3 sm:px-4 py-3 border rounded-lg focus:ring-blue-500 focus:border-blue-500 text-base\">\r\n <\/div>\r\n <div id=\"all-products-list\" class=\"cards-grid\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"tab-archived\" class=\"tab-content\">\r\n <div class=\"mb-3 sm:mb-6 px-2 sm:px-0\">\r\n <input type=\"text\" id=\"search-archived\" placeholder=\"\ud83d\udd0e Buscar arquivado...\" \r\n class=\"w-full px-3 sm:px-4 py-3 border rounded-lg focus:ring-blue-500 focus:border-blue-500 text-base\">\r\n <\/div>\r\n <div id=\"archived-products-list\" class=\"cards-grid\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"tab-ranking\" class=\"tab-content\">\r\n <div class=\"bg-white rounded-lg shadow p-3 sm:p-6\" style=\"background: rgb(118, 116, 236) !important;\">\r\n <h2 class=\"text-lg sm:text-2xl font-bold mb-4 sm:mb-6\">Top Retornados<\/h2>\r\n <div id=\"most-returned-list\" class=\"space-y-2 sm:space-y-3\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"tab-catalog\" class=\"tab-content\">\r\n <div class=\"bg-white rounded-lg shadow p-3 sm:p-6 mb-3 sm:mb-6\" style=\"background: rgb(118, 116, 236) !important;\">\r\n <h2 class=\"text-lg sm:text-2xl font-bold mb-4 sm:mb-6\">Adicionar Produto<\/h2>\r\n \r\n \r\n <div class=\"bg-blue-50 border border-blue-200 rounded-lg p-3 sm:p-4 mb-4 sm:mb-6\">\r\n <div class=\"flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 sm:gap-0 mb-3\">\r\n <div class=\"flex-1\">\r\n <h3 class=\"font-semibold text-blue-900 text-sm sm:text-base\">Importar Excel<\/h3>\r\n <p class=\"text-xs sm:text-sm text-blue-700 mt-1\">Col A: Nome | Col B: URL Foto<\/p>\r\n <\/div>\r\n <button type=\"button\" id=\"download-template-btn\" class=\"w-full sm:w-auto bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded-lg text-sm min-h-[44px] whitespace-nowrap\">\r\n <i class=\"fas fa-download mr-2\"><\/i>Baixar Modelo\r\n <\/button>\r\n <\/div>\r\n <input type=\"file\" id=\"excel-upload\" accept=\".xlsx,.xls,.csv\" \r\n class=\"w-full px-3 py-3 border rounded-lg bg-white text-base\">\r\n <div id=\"upload-excel-feedback\" class=\"text-xs sm:text-sm mt-2\"><\/div>\r\n <\/div>\r\n \r\n <form id=\"add-product-form\" class=\"grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4\">\r\n <input type=\"text\" id=\"new-product-name\" required placeholder=\"Nome do Produto\"\r\n class=\"px-3 sm:px-4 py-3 border rounded-lg focus:ring-blue-500 focus:border-blue-500 text-base\">\r\n <input type=\"url\" id=\"new-product-photo\" required placeholder=\"URL da Foto\"\r\n class=\"px-3 sm:px-4 py-3 border rounded-lg focus:ring-blue-500 focus:border-blue-500 text-base\">\r\n <button type=\"submit\" class=\"md:col-span-2 bg-green-500 hover:bg-green-600 text-white py-3 px-4 rounded-lg min-h-[48px]\">\r\n <i class=\"fas fa-plus mr-2\"><\/i>Adicionar ao Cat\u00e1logo\r\n <\/button>\r\n <div id=\"add-product-feedback\" class=\"md:col-span-2 text-xs sm:text-sm text-center\"><\/div>\r\n <\/form>\r\n <\/div>\r\n <div class=\"bg-white rounded-lg shadow p-3 sm:p-6\" style=\"background: rgb(118, 116, 236) !important;\">\r\n <h2 class=\"text-lg sm:text-2xl font-bold mb-4 sm:mb-6\">Produtos (<span id=\"product-count\">0<\/span>)<\/h2>\r\n <div id=\"product-catalog-list\" class=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 sm:gap-4\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"image-capture-modal\" class=\"hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-2 sm:p-4\">\r\n <div class=\"bg-white rounded-lg p-4 sm:p-6 max-w-md w-full max-h-[90vh] overflow-y-auto\">\r\n <h3 class=\"text-base sm:text-lg font-bold mb-3 sm:mb-4\">Adicionar Imagem<\/h3>\r\n \r\n \r\n <div class=\"flex border-b mb-3 sm:mb-4\">\r\n <button type=\"button\" id=\"tab-url-btn\" class=\"flex-1 py-3 border-b-2 border-blue-500 text-blue-600 font-semibold text-sm min-h-[48px]\">\r\n <i class=\"fas fa-link mr-1 sm:mr-2\"><\/i><span class=\"hidden sm:inline\">URL<\/span>\r\n <\/button>\r\n <button type=\"button\" id=\"tab-upload-btn\" class=\"flex-1 py-3 border-b-2 border-transparent text-gray-600 text-sm min-h-[48px]\">\r\n <i class=\"fas fa-camera mr-1 sm:mr-2\"><\/i><span class=\"hidden sm:inline\">Tirar Foto<\/span>\r\n <\/button>\r\n <\/div>\r\n \r\n \r\n <div id=\"url-content\" class=\"mb-3 sm:mb-4\">\r\n <input type=\"url\" id=\"image-url-input\" placeholder=\"Cole a URL da imagem\"\r\n class=\"w-full px-3 sm:px-4 py-3 border rounded-lg text-base\">\r\n <\/div>\r\n \r\n \r\n <div id=\"upload-content\" class=\"hidden mb-3 sm:mb-4\">\r\n \r\n <div class=\"flex gap-2 mb-3\">\r\n <button type=\"button\" id=\"image-camera-btn\"\r\n class=\"flex-1 flex flex-col items-center justify-center gap-1 py-4 rounded-xl border-2 border-blue-400 bg-blue-50 hover:bg-blue-100 active:bg-blue-200 text-blue-700 font-semibold text-sm min-h-[72px] transition\">\r\n <i class=\"fas fa-camera text-2xl\"><\/i>\r\n <span>C\u00e2mera<\/span>\r\n <\/button>\r\n <button type=\"button\" id=\"image-gallery-btn\"\r\n class=\"flex-1 flex flex-col items-center justify-center gap-1 py-4 rounded-xl border-2 border-gray-300 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 text-gray-700 font-semibold text-sm min-h-[72px] transition\">\r\n <i class=\"fas fa-images text-2xl\"><\/i>\r\n <span>Galeria<\/span>\r\n <\/button>\r\n <\/div>\r\n \r\n <input type=\"file\" id=\"image-camera-input\" accept=\"image\/jpeg,image\/png,.jpg,.jpeg,.png\" capture=\"environment\" multiple class=\"hidden\">\r\n \r\n <input type=\"file\" id=\"image-file-input\" accept=\".jpg,.jpeg,.png,image\/jpeg,image\/png\" multiple class=\"hidden\">\r\n <div id=\"image-upload-progress\" class=\"hidden mb-2\">\r\n <div class=\"w-full h-2 bg-gray-200 rounded-full overflow-hidden\">\r\n <div id=\"image-upload-progress-bar\" class=\"h-full bg-blue-500 transition-all duration-200\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <p id=\"image-upload-progress-text\" class=\"text-xs sm:text-sm text-gray-600 mt-1 text-center\"><\/p>\r\n <\/div>\r\n <div id=\"upload-preview\" class=\"hidden\">\r\n <div id=\"image-preview-grid\" class=\"grid grid-cols-2 gap-2 mb-2\"><\/div>\r\n <p id=\"upload-status\" class=\"text-xs sm:text-sm text-gray-600 text-center\"><\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flex flex-col sm:flex-row gap-2 sm:gap-3\">\r\n <button type=\"button\" id=\"confirm-image-btn\" class=\"flex-1 bg-blue-500 hover:bg-blue-600 text-white py-3 rounded-lg min-h-[48px]\">\r\n Confirmar\r\n <\/button>\r\n <button type=\"button\" id=\"close-image-modal\" class=\"flex-1 bg-gray-300 hover:bg-gray-400 py-3 rounded-lg min-h-[48px]\">\r\n Cancelar\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"view-image-modal\" class=\"hidden fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50\" onclick=\"this.classList.add('hidden')\">\r\n <img decoding=\"async\" id=\"view-image-content\" src=\"\" class=\"max-w-full max-h-full object-contain\">\r\n <\/div>\r\n\r\n \r\n <div id=\"video-capture-modal\" class=\"hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-2 sm:p-4\">\r\n <div class=\"bg-white rounded-lg p-4 sm:p-6 max-w-md w-full max-h-[90vh] overflow-y-auto\">\r\n <h3 class=\"text-base sm:text-lg font-bold mb-3 sm:mb-4\">Adicionar V\u00eddeo<\/h3>\r\n \r\n \r\n <div class=\"flex border-b mb-3 sm:mb-4\">\r\n <button type=\"button\" id=\"video-tab-url-btn\" class=\"flex-1 py-3 border-b-2 border-blue-500 text-blue-600 font-semibold text-sm min-h-[48px]\">\r\n <i class=\"fas fa-link mr-1 sm:mr-2\"><\/i><span class=\"hidden sm:inline\">URL<\/span>\r\n <\/button>\r\n <button type=\"button\" id=\"video-tab-upload-btn\" class=\"flex-1 py-3 border-b-2 border-transparent text-gray-600 text-sm min-h-[48px]\">\r\n <i class=\"fas fa-video mr-1 sm:mr-2\"><\/i><span class=\"hidden sm:inline\">Gravar<\/span>\r\n <\/button>\r\n <\/div>\r\n \r\n \r\n <div id=\"video-url-content\" class=\"mb-3 sm:mb-4\">\r\n <input type=\"url\" id=\"video-url-input\" placeholder=\"Cole a URL do v\u00eddeo\"\r\n class=\"w-full px-3 sm:px-4 py-3 border rounded-lg text-base\">\r\n <\/div>\r\n \r\n \r\n <div id=\"video-upload-content\" class=\"hidden mb-3 sm:mb-4\">\r\n \r\n <div class=\"flex gap-2 mb-3\">\r\n <button type=\"button\" id=\"video-camera-btn\"\r\n class=\"flex-1 flex flex-col items-center justify-center gap-1 py-4 rounded-xl border-2 border-purple-400 bg-purple-50 hover:bg-purple-100 active:bg-purple-200 text-purple-700 font-semibold text-sm min-h-[72px] transition\">\r\n <i class=\"fas fa-video text-2xl\"><\/i>\r\n <span>C\u00e2mera<\/span>\r\n <\/button>\r\n <button type=\"button\" id=\"video-gallery-btn\"\r\n class=\"flex-1 flex flex-col items-center justify-center gap-1 py-4 rounded-xl border-2 border-gray-300 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 text-gray-700 font-semibold text-sm min-h-[72px] transition\">\r\n <i class=\"fas fa-film text-2xl\"><\/i>\r\n <span>Galeria<\/span>\r\n <\/button>\r\n <\/div>\r\n \r\n <input type=\"file\" id=\"video-camera-input\" accept=\"video\/mp4,video\/quicktime,.mp4,.mov\" capture=\"environment\" class=\"hidden\">\r\n \r\n <input type=\"file\" id=\"video-file-input\" accept=\".mp4,.mov,video\/mp4,video\/quicktime\" multiple class=\"hidden\">\r\n <div id=\"video-upload-progress\" class=\"hidden mb-2\">\r\n <div class=\"w-full h-2 bg-gray-200 rounded-full overflow-hidden\">\r\n <div id=\"video-upload-progress-bar\" class=\"h-full bg-purple-500 transition-all duration-200\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <p id=\"video-upload-progress-text\" class=\"text-xs sm:text-sm text-gray-600 mt-1 text-center\"><\/p>\r\n <\/div>\r\n <div id=\"video-upload-preview\" class=\"hidden\">\r\n <div id=\"video-preview-grid\" class=\"grid grid-cols-1 gap-2 mb-2\"><\/div>\r\n <p id=\"video-upload-status\" class=\"text-xs sm:text-sm text-gray-600 text-center\"><\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flex flex-col sm:flex-row gap-2 sm:gap-3\">\r\n <button type=\"button\" id=\"confirm-video-btn\" class=\"flex-1 bg-purple-500 hover:bg-purple-600 text-white py-3 rounded-lg min-h-[48px]\">\r\n Confirmar\r\n <\/button>\r\n <button type=\"button\" id=\"close-video-modal\" class=\"flex-1 bg-gray-300 hover:bg-gray-400 py-3 rounded-lg min-h-[48px]\">\r\n Cancelar\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"view-video-modal\" class=\"hidden fixed inset-0 bg-black bg-opacity-95 flex items-center justify-center z-50 p-4\">\r\n <div class=\"relative max-w-4xl w-full\">\r\n <button onclick=\"closeViewVideoModal()\" class=\"absolute -top-10 right-0 text-white hover:text-gray-300 text-2xl z-10\">\r\n <i class=\"fas fa-times\"><\/i>\r\n <\/button>\r\n <video id=\"view-video-content\" src=\"\" class=\"w-full rounded-lg shadow-2xl\" controls autoplay><\/video>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"share-modal\" class=\"hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-2 sm:p-4\">\r\n <div class=\"bg-white rounded-lg p-4 sm:p-6 max-w-md w-full\">\r\n <h3 class=\"text-base sm:text-lg font-bold mb-3 sm:mb-4\">Compartilhar Retorno<\/h3>\r\n <p class=\"text-xs sm:text-sm text-gray-600 mb-3 sm:mb-4\">Copie o link para compartilhar:<\/p>\r\n \r\n <div class=\"flex gap-2 mb-3 sm:mb-4\">\r\n <input type=\"text\" id=\"share-link-input\" readonly \r\n class=\"flex-1 px-3 py-3 border rounded-lg bg-gray-50 text-xs sm:text-sm\">\r\n <button id=\"copy-share-link\" class=\"bg-blue-500 hover:bg-blue-600 text-white px-4 py-3 rounded-lg min-w-[48px]\">\r\n <i class=\"fas fa-copy\"><\/i>\r\n <\/button>\r\n <\/div>\r\n \r\n <div id=\"copy-feedback\" class=\"text-sm text-green-600 text-center mb-3 sm:mb-4 hidden\">\r\n <i class=\"fas fa-check-circle mr-1\"><\/i>Link copiado!\r\n <\/div>\r\n \r\n <div class=\"bg-blue-50 border border-blue-200 rounded-lg p-2 sm:p-3 mb-3 sm:mb-4\">\r\n <p class=\"text-xs text-blue-800\">\r\n <i class=\"fas fa-info-circle mr-1\"><\/i>\r\n Link permite visualizar apenas este retorno.\r\n <\/p>\r\n <\/div>\r\n \r\n <button type=\"button\" id=\"close-share-modal\" class=\"w-full bg-gray-300 hover:bg-gray-400 py-3 rounded-lg min-h-[48px]\">\r\n Fechar\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"barcode-scanner-modal\" class=\"hidden fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 p-2 sm:p-4\">\r\n <div class=\"bg-white rounded-lg p-4 sm:p-6 max-w-lg w-full max-h-[95vh] overflow-y-auto\">\r\n <div class=\"flex justify-between items-center mb-3 sm:mb-4\">\r\n <h3 class=\"text-base sm:text-lg font-bold\">Scanner de C\u00f3digo<\/h3>\r\n <button type=\"button\" id=\"close-scanner-btn\" class=\"text-gray-500 hover:text-gray-700 min-w-[44px] min-h-[44px]\">\r\n <i class=\"fas fa-times text-xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n \r\n <div class=\"bg-gray-100 rounded-lg p-2 sm:p-4 mb-3 sm:mb-4\">\r\n <video id=\"barcode-video\" class=\"w-full rounded-lg\" autoplay playsinline><\/video>\r\n <canvas id=\"barcode-canvas\" class=\"hidden\"><\/canvas>\r\n <\/div>\r\n \r\n <div id=\"barcode-result\" class=\"hidden mb-3 sm:mb-4\">\r\n <div class=\"bg-green-50 border border-green-200 rounded-lg p-3\">\r\n <p class=\"text-xs sm:text-sm text-green-800 font-semibold\">\r\n <i class=\"fas fa-check-circle mr-2\"><\/i>C\u00f3digo detectado:\r\n <\/p>\r\n <p id=\"barcode-value\" class=\"text-base sm:text-lg font-mono text-gray-900 mt-2 break-all\"><\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"barcode-instructions\" class=\"bg-blue-50 border border-blue-200 rounded-lg p-2 sm:p-3 mb-3 sm:mb-4\">\r\n <p class=\"text-xs text-blue-800\">\r\n <i class=\"fas fa-info-circle mr-1\"><\/i>\r\n Aponte a c\u00e2mera para o c\u00f3digo de barras.\r\n <\/p>\r\n <\/div>\r\n \r\n <div class=\"flex flex-col sm:flex-row gap-2 sm:gap-3\">\r\n <button id=\"use-barcode-btn\" class=\"flex-1 bg-green-500 hover:bg-green-600 text-white py-3 rounded-lg hidden min-h-[48px]\">\r\n <i class=\"fas fa-check mr-2\"><\/i>Usar C\u00f3digo\r\n <\/button>\r\n <button id=\"retry-scan-btn\" class=\"flex-1 bg-blue-500 hover:bg-blue-600 text-white py-3 rounded-lg hidden min-h-[48px]\">\r\n <i class=\"fas fa-redo mr-2\"><\/i>Escanear Novamente\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"catalog-modal\" class=\"hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-2 sm:p-4\">\r\n <div class=\"bg-white rounded-lg p-4 sm:p-6 max-w-4xl w-full max-h-[90vh] overflow-y-auto\">\r\n <div class=\"flex justify-between items-center mb-3 sm:mb-4\">\r\n <h3 class=\"text-base sm:text-lg font-bold\">Selecionar Produto<\/h3>\r\n <button type=\"button\" id=\"close-catalog-modal\" class=\"text-gray-500 hover:text-gray-700 min-w-[44px] min-h-[44px]\">\r\n <i class=\"fas fa-times text-xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <input type=\"text\" id=\"catalog-search\" placeholder=\"\ud83d\udd0e Buscar produto...\" \r\n class=\"w-full px-3 sm:px-4 py-3 border rounded-lg mb-3 sm:mb-4 text-base\">\r\n <div id=\"catalog-products-grid\" class=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 sm:gap-4\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"edit-modal\" class=\"hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-2 sm:p-4\">\r\n <div class=\"bg-white rounded-lg p-4 sm:p-6 max-w-4xl w-full max-h-[90vh] overflow-y-auto\">\r\n <div class=\"flex justify-between items-center mb-3 sm:mb-4\">\r\n <h3 class=\"text-base sm:text-lg font-bold\">Editar Retorno<\/h3>\r\n <button type=\"button\" id=\"close-edit-modal\" class=\"text-gray-500 hover:text-gray-700 min-w-[44px] min-h-[44px]\">\r\n <i class=\"fas fa-times text-xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n \r\n <form id=\"edit-return-form\" class=\"space-y-4\">\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">C\u00f3digo do Retorno<\/label>\r\n <input type=\"text\" id=\"edit-code\" class=\"w-full px-3 py-3 border rounded-lg text-base\" required>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Vendedor<\/label>\r\n <input type=\"text\" id=\"edit-seller\" class=\"w-full px-3 py-3 border rounded-lg text-base\" required>\r\n <\/div>\r\n <\/div>\r\n \r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Observa\u00e7\u00f5es<\/label>\r\n <textarea id=\"edit-observations\" class=\"w-full px-3 py-3 border rounded-lg text-base\" rows=\"2\"><\/textarea>\r\n <\/div>\r\n \r\n \r\n <div class=\"border-t pt-4\">\r\n <h4 class=\"font-semibold mb-3\">Produtos<\/h4>\r\n <div id=\"edit-products-list\" class=\"space-y-3\"><\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"border-t pt-4\">\r\n <div class=\"flex justify-between items-center mb-3\">\r\n <h4 class=\"font-semibold\">Fotos e V\u00eddeos<\/h4>\r\n <div class=\"flex gap-2\">\r\n <button type=\"button\" id=\"edit-add-photo-btn\" class=\"bg-blue-500 hover:bg-blue-600 text-white px-3 py-2 rounded-lg text-sm min-h-[44px]\">\r\n <i class=\"fas fa-camera mr-1\"><\/i>Adicionar Foto\r\n <\/button>\r\n <button type=\"button\" id=\"edit-add-video-btn\" class=\"bg-purple-500 hover:bg-purple-600 text-white px-3 py-2 rounded-lg text-sm min-h-[44px]\">\r\n <i class=\"fas fa-video mr-1\"><\/i>Adicionar V\u00eddeo\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <div id=\"edit-media-grid\" class=\"grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2\"><\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"flex flex-col sm:flex-row gap-2 sm:gap-3 pt-4 border-t\">\r\n <button type=\"submit\" id=\"save-edit-btn\" class=\"flex-1 bg-green-500 hover:bg-green-600 text-white py-3 rounded-lg font-semibold min-h-[48px]\">\r\n <i class=\"fas fa-save mr-2\"><\/i>Salvar Altera\u00e7\u00f5es\r\n <\/button>\r\n <button type=\"button\" id=\"cancel-edit-btn\" class=\"flex-1 bg-gray-300 hover:bg-gray-400 py-3 rounded-lg font-semibold min-h-[48px]\">\r\n Cancelar\r\n <\/button>\r\n <\/div>\r\n <div id=\"edit-save-feedback\" class=\"text-sm text-center mt-2\"><\/div>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <template id=\"product-entry-template\">\r\n <div class=\"product-entry border border-gray-300 rounded-lg p-3 sm:p-4 mb-3 sm:mb-4\">\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3 sm:gap-4\">\r\n <div class=\"sm:col-span-2\">\r\n <label class=\"block text-sm font-medium mb-1\">Produto<\/label>\r\n <div class=\"relative\">\r\n <input type=\"text\" class=\"product-name w-full px-3 py-3 border rounded-lg pr-12 text-base\" required autocomplete=\"off\">\r\n <button type=\"button\" class=\"search-catalog-btn absolute right-2 top-1\/2 -translate-y-1\/2 text-blue-500 hover:text-blue-700 min-w-[44px] min-h-[44px] flex items-center justify-center\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <\/button>\r\n \r\n <div class=\"product-suggestions hidden absolute z-50 w-full bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto mt-1\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Quantidade<\/label>\r\n <input type=\"number\" class=\"product-quantity w-full px-3 py-3 border rounded-lg text-base\" value=\"1\" min=\"1\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Status<\/label>\r\n <select class=\"return-status w-full px-3 py-3 border rounded-lg text-base\">\r\n <option value=\"bom\">Bom<\/option>\r\n <option value=\"ruim\">Ruim<\/option>\r\n <option value=\"quebrado\">Quebrado<\/option>\r\n <option value=\"itens-faltando\">Itens faltando<\/option>\r\n <option value=\"ao-remetente\">Ao remetente<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 mt-3 sm:mt-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Foto do Produto<\/label>\r\n <div class=\"flex items-center space-x-2\">\r\n <img decoding=\"async\" class=\"image-placeholder w-16 h-16 sm:w-12 sm:h-12 object-cover rounded border cursor-pointer\" \r\n src=\"https:\/\/placehold.co\/100x100\/e0e0e0\/999999?text=Produto\" data-type=\"product\">\r\n <input type=\"hidden\" class=\"product-photo-data\">\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">\r\n <i class=\"fas fa-tag text-yellow-600 mr-1\"><\/i>Foto da Etiqueta\r\n <\/label>\r\n <div class=\"flex items-center space-x-2\">\r\n <img decoding=\"async\" class=\"image-placeholder w-16 h-16 sm:w-12 sm:h-12 object-cover rounded border-2 border-yellow-400 cursor-pointer hover:border-yellow-500 transition-colors\" \r\n src=\"https:\/\/placehold.co\/100x100\/fef3c7\/d97706?text=Etiqueta\" data-type=\"label\">\r\n <input type=\"hidden\" class=\"label-photo-data\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button type=\"button\" class=\"remove-product-button mt-3 sm:mt-4 text-red-600 hover:text-red-800 text-sm py-2 px-3 min-h-[44px]\">\r\n <i class=\"fas fa-trash mr-1\"><\/i>Remover Produto\r\n <\/button>\r\n <\/div>\r\n <\/template>\r\n\r\n <script>\r\n \/* ===== UPLOAD MANAGER ===== *\/\r\n window.UploadManager = (function () {\r\n var IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png'];\r\n var VIDEO_EXTENSIONS = ['mp4', 'mov'];\r\n var IMAGE_MIME = ['image\/jpeg', 'image\/jpg', 'image\/png'];\r\n var VIDEO_MIME = ['video\/mp4', 'video\/quicktime'];\r\n var _pendingObjectUrls = [];\r\n\r\n function getFileExtension(fileName) {\r\n if (!fileName || fileName.indexOf('.') === -1) return '';\r\n return fileName.split('.').pop().toLowerCase();\r\n }\r\n\r\n function buildFileUrl(endpoint, bucketId, fileId, projectId, mediaType) {\r\n var videoParam = mediaType === 'video' ? '&type=video' : '';\r\n return endpoint + '\/storage\/buckets\/' + bucketId + '\/files\/' + fileId + '\/view?project=' + projectId + videoParam;\r\n }\r\n\r\n function validateFiles(files, mediaType, maxSizeMB) {\r\n var allowedExtensions = mediaType === 'video' ? VIDEO_EXTENSIONS : IMAGE_EXTENSIONS;\r\n var allowedMime = mediaType === 'video' ? VIDEO_MIME : IMAGE_MIME;\r\n var maxSize = maxSizeMB * 1024 * 1024;\r\n var invalid = [];\r\n var valid = [];\r\n for (var i = 0; i < files.length; i++) {\r\n var file = files[i];\r\n var extension = getFileExtension(file.name);\r\n var mimeOk = allowedMime.indexOf(file.type) !== -1;\r\n var extOk = allowedExtensions.indexOf(extension) !== -1;\r\n var sizeOk = file.size <= maxSize;\r\n if (!sizeOk || (!mimeOk && !extOk)) {\r\n invalid.push({\r\n file: file,\r\n reason: !sizeOk\r\n ? 'Arquivo excede ' + maxSizeMB + 'MB'\r\n : 'Tipo inv\u00e1lido. Permitidos: ' + allowedExtensions.join(', ')\r\n });\r\n } else {\r\n valid.push(file);\r\n }\r\n }\r\n return { valid: valid, invalid: invalid };\r\n }\r\n\r\n function createUploadXHR(opts) {\r\n return new Promise(function (resolve, reject) {\r\n var xhr = new XMLHttpRequest();\r\n var url = opts.endpoint + '\/storage\/buckets\/' + opts.bucketId + '\/files';\r\n var formData = new FormData();\r\n formData.append('fileId', 'unique()');\r\n formData.append('file', opts.file);\r\n xhr.open('POST', url, true);\r\n xhr.withCredentials = true;\r\n xhr.setRequestHeader('X-Appwrite-Project', opts.projectId);\r\n xhr.upload.onprogress = function (event) {\r\n if (!event.lengthComputable || typeof opts.onProgress !== 'function') return;\r\n opts.onProgress(Math.round((event.loaded \/ event.total) * 100));\r\n };\r\n xhr.onload = function () {\r\n if (xhr.status < 200 || xhr.status >= 300) {\r\n reject(new Error('Falha no upload (' + xhr.status + '): ' + (xhr.responseText || 'sem resposta')));\r\n return;\r\n }\r\n try { resolve(JSON.parse(xhr.responseText)); }\r\n catch (e) { reject(new Error('Falha ao processar resposta do upload.')); }\r\n };\r\n xhr.onerror = function () { reject(new Error('Erro de rede durante upload.')); };\r\n xhr.onabort = function () { reject(new Error('Upload cancelado.')); };\r\n xhr.send(formData);\r\n });\r\n }\r\n\r\n function uploadFiles(opts) {\r\n var files = opts.files;\r\n var uploaded = [];\r\n var index = 0;\r\n\r\n function next() {\r\n if (index >= files.length) {\r\n if (typeof opts.onProgress === 'function') opts.onProgress(100, files.length, files.length, null);\r\n return Promise.resolve(uploaded);\r\n }\r\n var file = files[index];\r\n var i = index;\r\n index++;\r\n var fileProgressBase = Math.floor((i \/ files.length) * 100);\r\n var fileProgressSpan = Math.ceil(100 \/ files.length);\r\n return createUploadXHR({\r\n endpoint: opts.endpoint,\r\n projectId: opts.projectId,\r\n bucketId: opts.bucketId,\r\n file: file,\r\n onProgress: function (filePercent) {\r\n var aggregate = Math.min(100, fileProgressBase + Math.round((filePercent \/ 100) * fileProgressSpan));\r\n if (typeof opts.onProgress === 'function') opts.onProgress(aggregate, i, files.length, file.name);\r\n }\r\n }).then(function (result) {\r\n var fileUrl = buildFileUrl(opts.endpoint, opts.bucketId, result.$id, opts.projectId, opts.mediaType);\r\n var payload = { url: fileUrl, type: opts.mediaType, name: file.name, size: file.size };\r\n uploaded.push(payload);\r\n if (typeof opts.onFileComplete === 'function') opts.onFileComplete(payload, i, files.length);\r\n return next();\r\n });\r\n }\r\n return next();\r\n }\r\n\r\n function createPreviewData(file, mediaType) {\r\n if (mediaType === 'video') {\r\n try {\r\n var objectUrl = URL.createObjectURL(file);\r\n return Promise.resolve({ previewUrl: objectUrl, _objectUrl: true, mediaType: mediaType, name: file.name, size: file.size });\r\n } catch (e) {\r\n return Promise.reject(new Error('Falha ao criar preview para ' + file.name + ': ' + e.message));\r\n }\r\n }\r\n return new Promise(function (resolve, reject) {\r\n var reader = new FileReader();\r\n reader.onload = function (event) {\r\n resolve({ previewUrl: event.target.result, mediaType: mediaType, name: file.name, size: file.size });\r\n };\r\n reader.onerror = function () { reject(new Error('Falha ao gerar preview para ' + file.name)); };\r\n reader.readAsDataURL(file);\r\n });\r\n }\r\n\r\n function createPreviews(files, mediaType) {\r\n var previews = [];\r\n var i = 0;\r\n function next() {\r\n if (i >= files.length) return Promise.resolve(previews);\r\n var file = files[i++];\r\n return createPreviewData(file, mediaType).then(function (preview) {\r\n if (preview._objectUrl) _pendingObjectUrls.push(preview.previewUrl);\r\n previews.push(preview);\r\n return next();\r\n });\r\n }\r\n return next();\r\n }\r\n\r\n function revokeAllPendingObjectUrls() {\r\n _pendingObjectUrls.forEach(function (url) { try { URL.revokeObjectURL(url); } catch (e) {} });\r\n _pendingObjectUrls = [];\r\n console.log('[UploadManager] Object URLs de v\u00eddeo revogados.');\r\n }\r\n\r\n return {\r\n validateFiles: validateFiles,\r\n uploadFiles: uploadFiles,\r\n createPreviews: createPreviews,\r\n revokeAllPendingObjectUrls: revokeAllPendingObjectUrls,\r\n limits: { imageMB: 10, videoMB: 100 },\r\n accepted: { image: IMAGE_EXTENSIONS, video: VIDEO_EXTENSIONS }\r\n };\r\n }());\r\n\r\n if (!window.UploadManager || typeof window.UploadManager.validateFiles !== 'function') {\r\n console.error('[UploadManager] FALHA NA INICIALIZA\u00c7\u00c3O \u2014 verifique erros de sintaxe acima.');\r\n } else {\r\n console.log('[UploadManager] Carregado com sucesso.');\r\n }\r\n <\/script>\r\n <script>\r\n \/\/ ===== CONFIGURA\u00c7\u00c3O DO APPWRITE =====\r\n const { Client, Databases, Account, Query, ID } = Appwrite;\r\n\r\n const APPWRITE_ENDPOINT = 'https:\/\/nacional-appwrite.nounpw.easypanel.host\/v1';\r\n const APPWRITE_PROJECT_ID = '691e347500002a3f9fb8';\r\n\r\n const client = new Client();\r\n client\r\n .setEndpoint(APPWRITE_ENDPOINT)\r\n .setProject(APPWRITE_PROJECT_ID);\r\n\r\n const databases = new Databases(client);\r\n const account = new Account(client);\r\n \r\n \/\/ Cliente p\u00fablico (sem autentica\u00e7\u00e3o) para visualiza\u00e7\u00e3o compartilhada\r\n const publicClient = new Client();\r\n publicClient\r\n .setEndpoint(APPWRITE_ENDPOINT)\r\n .setProject(APPWRITE_PROJECT_ID);\r\n \r\n const publicDatabases = new Databases(publicClient);\r\n\r\n const DATABASE_ID = '691fbeb60019c2d815e3';\r\n const BUCKET_ID = '691fc01e001b6e84ffc3'; \/\/ Bucket: armazenamento\r\n const COLLECTIONS = {\r\n returnedProducts: '691fbed90000e09e4020',\r\n returnProducts: '691fbee4000bc9756947',\r\n returnProductPhotos: '691fbef3003b494ecc18',\r\n productCatalog: '691fbec30020ac5a56ca'\r\n };\r\n\r\n \/\/ ===== ESTADO GLOBAL =====\r\n let currentUser = null;\r\n let state = {\r\n products: [],\r\n returned: [],\r\n archived: []\r\n };\r\n let currentImageTarget = null;\r\n let currentVideoTarget = null;\r\n let productPhotos = []; \/\/ Array de objetos: {url: string, type: 'image'|'video'}\r\n let uploadedImageUrls = [];\r\n let uploadedVideoUrls = [];\r\n const REGISTER_DRAFT_KEY = 'returns-register-draft-v1';\r\n const MODAL_STATE_KEY = 'returns-modal-state-v1';\r\n\r\n \/\/ ===== ELEMENTOS DO DOM =====\r\n const loginScreen = document.getElementById('login-screen');\r\n const mainSystem = document.getElementById('main-system');\r\n const loginForm = document.getElementById('login-form');\r\n const loginFeedback = document.getElementById('login-feedback');\r\n const registerBtn = document.getElementById('register-btn');\r\n const logoutBtn = document.getElementById('logout-btn');\r\n const userDisplayName = document.getElementById('user-display-name');\r\n \r\n const registerForm = document.getElementById('register-form');\r\n const returnCodeInput = document.getElementById('return-code');\r\n const sellerNameInput = document.getElementById('seller-name');\r\n const salesChannelInput = document.getElementById('sales-channel');\r\n const returnObservationsInput = document.getElementById('return-observations');\r\n const productEntriesContainer = document.getElementById('product-entries-container');\r\n const addProductButton = document.getElementById('add-product-button');\r\n const productPhotosContainer = document.getElementById('product-photos-container');\r\n const addProductPhotoBtn = document.getElementById('add-product-photo-btn');\r\n const photoCountIndicator = document.getElementById('photo-count-indicator');\r\n \r\n const allProductsList = document.getElementById('all-products-list');\r\n const archivedProductsList = document.getElementById('archived-products-list');\r\n const mostReturnedList = document.getElementById('most-returned-list');\r\n const productCatalogList = document.getElementById('product-catalog-list');\r\n \r\n const addProductForm = document.getElementById('add-product-form');\r\n const newProductNameInput = document.getElementById('new-product-name');\r\n const newProductPhotoInput = document.getElementById('new-product-photo');\r\n const addProductFeedback = document.getElementById('add-product-feedback');\r\n const excelUpload = document.getElementById('excel-upload');\r\n const uploadExcelFeedback = document.getElementById('upload-excel-feedback');\r\n const downloadTemplateBtn = document.getElementById('download-template-btn');\r\n \r\n const imageCaptureModal = document.getElementById('image-capture-modal');\r\n const imageUrlInput = document.getElementById('image-url-input');\r\n const confirmImageBtn = document.getElementById('confirm-image-btn');\r\n const closeImageModal = document.getElementById('close-image-modal');\r\n const viewImageModal = document.getElementById('view-image-modal');\r\n const viewImageContent = document.getElementById('view-image-content');\r\n \r\n const videoCaptureModal = document.getElementById('video-capture-modal');\r\n const videoUrlInput = document.getElementById('video-url-input');\r\n const confirmVideoBtn = document.getElementById('confirm-video-btn');\r\n const closeVideoModal = document.getElementById('close-video-modal');\r\n const viewVideoModal = document.getElementById('view-video-modal');\r\n const viewVideoContent = document.getElementById('view-video-content');\r\n const addProductVideoBtn = document.getElementById('add-product-video-btn');\r\n \r\n const videoTabUrlBtn = document.getElementById('video-tab-url-btn');\r\n const videoTabUploadBtn = document.getElementById('video-tab-upload-btn');\r\n const videoUrlContent = document.getElementById('video-url-content');\r\n const videoUploadContent = document.getElementById('video-upload-content');\r\n const videoFileInput = document.getElementById('video-file-input');\r\n const videoCameraInput = document.getElementById('video-camera-input');\r\n const videoCameraBtn = document.getElementById('video-camera-btn');\r\n const videoGalleryBtn = document.getElementById('video-gallery-btn');\r\n const videoUploadPreview = document.getElementById('video-upload-preview');\r\n const videoPreviewGrid = document.getElementById('video-preview-grid');\r\n const videoUploadStatus = document.getElementById('video-upload-status');\r\n const videoUploadProgress = document.getElementById('video-upload-progress');\r\n const videoUploadProgressBar = document.getElementById('video-upload-progress-bar');\r\n const videoUploadProgressText = document.getElementById('video-upload-progress-text');\r\n \r\n const tabUrlBtn = document.getElementById('tab-url-btn');\r\n const tabUploadBtn = document.getElementById('tab-upload-btn');\r\n const urlContent = document.getElementById('url-content');\r\n const uploadContent = document.getElementById('upload-content');\r\n const imageFileInput = document.getElementById('image-file-input');\r\n const imageCameraInput = document.getElementById('image-camera-input');\r\n const imageCameraBtn = document.getElementById('image-camera-btn');\r\n const imageGalleryBtn = document.getElementById('image-gallery-btn');\r\n const uploadPreview = document.getElementById('upload-preview');\r\n const imagePreviewGrid = document.getElementById('image-preview-grid');\r\n const uploadStatus = document.getElementById('upload-status');\r\n const imageUploadProgress = document.getElementById('image-upload-progress');\r\n const imageUploadProgressBar = document.getElementById('image-upload-progress-bar');\r\n const imageUploadProgressText = document.getElementById('image-upload-progress-text');\r\n \r\n const productEntryTemplate = document.getElementById('product-entry-template');\r\n const searchAllInput = document.getElementById('search-all');\r\n const searchArchivedInput = document.getElementById('search-archived');\r\n \r\n const catalogModal = document.getElementById('catalog-modal');\r\n const closeCatalogModal = document.getElementById('close-catalog-modal');\r\n const catalogSearch = document.getElementById('catalog-search');\r\n const catalogProductsGrid = document.getElementById('catalog-products-grid');\r\n \r\n const editModal = document.getElementById('edit-modal');\r\n const closeEditModal = document.getElementById('close-edit-modal');\r\n const cancelEditBtn = document.getElementById('cancel-edit-btn');\r\n const editReturnForm = document.getElementById('edit-return-form');\r\n const editCodeInput = document.getElementById('edit-code');\r\n const editSellerInput = document.getElementById('edit-seller');\r\n const editObservationsInput = document.getElementById('edit-observations');\r\n const editProductsList = document.getElementById('edit-products-list');\r\n const editMediaGrid = document.getElementById('edit-media-grid');\r\n const editAddPhotoBtn = document.getElementById('edit-add-photo-btn');\r\n const editAddVideoBtn = document.getElementById('edit-add-video-btn');\r\n const saveEditBtn = document.getElementById('save-edit-btn');\r\n const editSaveFeedback = document.getElementById('edit-save-feedback');\r\n \r\n const shareModal = document.getElementById('share-modal');\r\n const shareLinkInput = document.getElementById('share-link-input');\r\n const copyShareLink = document.getElementById('copy-share-link');\r\n const closeShareModal = document.getElementById('close-share-modal');\r\n const copyFeedback = document.getElementById('copy-feedback');\r\n \r\n const barcodeScannerModal = document.getElementById('barcode-scanner-modal');\r\n const scanBarcodeBtn = document.getElementById('scan-barcode-btn');\r\n const closeScannerBtn = document.getElementById('close-scanner-btn');\r\n const barcodeVideo = document.getElementById('barcode-video');\r\n const barcodeCanvas = document.getElementById('barcode-canvas');\r\n const barcodeResult = document.getElementById('barcode-result');\r\n const barcodeValue = document.getElementById('barcode-value');\r\n const useBarcodeBtn = document.getElementById('use-barcode-btn');\r\n const retryScanBtn = document.getElementById('retry-scan-btn');\r\n const barcodeInstructions = document.getElementById('barcode-instructions');\r\n \r\n let currentProductEntry = null;\r\n let barcodeStream = null;\r\n let barcodeDetected = '';\r\n let isQuaggaInitialized = false;\r\n let editingReturnId = null;\r\n let editingReturnData = null;\r\n let editProductPhotos = []; \/\/ Fotos e v\u00eddeos do retorno sendo editado\r\n\r\n window.addEventListener('error', (event) => {\r\n console.error('[APP][ERROR]', event.message, event.error);\r\n });\r\n\r\n window.addEventListener('unhandledrejection', (event) => {\r\n console.error('[APP][PROMISE_REJECTION]', event.reason);\r\n });\r\n\r\n ['login-form', 'register-form', 'add-product-form', 'edit-return-form'].forEach((formId) => {\r\n const form = document.getElementById(formId);\r\n if (!form) return;\r\n form.addEventListener('submit', (event) => {\r\n event.preventDefault();\r\n });\r\n });\r\n\r\n \/\/ ===== AUTENTICA\u00c7\u00c3O =====\r\n loginForm.addEventListener('submit', async (e) => {\r\n e.preventDefault();\r\n const email = document.getElementById('email').value;\r\n const password = document.getElementById('password').value;\r\n \r\n try {\r\n await account.createEmailPasswordSession(email, password);\r\n currentUser = await account.get();\r\n showMainSystem();\r\n loadAllData();\r\n } catch (error) {\r\n loginFeedback.textContent = 'Erro no login: ' + error.message;\r\n }\r\n });\r\n\r\n registerBtn.addEventListener('click', async () => {\r\n const email = prompt('Digite o email:');\r\n const password = prompt('Digite a senha (m\u00ednimo 8 caracteres):');\r\n const name = prompt('Digite seu nome:');\r\n \r\n if (email && password && name) {\r\n try {\r\n await account.create(ID.unique(), email, password, name);\r\n alert('Conta criada! Fa\u00e7a login agora.');\r\n } catch (error) {\r\n alert('Erro ao criar conta: ' + error.message);\r\n }\r\n }\r\n });\r\n\r\n logoutBtn.addEventListener('click', async () => {\r\n try {\r\n await account.deleteSession('current');\r\n currentUser = null;\r\n state = { products: [], returned: [], archived: [] };\r\n mainSystem.classList.add('hidden');\r\n loginScreen.classList.remove('hidden');\r\n loginForm.reset();\r\n userDisplayName.textContent = '';\r\n } catch (error) {\r\n console.error('Erro ao sair:', error);\r\n }\r\n });\r\n\r\n function showMainSystem() {\r\n loginScreen.classList.add('hidden');\r\n mainSystem.classList.remove('hidden');\r\n userDisplayName.textContent = currentUser.name || currentUser.email;\r\n }\r\n\r\n \/\/ ===== NAVEGA\u00c7\u00c3O POR TABS =====\r\n document.querySelectorAll('.nav-link').forEach(link => {\r\n link.addEventListener('click', () => {\r\n const tabName = link.dataset.tab;\r\n switchTab(tabName);\r\n });\r\n });\r\n\r\n function switchTab(tabName) {\r\n document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));\r\n document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));\r\n \r\n document.querySelector(`[data-tab=\"${tabName}\"]`).classList.add('active');\r\n document.getElementById(`tab-${tabName}`).classList.add('active');\r\n }\r\n\r\n [returnCodeInput, sellerNameInput, salesChannelInput, returnObservationsInput].forEach((field) => {\r\n field.addEventListener('input', saveRegisterDraft);\r\n field.addEventListener('change', saveRegisterDraft);\r\n });\r\n\r\n \/\/ ===== CARREGAR DADOS =====\r\n async function loadAllData() {\r\n await Promise.all([\r\n loadCatalog(),\r\n loadReturns(),\r\n loadArchived()\r\n ]);\r\n updateCounts();\r\n calculateRanking();\r\n }\r\n\r\n async function loadCatalog() {\r\n try {\r\n \/\/ Carregar todos os produtos usando pagina\u00e7\u00e3o\r\n let allProducts = [];\r\n let offset = 0;\r\n const limit = 100; \/\/ Buscar 100 por vez\r\n let hasMore = true;\r\n \r\n while (hasMore) {\r\n const response = await databases.listDocuments(\r\n DATABASE_ID, \r\n COLLECTIONS.productCatalog,\r\n [\r\n Query.limit(limit),\r\n Query.offset(offset)\r\n ]\r\n );\r\n \r\n allProducts = allProducts.concat(response.documents);\r\n offset += limit;\r\n hasMore = response.documents.length === limit;\r\n \r\n console.log(`Carregados ${allProducts.length} produtos at\u00e9 agora...`);\r\n }\r\n \r\n state.products = allProducts;\r\n console.log('Total de produtos carregados:', state.products.length);\r\n renderCatalog();\r\n } catch (error) {\r\n console.error('Erro ao carregar cat\u00e1logo:', error);\r\n }\r\n }\r\n\r\n async function loadReturns() {\r\n try {\r\n \/\/ Carregar todos os retornos ativos com pagina\u00e7\u00e3o\r\n let allReturns = [];\r\n let offset = 0;\r\n const limit = 100;\r\n let hasMore = true;\r\n \r\n while (hasMore) {\r\n const response = await databases.listDocuments(\r\n DATABASE_ID, \r\n COLLECTIONS.returnedProducts,\r\n [\r\n Query.equal('archived', false),\r\n Query.limit(limit),\r\n Query.offset(offset)\r\n ]\r\n );\r\n \r\n allReturns = allReturns.concat(response.documents);\r\n offset += limit;\r\n hasMore = response.documents.length === limit;\r\n }\r\n \r\n \/\/ Carregar produtos e fotos de cada retorno\r\n for (let returnDoc of allReturns) {\r\n returnDoc.products = await loadReturnProducts(returnDoc.$id);\r\n returnDoc.productPhotos = await loadReturnPhotos(returnDoc.$id);\r\n }\r\n \r\n state.returned = allReturns;\r\n renderReturns();\r\n } catch (error) {\r\n console.error('Erro ao carregar retornos:', error);\r\n }\r\n }\r\n\r\n async function loadArchived() {\r\n try {\r\n \/\/ Carregar todos os retornos arquivados com pagina\u00e7\u00e3o\r\n let allArchived = [];\r\n let offset = 0;\r\n const limit = 100;\r\n let hasMore = true;\r\n \r\n while (hasMore) {\r\n const response = await databases.listDocuments(\r\n DATABASE_ID,\r\n COLLECTIONS.returnedProducts,\r\n [\r\n Query.equal('archived', true),\r\n Query.limit(limit),\r\n Query.offset(offset)\r\n ]\r\n );\r\n \r\n allArchived = allArchived.concat(response.documents);\r\n offset += limit;\r\n hasMore = response.documents.length === limit;\r\n }\r\n \r\n for (let returnDoc of allArchived) {\r\n returnDoc.products = await loadReturnProducts(returnDoc.$id);\r\n returnDoc.productPhotos = await loadReturnPhotos(returnDoc.$id);\r\n }\r\n \r\n state.archived = allArchived;\r\n renderArchived();\r\n } catch (error) {\r\n console.error('Erro ao carregar arquivados:', error);\r\n }\r\n }\r\n\r\n async function loadReturnProducts(returnId) {\r\n try {\r\n let allProducts = [];\r\n let offset = 0;\r\n const limit = 100;\r\n let hasMore = true;\r\n \r\n while (hasMore) {\r\n const response = await databases.listDocuments(\r\n DATABASE_ID,\r\n COLLECTIONS.returnProducts,\r\n [\r\n Query.equal('returnId', returnId),\r\n Query.limit(limit),\r\n Query.offset(offset)\r\n ]\r\n );\r\n \r\n allProducts = allProducts.concat(response.documents);\r\n offset += limit;\r\n hasMore = response.documents.length === limit;\r\n }\r\n \r\n return allProducts;\r\n } catch (error) {\r\n console.error('Erro ao carregar produtos do retorno:', error);\r\n return [];\r\n }\r\n }\r\n\r\n async function loadReturnPhotos(returnId) {\r\n try {\r\n let allPhotos = [];\r\n let offset = 0;\r\n const limit = 100;\r\n let hasMore = true;\r\n \r\n while (hasMore) {\r\n const response = await databases.listDocuments(\r\n DATABASE_ID,\r\n COLLECTIONS.returnProductPhotos,\r\n [\r\n Query.equal('returnId', returnId),\r\n Query.orderAsc('order'),\r\n Query.limit(limit),\r\n Query.offset(offset)\r\n ]\r\n );\r\n \r\n allPhotos = allPhotos.concat(response.documents);\r\n offset += limit;\r\n hasMore = response.documents.length === limit;\r\n }\r\n \r\n \/\/ Retornar array com URL e tipo\r\n return allPhotos.map(doc => ({\r\n url: doc.photoUrl,\r\n type: doc.mediaType || detectMediaType(doc.photoUrl) \/\/ Detectar tipo se n\u00e3o tiver\r\n }));\r\n } catch (error) {\r\n console.error('Erro ao carregar fotos:', error);\r\n return [];\r\n }\r\n }\r\n \r\n \/\/ Fun\u00e7\u00e3o auxiliar para detectar tipo de m\u00eddia pela URL\r\n function detectMediaType(url) {\r\n if (!url) return 'image';\r\n const lowerUrl = url.toLowerCase();\r\n \r\n \/\/ Detectar v\u00eddeos por par\u00e2metro na URL\r\n if (lowerUrl.includes('type=video') || lowerUrl.includes('&video')) {\r\n console.log('V\u00eddeo detectado (par\u00e2metro):', url);\r\n return 'video';\r\n }\r\n \r\n \/\/ Detectar v\u00eddeos por extens\u00e3o\r\n const videoExtensions = ['.mp4', '.webm', '.mov', '.avi', '.mkv', '.flv', '.wmv', '.m4v'];\r\n const hasVideoExtension = videoExtensions.some(ext => lowerUrl.includes(ext));\r\n const hasVideoPath = lowerUrl.includes('video') || lowerUrl.includes('\/videos\/');\r\n \r\n if (hasVideoExtension || hasVideoPath) {\r\n console.log('V\u00eddeo detectado (extens\u00e3o\/path):', url);\r\n return 'video';\r\n }\r\n \r\n return 'image';\r\n }\r\n\r\n function getRegisterDraftPayload() {\r\n const products = Array.from(productEntriesContainer.querySelectorAll('.product-entry')).map((entry) => ({\r\n name: entry.querySelector('.product-name')?.value || '',\r\n quantity: entry.querySelector('.product-quantity')?.value || '1',\r\n status: entry.querySelector('.return-status')?.value || 'bom',\r\n photo: entry.querySelector('.product-photo-data')?.value || '',\r\n labelPhoto: entry.querySelector('.label-photo-data')?.value || ''\r\n }));\r\n\r\n return {\r\n code: returnCodeInput.value || '',\r\n sellerName: sellerNameInput.value || '',\r\n salesChannel: salesChannelInput.value || '',\r\n observations: returnObservationsInput.value || '',\r\n products,\r\n productPhotos: productPhotos || [],\r\n activeTab: document.querySelector('.nav-link.active')?.dataset?.tab || 'register'\r\n };\r\n }\r\n\r\n function saveRegisterDraft() {\r\n try {\r\n const payload = getRegisterDraftPayload();\r\n localStorage.setItem(REGISTER_DRAFT_KEY, JSON.stringify(payload));\r\n } catch (error) {\r\n console.error('[DRAFT] Falha ao salvar rascunho:', error);\r\n }\r\n }\r\n\r\n function clearRegisterDraft() {\r\n localStorage.removeItem(REGISTER_DRAFT_KEY);\r\n }\r\n\r\n function restoreRegisterDraft() {\r\n try {\r\n const raw = localStorage.getItem(REGISTER_DRAFT_KEY);\r\n if (!raw) return;\r\n\r\n const draft = JSON.parse(raw);\r\n if (!draft) return;\r\n\r\n returnCodeInput.value = draft.code || '';\r\n sellerNameInput.value = draft.sellerName || '';\r\n salesChannelInput.value = draft.salesChannel || '';\r\n returnObservationsInput.value = draft.observations || '';\r\n\r\n productEntriesContainer.innerHTML = '';\r\n if (Array.isArray(draft.products) && draft.products.length > 0) {\r\n draft.products.forEach((product) => addProductEntry(product));\r\n } else {\r\n addProductEntry();\r\n }\r\n\r\n productPhotos = Array.isArray(draft.productPhotos) ? draft.productPhotos : [];\r\n renderProductPhotos();\r\n\r\n if (draft.activeTab) {\r\n try { switchTab(draft.activeTab); } catch (e) { console.warn('[DRAFT] Falha ao restaurar aba:', e); }\r\n }\r\n } catch (error) {\r\n console.error('[DRAFT] Falha ao restaurar rascunho:', error);\r\n }\r\n }\r\n\r\n \/\/ ===== REGISTRAR RETORNO =====\r\n registerForm.addEventListener('submit', async (e) => {\r\n e.preventDefault();\r\n \r\n if (!sellerNameInput.value.trim()) {\r\n alert('Por favor, informe o nome do vendedor.');\r\n return;\r\n }\r\n \r\n if (!salesChannelInput.value) {\r\n alert('Por favor, selecione o canal de venda.');\r\n return;\r\n }\r\n \r\n try {\r\n \/\/ 1. Criar retorno principal\r\n const returnDoc = await databases.createDocument(\r\n DATABASE_ID,\r\n COLLECTIONS.returnedProducts,\r\n ID.unique(),\r\n {\r\n code: returnCodeInput.value.trim(),\r\n observations: returnObservationsInput.value.trim(),\r\n sellerName: sellerNameInput.value.trim(),\r\n salesChannel: salesChannelInput.value,\r\n date: new Date().toISOString(),\r\n createdBy_email: currentUser.email,\r\n createdBy_uid: currentUser.$id,\r\n createdBy_displayName: currentUser.name || currentUser.email,\r\n createdAt: new Date().toISOString(),\r\n archived: false\r\n }\r\n );\r\n \r\n const returnId = returnDoc.$id;\r\n \r\n \/\/ 2. Criar produtos do retorno\r\n const productEntries = productEntriesContainer.querySelectorAll('.product-entry');\r\n for (let entry of productEntries) {\r\n await databases.createDocument(\r\n DATABASE_ID,\r\n COLLECTIONS.returnProducts,\r\n ID.unique(),\r\n {\r\n returnId: returnId,\r\n name: entry.querySelector('.product-name').value.trim(),\r\n quantity: parseInt(entry.querySelector('.product-quantity').value) || 1,\r\n status: entry.querySelector('.return-status').value,\r\n photo: entry.querySelector('.product-photo-data').value,\r\n labelPhoto: entry.querySelector('.label-photo-data').value\r\n }\r\n );\r\n }\r\n \r\n \/\/ 3. Criar fotos e v\u00eddeos do produto\r\n for (let i = 0; i < productPhotos.length; i++) {\r\n const item = productPhotos[i];\r\n const url = item.url || item; \/\/ Compatibilidade com formato antigo\r\n const type = item.type || 'image'; \/\/ Default para image\r\n \r\n await databases.createDocument(\r\n DATABASE_ID,\r\n COLLECTIONS.returnProductPhotos,\r\n ID.unique(),\r\n {\r\n returnId: returnId,\r\n photoUrl: url,\r\n \/\/ mediaType: type, \/\/ TODO: Adicionar atributo 'mediaType' (string) na cole\u00e7\u00e3o returnProductPhotos no Appwrite\r\n order: i,\r\n uploadedAt: new Date().toISOString()\r\n }\r\n );\r\n }\r\n \r\n \/\/ Limpar formul\u00e1rio\r\n registerForm.reset();\r\n productEntriesContainer.innerHTML = '';\r\n productPhotos = [];\r\n renderProductPhotos();\r\n addProductEntry();\r\n clearRegisterDraft();\r\n \r\n alert('Retorno registrado com sucesso!');\r\n switchTab('all');\r\n loadAllData();\r\n \r\n } catch (error) {\r\n console.error('Erro ao salvar retorno:', error);\r\n alert('Erro ao salvar retorno: ' + error.message);\r\n }\r\n });\r\n\r\n \/\/ ===== GERENCIAR PRODUTOS DO FORMUL\u00c1RIO =====\r\n addProductButton.addEventListener('click', () => addProductEntry());\r\n\r\n function addProductEntry(initialData = null) {\r\n const newEntry = productEntryTemplate.content.cloneNode(true);\r\n const entryElement = newEntry.querySelector('.product-entry');\r\n \r\n \/\/ Event listeners para imagens\r\n newEntry.querySelectorAll('.image-placeholder').forEach(img => {\r\n img.addEventListener('click', () => {\r\n currentImageTarget = img;\r\n openImageCaptureModal();\r\n });\r\n });\r\n \r\n \/\/ Event listener para autocomplete no campo de produto\r\n const productNameInput = newEntry.querySelector('.product-name');\r\n const suggestionsDiv = newEntry.querySelector('.product-suggestions');\r\n \r\n productNameInput.addEventListener('input', function() {\r\n const searchTerm = this.value.trim().toLowerCase();\r\n \r\n if (searchTerm.length < 2) {\r\n suggestionsDiv.classList.add('hidden');\r\n return;\r\n }\r\n \r\n const filtered = state.products.filter(p => \r\n p.name.toLowerCase().includes(searchTerm)\r\n ).slice(0, 10); \/\/ Limitar a 10 resultados\r\n \r\n if (filtered.length === 0) {\r\n suggestionsDiv.classList.add('hidden');\r\n return;\r\n }\r\n \r\n suggestionsDiv.innerHTML = filtered.map(product => `\r\n <div class=\"suggestion-item flex items-center gap-3 p-2 hover:bg-blue-50 cursor-pointer border-b last:border-b-0\" data-product-id=\"${product.$id}\">\r\n <img decoding=\"async\" src=\"${product.photo}\" class=\"w-12 h-12 object-cover rounded\" onerror=\"this.src='https:\/\/placehold.co\/50x50\/e0e0e0\/999999?text=?'\">\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"font-medium text-sm truncate\">${product.name}<\/div>\r\n <\/div>\r\n <i class=\"fas fa-chevron-right text-gray-400 text-xs\"><\/i>\r\n <\/div>\r\n `).join('');\r\n \r\n suggestionsDiv.classList.remove('hidden');\r\n \r\n \/\/ Event listeners para os itens da lista\r\n suggestionsDiv.querySelectorAll('.suggestion-item').forEach(item => {\r\n item.addEventListener('click', function() {\r\n const productId = this.dataset.productId;\r\n const product = state.products.find(p => p.$id === productId);\r\n if (product) {\r\n selectProductFromSuggestion(product, this.closest('.product-entry'));\r\n }\r\n });\r\n });\r\n });\r\n \r\n \/\/ Fechar sugest\u00f5es ao clicar fora\r\n productNameInput.addEventListener('blur', function() {\r\n setTimeout(() => {\r\n suggestionsDiv.classList.add('hidden');\r\n }, 200);\r\n });\r\n \r\n \/\/ Event listener para buscar no cat\u00e1logo\r\n newEntry.querySelector('.search-catalog-btn').addEventListener('click', function() {\r\n currentProductEntry = this.closest('.product-entry');\r\n openCatalogModal();\r\n });\r\n \r\n \/\/ Event listener para remover\r\n newEntry.querySelector('.remove-product-button').addEventListener('click', function() {\r\n this.closest('.product-entry').remove();\r\n saveRegisterDraft();\r\n });\r\n\r\n entryElement.querySelectorAll('input, select').forEach((field) => {\r\n field.addEventListener('input', saveRegisterDraft);\r\n field.addEventListener('change', saveRegisterDraft);\r\n });\r\n\r\n if (initialData) {\r\n entryElement.querySelector('.product-name').value = initialData.name || '';\r\n entryElement.querySelector('.product-quantity').value = initialData.quantity || '1';\r\n entryElement.querySelector('.return-status').value = initialData.status || 'bom';\r\n\r\n const productPhotoInput = entryElement.querySelector('.product-photo-data');\r\n const labelPhotoInput = entryElement.querySelector('.label-photo-data');\r\n if (initialData.photo) {\r\n productPhotoInput.value = initialData.photo;\r\n productPhotoInput.previousElementSibling.src = initialData.photo;\r\n }\r\n if (initialData.labelPhoto) {\r\n labelPhotoInput.value = initialData.labelPhoto;\r\n labelPhotoInput.previousElementSibling.src = initialData.labelPhoto;\r\n }\r\n }\r\n \r\n productEntriesContainer.appendChild(newEntry);\r\n saveRegisterDraft();\r\n }\r\n \r\n \/\/ ===== MODAL DE CAT\u00c1LOGO =====\r\n function openCatalogModal() {\r\n renderCatalogModal();\r\n catalogModal.classList.remove('hidden');\r\n }\r\n \r\n closeCatalogModal.addEventListener('click', () => {\r\n catalogModal.classList.add('hidden');\r\n currentProductEntry = null;\r\n });\r\n \r\n catalogSearch.addEventListener('input', (e) => {\r\n renderCatalogModal(e.target.value.toLowerCase());\r\n });\r\n \r\n function renderCatalogModal(searchTerm = '') {\r\n catalogProductsGrid.innerHTML = '';\r\n \r\n const filtered = state.products.filter(p => \r\n !searchTerm || p.name.toLowerCase().includes(searchTerm)\r\n );\r\n \r\n if (filtered.length === 0) {\r\n catalogProductsGrid.innerHTML = '<p class=\"col-span-2 sm:col-span-3 md:col-span-4 text-center text-gray-500 py-8 text-sm\">Nenhum produto encontrado<\/p>';\r\n return;\r\n }\r\n \r\n filtered.forEach(product => {\r\n const div = document.createElement('div');\r\n div.className = 'border rounded-lg p-2 sm:p-3 hover:shadow-lg transition cursor-pointer hover:border-blue-500';\r\n div.innerHTML = `\r\n <img decoding=\"async\" src=\"${product.photo}\" class=\"w-full h-20 sm:h-24 object-cover rounded-lg mb-2\">\r\n <p class=\"font-semibold text-xs sm:text-sm text-center truncate\" title=\"${product.name}\">${product.name}<\/p>\r\n `;\r\n div.addEventListener('click', () => selectProductFromCatalog(product));\r\n catalogProductsGrid.appendChild(div);\r\n });\r\n }\r\n \r\n function selectProductFromCatalog(product) {\r\n if (currentProductEntry) {\r\n const nameInput = currentProductEntry.querySelector('.product-name');\r\n const photoImg = currentProductEntry.querySelector('.product-photo-data').previousElementSibling;\r\n const photoData = currentProductEntry.querySelector('.product-photo-data');\r\n \r\n nameInput.value = product.name;\r\n photoImg.src = product.photo;\r\n photoData.value = product.photo;\r\n }\r\n \r\n catalogModal.classList.add('hidden');\r\n catalogSearch.value = '';\r\n currentProductEntry = null;\r\n saveRegisterDraft();\r\n }\r\n \r\n \/\/ Fun\u00e7\u00e3o para selecionar produto das sugest\u00f5es (autocomplete)\r\n function selectProductFromSuggestion(product, productEntry) {\r\n const nameInput = productEntry.querySelector('.product-name');\r\n const photoImg = productEntry.querySelector('.product-photo-data').previousElementSibling;\r\n const photoData = productEntry.querySelector('.product-photo-data');\r\n const suggestionsDiv = productEntry.querySelector('.product-suggestions');\r\n \r\n nameInput.value = product.name;\r\n photoImg.src = product.photo;\r\n photoData.value = product.photo;\r\n \r\n suggestionsDiv.classList.add('hidden');\r\n saveRegisterDraft();\r\n }\r\n\r\n \/\/ ===== GERENCIAR FOTOS E V\u00cdDEOS DO PRODUTO =====\r\n function renderProductPhotos() {\r\n productPhotosContainer.innerHTML = '';\r\n \r\n productPhotos.forEach((item, index) => {\r\n const mediaDiv = document.createElement('div');\r\n mediaDiv.className = 'relative';\r\n \r\n if (item.type === 'video') {\r\n mediaDiv.innerHTML = `\r\n <video src=\"${item.url}\" class=\"w-full h-24 object-cover rounded-lg border-2 border-purple-500 cursor-pointer\"><\/video>\r\n <div class=\"absolute inset-0 flex items-center justify-center pointer-events-none\">\r\n <i class=\"fas fa-play-circle text-white text-3xl opacity-80\"><\/i>\r\n <\/div>\r\n <button type=\"button\" class=\"absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 text-xs\"\r\n onclick=\"removeProductPhoto(${index})\">\u00d7<\/button>\r\n `;\r\n mediaDiv.querySelector('video').addEventListener('click', () => viewVideo(item.url));\r\n } else {\r\n mediaDiv.innerHTML = `\r\n <img decoding=\"async\" src=\"${item.url}\" class=\"w-full h-24 object-cover rounded-lg border-2 border-green-500 cursor-pointer\">\r\n <button type=\"button\" class=\"absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 text-xs\"\r\n onclick=\"removeProductPhoto(${index})\">\u00d7<\/button>\r\n `;\r\n mediaDiv.querySelector('img').addEventListener('click', () => viewImage(item.url));\r\n }\r\n \r\n productPhotosContainer.appendChild(mediaDiv);\r\n });\r\n \r\n for (let i = productPhotos.length; i < 10; i++) {\r\n const emptyDiv = document.createElement('div');\r\n emptyDiv.className = 'border-2 border-dashed border-gray-300 rounded-lg h-24 flex items-center justify-center text-gray-400';\r\n emptyDiv.innerHTML = '<i class=\"fas fa-image text-2xl\"><\/i>';\r\n productPhotosContainer.appendChild(emptyDiv);\r\n }\r\n \r\n photoCountIndicator.textContent = `${productPhotos.length}\/10`;\r\n saveRegisterDraft();\r\n }\r\n\r\n window.removeProductPhoto = function(index) {\r\n productPhotos.splice(index, 1);\r\n renderProductPhotos();\r\n };\r\n\r\n addProductPhotoBtn.addEventListener('click', () => {\r\n if (productPhotos.length < 10) {\r\n currentImageTarget = { type: 'product-photo', index: productPhotos.length };\r\n openImageCaptureModal();\r\n }\r\n });\r\n \r\n addProductVideoBtn.addEventListener('click', () => {\r\n if (productPhotos.length < 10) {\r\n currentVideoTarget = { type: 'product-video', index: productPhotos.length };\r\n openVideoCaptureModal();\r\n }\r\n });\r\n\r\n \/\/ ===== MODAL DE IMAGEM =====\r\n function openImageCaptureModal() {\r\n imageUrlInput.value = '';\r\n imageFileInput.value = '';\r\n uploadPreview.classList.add('hidden');\r\n imagePreviewGrid.innerHTML = '';\r\n imageUploadProgress.classList.add('hidden');\r\n imageUploadProgressBar.style.width = '0%';\r\n imageUploadProgressText.textContent = '';\r\n uploadedImageUrls = [];\r\n \r\n \/\/ Resetar para aba URL\r\n switchToUrlTab();\r\n \r\n imageCaptureModal.classList.remove('hidden');\r\n }\r\n \r\n \/\/ Navega\u00e7\u00e3o entre abas do modal\r\n tabUrlBtn.addEventListener('click', switchToUrlTab);\r\n tabUploadBtn.addEventListener('click', switchToUploadTab);\r\n \r\n function switchToUrlTab() {\r\n tabUrlBtn.classList.add('border-blue-500', 'text-blue-600', 'font-semibold');\r\n tabUrlBtn.classList.remove('border-transparent', 'text-gray-600');\r\n tabUploadBtn.classList.add('border-transparent', 'text-gray-600');\r\n tabUploadBtn.classList.remove('border-blue-500', 'text-blue-600', 'font-semibold');\r\n \r\n urlContent.classList.remove('hidden');\r\n uploadContent.classList.add('hidden');\r\n }\r\n \r\n function switchToUploadTab() {\r\n tabUploadBtn.classList.add('border-blue-500', 'text-blue-600', 'font-semibold');\r\n tabUploadBtn.classList.remove('border-transparent', 'text-gray-600');\r\n tabUrlBtn.classList.add('border-transparent', 'text-gray-600');\r\n tabUrlBtn.classList.remove('border-blue-500', 'text-blue-600', 'font-semibold');\r\n \r\n uploadContent.classList.remove('hidden');\r\n urlContent.classList.add('hidden');\r\n }\r\n\r\n function renderImageUploadPreviews(previews) {\r\n imagePreviewGrid.innerHTML = previews.map((preview) => `\r\n <div class=\"border rounded-lg overflow-hidden\">\r\n <img decoding=\"async\" src=\"${preview.previewUrl}\" class=\"w-full h-24 object-cover\" alt=\"Preview de imagem\">\r\n <p class=\"text-[11px] p-1 truncate\" title=\"${preview.name}\">${preview.name}<\/p>\r\n <\/div>\r\n `).join('');\r\n uploadPreview.classList.remove('hidden');\r\n }\r\n \r\n \/\/ Salva estado antes de abrir qualquer seletor de arquivo de imagem\r\n function _saveImageModalState() {\r\n saveRegisterDraft();\r\n try {\r\n const targetData = (currentImageTarget && currentImageTarget.type)\r\n ? { type: currentImageTarget.type }\r\n : { type: 'product-photo' };\r\n localStorage.setItem(MODAL_STATE_KEY, JSON.stringify({ modal: 'image', target: targetData }));\r\n } catch (e) { console.warn('[UPLOAD] Falha ao salvar estado do modal:', e); }\r\n }\r\n\r\n \/\/ L\u00f3gica de processamento compartilhada: c\u00e2mera e galeria usam a mesma fun\u00e7\u00e3o\r\n async function _handleImageFiles(selectedFiles) {\r\n if (!window.UploadManager || typeof window.UploadManager.validateFiles !== 'function') {\r\n console.error('[UPLOAD] UploadManager n\u00e3o est\u00e1 dispon\u00edvel.');\r\n uploadStatus.textContent = '\u2717 Erro interno: m\u00f3dulo de upload n\u00e3o carregado. Recarregue a p\u00e1gina.';\r\n uploadStatus.className = 'text-sm text-red-600 text-center';\r\n return;\r\n }\r\n if (!selectedFiles || selectedFiles.length === 0) return;\r\n\r\n \/\/ Garantir que a aba de upload est\u00e1 vis\u00edvel\r\n switchToUploadTab();\r\n\r\n const remainingSlots = Math.max(0, 10 - productPhotos.length);\r\n if (remainingSlots === 0) {\r\n uploadStatus.textContent = 'Limite de 10 m\u00eddias atingido para este retorno.';\r\n uploadStatus.className = 'text-sm text-red-600 text-center';\r\n return;\r\n }\r\n\r\n const files = selectedFiles.slice(0, remainingSlots);\r\n const { valid, invalid } = window.UploadManager.validateFiles(files, 'image', window.UploadManager.limits.imageMB);\r\n\r\n if (invalid.length > 0) {\r\n console.warn('[UPLOAD][IMAGEM] arquivos inv\u00e1lidos:', invalid);\r\n uploadStatus.textContent = `Alguns arquivos foram ignorados: ${invalid.map(item => item.file.name).join(', ')}`;\r\n uploadStatus.className = 'text-sm text-yellow-600 text-center';\r\n }\r\n if (valid.length === 0) {\r\n uploadStatus.textContent = `Nenhuma imagem v\u00e1lida. Tipos: ${window.UploadManager.accepted.image.join(', ')} | M\u00e1x ${window.UploadManager.limits.imageMB}MB`;\r\n uploadStatus.className = 'text-sm text-red-600 text-center';\r\n return;\r\n }\r\n\r\n try {\r\n const previews = await window.UploadManager.createPreviews(valid, 'image');\r\n renderImageUploadPreviews(previews);\r\n imageUploadProgress.classList.remove('hidden');\r\n uploadStatus.textContent = `Enviando ${valid.length} imagem(ns)...`;\r\n uploadStatus.className = 'text-sm text-blue-600 text-center';\r\n\r\n uploadedImageUrls = await window.UploadManager.uploadFiles({\r\n files: valid,\r\n mediaType: 'image',\r\n endpoint: APPWRITE_ENDPOINT,\r\n projectId: APPWRITE_PROJECT_ID,\r\n bucketId: BUCKET_ID,\r\n onProgress: (percent, index, total, fileName) => {\r\n imageUploadProgressBar.style.width = `${percent}%`;\r\n imageUploadProgressText.textContent = fileName\r\n ? `Enviando ${index + 1}\/${total}: ${fileName} (${percent}%)`\r\n : `Upload conclu\u00eddo (${percent}%)`;\r\n }\r\n });\r\n\r\n uploadStatus.textContent = `\u2713 ${uploadedImageUrls.length} imagem(ns) carregada(s) com sucesso!`;\r\n uploadStatus.className = 'text-sm text-green-600 text-center font-semibold';\r\n } catch (error) {\r\n console.error('[UPLOAD][IMAGEM] Erro ao fazer upload:', error);\r\n uploadStatus.textContent = '\u2717 Erro ao carregar imagem: ' + error.message;\r\n uploadStatus.className = 'text-sm text-red-600 text-center';\r\n uploadedImageUrls = [];\r\n imageUploadProgress.classList.add('hidden');\r\n }\r\n }\r\n\r\n \/\/ Bot\u00e3o C\u00e2mera \u2192 abre c\u00e2mera diretamente (capture)\r\n imageCameraBtn.addEventListener('click', () => {\r\n imageCameraInput.value = '';\r\n _saveImageModalState();\r\n imageCameraInput.click();\r\n });\r\n\r\n \/\/ Bot\u00e3o Galeria \u2192 abre seletor de arquivos\r\n imageGalleryBtn.addEventListener('click', () => {\r\n imageFileInput.value = '';\r\n _saveImageModalState();\r\n imageFileInput.click();\r\n });\r\n\r\n \/\/ Ambos os inputs de imagem usam o mesmo handler\r\n imageFileInput.addEventListener('change', (e) => _handleImageFiles(Array.from(e.target.files || [])));\r\n imageCameraInput.addEventListener('change', (e) => _handleImageFiles(Array.from(e.target.files || [])));\r\n\r\n closeImageModal.addEventListener('click', () => {\r\n imageCaptureModal.classList.add('hidden');\r\n currentImageTarget = null;\r\n uploadedImageUrls = [];\r\n try { localStorage.removeItem(MODAL_STATE_KEY); } catch (e) {}\r\n });\r\n\r\n confirmImageBtn.addEventListener('click', () => {\r\n const urlsToApply = [];\r\n \r\n \/\/ Verificar qual aba est\u00e1 ativa\r\n if (!urlContent.classList.contains('hidden')) {\r\n \/\/ Aba URL\r\n const typedUrl = imageUrlInput.value.trim();\r\n if (typedUrl) urlsToApply.push({ url: typedUrl, type: 'image' });\r\n } else if (uploadedImageUrls.length > 0) {\r\n \/\/ Aba Upload\r\n urlsToApply.push(...uploadedImageUrls.map(item => ({ url: item.url, type: 'image' })));\r\n }\r\n \r\n if (urlsToApply.length > 0 && currentImageTarget) {\r\n if (currentImageTarget.type === 'product-photo') {\r\n const availableSlots = Math.max(0, 10 - productPhotos.length);\r\n productPhotos.push(...urlsToApply.slice(0, availableSlots));\r\n renderProductPhotos();\r\n } else if (currentImageTarget.type === 'edit-media') {\r\n editProductPhotos.push(...urlsToApply);\r\n renderEditMedia();\r\n } else {\r\n const firstUrl = urlsToApply[0].url;\r\n currentImageTarget.src = firstUrl;\r\n currentImageTarget.nextElementSibling.value = firstUrl;\r\n }\r\n }\r\n \r\n imageCaptureModal.classList.add('hidden');\r\n currentImageTarget = null;\r\n uploadedImageUrls = [];\r\n try { localStorage.removeItem(MODAL_STATE_KEY); } catch (e) {}\r\n saveRegisterDraft();\r\n });\r\n\r\n window.viewImage = function(url) {\r\n viewImageContent.src = url;\r\n viewImageModal.classList.remove('hidden');\r\n };\r\n \r\n window.viewVideo = function(url) {\r\n console.log('Abrindo v\u00eddeo:', url);\r\n const videoElement = document.getElementById('view-video-content');\r\n videoElement.src = url;\r\n videoElement.load();\r\n viewVideoModal.classList.remove('hidden');\r\n };\r\n \r\n window.closeViewVideoModal = function() {\r\n const videoElement = document.getElementById('view-video-content');\r\n videoElement.pause();\r\n videoElement.src = '';\r\n viewVideoModal.classList.add('hidden');\r\n };\r\n \r\n \/\/ Fun\u00e7\u00e3o para download de m\u00eddia\r\n window.downloadMedia = async function(url, filename) {\r\n try {\r\n console.log('Baixando:', url);\r\n const response = await fetch(url);\r\n const blob = await response.blob();\r\n const downloadUrl = window.URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = downloadUrl;\r\n a.download = filename;\r\n document.body.appendChild(a);\r\n a.click();\r\n document.body.removeChild(a);\r\n window.URL.revokeObjectURL(downloadUrl);\r\n console.log('Download iniciado:', filename);\r\n } catch (error) {\r\n console.error('Erro ao baixar m\u00eddia:', error);\r\n alert('Erro ao baixar arquivo. Tente novamente.');\r\n }\r\n };\r\n \r\n \/\/ Fun\u00e7\u00e3o para baixar todas as m\u00eddias\r\n window.downloadAllMedia = async function() {\r\n const mediaArray = window.currentPublicMedia;\r\n if (!mediaArray || mediaArray.length === 0) {\r\n alert('Nenhuma m\u00eddia dispon\u00edvel para download.');\r\n return;\r\n }\r\n \r\n const button = event.target.closest('button');\r\n const originalText = button.innerHTML;\r\n \r\n try {\r\n button.disabled = true;\r\n button.innerHTML = '<i class=\"fas fa-spinner fa-spin mr-2\"><\/i>Baixando...';\r\n \r\n for (let i = 0; i < mediaArray.length; i++) {\r\n const item = mediaArray[i];\r\n const url = item.url || item;\r\n const type = item.type || detectMediaType(url);\r\n const extension = type === 'video' ? 'mp4' : 'jpg';\r\n const filename = `midia_${i + 1}.${extension}`;\r\n \r\n button.innerHTML = `<i class=\"fas fa-spinner fa-spin mr-2\"><\/i>Baixando ${i + 1}\/${mediaArray.length}...`;\r\n \r\n await downloadMedia(url, filename);\r\n \r\n \/\/ Pequeno delay entre downloads\r\n await new Promise(resolve => setTimeout(resolve, 500));\r\n }\r\n \r\n button.innerHTML = '<i class=\"fas fa-check mr-2\"><\/i>Download Conclu\u00eddo!';\r\n setTimeout(() => {\r\n button.innerHTML = originalText;\r\n button.disabled = false;\r\n }, 2000);\r\n \r\n } catch (error) {\r\n console.error('Erro ao baixar m\u00eddias:', error);\r\n button.innerHTML = '<i class=\"fas fa-times mr-2\"><\/i>Erro no download';\r\n setTimeout(() => {\r\n button.innerHTML = originalText;\r\n button.disabled = false;\r\n }, 2000);\r\n }\r\n };\r\n \r\n \/\/ Fechar modal de v\u00eddeo ao clicar no fundo (mas n\u00e3o no v\u00eddeo)\r\n viewVideoModal.addEventListener('click', (e) => {\r\n if (e.target === viewVideoModal) {\r\n closeViewVideoModal();\r\n }\r\n });\r\n \r\n \/\/ ===== MODAL DE V\u00cdDEO =====\r\n function openVideoCaptureModal() {\r\n videoUrlInput.value = '';\r\n videoFileInput.value = '';\r\n videoUploadPreview.classList.add('hidden');\r\n videoPreviewGrid.innerHTML = '';\r\n videoUploadProgress.classList.add('hidden');\r\n videoUploadProgressBar.style.width = '0%';\r\n videoUploadProgressText.textContent = '';\r\n uploadedVideoUrls = [];\r\n \r\n \/\/ Resetar para aba URL\r\n switchToVideoUrlTab();\r\n \r\n videoCaptureModal.classList.remove('hidden');\r\n }\r\n \r\n \/\/ Navega\u00e7\u00e3o entre abas do modal de v\u00eddeo\r\n videoTabUrlBtn.addEventListener('click', switchToVideoUrlTab);\r\n videoTabUploadBtn.addEventListener('click', switchToVideoUploadTab);\r\n \r\n function switchToVideoUrlTab() {\r\n videoTabUrlBtn.classList.add('border-blue-500', 'text-blue-600', 'font-semibold');\r\n videoTabUrlBtn.classList.remove('border-transparent', 'text-gray-600');\r\n videoTabUploadBtn.classList.add('border-transparent', 'text-gray-600');\r\n videoTabUploadBtn.classList.remove('border-blue-500', 'text-blue-600', 'font-semibold');\r\n \r\n videoUrlContent.classList.remove('hidden');\r\n videoUploadContent.classList.add('hidden');\r\n }\r\n \r\n function switchToVideoUploadTab() {\r\n videoTabUploadBtn.classList.add('border-blue-500', 'text-blue-600', 'font-semibold');\r\n videoTabUploadBtn.classList.remove('border-transparent', 'text-gray-600');\r\n videoTabUrlBtn.classList.add('border-transparent', 'text-gray-600');\r\n videoTabUrlBtn.classList.remove('border-blue-500', 'text-blue-600', 'font-semibold');\r\n \r\n videoUploadContent.classList.remove('hidden');\r\n videoUrlContent.classList.add('hidden');\r\n }\r\n\r\n function renderVideoUploadPreviews(previews) {\r\n videoPreviewGrid.innerHTML = previews.map((preview) => `\r\n <div class=\"border rounded-lg overflow-hidden p-2\">\r\n <video src=\"${preview.previewUrl}\" class=\"w-full h-40 rounded-lg\" controls><\/video>\r\n <p class=\"text-[11px] mt-1 truncate\" title=\"${preview.name}\">${preview.name}<\/p>\r\n <\/div>\r\n `).join('');\r\n videoUploadPreview.classList.remove('hidden');\r\n }\r\n \r\n \/\/ Salva estado antes de abrir qualquer seletor de arquivo de v\u00eddeo\r\n function _saveVideoModalState() {\r\n saveRegisterDraft();\r\n try {\r\n const targetData = (currentVideoTarget && currentVideoTarget.type)\r\n ? { type: currentVideoTarget.type }\r\n : { type: 'product-video' };\r\n localStorage.setItem(MODAL_STATE_KEY, JSON.stringify({ modal: 'video', target: targetData }));\r\n } catch (e) { console.warn('[UPLOAD] Falha ao salvar estado do modal:', e); }\r\n }\r\n\r\n \/\/ L\u00f3gica de processamento compartilhada: c\u00e2mera e galeria usam a mesma fun\u00e7\u00e3o\r\n async function _handleVideoFiles(selectedFiles) {\r\n if (!window.UploadManager || typeof window.UploadManager.validateFiles !== 'function') {\r\n console.error('[UPLOAD] UploadManager n\u00e3o est\u00e1 dispon\u00edvel.');\r\n videoUploadStatus.textContent = '\u2717 Erro interno: m\u00f3dulo de upload n\u00e3o carregado. Recarregue a p\u00e1gina.';\r\n videoUploadStatus.className = 'text-sm text-red-600 text-center';\r\n return;\r\n }\r\n if (!selectedFiles || selectedFiles.length === 0) return;\r\n\r\n \/\/ Garantir que a aba de upload est\u00e1 vis\u00edvel\r\n switchToVideoUploadTab();\r\n\r\n const remainingSlots = Math.max(0, 10 - productPhotos.length);\r\n if (remainingSlots === 0) {\r\n videoUploadStatus.textContent = 'Limite de 10 m\u00eddias atingido para este retorno.';\r\n videoUploadStatus.className = 'text-sm text-red-600 text-center';\r\n return;\r\n }\r\n\r\n const files = selectedFiles.slice(0, remainingSlots);\r\n const { valid, invalid } = window.UploadManager.validateFiles(files, 'video', window.UploadManager.limits.videoMB);\r\n\r\n if (invalid.length > 0) {\r\n console.warn('[UPLOAD][VIDEO] arquivos inv\u00e1lidos:', invalid);\r\n videoUploadStatus.textContent = `Alguns arquivos foram ignorados: ${invalid.map(item => item.file.name).join(', ')}`;\r\n videoUploadStatus.className = 'text-sm text-yellow-600 text-center';\r\n }\r\n if (valid.length === 0) {\r\n videoUploadStatus.textContent = `Nenhum v\u00eddeo v\u00e1lido. Tipos: ${window.UploadManager.accepted.video.join(', ')} | M\u00e1x ${window.UploadManager.limits.videoMB}MB`;\r\n videoUploadStatus.className = 'text-sm text-red-600 text-center';\r\n return;\r\n }\r\n\r\n try {\r\n const previews = await window.UploadManager.createPreviews(valid, 'video');\r\n renderVideoUploadPreviews(previews);\r\n videoUploadProgress.classList.remove('hidden');\r\n videoUploadStatus.textContent = `Enviando ${valid.length} v\u00eddeo(s)...`;\r\n videoUploadStatus.className = 'text-sm text-blue-600 text-center';\r\n\r\n uploadedVideoUrls = await window.UploadManager.uploadFiles({\r\n files: valid,\r\n mediaType: 'video',\r\n endpoint: APPWRITE_ENDPOINT,\r\n projectId: APPWRITE_PROJECT_ID,\r\n bucketId: BUCKET_ID,\r\n onProgress: (percent, index, total, fileName) => {\r\n videoUploadProgressBar.style.width = `${percent}%`;\r\n videoUploadProgressText.textContent = fileName\r\n ? `Enviando ${index + 1}\/${total}: ${fileName} (${percent}%)`\r\n : `Upload conclu\u00eddo (${percent}%)`;\r\n }\r\n });\r\n\r\n videoUploadStatus.textContent = `\u2713 ${uploadedVideoUrls.length} v\u00eddeo(s) carregado(s) com sucesso!`;\r\n videoUploadStatus.className = 'text-sm text-green-600 text-center font-semibold';\r\n } catch (error) {\r\n console.error('[UPLOAD][VIDEO] Erro ao fazer upload:', error);\r\n videoUploadStatus.textContent = '\u2717 Erro ao carregar v\u00eddeo: ' + error.message;\r\n videoUploadStatus.className = 'text-sm text-red-600 text-center';\r\n uploadedVideoUrls = [];\r\n videoUploadProgress.classList.add('hidden');\r\n }\r\n }\r\n\r\n \/\/ Bot\u00e3o C\u00e2mera \u2192 abre c\u00e2mera diretamente (capture)\r\n videoCameraBtn.addEventListener('click', () => {\r\n videoCameraInput.value = '';\r\n _saveVideoModalState();\r\n videoCameraInput.click();\r\n });\r\n\r\n \/\/ Bot\u00e3o Galeria \u2192 abre seletor de arquivos\r\n videoGalleryBtn.addEventListener('click', () => {\r\n videoFileInput.value = '';\r\n _saveVideoModalState();\r\n videoFileInput.click();\r\n });\r\n\r\n \/\/ Ambos os inputs de v\u00eddeo usam o mesmo handler\r\n videoFileInput.addEventListener('change', (e) => _handleVideoFiles(Array.from(e.target.files || [])));\r\n videoCameraInput.addEventListener('change', (e) => _handleVideoFiles(Array.from(e.target.files || [])));\r\n \r\n closeVideoModal.addEventListener('click', () => {\r\n videoCaptureModal.classList.add('hidden');\r\n currentVideoTarget = null;\r\n uploadedVideoUrls = [];\r\n try { localStorage.removeItem(MODAL_STATE_KEY); } catch (e) {}\r\n if (window.UploadManager) window.UploadManager.revokeAllPendingObjectUrls();\r\n });\r\n \r\n confirmVideoBtn.addEventListener('click', () => {\r\n const urlsToApply = [];\r\n \r\n \/\/ Verificar qual aba est\u00e1 ativa\r\n if (!videoUrlContent.classList.contains('hidden')) {\r\n \/\/ Aba URL\r\n const typedUrl = videoUrlInput.value.trim();\r\n if (typedUrl) urlsToApply.push({ url: typedUrl, type: 'video' });\r\n } else if (uploadedVideoUrls.length > 0) {\r\n \/\/ Aba Upload\r\n urlsToApply.push(...uploadedVideoUrls.map(item => ({ url: item.url, type: 'video' })));\r\n }\r\n \r\n if (urlsToApply.length > 0 && currentVideoTarget) {\r\n if (currentVideoTarget.type === 'product-video') {\r\n const availableSlots = Math.max(0, 10 - productPhotos.length);\r\n productPhotos.push(...urlsToApply.slice(0, availableSlots));\r\n renderProductPhotos();\r\n } else if (currentVideoTarget.type === 'edit-media') {\r\n editProductPhotos.push(...urlsToApply);\r\n renderEditMedia();\r\n }\r\n }\r\n \r\n videoCaptureModal.classList.add('hidden');\r\n currentVideoTarget = null;\r\n uploadedVideoUrls = [];\r\n try { localStorage.removeItem(MODAL_STATE_KEY); } catch (e) {}\r\n if (window.UploadManager) window.UploadManager.revokeAllPendingObjectUrls();\r\n saveRegisterDraft();\r\n });\r\n\r\n \/\/ ===== RENDERIZAR RETORNOS =====\r\n function renderReturns() {\r\n allProductsList.innerHTML = '';\r\n \r\n state.returned.forEach(returnData => {\r\n const card = createReturnCard(returnData);\r\n allProductsList.appendChild(card);\r\n });\r\n }\r\n\r\n function renderArchived() {\r\n archivedProductsList.innerHTML = '';\r\n \r\n state.archived.forEach(returnData => {\r\n const card = createReturnCard(returnData, true);\r\n archivedProductsList.appendChild(card);\r\n });\r\n }\r\n\r\n function createReturnCard(returnData, isArchived = false, showDownload = false) {\r\n const card = document.createElement('div');\r\n card.className = 'product-card card-animation';\r\n \r\n const statusBadges = returnData.products?.map(p => `\r\n <span class=\"status-badge status-${p.status}\">${p.status}<\/span>\r\n `).join(' ') || '';\r\n \r\n const productsHTML = returnData.products?.map(p => `\r\n <div class=\"product-item\">\r\n <div class=\"flex gap-2\">\r\n ${p.photo ? `<img decoding=\"async\" src=\"${p.photo}\" class=\"product-image\" onclick=\"viewImage('${p.photo}')\" title=\"Clique para ampliar - Foto do Produto\">` : ''}\r\n ${p.labelPhoto ? `\r\n <div class=\"relative\">\r\n <img decoding=\"async\" src=\"${p.labelPhoto}\" class=\"product-image border-2 border-yellow-400\" onclick=\"viewImage('${p.labelPhoto}')\" title=\"Clique para ampliar - Foto da Etiqueta\">\r\n <div class=\"absolute -top-1 -right-1 bg-yellow-400 rounded-full w-4 h-4 flex items-center justify-center\">\r\n <i class=\"fas fa-tag text-white text-xs\"><\/i>\r\n <\/div>\r\n <\/div>\r\n ` : ''}\r\n <\/div>\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"product-name truncate\">${p.name}<\/div>\r\n <div class=\"product-quantity text-xs sm:text-sm\">Qtd: ${p.quantity}<\/div>\r\n ${p.labelPhoto ? '<div class=\"text-xs text-yellow-600\"><i class=\"fas fa-tag mr-1\"><\/i>Com etiqueta<\/div>' : ''}\r\n <\/div>\r\n <span class=\"status-badge status-${p.status}\">${p.status}<\/span>\r\n <\/div>\r\n `).join('') || '';\r\n \r\n const photosHTML = returnData.productPhotos?.length > 0 ? `\r\n <div class=\"product-photos-section\">\r\n <div class=\"photos-grid\">\r\n ${returnData.productPhotos.map((photoItem, index) => {\r\n const photo = photoItem.url || photoItem; \/\/ Compatibilidade\r\n const type = photoItem.type || detectMediaType(photo);\r\n console.log('Renderizando m\u00eddia:', { photo, type, photoItem });\r\n \r\n if (type === 'video') {\r\n return `\r\n <div class=\"photo-item relative group\" onclick=\"viewVideo('${photo}')\">\r\n <video src=\"${photo}\" class=\"w-full h-full object-cover\" preload=\"metadata\"><\/video>\r\n <div class=\"absolute inset-0 flex items-center justify-center pointer-events-none bg-black bg-opacity-30\">\r\n <i class=\"fas fa-play-circle text-white text-xl sm:text-2xl opacity-90 drop-shadow-lg\"><\/i>\r\n <\/div>\r\n ${showDownload ? `\r\n <button onclick=\"event.stopPropagation(); downloadMedia('${photo}', 'video_${index + 1}.mp4')\" \r\n class=\"absolute top-1 right-1 bg-blue-500 hover:bg-blue-600 text-white rounded-full p-2 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-auto z-10\"\r\n title=\"Baixar v\u00eddeo\">\r\n <i class=\"fas fa-download text-xs\"><\/i>\r\n <\/button>\r\n ` : ''}\r\n <\/div>\r\n `;\r\n } else {\r\n return `\r\n <div class=\"photo-item relative group\" onclick=\"viewImage('${photo}')\">\r\n <img decoding=\"async\" src=\"${photo}\" alt=\"Foto\" onerror=\"this.src='https:\/\/placehold.co\/200x200\/e0e0e0\/999999?text=Erro'\">\r\n ${showDownload ? `\r\n <button onclick=\"event.stopPropagation(); downloadMedia('${photo}', 'foto_${index + 1}.jpg')\" \r\n class=\"absolute top-1 right-1 bg-blue-500 hover:bg-blue-600 text-white rounded-full p-2 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-auto z-10\"\r\n title=\"Baixar foto\">\r\n <i class=\"fas fa-download text-xs\"><\/i>\r\n <\/button>\r\n ` : ''}\r\n <\/div>\r\n `;\r\n }\r\n }).join('')}\r\n <\/div>\r\n <\/div>\r\n ` : '';\r\n \r\n card.innerHTML = `\r\n <div class=\"card-header\">\r\n <div class=\"flex flex-col sm:flex-row justify-between items-start gap-2 sm:gap-0\">\r\n <div class=\"flex-1\">\r\n <h3 class=\"text-lg sm:text-xl font-bold text-gray-900\">${returnData.code}<\/h3>\r\n <p class=\"text-xs sm:text-sm text-gray-600 mt-1\">\r\n <i class=\"fas fa-calendar mr-1\"><\/i>\r\n ${new Date(returnData.date).toLocaleDateString('pt-BR')}\r\n <\/p>\r\n <\/div>\r\n <div class=\"text-left sm:text-right w-full sm:w-auto\">\r\n <div class=\"text-xs sm:text-sm text-gray-600\">Vendedor: ${returnData.sellerName}<\/div>\r\n <div class=\"text-xs text-gray-500\">${returnData.salesChannel}<\/div>\r\n <\/div>\r\n <\/div>\r\n ${returnData.observations ? `<p class=\"text-xs sm:text-sm text-gray-600 mt-2\">${returnData.observations}<\/p>` : ''}\r\n <\/div>\r\n \r\n <div class=\"card-body\">\r\n ${productsHTML}\r\n ${photosHTML}\r\n <\/div>\r\n \r\n <div class=\"card-footer\">\r\n ${!isArchived ? `\r\n <button onclick=\"archiveReturn('${returnData.$id}')\" class=\"btn-finish min-h-[48px]\">\r\n <i class=\"fas fa-archive mr-2\"><\/i>Arquivar\r\n <\/button>\r\n ` : `\r\n <div class=\"space-y-2\">\r\n <button onclick=\"shareReturn('${returnData.$id}')\" class=\"w-full bg-blue-500 hover:bg-blue-600 text-white py-3 px-4 rounded-lg font-semibold min-h-[48px]\">\r\n <i class=\"fas fa-share-alt mr-2\"><\/i>Compartilhar\r\n <\/button>\r\n <div class=\"btn-actions-group\">\r\n <button onclick=\"unarchiveReturn('${returnData.$id}')\" class=\"bg-green-500 hover:bg-green-600 text-white py-3 px-4 rounded-lg font-semibold min-h-[48px]\">\r\n <i class=\"fas fa-undo mr-2\"><\/i>Desarquivar\r\n <\/button>\r\n <button onclick=\"editReturn('${returnData.$id}')\" class=\"btn-edit py-3 px-4 rounded-lg font-semibold min-h-[48px]\">\r\n <i class=\"fas fa-edit mr-2\"><\/i>Editar\r\n <\/button>\r\n <button onclick=\"deleteReturn('${returnData.$id}')\" class=\"btn-delete py-3 px-4 rounded-lg font-semibold min-h-[48px]\">\r\n <i class=\"fas fa-trash mr-2\"><\/i>Excluir\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n `}\r\n <\/div>\r\n `;\r\n \r\n return card;\r\n }\r\n\r\n window.archiveReturn = async function(returnId) {\r\n if (!confirm('Deseja arquivar este retorno?')) return;\r\n \r\n try {\r\n await databases.updateDocument(\r\n DATABASE_ID,\r\n COLLECTIONS.returnedProducts,\r\n returnId,\r\n { archived: true }\r\n );\r\n await loadAllData();\r\n } catch (error) {\r\n alert('Erro ao arquivar: ' + error.message);\r\n }\r\n };\r\n\r\n window.unarchiveReturn = async function(returnId) {\r\n if (!confirm('Deseja desarquivar este retorno?')) return;\r\n \r\n try {\r\n await databases.updateDocument(\r\n DATABASE_ID,\r\n COLLECTIONS.returnedProducts,\r\n returnId,\r\n { archived: false }\r\n );\r\n await loadAllData();\r\n } catch (error) {\r\n alert('Erro ao desarquivar: ' + error.message);\r\n }\r\n };\r\n\r\n \/\/ ===== CAT\u00c1LOGO =====\r\n addProductForm.addEventListener('submit', async (e) => {\r\n e.preventDefault();\r\n addProductFeedback.textContent = '';\r\n \r\n const name = newProductNameInput.value.trim();\r\n const photo = newProductPhotoInput.value.trim();\r\n \r\n if (!name || !photo) {\r\n addProductFeedback.textContent = 'Nome e URL s\u00e3o obrigat\u00f3rios.';\r\n addProductFeedback.className = 'md:col-span-2 text-sm text-center text-red-500';\r\n return;\r\n }\r\n \r\n try {\r\n await databases.createDocument(\r\n DATABASE_ID,\r\n COLLECTIONS.productCatalog,\r\n ID.unique(),\r\n {\r\n name: name,\r\n photo: photo,\r\n createdBy_email: currentUser.email,\r\n createdBy_uid: currentUser.$id,\r\n createdBy_displayName: currentUser.name || currentUser.email,\r\n createdAt: new Date().toISOString()\r\n }\r\n );\r\n \r\n addProductForm.reset();\r\n addProductFeedback.textContent = 'Produto adicionado!';\r\n addProductFeedback.className = 'md:col-span-2 text-sm text-center text-green-600';\r\n await loadCatalog();\r\n \r\n setTimeout(() => { addProductFeedback.textContent = ''; }, 3000);\r\n } catch (error) {\r\n addProductFeedback.textContent = 'Erro ao salvar: ' + error.message;\r\n addProductFeedback.className = 'md:col-span-2 text-sm text-center text-red-500';\r\n }\r\n });\r\n\r\n function renderCatalog() {\r\n console.log('Renderizando cat\u00e1logo com', state.products.length, 'produtos');\r\n \r\n if (!productCatalogList) {\r\n console.error('ERRO: elemento product-catalog-list n\u00e3o encontrado!');\r\n return;\r\n }\r\n \r\n productCatalogList.innerHTML = '';\r\n \r\n if (state.products.length === 0) {\r\n productCatalogList.innerHTML = '<p class=\"col-span-2 sm:col-span-3 md:col-span-4 text-center text-gray-500 py-8\">Nenhum produto no cat\u00e1logo. Adicione produtos acima.<\/p>';\r\n document.getElementById('product-count').textContent = '0';\r\n return;\r\n }\r\n \r\n state.products.forEach((product, index) => {\r\n const div = document.createElement('div');\r\n div.className = 'border rounded-lg p-2 sm:p-4 hover:shadow-lg transition';\r\n div.innerHTML = `\r\n <img decoding=\"async\" src=\"${product.photo}\" class=\"w-full h-24 sm:h-32 object-cover rounded-lg mb-2 cursor-pointer\"\r\n onclick=\"viewImage('${product.photo}')\" onerror=\"this.src='https:\/\/placehold.co\/200x200\/e0e0e0\/999999?text=Sem+Imagem'\">\r\n <p class=\"font-semibold text-xs sm:text-sm truncate\" title=\"${product.name}\">${product.name}<\/p>\r\n <button onclick=\"deleteProduct('${product.$id}')\" class=\"text-red-500 text-xs mt-2 hover:text-red-700 min-h-[36px] w-full sm:w-auto\">\r\n <i class=\"fas fa-trash mr-1\"><\/i>Excluir\r\n <\/button>\r\n `;\r\n productCatalogList.appendChild(div);\r\n console.log(`Produto ${index + 1} adicionado:`, product.name);\r\n });\r\n \r\n document.getElementById('product-count').textContent = state.products.length;\r\n console.log('Cat\u00e1logo renderizado com sucesso -', state.products.length, 'produtos exibidos');\r\n }\r\n\r\n window.deleteProduct = async function(productId) {\r\n if (!confirm('Deseja excluir este produto?')) return;\r\n \r\n try {\r\n await databases.deleteDocument(DATABASE_ID, COLLECTIONS.productCatalog, productId);\r\n await loadCatalog();\r\n } catch (error) {\r\n alert('Erro ao excluir: ' + error.message);\r\n }\r\n };\r\n \r\n \/\/ ===== UPLOAD DE PLANILHA =====\r\n downloadTemplateBtn.addEventListener('click', () => {\r\n const wb = XLSX.utils.book_new();\r\n const ws = XLSX.utils.aoa_to_sheet([\r\n ['Nome do Produto', 'URL da Foto'],\r\n ['Exemplo: Camiseta Azul', 'https:\/\/exemplo.com\/foto.jpg'],\r\n ['Cal\u00e7a Jeans', 'https:\/\/exemplo.com\/calca.jpg']\r\n ]);\r\n XLSX.utils.book_append_sheet(wb, ws, 'Produtos');\r\n XLSX.writeFile(wb, 'modelo_catalogo_produtos.xlsx');\r\n });\r\n \r\n \/\/ Fun\u00e7\u00e3o auxiliar para aguardar (delay)\r\n function sleep(ms) {\r\n return new Promise(resolve => setTimeout(resolve, ms));\r\n }\r\n \r\n \/\/ Fun\u00e7\u00e3o para criar produto com retry\r\n async function createProductWithRetry(productData, maxRetries = 3) {\r\n for (let attempt = 1; attempt <= maxRetries; attempt++) {\r\n try {\r\n await databases.createDocument(\r\n DATABASE_ID,\r\n COLLECTIONS.productCatalog,\r\n ID.unique(),\r\n productData\r\n );\r\n return { success: true };\r\n } catch (error) {\r\n if (error.code === 429 && attempt < maxRetries) {\r\n \/\/ Rate limit - aguardar progressivamente mais tempo\r\n const waitTime = attempt * 2000; \/\/ 2s, 4s, 6s\r\n console.log(`Rate limit atingido. Aguardando ${waitTime\/1000}s antes da tentativa ${attempt + 1}...`);\r\n await sleep(waitTime);\r\n } else {\r\n return { success: false, error: error.message };\r\n }\r\n }\r\n }\r\n return { success: false, error: 'M\u00e1ximo de tentativas excedido' };\r\n }\r\n \r\n excelUpload.addEventListener('change', async (e) => {\r\n const file = e.target.files[0];\r\n if (!file) return;\r\n \r\n uploadExcelFeedback.textContent = 'Processando planilha...';\r\n uploadExcelFeedback.className = 'text-xs sm:text-sm mt-2 text-blue-600';\r\n \r\n try {\r\n const data = await file.arrayBuffer();\r\n const workbook = XLSX.read(data);\r\n const worksheet = workbook.Sheets[workbook.SheetNames[0]];\r\n const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });\r\n \r\n let successCount = 0;\r\n let errorCount = 0;\r\n const totalRows = jsonData.length - 1; \/\/ Excluir cabe\u00e7alho\r\n \r\n \/\/ Pular primeira linha (cabe\u00e7alho)\r\n for (let i = 1; i < jsonData.length; i++) {\r\n const row = jsonData[i];\r\n const name = row[0]?.toString().trim();\r\n const photo = row[1]?.toString().trim();\r\n \r\n if (!name || !photo) continue;\r\n \r\n \/\/ Atualizar progresso\r\n uploadExcelFeedback.textContent = `Importando ${i}\/${totalRows}: ${name}...`;\r\n \r\n const result = await createProductWithRetry({\r\n name: name,\r\n photo: photo,\r\n createdBy_email: currentUser.email,\r\n createdBy_uid: currentUser.$id,\r\n createdBy_displayName: currentUser.name || currentUser.email,\r\n createdAt: new Date().toISOString()\r\n });\r\n \r\n if (result.success) {\r\n successCount++;\r\n } else {\r\n console.error(`Erro ao adicionar produto \"${name}\":`, result.error);\r\n errorCount++;\r\n }\r\n \r\n \/\/ Delay entre produtos para evitar rate limit (500ms)\r\n await sleep(500);\r\n }\r\n \r\n console.log('Upload conclu\u00eddo. Recarregando cat\u00e1logo...');\r\n \r\n \/\/ Recarregar cat\u00e1logo e for\u00e7ar renderiza\u00e7\u00e3o\r\n await loadCatalog();\r\n \r\n \/\/ Scroll suave at\u00e9 a lista de produtos (se n\u00e3o estiver vis\u00edvel)\r\n setTimeout(() => {\r\n const catalogList = document.getElementById('product-catalog-list');\r\n if (catalogList && catalogList.children.length > 0) {\r\n catalogList.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\r\n }\r\n }, 300);\r\n \r\n uploadExcelFeedback.textContent = `\u2713 ${successCount} produtos importados${errorCount > 0 ? ` | ${errorCount} erro(s)` : '!'} - Cat\u00e1logo atualizado!`;\r\n uploadExcelFeedback.className = 'text-xs sm:text-sm mt-2 text-green-600 font-semibold';\r\n \r\n excelUpload.value = '';\r\n \r\n setTimeout(() => { uploadExcelFeedback.textContent = ''; }, 5000);\r\n } catch (error) {\r\n console.error('Erro no upload:', error);\r\n uploadExcelFeedback.textContent = '\u2717 Erro ao processar planilha: ' + error.message;\r\n uploadExcelFeedback.className = 'text-xs sm:text-sm mt-2 text-red-600';\r\n }\r\n });\r\n \r\n \/\/ ===== EDITAR RETORNO =====\r\n window.editReturn = async function(returnId) {\r\n const returnData = state.archived.find(r => r.$id === returnId);\r\n if (!returnData) {\r\n alert('Retorno n\u00e3o encontrado');\r\n return;\r\n }\r\n \r\n \/\/ Armazenar dados globalmente\r\n editingReturnId = returnId;\r\n editingReturnData = JSON.parse(JSON.stringify(returnData)); \/\/ Clone profundo\r\n editProductPhotos = returnData.productPhotos ? JSON.parse(JSON.stringify(returnData.productPhotos)) : [];\r\n \r\n \/\/ Preencher formul\u00e1rio\r\n editCodeInput.value = returnData.code || '';\r\n editSellerInput.value = returnData.sellerName || '';\r\n editObservationsInput.value = returnData.observations || '';\r\n \r\n \/\/ Renderizar produtos\r\n renderEditProducts();\r\n \r\n \/\/ Renderizar fotos e v\u00eddeos\r\n renderEditMedia();\r\n \r\n \/\/ Mostrar modal\r\n editModal.classList.remove('hidden');\r\n };\r\n \r\n function renderEditProducts() {\r\n editProductsList.innerHTML = '';\r\n \r\n if (!editingReturnData.products || editingReturnData.products.length === 0) {\r\n editProductsList.innerHTML = '<p class=\"text-gray-500 text-sm\">Nenhum produto neste retorno<\/p>';\r\n return;\r\n }\r\n \r\n editingReturnData.products.forEach((product, index) => {\r\n const div = document.createElement('div');\r\n div.className = 'border rounded-lg p-3 bg-gray-50';\r\n div.innerHTML = `\r\n <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-3\">\r\n <div class=\"sm:col-span-2\">\r\n <label class=\"block text-xs font-medium text-gray-600 mb-1\">Produto<\/label>\r\n <p class=\"font-semibold\">${product.name}<\/p>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs font-medium text-gray-600 mb-1\">Quantidade<\/label>\r\n <p class=\"font-semibold\">${product.quantity}<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-3\">\r\n <label class=\"block text-xs font-medium text-gray-600 mb-1\">Status<\/label>\r\n <select data-index=\"${index}\" class=\"edit-product-status w-full px-3 py-2 border rounded-lg text-sm\">\r\n <option value=\"bom\" ${product.status === 'bom' ? 'selected' : ''}>Bom<\/option>\r\n <option value=\"ruim\" ${product.status === 'ruim' ? 'selected' : ''}>Ruim<\/option>\r\n <option value=\"quebrado\" ${product.status === 'quebrado' ? 'selected' : ''}>Quebrado<\/option>\r\n <option value=\"itens-faltando\" ${product.status === 'itens-faltando' ? 'selected' : ''}>Itens faltando<\/option>\r\n <option value=\"ao-remetente\" ${product.status === 'ao-remetente' ? 'selected' : ''}>Ao remetente<\/option>\r\n <\/select>\r\n <\/div>\r\n `;\r\n editProductsList.appendChild(div);\r\n });\r\n \r\n \/\/ Adicionar event listeners para os selects de status\r\n document.querySelectorAll('.edit-product-status').forEach(select => {\r\n select.addEventListener('change', (e) => {\r\n const index = parseInt(e.target.getAttribute('data-index'));\r\n editingReturnData.products[index].status = e.target.value;\r\n });\r\n });\r\n }\r\n \r\n function renderEditMedia() {\r\n editMediaGrid.innerHTML = '';\r\n \r\n if (!editProductPhotos || editProductPhotos.length === 0) {\r\n editMediaGrid.innerHTML = '<p class=\"col-span-full text-gray-500 text-sm text-center py-4\">Nenhuma foto ou v\u00eddeo<\/p>';\r\n return;\r\n }\r\n \r\n editProductPhotos.forEach((photoItem, index) => {\r\n const photo = photoItem.url || photoItem;\r\n const type = photoItem.type || detectMediaType(photo);\r\n \r\n const div = document.createElement('div');\r\n div.className = 'relative group';\r\n \r\n if (type === 'video') {\r\n div.innerHTML = `\r\n <div class=\"relative aspect-square cursor-pointer\" onclick=\"viewVideo('${photo}')\">\r\n <video src=\"${photo}\" class=\"w-full h-full object-cover rounded-lg\" preload=\"metadata\"><\/video>\r\n <div class=\"absolute inset-0 flex items-center justify-center bg-black bg-opacity-30 rounded-lg\">\r\n <i class=\"fas fa-play-circle text-white text-2xl\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"removeEditMedia(${index})\" class=\"absolute -top-2 -right-2 bg-red-500 hover:bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity\">\r\n <i class=\"fas fa-times text-xs\"><\/i>\r\n <\/button>\r\n `;\r\n } else {\r\n div.innerHTML = `\r\n <div class=\"relative aspect-square cursor-pointer\" onclick=\"viewImage('${photo}')\">\r\n <img decoding=\"async\" src=\"${photo}\" class=\"w-full h-full object-cover rounded-lg\" onerror=\"this.src='https:\/\/placehold.co\/200x200\/e0e0e0\/999999?text=Erro'\">\r\n <\/div>\r\n <button onclick=\"removeEditMedia(${index})\" class=\"absolute -top-2 -right-2 bg-red-500 hover:bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity\">\r\n <i class=\"fas fa-times text-xs\"><\/i>\r\n <\/button>\r\n `;\r\n }\r\n \r\n editMediaGrid.appendChild(div);\r\n });\r\n }\r\n \r\n window.removeEditMedia = function(index) {\r\n if (confirm('Deseja remover esta m\u00eddia?')) {\r\n editProductPhotos.splice(index, 1);\r\n renderEditMedia();\r\n }\r\n };\r\n \r\n \/\/ Event listeners para adicionar m\u00eddia na edi\u00e7\u00e3o\r\n editAddPhotoBtn.addEventListener('click', () => {\r\n currentImageTarget = { type: 'edit-media' };\r\n openImageCaptureModal();\r\n });\r\n \r\n editAddVideoBtn.addEventListener('click', () => {\r\n currentVideoTarget = { type: 'edit-media' };\r\n openVideoCaptureModal();\r\n });\r\n \r\n \/\/ Fechar modal de edi\u00e7\u00e3o\r\n closeEditModal.addEventListener('click', () => {\r\n editModal.classList.add('hidden');\r\n editingReturnId = null;\r\n editingReturnData = null;\r\n editProductPhotos = [];\r\n });\r\n \r\n cancelEditBtn.addEventListener('click', () => {\r\n editModal.classList.add('hidden');\r\n editingReturnId = null;\r\n editingReturnData = null;\r\n editProductPhotos = [];\r\n });\r\n \r\n \/\/ Salvar altera\u00e7\u00f5es\r\n editReturnForm.addEventListener('submit', async (e) => {\r\n e.preventDefault();\r\n \r\n if (!editingReturnId) {\r\n alert('Erro: ID do retorno n\u00e3o encontrado');\r\n return;\r\n }\r\n \r\n \/\/ Desabilitar bot\u00e3o e mostrar loading\r\n saveEditBtn.disabled = true;\r\n saveEditBtn.innerHTML = '<i class=\"fas fa-spinner fa-spin mr-2\"><\/i>Salvando...';\r\n editSaveFeedback.textContent = 'Atualizando dados...';\r\n editSaveFeedback.className = 'text-sm text-center mt-2 text-blue-600';\r\n \r\n try {\r\n \/\/ 1. Atualizar documento principal do retorno\r\n editSaveFeedback.textContent = '1\/3 - Atualizando informa\u00e7\u00f5es b\u00e1sicas...';\r\n await databases.updateDocument(\r\n DATABASE_ID,\r\n COLLECTIONS.returnedProducts,\r\n editingReturnId,\r\n {\r\n code: editCodeInput.value.trim(),\r\n sellerName: editSellerInput.value.trim(),\r\n observations: editObservationsInput.value.trim()\r\n }\r\n );\r\n \r\n \/\/ 2. Atualizar status dos produtos\r\n editSaveFeedback.textContent = '2\/3 - Atualizando status dos produtos...';\r\n for (let product of editingReturnData.products) {\r\n if (product.$id) {\r\n await databases.updateDocument(\r\n DATABASE_ID,\r\n COLLECTIONS.returnProducts,\r\n product.$id,\r\n {\r\n status: product.status\r\n }\r\n );\r\n }\r\n }\r\n \r\n \/\/ 3. Gerenciar fotos e v\u00eddeos\r\n editSaveFeedback.textContent = '3\/3 - Atualizando fotos e v\u00eddeos...';\r\n \r\n \/\/ Carregar fotos atuais do banco\r\n const currentPhotosResponse = await databases.listDocuments(\r\n DATABASE_ID,\r\n COLLECTIONS.returnProductPhotos,\r\n [\r\n Query.equal('returnId', editingReturnId),\r\n Query.limit(500)\r\n ]\r\n );\r\n \r\n const currentPhotos = currentPhotosResponse.documents;\r\n \r\n \/\/ Deletar fotos que foram removidas\r\n const currentUrls = editProductPhotos.map(p => p.url || p);\r\n for (let photo of currentPhotos) {\r\n if (!currentUrls.includes(photo.photoUrl)) {\r\n await databases.deleteDocument(\r\n DATABASE_ID,\r\n COLLECTIONS.returnProductPhotos,\r\n photo.$id\r\n );\r\n }\r\n }\r\n \r\n \/\/ Adicionar novas fotos\r\n const existingUrls = currentPhotos.map(p => p.photoUrl);\r\n for (let i = 0; i < editProductPhotos.length; i++) {\r\n const item = editProductPhotos[i];\r\n const url = item.url || item;\r\n \r\n if (!existingUrls.includes(url)) {\r\n await databases.createDocument(\r\n DATABASE_ID,\r\n COLLECTIONS.returnProductPhotos,\r\n ID.unique(),\r\n {\r\n returnId: editingReturnId,\r\n photoUrl: url,\r\n order: i,\r\n uploadedAt: new Date().toISOString()\r\n }\r\n );\r\n }\r\n }\r\n \r\n editSaveFeedback.textContent = '\u2713 Retorno atualizado com sucesso!';\r\n editSaveFeedback.className = 'text-sm text-center mt-2 text-green-600 font-semibold';\r\n \r\n setTimeout(() => {\r\n editModal.classList.add('hidden');\r\n editingReturnId = null;\r\n editingReturnData = null;\r\n editProductPhotos = [];\r\n saveEditBtn.disabled = false;\r\n saveEditBtn.innerHTML = '<i class=\"fas fa-save mr-2\"><\/i>Salvar Altera\u00e7\u00f5es';\r\n editSaveFeedback.textContent = '';\r\n }, 1500);\r\n \r\n await loadAllData();\r\n } catch (error) {\r\n console.error('Erro completo:', error);\r\n editSaveFeedback.textContent = '\u2717 Erro ao salvar: ' + error.message;\r\n editSaveFeedback.className = 'text-sm text-center mt-2 text-red-600';\r\n saveEditBtn.disabled = false;\r\n saveEditBtn.innerHTML = '<i class=\"fas fa-save mr-2\"><\/i>Salvar Altera\u00e7\u00f5es';\r\n }\r\n });\r\n \r\n \/\/ ===== SCANNER DE C\u00d3DIGO DE BARRAS =====\r\n scanBarcodeBtn.addEventListener('click', () => {\r\n openBarcodeScanner();\r\n });\r\n \r\n async function openBarcodeScanner() {\r\n barcodeScannerModal.classList.remove('hidden');\r\n barcodeResult.classList.add('hidden');\r\n useBarcodeBtn.classList.add('hidden');\r\n retryScanBtn.classList.add('hidden');\r\n barcodeInstructions.classList.remove('hidden');\r\n barcodeDetected = '';\r\n \r\n try {\r\n \/\/ Tentar usar jsQR primeiro (mais simples e confi\u00e1vel)\r\n barcodeStream = await navigator.mediaDevices.getUserMedia({\r\n video: { \r\n facingMode: 'environment',\r\n width: { ideal: 1280 },\r\n height: { ideal: 720 }\r\n }\r\n });\r\n \r\n barcodeVideo.srcObject = barcodeStream;\r\n \r\n \/\/ Aguardar um pouco para a c\u00e2mera inicializar\r\n await new Promise(resolve => setTimeout(resolve, 500));\r\n \r\n \/\/ Iniciar scanning\r\n requestAnimationFrame(scanBarcodeWithJsQR);\r\n \r\n } catch (error) {\r\n console.error('Erro ao acessar c\u00e2mera:', error);\r\n alert('N\u00e3o foi poss\u00edvel acessar a c\u00e2mera. Verifique:\\n- Permiss\u00f5es da c\u00e2mera\\n- Se outra aplica\u00e7\u00e3o est\u00e1 usando a c\u00e2mera\\n- Se a c\u00e2mera est\u00e1 conectada');\r\n closeBarcodeScanner();\r\n }\r\n }\r\n \r\n function scanBarcodeWithJsQR() {\r\n if (!barcodeScannerModal.classList.contains('hidden') && !barcodeDetected) {\r\n if (barcodeVideo.readyState === barcodeVideo.HAVE_ENOUGH_DATA) {\r\n barcodeCanvas.width = barcodeVideo.videoWidth;\r\n barcodeCanvas.height = barcodeVideo.videoHeight;\r\n \r\n const ctx = barcodeCanvas.getContext('2d');\r\n ctx.drawImage(barcodeVideo, 0, 0);\r\n \r\n const imageData = ctx.getImageData(0, 0, barcodeCanvas.width, barcodeCanvas.height);\r\n \r\n \/\/ Tentar detectar QR Code\r\n const code = jsQR(imageData.data, imageData.width, imageData.height);\r\n if (code && code.data) {\r\n barcodeDetected = code.data;\r\n barcodeValue.textContent = barcodeDetected;\r\n barcodeResult.classList.remove('hidden');\r\n useBarcodeBtn.classList.remove('hidden');\r\n retryScanBtn.classList.remove('hidden');\r\n barcodeInstructions.classList.add('hidden');\r\n return;\r\n }\r\n }\r\n requestAnimationFrame(scanBarcodeWithJsQR);\r\n }\r\n }\r\n \r\n function scanBarcode() {\r\n if (barcodeVideo.readyState === barcodeVideo.HAVE_ENOUGH_DATA) {\r\n barcodeCanvas.height = barcodeVideo.videoHeight;\r\n barcodeCanvas.width = barcodeVideo.videoWidth;\r\n \r\n const context = barcodeCanvas.getContext('2d');\r\n context.drawImage(barcodeVideo, 0, 0, barcodeCanvas.width, barcodeCanvas.height);\r\n \r\n const imageData = context.getImageData(0, 0, barcodeCanvas.width, barcodeCanvas.height);\r\n const code = jsQR(imageData.data, imageData.width, imageData.height);\r\n \r\n if (code && !barcodeDetected) {\r\n barcodeDetected = code.data;\r\n barcodeValue.textContent = code.data;\r\n barcodeResult.classList.remove('hidden');\r\n useBarcodeBtn.classList.remove('hidden');\r\n retryScanBtn.classList.remove('hidden');\r\n barcodeInstructions.classList.add('hidden');\r\n \r\n \/\/ Parar stream temporariamente\r\n if (barcodeStream) {\r\n barcodeStream.getTracks().forEach(track => track.stop());\r\n }\r\n return;\r\n }\r\n }\r\n \r\n \/\/ Continuar escaneando se ainda n\u00e3o detectou\r\n if (!barcodeDetected && !barcodeScannerModal.classList.contains('hidden')) {\r\n requestAnimationFrame(scanBarcode);\r\n }\r\n }\r\n \r\n function closeBarcodeScanner() {\r\n \/\/ Parar Quagga se estiver ativo\r\n if (isQuaggaInitialized) {\r\n Quagga.stop();\r\n isQuaggaInitialized = false;\r\n }\r\n \r\n \/\/ Parar jsQR stream se estiver ativo\r\n if (barcodeStream) {\r\n barcodeStream.getTracks().forEach(track => track.stop());\r\n barcodeStream = null;\r\n }\r\n barcodeScannerModal.classList.add('hidden');\r\n barcodeDetected = '';\r\n }\r\n \r\n closeScannerBtn.addEventListener('click', closeBarcodeScanner);\r\n \r\n useBarcodeBtn.addEventListener('click', () => {\r\n returnCodeInput.value = barcodeDetected;\r\n closeBarcodeScanner();\r\n });\r\n \r\n retryScanBtn.addEventListener('click', () => {\r\n barcodeDetected = '';\r\n openBarcodeScanner();\r\n });\r\n \r\n \/\/ ===== COMPARTILHAR RETORNO =====\r\n window.shareReturn = function(returnId) {\r\n const shareUrl = `${window.location.origin}${window.location.pathname}?view=${returnId}`;\r\n shareLinkInput.value = shareUrl;\r\n shareModal.classList.remove('hidden');\r\n };\r\n \r\n closeShareModal.addEventListener('click', () => {\r\n shareModal.classList.add('hidden');\r\n copyFeedback.classList.add('hidden');\r\n });\r\n \r\n copyShareLink.addEventListener('click', async () => {\r\n try {\r\n await navigator.clipboard.writeText(shareLinkInput.value);\r\n copyFeedback.classList.remove('hidden');\r\n setTimeout(() => {\r\n copyFeedback.classList.add('hidden');\r\n }, 3000);\r\n } catch (error) {\r\n \/\/ Fallback para navegadores antigos\r\n shareLinkInput.select();\r\n document.execCommand('copy');\r\n copyFeedback.classList.remove('hidden');\r\n setTimeout(() => {\r\n copyFeedback.classList.add('hidden');\r\n }, 3000);\r\n }\r\n });\r\n \r\n \/\/ ===== EXCLUIR RETORNO =====\r\n window.deleteReturn = async function(returnId) {\r\n if (!confirm('ATEN\u00c7\u00c3O: Deseja realmente EXCLUIR permanentemente este retorno? Esta a\u00e7\u00e3o n\u00e3o pode ser desfeita!')) return;\r\n \r\n try {\r\n \/\/ Excluir todos os produtos relacionados com pagina\u00e7\u00e3o\r\n let offset = 0;\r\n const limit = 100;\r\n let hasMore = true;\r\n \r\n while (hasMore) {\r\n const products = await databases.listDocuments(\r\n DATABASE_ID,\r\n COLLECTIONS.returnProducts,\r\n [\r\n Query.equal('returnId', returnId),\r\n Query.limit(limit),\r\n Query.offset(offset)\r\n ]\r\n );\r\n \r\n for (let product of products.documents) {\r\n await databases.deleteDocument(DATABASE_ID, COLLECTIONS.returnProducts, product.$id);\r\n }\r\n \r\n hasMore = products.documents.length === limit;\r\n if (!hasMore) break;\r\n offset += limit;\r\n }\r\n \r\n \/\/ Excluir todas as fotos relacionadas com pagina\u00e7\u00e3o\r\n offset = 0;\r\n hasMore = true;\r\n \r\n while (hasMore) {\r\n const photos = await databases.listDocuments(\r\n DATABASE_ID,\r\n COLLECTIONS.returnProductPhotos,\r\n [\r\n Query.equal('returnId', returnId),\r\n Query.limit(limit),\r\n Query.offset(offset)\r\n ]\r\n );\r\n \r\n for (let photo of photos.documents) {\r\n await databases.deleteDocument(DATABASE_ID, COLLECTIONS.returnProductPhotos, photo.$id);\r\n }\r\n \r\n hasMore = photos.documents.length === limit;\r\n if (!hasMore) break;\r\n offset += limit;\r\n }\r\n \r\n \/\/ Excluir retorno principal\r\n await databases.deleteDocument(DATABASE_ID, COLLECTIONS.returnedProducts, returnId);\r\n \r\n alert('Retorno exclu\u00eddo com sucesso!');\r\n await loadAllData();\r\n } catch (error) {\r\n alert('Erro ao excluir: ' + error.message);\r\n }\r\n };\r\n\r\n \/\/ ===== RANKING =====\r\n function calculateRanking() {\r\n const productData = {};\r\n \r\n [...state.returned, ...state.archived].forEach(returnDoc => {\r\n returnDoc.products?.forEach(product => {\r\n const name = product.name.toLowerCase();\r\n if (!productData[name]) {\r\n productData[name] = {\r\n count: 0,\r\n photo: product.photo || '',\r\n displayName: product.name\r\n };\r\n }\r\n productData[name].count += (product.quantity || 1);\r\n \/\/ Atualizar foto se ainda n\u00e3o tiver\r\n if (!productData[name].photo && product.photo) {\r\n productData[name].photo = product.photo;\r\n }\r\n });\r\n });\r\n \r\n const sorted = Object.entries(productData)\r\n .sort((a, b) => b[1].count - a[1].count)\r\n .slice(0, 20);\r\n \r\n mostReturnedList.innerHTML = sorted.map(([name, data], index) => {\r\n const photoHTML = data.photo ? \r\n `<img decoding=\"async\" src=\"${data.photo}\" class=\"w-12 h-12 sm:w-16 sm:h-16 object-cover rounded-lg mr-2 sm:mr-3 cursor-pointer flex-shrink-0\" onclick=\"viewImage('${data.photo}')\">`\r\n : '<div class=\"w-12 h-12 sm:w-16 sm:h-16 bg-gray-200 rounded-lg mr-2 sm:mr-3 flex items-center justify-center flex-shrink-0\"><i class=\"fas fa-box text-gray-400 text-sm sm:text-base\"><\/i><\/div>';\r\n \r\n return `\r\n <div class=\"flex items-center justify-between p-3 sm:p-4 bg-white border rounded-lg hover:shadow-md transition gap-2\">\r\n <div class=\"flex items-center flex-1 min-w-0\">\r\n <span class=\"text-lg sm:text-2xl font-bold text-gray-400 mr-2 sm:mr-4 w-6 sm:w-10 flex-shrink-0\">${index + 1}\u00ba<\/span>\r\n ${photoHTML}\r\n <span class=\"font-semibold text-gray-800 text-xs sm:text-base truncate\" title=\"${data.displayName}\">${data.displayName}<\/span>\r\n <\/div>\r\n <span class=\"bg-blue-100 text-blue-800 px-2 sm:px-4 py-1 sm:py-2 rounded-full font-bold text-sm sm:text-lg flex-shrink-0\">${data.count}<\/span>\r\n <\/div>\r\n `;\r\n }).join('');\r\n }\r\n\r\n \/\/ ===== CONTADORES =====\r\n function updateCounts() {\r\n document.getElementById('all-count').textContent = state.returned.length;\r\n document.getElementById('archived-count').textContent = state.archived.length;\r\n }\r\n\r\n \/\/ ===== BUSCA =====\r\n searchAllInput.addEventListener('input', (e) => {\r\n const term = e.target.value.toLowerCase();\r\n filterReturns(allProductsList, state.returned, term);\r\n });\r\n\r\n searchArchivedInput.addEventListener('input', (e) => {\r\n const term = e.target.value.toLowerCase();\r\n filterReturns(archivedProductsList, state.archived, term);\r\n });\r\n\r\n function filterReturns(container, data, term) {\r\n container.innerHTML = '';\r\n const filtered = data.filter(r => \r\n r.code.toLowerCase().includes(term) ||\r\n r.sellerName.toLowerCase().includes(term) ||\r\n r.observations?.toLowerCase().includes(term) ||\r\n r.products?.some(p => p.name.toLowerCase().includes(term))\r\n );\r\n filtered.forEach(returnData => {\r\n container.appendChild(createReturnCard(returnData, container === archivedProductsList));\r\n });\r\n }\r\n\r\n \/\/ ===== VISUALIZA\u00c7\u00c3O P\u00daBLICA =====\r\n async function loadPublicView(returnId) {\r\n try {\r\n console.log('Carregando visualiza\u00e7\u00e3o p\u00fablica para ID:', returnId);\r\n \r\n \/\/ Usar cliente p\u00fablico para evitar problemas de autentica\u00e7\u00e3o\r\n const returnDoc = await publicDatabases.getDocument(\r\n DATABASE_ID,\r\n COLLECTIONS.returnedProducts,\r\n returnId\r\n );\r\n \r\n console.log('Retorno carregado:', returnDoc);\r\n \r\n \/\/ Carregar produtos relacionados\r\n const productsResponse = await publicDatabases.listDocuments(\r\n DATABASE_ID,\r\n COLLECTIONS.returnProducts,\r\n [Query.equal('returnId', returnId)]\r\n );\r\n returnDoc.products = productsResponse.documents;\r\n \r\n \/\/ Carregar fotos relacionadas com tipo\r\n const photosResponse = await publicDatabases.listDocuments(\r\n DATABASE_ID,\r\n COLLECTIONS.returnProductPhotos,\r\n [Query.equal('returnId', returnId), Query.orderAsc('order')]\r\n );\r\n returnDoc.productPhotos = photosResponse.documents.map(doc => ({\r\n url: doc.photoUrl,\r\n type: doc.mediaType || detectMediaType(doc.photoUrl)\r\n }));\r\n \r\n \/\/ Armazenar m\u00eddias globalmente para download\r\n window.currentPublicMedia = returnDoc.productPhotos;\r\n \r\n \/\/ Esconder tela de login e mostrar visualiza\u00e7\u00e3o p\u00fablica\r\n loginScreen.classList.add('hidden');\r\n \r\n \/\/ Criar container de visualiza\u00e7\u00e3o p\u00fablica\r\n const publicContainer = document.createElement('div');\r\n publicContainer.className = 'max-w-4xl mx-auto p-3 sm:p-6 lg:p-8';\r\n \r\n \/\/ Criar bot\u00e3o de download se houver fotos\/v\u00eddeos\r\n const downloadButton = returnDoc.productPhotos && returnDoc.productPhotos.length > 0 ? `\r\n <button onclick=\"downloadAllMedia()\" \r\n class=\"mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 sm:px-6 py-2 sm:py-3 rounded-lg text-sm sm:text-base min-h-[48px]\">\r\n <i class=\"fas fa-download mr-2\"><\/i>Baixar Todas as M\u00eddias (${returnDoc.productPhotos.length})\r\n <\/button>\r\n ` : '';\r\n \r\n publicContainer.innerHTML = `\r\n <div class=\"bg-white rounded-lg shadow-lg p-4 sm:p-6 mb-4 sm:mb-6\">\r\n <div class=\"text-center mb-4 sm:mb-6\">\r\n <div class=\"mx-auto h-12 w-12 sm:h-16 sm:w-16 flex items-center justify-center rounded-full bg-blue-100 mb-3 sm:mb-4\">\r\n <i class=\"fas fa-box-open text-xl sm:text-2xl text-blue-600\"><\/i>\r\n <\/div>\r\n <h1 class=\"text-xl sm:text-3xl font-bold text-gray-900\">Informa\u00e7\u00f5es do Retorno<\/h1>\r\n <p class=\"text-gray-600 mt-1 sm:mt-2 text-sm sm:text-base\">Detalhes da sua encomenda<\/p>\r\n ${downloadButton}\r\n <\/div>\r\n <\/div>\r\n ` ;\r\n \r\n \/\/ Adicionar card do retorno com bot\u00f5es de download\r\n const card = createReturnCard(returnDoc, false, true);\r\n \/\/ Remover bot\u00f5es de a\u00e7\u00e3o do card p\u00fablico\r\n const footer = card.querySelector('.card-footer');\r\n if (footer) footer.remove();\r\n \r\n publicContainer.appendChild(card);\r\n \r\n \/\/ Adicionar ao body\r\n document.body.appendChild(publicContainer);\r\n \r\n } catch (error) {\r\n console.error('Erro detalhado ao carregar visualiza\u00e7\u00e3o p\u00fablica:', error);\r\n \r\n \/\/ Criar mensagem de erro detalhada\r\n let errorMessage = 'Este link pode estar inv\u00e1lido ou o retorno foi removido.';\r\n let errorTitle = 'Retorno n\u00e3o encontrado';\r\n \r\n if (error.code === 401) {\r\n errorTitle = 'Erro de Permiss\u00e3o';\r\n errorMessage = 'As permiss\u00f5es de leitura n\u00e3o est\u00e3o configuradas corretamente. Entre em contato com o suporte.';\r\n } else if (error.code === 404) {\r\n errorTitle = 'Retorno n\u00e3o encontrado';\r\n errorMessage = 'Este retorno n\u00e3o existe ou foi removido.';\r\n } else if (error.message) {\r\n errorMessage = error.message;\r\n }\r\n \r\n loginScreen.innerHTML = `\r\n <div class=\"max-w-md w-full text-center p-4 sm:p-8 mx-4\">\r\n <div class=\"mx-auto h-12 w-12 sm:h-16 sm:w-16 flex items-center justify-center rounded-full bg-red-100 mb-3 sm:mb-4\">\r\n <i class=\"fas fa-exclamation-triangle text-xl sm:text-2xl text-red-600\"><\/i>\r\n <\/div>\r\n <h2 class=\"text-xl sm:text-2xl font-bold text-gray-900 mb-2\">${errorTitle}<\/h2>\r\n <p class=\"text-gray-600 mb-3 sm:mb-4 text-sm sm:text-base\">${errorMessage}<\/p>\r\n <div class=\"bg-yellow-50 border border-yellow-200 rounded-lg p-3 sm:p-4 text-left\">\r\n <p class=\"text-xs text-yellow-800\">\r\n <strong>Nota para administradores:<\/strong><br>\r\n Para que o compartilhamento funcione, configure as permiss\u00f5es no Appwrite Console:\r\n <\/p>\r\n <ul class=\"text-xs text-yellow-800 mt-2 ml-4 list-disc space-y-1\">\r\n <li>Collection <code class=\"bg-yellow-100 px-1 rounded\">returned_products<\/code> \u2192 Permissions \u2192 Read: Any<\/li>\r\n <li>Collection <code class=\"bg-yellow-100 px-1 rounded\">return_products<\/code> \u2192 Permissions \u2192 Read: Any<\/li>\r\n <li>Collection <code class=\"bg-yellow-100 px-1 rounded\">return_product_photos<\/code> \u2192 Permissions \u2192 Read: Any<\/li>\r\n <li>Storage Bucket \u2192 Settings \u2192 Permissions \u2192 Read: Any<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n }\r\n \r\n \/\/ ===== RESTAURA\u00c7\u00c3O DE MODAL AP\u00d3S RETORNO DO FILE PICKER =====\r\n \/\/ Quando o iOS\/Android retorna de c\u00e2mera\/galeria, pode recarregar a p\u00e1gina.\r\n \/\/ Esta fun\u00e7\u00e3o detecta se havia um modal aberto antes e o reabre.\r\n function restoreModalStateFromStorage() {\r\n let modalState = null;\r\n try { modalState = JSON.parse(localStorage.getItem(MODAL_STATE_KEY)); } catch (e) {}\r\n if (!modalState) return;\r\n\r\n localStorage.removeItem(MODAL_STATE_KEY);\r\n console.log('[APP] Restaurando modal ap\u00f3s retorno do file picker:', modalState);\r\n\r\n \/\/ Sempre restaurar o rascunho first\r\n restoreRegisterDraft();\r\n\r\n \/\/ Reabrir o modal correto na aba de upload\r\n if (modalState.modal === 'image') {\r\n currentImageTarget = { type: 'product-photo', index: productPhotos.length };\r\n openImageCaptureModal();\r\n switchToUploadTab();\r\n } else if (modalState.modal === 'video') {\r\n currentVideoTarget = { type: 'product-video', index: productPhotos.length };\r\n openVideoCaptureModal();\r\n switchToVideoUploadTab();\r\n }\r\n }\r\n\r\n \/\/ Handler pageshow: cobre o caso do iOS bfcache (back-forward cache) e PWA\r\n window.addEventListener('pageshow', (event) => {\r\n console.log('[APP] pageshow - persisted:', event.persisted);\r\n \/\/ S\u00f3 age se o sistema principal estiver vis\u00edvel (usu\u00e1rio logado)\r\n if (!mainSystem || mainSystem.classList.contains('hidden')) return;\r\n restoreModalStateFromStorage();\r\n });\r\n\r\n \/\/ ===== INICIALIZA\u00c7\u00c3O =====\r\n document.addEventListener('DOMContentLoaded', async () => {\r\n \/\/ Verificar se \u00e9 visualiza\u00e7\u00e3o p\u00fablica\r\n const urlParams = new URLSearchParams(window.location.search);\r\n const viewId = urlParams.get('view');\r\n \r\n if (viewId) {\r\n \/\/ Modo visualiza\u00e7\u00e3o p\u00fablica\r\n await loadPublicView(viewId);\r\n return;\r\n }\r\n \r\n \/\/ Modo normal - restaurar rascunho (quando houver)\r\n restoreRegisterDraft();\r\n if (productEntriesContainer.children.length === 0) {\r\n addProductEntry();\r\n }\r\n renderProductPhotos();\r\n \r\n \/\/ Verificar se j\u00e1 est\u00e1 logado\r\n try {\r\n currentUser = await account.get();\r\n showMainSystem();\r\n loadAllData();\r\n \/\/ Restaurar modal de upload se a p\u00e1gina recarregou durante o file picker (iOS)\r\n restoreModalStateFromStorage();\r\n } catch (error) {\r\n \/\/ Usu\u00e1rio n\u00e3o est\u00e1 logado\r\n console.log('Usu\u00e1rio n\u00e3o autenticado');\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Retornos – Envio Nacional Retornos – Envio Nacional Realize o login para acessar Email Senha Entrar Criar Conta Controle de Retornos Sistema Envio Nacional Sair Registrar Todos (0) Arquivo (0) Ranking Cat\u00e1logo Registrar Novo Retorno C\u00f3digo do Retorno Canal de Venda Selecione…ShopeeMercado LivreLoja F\u00edsicaSiteWhatsAppOutro Nome do Vendedor Observa\u00e7\u00f5es Produtos Adicionar Produto Fotos e V\u00eddeos (0\/10) […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/devolucao.envionacional.com.br\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devolucao.envionacional.com.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/devolucao.envionacional.com.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/devolucao.envionacional.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devolucao.envionacional.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":103,"href":"https:\/\/devolucao.envionacional.com.br\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":139,"href":"https:\/\/devolucao.envionacional.com.br\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/139"}],"wp:attachment":[{"href":"https:\/\/devolucao.envionacional.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n Retornos - Envio Nacional<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio\"><\/script>\r\n <script>\r\n tailwind.config = {\r\n darkMode: 'class',\r\n theme: {\r\n extend: {\r\n colors: {\r\n primary: {\r\n 50: '#f5f3ff',\r\n 100: '#ede9fe',\r\n 200: '#ddd6fe',\r\n 300: '#c4b5fd',\r\n 400: '#a78bfa',\r\n 500: '#8b5cf6',\r\n 600: '#7c3aed',\r\n 700: '#6d28d9',\r\n 800: '#5b21b6',\r\n 900: '#4c1d95',\r\n }\r\n },\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/appwrite@14.0.1\"><\/script>\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jsqr@1.4.0\/dist\/jsQR.min.js\"><\/script>\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@ericblade\/quagga2@1.8.4\/dist\/quagga.min.js\"><\/script>\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/tesseract.js@5.1.0\/dist\/tesseract.min.js\"><\/script>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.2\/css\/all.min.css\">\r\n \r\n <script src=\"https:\/\/cdn.sheetjs.com\/xlsx-0.20.1\/package\/dist\/xlsx.full.min.js\"><\/script>\r\n \r\n <style>\r\n \/* Tema Roxo - Estilo Envio Nacional - OTIMIZADO MOBILE *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n -webkit-tap-highlight-color: rgba(139, 92, 246, 0.2);\r\n }\r\n \r\n body {\r\n font-family: 'Inter', sans-serif !important;\r\n background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%) !important;\r\n min-height: 100vh;\r\n color: #ffffff !important;\r\n overflow-x: hidden;\r\n position: relative;\r\n font-size: 16px;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n touch-action: manipulation;\r\n }\r\n \r\n \/* Grid de fundo *\/\r\n body::before {\r\n content: '';\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: \r\n linear-gradient(rgba(139, 92, 246, 0.1) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(139, 92, 246, 0.1) 1px, transparent 1px);\r\n background-size: 50px 50px;\r\n z-index: 0;\r\n pointer-events: none;\r\n }\r\n \r\n \/* Cards com glass effect *\/\r\n .product-card,\r\n .bg-white {\r\n background: rgb(118, 116, 236) !important;\r\n backdrop-filter: blur(10px) !important;\r\n border: 1px solid rgba(167, 139, 250, 0.5) !important;\r\n box-shadow: 0 8px 32px rgba(139, 92, 246, 0.3) !important;\r\n color: #ffffff !important;\r\n }\r\n \r\n \/* Garantir contraste em textos dentro dos cards *\/\r\n .product-card * {\r\n color: inherit;\r\n }\r\n \r\n .product-card .text-gray-900,\r\n .product-card .text-gray-800,\r\n .product-card .text-gray-700,\r\n .product-card .text-gray-600,\r\n .product-card .text-gray-500 {\r\n color: #ffffff !important;\r\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\r\n }\r\n \r\n .product-card:hover {\r\n box-shadow: 0 12px 40px rgba(139, 92, 246, 0.4) !important;\r\n border-color: rgba(139, 92, 246, 0.6) !important;\r\n }\r\n \r\n \/* Bot\u00f5es prim\u00e1rios roxos com texto contrastante *\/\r\n .bg-blue-600,\r\n .bg-blue-500,\r\n button[type=\"submit\"]:not(.bg-green-500):not(.bg-purple-500):not(.bg-red-500) {\r\n background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;\r\n box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4) !important;\r\n color: #ffffff !important;\r\n font-weight: 600 !important;\r\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;\r\n }\r\n \r\n .bg-blue-600:hover,\r\n .bg-blue-500:hover {\r\n background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;\r\n }\r\n \r\n \/* Navega\u00e7\u00e3o com contraste otimizado *\/\r\n .nav-link {\r\n color: #ffffff !important;\r\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\r\n font-weight: 500 !important;\r\n }\r\n \r\n .nav-link.active {\r\n border-bottom-color: #a78bfa !important;\r\n color: #a78bfa !important;\r\n font-weight: 700 !important;\r\n text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\r\n }\r\n \r\n .nav-link:hover {\r\n color: #c4b5fd !important;\r\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\r\n }\r\n \r\n \/* Inputs - Touch Friendly *\/\r\n input, select, textarea {\r\n background: rgba(167, 139, 250, 0.2) !important;\r\n border-color: rgba(167, 139, 250, 0.5) !important;\r\n color: #ffffff !important;\r\n font-size: 16px !important;\r\n min-height: 48px;\r\n padding: 0.75rem 1rem !important;\r\n border-radius: 8px;\r\n }\r\n \r\n @media (max-width: 640px) {\r\n input, select, textarea {\r\n font-size: 16px !important;\r\n }\r\n }\r\n \r\n input::placeholder, select::placeholder, textarea::placeholder {\r\n color: rgba(255, 255, 255, 0.6) !important;\r\n }\r\n \r\n input:focus, select:focus, textarea:focus {\r\n border-color: #a78bfa !important;\r\n ring-color: rgba(167, 139, 250, 0.6) !important;\r\n background: rgba(167, 139, 250, 0.25) !important;\r\n }\r\n \r\n \/* Garantir que o conte\u00fado fique acima do fundo *\/\r\n #login-screen,\r\n #main-system {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n \r\n \/* Texto vis\u00edvel sobre fundo escuro *\/\r\n .text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600 {\r\n color: #ffffff !important;\r\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\r\n }\r\n \r\n \/* Textos em containers com fundo roxo *\/\r\n body > div:not(#login-screen):not(#main-system) {\r\n color: #ffffff !important;\r\n }\r\n \r\n \/* Garantir contraste em par\u00e1grafos *\/\r\n p {\r\n color: inherit;\r\n }\r\n \r\n \/* Datas e informa\u00e7\u00f5es secund\u00e1rias *\/\r\n .text-gray-600 {\r\n color: rgba(255, 255, 255, 0.9) !important;\r\n }\r\n \r\n \/* T\u00edtulos e nomes com alto contraste *\/\r\n h1, h2, h3, h4, h5, h6 {\r\n color: #ffffff !important;\r\n background: none !important;\r\n -webkit-text-fill-color: #ffffff !important;\r\n text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\r\n font-weight: 700 !important;\r\n }\r\n \r\n \/* Nomes de produtos em branco para contraste *\/\r\n .product-name {\r\n color: #ffffff !important;\r\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\r\n }\r\n \r\n \/* Textos em negrito mant\u00e9m contraste adequado *\/\r\n .font-bold,\r\n .font-semibold {\r\n color: #ffffff !important;\r\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\r\n }\r\n \r\n \/* Labels e textos pequenos com contraste otimizado *\/\r\n label, .text-sm {\r\n color: #ffffff !important;\r\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\r\n }\r\n \r\n \/* Textos secund\u00e1rios mant\u00eam boa legibilidade *\/\r\n .text-gray-500 {\r\n color: rgba(255, 255, 255, 0.85) !important;\r\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\r\n }\r\n \r\n .text-xs {\r\n color: rgba(255, 255, 255, 0.9) !important;\r\n }\r\n \r\n \/* Badges e status *\/\r\n .status-badge {\r\n color: #1f2937 !important;\r\n }\r\n \r\n \/* Modais com fundo claro para leitura perfeita *\/\r\n #image-capture-modal > div,\r\n #video-capture-modal > div,\r\n #barcode-scanner-modal > div,\r\n #share-modal > div,\r\n #catalog-modal > div {\r\n background: #ffffff !important;\r\n color: #000000 !important;\r\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;\r\n }\r\n \r\n #image-capture-modal label,\r\n #video-capture-modal label,\r\n #barcode-scanner-modal label,\r\n #share-modal label,\r\n #catalog-modal label,\r\n #image-capture-modal .text-sm,\r\n #video-capture-modal .text-sm,\r\n #barcode-scanner-modal .text-sm,\r\n #share-modal .text-sm,\r\n #catalog-modal .text-sm,\r\n #image-capture-modal h3,\r\n #video-capture-modal h3,\r\n #barcode-scanner-modal h3,\r\n #share-modal h3,\r\n #catalog-modal h3,\r\n #image-capture-modal button,\r\n #video-capture-modal button,\r\n #barcode-scanner-modal button,\r\n #share-modal button,\r\n #catalog-modal button {\r\n color: #000000 !important;\r\n text-shadow: none !important;\r\n }\r\n \r\n \/* Bot\u00f5es em modais mant\u00eam cores espec\u00edficas *\/\r\n #image-capture-modal .bg-blue-500,\r\n #video-capture-modal .bg-blue-500,\r\n #barcode-scanner-modal .bg-blue-500,\r\n #share-modal .bg-blue-500,\r\n #catalog-modal .bg-blue-500,\r\n #image-capture-modal .bg-purple-500,\r\n #video-capture-modal .bg-purple-500 {\r\n color: #ffffff !important;\r\n }\r\n \r\n \/* Inputs em modais com fundo branco *\/\r\n #image-capture-modal input,\r\n #video-capture-modal input,\r\n #barcode-scanner-modal input,\r\n #share-modal input,\r\n #catalog-modal input {\r\n background: #f9fafb !important;\r\n color: #000000 !important;\r\n border-color: #d1d5db !important;\r\n }\r\n \r\n #image-capture-modal input::placeholder,\r\n #video-capture-modal input::placeholder,\r\n #barcode-scanner-modal input::placeholder,\r\n #share-modal input::placeholder,\r\n #catalog-modal input::placeholder {\r\n color: #6b7280 !important;\r\n }\r\n \r\n \/* Estilos originais do sistema *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n \r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);\r\n min-height: 100vh;\r\n color: #ffffff;\r\n overflow-x: hidden;\r\n position: relative;\r\n }\r\n \r\n \/* Grid de fundo *\/\r\n .grid-background {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: \r\n linear-gradient(rgba(139, 92, 246, 0.1) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(139, 92, 246, 0.1) 1px, transparent 1px);\r\n background-size: 50px 50px;\r\n z-index: 0;\r\n pointer-events: none;\r\n }\r\n \r\n .tab-content { display: none; }\r\n .tab-content.active { display: block; }\r\n .nav-link { transition: all 0.3s ease; }\r\n .nav-link.active { border-bottom-color: #02070f; color: #3b82f6; }\r\n \r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n .card-animation { animation: fadeIn 0.5s ease-out forwards; }\r\n \r\n .product-card {\r\n background: rgb(118, 116, 236);\r\n border-radius: 16px;\r\n box-shadow: 0 8px 32px rgba(139, 92, 246, 0.2);\r\n overflow: hidden;\r\n transition: all 0.3s ease;\r\n border: 1px solid rgba(139, 92, 246, 0.3);\r\n min-height: 300px;\r\n backdrop-filter: blur(10px);\r\n }\r\n \r\n .product-card:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 12px 40px rgba(139, 92, 246, 0.4);\r\n border-color: rgba(139, 92, 246, 0.6);\r\n }\r\n \r\n .card-header {\r\n padding: 1.5rem;\r\n border-bottom: 2px solid rgba(139, 92, 246, 0.2);\r\n background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(124, 58, 237, 0.05) 100%);\r\n }\r\n \r\n .card-body { \r\n padding: 1.25rem;\r\n background: rgb(118, 116, 236);\r\n }\r\n .card-footer {\r\n padding: 1rem 1.25rem;\r\n background: rgb(118, 116, 236);\r\n border-top: 2px solid rgba(139, 92, 246, 0.2);\r\n }\r\n \r\n .btn-action {\r\n padding: 0.875rem 1.25rem;\r\n border-radius: 12px;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n transition: all 0.2s ease;\r\n border: none;\r\n cursor: pointer;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.5rem;\r\n min-height: 48px;\r\n touch-action: manipulation;\r\n }\r\n \r\n @media (max-width: 640px) {\r\n .btn-action {\r\n width: 100%;\r\n font-size: 0.95rem;\r\n }\r\n }\r\n \r\n .btn-edit {\r\n background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);\r\n color: white;\r\n }\r\n \r\n .btn-delete {\r\n background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\r\n color: white;\r\n }\r\n \r\n .btn-finish {\r\n background: linear-gradient(135deg, #10b981 0%, #059669 100%);\r\n color: white;\r\n width: 100%;\r\n padding: 0.75rem;\r\n }\r\n \r\n .btn-actions-group {\r\n display: flex;\r\n gap: 0.5rem;\r\n }\r\n \r\n .btn-actions-group button {\r\n flex: 1;\r\n }\r\n \r\n .status-badge {\r\n padding: 0.375rem 0.75rem;\r\n border-radius: 9999px;\r\n font-size: 0.75rem;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n }\r\n \r\n .status-bom {\r\n background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);\r\n color: #021409;\r\n border: 1px solid #16a34a;\r\n }\r\n \r\n .status-ruim {\r\n background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\r\n color: #92400e;\r\n border: 1px solid #d97706;\r\n }\r\n \r\n .status-quebrado {\r\n background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);\r\n color: #991b1b;\r\n border: 1px solid #ef4444;\r\n }\r\n \r\n .status-itens-faltando {\r\n background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\r\n color: #92400e;\r\n border: 1px solid #f59e0b;\r\n }\r\n \r\n .status-ao-remetente {\r\n background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);\r\n color: #1e40af;\r\n border: 1px solid #3b82f6;\r\n }\r\n \r\n .status-Itens_faltantes {\r\n background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);\r\n color: #991b1b;\r\n border: 1px solid #ef4444;\r\n }\r\n \r\n .status-Ao_Remetente {\r\n background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);\r\n color: #991b1b;\r\n border: 1px solid #ef4444;\r\n }\r\n \r\n .cards-grid {\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 1rem;\r\n padding: 0.75rem;\r\n }\r\n \r\n @media (min-width: 640px) {\r\n .cards-grid {\r\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\r\n gap: 1.5rem;\r\n padding: 1rem;\r\n }\r\n }\r\n \r\n @media (min-width: 1024px) {\r\n .cards-grid {\r\n grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\r\n gap: 2rem;\r\n padding: 1.5rem;\r\n }\r\n }\r\n \r\n .product-photos-section {\r\n margin: 1rem 0;\r\n padding: 1rem;\r\n background: rgb(118, 116, 236);\r\n border-radius: 8px;\r\n }\r\n \r\n .photos-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));\r\n gap: 0.75rem;\r\n }\r\n \r\n .photo-item {\r\n aspect-ratio: 1;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n cursor: pointer;\r\n border: 2px solid #e5e7eb;\r\n position: relative;\r\n }\r\n \r\n .photo-item.group:hover .opacity-0 {\r\n opacity: 1;\r\n }\r\n \r\n .photo-item img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n \r\n .product-item {\r\n display: flex;\r\n align-items: center;\r\n padding: 0.75rem;\r\n background: rgb(118, 116, 236);\r\n border: 1px solid #e5e7eb;\r\n border-radius: 8px;\r\n }\r\n \r\n .product-image {\r\n width: 3rem;\r\n height: 3rem;\r\n border-radius: 8px;\r\n object-fit: cover;\r\n margin-right: 0.75rem;\r\n cursor: pointer;\r\n }\r\n \r\n \/* Sugest\u00f5es de produtos (autocomplete) *\/\r\n .product-suggestions {\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\r\n scrollbar-width: thin;\r\n scrollbar-color: #cbd5e1 #f1f5f9;\r\n }\r\n \r\n .product-suggestions::-webkit-scrollbar {\r\n width: 6px;\r\n }\r\n \r\n .product-suggestions::-webkit-scrollbar-track {\r\n background: #f1f5f9;\r\n border-radius: 3px;\r\n }\r\n \r\n .product-suggestions::-webkit-scrollbar-thumb {\r\n background: #cbd5e1;\r\n border-radius: 3px;\r\n }\r\n \r\n .product-suggestions::-webkit-scrollbar-thumb:hover {\r\n background: #94a3b8;\r\n }\r\n \r\n .suggestion-item:active {\r\n background-color: #dbeafe !important;\r\n }\r\n \r\n \/* Scanner de c\u00f3digo de barras - Quagga overlay *\/\r\n #barcode-video {\r\n position: relative;\r\n }\r\n \r\n #barcode-video canvas.drawingBuffer {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n }\r\n \r\n .hidden { display: none !important; }\r\n \r\n \/* ESTILOS MOBILE ESPEC\u00cdFICOS *\/\r\n @media (max-width: 640px) {\r\n body {\r\n padding-bottom: env(safe-area-inset-bottom);\r\n }\r\n \r\n .product-card {\r\n min-height: auto;\r\n margin-bottom: 0.75rem;\r\n }\r\n \r\n .card-header {\r\n padding: 1rem;\r\n }\r\n \r\n .card-body {\r\n padding: 1rem;\r\n }\r\n \r\n .card-footer {\r\n padding: 0.875rem 1rem;\r\n }\r\n \r\n \/* Header compacto *\/\r\n h1 {\r\n font-size: 1.5rem !important;\r\n }\r\n \r\n h2 {\r\n font-size: 1.25rem !important;\r\n }\r\n \r\n h3 {\r\n font-size: 1.125rem !important;\r\n }\r\n \r\n \/* Navega\u00e7\u00e3o mobile *\/\r\n .nav-link {\r\n padding: 0.75rem 0.5rem !important;\r\n font-size: 0.8rem !important;\r\n }\r\n \r\n .nav-link i {\r\n display: block;\r\n margin: 0 auto 0.25rem;\r\n font-size: 1.125rem;\r\n }\r\n \r\n \/* Modais fullscreen em mobile *\/\r\n #image-capture-modal > div,\r\n #video-capture-modal > div,\r\n #barcode-scanner-modal > div,\r\n #share-modal > div,\r\n #catalog-modal > div {\r\n max-width: 100% !important;\r\n margin: 0 !important;\r\n border-radius: 0 !important;\r\n min-height: 100vh;\r\n }\r\n \r\n \/* Grid de fotos responsivo *\/\r\n .photos-grid {\r\n grid-template-columns: repeat(4, 1fr) !important;\r\n gap: 0.5rem !important;\r\n }\r\n \r\n \/* Produtos no cat\u00e1logo *\/\r\n #catalog-products-grid {\r\n grid-template-columns: repeat(2, 1fr) !important;\r\n gap: 0.75rem !important;\r\n }\r\n \r\n \/* Bot\u00f5es de a\u00e7\u00e3o em linha em mobile *\/\r\n .btn-actions-group {\r\n flex-direction: column !important;\r\n gap: 0.5rem !important;\r\n }\r\n \r\n .btn-actions-group button {\r\n width: 100% !important;\r\n }\r\n \r\n \/* Status badges menores *\/\r\n .status-badge {\r\n font-size: 0.65rem !important;\r\n padding: 0.25rem 0.5rem !important;\r\n }\r\n \r\n \/* Container de produtos *\/\r\n .product-entry {\r\n padding: 0.875rem !important;\r\n }\r\n \r\n \/* Ajustar espa\u00e7amentos *\/\r\n .space-y-6 > * + * {\r\n margin-top: 1rem !important;\r\n }\r\n \r\n .space-x-4 > * + * {\r\n margin-left: 0.5rem !important;\r\n }\r\n \r\n \/* Fotos de produtos menores *\/\r\n .product-image {\r\n width: 2.5rem !important;\r\n height: 2.5rem !important;\r\n }\r\n \r\n \/* Grid responsivo de formul\u00e1rio *\/\r\n .grid-cols-2 {\r\n grid-template-columns: 1fr !important;\r\n }\r\n \r\n .md\\:grid-cols-2 {\r\n grid-template-columns: 1fr !important;\r\n }\r\n \r\n .md\\:grid-cols-4 {\r\n grid-template-columns: 1fr !important;\r\n }\r\n }\r\n \r\n \/* Melhorias de performance mobile *\/\r\n * {\r\n -webkit-overflow-scrolling: touch;\r\n }\r\n \r\n img, video {\r\n max-width: 100%;\r\n height: auto;\r\n }\r\n \r\n \/* Prevent zoom on input focus iOS *\/\r\n @supports (-webkit-touch-callout: none) {\r\n input, select, textarea {\r\n font-size: 16px !important;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased text-gray-800\">\r\n \r\n <div class=\"grid-background\"><\/div>\r\n\r\n \r\n <div id=\"login-screen\" class=\"min-h-screen flex items-center justify-center p-4\">\r\n <div class=\"max-w-md w-full space-y-6 sm:space-y-8\">\r\n <div class=\"text-center\">\r\n <div class=\"mx-auto h-14 w-14 sm:h-16 sm:w-16 flex items-center justify-center rounded-full bg-blue-100\">\r\n <i class=\"fas fa-undo text-xl sm:text-2xl text-blue-600\"><\/i>\r\n <\/div>\r\n <h2 class=\"mt-4 sm:mt-6 text-2xl sm:text-3xl font-extrabold text-gray-900\">\r\n Retornos - Envio Nacional\r\n <\/h2>\r\n <p class=\"mt-2 text-sm text-gray-600\">Realize o login para acessar<\/p>\r\n <\/div>\r\n <div class=\"bg-white py-6 sm:py-8 px-4 sm:px-6 shadow rounded-lg\" style=\"background: rgb(118, 116, 236) !important;\">\r\n <form id=\"login-form\" class=\"space-y-5 sm:space-y-6\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-2\">Email<\/label>\r\n <input id=\"email\" type=\"email\" required autocomplete=\"email\"\r\n class=\"mt-1 block w-full px-3 sm:px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-base\"\r\n placeholder=\"Digite seu email\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-2\">Senha<\/label>\r\n <input id=\"password\" type=\"password\" required autocomplete=\"current-password\"\r\n class=\"mt-1 block w-full px-3 sm:px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-base\"\r\n placeholder=\"Digite sua senha\">\r\n <\/div>\r\n <div id=\"login-feedback\" class=\"text-sm text-center text-red-600\"><\/div>\r\n <button type=\"submit\" \r\n class=\"w-full flex justify-center items-center py-3 sm:py-3.5 px-4 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-blue-600 hover:bg-blue-700 min-h-[48px]\">\r\n <i class=\"fas fa-sign-in-alt mr-2\"><\/i> Entrar\r\n <\/button>\r\n <button type=\"button\" id=\"register-btn\"\r\n class=\"w-full flex justify-center items-center py-3 sm:py-3.5 px-4 border border-gray-300 rounded-md shadow-sm text-base font-medium text-gray-700 bg-white hover:bg-gray-50 min-h-[48px]\">\r\n <i class=\"fas fa-user-plus mr-2\"><\/i> Criar Conta\r\n <\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"main-system\" class=\"hidden max-w-7xl mx-auto p-2 sm:p-4 md:p-6 lg:p-8\">\r\n \r\n <div class=\"bg-white rounded-lg shadow-lg p-3 sm:p-6 mb-3 sm:mb-6\" style=\"background: rgb(118, 116, 236) !important;\">\r\n <div class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3\">\r\n <div class=\"flex-1\">\r\n <h1 class=\"text-xl sm:text-3xl font-bold text-gray-900\">Controle de Retornos<\/h1>\r\n <p class=\"text-gray-600 mt-1 text-sm sm:text-base\">Sistema Envio Nacional<\/p>\r\n <\/div>\r\n <div class=\"flex items-center gap-2 sm:gap-4 w-full sm:w-auto\">\r\n <span id=\"user-display-name\" class=\"text-xs sm:text-sm text-gray-600 flex-1 sm:flex-initial truncate\"><\/span>\r\n <button id=\"logout-btn\" class=\"bg-red-500 hover:bg-red-600 text-white px-3 sm:px-4 py-2 rounded-lg text-sm whitespace-nowrap min-h-[44px]\">\r\n <i class=\"fas fa-sign-out-alt sm:mr-2\"><\/i><span class=\"hidden sm:inline\">Sair<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-white rounded-lg shadow mb-3 sm:mb-6\" style=\"background: rgb(118, 116, 236) !important;\">\r\n <nav class=\"flex justify-around sm:justify-start sm:space-x-8 px-2 sm:px-6 overflow-x-auto\">\r\n <button class=\"nav-link py-3 sm:py-4 px-2 sm:px-1 border-b-2 font-medium text-xs sm:text-sm active flex-shrink-0 flex flex-col sm:flex-row items-center min-h-[60px] sm:min-h-0\" data-tab=\"register\">\r\n <i class=\"fas fa-plus-circle sm:mr-2 mb-1 sm:mb-0\"><\/i><span class=\"text-center\">Registrar<\/span>\r\n <\/button>\r\n <button class=\"nav-link py-3 sm:py-4 px-2 sm:px-1 border-b-2 font-medium text-xs sm:text-sm flex-shrink-0 flex flex-col sm:flex-row items-center min-h-[60px] sm:min-h-0\" data-tab=\"all\">\r\n <i class=\"fas fa-list sm:mr-2 mb-1 sm:mb-0\"><\/i><span class=\"text-center\">Todos <span class=\"hidden sm:inline\">(<\/span><span id=\"all-count\">0<\/span><span class=\"hidden sm:inline\">)<\/span><\/span>\r\n <\/button>\r\n <button class=\"nav-link py-3 sm:py-4 px-2 sm:px-1 border-b-2 font-medium text-xs sm:text-sm flex-shrink-0 flex flex-col sm:flex-row items-center min-h-[60px] sm:min-h-0\" data-tab=\"archived\">\r\n <i class=\"fas fa-archive sm:mr-2 mb-1 sm:mb-0\"><\/i><span class=\"text-center\">Arquivo <span class=\"hidden sm:inline\">(<\/span><span id=\"archived-count\">0<\/span><span class=\"hidden sm:inline\">)<\/span><\/span>\r\n <\/button>\r\n <button class=\"nav-link py-3 sm:py-4 px-2 sm:px-1 border-b-2 font-medium text-xs sm:text-sm flex-shrink-0 flex flex-col sm:flex-row items-center min-h-[60px] sm:min-h-0\" data-tab=\"ranking\">\r\n <i class=\"fas fa-chart-bar sm:mr-2 mb-1 sm:mb-0\"><\/i><span class=\"text-center\">Ranking<\/span>\r\n <\/button>\r\n <button class=\"nav-link py-3 sm:py-4 px-2 sm:px-1 border-b-2 font-medium text-xs sm:text-sm flex-shrink-0 flex flex-col sm:flex-row items-center min-h-[60px] sm:min-h-0\" data-tab=\"catalog\">\r\n <i class=\"fas fa-box sm:mr-2 mb-1 sm:mb-0\"><\/i><span class=\"text-center\">Cat\u00e1logo<\/span>\r\n <\/button>\r\n <\/nav>\r\n <\/div>\r\n\r\n \r\n <div id=\"tab-register\" class=\"tab-content active\">\r\n <div class=\"bg-white rounded-lg shadow p-3 sm:p-6\" style=\"background: rgb(118, 116, 236) !important;\">\r\n <h2 class=\"text-xl sm:text-2xl font-bold mb-4 sm:mb-6\">Registrar Novo Retorno<\/h2>\r\n <form id=\"register-form\" class=\"space-y-4 sm:space-y-6\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-2\">C\u00f3digo do Retorno<\/label>\r\n <div class=\"flex gap-2\">\r\n <input type=\"text\" id=\"return-code\" required\r\n class=\"flex-1 px-3 sm:px-4 py-3 border rounded-lg focus:ring-blue-500 focus:border-blue-500 text-base\"\r\n placeholder=\"Ex: RET-001\">\r\n <button type=\"button\" id=\"scan-barcode-btn\" class=\"bg-purple-500 hover:bg-purple-600 text-white px-3 sm:px-4 py-3 rounded-lg min-w-[48px] min-h-[48px]\">\r\n <i class=\"fas fa-barcode\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-2\">Canal de Venda<\/label>\r\n <select id=\"sales-channel\" required\r\n class=\"w-full px-3 sm:px-4 py-3 border rounded-lg focus:ring-blue-500 focus:border-blue-500 text-base\">\r\n <option value=\"\">Selecione...<\/option>\r\n <option value=\"Shopee\">Shopee<\/option>\r\n <option value=\"Mercado Livre\">Mercado Livre<\/option>\r\n <option value=\"Loja F\u00edsica\">Loja F\u00edsica<\/option>\r\n <option value=\"Site\">Site<\/option>\r\n <option value=\"WhatsApp\">WhatsApp<\/option>\r\n <option value=\"Outro\">Outro<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-2\">Nome do Vendedor<\/label>\r\n <input type=\"text\" id=\"seller-name\" required\r\n class=\"w-full px-3 sm:px-4 py-3 border rounded-lg focus:ring-blue-500 focus:border-blue-500 text-base\"\r\n placeholder=\"Nome do vendedor\">\r\n <\/div>\r\n\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-2\">Observa\u00e7\u00f5es<\/label>\r\n <textarea id=\"return-observations\" rows=\"3\"\r\n class=\"w-full px-3 sm:px-4 py-3 border rounded-lg focus:ring-blue-500 focus:border-blue-500 text-base resize-none\"\r\n placeholder=\"Observa\u00e7\u00f5es sobre o retorno...\"><\/textarea>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <div class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 sm:gap-0 mb-4\">\r\n <h3 class=\"text-base sm:text-lg font-semibold\">Produtos<\/h3>\r\n <button type=\"button\" id=\"add-product-button\" class=\"w-full sm:w-auto bg-green-500 hover:bg-green-600 text-white px-4 py-3 rounded-lg min-h-[48px]\">\r\n <i class=\"fas fa-plus mr-2\"><\/i>Adicionar Produto\r\n <\/button>\r\n <\/div>\r\n <div id=\"product-entries-container\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <h3 class=\"text-base sm:text-lg font-semibold mb-3\">Fotos e V\u00eddeos (<span id=\"photo-count-indicator\">0\/10<\/span>)<\/h3>\r\n <div id=\"product-photos-container\" class=\"grid grid-cols-4 sm:grid-cols-5 gap-2 sm:gap-4 mb-3\"><\/div>\r\n <div class=\"flex flex-col sm:flex-row gap-2 sm:gap-3\">\r\n <button type=\"button\" id=\"add-product-photo-btn\" class=\"flex-1 bg-blue-500 hover:bg-blue-600 text-white px-4 py-3 rounded-lg min-h-[48px]\">\r\n <i class=\"fas fa-camera mr-2\"><\/i>Adicionar Foto\r\n <\/button>\r\n <button type=\"button\" id=\"add-product-video-btn\" class=\"flex-1 bg-purple-500 hover:bg-purple-600 text-white px-4 py-3 rounded-lg min-h-[48px]\">\r\n <i class=\"fas fa-video mr-2\"><\/i>Adicionar V\u00eddeo\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-4 px-6 rounded-lg text-base sm:text-lg min-h-[56px]\">\r\n <i class=\"fas fa-save mr-2\"><\/i>Registrar Retorno\r\n <\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"tab-all\" class=\"tab-content\">\r\n <div class=\"mb-3 sm:mb-6 px-2 sm:px-0\">\r\n <input type=\"text\" id=\"search-all\" placeholder=\"\ud83d\udd0e Buscar retorno...\" \r\n class=\"w-full px-3 sm:px-4 py-3 border rounded-lg focus:ring-blue-500 focus:border-blue-500 text-base\">\r\n <\/div>\r\n <div id=\"all-products-list\" class=\"cards-grid\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"tab-archived\" class=\"tab-content\">\r\n <div class=\"mb-3 sm:mb-6 px-2 sm:px-0\">\r\n <input type=\"text\" id=\"search-archived\" placeholder=\"\ud83d\udd0e Buscar arquivado...\" \r\n class=\"w-full px-3 sm:px-4 py-3 border rounded-lg focus:ring-blue-500 focus:border-blue-500 text-base\">\r\n <\/div>\r\n <div id=\"archived-products-list\" class=\"cards-grid\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"tab-ranking\" class=\"tab-content\">\r\n <div class=\"bg-white rounded-lg shadow p-3 sm:p-6\" style=\"background: rgb(118, 116, 236) !important;\">\r\n <h2 class=\"text-lg sm:text-2xl font-bold mb-4 sm:mb-6\">Top Retornados<\/h2>\r\n <div id=\"most-returned-list\" class=\"space-y-2 sm:space-y-3\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"tab-catalog\" class=\"tab-content\">\r\n <div class=\"bg-white rounded-lg shadow p-3 sm:p-6 mb-3 sm:mb-6\" style=\"background: rgb(118, 116, 236) !important;\">\r\n <h2 class=\"text-lg sm:text-2xl font-bold mb-4 sm:mb-6\">Adicionar Produto<\/h2>\r\n \r\n \r\n <div class=\"bg-blue-50 border border-blue-200 rounded-lg p-3 sm:p-4 mb-4 sm:mb-6\">\r\n <div class=\"flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 sm:gap-0 mb-3\">\r\n <div class=\"flex-1\">\r\n <h3 class=\"font-semibold text-blue-900 text-sm sm:text-base\">Importar Excel<\/h3>\r\n <p class=\"text-xs sm:text-sm text-blue-700 mt-1\">Col A: Nome | Col B: URL Foto<\/p>\r\n <\/div>\r\n <button type=\"button\" id=\"download-template-btn\" class=\"w-full sm:w-auto bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded-lg text-sm min-h-[44px] whitespace-nowrap\">\r\n <i class=\"fas fa-download mr-2\"><\/i>Baixar Modelo\r\n <\/button>\r\n <\/div>\r\n <input type=\"file\" id=\"excel-upload\" accept=\".xlsx,.xls,.csv\" \r\n class=\"w-full px-3 py-3 border rounded-lg bg-white text-base\">\r\n <div id=\"upload-excel-feedback\" class=\"text-xs sm:text-sm mt-2\"><\/div>\r\n <\/div>\r\n \r\n <form id=\"add-product-form\" class=\"grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4\">\r\n <input type=\"text\" id=\"new-product-name\" required placeholder=\"Nome do Produto\"\r\n class=\"px-3 sm:px-4 py-3 border rounded-lg focus:ring-blue-500 focus:border-blue-500 text-base\">\r\n <input type=\"url\" id=\"new-product-photo\" required placeholder=\"URL da Foto\"\r\n class=\"px-3 sm:px-4 py-3 border rounded-lg focus:ring-blue-500 focus:border-blue-500 text-base\">\r\n <button type=\"submit\" class=\"md:col-span-2 bg-green-500 hover:bg-green-600 text-white py-3 px-4 rounded-lg min-h-[48px]\">\r\n <i class=\"fas fa-plus mr-2\"><\/i>Adicionar ao Cat\u00e1logo\r\n <\/button>\r\n <div id=\"add-product-feedback\" class=\"md:col-span-2 text-xs sm:text-sm text-center\"><\/div>\r\n <\/form>\r\n <\/div>\r\n <div class=\"bg-white rounded-lg shadow p-3 sm:p-6\" style=\"background: rgb(118, 116, 236) !important;\">\r\n <h2 class=\"text-lg sm:text-2xl font-bold mb-4 sm:mb-6\">Produtos (<span id=\"product-count\">0<\/span>)<\/h2>\r\n <div id=\"product-catalog-list\" class=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 sm:gap-4\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"image-capture-modal\" class=\"hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-2 sm:p-4\">\r\n <div class=\"bg-white rounded-lg p-4 sm:p-6 max-w-md w-full max-h-[90vh] overflow-y-auto\">\r\n <h3 class=\"text-base sm:text-lg font-bold mb-3 sm:mb-4\">Adicionar Imagem<\/h3>\r\n \r\n \r\n <div class=\"flex border-b mb-3 sm:mb-4\">\r\n <button type=\"button\" id=\"tab-url-btn\" class=\"flex-1 py-3 border-b-2 border-blue-500 text-blue-600 font-semibold text-sm min-h-[48px]\">\r\n <i class=\"fas fa-link mr-1 sm:mr-2\"><\/i><span class=\"hidden sm:inline\">URL<\/span>\r\n <\/button>\r\n <button type=\"button\" id=\"tab-upload-btn\" class=\"flex-1 py-3 border-b-2 border-transparent text-gray-600 text-sm min-h-[48px]\">\r\n <i class=\"fas fa-camera mr-1 sm:mr-2\"><\/i><span class=\"hidden sm:inline\">Tirar Foto<\/span>\r\n <\/button>\r\n <\/div>\r\n \r\n \r\n <div id=\"url-content\" class=\"mb-3 sm:mb-4\">\r\n <input type=\"url\" id=\"image-url-input\" placeholder=\"Cole a URL da imagem\"\r\n class=\"w-full px-3 sm:px-4 py-3 border rounded-lg text-base\">\r\n <\/div>\r\n \r\n \r\n <div id=\"upload-content\" class=\"hidden mb-3 sm:mb-4\">\r\n \r\n <div class=\"flex gap-2 mb-3\">\r\n <button type=\"button\" id=\"image-camera-btn\"\r\n class=\"flex-1 flex flex-col items-center justify-center gap-1 py-4 rounded-xl border-2 border-blue-400 bg-blue-50 hover:bg-blue-100 active:bg-blue-200 text-blue-700 font-semibold text-sm min-h-[72px] transition\">\r\n <i class=\"fas fa-camera text-2xl\"><\/i>\r\n <span>C\u00e2mera<\/span>\r\n <\/button>\r\n <button type=\"button\" id=\"image-gallery-btn\"\r\n class=\"flex-1 flex flex-col items-center justify-center gap-1 py-4 rounded-xl border-2 border-gray-300 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 text-gray-700 font-semibold text-sm min-h-[72px] transition\">\r\n <i class=\"fas fa-images text-2xl\"><\/i>\r\n <span>Galeria<\/span>\r\n <\/button>\r\n <\/div>\r\n \r\n <input type=\"file\" id=\"image-camera-input\" accept=\"image\/jpeg,image\/png,.jpg,.jpeg,.png\" capture=\"environment\" multiple class=\"hidden\">\r\n \r\n <input type=\"file\" id=\"image-file-input\" accept=\".jpg,.jpeg,.png,image\/jpeg,image\/png\" multiple class=\"hidden\">\r\n <div id=\"image-upload-progress\" class=\"hidden mb-2\">\r\n <div class=\"w-full h-2 bg-gray-200 rounded-full overflow-hidden\">\r\n <div id=\"image-upload-progress-bar\" class=\"h-full bg-blue-500 transition-all duration-200\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <p id=\"image-upload-progress-text\" class=\"text-xs sm:text-sm text-gray-600 mt-1 text-center\"><\/p>\r\n <\/div>\r\n <div id=\"upload-preview\" class=\"hidden\">\r\n <div id=\"image-preview-grid\" class=\"grid grid-cols-2 gap-2 mb-2\"><\/div>\r\n <p id=\"upload-status\" class=\"text-xs sm:text-sm text-gray-600 text-center\"><\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flex flex-col sm:flex-row gap-2 sm:gap-3\">\r\n <button type=\"button\" id=\"confirm-image-btn\" class=\"flex-1 bg-blue-500 hover:bg-blue-600 text-white py-3 rounded-lg min-h-[48px]\">\r\n Confirmar\r\n <\/button>\r\n <button type=\"button\" id=\"close-image-modal\" class=\"flex-1 bg-gray-300 hover:bg-gray-400 py-3 rounded-lg min-h-[48px]\">\r\n Cancelar\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"view-image-modal\" class=\"hidden fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50\" onclick=\"this.classList.add('hidden')\">\r\n <img decoding=\"async\" id=\"view-image-content\" src=\"\" class=\"max-w-full max-h-full object-contain\">\r\n <\/div>\r\n\r\n \r\n <div id=\"video-capture-modal\" class=\"hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-2 sm:p-4\">\r\n <div class=\"bg-white rounded-lg p-4 sm:p-6 max-w-md w-full max-h-[90vh] overflow-y-auto\">\r\n <h3 class=\"text-base sm:text-lg font-bold mb-3 sm:mb-4\">Adicionar V\u00eddeo<\/h3>\r\n \r\n \r\n <div class=\"flex border-b mb-3 sm:mb-4\">\r\n <button type=\"button\" id=\"video-tab-url-btn\" class=\"flex-1 py-3 border-b-2 border-blue-500 text-blue-600 font-semibold text-sm min-h-[48px]\">\r\n <i class=\"fas fa-link mr-1 sm:mr-2\"><\/i><span class=\"hidden sm:inline\">URL<\/span>\r\n <\/button>\r\n <button type=\"button\" id=\"video-tab-upload-btn\" class=\"flex-1 py-3 border-b-2 border-transparent text-gray-600 text-sm min-h-[48px]\">\r\n <i class=\"fas fa-video mr-1 sm:mr-2\"><\/i><span class=\"hidden sm:inline\">Gravar<\/span>\r\n <\/button>\r\n <\/div>\r\n \r\n \r\n <div id=\"video-url-content\" class=\"mb-3 sm:mb-4\">\r\n <input type=\"url\" id=\"video-url-input\" placeholder=\"Cole a URL do v\u00eddeo\"\r\n class=\"w-full px-3 sm:px-4 py-3 border rounded-lg text-base\">\r\n <\/div>\r\n \r\n \r\n <div id=\"video-upload-content\" class=\"hidden mb-3 sm:mb-4\">\r\n \r\n <div class=\"flex gap-2 mb-3\">\r\n <button type=\"button\" id=\"video-camera-btn\"\r\n class=\"flex-1 flex flex-col items-center justify-center gap-1 py-4 rounded-xl border-2 border-purple-400 bg-purple-50 hover:bg-purple-100 active:bg-purple-200 text-purple-700 font-semibold text-sm min-h-[72px] transition\">\r\n <i class=\"fas fa-video text-2xl\"><\/i>\r\n <span>C\u00e2mera<\/span>\r\n <\/button>\r\n <button type=\"button\" id=\"video-gallery-btn\"\r\n class=\"flex-1 flex flex-col items-center justify-center gap-1 py-4 rounded-xl border-2 border-gray-300 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 text-gray-700 font-semibold text-sm min-h-[72px] transition\">\r\n <i class=\"fas fa-film text-2xl\"><\/i>\r\n <span>Galeria<\/span>\r\n <\/button>\r\n <\/div>\r\n \r\n <input type=\"file\" id=\"video-camera-input\" accept=\"video\/mp4,video\/quicktime,.mp4,.mov\" capture=\"environment\" class=\"hidden\">\r\n \r\n <input type=\"file\" id=\"video-file-input\" accept=\".mp4,.mov,video\/mp4,video\/quicktime\" multiple class=\"hidden\">\r\n <div id=\"video-upload-progress\" class=\"hidden mb-2\">\r\n <div class=\"w-full h-2 bg-gray-200 rounded-full overflow-hidden\">\r\n <div id=\"video-upload-progress-bar\" class=\"h-full bg-purple-500 transition-all duration-200\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <p id=\"video-upload-progress-text\" class=\"text-xs sm:text-sm text-gray-600 mt-1 text-center\"><\/p>\r\n <\/div>\r\n <div id=\"video-upload-preview\" class=\"hidden\">\r\n <div id=\"video-preview-grid\" class=\"grid grid-cols-1 gap-2 mb-2\"><\/div>\r\n <p id=\"video-upload-status\" class=\"text-xs sm:text-sm text-gray-600 text-center\"><\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flex flex-col sm:flex-row gap-2 sm:gap-3\">\r\n <button type=\"button\" id=\"confirm-video-btn\" class=\"flex-1 bg-purple-500 hover:bg-purple-600 text-white py-3 rounded-lg min-h-[48px]\">\r\n Confirmar\r\n <\/button>\r\n <button type=\"button\" id=\"close-video-modal\" class=\"flex-1 bg-gray-300 hover:bg-gray-400 py-3 rounded-lg min-h-[48px]\">\r\n Cancelar\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"view-video-modal\" class=\"hidden fixed inset-0 bg-black bg-opacity-95 flex items-center justify-center z-50 p-4\">\r\n <div class=\"relative max-w-4xl w-full\">\r\n <button onclick=\"closeViewVideoModal()\" class=\"absolute -top-10 right-0 text-white hover:text-gray-300 text-2xl z-10\">\r\n <i class=\"fas fa-times\"><\/i>\r\n <\/button>\r\n <video id=\"view-video-content\" src=\"\" class=\"w-full rounded-lg shadow-2xl\" controls autoplay><\/video>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"share-modal\" class=\"hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-2 sm:p-4\">\r\n <div class=\"bg-white rounded-lg p-4 sm:p-6 max-w-md w-full\">\r\n <h3 class=\"text-base sm:text-lg font-bold mb-3 sm:mb-4\">Compartilhar Retorno<\/h3>\r\n <p class=\"text-xs sm:text-sm text-gray-600 mb-3 sm:mb-4\">Copie o link para compartilhar:<\/p>\r\n \r\n <div class=\"flex gap-2 mb-3 sm:mb-4\">\r\n <input type=\"text\" id=\"share-link-input\" readonly \r\n class=\"flex-1 px-3 py-3 border rounded-lg bg-gray-50 text-xs sm:text-sm\">\r\n <button id=\"copy-share-link\" class=\"bg-blue-500 hover:bg-blue-600 text-white px-4 py-3 rounded-lg min-w-[48px]\">\r\n <i class=\"fas fa-copy\"><\/i>\r\n <\/button>\r\n <\/div>\r\n \r\n <div id=\"copy-feedback\" class=\"text-sm text-green-600 text-center mb-3 sm:mb-4 hidden\">\r\n <i class=\"fas fa-check-circle mr-1\"><\/i>Link copiado!\r\n <\/div>\r\n \r\n <div class=\"bg-blue-50 border border-blue-200 rounded-lg p-2 sm:p-3 mb-3 sm:mb-4\">\r\n <p class=\"text-xs text-blue-800\">\r\n <i class=\"fas fa-info-circle mr-1\"><\/i>\r\n Link permite visualizar apenas este retorno.\r\n <\/p>\r\n <\/div>\r\n \r\n <button type=\"button\" id=\"close-share-modal\" class=\"w-full bg-gray-300 hover:bg-gray-400 py-3 rounded-lg min-h-[48px]\">\r\n Fechar\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"barcode-scanner-modal\" class=\"hidden fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 p-2 sm:p-4\">\r\n <div class=\"bg-white rounded-lg p-4 sm:p-6 max-w-lg w-full max-h-[95vh] overflow-y-auto\">\r\n <div class=\"flex justify-between items-center mb-3 sm:mb-4\">\r\n <h3 class=\"text-base sm:text-lg font-bold\">Scanner de C\u00f3digo<\/h3>\r\n <button type=\"button\" id=\"close-scanner-btn\" class=\"text-gray-500 hover:text-gray-700 min-w-[44px] min-h-[44px]\">\r\n <i class=\"fas fa-times text-xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n \r\n <div class=\"bg-gray-100 rounded-lg p-2 sm:p-4 mb-3 sm:mb-4\">\r\n <video id=\"barcode-video\" class=\"w-full rounded-lg\" autoplay playsinline><\/video>\r\n <canvas id=\"barcode-canvas\" class=\"hidden\"><\/canvas>\r\n <\/div>\r\n \r\n <div id=\"barcode-result\" class=\"hidden mb-3 sm:mb-4\">\r\n <div class=\"bg-green-50 border border-green-200 rounded-lg p-3\">\r\n <p class=\"text-xs sm:text-sm text-green-800 font-semibold\">\r\n <i class=\"fas fa-check-circle mr-2\"><\/i>C\u00f3digo detectado:\r\n <\/p>\r\n <p id=\"barcode-value\" class=\"text-base sm:text-lg font-mono text-gray-900 mt-2 break-all\"><\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"barcode-instructions\" class=\"bg-blue-50 border border-blue-200 rounded-lg p-2 sm:p-3 mb-3 sm:mb-4\">\r\n <p class=\"text-xs text-blue-800\">\r\n <i class=\"fas fa-info-circle mr-1\"><\/i>\r\n Aponte a c\u00e2mera para o c\u00f3digo de barras.\r\n <\/p>\r\n <\/div>\r\n \r\n <div class=\"flex flex-col sm:flex-row gap-2 sm:gap-3\">\r\n <button id=\"use-barcode-btn\" class=\"flex-1 bg-green-500 hover:bg-green-600 text-white py-3 rounded-lg hidden min-h-[48px]\">\r\n <i class=\"fas fa-check mr-2\"><\/i>Usar C\u00f3digo\r\n <\/button>\r\n <button id=\"retry-scan-btn\" class=\"flex-1 bg-blue-500 hover:bg-blue-600 text-white py-3 rounded-lg hidden min-h-[48px]\">\r\n <i class=\"fas fa-redo mr-2\"><\/i>Escanear Novamente\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"catalog-modal\" class=\"hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-2 sm:p-4\">\r\n <div class=\"bg-white rounded-lg p-4 sm:p-6 max-w-4xl w-full max-h-[90vh] overflow-y-auto\">\r\n <div class=\"flex justify-between items-center mb-3 sm:mb-4\">\r\n <h3 class=\"text-base sm:text-lg font-bold\">Selecionar Produto<\/h3>\r\n <button type=\"button\" id=\"close-catalog-modal\" class=\"text-gray-500 hover:text-gray-700 min-w-[44px] min-h-[44px]\">\r\n <i class=\"fas fa-times text-xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <input type=\"text\" id=\"catalog-search\" placeholder=\"\ud83d\udd0e Buscar produto...\" \r\n class=\"w-full px-3 sm:px-4 py-3 border rounded-lg mb-3 sm:mb-4 text-base\">\r\n <div id=\"catalog-products-grid\" class=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 sm:gap-4\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"edit-modal\" class=\"hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-2 sm:p-4\">\r\n <div class=\"bg-white rounded-lg p-4 sm:p-6 max-w-4xl w-full max-h-[90vh] overflow-y-auto\">\r\n <div class=\"flex justify-between items-center mb-3 sm:mb-4\">\r\n <h3 class=\"text-base sm:text-lg font-bold\">Editar Retorno<\/h3>\r\n <button type=\"button\" id=\"close-edit-modal\" class=\"text-gray-500 hover:text-gray-700 min-w-[44px] min-h-[44px]\">\r\n <i class=\"fas fa-times text-xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n \r\n <form id=\"edit-return-form\" class=\"space-y-4\">\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">C\u00f3digo do Retorno<\/label>\r\n <input type=\"text\" id=\"edit-code\" class=\"w-full px-3 py-3 border rounded-lg text-base\" required>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Vendedor<\/label>\r\n <input type=\"text\" id=\"edit-seller\" class=\"w-full px-3 py-3 border rounded-lg text-base\" required>\r\n <\/div>\r\n <\/div>\r\n \r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Observa\u00e7\u00f5es<\/label>\r\n <textarea id=\"edit-observations\" class=\"w-full px-3 py-3 border rounded-lg text-base\" rows=\"2\"><\/textarea>\r\n <\/div>\r\n \r\n \r\n <div class=\"border-t pt-4\">\r\n <h4 class=\"font-semibold mb-3\">Produtos<\/h4>\r\n <div id=\"edit-products-list\" class=\"space-y-3\"><\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"border-t pt-4\">\r\n <div class=\"flex justify-between items-center mb-3\">\r\n <h4 class=\"font-semibold\">Fotos e V\u00eddeos<\/h4>\r\n <div class=\"flex gap-2\">\r\n <button type=\"button\" id=\"edit-add-photo-btn\" class=\"bg-blue-500 hover:bg-blue-600 text-white px-3 py-2 rounded-lg text-sm min-h-[44px]\">\r\n <i class=\"fas fa-camera mr-1\"><\/i>Adicionar Foto\r\n <\/button>\r\n <button type=\"button\" id=\"edit-add-video-btn\" class=\"bg-purple-500 hover:bg-purple-600 text-white px-3 py-2 rounded-lg text-sm min-h-[44px]\">\r\n <i class=\"fas fa-video mr-1\"><\/i>Adicionar V\u00eddeo\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <div id=\"edit-media-grid\" class=\"grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2\"><\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"flex flex-col sm:flex-row gap-2 sm:gap-3 pt-4 border-t\">\r\n <button type=\"submit\" id=\"save-edit-btn\" class=\"flex-1 bg-green-500 hover:bg-green-600 text-white py-3 rounded-lg font-semibold min-h-[48px]\">\r\n <i class=\"fas fa-save mr-2\"><\/i>Salvar Altera\u00e7\u00f5es\r\n <\/button>\r\n <button type=\"button\" id=\"cancel-edit-btn\" class=\"flex-1 bg-gray-300 hover:bg-gray-400 py-3 rounded-lg font-semibold min-h-[48px]\">\r\n Cancelar\r\n <\/button>\r\n <\/div>\r\n <div id=\"edit-save-feedback\" class=\"text-sm text-center mt-2\"><\/div>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <template id=\"product-entry-template\">\r\n <div class=\"product-entry border border-gray-300 rounded-lg p-3 sm:p-4 mb-3 sm:mb-4\">\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3 sm:gap-4\">\r\n <div class=\"sm:col-span-2\">\r\n <label class=\"block text-sm font-medium mb-1\">Produto<\/label>\r\n <div class=\"relative\">\r\n <input type=\"text\" class=\"product-name w-full px-3 py-3 border rounded-lg pr-12 text-base\" required autocomplete=\"off\">\r\n <button type=\"button\" class=\"search-catalog-btn absolute right-2 top-1\/2 -translate-y-1\/2 text-blue-500 hover:text-blue-700 min-w-[44px] min-h-[44px] flex items-center justify-center\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <\/button>\r\n \r\n <div class=\"product-suggestions hidden absolute z-50 w-full bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto mt-1\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Quantidade<\/label>\r\n <input type=\"number\" class=\"product-quantity w-full px-3 py-3 border rounded-lg text-base\" value=\"1\" min=\"1\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Status<\/label>\r\n <select class=\"return-status w-full px-3 py-3 border rounded-lg text-base\">\r\n <option value=\"bom\">Bom<\/option>\r\n <option value=\"ruim\">Ruim<\/option>\r\n <option value=\"quebrado\">Quebrado<\/option>\r\n <option value=\"itens-faltando\">Itens faltando<\/option>\r\n <option value=\"ao-remetente\">Ao remetente<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 mt-3 sm:mt-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Foto do Produto<\/label>\r\n <div class=\"flex items-center space-x-2\">\r\n <img decoding=\"async\" class=\"image-placeholder w-16 h-16 sm:w-12 sm:h-12 object-cover rounded border cursor-pointer\" \r\n src=\"https:\/\/placehold.co\/100x100\/e0e0e0\/999999?text=Produto\" data-type=\"product\">\r\n <input type=\"hidden\" class=\"product-photo-data\">\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">\r\n <i class=\"fas fa-tag text-yellow-600 mr-1\"><\/i>Foto da Etiqueta\r\n <\/label>\r\n <div class=\"flex items-center space-x-2\">\r\n <img decoding=\"async\" class=\"image-placeholder w-16 h-16 sm:w-12 sm:h-12 object-cover rounded border-2 border-yellow-400 cursor-pointer hover:border-yellow-500 transition-colors\" \r\n src=\"https:\/\/placehold.co\/100x100\/fef3c7\/d97706?text=Etiqueta\" data-type=\"label\">\r\n <input type=\"hidden\" class=\"label-photo-data\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button type=\"button\" class=\"remove-product-button mt-3 sm:mt-4 text-red-600 hover:text-red-800 text-sm py-2 px-3 min-h-[44px]\">\r\n <i class=\"fas fa-trash mr-1\"><\/i>Remover Produto\r\n <\/button>\r\n <\/div>\r\n <\/template>\r\n\r\n <script>\r\n \/* ===== UPLOAD MANAGER ===== *\/\r\n window.UploadManager = (function () {\r\n var IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png'];\r\n var VIDEO_EXTENSIONS = ['mp4', 'mov'];\r\n var IMAGE_MIME = ['image\/jpeg', 'image\/jpg', 'image\/png'];\r\n var VIDEO_MIME = ['video\/mp4', 'video\/quicktime'];\r\n var _pendingObjectUrls = [];\r\n\r\n function getFileExtension(fileName) {\r\n if (!fileName || fileName.indexOf('.') === -1) return '';\r\n return fileName.split('.').pop().toLowerCase();\r\n }\r\n\r\n function buildFileUrl(endpoint, bucketId, fileId, projectId, mediaType) {\r\n var videoParam = mediaType === 'video' ? '&type=video' : '';\r\n return endpoint + '\/storage\/buckets\/' + bucketId + '\/files\/' + fileId + '\/view?project=' + projectId + videoParam;\r\n }\r\n\r\n function validateFiles(files, mediaType, maxSizeMB) {\r\n var allowedExtensions = mediaType === 'video' ? VIDEO_EXTENSIONS : IMAGE_EXTENSIONS;\r\n var allowedMime = mediaType === 'video' ? VIDEO_MIME : IMAGE_MIME;\r\n var maxSize = maxSizeMB * 1024 * 1024;\r\n var invalid = [];\r\n var valid = [];\r\n for (var i = 0; i < files.length; i++) {\r\n var file = files[i];\r\n var extension = getFileExtension(file.name);\r\n var mimeOk = allowedMime.indexOf(file.type) !== -1;\r\n var extOk = allowedExtensions.indexOf(extension) !== -1;\r\n var sizeOk = file.size <= maxSize;\r\n if (!sizeOk || (!mimeOk && !extOk)) {\r\n invalid.push({\r\n file: file,\r\n reason: !sizeOk\r\n ? 'Arquivo excede ' + maxSizeMB + 'MB'\r\n : 'Tipo inv\u00e1lido. Permitidos: ' + allowedExtensions.join(', ')\r\n });\r\n } else {\r\n valid.push(file);\r\n }\r\n }\r\n return { valid: valid, invalid: invalid };\r\n }\r\n\r\n function createUploadXHR(opts) {\r\n return new Promise(function (resolve, reject) {\r\n var xhr = new XMLHttpRequest();\r\n var url = opts.endpoint + '\/storage\/buckets\/' + opts.bucketId + '\/files';\r\n var formData = new FormData();\r\n formData.append('fileId', 'unique()');\r\n formData.append('file', opts.file);\r\n xhr.open('POST', url, true);\r\n xhr.withCredentials = true;\r\n xhr.setRequestHeader('X-Appwrite-Project', opts.projectId);\r\n xhr.upload.onprogress = function (event) {\r\n if (!event.lengthComputable || typeof opts.onProgress !== 'function') return;\r\n opts.onProgress(Math.round((event.loaded \/ event.total) * 100));\r\n };\r\n xhr.onload = function () {\r\n if (xhr.status < 200 || xhr.status >= 300) {\r\n reject(new Error('Falha no upload (' + xhr.status + '): ' + (xhr.responseText || 'sem resposta')));\r\n return;\r\n }\r\n try { resolve(JSON.parse(xhr.responseText)); }\r\n catch (e) { reject(new Error('Falha ao processar resposta do upload.')); }\r\n };\r\n xhr.onerror = function () { reject(new Error('Erro de rede durante upload.')); };\r\n xhr.onabort = function () { reject(new Error('Upload cancelado.')); };\r\n xhr.send(formData);\r\n });\r\n }\r\n\r\n function uploadFiles(opts) {\r\n var files = opts.files;\r\n var uploaded = [];\r\n var index = 0;\r\n\r\n function next() {\r\n if (index >= files.length) {\r\n if (typeof opts.onProgress === 'function') opts.onProgress(100, files.length, files.length, null);\r\n return Promise.resolve(uploaded);\r\n }\r\n var file = files[index];\r\n var i = index;\r\n index++;\r\n var fileProgressBase = Math.floor((i \/ files.length) * 100);\r\n var fileProgressSpan = Math.ceil(100 \/ files.length);\r\n return createUploadXHR({\r\n endpoint: opts.endpoint,\r\n projectId: opts.projectId,\r\n bucketId: opts.bucketId,\r\n file: file,\r\n onProgress: function (filePercent) {\r\n var aggregate = Math.min(100, fileProgressBase + Math.round((filePercent \/ 100) * fileProgressSpan));\r\n if (typeof opts.onProgress === 'function') opts.onProgress(aggregate, i, files.length, file.name);\r\n }\r\n }).then(function (result) {\r\n var fileUrl = buildFileUrl(opts.endpoint, opts.bucketId, result.$id, opts.projectId, opts.mediaType);\r\n var payload = { url: fileUrl, type: opts.mediaType, name: file.name, size: file.size };\r\n uploaded.push(payload);\r\n if (typeof opts.onFileComplete === 'function') opts.onFileComplete(payload, i, files.length);\r\n return next();\r\n });\r\n }\r\n return next();\r\n }\r\n\r\n function createPreviewData(file, mediaType) {\r\n if (mediaType === 'video') {\r\n try {\r\n var objectUrl = URL.createObjectURL(file);\r\n return Promise.resolve({ previewUrl: objectUrl, _objectUrl: true, mediaType: mediaType, name: file.name, size: file.size });\r\n } catch (e) {\r\n return Promise.reject(new Error('Falha ao criar preview para ' + file.name + ': ' + e.message));\r\n }\r\n }\r\n return new Promise(function (resolve, reject) {\r\n var reader = new FileReader();\r\n reader.onload = function (event) {\r\n resolve({ previewUrl: event.target.result, mediaType: mediaType, name: file.name, size: file.size });\r\n };\r\n reader.onerror = function () { reject(new Error('Falha ao gerar preview para ' + file.name)); };\r\n reader.readAsDataURL(file);\r\n });\r\n }\r\n\r\n function createPreviews(files, mediaType) {\r\n var previews = [];\r\n var i = 0;\r\n function next() {\r\n if (i >= files.length) return Promise.resolve(previews);\r\n var file = files[i++];\r\n return createPreviewData(file, mediaType).then(function (preview) {\r\n if (preview._objectUrl) _pendingObjectUrls.push(preview.previewUrl);\r\n previews.push(preview);\r\n return next();\r\n });\r\n }\r\n return next();\r\n }\r\n\r\n function revokeAllPendingObjectUrls() {\r\n _pendingObjectUrls.forEach(function (url) { try { URL.revokeObjectURL(url); } catch (e) {} });\r\n _pendingObjectUrls = [];\r\n console.log('[UploadManager] Object URLs de v\u00eddeo revogados.');\r\n }\r\n\r\n return {\r\n validateFiles: validateFiles,\r\n uploadFiles: uploadFiles,\r\n createPreviews: createPreviews,\r\n revokeAllPendingObjectUrls: revokeAllPendingObjectUrls,\r\n limits: { imageMB: 10, videoMB: 100 },\r\n accepted: { image: IMAGE_EXTENSIONS, video: VIDEO_EXTENSIONS }\r\n };\r\n }());\r\n\r\n if (!window.UploadManager || typeof window.UploadManager.validateFiles !== 'function') {\r\n console.error('[UploadManager] FALHA NA INICIALIZA\u00c7\u00c3O \u2014 verifique erros de sintaxe acima.');\r\n } else {\r\n console.log('[UploadManager] Carregado com sucesso.');\r\n }\r\n <\/script>\r\n <script>\r\n \/\/ ===== CONFIGURA\u00c7\u00c3O DO APPWRITE =====\r\n const { Client, Databases, Account, Query, ID } = Appwrite;\r\n\r\n const APPWRITE_ENDPOINT = 'https:\/\/nacional-appwrite.nounpw.easypanel.host\/v1';\r\n const APPWRITE_PROJECT_ID = '691e347500002a3f9fb8';\r\n\r\n const client = new Client();\r\n client\r\n .setEndpoint(APPWRITE_ENDPOINT)\r\n .setProject(APPWRITE_PROJECT_ID);\r\n\r\n const databases = new Databases(client);\r\n const account = new Account(client);\r\n \r\n \/\/ Cliente p\u00fablico (sem autentica\u00e7\u00e3o) para visualiza\u00e7\u00e3o compartilhada\r\n const publicClient = new Client();\r\n publicClient\r\n .setEndpoint(APPWRITE_ENDPOINT)\r\n .setProject(APPWRITE_PROJECT_ID);\r\n \r\n const publicDatabases = new Databases(publicClient);\r\n\r\n const DATABASE_ID = '691fbeb60019c2d815e3';\r\n const BUCKET_ID = '691fc01e001b6e84ffc3'; \/\/ Bucket: armazenamento\r\n const COLLECTIONS = {\r\n returnedProducts: '691fbed90000e09e4020',\r\n returnProducts: '691fbee4000bc9756947',\r\n returnProductPhotos: '691fbef3003b494ecc18',\r\n productCatalog: '691fbec30020ac5a56ca'\r\n };\r\n\r\n \/\/ ===== ESTADO GLOBAL =====\r\n let currentUser = null;\r\n let state = {\r\n products: [],\r\n returned: [],\r\n archived: []\r\n };\r\n let currentImageTarget = null;\r\n let currentVideoTarget = null;\r\n let productPhotos = []; \/\/ Array de objetos: {url: string, type: 'image'|'video'}\r\n let uploadedImageUrls = [];\r\n let uploadedVideoUrls = [];\r\n const REGISTER_DRAFT_KEY = 'returns-register-draft-v1';\r\n const MODAL_STATE_KEY = 'returns-modal-state-v1';\r\n\r\n \/\/ ===== ELEMENTOS DO DOM =====\r\n const loginScreen = document.getElementById('login-screen');\r\n const mainSystem = document.getElementById('main-system');\r\n const loginForm = document.getElementById('login-form');\r\n const loginFeedback = document.getElementById('login-feedback');\r\n const registerBtn = document.getElementById('register-btn');\r\n const logoutBtn = document.getElementById('logout-btn');\r\n const userDisplayName = document.getElementById('user-display-name');\r\n \r\n const registerForm = document.getElementById('register-form');\r\n const returnCodeInput = document.getElementById('return-code');\r\n const sellerNameInput = document.getElementById('seller-name');\r\n const salesChannelInput = document.getElementById('sales-channel');\r\n const returnObservationsInput = document.getElementById('return-observations');\r\n const productEntriesContainer = document.getElementById('product-entries-container');\r\n const addProductButton = document.getElementById('add-product-button');\r\n const productPhotosContainer = document.getElementById('product-photos-container');\r\n const addProductPhotoBtn = document.getElementById('add-product-photo-btn');\r\n const photoCountIndicator = document.getElementById('photo-count-indicator');\r\n \r\n const allProductsList = document.getElementById('all-products-list');\r\n const archivedProductsList = document.getElementById('archived-products-list');\r\n const mostReturnedList = document.getElementById('most-returned-list');\r\n const productCatalogList = document.getElementById('product-catalog-list');\r\n \r\n const addProductForm = document.getElementById('add-product-form');\r\n const newProductNameInput = document.getElementById('new-product-name');\r\n const newProductPhotoInput = document.getElementById('new-product-photo');\r\n const addProductFeedback = document.getElementById('add-product-feedback');\r\n const excelUpload = document.getElementById('excel-upload');\r\n const uploadExcelFeedback = document.getElementById('upload-excel-feedback');\r\n const downloadTemplateBtn = document.getElementById('download-template-btn');\r\n \r\n const imageCaptureModal = document.getElementById('image-capture-modal');\r\n const imageUrlInput = document.getElementById('image-url-input');\r\n const confirmImageBtn = document.getElementById('confirm-image-btn');\r\n const closeImageModal = document.getElementById('close-image-modal');\r\n const viewImageModal = document.getElementById('view-image-modal');\r\n const viewImageContent = document.getElementById('view-image-content');\r\n \r\n const videoCaptureModal = document.getElementById('video-capture-modal');\r\n const videoUrlInput = document.getElementById('video-url-input');\r\n const confirmVideoBtn = document.getElementById('confirm-video-btn');\r\n const closeVideoModal = document.getElementById('close-video-modal');\r\n const viewVideoModal = document.getElementById('view-video-modal');\r\n const viewVideoContent = document.getElementById('view-video-content');\r\n const addProductVideoBtn = document.getElementById('add-product-video-btn');\r\n \r\n const videoTabUrlBtn = document.getElementById('video-tab-url-btn');\r\n const videoTabUploadBtn = document.getElementById('video-tab-upload-btn');\r\n const videoUrlContent = document.getElementById('video-url-content');\r\n const videoUploadContent = document.getElementById('video-upload-content');\r\n const videoFileInput = document.getElementById('video-file-input');\r\n const videoCameraInput = document.getElementById('video-camera-input');\r\n const videoCameraBtn = document.getElementById('video-camera-btn');\r\n const videoGalleryBtn = document.getElementById('video-gallery-btn');\r\n const videoUploadPreview = document.getElementById('video-upload-preview');\r\n const videoPreviewGrid = document.getElementById('video-preview-grid');\r\n const videoUploadStatus = document.getElementById('video-upload-status');\r\n const videoUploadProgress = document.getElementById('video-upload-progress');\r\n const videoUploadProgressBar = document.getElementById('video-upload-progress-bar');\r\n const videoUploadProgressText = document.getElementById('video-upload-progress-text');\r\n \r\n const tabUrlBtn = document.getElementById('tab-url-btn');\r\n const tabUploadBtn = document.getElementById('tab-upload-btn');\r\n const urlContent = document.getElementById('url-content');\r\n const uploadContent = document.getElementById('upload-content');\r\n const imageFileInput = document.getElementById('image-file-input');\r\n const imageCameraInput = document.getElementById('image-camera-input');\r\n const imageCameraBtn = document.getElementById('image-camera-btn');\r\n const imageGalleryBtn = document.getElementById('image-gallery-btn');\r\n const uploadPreview = document.getElementById('upload-preview');\r\n const imagePreviewGrid = document.getElementById('image-preview-grid');\r\n const uploadStatus = document.getElementById('upload-status');\r\n const imageUploadProgress = document.getElementById('image-upload-progress');\r\n const imageUploadProgressBar = document.getElementById('image-upload-progress-bar');\r\n const imageUploadProgressText = document.getElementById('image-upload-progress-text');\r\n \r\n const productEntryTemplate = document.getElementById('product-entry-template');\r\n const searchAllInput = document.getElementById('search-all');\r\n const searchArchivedInput = document.getElementById('search-archived');\r\n \r\n const catalogModal = document.getElementById('catalog-modal');\r\n const closeCatalogModal = document.getElementById('close-catalog-modal');\r\n const catalogSearch = document.getElementById('catalog-search');\r\n const catalogProductsGrid = document.getElementById('catalog-products-grid');\r\n \r\n const editModal = document.getElementById('edit-modal');\r\n const closeEditModal = document.getElementById('close-edit-modal');\r\n const cancelEditBtn = document.getElementById('cancel-edit-btn');\r\n const editReturnForm = document.getElementById('edit-return-form');\r\n const editCodeInput = document.getElementById('edit-code');\r\n const editSellerInput = document.getElementById('edit-seller');\r\n const editObservationsInput = document.getElementById('edit-observations');\r\n const editProductsList = document.getElementById('edit-products-list');\r\n const editMediaGrid = document.getElementById('edit-media-grid');\r\n const editAddPhotoBtn = document.getElementById('edit-add-photo-btn');\r\n const editAddVideoBtn = document.getElementById('edit-add-video-btn');\r\n const saveEditBtn = document.getElementById('save-edit-btn');\r\n const editSaveFeedback = document.getElementById('edit-save-feedback');\r\n \r\n const shareModal = document.getElementById('share-modal');\r\n const shareLinkInput = document.getElementById('share-link-input');\r\n const copyShareLink = document.getElementById('copy-share-link');\r\n const closeShareModal = document.getElementById('close-share-modal');\r\n const copyFeedback = document.getElementById('copy-feedback');\r\n \r\n const barcodeScannerModal = document.getElementById('barcode-scanner-modal');\r\n const scanBarcodeBtn = document.getElementById('scan-barcode-btn');\r\n const closeScannerBtn = document.getElementById('close-scanner-btn');\r\n const barcodeVideo = document.getElementById('barcode-video');\r\n const barcodeCanvas = document.getElementById('barcode-canvas');\r\n const barcodeResult = document.getElementById('barcode-result');\r\n const barcodeValue = document.getElementById('barcode-value');\r\n const useBarcodeBtn = document.getElementById('use-barcode-btn');\r\n const retryScanBtn = document.getElementById('retry-scan-btn');\r\n const barcodeInstructions = document.getElementById('barcode-instructions');\r\n \r\n let currentProductEntry = null;\r\n let barcodeStream = null;\r\n let barcodeDetected = '';\r\n let isQuaggaInitialized = false;\r\n let editingReturnId = null;\r\n let editingReturnData = null;\r\n let editProductPhotos = []; \/\/ Fotos e v\u00eddeos do retorno sendo editado\r\n\r\n window.addEventListener('error', (event) => {\r\n console.error('[APP][ERROR]', event.message, event.error);\r\n });\r\n\r\n window.addEventListener('unhandledrejection', (event) => {\r\n console.error('[APP][PROMISE_REJECTION]', event.reason);\r\n });\r\n\r\n ['login-form', 'register-form', 'add-product-form', 'edit-return-form'].forEach((formId) => {\r\n const form = document.getElementById(formId);\r\n if (!form) return;\r\n form.addEventListener('submit', (event) => {\r\n event.preventDefault();\r\n });\r\n });\r\n\r\n \/\/ ===== AUTENTICA\u00c7\u00c3O =====\r\n loginForm.addEventListener('submit', async (e) => {\r\n e.preventDefault();\r\n const email = document.getElementById('email').value;\r\n const password = document.getElementById('password').value;\r\n \r\n try {\r\n await account.createEmailPasswordSession(email, password);\r\n currentUser = await account.get();\r\n showMainSystem();\r\n loadAllData();\r\n } catch (error) {\r\n loginFeedback.textContent = 'Erro no login: ' + error.message;\r\n }\r\n });\r\n\r\n registerBtn.addEventListener('click', async () => {\r\n const email = prompt('Digite o email:');\r\n const password = prompt('Digite a senha (m\u00ednimo 8 caracteres):');\r\n const name = prompt('Digite seu nome:');\r\n \r\n if (email && password && name) {\r\n try {\r\n await account.create(ID.unique(), email, password, name);\r\n alert('Conta criada! Fa\u00e7a login agora.');\r\n } catch (error) {\r\n alert('Erro ao criar conta: ' + error.message);\r\n }\r\n }\r\n });\r\n\r\n logoutBtn.addEventListener('click', async () => {\r\n try {\r\n await account.deleteSession('current');\r\n currentUser = null;\r\n state = { products: [], returned: [], archived: [] };\r\n mainSystem.classList.add('hidden');\r\n loginScreen.classList.remove('hidden');\r\n loginForm.reset();\r\n userDisplayName.textContent = '';\r\n } catch (error) {\r\n console.error('Erro ao sair:', error);\r\n }\r\n });\r\n\r\n function showMainSystem() {\r\n loginScreen.classList.add('hidden');\r\n mainSystem.classList.remove('hidden');\r\n userDisplayName.textContent = currentUser.name || currentUser.email;\r\n }\r\n\r\n \/\/ ===== NAVEGA\u00c7\u00c3O POR TABS =====\r\n document.querySelectorAll('.nav-link').forEach(link => {\r\n link.addEventListener('click', () => {\r\n const tabName = link.dataset.tab;\r\n switchTab(tabName);\r\n });\r\n });\r\n\r\n function switchTab(tabName) {\r\n document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));\r\n document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));\r\n \r\n document.querySelector(`[data-tab=\"${tabName}\"]`).classList.add('active');\r\n document.getElementById(`tab-${tabName}`).classList.add('active');\r\n }\r\n\r\n [returnCodeInput, sellerNameInput, salesChannelInput, returnObservationsInput].forEach((field) => {\r\n field.addEventListener('input', saveRegisterDraft);\r\n field.addEventListener('change', saveRegisterDraft);\r\n });\r\n\r\n \/\/ ===== CARREGAR DADOS =====\r\n async function loadAllData() {\r\n await Promise.all([\r\n loadCatalog(),\r\n loadReturns(),\r\n loadArchived()\r\n ]);\r\n updateCounts();\r\n calculateRanking();\r\n }\r\n\r\n async function loadCatalog() {\r\n try {\r\n \/\/ Carregar todos os produtos usando pagina\u00e7\u00e3o\r\n let allProducts = [];\r\n let offset = 0;\r\n const limit = 100; \/\/ Buscar 100 por vez\r\n let hasMore = true;\r\n \r\n while (hasMore) {\r\n const response = await databases.listDocuments(\r\n DATABASE_ID, \r\n COLLECTIONS.productCatalog,\r\n [\r\n Query.limit(limit),\r\n Query.offset(offset)\r\n ]\r\n );\r\n \r\n allProducts = allProducts.concat(response.documents);\r\n offset += limit;\r\n hasMore = response.documents.length === limit;\r\n \r\n console.log(`Carregados ${allProducts.length} produtos at\u00e9 agora...`);\r\n }\r\n \r\n state.products = allProducts;\r\n console.log('Total de produtos carregados:', state.products.length);\r\n renderCatalog();\r\n } catch (error) {\r\n console.error('Erro ao carregar cat\u00e1logo:', error);\r\n }\r\n }\r\n\r\n async function loadReturns() {\r\n try {\r\n \/\/ Carregar todos os retornos ativos com pagina\u00e7\u00e3o\r\n let allReturns = [];\r\n let offset = 0;\r\n const limit = 100;\r\n let hasMore = true;\r\n \r\n while (hasMore) {\r\n const response = await databases.listDocuments(\r\n DATABASE_ID, \r\n COLLECTIONS.returnedProducts,\r\n [\r\n Query.equal('archived', false),\r\n Query.limit(limit),\r\n Query.offset(offset)\r\n ]\r\n );\r\n \r\n allReturns = allReturns.concat(response.documents);\r\n offset += limit;\r\n hasMore = response.documents.length === limit;\r\n }\r\n \r\n \/\/ Carregar produtos e fotos de cada retorno\r\n for (let returnDoc of allReturns) {\r\n returnDoc.products = await loadReturnProducts(returnDoc.$id);\r\n returnDoc.productPhotos = await loadReturnPhotos(returnDoc.$id);\r\n }\r\n \r\n state.returned = allReturns;\r\n renderReturns();\r\n } catch (error) {\r\n console.error('Erro ao carregar retornos:', error);\r\n }\r\n }\r\n\r\n async function loadArchived() {\r\n try {\r\n \/\/ Carregar todos os retornos arquivados com pagina\u00e7\u00e3o\r\n let allArchived = [];\r\n let offset = 0;\r\n const limit = 100;\r\n let hasMore = true;\r\n \r\n while (hasMore) {\r\n const response = await databases.listDocuments(\r\n DATABASE_ID,\r\n COLLECTIONS.returnedProducts,\r\n [\r\n Query.equal('archived', true),\r\n Query.limit(limit),\r\n Query.offset(offset)\r\n ]\r\n );\r\n \r\n allArchived = allArchived.concat(response.documents);\r\n offset += limit;\r\n hasMore = response.documents.length === limit;\r\n }\r\n \r\n for (let returnDoc of allArchived) {\r\n returnDoc.products = await loadReturnProducts(returnDoc.$id);\r\n returnDoc.productPhotos = await loadReturnPhotos(returnDoc.$id);\r\n }\r\n \r\n state.archived = allArchived;\r\n renderArchived();\r\n } catch (error) {\r\n console.error('Erro ao carregar arquivados:', error);\r\n }\r\n }\r\n\r\n async function loadReturnProducts(returnId) {\r\n try {\r\n let allProducts = [];\r\n let offset = 0;\r\n const limit = 100;\r\n let hasMore = true;\r\n \r\n while (hasMore) {\r\n const response = await databases.listDocuments(\r\n DATABASE_ID,\r\n COLLECTIONS.returnProducts,\r\n [\r\n Query.equal('returnId', returnId),\r\n Query.limit(limit),\r\n Query.offset(offset)\r\n ]\r\n );\r\n \r\n allProducts = allProducts.concat(response.documents);\r\n offset += limit;\r\n hasMore = response.documents.length === limit;\r\n }\r\n \r\n return allProducts;\r\n } catch (error) {\r\n console.error('Erro ao carregar produtos do retorno:', error);\r\n return [];\r\n }\r\n }\r\n\r\n async function loadReturnPhotos(returnId) {\r\n try {\r\n let allPhotos = [];\r\n let offset = 0;\r\n const limit = 100;\r\n let hasMore = true;\r\n \r\n while (hasMore) {\r\n const response = await databases.listDocuments(\r\n DATABASE_ID,\r\n COLLECTIONS.returnProductPhotos,\r\n [\r\n Query.equal('returnId', returnId),\r\n Query.orderAsc('order'),\r\n Query.limit(limit),\r\n Query.offset(offset)\r\n ]\r\n );\r\n \r\n allPhotos = allPhotos.concat(response.documents);\r\n offset += limit;\r\n hasMore = response.documents.length === limit;\r\n }\r\n \r\n \/\/ Retornar array com URL e tipo\r\n return allPhotos.map(doc => ({\r\n url: doc.photoUrl,\r\n type: doc.mediaType || detectMediaType(doc.photoUrl) \/\/ Detectar tipo se n\u00e3o tiver\r\n }));\r\n } catch (error) {\r\n console.error('Erro ao carregar fotos:', error);\r\n return [];\r\n }\r\n }\r\n \r\n \/\/ Fun\u00e7\u00e3o auxiliar para detectar tipo de m\u00eddia pela URL\r\n function detectMediaType(url) {\r\n if (!url) return 'image';\r\n const lowerUrl = url.toLowerCase();\r\n \r\n \/\/ Detectar v\u00eddeos por par\u00e2metro na URL\r\n if (lowerUrl.includes('type=video') || lowerUrl.includes('&video')) {\r\n console.log('V\u00eddeo detectado (par\u00e2metro):', url);\r\n return 'video';\r\n }\r\n \r\n \/\/ Detectar v\u00eddeos por extens\u00e3o\r\n const videoExtensions = ['.mp4', '.webm', '.mov', '.avi', '.mkv', '.flv', '.wmv', '.m4v'];\r\n const hasVideoExtension = videoExtensions.some(ext => lowerUrl.includes(ext));\r\n const hasVideoPath = lowerUrl.includes('video') || lowerUrl.includes('\/videos\/');\r\n \r\n if (hasVideoExtension || hasVideoPath) {\r\n console.log('V\u00eddeo detectado (extens\u00e3o\/path):', url);\r\n return 'video';\r\n }\r\n \r\n return 'image';\r\n }\r\n\r\n function getRegisterDraftPayload() {\r\n const products = Array.from(productEntriesContainer.querySelectorAll('.product-entry')).map((entry) => ({\r\n name: entry.querySelector('.product-name')?.value || '',\r\n quantity: entry.querySelector('.product-quantity')?.value || '1',\r\n status: entry.querySelector('.return-status')?.value || 'bom',\r\n photo: entry.querySelector('.product-photo-data')?.value || '',\r\n labelPhoto: entry.querySelector('.label-photo-data')?.value || ''\r\n }));\r\n\r\n return {\r\n code: returnCodeInput.value || '',\r\n sellerName: sellerNameInput.value || '',\r\n salesChannel: salesChannelInput.value || '',\r\n observations: returnObservationsInput.value || '',\r\n products,\r\n productPhotos: productPhotos || [],\r\n activeTab: document.querySelector('.nav-link.active')?.dataset?.tab || 'register'\r\n };\r\n }\r\n\r\n function saveRegisterDraft() {\r\n try {\r\n const payload = getRegisterDraftPayload();\r\n localStorage.setItem(REGISTER_DRAFT_KEY, JSON.stringify(payload));\r\n } catch (error) {\r\n console.error('[DRAFT] Falha ao salvar rascunho:', error);\r\n }\r\n }\r\n\r\n function clearRegisterDraft() {\r\n localStorage.removeItem(REGISTER_DRAFT_KEY);\r\n }\r\n\r\n function restoreRegisterDraft() {\r\n try {\r\n const raw = localStorage.getItem(REGISTER_DRAFT_KEY);\r\n if (!raw) return;\r\n\r\n const draft = JSON.parse(raw);\r\n if (!draft) return;\r\n\r\n returnCodeInput.value = draft.code || '';\r\n sellerNameInput.value = draft.sellerName || '';\r\n salesChannelInput.value = draft.salesChannel || '';\r\n returnObservationsInput.value = draft.observations || '';\r\n\r\n productEntriesContainer.innerHTML = '';\r\n if (Array.isArray(draft.products) && draft.products.length > 0) {\r\n draft.products.forEach((product) => addProductEntry(product));\r\n } else {\r\n addProductEntry();\r\n }\r\n\r\n productPhotos = Array.isArray(draft.productPhotos) ? draft.productPhotos : [];\r\n renderProductPhotos();\r\n\r\n if (draft.activeTab) {\r\n try { switchTab(draft.activeTab); } catch (e) { console.warn('[DRAFT] Falha ao restaurar aba:', e); }\r\n }\r\n } catch (error) {\r\n console.error('[DRAFT] Falha ao restaurar rascunho:', error);\r\n }\r\n }\r\n\r\n \/\/ ===== REGISTRAR RETORNO =====\r\n registerForm.addEventListener('submit', async (e) => {\r\n e.preventDefault();\r\n \r\n if (!sellerNameInput.value.trim()) {\r\n alert('Por favor, informe o nome do vendedor.');\r\n return;\r\n }\r\n \r\n if (!salesChannelInput.value) {\r\n alert('Por favor, selecione o canal de venda.');\r\n return;\r\n }\r\n \r\n try {\r\n \/\/ 1. Criar retorno principal\r\n const returnDoc = await databases.createDocument(\r\n DATABASE_ID,\r\n COLLECTIONS.returnedProducts,\r\n ID.unique(),\r\n {\r\n code: returnCodeInput.value.trim(),\r\n observations: returnObservationsInput.value.trim(),\r\n sellerName: sellerNameInput.value.trim(),\r\n salesChannel: salesChannelInput.value,\r\n date: new Date().toISOString(),\r\n createdBy_email: currentUser.email,\r\n createdBy_uid: currentUser.$id,\r\n createdBy_displayName: currentUser.name || currentUser.email,\r\n createdAt: new Date().toISOString(),\r\n archived: false\r\n }\r\n );\r\n \r\n const returnId = returnDoc.$id;\r\n \r\n \/\/ 2. Criar produtos do retorno\r\n const productEntries = productEntriesContainer.querySelectorAll('.product-entry');\r\n for (let entry of productEntries) {\r\n await databases.createDocument(\r\n DATABASE_ID,\r\n COLLECTIONS.returnProducts,\r\n ID.unique(),\r\n {\r\n returnId: returnId,\r\n name: entry.querySelector('.product-name').value.trim(),\r\n quantity: parseInt(entry.querySelector('.product-quantity').value) || 1,\r\n status: entry.querySelector('.return-status').value,\r\n photo: entry.querySelector('.product-photo-data').value,\r\n labelPhoto: entry.querySelector('.label-photo-data').value\r\n }\r\n );\r\n }\r\n \r\n \/\/ 3. Criar fotos e v\u00eddeos do produto\r\n for (let i = 0; i < productPhotos.length; i++) {\r\n const item = productPhotos[i];\r\n const url = item.url || item; \/\/ Compatibilidade com formato antigo\r\n const type = item.type || 'image'; \/\/ Default para image\r\n \r\n await databases.createDocument(\r\n DATABASE_ID,\r\n COLLECTIONS.returnProductPhotos,\r\n ID.unique(),\r\n {\r\n returnId: returnId,\r\n photoUrl: url,\r\n \/\/ mediaType: type, \/\/ TODO: Adicionar atributo 'mediaType' (string) na cole\u00e7\u00e3o returnProductPhotos no Appwrite\r\n order: i,\r\n uploadedAt: new Date().toISOString()\r\n }\r\n );\r\n }\r\n \r\n \/\/ Limpar formul\u00e1rio\r\n registerForm.reset();\r\n productEntriesContainer.innerHTML = '';\r\n productPhotos = [];\r\n renderProductPhotos();\r\n addProductEntry();\r\n clearRegisterDraft();\r\n \r\n alert('Retorno registrado com sucesso!');\r\n switchTab('all');\r\n loadAllData();\r\n \r\n } catch (error) {\r\n console.error('Erro ao salvar retorno:', error);\r\n alert('Erro ao salvar retorno: ' + error.message);\r\n }\r\n });\r\n\r\n \/\/ ===== GERENCIAR PRODUTOS DO FORMUL\u00c1RIO =====\r\n addProductButton.addEventListener('click', () => addProductEntry());\r\n\r\n function addProductEntry(initialData = null) {\r\n const newEntry = productEntryTemplate.content.cloneNode(true);\r\n const entryElement = newEntry.querySelector('.product-entry');\r\n \r\n \/\/ Event listeners para imagens\r\n newEntry.querySelectorAll('.image-placeholder').forEach(img => {\r\n img.addEventListener('click', () => {\r\n currentImageTarget = img;\r\n openImageCaptureModal();\r\n });\r\n });\r\n \r\n \/\/ Event listener para autocomplete no campo de produto\r\n const productNameInput = newEntry.querySelector('.product-name');\r\n const suggestionsDiv = newEntry.querySelector('.product-suggestions');\r\n \r\n productNameInput.addEventListener('input', function() {\r\n const searchTerm = this.value.trim().toLowerCase();\r\n \r\n if (searchTerm.length < 2) {\r\n suggestionsDiv.classList.add('hidden');\r\n return;\r\n }\r\n \r\n const filtered = state.products.filter(p => \r\n p.name.toLowerCase().includes(searchTerm)\r\n ).slice(0, 10); \/\/ Limitar a 10 resultados\r\n \r\n if (filtered.length === 0) {\r\n suggestionsDiv.classList.add('hidden');\r\n return;\r\n }\r\n \r\n suggestionsDiv.innerHTML = filtered.map(product => `\r\n <div class=\"suggestion-item flex items-center gap-3 p-2 hover:bg-blue-50 cursor-pointer border-b last:border-b-0\" data-product-id=\"${product.$id}\">\r\n <img decoding=\"async\" src=\"${product.photo}\" class=\"w-12 h-12 object-cover rounded\" onerror=\"this.src='https:\/\/placehold.co\/50x50\/e0e0e0\/999999?text=?'\">\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"font-medium text-sm truncate\">${product.name}<\/div>\r\n <\/div>\r\n <i class=\"fas fa-chevron-right text-gray-400 text-xs\"><\/i>\r\n <\/div>\r\n `).join('');\r\n \r\n suggestionsDiv.classList.remove('hidden');\r\n \r\n \/\/ Event listeners para os itens da lista\r\n suggestionsDiv.querySelectorAll('.suggestion-item').forEach(item => {\r\n item.addEventListener('click', function() {\r\n const productId = this.dataset.productId;\r\n const product = state.products.find(p => p.$id === productId);\r\n if (product) {\r\n selectProductFromSuggestion(product, this.closest('.product-entry'));\r\n }\r\n });\r\n });\r\n });\r\n \r\n \/\/ Fechar sugest\u00f5es ao clicar fora\r\n productNameInput.addEventListener('blur', function() {\r\n setTimeout(() => {\r\n suggestionsDiv.classList.add('hidden');\r\n }, 200);\r\n });\r\n \r\n \/\/ Event listener para buscar no cat\u00e1logo\r\n newEntry.querySelector('.search-catalog-btn').addEventListener('click', function() {\r\n currentProductEntry = this.closest('.product-entry');\r\n openCatalogModal();\r\n });\r\n \r\n \/\/ Event listener para remover\r\n newEntry.querySelector('.remove-product-button').addEventListener('click', function() {\r\n this.closest('.product-entry').remove();\r\n saveRegisterDraft();\r\n });\r\n\r\n entryElement.querySelectorAll('input, select').forEach((field) => {\r\n field.addEventListener('input', saveRegisterDraft);\r\n field.addEventListener('change', saveRegisterDraft);\r\n });\r\n\r\n if (initialData) {\r\n entryElement.querySelector('.product-name').value = initialData.name || '';\r\n entryElement.querySelector('.product-quantity').value = initialData.quantity || '1';\r\n entryElement.querySelector('.return-status').value = initialData.status || 'bom';\r\n\r\n const productPhotoInput = entryElement.querySelector('.product-photo-data');\r\n const labelPhotoInput = entryElement.querySelector('.label-photo-data');\r\n if (initialData.photo) {\r\n productPhotoInput.value = initialData.photo;\r\n productPhotoInput.previousElementSibling.src = initialData.photo;\r\n }\r\n if (initialData.labelPhoto) {\r\n labelPhotoInput.value = initialData.labelPhoto;\r\n labelPhotoInput.previousElementSibling.src = initialData.labelPhoto;\r\n }\r\n }\r\n \r\n productEntriesContainer.appendChild(newEntry);\r\n saveRegisterDraft();\r\n }\r\n \r\n \/\/ ===== MODAL DE CAT\u00c1LOGO =====\r\n function openCatalogModal() {\r\n renderCatalogModal();\r\n catalogModal.classList.remove('hidden');\r\n }\r\n \r\n closeCatalogModal.addEventListener('click', () => {\r\n catalogModal.classList.add('hidden');\r\n currentProductEntry = null;\r\n });\r\n \r\n catalogSearch.addEventListener('input', (e) => {\r\n renderCatalogModal(e.target.value.toLowerCase());\r\n });\r\n \r\n function renderCatalogModal(searchTerm = '') {\r\n catalogProductsGrid.innerHTML = '';\r\n \r\n const filtered = state.products.filter(p => \r\n !searchTerm || p.name.toLowerCase().includes(searchTerm)\r\n );\r\n \r\n if (filtered.length === 0) {\r\n catalogProductsGrid.innerHTML = '<p class=\"col-span-2 sm:col-span-3 md:col-span-4 text-center text-gray-500 py-8 text-sm\">Nenhum produto encontrado<\/p>';\r\n return;\r\n }\r\n \r\n filtered.forEach(product => {\r\n const div = document.createElement('div');\r\n div.className = 'border rounded-lg p-2 sm:p-3 hover:shadow-lg transition cursor-pointer hover:border-blue-500';\r\n div.innerHTML = `\r\n <img decoding=\"async\" src=\"${product.photo}\" class=\"w-full h-20 sm:h-24 object-cover rounded-lg mb-2\">\r\n <p class=\"font-semibold text-xs sm:text-sm text-center truncate\" title=\"${product.name}\">${product.name}<\/p>\r\n `;\r\n div.addEventListener('click', () => selectProductFromCatalog(product));\r\n catalogProductsGrid.appendChild(div);\r\n });\r\n }\r\n \r\n function selectProductFromCatalog(product) {\r\n if (currentProductEntry) {\r\n const nameInput = currentProductEntry.querySelector('.product-name');\r\n const photoImg = currentProductEntry.querySelector('.product-photo-data').previousElementSibling;\r\n const photoData = currentProductEntry.querySelector('.product-photo-data');\r\n \r\n nameInput.value = product.name;\r\n photoImg.src = product.photo;\r\n photoData.value = product.photo;\r\n }\r\n \r\n catalogModal.classList.add('hidden');\r\n catalogSearch.value = '';\r\n currentProductEntry = null;\r\n saveRegisterDraft();\r\n }\r\n \r\n \/\/ Fun\u00e7\u00e3o para selecionar produto das sugest\u00f5es (autocomplete)\r\n function selectProductFromSuggestion(product, productEntry) {\r\n const nameInput = productEntry.querySelector('.product-name');\r\n const photoImg = productEntry.querySelector('.product-photo-data').previousElementSibling;\r\n const photoData = productEntry.querySelector('.product-photo-data');\r\n const suggestionsDiv = productEntry.querySelector('.product-suggestions');\r\n \r\n nameInput.value = product.name;\r\n photoImg.src = product.photo;\r\n photoData.value = product.photo;\r\n \r\n suggestionsDiv.classList.add('hidden');\r\n saveRegisterDraft();\r\n }\r\n\r\n \/\/ ===== GERENCIAR FOTOS E V\u00cdDEOS DO PRODUTO =====\r\n function renderProductPhotos() {\r\n productPhotosContainer.innerHTML = '';\r\n \r\n productPhotos.forEach((item, index) => {\r\n const mediaDiv = document.createElement('div');\r\n mediaDiv.className = 'relative';\r\n \r\n if (item.type === 'video') {\r\n mediaDiv.innerHTML = `\r\n <video src=\"${item.url}\" class=\"w-full h-24 object-cover rounded-lg border-2 border-purple-500 cursor-pointer\"><\/video>\r\n <div class=\"absolute inset-0 flex items-center justify-center pointer-events-none\">\r\n <i class=\"fas fa-play-circle text-white text-3xl opacity-80\"><\/i>\r\n <\/div>\r\n <button type=\"button\" class=\"absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 text-xs\"\r\n onclick=\"removeProductPhoto(${index})\">\u00d7<\/button>\r\n `;\r\n mediaDiv.querySelector('video').addEventListener('click', () => viewVideo(item.url));\r\n } else {\r\n mediaDiv.innerHTML = `\r\n <img decoding=\"async\" src=\"${item.url}\" class=\"w-full h-24 object-cover rounded-lg border-2 border-green-500 cursor-pointer\">\r\n <button type=\"button\" class=\"absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 text-xs\"\r\n onclick=\"removeProductPhoto(${index})\">\u00d7<\/button>\r\n `;\r\n mediaDiv.querySelector('img').addEventListener('click', () => viewImage(item.url));\r\n }\r\n \r\n productPhotosContainer.appendChild(mediaDiv);\r\n });\r\n \r\n for (let i = productPhotos.length; i < 10; i++) {\r\n const emptyDiv = document.createElement('div');\r\n emptyDiv.className = 'border-2 border-dashed border-gray-300 rounded-lg h-24 flex items-center justify-center text-gray-400';\r\n emptyDiv.innerHTML = '<i class=\"fas fa-image text-2xl\"><\/i>';\r\n productPhotosContainer.appendChild(emptyDiv);\r\n }\r\n \r\n photoCountIndicator.textContent = `${productPhotos.length}\/10`;\r\n saveRegisterDraft();\r\n }\r\n\r\n window.removeProductPhoto = function(index) {\r\n productPhotos.splice(index, 1);\r\n renderProductPhotos();\r\n };\r\n\r\n addProductPhotoBtn.addEventListener('click', () => {\r\n if (productPhotos.length < 10) {\r\n currentImageTarget = { type: 'product-photo', index: productPhotos.length };\r\n openImageCaptureModal();\r\n }\r\n });\r\n \r\n addProductVideoBtn.addEventListener('click', () => {\r\n if (productPhotos.length < 10) {\r\n currentVideoTarget = { type: 'product-video', index: productPhotos.length };\r\n openVideoCaptureModal();\r\n }\r\n });\r\n\r\n \/\/ ===== MODAL DE IMAGEM =====\r\n function openImageCaptureModal() {\r\n imageUrlInput.value = '';\r\n imageFileInput.value = '';\r\n uploadPreview.classList.add('hidden');\r\n imagePreviewGrid.innerHTML = '';\r\n imageUploadProgress.classList.add('hidden');\r\n imageUploadProgressBar.style.width = '0%';\r\n imageUploadProgressText.textContent = '';\r\n uploadedImageUrls = [];\r\n \r\n \/\/ Resetar para aba URL\r\n switchToUrlTab();\r\n \r\n imageCaptureModal.classList.remove('hidden');\r\n }\r\n \r\n \/\/ Navega\u00e7\u00e3o entre abas do modal\r\n tabUrlBtn.addEventListener('click', switchToUrlTab);\r\n tabUploadBtn.addEventListener('click', switchToUploadTab);\r\n \r\n function switchToUrlTab() {\r\n tabUrlBtn.classList.add('border-blue-500', 'text-blue-600', 'font-semibold');\r\n tabUrlBtn.classList.remove('border-transparent', 'text-gray-600');\r\n tabUploadBtn.classList.add('border-transparent', 'text-gray-600');\r\n tabUploadBtn.classList.remove('border-blue-500', 'text-blue-600', 'font-semibold');\r\n \r\n urlContent.classList.remove('hidden');\r\n uploadContent.classList.add('hidden');\r\n }\r\n \r\n function switchToUploadTab() {\r\n tabUploadBtn.classList.add('border-blue-500', 'text-blue-600', 'font-semibold');\r\n tabUploadBtn.classList.remove('border-transparent', 'text-gray-600');\r\n tabUrlBtn.classList.add('border-transparent', 'text-gray-600');\r\n tabUrlBtn.classList.remove('border-blue-500', 'text-blue-600', 'font-semibold');\r\n \r\n uploadContent.classList.remove('hidden');\r\n urlContent.classList.add('hidden');\r\n }\r\n\r\n function renderImageUploadPreviews(previews) {\r\n imagePreviewGrid.innerHTML = previews.map((preview) => `\r\n <div class=\"border rounded-lg overflow-hidden\">\r\n <img decoding=\"async\" src=\"${preview.previewUrl}\" class=\"w-full h-24 object-cover\" alt=\"Preview de imagem\">\r\n <p class=\"text-[11px] p-1 truncate\" title=\"${preview.name}\">${preview.name}<\/p>\r\n <\/div>\r\n `).join('');\r\n uploadPreview.classList.remove('hidden');\r\n }\r\n \r\n \/\/ Salva estado antes de abrir qualquer seletor de arquivo de imagem\r\n function _saveImageModalState() {\r\n saveRegisterDraft();\r\n try {\r\n const targetData = (currentImageTarget && currentImageTarget.type)\r\n ? { type: currentImageTarget.type }\r\n : { type: 'product-photo' };\r\n localStorage.setItem(MODAL_STATE_KEY, JSON.stringify({ modal: 'image', target: targetData }));\r\n } catch (e) { console.warn('[UPLOAD] Falha ao salvar estado do modal:', e); }\r\n }\r\n\r\n \/\/ L\u00f3gica de processamento compartilhada: c\u00e2mera e galeria usam a mesma fun\u00e7\u00e3o\r\n async function _handleImageFiles(selectedFiles) {\r\n if (!window.UploadManager || typeof window.UploadManager.validateFiles !== 'function') {\r\n console.error('[UPLOAD] UploadManager n\u00e3o est\u00e1 dispon\u00edvel.');\r\n uploadStatus.textContent = '\u2717 Erro interno: m\u00f3dulo de upload n\u00e3o carregado. Recarregue a p\u00e1gina.';\r\n uploadStatus.className = 'text-sm text-red-600 text-center';\r\n return;\r\n }\r\n if (!selectedFiles || selectedFiles.length === 0) return;\r\n\r\n \/\/ Garantir que a aba de upload est\u00e1 vis\u00edvel\r\n switchToUploadTab();\r\n\r\n const remainingSlots = Math.max(0, 10 - productPhotos.length);\r\n if (remainingSlots === 0) {\r\n uploadStatus.textContent = 'Limite de 10 m\u00eddias atingido para este retorno.';\r\n uploadStatus.className = 'text-sm text-red-600 text-center';\r\n return;\r\n }\r\n\r\n const files = selectedFiles.slice(0, remainingSlots);\r\n const { valid, invalid } = window.UploadManager.validateFiles(files, 'image', window.UploadManager.limits.imageMB);\r\n\r\n if (invalid.length > 0) {\r\n console.warn('[UPLOAD][IMAGEM] arquivos inv\u00e1lidos:', invalid);\r\n uploadStatus.textContent = `Alguns arquivos foram ignorados: ${invalid.map(item => item.file.name).join(', ')}`;\r\n uploadStatus.className = 'text-sm text-yellow-600 text-center';\r\n }\r\n if (valid.length === 0) {\r\n uploadStatus.textContent = `Nenhuma imagem v\u00e1lida. Tipos: ${window.UploadManager.accepted.image.join(', ')} | M\u00e1x ${window.UploadManager.limits.imageMB}MB`;\r\n uploadStatus.className = 'text-sm text-red-600 text-center';\r\n return;\r\n }\r\n\r\n try {\r\n const previews = await window.UploadManager.createPreviews(valid, 'image');\r\n renderImageUploadPreviews(previews);\r\n imageUploadProgress.classList.remove('hidden');\r\n uploadStatus.textContent = `Enviando ${valid.length} imagem(ns)...`;\r\n uploadStatus.className = 'text-sm text-blue-600 text-center';\r\n\r\n uploadedImageUrls = await window.UploadManager.uploadFiles({\r\n files: valid,\r\n mediaType: 'image',\r\n endpoint: APPWRITE_ENDPOINT,\r\n projectId: APPWRITE_PROJECT_ID,\r\n bucketId: BUCKET_ID,\r\n onProgress: (percent, index, total, fileName) => {\r\n imageUploadProgressBar.style.width = `${percent}%`;\r\n imageUploadProgressText.textContent = fileName\r\n ? `Enviando ${index + 1}\/${total}: ${fileName} (${percent}%)`\r\n : `Upload conclu\u00eddo (${percent}%)`;\r\n }\r\n });\r\n\r\n uploadStatus.textContent = `\u2713 ${uploadedImageUrls.length} imagem(ns) carregada(s) com sucesso!`;\r\n uploadStatus.className = 'text-sm text-green-600 text-center font-semibold';\r\n } catch (error) {\r\n console.error('[UPLOAD][IMAGEM] Erro ao fazer upload:', error);\r\n uploadStatus.textContent = '\u2717 Erro ao carregar imagem: ' + error.message;\r\n uploadStatus.className = 'text-sm text-red-600 text-center';\r\n uploadedImageUrls = [];\r\n imageUploadProgress.classList.add('hidden');\r\n }\r\n }\r\n\r\n \/\/ Bot\u00e3o C\u00e2mera \u2192 abre c\u00e2mera diretamente (capture)\r\n imageCameraBtn.addEventListener('click', () => {\r\n imageCameraInput.value = '';\r\n _saveImageModalState();\r\n imageCameraInput.click();\r\n });\r\n\r\n \/\/ Bot\u00e3o Galeria \u2192 abre seletor de arquivos\r\n imageGalleryBtn.addEventListener('click', () => {\r\n imageFileInput.value = '';\r\n _saveImageModalState();\r\n imageFileInput.click();\r\n });\r\n\r\n \/\/ Ambos os inputs de imagem usam o mesmo handler\r\n imageFileInput.addEventListener('change', (e) => _handleImageFiles(Array.from(e.target.files || [])));\r\n imageCameraInput.addEventListener('change', (e) => _handleImageFiles(Array.from(e.target.files || [])));\r\n\r\n closeImageModal.addEventListener('click', () => {\r\n imageCaptureModal.classList.add('hidden');\r\n currentImageTarget = null;\r\n uploadedImageUrls = [];\r\n try { localStorage.removeItem(MODAL_STATE_KEY); } catch (e) {}\r\n });\r\n\r\n confirmImageBtn.addEventListener('click', () => {\r\n const urlsToApply = [];\r\n \r\n \/\/ Verificar qual aba est\u00e1 ativa\r\n if (!urlContent.classList.contains('hidden')) {\r\n \/\/ Aba URL\r\n const typedUrl = imageUrlInput.value.trim();\r\n if (typedUrl) urlsToApply.push({ url: typedUrl, type: 'image' });\r\n } else if (uploadedImageUrls.length > 0) {\r\n \/\/ Aba Upload\r\n urlsToApply.push(...uploadedImageUrls.map(item => ({ url: item.url, type: 'image' })));\r\n }\r\n \r\n if (urlsToApply.length > 0 && currentImageTarget) {\r\n if (currentImageTarget.type === 'product-photo') {\r\n const availableSlots = Math.max(0, 10 - productPhotos.length);\r\n productPhotos.push(...urlsToApply.slice(0, availableSlots));\r\n renderProductPhotos();\r\n } else if (currentImageTarget.type === 'edit-media') {\r\n editProductPhotos.push(...urlsToApply);\r\n renderEditMedia();\r\n } else {\r\n const firstUrl = urlsToApply[0].url;\r\n currentImageTarget.src = firstUrl;\r\n currentImageTarget.nextElementSibling.value = firstUrl;\r\n }\r\n }\r\n \r\n imageCaptureModal.classList.add('hidden');\r\n currentImageTarget = null;\r\n uploadedImageUrls = [];\r\n try { localStorage.removeItem(MODAL_STATE_KEY); } catch (e) {}\r\n saveRegisterDraft();\r\n });\r\n\r\n window.viewImage = function(url) {\r\n viewImageContent.src = url;\r\n viewImageModal.classList.remove('hidden');\r\n };\r\n \r\n window.viewVideo = function(url) {\r\n console.log('Abrindo v\u00eddeo:', url);\r\n const videoElement = document.getElementById('view-video-content');\r\n videoElement.src = url;\r\n videoElement.load();\r\n viewVideoModal.classList.remove('hidden');\r\n };\r\n \r\n window.closeViewVideoModal = function() {\r\n const videoElement = document.getElementById('view-video-content');\r\n videoElement.pause();\r\n videoElement.src = '';\r\n viewVideoModal.classList.add('hidden');\r\n };\r\n \r\n \/\/ Fun\u00e7\u00e3o para download de m\u00eddia\r\n window.downloadMedia = async function(url, filename) {\r\n try {\r\n console.log('Baixando:', url);\r\n const response = await fetch(url);\r\n const blob = await response.blob();\r\n const downloadUrl = window.URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = downloadUrl;\r\n a.download = filename;\r\n document.body.appendChild(a);\r\n a.click();\r\n document.body.removeChild(a);\r\n window.URL.revokeObjectURL(downloadUrl);\r\n console.log('Download iniciado:', filename);\r\n } catch (error) {\r\n console.error('Erro ao baixar m\u00eddia:', error);\r\n alert('Erro ao baixar arquivo. Tente novamente.');\r\n }\r\n };\r\n \r\n \/\/ Fun\u00e7\u00e3o para baixar todas as m\u00eddias\r\n window.downloadAllMedia = async function() {\r\n const mediaArray = window.currentPublicMedia;\r\n if (!mediaArray || mediaArray.length === 0) {\r\n alert('Nenhuma m\u00eddia dispon\u00edvel para download.');\r\n return;\r\n }\r\n \r\n const button = event.target.closest('button');\r\n const originalText = button.innerHTML;\r\n \r\n try {\r\n button.disabled = true;\r\n button.innerHTML = '<i class=\"fas fa-spinner fa-spin mr-2\"><\/i>Baixando...';\r\n \r\n for (let i = 0; i < mediaArray.length; i++) {\r\n const item = mediaArray[i];\r\n const url = item.url || item;\r\n const type = item.type || detectMediaType(url);\r\n const extension = type === 'video' ? 'mp4' : 'jpg';\r\n const filename = `midia_${i + 1}.${extension}`;\r\n \r\n button.innerHTML = `<i class=\"fas fa-spinner fa-spin mr-2\"><\/i>Baixando ${i + 1}\/${mediaArray.length}...`;\r\n \r\n await downloadMedia(url, filename);\r\n \r\n \/\/ Pequeno delay entre downloads\r\n await new Promise(resolve => setTimeout(resolve, 500));\r\n }\r\n \r\n button.innerHTML = '<i class=\"fas fa-check mr-2\"><\/i>Download Conclu\u00eddo!';\r\n setTimeout(() => {\r\n button.innerHTML = originalText;\r\n button.disabled = false;\r\n }, 2000);\r\n \r\n } catch (error) {\r\n console.error('Erro ao baixar m\u00eddias:', error);\r\n button.innerHTML = '<i class=\"fas fa-times mr-2\"><\/i>Erro no download';\r\n setTimeout(() => {\r\n button.innerHTML = originalText;\r\n button.disabled = false;\r\n }, 2000);\r\n }\r\n };\r\n \r\n \/\/ Fechar modal de v\u00eddeo ao clicar no fundo (mas n\u00e3o no v\u00eddeo)\r\n viewVideoModal.addEventListener('click', (e) => {\r\n if (e.target === viewVideoModal) {\r\n closeViewVideoModal();\r\n }\r\n });\r\n \r\n \/\/ ===== MODAL DE V\u00cdDEO =====\r\n function openVideoCaptureModal() {\r\n videoUrlInput.value = '';\r\n videoFileInput.value = '';\r\n videoUploadPreview.classList.add('hidden');\r\n videoPreviewGrid.innerHTML = '';\r\n videoUploadProgress.classList.add('hidden');\r\n videoUploadProgressBar.style.width = '0%';\r\n videoUploadProgressText.textContent = '';\r\n uploadedVideoUrls = [];\r\n \r\n \/\/ Resetar para aba URL\r\n switchToVideoUrlTab();\r\n \r\n videoCaptureModal.classList.remove('hidden');\r\n }\r\n \r\n \/\/ Navega\u00e7\u00e3o entre abas do modal de v\u00eddeo\r\n videoTabUrlBtn.addEventListener('click', switchToVideoUrlTab);\r\n videoTabUploadBtn.addEventListener('click', switchToVideoUploadTab);\r\n \r\n function switchToVideoUrlTab() {\r\n videoTabUrlBtn.classList.add('border-blue-500', 'text-blue-600', 'font-semibold');\r\n videoTabUrlBtn.classList.remove('border-transparent', 'text-gray-600');\r\n videoTabUploadBtn.classList.add('border-transparent', 'text-gray-600');\r\n videoTabUploadBtn.classList.remove('border-blue-500', 'text-blue-600', 'font-semibold');\r\n \r\n videoUrlContent.classList.remove('hidden');\r\n videoUploadContent.classList.add('hidden');\r\n }\r\n \r\n function switchToVideoUploadTab() {\r\n videoTabUploadBtn.classList.add('border-blue-500', 'text-blue-600', 'font-semibold');\r\n videoTabUploadBtn.classList.remove('border-transparent', 'text-gray-600');\r\n videoTabUrlBtn.classList.add('border-transparent', 'text-gray-600');\r\n videoTabUrlBtn.classList.remove('border-blue-500', 'text-blue-600', 'font-semibold');\r\n \r\n videoUploadContent.classList.remove('hidden');\r\n videoUrlContent.classList.add('hidden');\r\n }\r\n\r\n function renderVideoUploadPreviews(previews) {\r\n videoPreviewGrid.innerHTML = previews.map((preview) => `\r\n <div class=\"border rounded-lg overflow-hidden p-2\">\r\n <video src=\"${preview.previewUrl}\" class=\"w-full h-40 rounded-lg\" controls><\/video>\r\n <p class=\"text-[11px] mt-1 truncate\" title=\"${preview.name}\">${preview.name}<\/p>\r\n <\/div>\r\n `).join('');\r\n videoUploadPreview.classList.remove('hidden');\r\n }\r\n \r\n \/\/ Salva estado antes de abrir qualquer seletor de arquivo de v\u00eddeo\r\n function _saveVideoModalState() {\r\n saveRegisterDraft();\r\n try {\r\n const targetData = (currentVideoTarget && currentVideoTarget.type)\r\n ? { type: currentVideoTarget.type }\r\n : { type: 'product-video' };\r\n localStorage.setItem(MODAL_STATE_KEY, JSON.stringify({ modal: 'video', target: targetData }));\r\n } catch (e) { console.warn('[UPLOAD] Falha ao salvar estado do modal:', e); }\r\n }\r\n\r\n \/\/ L\u00f3gica de processamento compartilhada: c\u00e2mera e galeria usam a mesma fun\u00e7\u00e3o\r\n async function _handleVideoFiles(selectedFiles) {\r\n if (!window.UploadManager || typeof window.UploadManager.validateFiles !== 'function') {\r\n console.error('[UPLOAD] UploadManager n\u00e3o est\u00e1 dispon\u00edvel.');\r\n videoUploadStatus.textContent = '\u2717 Erro interno: m\u00f3dulo de upload n\u00e3o carregado. Recarregue a p\u00e1gina.';\r\n videoUploadStatus.className = 'text-sm text-red-600 text-center';\r\n return;\r\n }\r\n if (!selectedFiles || selectedFiles.length === 0) return;\r\n\r\n \/\/ Garantir que a aba de upload est\u00e1 vis\u00edvel\r\n switchToVideoUploadTab();\r\n\r\n const remainingSlots = Math.max(0, 10 - productPhotos.length);\r\n if (remainingSlots === 0) {\r\n videoUploadStatus.textContent = 'Limite de 10 m\u00eddias atingido para este retorno.';\r\n videoUploadStatus.className = 'text-sm text-red-600 text-center';\r\n return;\r\n }\r\n\r\n const files = selectedFiles.slice(0, remainingSlots);\r\n const { valid, invalid } = window.UploadManager.validateFiles(files, 'video', window.UploadManager.limits.videoMB);\r\n\r\n if (invalid.length > 0) {\r\n console.warn('[UPLOAD][VIDEO] arquivos inv\u00e1lidos:', invalid);\r\n videoUploadStatus.textContent = `Alguns arquivos foram ignorados: ${invalid.map(item => item.file.name).join(', ')}`;\r\n videoUploadStatus.className = 'text-sm text-yellow-600 text-center';\r\n }\r\n if (valid.length === 0) {\r\n videoUploadStatus.textContent = `Nenhum v\u00eddeo v\u00e1lido. Tipos: ${window.UploadManager.accepted.video.join(', ')} | M\u00e1x ${window.UploadManager.limits.videoMB}MB`;\r\n videoUploadStatus.className = 'text-sm text-red-600 text-center';\r\n return;\r\n }\r\n\r\n try {\r\n const previews = await window.UploadManager.createPreviews(valid, 'video');\r\n renderVideoUploadPreviews(previews);\r\n videoUploadProgress.classList.remove('hidden');\r\n videoUploadStatus.textContent = `Enviando ${valid.length} v\u00eddeo(s)...`;\r\n videoUploadStatus.className = 'text-sm text-blue-600 text-center';\r\n\r\n uploadedVideoUrls = await window.UploadManager.uploadFiles({\r\n files: valid,\r\n mediaType: 'video',\r\n endpoint: APPWRITE_ENDPOINT,\r\n projectId: APPWRITE_PROJECT_ID,\r\n bucketId: BUCKET_ID,\r\n onProgress: (percent, index, total, fileName) => {\r\n videoUploadProgressBar.style.width = `${percent}%`;\r\n videoUploadProgressText.textContent = fileName\r\n ? `Enviando ${index + 1}\/${total}: ${fileName} (${percent}%)`\r\n : `Upload conclu\u00eddo (${percent}%)`;\r\n }\r\n });\r\n\r\n videoUploadStatus.textContent = `\u2713 ${uploadedVideoUrls.length} v\u00eddeo(s) carregado(s) com sucesso!`;\r\n videoUploadStatus.className = 'text-sm text-green-600 text-center font-semibold';\r\n } catch (error) {\r\n console.error('[UPLOAD][VIDEO] Erro ao fazer upload:', error);\r\n videoUploadStatus.textContent = '\u2717 Erro ao carregar v\u00eddeo: ' + error.message;\r\n videoUploadStatus.className = 'text-sm text-red-600 text-center';\r\n uploadedVideoUrls = [];\r\n videoUploadProgress.classList.add('hidden');\r\n }\r\n }\r\n\r\n \/\/ Bot\u00e3o C\u00e2mera \u2192 abre c\u00e2mera diretamente (capture)\r\n videoCameraBtn.addEventListener('click', () => {\r\n videoCameraInput.value = '';\r\n _saveVideoModalState();\r\n videoCameraInput.click();\r\n });\r\n\r\n \/\/ Bot\u00e3o Galeria \u2192 abre seletor de arquivos\r\n videoGalleryBtn.addEventListener('click', () => {\r\n videoFileInput.value = '';\r\n _saveVideoModalState();\r\n videoFileInput.click();\r\n });\r\n\r\n \/\/ Ambos os inputs de v\u00eddeo usam o mesmo handler\r\n videoFileInput.addEventListener('change', (e) => _handleVideoFiles(Array.from(e.target.files || [])));\r\n videoCameraInput.addEventListener('change', (e) => _handleVideoFiles(Array.from(e.target.files || [])));\r\n \r\n closeVideoModal.addEventListener('click', () => {\r\n videoCaptureModal.classList.add('hidden');\r\n currentVideoTarget = null;\r\n uploadedVideoUrls = [];\r\n try { localStorage.removeItem(MODAL_STATE_KEY); } catch (e) {}\r\n if (window.UploadManager) window.UploadManager.revokeAllPendingObjectUrls();\r\n });\r\n \r\n confirmVideoBtn.addEventListener('click', () => {\r\n const urlsToApply = [];\r\n \r\n \/\/ Verificar qual aba est\u00e1 ativa\r\n if (!videoUrlContent.classList.contains('hidden')) {\r\n \/\/ Aba URL\r\n const typedUrl = videoUrlInput.value.trim();\r\n if (typedUrl) urlsToApply.push({ url: typedUrl, type: 'video' });\r\n } else if (uploadedVideoUrls.length > 0) {\r\n \/\/ Aba Upload\r\n urlsToApply.push(...uploadedVideoUrls.map(item => ({ url: item.url, type: 'video' })));\r\n }\r\n \r\n if (urlsToApply.length > 0 && currentVideoTarget) {\r\n if (currentVideoTarget.type === 'product-video') {\r\n const availableSlots = Math.max(0, 10 - productPhotos.length);\r\n productPhotos.push(...urlsToApply.slice(0, availableSlots));\r\n renderProductPhotos();\r\n } else if (currentVideoTarget.type === 'edit-media') {\r\n editProductPhotos.push(...urlsToApply);\r\n renderEditMedia();\r\n }\r\n }\r\n \r\n videoCaptureModal.classList.add('hidden');\r\n currentVideoTarget = null;\r\n uploadedVideoUrls = [];\r\n try { localStorage.removeItem(MODAL_STATE_KEY); } catch (e) {}\r\n if (window.UploadManager) window.UploadManager.revokeAllPendingObjectUrls();\r\n saveRegisterDraft();\r\n });\r\n\r\n \/\/ ===== RENDERIZAR RETORNOS =====\r\n function renderReturns() {\r\n allProductsList.innerHTML = '';\r\n \r\n state.returned.forEach(returnData => {\r\n const card = createReturnCard(returnData);\r\n allProductsList.appendChild(card);\r\n });\r\n }\r\n\r\n function renderArchived() {\r\n archivedProductsList.innerHTML = '';\r\n \r\n state.archived.forEach(returnData => {\r\n const card = createReturnCard(returnData, true);\r\n archivedProductsList.appendChild(card);\r\n });\r\n }\r\n\r\n function createReturnCard(returnData, isArchived = false, showDownload = false) {\r\n const card = document.createElement('div');\r\n card.className = 'product-card card-animation';\r\n \r\n const statusBadges = returnData.products?.map(p => `\r\n <span class=\"status-badge status-${p.status}\">${p.status}<\/span>\r\n `).join(' ') || '';\r\n \r\n const productsHTML = returnData.products?.map(p => `\r\n <div class=\"product-item\">\r\n <div class=\"flex gap-2\">\r\n ${p.photo ? `<img decoding=\"async\" src=\"${p.photo}\" class=\"product-image\" onclick=\"viewImage('${p.photo}')\" title=\"Clique para ampliar - Foto do Produto\">` : ''}\r\n ${p.labelPhoto ? `\r\n <div class=\"relative\">\r\n <img decoding=\"async\" src=\"${p.labelPhoto}\" class=\"product-image border-2 border-yellow-400\" onclick=\"viewImage('${p.labelPhoto}')\" title=\"Clique para ampliar - Foto da Etiqueta\">\r\n <div class=\"absolute -top-1 -right-1 bg-yellow-400 rounded-full w-4 h-4 flex items-center justify-center\">\r\n <i class=\"fas fa-tag text-white text-xs\"><\/i>\r\n <\/div>\r\n <\/div>\r\n ` : ''}\r\n <\/div>\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"product-name truncate\">${p.name}<\/div>\r\n <div class=\"product-quantity text-xs sm:text-sm\">Qtd: ${p.quantity}<\/div>\r\n ${p.labelPhoto ? '<div class=\"text-xs text-yellow-600\"><i class=\"fas fa-tag mr-1\"><\/i>Com etiqueta<\/div>' : ''}\r\n <\/div>\r\n <span class=\"status-badge status-${p.status}\">${p.status}<\/span>\r\n <\/div>\r\n `).join('') || '';\r\n \r\n const photosHTML = returnData.productPhotos?.length > 0 ? `\r\n <div class=\"product-photos-section\">\r\n <div class=\"photos-grid\">\r\n ${returnData.productPhotos.map((photoItem, index) => {\r\n const photo = photoItem.url || photoItem; \/\/ Compatibilidade\r\n const type = photoItem.type || detectMediaType(photo);\r\n console.log('Renderizando m\u00eddia:', { photo, type, photoItem });\r\n \r\n if (type === 'video') {\r\n return `\r\n <div class=\"photo-item relative group\" onclick=\"viewVideo('${photo}')\">\r\n <video src=\"${photo}\" class=\"w-full h-full object-cover\" preload=\"metadata\"><\/video>\r\n <div class=\"absolute inset-0 flex items-center justify-center pointer-events-none bg-black bg-opacity-30\">\r\n <i class=\"fas fa-play-circle text-white text-xl sm:text-2xl opacity-90 drop-shadow-lg\"><\/i>\r\n <\/div>\r\n ${showDownload ? `\r\n <button onclick=\"event.stopPropagation(); downloadMedia('${photo}', 'video_${index + 1}.mp4')\" \r\n class=\"absolute top-1 right-1 bg-blue-500 hover:bg-blue-600 text-white rounded-full p-2 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-auto z-10\"\r\n title=\"Baixar v\u00eddeo\">\r\n <i class=\"fas fa-download text-xs\"><\/i>\r\n <\/button>\r\n ` : ''}\r\n <\/div>\r\n `;\r\n } else {\r\n return `\r\n <div class=\"photo-item relative group\" onclick=\"viewImage('${photo}')\">\r\n <img decoding=\"async\" src=\"${photo}\" alt=\"Foto\" onerror=\"this.src='https:\/\/placehold.co\/200x200\/e0e0e0\/999999?text=Erro'\">\r\n ${showDownload ? `\r\n <button onclick=\"event.stopPropagation(); downloadMedia('${photo}', 'foto_${index + 1}.jpg')\" \r\n class=\"absolute top-1 right-1 bg-blue-500 hover:bg-blue-600 text-white rounded-full p-2 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-auto z-10\"\r\n title=\"Baixar foto\">\r\n <i class=\"fas fa-download text-xs\"><\/i>\r\n <\/button>\r\n ` : ''}\r\n <\/div>\r\n `;\r\n }\r\n }).join('')}\r\n <\/div>\r\n <\/div>\r\n ` : '';\r\n \r\n card.innerHTML = `\r\n <div class=\"card-header\">\r\n <div class=\"flex flex-col sm:flex-row justify-between items-start gap-2 sm:gap-0\">\r\n <div class=\"flex-1\">\r\n <h3 class=\"text-lg sm:text-xl font-bold text-gray-900\">${returnData.code}<\/h3>\r\n <p class=\"text-xs sm:text-sm text-gray-600 mt-1\">\r\n <i class=\"fas fa-calendar mr-1\"><\/i>\r\n ${new Date(returnData.date).toLocaleDateString('pt-BR')}\r\n <\/p>\r\n <\/div>\r\n <div class=\"text-left sm:text-right w-full sm:w-auto\">\r\n <div class=\"text-xs sm:text-sm text-gray-600\">Vendedor: ${returnData.sellerName}<\/div>\r\n <div class=\"text-xs text-gray-500\">${returnData.salesChannel}<\/div>\r\n <\/div>\r\n <\/div>\r\n ${returnData.observations ? `<p class=\"text-xs sm:text-sm text-gray-600 mt-2\">${returnData.observations}<\/p>` : ''}\r\n <\/div>\r\n \r\n <div class=\"card-body\">\r\n ${productsHTML}\r\n ${photosHTML}\r\n <\/div>\r\n \r\n <div class=\"card-footer\">\r\n ${!isArchived ? `\r\n <button onclick=\"archiveReturn('${returnData.$id}')\" class=\"btn-finish min-h-[48px]\">\r\n <i class=\"fas fa-archive mr-2\"><\/i>Arquivar\r\n <\/button>\r\n ` : `\r\n <div class=\"space-y-2\">\r\n <button onclick=\"shareReturn('${returnData.$id}')\" class=\"w-full bg-blue-500 hover:bg-blue-600 text-white py-3 px-4 rounded-lg font-semibold min-h-[48px]\">\r\n <i class=\"fas fa-share-alt mr-2\"><\/i>Compartilhar\r\n <\/button>\r\n <div class=\"btn-actions-group\">\r\n <button onclick=\"unarchiveReturn('${returnData.$id}')\" class=\"bg-green-500 hover:bg-green-600 text-white py-3 px-4 rounded-lg font-semibold min-h-[48px]\">\r\n <i class=\"fas fa-undo mr-2\"><\/i>Desarquivar\r\n <\/button>\r\n <button onclick=\"editReturn('${returnData.$id}')\" class=\"btn-edit py-3 px-4 rounded-lg font-semibold min-h-[48px]\">\r\n <i class=\"fas fa-edit mr-2\"><\/i>Editar\r\n <\/button>\r\n <button onclick=\"deleteReturn('${returnData.$id}')\" class=\"btn-delete py-3 px-4 rounded-lg font-semibold min-h-[48px]\">\r\n <i class=\"fas fa-trash mr-2\"><\/i>Excluir\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n `}\r\n <\/div>\r\n `;\r\n \r\n return card;\r\n }\r\n\r\n window.archiveReturn = async function(returnId) {\r\n if (!confirm('Deseja arquivar este retorno?')) return;\r\n \r\n try {\r\n await databases.updateDocument(\r\n DATABASE_ID,\r\n COLLECTIONS.returnedProducts,\r\n returnId,\r\n { archived: true }\r\n );\r\n await loadAllData();\r\n } catch (error) {\r\n alert('Erro ao arquivar: ' + error.message);\r\n }\r\n };\r\n\r\n window.unarchiveReturn = async function(returnId) {\r\n if (!confirm('Deseja desarquivar este retorno?')) return;\r\n \r\n try {\r\n await databases.updateDocument(\r\n DATABASE_ID,\r\n COLLECTIONS.returnedProducts,\r\n returnId,\r\n { archived: false }\r\n );\r\n await loadAllData();\r\n } catch (error) {\r\n alert('Erro ao desarquivar: ' + error.message);\r\n }\r\n };\r\n\r\n \/\/ ===== CAT\u00c1LOGO =====\r\n addProductForm.addEventListener('submit', async (e) => {\r\n e.preventDefault();\r\n addProductFeedback.textContent = '';\r\n \r\n const name = newProductNameInput.value.trim();\r\n const photo = newProductPhotoInput.value.trim();\r\n \r\n if (!name || !photo) {\r\n addProductFeedback.textContent = 'Nome e URL s\u00e3o obrigat\u00f3rios.';\r\n addProductFeedback.className = 'md:col-span-2 text-sm text-center text-red-500';\r\n return;\r\n }\r\n \r\n try {\r\n await databases.createDocument(\r\n DATABASE_ID,\r\n COLLECTIONS.productCatalog,\r\n ID.unique(),\r\n {\r\n name: name,\r\n photo: photo,\r\n createdBy_email: currentUser.email,\r\n createdBy_uid: currentUser.$id,\r\n createdBy_displayName: currentUser.name || currentUser.email,\r\n createdAt: new Date().toISOString()\r\n }\r\n );\r\n \r\n addProductForm.reset();\r\n addProductFeedback.textContent = 'Produto adicionado!';\r\n addProductFeedback.className = 'md:col-span-2 text-sm text-center text-green-600';\r\n await loadCatalog();\r\n \r\n setTimeout(() => { addProductFeedback.textContent = ''; }, 3000);\r\n } catch (error) {\r\n addProductFeedback.textContent = 'Erro ao salvar: ' + error.message;\r\n addProductFeedback.className = 'md:col-span-2 text-sm text-center text-red-500';\r\n }\r\n });\r\n\r\n function renderCatalog() {\r\n console.log('Renderizando cat\u00e1logo com', state.products.length, 'produtos');\r\n \r\n if (!productCatalogList) {\r\n console.error('ERRO: elemento product-catalog-list n\u00e3o encontrado!');\r\n return;\r\n }\r\n \r\n productCatalogList.innerHTML = '';\r\n \r\n if (state.products.length === 0) {\r\n productCatalogList.innerHTML = '<p class=\"col-span-2 sm:col-span-3 md:col-span-4 text-center text-gray-500 py-8\">Nenhum produto no cat\u00e1logo. Adicione produtos acima.<\/p>';\r\n document.getElementById('product-count').textContent = '0';\r\n return;\r\n }\r\n \r\n state.products.forEach((product, index) => {\r\n const div = document.createElement('div');\r\n div.className = 'border rounded-lg p-2 sm:p-4 hover:shadow-lg transition';\r\n div.innerHTML = `\r\n <img decoding=\"async\" src=\"${product.photo}\" class=\"w-full h-24 sm:h-32 object-cover rounded-lg mb-2 cursor-pointer\"\r\n onclick=\"viewImage('${product.photo}')\" onerror=\"this.src='https:\/\/placehold.co\/200x200\/e0e0e0\/999999?text=Sem+Imagem'\">\r\n <p class=\"font-semibold text-xs sm:text-sm truncate\" title=\"${product.name}\">${product.name}<\/p>\r\n <button onclick=\"deleteProduct('${product.$id}')\" class=\"text-red-500 text-xs mt-2 hover:text-red-700 min-h-[36px] w-full sm:w-auto\">\r\n <i class=\"fas fa-trash mr-1\"><\/i>Excluir\r\n <\/button>\r\n `;\r\n productCatalogList.appendChild(div);\r\n console.log(`Produto ${index + 1} adicionado:`, product.name);\r\n });\r\n \r\n document.getElementById('product-count').textContent = state.products.length;\r\n console.log('Cat\u00e1logo renderizado com sucesso -', state.products.length, 'produtos exibidos');\r\n }\r\n\r\n window.deleteProduct = async function(productId) {\r\n if (!confirm('Deseja excluir este produto?')) return;\r\n \r\n try {\r\n await databases.deleteDocument(DATABASE_ID, COLLECTIONS.productCatalog, productId);\r\n await loadCatalog();\r\n } catch (error) {\r\n alert('Erro ao excluir: ' + error.message);\r\n }\r\n };\r\n \r\n \/\/ ===== UPLOAD DE PLANILHA =====\r\n downloadTemplateBtn.addEventListener('click', () => {\r\n const wb = XLSX.utils.book_new();\r\n const ws = XLSX.utils.aoa_to_sheet([\r\n ['Nome do Produto', 'URL da Foto'],\r\n ['Exemplo: Camiseta Azul', 'https:\/\/exemplo.com\/foto.jpg'],\r\n ['Cal\u00e7a Jeans', 'https:\/\/exemplo.com\/calca.jpg']\r\n ]);\r\n XLSX.utils.book_append_sheet(wb, ws, 'Produtos');\r\n XLSX.writeFile(wb, 'modelo_catalogo_produtos.xlsx');\r\n });\r\n \r\n \/\/ Fun\u00e7\u00e3o auxiliar para aguardar (delay)\r\n function sleep(ms) {\r\n return new Promise(resolve => setTimeout(resolve, ms));\r\n }\r\n \r\n \/\/ Fun\u00e7\u00e3o para criar produto com retry\r\n async function createProductWithRetry(productData, maxRetries = 3) {\r\n for (let attempt = 1; attempt <= maxRetries; attempt++) {\r\n try {\r\n await databases.createDocument(\r\n DATABASE_ID,\r\n COLLECTIONS.productCatalog,\r\n ID.unique(),\r\n productData\r\n );\r\n return { success: true };\r\n } catch (error) {\r\n if (error.code === 429 && attempt < maxRetries) {\r\n \/\/ Rate limit - aguardar progressivamente mais tempo\r\n const waitTime = attempt * 2000; \/\/ 2s, 4s, 6s\r\n console.log(`Rate limit atingido. Aguardando ${waitTime\/1000}s antes da tentativa ${attempt + 1}...`);\r\n await sleep(waitTime);\r\n } else {\r\n return { success: false, error: error.message };\r\n }\r\n }\r\n }\r\n return { success: false, error: 'M\u00e1ximo de tentativas excedido' };\r\n }\r\n \r\n excelUpload.addEventListener('change', async (e) => {\r\n const file = e.target.files[0];\r\n if (!file) return;\r\n \r\n uploadExcelFeedback.textContent = 'Processando planilha...';\r\n uploadExcelFeedback.className = 'text-xs sm:text-sm mt-2 text-blue-600';\r\n \r\n try {\r\n const data = await file.arrayBuffer();\r\n const workbook = XLSX.read(data);\r\n const worksheet = workbook.Sheets[workbook.SheetNames[0]];\r\n const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });\r\n \r\n let successCount = 0;\r\n let errorCount = 0;\r\n const totalRows = jsonData.length - 1; \/\/ Excluir cabe\u00e7alho\r\n \r\n \/\/ Pular primeira linha (cabe\u00e7alho)\r\n for (let i = 1; i < jsonData.length; i++) {\r\n const row = jsonData[i];\r\n const name = row[0]?.toString().trim();\r\n const photo = row[1]?.toString().trim();\r\n \r\n if (!name || !photo) continue;\r\n \r\n \/\/ Atualizar progresso\r\n uploadExcelFeedback.textContent = `Importando ${i}\/${totalRows}: ${name}...`;\r\n \r\n const result = await createProductWithRetry({\r\n name: name,\r\n photo: photo,\r\n createdBy_email: currentUser.email,\r\n createdBy_uid: currentUser.$id,\r\n createdBy_displayName: currentUser.name || currentUser.email,\r\n createdAt: new Date().toISOString()\r\n });\r\n \r\n if (result.success) {\r\n successCount++;\r\n } else {\r\n console.error(`Erro ao adicionar produto \"${name}\":`, result.error);\r\n errorCount++;\r\n }\r\n \r\n \/\/ Delay entre produtos para evitar rate limit (500ms)\r\n await sleep(500);\r\n }\r\n \r\n console.log('Upload conclu\u00eddo. Recarregando cat\u00e1logo...');\r\n \r\n \/\/ Recarregar cat\u00e1logo e for\u00e7ar renderiza\u00e7\u00e3o\r\n await loadCatalog();\r\n \r\n \/\/ Scroll suave at\u00e9 a lista de produtos (se n\u00e3o estiver vis\u00edvel)\r\n setTimeout(() => {\r\n const catalogList = document.getElementById('product-catalog-list');\r\n if (catalogList && catalogList.children.length > 0) {\r\n catalogList.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\r\n }\r\n }, 300);\r\n \r\n uploadExcelFeedback.textContent = `\u2713 ${successCount} produtos importados${errorCount > 0 ? ` | ${errorCount} erro(s)` : '!'} - Cat\u00e1logo atualizado!`;\r\n uploadExcelFeedback.className = 'text-xs sm:text-sm mt-2 text-green-600 font-semibold';\r\n \r\n excelUpload.value = '';\r\n \r\n setTimeout(() => { uploadExcelFeedback.textContent = ''; }, 5000);\r\n } catch (error) {\r\n console.error('Erro no upload:', error);\r\n uploadExcelFeedback.textContent = '\u2717 Erro ao processar planilha: ' + error.message;\r\n uploadExcelFeedback.className = 'text-xs sm:text-sm mt-2 text-red-600';\r\n }\r\n });\r\n \r\n \/\/ ===== EDITAR RETORNO =====\r\n window.editReturn = async function(returnId) {\r\n const returnData = state.archived.find(r => r.$id === returnId);\r\n if (!returnData) {\r\n alert('Retorno n\u00e3o encontrado');\r\n return;\r\n }\r\n \r\n \/\/ Armazenar dados globalmente\r\n editingReturnId = returnId;\r\n editingReturnData = JSON.parse(JSON.stringify(returnData)); \/\/ Clone profundo\r\n editProductPhotos = returnData.productPhotos ? JSON.parse(JSON.stringify(returnData.productPhotos)) : [];\r\n \r\n \/\/ Preencher formul\u00e1rio\r\n editCodeInput.value = returnData.code || '';\r\n editSellerInput.value = returnData.sellerName || '';\r\n editObservationsInput.value = returnData.observations || '';\r\n \r\n \/\/ Renderizar produtos\r\n renderEditProducts();\r\n \r\n \/\/ Renderizar fotos e v\u00eddeos\r\n renderEditMedia();\r\n \r\n \/\/ Mostrar modal\r\n editModal.classList.remove('hidden');\r\n };\r\n \r\n function renderEditProducts() {\r\n editProductsList.innerHTML = '';\r\n \r\n if (!editingReturnData.products || editingReturnData.products.length === 0) {\r\n editProductsList.innerHTML = '<p class=\"text-gray-500 text-sm\">Nenhum produto neste retorno<\/p>';\r\n return;\r\n }\r\n \r\n editingReturnData.products.forEach((product, index) => {\r\n const div = document.createElement('div');\r\n div.className = 'border rounded-lg p-3 bg-gray-50';\r\n div.innerHTML = `\r\n <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-3\">\r\n <div class=\"sm:col-span-2\">\r\n <label class=\"block text-xs font-medium text-gray-600 mb-1\">Produto<\/label>\r\n <p class=\"font-semibold\">${product.name}<\/p>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs font-medium text-gray-600 mb-1\">Quantidade<\/label>\r\n <p class=\"font-semibold\">${product.quantity}<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-3\">\r\n <label class=\"block text-xs font-medium text-gray-600 mb-1\">Status<\/label>\r\n <select data-index=\"${index}\" class=\"edit-product-status w-full px-3 py-2 border rounded-lg text-sm\">\r\n <option value=\"bom\" ${product.status === 'bom' ? 'selected' : ''}>Bom<\/option>\r\n <option value=\"ruim\" ${product.status === 'ruim' ? 'selected' : ''}>Ruim<\/option>\r\n <option value=\"quebrado\" ${product.status === 'quebrado' ? 'selected' : ''}>Quebrado<\/option>\r\n <option value=\"itens-faltando\" ${product.status === 'itens-faltando' ? 'selected' : ''}>Itens faltando<\/option>\r\n <option value=\"ao-remetente\" ${product.status === 'ao-remetente' ? 'selected' : ''}>Ao remetente<\/option>\r\n <\/select>\r\n <\/div>\r\n `;\r\n editProductsList.appendChild(div);\r\n });\r\n \r\n \/\/ Adicionar event listeners para os selects de status\r\n document.querySelectorAll('.edit-product-status').forEach(select => {\r\n select.addEventListener('change', (e) => {\r\n const index = parseInt(e.target.getAttribute('data-index'));\r\n editingReturnData.products[index].status = e.target.value;\r\n });\r\n });\r\n }\r\n \r\n function renderEditMedia() {\r\n editMediaGrid.innerHTML = '';\r\n \r\n if (!editProductPhotos || editProductPhotos.length === 0) {\r\n editMediaGrid.innerHTML = '<p class=\"col-span-full text-gray-500 text-sm text-center py-4\">Nenhuma foto ou v\u00eddeo<\/p>';\r\n return;\r\n }\r\n \r\n editProductPhotos.forEach((photoItem, index) => {\r\n const photo = photoItem.url || photoItem;\r\n const type = photoItem.type || detectMediaType(photo);\r\n \r\n const div = document.createElement('div');\r\n div.className = 'relative group';\r\n \r\n if (type === 'video') {\r\n div.innerHTML = `\r\n <div class=\"relative aspect-square cursor-pointer\" onclick=\"viewVideo('${photo}')\">\r\n <video src=\"${photo}\" class=\"w-full h-full object-cover rounded-lg\" preload=\"metadata\"><\/video>\r\n <div class=\"absolute inset-0 flex items-center justify-center bg-black bg-opacity-30 rounded-lg\">\r\n <i class=\"fas fa-play-circle text-white text-2xl\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"removeEditMedia(${index})\" class=\"absolute -top-2 -right-2 bg-red-500 hover:bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity\">\r\n <i class=\"fas fa-times text-xs\"><\/i>\r\n <\/button>\r\n `;\r\n } else {\r\n div.innerHTML = `\r\n <div class=\"relative aspect-square cursor-pointer\" onclick=\"viewImage('${photo}')\">\r\n <img decoding=\"async\" src=\"${photo}\" class=\"w-full h-full object-cover rounded-lg\" onerror=\"this.src='https:\/\/placehold.co\/200x200\/e0e0e0\/999999?text=Erro'\">\r\n <\/div>\r\n <button onclick=\"removeEditMedia(${index})\" class=\"absolute -top-2 -right-2 bg-red-500 hover:bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity\">\r\n <i class=\"fas fa-times text-xs\"><\/i>\r\n <\/button>\r\n `;\r\n }\r\n \r\n editMediaGrid.appendChild(div);\r\n });\r\n }\r\n \r\n window.removeEditMedia = function(index) {\r\n if (confirm('Deseja remover esta m\u00eddia?')) {\r\n editProductPhotos.splice(index, 1);\r\n renderEditMedia();\r\n }\r\n };\r\n \r\n \/\/ Event listeners para adicionar m\u00eddia na edi\u00e7\u00e3o\r\n editAddPhotoBtn.addEventListener('click', () => {\r\n currentImageTarget = { type: 'edit-media' };\r\n openImageCaptureModal();\r\n });\r\n \r\n editAddVideoBtn.addEventListener('click', () => {\r\n currentVideoTarget = { type: 'edit-media' };\r\n openVideoCaptureModal();\r\n });\r\n \r\n \/\/ Fechar modal de edi\u00e7\u00e3o\r\n closeEditModal.addEventListener('click', () => {\r\n editModal.classList.add('hidden');\r\n editingReturnId = null;\r\n editingReturnData = null;\r\n editProductPhotos = [];\r\n });\r\n \r\n cancelEditBtn.addEventListener('click', () => {\r\n editModal.classList.add('hidden');\r\n editingReturnId = null;\r\n editingReturnData = null;\r\n editProductPhotos = [];\r\n });\r\n \r\n \/\/ Salvar altera\u00e7\u00f5es\r\n editReturnForm.addEventListener('submit', async (e) => {\r\n e.preventDefault();\r\n \r\n if (!editingReturnId) {\r\n alert('Erro: ID do retorno n\u00e3o encontrado');\r\n return;\r\n }\r\n \r\n \/\/ Desabilitar bot\u00e3o e mostrar loading\r\n saveEditBtn.disabled = true;\r\n saveEditBtn.innerHTML = '<i class=\"fas fa-spinner fa-spin mr-2\"><\/i>Salvando...';\r\n editSaveFeedback.textContent = 'Atualizando dados...';\r\n editSaveFeedback.className = 'text-sm text-center mt-2 text-blue-600';\r\n \r\n try {\r\n \/\/ 1. Atualizar documento principal do retorno\r\n editSaveFeedback.textContent = '1\/3 - Atualizando informa\u00e7\u00f5es b\u00e1sicas...';\r\n await databases.updateDocument(\r\n DATABASE_ID,\r\n COLLECTIONS.returnedProducts,\r\n editingReturnId,\r\n {\r\n code: editCodeInput.value.trim(),\r\n sellerName: editSellerInput.value.trim(),\r\n observations: editObservationsInput.value.trim()\r\n }\r\n );\r\n \r\n \/\/ 2. Atualizar status dos produtos\r\n editSaveFeedback.textContent = '2\/3 - Atualizando status dos produtos...';\r\n for (let product of editingReturnData.products) {\r\n if (product.$id) {\r\n await databases.updateDocument(\r\n DATABASE_ID,\r\n COLLECTIONS.returnProducts,\r\n product.$id,\r\n {\r\n status: product.status\r\n }\r\n );\r\n }\r\n }\r\n \r\n \/\/ 3. Gerenciar fotos e v\u00eddeos\r\n editSaveFeedback.textContent = '3\/3 - Atualizando fotos e v\u00eddeos...';\r\n \r\n \/\/ Carregar fotos atuais do banco\r\n const currentPhotosResponse = await databases.listDocuments(\r\n DATABASE_ID,\r\n COLLECTIONS.returnProductPhotos,\r\n [\r\n Query.equal('returnId', editingReturnId),\r\n Query.limit(500)\r\n ]\r\n );\r\n \r\n const currentPhotos = currentPhotosResponse.documents;\r\n \r\n \/\/ Deletar fotos que foram removidas\r\n const currentUrls = editProductPhotos.map(p => p.url || p);\r\n for (let photo of currentPhotos) {\r\n if (!currentUrls.includes(photo.photoUrl)) {\r\n await databases.deleteDocument(\r\n DATABASE_ID,\r\n COLLECTIONS.returnProductPhotos,\r\n photo.$id\r\n );\r\n }\r\n }\r\n \r\n \/\/ Adicionar novas fotos\r\n const existingUrls = currentPhotos.map(p => p.photoUrl);\r\n for (let i = 0; i < editProductPhotos.length; i++) {\r\n const item = editProductPhotos[i];\r\n const url = item.url || item;\r\n \r\n if (!existingUrls.includes(url)) {\r\n await databases.createDocument(\r\n DATABASE_ID,\r\n COLLECTIONS.returnProductPhotos,\r\n ID.unique(),\r\n {\r\n returnId: editingReturnId,\r\n photoUrl: url,\r\n order: i,\r\n uploadedAt: new Date().toISOString()\r\n }\r\n );\r\n }\r\n }\r\n \r\n editSaveFeedback.textContent = '\u2713 Retorno atualizado com sucesso!';\r\n editSaveFeedback.className = 'text-sm text-center mt-2 text-green-600 font-semibold';\r\n \r\n setTimeout(() => {\r\n editModal.classList.add('hidden');\r\n editingReturnId = null;\r\n editingReturnData = null;\r\n editProductPhotos = [];\r\n saveEditBtn.disabled = false;\r\n saveEditBtn.innerHTML = '<i class=\"fas fa-save mr-2\"><\/i>Salvar Altera\u00e7\u00f5es';\r\n editSaveFeedback.textContent = '';\r\n }, 1500);\r\n \r\n await loadAllData();\r\n } catch (error) {\r\n console.error('Erro completo:', error);\r\n editSaveFeedback.textContent = '\u2717 Erro ao salvar: ' + error.message;\r\n editSaveFeedback.className = 'text-sm text-center mt-2 text-red-600';\r\n saveEditBtn.disabled = false;\r\n saveEditBtn.innerHTML = '<i class=\"fas fa-save mr-2\"><\/i>Salvar Altera\u00e7\u00f5es';\r\n }\r\n });\r\n \r\n \/\/ ===== SCANNER DE C\u00d3DIGO DE BARRAS =====\r\n scanBarcodeBtn.addEventListener('click', () => {\r\n openBarcodeScanner();\r\n });\r\n \r\n async function openBarcodeScanner() {\r\n barcodeScannerModal.classList.remove('hidden');\r\n barcodeResult.classList.add('hidden');\r\n useBarcodeBtn.classList.add('hidden');\r\n retryScanBtn.classList.add('hidden');\r\n barcodeInstructions.classList.remove('hidden');\r\n barcodeDetected = '';\r\n \r\n try {\r\n \/\/ Tentar usar jsQR primeiro (mais simples e confi\u00e1vel)\r\n barcodeStream = await navigator.mediaDevices.getUserMedia({\r\n video: { \r\n facingMode: 'environment',\r\n width: { ideal: 1280 },\r\n height: { ideal: 720 }\r\n }\r\n });\r\n \r\n barcodeVideo.srcObject = barcodeStream;\r\n \r\n \/\/ Aguardar um pouco para a c\u00e2mera inicializar\r\n await new Promise(resolve => setTimeout(resolve, 500));\r\n \r\n \/\/ Iniciar scanning\r\n requestAnimationFrame(scanBarcodeWithJsQR);\r\n \r\n } catch (error) {\r\n console.error('Erro ao acessar c\u00e2mera:', error);\r\n alert('N\u00e3o foi poss\u00edvel acessar a c\u00e2mera. Verifique:\\n- Permiss\u00f5es da c\u00e2mera\\n- Se outra aplica\u00e7\u00e3o est\u00e1 usando a c\u00e2mera\\n- Se a c\u00e2mera est\u00e1 conectada');\r\n closeBarcodeScanner();\r\n }\r\n }\r\n \r\n function scanBarcodeWithJsQR() {\r\n if (!barcodeScannerModal.classList.contains('hidden') && !barcodeDetected) {\r\n if (barcodeVideo.readyState === barcodeVideo.HAVE_ENOUGH_DATA) {\r\n barcodeCanvas.width = barcodeVideo.videoWidth;\r\n barcodeCanvas.height = barcodeVideo.videoHeight;\r\n \r\n const ctx = barcodeCanvas.getContext('2d');\r\n ctx.drawImage(barcodeVideo, 0, 0);\r\n \r\n const imageData = ctx.getImageData(0, 0, barcodeCanvas.width, barcodeCanvas.height);\r\n \r\n \/\/ Tentar detectar QR Code\r\n const code = jsQR(imageData.data, imageData.width, imageData.height);\r\n if (code && code.data) {\r\n barcodeDetected = code.data;\r\n barcodeValue.textContent = barcodeDetected;\r\n barcodeResult.classList.remove('hidden');\r\n useBarcodeBtn.classList.remove('hidden');\r\n retryScanBtn.classList.remove('hidden');\r\n barcodeInstructions.classList.add('hidden');\r\n return;\r\n }\r\n }\r\n requestAnimationFrame(scanBarcodeWithJsQR);\r\n }\r\n }\r\n \r\n function scanBarcode() {\r\n if (barcodeVideo.readyState === barcodeVideo.HAVE_ENOUGH_DATA) {\r\n barcodeCanvas.height = barcodeVideo.videoHeight;\r\n barcodeCanvas.width = barcodeVideo.videoWidth;\r\n \r\n const context = barcodeCanvas.getContext('2d');\r\n context.drawImage(barcodeVideo, 0, 0, barcodeCanvas.width, barcodeCanvas.height);\r\n \r\n const imageData = context.getImageData(0, 0, barcodeCanvas.width, barcodeCanvas.height);\r\n const code = jsQR(imageData.data, imageData.width, imageData.height);\r\n \r\n if (code && !barcodeDetected) {\r\n barcodeDetected = code.data;\r\n barcodeValue.textContent = code.data;\r\n barcodeResult.classList.remove('hidden');\r\n useBarcodeBtn.classList.remove('hidden');\r\n retryScanBtn.classList.remove('hidden');\r\n barcodeInstructions.classList.add('hidden');\r\n \r\n \/\/ Parar stream temporariamente\r\n if (barcodeStream) {\r\n barcodeStream.getTracks().forEach(track => track.stop());\r\n }\r\n return;\r\n }\r\n }\r\n \r\n \/\/ Continuar escaneando se ainda n\u00e3o detectou\r\n if (!barcodeDetected && !barcodeScannerModal.classList.contains('hidden')) {\r\n requestAnimationFrame(scanBarcode);\r\n }\r\n }\r\n \r\n function closeBarcodeScanner() {\r\n \/\/ Parar Quagga se estiver ativo\r\n if (isQuaggaInitialized) {\r\n Quagga.stop();\r\n isQuaggaInitialized = false;\r\n }\r\n \r\n \/\/ Parar jsQR stream se estiver ativo\r\n if (barcodeStream) {\r\n barcodeStream.getTracks().forEach(track => track.stop());\r\n barcodeStream = null;\r\n }\r\n barcodeScannerModal.classList.add('hidden');\r\n barcodeDetected = '';\r\n }\r\n \r\n closeScannerBtn.addEventListener('click', closeBarcodeScanner);\r\n \r\n useBarcodeBtn.addEventListener('click', () => {\r\n returnCodeInput.value = barcodeDetected;\r\n closeBarcodeScanner();\r\n });\r\n \r\n retryScanBtn.addEventListener('click', () => {\r\n barcodeDetected = '';\r\n openBarcodeScanner();\r\n });\r\n \r\n \/\/ ===== COMPARTILHAR RETORNO =====\r\n window.shareReturn = function(returnId) {\r\n const shareUrl = `${window.location.origin}${window.location.pathname}?view=${returnId}`;\r\n shareLinkInput.value = shareUrl;\r\n shareModal.classList.remove('hidden');\r\n };\r\n \r\n closeShareModal.addEventListener('click', () => {\r\n shareModal.classList.add('hidden');\r\n copyFeedback.classList.add('hidden');\r\n });\r\n \r\n copyShareLink.addEventListener('click', async () => {\r\n try {\r\n await navigator.clipboard.writeText(shareLinkInput.value);\r\n copyFeedback.classList.remove('hidden');\r\n setTimeout(() => {\r\n copyFeedback.classList.add('hidden');\r\n }, 3000);\r\n } catch (error) {\r\n \/\/ Fallback para navegadores antigos\r\n shareLinkInput.select();\r\n document.execCommand('copy');\r\n copyFeedback.classList.remove('hidden');\r\n setTimeout(() => {\r\n copyFeedback.classList.add('hidden');\r\n }, 3000);\r\n }\r\n });\r\n \r\n \/\/ ===== EXCLUIR RETORNO =====\r\n window.deleteReturn = async function(returnId) {\r\n if (!confirm('ATEN\u00c7\u00c3O: Deseja realmente EXCLUIR permanentemente este retorno? Esta a\u00e7\u00e3o n\u00e3o pode ser desfeita!')) return;\r\n \r\n try {\r\n \/\/ Excluir todos os produtos relacionados com pagina\u00e7\u00e3o\r\n let offset = 0;\r\n const limit = 100;\r\n let hasMore = true;\r\n \r\n while (hasMore) {\r\n const products = await databases.listDocuments(\r\n DATABASE_ID,\r\n COLLECTIONS.returnProducts,\r\n [\r\n Query.equal('returnId', returnId),\r\n Query.limit(limit),\r\n Query.offset(offset)\r\n ]\r\n );\r\n \r\n for (let product of products.documents) {\r\n await databases.deleteDocument(DATABASE_ID, COLLECTIONS.returnProducts, product.$id);\r\n }\r\n \r\n hasMore = products.documents.length === limit;\r\n if (!hasMore) break;\r\n offset += limit;\r\n }\r\n \r\n \/\/ Excluir todas as fotos relacionadas com pagina\u00e7\u00e3o\r\n offset = 0;\r\n hasMore = true;\r\n \r\n while (hasMore) {\r\n const photos = await databases.listDocuments(\r\n DATABASE_ID,\r\n COLLECTIONS.returnProductPhotos,\r\n [\r\n Query.equal('returnId', returnId),\r\n Query.limit(limit),\r\n Query.offset(offset)\r\n ]\r\n );\r\n \r\n for (let photo of photos.documents) {\r\n await databases.deleteDocument(DATABASE_ID, COLLECTIONS.returnProductPhotos, photo.$id);\r\n }\r\n \r\n hasMore = photos.documents.length === limit;\r\n if (!hasMore) break;\r\n offset += limit;\r\n }\r\n \r\n \/\/ Excluir retorno principal\r\n await databases.deleteDocument(DATABASE_ID, COLLECTIONS.returnedProducts, returnId);\r\n \r\n alert('Retorno exclu\u00eddo com sucesso!');\r\n await loadAllData();\r\n } catch (error) {\r\n alert('Erro ao excluir: ' + error.message);\r\n }\r\n };\r\n\r\n \/\/ ===== RANKING =====\r\n function calculateRanking() {\r\n const productData = {};\r\n \r\n [...state.returned, ...state.archived].forEach(returnDoc => {\r\n returnDoc.products?.forEach(product => {\r\n const name = product.name.toLowerCase();\r\n if (!productData[name]) {\r\n productData[name] = {\r\n count: 0,\r\n photo: product.photo || '',\r\n displayName: product.name\r\n };\r\n }\r\n productData[name].count += (product.quantity || 1);\r\n \/\/ Atualizar foto se ainda n\u00e3o tiver\r\n if (!productData[name].photo && product.photo) {\r\n productData[name].photo = product.photo;\r\n }\r\n });\r\n });\r\n \r\n const sorted = Object.entries(productData)\r\n .sort((a, b) => b[1].count - a[1].count)\r\n .slice(0, 20);\r\n \r\n mostReturnedList.innerHTML = sorted.map(([name, data], index) => {\r\n const photoHTML = data.photo ? \r\n `<img decoding=\"async\" src=\"${data.photo}\" class=\"w-12 h-12 sm:w-16 sm:h-16 object-cover rounded-lg mr-2 sm:mr-3 cursor-pointer flex-shrink-0\" onclick=\"viewImage('${data.photo}')\">`\r\n : '<div class=\"w-12 h-12 sm:w-16 sm:h-16 bg-gray-200 rounded-lg mr-2 sm:mr-3 flex items-center justify-center flex-shrink-0\"><i class=\"fas fa-box text-gray-400 text-sm sm:text-base\"><\/i><\/div>';\r\n \r\n return `\r\n <div class=\"flex items-center justify-between p-3 sm:p-4 bg-white border rounded-lg hover:shadow-md transition gap-2\">\r\n <div class=\"flex items-center flex-1 min-w-0\">\r\n <span class=\"text-lg sm:text-2xl font-bold text-gray-400 mr-2 sm:mr-4 w-6 sm:w-10 flex-shrink-0\">${index + 1}\u00ba<\/span>\r\n ${photoHTML}\r\n <span class=\"font-semibold text-gray-800 text-xs sm:text-base truncate\" title=\"${data.displayName}\">${data.displayName}<\/span>\r\n <\/div>\r\n <span class=\"bg-blue-100 text-blue-800 px-2 sm:px-4 py-1 sm:py-2 rounded-full font-bold text-sm sm:text-lg flex-shrink-0\">${data.count}<\/span>\r\n <\/div>\r\n `;\r\n }).join('');\r\n }\r\n\r\n \/\/ ===== CONTADORES =====\r\n function updateCounts() {\r\n document.getElementById('all-count').textContent = state.returned.length;\r\n document.getElementById('archived-count').textContent = state.archived.length;\r\n }\r\n\r\n \/\/ ===== BUSCA =====\r\n searchAllInput.addEventListener('input', (e) => {\r\n const term = e.target.value.toLowerCase();\r\n filterReturns(allProductsList, state.returned, term);\r\n });\r\n\r\n searchArchivedInput.addEventListener('input', (e) => {\r\n const term = e.target.value.toLowerCase();\r\n filterReturns(archivedProductsList, state.archived, term);\r\n });\r\n\r\n function filterReturns(container, data, term) {\r\n container.innerHTML = '';\r\n const filtered = data.filter(r => \r\n r.code.toLowerCase().includes(term) ||\r\n r.sellerName.toLowerCase().includes(term) ||\r\n r.observations?.toLowerCase().includes(term) ||\r\n r.products?.some(p => p.name.toLowerCase().includes(term))\r\n );\r\n filtered.forEach(returnData => {\r\n container.appendChild(createReturnCard(returnData, container === archivedProductsList));\r\n });\r\n }\r\n\r\n \/\/ ===== VISUALIZA\u00c7\u00c3O P\u00daBLICA =====\r\n async function loadPublicView(returnId) {\r\n try {\r\n console.log('Carregando visualiza\u00e7\u00e3o p\u00fablica para ID:', returnId);\r\n \r\n \/\/ Usar cliente p\u00fablico para evitar problemas de autentica\u00e7\u00e3o\r\n const returnDoc = await publicDatabases.getDocument(\r\n DATABASE_ID,\r\n COLLECTIONS.returnedProducts,\r\n returnId\r\n );\r\n \r\n console.log('Retorno carregado:', returnDoc);\r\n \r\n \/\/ Carregar produtos relacionados\r\n const productsResponse = await publicDatabases.listDocuments(\r\n DATABASE_ID,\r\n COLLECTIONS.returnProducts,\r\n [Query.equal('returnId', returnId)]\r\n );\r\n returnDoc.products = productsResponse.documents;\r\n \r\n \/\/ Carregar fotos relacionadas com tipo\r\n const photosResponse = await publicDatabases.listDocuments(\r\n DATABASE_ID,\r\n COLLECTIONS.returnProductPhotos,\r\n [Query.equal('returnId', returnId), Query.orderAsc('order')]\r\n );\r\n returnDoc.productPhotos = photosResponse.documents.map(doc => ({\r\n url: doc.photoUrl,\r\n type: doc.mediaType || detectMediaType(doc.photoUrl)\r\n }));\r\n \r\n \/\/ Armazenar m\u00eddias globalmente para download\r\n window.currentPublicMedia = returnDoc.productPhotos;\r\n \r\n \/\/ Esconder tela de login e mostrar visualiza\u00e7\u00e3o p\u00fablica\r\n loginScreen.classList.add('hidden');\r\n \r\n \/\/ Criar container de visualiza\u00e7\u00e3o p\u00fablica\r\n const publicContainer = document.createElement('div');\r\n publicContainer.className = 'max-w-4xl mx-auto p-3 sm:p-6 lg:p-8';\r\n \r\n \/\/ Criar bot\u00e3o de download se houver fotos\/v\u00eddeos\r\n const downloadButton = returnDoc.productPhotos && returnDoc.productPhotos.length > 0 ? `\r\n <button onclick=\"downloadAllMedia()\" \r\n class=\"mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 sm:px-6 py-2 sm:py-3 rounded-lg text-sm sm:text-base min-h-[48px]\">\r\n <i class=\"fas fa-download mr-2\"><\/i>Baixar Todas as M\u00eddias (${returnDoc.productPhotos.length})\r\n <\/button>\r\n ` : '';\r\n \r\n publicContainer.innerHTML = `\r\n <div class=\"bg-white rounded-lg shadow-lg p-4 sm:p-6 mb-4 sm:mb-6\">\r\n <div class=\"text-center mb-4 sm:mb-6\">\r\n <div class=\"mx-auto h-12 w-12 sm:h-16 sm:w-16 flex items-center justify-center rounded-full bg-blue-100 mb-3 sm:mb-4\">\r\n <i class=\"fas fa-box-open text-xl sm:text-2xl text-blue-600\"><\/i>\r\n <\/div>\r\n <h1 class=\"text-xl sm:text-3xl font-bold text-gray-900\">Informa\u00e7\u00f5es do Retorno<\/h1>\r\n <p class=\"text-gray-600 mt-1 sm:mt-2 text-sm sm:text-base\">Detalhes da sua encomenda<\/p>\r\n ${downloadButton}\r\n <\/div>\r\n <\/div>\r\n ` ;\r\n \r\n \/\/ Adicionar card do retorno com bot\u00f5es de download\r\n const card = createReturnCard(returnDoc, false, true);\r\n \/\/ Remover bot\u00f5es de a\u00e7\u00e3o do card p\u00fablico\r\n const footer = card.querySelector('.card-footer');\r\n if (footer) footer.remove();\r\n \r\n publicContainer.appendChild(card);\r\n \r\n \/\/ Adicionar ao body\r\n document.body.appendChild(publicContainer);\r\n \r\n } catch (error) {\r\n console.error('Erro detalhado ao carregar visualiza\u00e7\u00e3o p\u00fablica:', error);\r\n \r\n \/\/ Criar mensagem de erro detalhada\r\n let errorMessage = 'Este link pode estar inv\u00e1lido ou o retorno foi removido.';\r\n let errorTitle = 'Retorno n\u00e3o encontrado';\r\n \r\n if (error.code === 401) {\r\n errorTitle = 'Erro de Permiss\u00e3o';\r\n errorMessage = 'As permiss\u00f5es de leitura n\u00e3o est\u00e3o configuradas corretamente. Entre em contato com o suporte.';\r\n } else if (error.code === 404) {\r\n errorTitle = 'Retorno n\u00e3o encontrado';\r\n errorMessage = 'Este retorno n\u00e3o existe ou foi removido.';\r\n } else if (error.message) {\r\n errorMessage = error.message;\r\n }\r\n \r\n loginScreen.innerHTML = `\r\n <div class=\"max-w-md w-full text-center p-4 sm:p-8 mx-4\">\r\n <div class=\"mx-auto h-12 w-12 sm:h-16 sm:w-16 flex items-center justify-center rounded-full bg-red-100 mb-3 sm:mb-4\">\r\n <i class=\"fas fa-exclamation-triangle text-xl sm:text-2xl text-red-600\"><\/i>\r\n <\/div>\r\n <h2 class=\"text-xl sm:text-2xl font-bold text-gray-900 mb-2\">${errorTitle}<\/h2>\r\n <p class=\"text-gray-600 mb-3 sm:mb-4 text-sm sm:text-base\">${errorMessage}<\/p>\r\n <div class=\"bg-yellow-50 border border-yellow-200 rounded-lg p-3 sm:p-4 text-left\">\r\n <p class=\"text-xs text-yellow-800\">\r\n <strong>Nota para administradores:<\/strong><br>\r\n Para que o compartilhamento funcione, configure as permiss\u00f5es no Appwrite Console:\r\n <\/p>\r\n <ul class=\"text-xs text-yellow-800 mt-2 ml-4 list-disc space-y-1\">\r\n <li>Collection <code class=\"bg-yellow-100 px-1 rounded\">returned_products<\/code> \u2192 Permissions \u2192 Read: Any<\/li>\r\n <li>Collection <code class=\"bg-yellow-100 px-1 rounded\">return_products<\/code> \u2192 Permissions \u2192 Read: Any<\/li>\r\n <li>Collection <code class=\"bg-yellow-100 px-1 rounded\">return_product_photos<\/code> \u2192 Permissions \u2192 Read: Any<\/li>\r\n <li>Storage Bucket \u2192 Settings \u2192 Permissions \u2192 Read: Any<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n }\r\n \r\n \/\/ ===== RESTAURA\u00c7\u00c3O DE MODAL AP\u00d3S RETORNO DO FILE PICKER =====\r\n \/\/ Quando o iOS\/Android retorna de c\u00e2mera\/galeria, pode recarregar a p\u00e1gina.\r\n \/\/ Esta fun\u00e7\u00e3o detecta se havia um modal aberto antes e o reabre.\r\n function restoreModalStateFromStorage() {\r\n let modalState = null;\r\n try { modalState = JSON.parse(localStorage.getItem(MODAL_STATE_KEY)); } catch (e) {}\r\n if (!modalState) return;\r\n\r\n localStorage.removeItem(MODAL_STATE_KEY);\r\n console.log('[APP] Restaurando modal ap\u00f3s retorno do file picker:', modalState);\r\n\r\n \/\/ Sempre restaurar o rascunho first\r\n restoreRegisterDraft();\r\n\r\n \/\/ Reabrir o modal correto na aba de upload\r\n if (modalState.modal === 'image') {\r\n currentImageTarget = { type: 'product-photo', index: productPhotos.length };\r\n openImageCaptureModal();\r\n switchToUploadTab();\r\n } else if (modalState.modal === 'video') {\r\n currentVideoTarget = { type: 'product-video', index: productPhotos.length };\r\n openVideoCaptureModal();\r\n switchToVideoUploadTab();\r\n }\r\n }\r\n\r\n \/\/ Handler pageshow: cobre o caso do iOS bfcache (back-forward cache) e PWA\r\n window.addEventListener('pageshow', (event) => {\r\n console.log('[APP] pageshow - persisted:', event.persisted);\r\n \/\/ S\u00f3 age se o sistema principal estiver vis\u00edvel (usu\u00e1rio logado)\r\n if (!mainSystem || mainSystem.classList.contains('hidden')) return;\r\n restoreModalStateFromStorage();\r\n });\r\n\r\n \/\/ ===== INICIALIZA\u00c7\u00c3O =====\r\n document.addEventListener('DOMContentLoaded', async () => {\r\n \/\/ Verificar se \u00e9 visualiza\u00e7\u00e3o p\u00fablica\r\n const urlParams = new URLSearchParams(window.location.search);\r\n const viewId = urlParams.get('view');\r\n \r\n if (viewId) {\r\n \/\/ Modo visualiza\u00e7\u00e3o p\u00fablica\r\n await loadPublicView(viewId);\r\n return;\r\n }\r\n \r\n \/\/ Modo normal - restaurar rascunho (quando houver)\r\n restoreRegisterDraft();\r\n if (productEntriesContainer.children.length === 0) {\r\n addProductEntry();\r\n }\r\n renderProductPhotos();\r\n \r\n \/\/ Verificar se j\u00e1 est\u00e1 logado\r\n try {\r\n currentUser = await account.get();\r\n showMainSystem();\r\n loadAllData();\r\n \/\/ Restaurar modal de upload se a p\u00e1gina recarregou durante o file picker (iOS)\r\n restoreModalStateFromStorage();\r\n } catch (error) {\r\n \/\/ Usu\u00e1rio n\u00e3o est\u00e1 logado\r\n console.log('Usu\u00e1rio n\u00e3o autenticado');\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Retornos – Envio Nacional Retornos – Envio Nacional Realize o login para acessar Email Senha Entrar Criar Conta Controle de Retornos Sistema Envio Nacional Sair Registrar Todos (0) Arquivo (0) Ranking Cat\u00e1logo Registrar Novo Retorno C\u00f3digo do Retorno Canal de Venda Selecione…ShopeeMercado LivreLoja F\u00edsicaSiteWhatsAppOutro Nome do Vendedor Observa\u00e7\u00f5es Produtos Adicionar Produto Fotos e V\u00eddeos (0\/10) […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/devolucao.envionacional.com.br\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devolucao.envionacional.com.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/devolucao.envionacional.com.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/devolucao.envionacional.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devolucao.envionacional.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":103,"href":"https:\/\/devolucao.envionacional.com.br\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":139,"href":"https:\/\/devolucao.envionacional.com.br\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/139"}],"wp:attachment":[{"href":"https:\/\/devolucao.envionacional.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}