Painel de Controle de Retornos<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/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 <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 <style>\r\n \/* Estilo customizado para a fonte e transi\u00e7\u00f5es suaves *\/\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background-color: #f0f2f5;\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: #3b82f6; color: #3b82f6; }\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 img[data-broken-img=\"true\"] { content: url('https:\/\/placehold.co\/100x100\/e0e0e0\/999999?text=Sem+Foto'); }\r\n \/* Estilos para o Scanner de C\u00f3digo de Barras *\/\r\n #qr-video { \r\n transform: scaleX(-1); \/* Espelha a c\u00e2mera frontal *\/\r\n min-height: 200px;\r\n }\r\n .image-placeholder { cursor: pointer; }\r\n \r\n \/* Anima\u00e7\u00e3o para o overlay do scanner *\/\r\n @keyframes pulse-border {\r\n 0%, 100% { opacity: 0.7; }\r\n 50% { opacity: 1; }\r\n }\r\n \r\n .scanner-overlay {\r\n animation: pulse-border 2s ease-in-out infinite;\r\n }\r\n \r\n \/* Estilos para os status do scanner *\/\r\n .scanner-status-success {\r\n background: linear-gradient(45deg, #10b981, #059669);\r\n }\r\n \r\n .scanner-status-error {\r\n background: linear-gradient(45deg, #ef4444, #dc2626);\r\n }\r\n \r\n .scanner-status-warning {\r\n background: linear-gradient(45deg, #f59e0b, #d97706);\r\n }\r\n \r\n \/* Estilos para o dropdown de sugest\u00f5es de produtos *\/\r\n .product-suggestions-dropdown {\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n right: 0;\r\n background: white;\r\n border: 1px solid #d1d5db;\r\n border-top: none;\r\n border-radius: 0 0 0.375rem 0.375rem;\r\n max-height: 200px;\r\n overflow-y: auto;\r\n z-index: 50;\r\n box-shadow: 0 4px 6px -1px rgb(0 0 0 \/ 0.1);\r\n }\r\n \r\n .product-suggestion-item {\r\n display: flex;\r\n align-items: center;\r\n padding: 8px 12px;\r\n cursor: pointer;\r\n border-bottom: 1px solid #f3f4f6;\r\n }\r\n \r\n .product-suggestion-item:hover {\r\n background-color: #f9fafb;\r\n }\r\n \r\n .product-suggestion-item.selected {\r\n background-color: #eff6ff;\r\n }\r\n \r\n .product-suggestion-item:last-child {\r\n border-bottom: none;\r\n }\r\n \r\n .product-suggestion-image {\r\n width: 32px;\r\n height: 32px;\r\n object-fit: cover;\r\n border-radius: 4px;\r\n margin-right: 8px;\r\n flex-shrink: 0;\r\n }\r\n \r\n .product-suggestion-name {\r\n flex-grow: 1;\r\n font-size: 14px;\r\n color: #374151;\r\n }\r\n \r\n .product-name-container {\r\n position: relative;\r\n }\r\n \r\n \/* Estilos para o bot\u00e3o de etiqueta *\/\r\n .view-label-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 4px;\r\n transition: all 0.2s ease;\r\n }\r\n \r\n .view-label-btn:disabled,\r\n .view-label-btn.disabled {\r\n opacity: 0.3;\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n }\r\n \r\n \/* Estilos para fotos do produto *\/\r\n .product-photo-item {\r\n position: relative;\r\n border: 2px dashed #d1d5db;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n background-color: #f9fafb;\r\n transition: all 0.2s ease;\r\n cursor: pointer;\r\n min-height: 120px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n \r\n .product-photo-item:hover {\r\n border-color: #6b7280;\r\n background-color: #f3f4f6;\r\n }\r\n \r\n .product-photo-item.has-image {\r\n border-style: solid;\r\n border-color: #10b981;\r\n background-color: white;\r\n }\r\n \r\n .product-photo-item.has-image:hover {\r\n border-color: #059669;\r\n }\r\n \r\n .product-photo-item img {\r\n width: 100%;\r\n height: 120px;\r\n object-fit: cover;\r\n }\r\n \r\n .product-photo-item .remove-photo-btn {\r\n position: absolute;\r\n top: -8px;\r\n right: -8px;\r\n background: #ef4444;\r\n color: white;\r\n border: 2px solid white;\r\n border-radius: 50%;\r\n width: 24px;\r\n height: 24px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n font-size: 12px;\r\n font-weight: bold;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n transition: all 0.2s ease;\r\n }\r\n \r\n .product-photo-item .remove-photo-btn:hover {\r\n background: #dc2626;\r\n transform: scale(1.1);\r\n }\r\n \r\n .product-photo-placeholder {\r\n text-align: center;\r\n color: #6b7280;\r\n font-size: 14px;\r\n }\r\n \r\n .product-photo-placeholder i {\r\n font-size: 24px;\r\n margin-bottom: 8px;\r\n display: block;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased text-gray-800\">\r\n\r\n <div id=\"app\" class=\"max-w-7xl mx-auto p-4 sm:p-6 lg:p-8\">\r\n \r\n \r\n <div id=\"main-system\">\r\n \r\n <header class=\"mb-6\">\r\n <div class=\"flex justify-between items-center flex-wrap gap-4\">\r\n <div>\r\n <h1 class=\"text-3xl font-bold text-gray-900 flex items-center gap-3\">\r\n <i class=\"fas fa-undo text-blue-500\"><\/i>\r\n Painel de Controle de Retornos\r\n <\/h1>\r\n <p class=\"text-gray-600 mt-1\">Gerencie, rastreie e analise os produtos retornados.<\/p>\r\n <\/div>\r\n <div class=\"flex items-center space-x-4\">\r\n <div class=\"text-sm text-gray-600\">\r\n <i class=\"fas fa-user-circle mr-1\"><\/i>\r\n <span id=\"user-display-name\">Acesso Livre<\/span>\r\n <\/div>\r\n <button id=\"test-connection-btn\" class=\"bg-green-600 text-white px-3 py-1 rounded text-sm hover:bg-green-700\">\r\n <i class=\"fas fa-wifi mr-1\"><\/i>\r\n Status\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <nav class=\"bg-white rounded-lg shadow-sm mb-6 overflow-x-auto\">\r\n <ul class=\"flex border-b border-gray-200 min-w-max\">\r\n <li><a href=\"#\" data-tab=\"register\" class=\"nav-link active font-semibold p-4 inline-block border-b-2 border-transparent\">Registrar<\/a><\/li>\r\n <li><a href=\"#\" data-tab=\"all\" class=\"nav-link font-semibold p-4 inline-block border-b-2 border-transparent\">Todos<\/a><\/li>\r\n <li><a href=\"#\" data-tab=\"archived\" class=\"nav-link font-semibold p-4 inline-block border-b-2 border-transparent\">Arquivados<\/a><\/li>\r\n <li><a href=\"#\" data-tab=\"most-returned\" class=\"nav-link font-semibold p-4 inline-block border-b-2 border-transparent\">Mais Retornados<\/a><\/li>\r\n <li><a href=\"#\" data-tab=\"catalog\" class=\"nav-link font-semibold p-4 inline-block border-b-2 border-transparent\">Cat\u00e1logo<\/a><\/li>\r\n <li><a href=\"#\" data-tab=\"picoshare\" class=\"nav-link font-semibold p-4 inline-block border-b-2 border-transparent\">PicoShare<\/a><\/li>\r\n <\/ul>\r\n <\/nav>\r\n\r\n <main>\r\n \r\n <div id=\"register-content\" class=\"tab-content active\">\r\n <div class=\"bg-white p-6 rounded-lg shadow-md max-w-3xl mx-auto\">\r\n <h2 class=\"text-2xl font-bold mb-4\">Registrar Novo Retorno<\/h2>\r\n <form id=\"register-form\" class=\"space-y-6\">\r\n <div>\r\n <label for=\"return-code\" class=\"block text-sm font-medium text-gray-700 mb-1\">C\u00f3digo de Retorno (NF-e, Pedido, etc.)<\/label>\r\n <div class=\"flex items-center gap-2\">\r\n <input type=\"text\" id=\"return-code\" required class=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500\" placeholder=\"Insira o c\u00f3digo ou leia o c\u00f3digo de barras\">\r\n <button type=\"button\" id=\"scan-qr-button\" class=\"p-2.5 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300\" title=\"Ler c\u00f3digo de barras\">\r\n <i class=\"fas fa-barcode text-xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div>\r\n <label for=\"return-observations\" class=\"block text-sm font-medium text-gray-700 mb-1\">Observa\u00e7\u00f5es (opcional)<\/label>\r\n <textarea id=\"return-observations\" rows=\"3\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 resize-vertical\" placeholder=\"Adicione observa\u00e7\u00f5es sobre o retorno...\"><\/textarea>\r\n <\/div>\r\n \r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-2\">Fotos do Produto (opcional - at\u00e9 5 fotos)<\/label>\r\n <div id=\"product-photos-container\" class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3\">\r\n \r\n <\/div>\r\n <div class=\"mt-3 flex items-center justify-between\">\r\n <button type=\"button\" id=\"add-product-photo-btn\" class=\"bg-gray-200 text-gray-700 px-3 py-2 rounded-md hover:bg-gray-300 text-sm\">\r\n <i class=\"fas fa-camera mr-1\"><\/i>Adicionar Foto\r\n <\/button>\r\n <span id=\"photo-count-indicator\" class=\"text-xs text-gray-500\">0\/5 fotos<\/span>\r\n <\/div>\r\n <\/div>\r\n <div id=\"product-entries-container\" class=\"space-y-6\">\r\n \r\n <\/div>\r\n <div class=\"flex justify-between items-center pt-4 border-t\">\r\n <button type=\"button\" id=\"add-product-button\" class=\"bg-gray-200 text-gray-800 font-semibold py-2 px-4 rounded-lg hover:bg-gray-300 transition-colors\">\r\n <i class=\"fas fa-plus mr-2\"><\/i>Adicionar Produto\r\n <\/button>\r\n <button type=\"submit\" class=\"bg-blue-600 text-white font-bold py-2 px-6 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors\">\r\n <i class=\"fas fa-save mr-2\"><\/i>Salvar Retorno\r\n <\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"all-content\" class=\"tab-content\">\r\n <div class=\"sticky top-4 z-10 mb-6\">\r\n <div class=\"flex gap-4 items-center mb-3\">\r\n <input type=\"text\" id=\"search-all\" class=\"flex-1 px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-lg\" placeholder=\"\ud83d\udd0e Buscar por nome, c\u00f3digo, status ou data (AAAA-MM-DD)...\">\r\n <div class=\"bg-green-100 text-green-800 px-3 py-2 rounded-lg font-semibold text-sm whitespace-nowrap\">\r\n <i class=\"fas fa-clipboard-list mr-1\"><\/i>\r\n <span id=\"all-count\">0<\/span> retornos\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"all-products-list\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\"><\/div>\r\n <\/div>\r\n <div id=\"archived-content\" class=\"tab-content\">\r\n <div class=\"sticky top-4 z-10 mb-6\">\r\n <div class=\"flex gap-4 items-center mb-3\">\r\n <input type=\"text\" id=\"search-archived\" class=\"flex-1 px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-lg\" placeholder=\"\ud83d\udd0e Buscar em arquivados...\">\r\n <div class=\"bg-gray-100 text-gray-800 px-3 py-2 rounded-lg font-semibold text-sm whitespace-nowrap\">\r\n <i class=\"fas fa-archive mr-1\"><\/i>\r\n <span id=\"archived-count\">0<\/span> arquivados\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"archived-products-list\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\"><\/div>\r\n <\/div>\r\n <div id=\"most-returned-content\" class=\"tab-content\">\r\n <div class=\"bg-white p-6 rounded-lg shadow-md\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <h2 class=\"text-2xl font-bold\">Ranking de Produtos Mais Retornados<\/h2>\r\n <div class=\"bg-orange-100 text-orange-800 px-3 py-1 rounded-full font-semibold text-sm\">\r\n <i class=\"fas fa-chart-bar mr-1\"><\/i>\r\n <span id=\"ranking-count\">0<\/span> produtos \u00fanicos\r\n <\/div>\r\n <\/div>\r\n <div id=\"most-returned-list\" class=\"space-y-4\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"catalog-content\" class=\"tab-content\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\r\n <div class=\"lg:col-span-1 space-y-6\">\r\n <div class=\"bg-white p-6 rounded-lg shadow-md\">\r\n <h2 class=\"text-2xl font-bold mb-4\">Cadastrar Produto<\/h2>\r\n <form id=\"add-product-form\" class=\"space-y-4\">\r\n <div>\r\n <label for=\"new-product-name\" class=\"block text-sm font-medium\">Nome do Produto<\/label>\r\n <input type=\"text\" id=\"new-product-name\" required class=\"w-full px-3 py-2 border border-gray-300 rounded-md\">\r\n <\/div>\r\n <div>\r\n <label for=\"new-product-photo\" class=\"block text-sm font-medium\">URL da Foto<\/label>\r\n <input type=\"url\" id=\"new-product-photo\" required class=\"w-full px-3 py-2 border border-gray-300 rounded-md\">\r\n <\/div>\r\n <div id=\"add-product-feedback\" class=\"text-sm text-center h-5\"><\/div>\r\n <div class=\"flex gap-2\">\r\n <button type=\"submit\" class=\"flex-1 bg-blue-600 text-white font-bold py-2 px-6 rounded-lg hover:bg-blue-700\">\r\n <i class=\"fas fa-plus-circle mr-2\"><\/i>Adicionar\r\n <\/button>\r\n <button type=\"button\" id=\"test-firebase-btn\" class=\"bg-gray-500 text-white font-bold py-2 px-4 rounded-lg hover:bg-gray-600\" title=\"Testar conex\u00e3o Firebase\">\r\n <i class=\"fas fa-flask\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-lg shadow-md\">\r\n <h2 class=\"text-2xl font-bold mb-4\">Importar Planilha (CSV)<\/h2>\r\n <div class=\"mb-4 p-3 bg-blue-50 rounded-lg border border-blue-200\">\r\n <p class=\"text-sm text-blue-800 font-semibold mb-2\">\ud83d\udccb Formato esperado:<\/p>\r\n <code class=\"block bg-white p-2 rounded text-xs\">\r\nnome_produto,url_foto<br>\r\nPizza Margherita,https:\/\/exemplo.com\/pizza.jpg<br>\r\nHamb\u00farguer Cl\u00e1ssico,https:\/\/exemplo.com\/burguer.jpg\r\n <\/code>\r\n <p class=\"text-xs text-blue-600 mt-2\">\r\n \u2713 Separadores suportados: v\u00edrgula (,) ou ponto e v\u00edrgula (;)<br>\r\n \u2713 Primeira linha ser\u00e1 ignorada (cabe\u00e7alho)<br>\r\n \u2713 Aspas duplas ser\u00e3o removidas automaticamente\r\n <\/p>\r\n <\/div>\r\n <input type=\"file\" id=\"csv-file-input\" accept=\".csv\" class=\"block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"lg:col-span-2 bg-white p-6 rounded-lg shadow-md\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <h2 class=\"text-2xl font-bold\">Produtos Cadastrados<\/h2>\r\n <div class=\"bg-blue-100 text-blue-800 px-3 py-1 rounded-full font-semibold text-sm\">\r\n <i class=\"fas fa-box mr-1\"><\/i>\r\n <span id=\"product-count\">0<\/span> produtos\r\n <\/div>\r\n <\/div>\r\n <div id=\"product-catalog-list\" class=\"space-y-3 max-h-[600px] overflow-y-auto pr-2\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"picoshare-content\" class=\"tab-content\">\r\n <div class=\"max-w-4xl mx-auto\">\r\n <div class=\"bg-white p-6 rounded-lg shadow-md\">\r\n <div class=\"text-center mb-6\">\r\n <div class=\"mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-purple-100 mb-4\">\r\n <i class=\"fas fa-cloud-upload-alt text-2xl text-purple-600\"><\/i>\r\n <\/div>\r\n <h2 class=\"text-3xl font-bold text-gray-900 mb-2\">PicoShare - Upload de Imagens<\/h2>\r\n <p class=\"text-gray-600\">Acesse o sistema de upload de imagens PicoShare<\/p>\r\n <\/div>\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n \r\n <div class=\"bg-gradient-to-br from-purple-50 to-blue-50 p-6 rounded-lg border border-purple-200\">\r\n <h3 class=\"text-xl font-semibold text-gray-800 mb-4 flex items-center\">\r\n <i class=\"fas fa-external-link-alt mr-2 text-purple-600\"><\/i>\r\n Acessar PicoShare\r\n <\/h3>\r\n \r\n <div class=\"space-y-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-2\">URL do Sistema:<\/label>\r\n <div class=\"flex items-center space-x-2\">\r\n <input type=\"url\" id=\"picoshare-url\" value=\"https:\/\/chatwoot-picoshare.nounpw.easypanel.host\/\" readonly class=\"flex-1 px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-sm\">\r\n <button id=\"copy-url-btn\" class=\"px-3 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 text-sm\" title=\"Copiar URL\">\r\n <i class=\"fas fa-copy\"><\/i>\r\n <\/button>\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\">Senha de Acesso:<\/label>\r\n <div class=\"flex items-center space-x-2\">\r\n <input type=\"text\" id=\"picoshare-password\" value=\"Jmrosario19!\" readonly class=\"flex-1 px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-sm font-mono\">\r\n <button id=\"copy-password-btn\" class=\"px-3 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 text-sm\" title=\"Copiar Senha\">\r\n <i class=\"fas fa-copy\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <button id=\"open-picoshare-btn\" class=\"w-full bg-purple-600 text-white font-bold py-3 px-6 rounded-lg hover:bg-purple-700 transition-colors\">\r\n <i class=\"fas fa-external-link-alt mr-2\"><\/i>\r\n Abrir PicoShare em Nova Aba\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"bg-gradient-to-br from-blue-50 to-green-50 p-6 rounded-lg border border-blue-200\">\r\n <h3 class=\"text-xl font-semibold text-gray-800 mb-4 flex items-center\">\r\n <i class=\"fas fa-info-circle mr-2 text-blue-600\"><\/i>\r\n Como Usar\r\n <\/h3>\r\n \r\n <div class=\"space-y-3 text-sm text-gray-700\">\r\n <div class=\"flex items-start space-x-2\">\r\n <span class=\"flex-shrink-0 w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold\">1<\/span>\r\n <p>Clique em \"Abrir PicoShare\" para acessar o sistema<\/p>\r\n <\/div>\r\n \r\n <div class=\"flex items-start space-x-2\">\r\n <span class=\"flex-shrink-0 w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold\">2<\/span>\r\n <p>Use a senha <code class=\"bg-gray-200 px-1 rounded\">Jmrosario19!<\/code> se solicitada<\/p>\r\n <\/div>\r\n \r\n <div class=\"flex items-start space-x-2\">\r\n <span class=\"flex-shrink-0 w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold\">3<\/span>\r\n <p>Fa\u00e7a upload das suas imagens<\/p>\r\n <\/div>\r\n \r\n <div class=\"flex items-start space-x-2\">\r\n <span class=\"flex-shrink-0 w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold\">4<\/span>\r\n <p>Copie o link da imagem enviada<\/p>\r\n <\/div>\r\n \r\n <div class=\"flex items-start space-x-2\">\r\n <span class=\"flex-shrink-0 w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold\">5<\/span>\r\n <p>Cole o link nos campos de imagem do sistema<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg\">\r\n <p class=\"text-xs text-yellow-800\">\r\n <i class=\"fas fa-lightbulb mr-1\"><\/i>\r\n <strong>Dica:<\/strong> Guarde os links das imagens enviadas para usar nos registros de retorno.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"mt-6 bg-gray-50 p-6 rounded-lg border border-gray-200\">\r\n <h3 class=\"text-lg font-semibold text-gray-800 mb-4 flex items-center\">\r\n <i class=\"fas fa-history mr-2 text-gray-600\"><\/i>\r\n Links Recentes (salvos localmente)\r\n <\/h3>\r\n \r\n <div id=\"recent-links-container\" class=\"space-y-2 max-h-48 overflow-y-auto\">\r\n <p class=\"text-gray-500 text-sm\">Nenhum link salvo ainda. Use o bot\u00e3o \"Salvar Link\" para adicionar.<\/p>\r\n <\/div>\r\n \r\n <div class=\"mt-4 flex items-center space-x-2\">\r\n <input type=\"url\" id=\"new-link-input\" placeholder=\"Cole um link do PicoShare aqui para salvar...\" class=\"flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm\">\r\n <button id=\"save-link-btn\" class=\"px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 text-sm\">\r\n <i class=\"fas fa-save mr-1\"><\/i>Salvar Link\r\n <\/button>\r\n <button id=\"clear-links-btn\" class=\"px-3 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 text-sm\" title=\"Limpar todos os links\">\r\n <i class=\"fas fa-trash\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n \r\n <\/div> \r\n \r\n <datalist id=\"product-suggestions\"><\/datalist>\r\n\r\n \r\n <template id=\"product-entry-template\">\r\n <div class=\"product-entry border rounded-lg p-4 space-y-4 relative\">\r\n <button type=\"button\" class=\"remove-product-button absolute -top-2 -right-2 bg-red-500 text-white rounded-full h-6 w-6 flex items-center justify-center hover:bg-red-600\">×<\/button>\r\n <div class=\"product-name-container\">\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Nome do Produto<\/label>\r\n <input type=\"text\" list=\"product-suggestions\" required class=\"product-name w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"Digite para buscar\" autocomplete=\"off\">\r\n <div class=\"product-suggestions-dropdown hidden\"><\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Quantidade<\/label>\r\n <input type=\"number\" required min=\"1\" value=\"1\" class=\"product-quantity w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"Qtd\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Status<\/label>\r\n <select required class=\"return-status w-full px-3 py-2 border border-gray-300 rounded-md bg-white\">\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=\"AO REMETENTE\">AO REMETENTE<\/option>\r\n <option value=\"FALTANDO ITENS\">FALTANDO ITENS<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 items-start\">\r\n <div class=\"text-center\">\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Foto do Produto<\/label>\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/150x150\/e0e0e0\/999999?text=Produto\" class=\"image-placeholder mt-1 h-28 w-full object-cover rounded-md bg-gray-100 border\" data-type=\"product\">\r\n <input type=\"hidden\" class=\"product-photo-data\">\r\n <\/div>\r\n <div class=\"text-center\">\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Foto da Etiqueta<\/label>\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/150x150\/e0e0e0\/999999?text=Etiqueta\" class=\"image-placeholder mt-1 h-28 w-full object-cover rounded-md bg-gray-100 border\" data-type=\"label\">\r\n <input type=\"hidden\" class=\"label-photo-data\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/template>\r\n\r\n <template id=\"product-card-template\">\r\n <div class=\"bg-white rounded-lg shadow-md overflow-hidden card-animation\">\r\n <div class=\"p-4\">\r\n <div class=\"flex justify-between items-start mb-2\">\r\n <div class=\"flex-grow\">\r\n <p class=\"text-sm text-gray-600 mb-1\"><strong>C\u00f3digo:<\/strong> <span class=\"return-code\"><\/span><\/p>\r\n <p class=\"text-sm text-gray-600 mb-2\"><strong>Data:<\/strong> <span class=\"return-date\"><\/span><\/p>\r\n <div class=\"return-observations-section hidden\">\r\n <p class=\"text-sm text-gray-600 mb-2\"><strong>Observa\u00e7\u00f5es:<\/strong> <span class=\"return-observations text-gray-700\"><\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"text-right space-y-1\">\r\n <p class=\"text-xs text-gray-500\">Registrado por:<\/p>\r\n <p class=\"text-xs font-medium text-blue-600 created-by-name\"><\/p>\r\n <div class=\"labels-count-badge hidden mt-2 text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full\">\r\n <i class=\"fas fa-tag mr-1\"><\/i>\r\n <span class=\"labels-count\">0<\/span> etiqueta(s)\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"product-photos-section hidden border-b pb-3 mb-3\">\r\n <div class=\"flex items-center mb-2\">\r\n <i class=\"fas fa-images text-blue-600 mr-2\"><\/i>\r\n <span class=\"text-sm font-medium text-gray-700\">Fotos do Produto<\/span>\r\n <\/div>\r\n <div class=\"product-photos-grid grid grid-cols-3 sm:grid-cols-5 gap-2\">\r\n \r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"products-in-card-list space-y-3 border-t pt-3\"><\/div>\r\n <\/div>\r\n <div class=\"p-4 bg-gray-50\">\r\n <button class=\"finish-button w-full bg-green-500 text-white font-semibold py-2 px-4 rounded-lg hover:bg-green-600\">\r\n <i class=\"fas fa-check-circle mr-2\"><\/i>Finalizado\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/template>\r\n \r\n <template id=\"product-in-card-template\">\r\n <div class=\"flex items-center text-sm\">\r\n <img decoding=\"async\" src=\"\" class=\"product-image h-12 w-12 object-cover rounded-md mr-3 cursor-pointer\" alt=\"Foto do produto\">\r\n <div class=\"flex-grow\">\r\n <div class=\"font-semibold product-name\"><\/div>\r\n <div class=\"text-xs text-gray-500\">Qtd: <span class=\"product-quantity\"><\/span><\/div>\r\n <\/div>\r\n <div class=\"flex items-center space-x-2\">\r\n <button class=\"view-label-btn text-blue-600 hover:text-blue-800 p-1 rounded-md hover:bg-blue-50 transition-colors\" title=\"Ver etiqueta\">\r\n <i class=\"fas fa-tag text-sm\"><\/i>\r\n <\/button>\r\n <span class=\"status-badge text-xs font-semibold px-2 py-1 rounded-full whitespace-nowrap\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/template>\r\n\r\n <template id=\"ranking-item-template\">\r\n <div class=\"flex items-center bg-gray-50 p-4 rounded-lg border border-gray-200 card-animation\">\r\n <div class=\"text-2xl font-bold text-blue-600 w-12 text-center ranking-position\"><\/div>\r\n <img decoding=\"async\" src=\"\" alt=\"Foto do produto\" class=\"h-16 w-16 rounded-md object-cover mx-4 ranking-image\" onerror=\"this.dataset.brokenImg = 'true'\">\r\n <div class=\"flex-grow\">\r\n <h4 class=\"font-semibold text-lg ranking-name\"><\/h4>\r\n <\/div>\r\n <div class=\"text-right\">\r\n <p class=\"text-2xl font-bold ranking-count\"><\/p>\r\n <p class=\"text-sm text-gray-500\">retornos<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/template>\r\n\r\n \r\n <div id=\"image-capture-modal\" class=\"fixed inset-0 bg-black bg-opacity-60 z-50 flex items-center justify-center hidden\">\r\n <div class=\"bg-white p-6 rounded-lg shadow-xl max-w-lg w-full\">\r\n <div class=\"flex justify-end\"><button id=\"close-image-modal\" class=\"text-2xl\">×<\/button><\/div>\r\n <div class=\"space-y-4\">\r\n <h3 class=\"text-lg font-semibold\">Adicionar Imagem<\/h3>\r\n \r\n \r\n <div class=\"bg-purple-50 border border-purple-200 p-4 rounded-lg\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <h4 class=\"font-medium text-purple-800 flex items-center\">\r\n <i class=\"fas fa-cloud-upload-alt mr-2\"><\/i>\r\n PicoShare - Upload de Imagens\r\n <\/h4>\r\n <button id=\"modal-open-picoshare\" class=\"text-xs bg-purple-600 text-white px-3 py-1 rounded hover:bg-purple-700\">\r\n <i class=\"fas fa-external-link-alt mr-1\"><\/i>Abrir\r\n <\/button>\r\n <\/div>\r\n <div class=\"text-sm text-purple-700\">\r\n <p>\ud83d\udd17 <strong>Site:<\/strong> chatwoot-picoshare.nounpw.easypanel.host<\/p>\r\n <p>\ud83d\udd11 <strong>Senha:<\/strong> Jmrosario19!<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-2\">Cole a URL da imagem:<\/label>\r\n <input type=\"url\" id=\"image-url-input\" class=\"w-full p-2 border rounded\" placeholder=\"https:\/\/exemplo.com\/imagem.jpg\">\r\n <\/div>\r\n \r\n \r\n <div id=\"modal-recent-links\" class=\"bg-gray-50 border border-gray-200 p-3 rounded-lg max-h-32 overflow-y-auto\">\r\n <div class=\"text-xs font-medium text-gray-600 mb-2\">Links Recentes:<\/div>\r\n <div id=\"modal-recent-links-list\" class=\"space-y-1\">\r\n <p class=\"text-xs text-gray-500\">Nenhum link salvo<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flex justify-end gap-4 mt-6\">\r\n <button id=\"confirm-image-btn\" class=\"px-6 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600\">Confirmar<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"qr-scanner-modal\" class=\"fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center hidden p-4\">\r\n <div class=\"bg-white p-4 rounded-lg shadow-xl max-w-md w-full relative\">\r\n <button id=\"close-qr-scanner-modal\" class=\"absolute -top-2 -right-2 bg-red-500 text-white rounded-full h-8 w-8 text-lg\">×<\/button>\r\n \r\n \r\n <div class=\"text-center mb-4\">\r\n <div class=\"mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-blue-100 mb-2\">\r\n <i class=\"fas fa-barcode text-xl text-blue-600\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-lg font-bold text-gray-900\">Scanner de C\u00f3digo de Barras<\/h3>\r\n <p class=\"text-sm text-gray-600\">Aponte a c\u00e2mera para o c\u00f3digo<\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"relative bg-gray-900 rounded-lg overflow-hidden\">\r\n <video id=\"qr-video\" class=\"w-full h-auto rounded bg-gray-200\"><\/video>\r\n \r\n \r\n <div class=\"absolute inset-0 flex items-center justify-center pointer-events-none\">\r\n <div class=\"border-2 border-white border-dashed w-48 h-24 rounded-lg scanner-overlay\"><\/div>\r\n <\/div>\r\n \r\n \r\n <div id=\"scanner-status\" class=\"absolute bottom-2 left-2 right-2 text-center\">\r\n <div class=\"bg-black bg-opacity-60 text-white text-xs px-2 py-1 rounded\">\r\n <span id=\"scanner-message\">Procurando c\u00f3digo...<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"mt-4 flex justify-between items-center\">\r\n <button id=\"toggle-camera-btn\" class=\"px-3 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 text-sm\">\r\n <i class=\"fas fa-sync-alt mr-1\"><\/i>\r\n Trocar C\u00e2mera\r\n <\/button>\r\n \r\n <div class=\"text-xs text-gray-500\">\r\n <i class=\"fas fa-lightbulb mr-1\"><\/i>\r\n Dica: Mantenha o c\u00f3digo centralizado\r\n <\/div>\r\n <\/div>\r\n \r\n <canvas id=\"qr-canvas\" class=\"hidden\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"image-viewer-modal\" class=\"fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center hidden p-4\">\r\n <button id=\"close-viewer-modal\" class=\"absolute top-4 right-4 text-white text-4xl\">×<\/button>\r\n <img decoding=\"async\" id=\"viewer-image\" src=\"\" class=\"max-w-full max-h-full\">\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <script>\r\n \/\/ Fun\u00e7\u00e3o para trocar abas - executada imediatamente quando a p\u00e1gina carrega\r\n function initTabs() {\r\n const tabs = document.querySelectorAll('.nav-link');\r\n const tabContents = document.querySelectorAll('.tab-content');\r\n \r\n function switchTab(tabId) {\r\n \/\/ Remove a classe active de todos os conte\u00fados\r\n tabContents.forEach(content => {\r\n content.classList.remove('active');\r\n });\r\n \r\n \/\/ Remove a classe active de todas as abas\r\n tabs.forEach(tab => {\r\n tab.classList.remove('active');\r\n });\r\n \r\n \/\/ Adiciona active no conte\u00fado da aba selecionada\r\n const activeContent = document.getElementById(tabId + '-content');\r\n if (activeContent) {\r\n activeContent.classList.add('active');\r\n }\r\n \r\n \/\/ Adiciona active na aba selecionada\r\n const activeTab = document.querySelector('[data-tab=\"' + tabId + '\"]');\r\n if (activeTab) {\r\n activeTab.classList.add('active');\r\n }\r\n }\r\n \r\n \/\/ Exp\u00f5e a fun\u00e7\u00e3o switchTab globalmente\r\n window.switchTabGlobal = switchTab;\r\n \r\n \/\/ Adiciona event listeners para cada aba\r\n tabs.forEach(tab => {\r\n tab.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n const tabId = this.getAttribute('data-tab');\r\n switchTab(tabId);\r\n });\r\n });\r\n \r\n \/\/ Inicia na aba de registro\r\n switchTab('register');\r\n }\r\n \r\n \/\/ Executa quando o DOM estiver carregado\r\n if (document.readyState === 'loading') {\r\n document.addEventListener('DOMContentLoaded', initTabs);\r\n } else {\r\n initTabs();\r\n }\r\n <\/script>\r\n\r\n <script type=\"module\">\r\n import { initializeApp } from \"https:\/\/www.gstatic.com\/firebasejs\/10.12.2\/firebase-app.js\";\r\n import { getFirestore, collection, onSnapshot, addDoc, doc, deleteDoc, getDoc, serverTimestamp } from \"https:\/\/www.gstatic.com\/firebasejs\/10.12.2\/firebase-firestore.js\";\r\n import { getAuth, signInAnonymously, onAuthStateChanged } from \"https:\/\/www.gstatic.com\/firebasejs\/10.12.2\/firebase-auth.js\";\r\n\r\n \/\/ Configura\u00e7\u00e3o do Firebase\r\n const firebaseConfig = {\r\n apiKey: \"AIzaSyACSj3xQ9N_p57zQILkd_x8LUnGUh3hC5k\",\r\n authDomain: \"retorno-de-produto.firebaseapp.com\",\r\n projectId: \"retorno-de-produto\",\r\n storageBucket: \"retorno-de-produto.appspot.com\",\r\n messagingSenderId: \"1049067333037\",\r\n appId: \"1:1049067333037:web:retorno-de-produto\"\r\n };\r\n \r\n console.log('Firebase config loaded: Configuration found');\r\n \r\n const app = initializeApp(firebaseConfig);\r\n const db = getFirestore(app);\r\n const auth = getAuth(app);\r\n\r\n \/\/ Teste de conectividade Firebase\r\n console.log('Firebase App inicializado:', app.name);\r\n console.log('Firestore inicializado:', !!db);\r\n console.log('Auth inicializado:', !!auth);\r\n\r\n document.addEventListener('DOMContentLoaded', async () => {\r\n \/\/ --- Elementos da Interface ---\r\n const mainSystem = document.getElementById('main-system');\r\n const userDisplayName = document.getElementById('user-display-name');\r\n const testConnectionBtn = document.getElementById('test-connection-btn');\r\n \r\n \/\/ --- Configura\u00e7\u00e3o do Firebase ---\r\n let currentUser = null;\r\n let productCatalogRef, returnedProductsRef, archivedProductsRef;\r\n\r\n \/\/ --- State and Refs ---\r\n let state = { products: [], returned: [], archived: [] };\r\n let currentImageTarget = null;\r\n let qrScannerStream = null;\r\n let productPhotos = []; \/\/ Array para armazenar as fotos do produto\r\n \r\n \/\/ --- Selectors ---\r\n const registerForm = document.getElementById('register-form');\r\n const returnCodeInput = document.getElementById('return-code');\r\n const returnObservationsInput = document.getElementById('return-observations');\r\n const scanQrButton = document.getElementById('scan-qr-button');\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 const productSuggestions = document.getElementById('product-suggestions');\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 searchAllInput = document.getElementById('search-all');\r\n const searchArchivedInput = document.getElementById('search-archived');\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 testFirebaseBtn = document.getElementById('test-firebase-btn');\r\n const csvFileInput = document.getElementById('csv-file-input');\r\n const productCatalogList = document.getElementById('product-catalog-list');\r\n \r\n \/\/ --- Modais ---\r\n const imageCaptureModal = document.getElementById('image-capture-modal');\r\n const closeImageModal = document.getElementById('close-image-modal');\r\n const imageUrlInput = document.getElementById('image-url-input');\r\n const confirmImageBtn = document.getElementById('confirm-image-btn');\r\n \r\n const qrScannerModal = document.getElementById('qr-scanner-modal');\r\n const closeQrScannerModal = document.getElementById('close-qr-scanner-modal');\r\n const qrVideo = document.getElementById('qr-video');\r\n const qrCanvas = document.getElementById('qr-canvas');\r\n\r\n const imageViewerModal = document.getElementById('image-viewer-modal');\r\n const closeViewerModal = document.getElementById('close-viewer-modal');\r\n const viewerImage = document.getElementById('viewer-image');\r\n\r\n \/\/ --- Templates ---\r\n const productEntryTemplate = document.getElementById('product-entry-template');\r\n const productCardTemplate = document.getElementById('product-card-template');\r\n const productInCardTemplate = document.getElementById('product-in-card-template');\r\n const rankingItemTemplate = document.getElementById('ranking-item-template');\r\n\r\n \r\n \/\/ --- Firebase Auth (Login An\u00f4nimo) ---\r\n \/\/ Tenta logar anonimamente assim que carrega para garantir permiss\u00f5es do banco\r\n signInAnonymously(auth).catch((error) => {\r\n console.error(\"Erro no login an\u00f4nimo:\", error);\r\n alert(\"Erro de conex\u00e3o. Verifique o console.\");\r\n });\r\n\r\n onAuthStateChanged(auth, user => {\r\n if (user) {\r\n currentUser = user;\r\n console.log('User authenticated (Anonymous):', user.uid);\r\n initFirestoreListeners();\r\n } else {\r\n currentUser = null;\r\n console.log('No user authenticated');\r\n }\r\n });\r\n\r\n \/\/ Teste de conectividade\r\n testConnectionBtn.addEventListener('click', async () => {\r\n console.log('=== TESTE DE CONECTIVIDADE INICIADO ===');\r\n \r\n \/\/ Testa status do Firebase\r\n console.log('1. Firebase App:', app.name);\r\n console.log('2. Auth status:', !!auth.currentUser);\r\n console.log('3. User UID:', auth.currentUser?.uid);\r\n console.log('4. Firestore instance:', !!db);\r\n \r\n \/\/ Testa refer\u00eancias das cole\u00e7\u00f5es\r\n console.log('5. Product catalog ref:', !!productCatalogRef);\r\n console.log('6. Returned products ref:', !!returnedProductsRef);\r\n console.log('7. Archived products ref:', !!archivedProductsRef);\r\n \r\n if (!currentUser) {\r\n alert('\u274c Aguardando autentica\u00e7\u00e3o an\u00f4nima...');\r\n return;\r\n }\r\n \r\n if (!productCatalogRef) {\r\n alert('\u274c Referencias do Firestore n\u00e3o inicializadas');\r\n return;\r\n }\r\n \r\n try {\r\n \/\/ Tenta ler dados da cole\u00e7\u00e3o de produtos\r\n console.log('8. Testando leitura dos produtos...');\r\n const { getDocs } = await import(\"https:\/\/www.gstatic.com\/firebasejs\/10.12.2\/firebase-firestore.js\");\r\n const testSnapshot = await getDocs(productCatalogRef);\r\n console.log('9. Produtos encontrados:', testSnapshot.size);\r\n \r\n alert('\u2705 Conectividade OK! Sistema operacional.');\r\n \r\n } catch (error) {\r\n console.error('\u274c Erro no teste de conectividade:', error);\r\n \r\n let errorDetails = `C\u00f3digo: ${error.code}\\nMensagem: ${error.message}`;\r\n \r\n if (error.code === 'permission-denied') {\r\n errorDetails += '\\n\\n\ud83d\udd27 Solu\u00e7\u00e3o: Verifique as regras do Firestore no Firebase Console.';\r\n } else if (error.code === 'unavailable') {\r\n errorDetails += '\\n\\n\ud83d\udd27 Solu\u00e7\u00e3o: Problema de rede ou servidor. Tente novamente.';\r\n }\r\n \r\n alert(`\u274c Erro de conectividade:\\n\\n${errorDetails}`);\r\n }\r\n });\r\n \r\n function initFirestoreListeners() {\r\n if (!currentUser) {\r\n console.error(\"User n\u00e3o dispon\u00edvel, n\u00e3o \u00e9 poss\u00edvel iniciar listeners.\");\r\n return;\r\n }\r\n console.log('Initializing Firestore...');\r\n \r\n try {\r\n \/\/ Dados compartilhados entre todos os usu\u00e1rios (sem userid na estrutura)\r\n productCatalogRef = collection(db, `shared\/productCatalog\/products`);\r\n returnedProductsRef = collection(db, `shared\/returnedProducts\/returns`);\r\n archivedProductsRef = collection(db, `shared\/archivedProducts\/returns`);\r\n \r\n console.log('Firestore references created for shared data');\r\n \r\n \/\/ Listener para cat\u00e1logo de produtos\r\n onSnapshot(productCatalogRef, (snapshot) => {\r\n console.log('=== PRODUCT CATALOG SNAPSHOT ===');\r\n state.products = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));\r\n updateAllViews();\r\n }, (error) => {\r\n console.error(\"Catalog Listener Error:\", error);\r\n alert('Erro ao conectar com o banco de dados: ' + error.message);\r\n });\r\n \r\n } catch (error) {\r\n console.error(\"Erro fatal ao inicializar Firestore:\", error);\r\n alert('Erro fatal na inicializa\u00e7\u00e3o do Firebase: ' + error.message);\r\n }\r\n \r\n onSnapshot(returnedProductsRef, (snapshot) => {\r\n state.returned = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));\r\n updateAllViews();\r\n }, (error) => console.error(\"Returned Listener Error:\", error));\r\n \r\n onSnapshot(archivedProductsRef, (snapshot) => {\r\n state.archived = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));\r\n updateAllViews();\r\n }, (error) => console.error(\"Archived Listener Error:\", error));\r\n }\r\n \r\n \/\/ --- UI Logic: Dynamic Form, Modals ---\r\n\r\n const addProductEntry = () => {\r\n const newEntry = productEntryTemplate.content.cloneNode(true);\r\n productEntriesContainer.appendChild(newEntry);\r\n const removeButtons = productEntriesContainer.querySelectorAll('.remove-product-button');\r\n if (removeButtons.length > 1) {\r\n removeButtons.forEach(btn => btn.classList.remove('hidden'));\r\n } else if (removeButtons.length === 1) {\r\n removeButtons[0].classList.add('hidden');\r\n }\r\n };\r\n productEntriesContainer.addEventListener('click', e => {\r\n if (e.target.closest('.remove-product-button')) {\r\n if (productEntriesContainer.children.length > 1) {\r\n e.target.closest('.product-entry').remove();\r\n }\r\n }\r\n if (e.target.classList.contains('image-placeholder')) {\r\n currentImageTarget = e.target;\r\n openImageCaptureModal();\r\n }\r\n });\r\n addProductButton.addEventListener('click', addProductEntry);\r\n\r\n \/\/ --- Render Functions ---\r\n const updateAllViews = () => {\r\n const allFilter = searchAllInput.value.toLowerCase();\r\n const filteredReturned = state.returned.filter(r => r.code.toLowerCase().includes(allFilter) || r.products.some(p => p.name.toLowerCase().includes(allFilter) || p.status.toLowerCase().includes(allFilter)));\r\n \r\n \/\/ Atualiza contador de \"Todos\"\r\n const allCountElement = document.getElementById('all-count');\r\n if (allCountElement) {\r\n allCountElement.textContent = state.returned.length;\r\n }\r\n \r\n renderReturnCards(filteredReturned, allProductsList);\r\n \r\n const archivedFilter = searchArchivedInput.value.toLowerCase();\r\n const filteredArchived = state.archived.filter(r => r.code.toLowerCase().includes(archivedFilter) || r.products.some(p => p.name.toLowerCase().includes(archivedFilter) || p.status.toLowerCase().includes(archivedFilter)));\r\n \r\n \/\/ Atualiza contador de \"Arquivados\"\r\n const archivedCountElement = document.getElementById('archived-count');\r\n if (archivedCountElement) {\r\n archivedCountElement.textContent = state.archived.length;\r\n }\r\n \r\n renderReturnCards(filteredArchived, archivedProductsList, true);\r\n\r\n renderMostReturned();\r\n renderProductCatalog();\r\n updateSuggestions();\r\n };\r\n\r\n const renderReturnCards = (returns, container, isArchivedList = false) => {\r\n container.innerHTML = '';\r\n if (returns.length === 0) {\r\n container.innerHTML = `<p class=\"text-gray-500 col-span-full text-center py-10\">Nenhum registro encontrado.<\/p>`;\r\n return;\r\n }\r\n const sortedReturns = [...returns].sort((a, b) => new Date(b.date) - new Date(a.date));\r\n \r\n sortedReturns.forEach(ret => {\r\n const card = productCardTemplate.content.cloneNode(true);\r\n card.querySelector('.return-code').textContent = ret.code;\r\n card.querySelector('.return-date').textContent = new Date(ret.date).toLocaleDateString('pt-BR');\r\n \r\n \/\/ Mostra quem criou o registro\r\n const createdByElement = card.querySelector('.created-by-name');\r\n if (ret.createdBy && ret.createdBy.displayName) {\r\n createdByElement.textContent = ret.createdBy.displayName;\r\n } else if (ret.createdBy && ret.createdBy.email) {\r\n createdByElement.textContent = ret.createdBy.email.split('@')[0];\r\n } else {\r\n createdByElement.textContent = 'Visitante';\r\n }\r\n \r\n \/\/ Mostra observa\u00e7\u00f5es se existirem\r\n const observationsSection = card.querySelector('.return-observations-section');\r\n const observationsElement = card.querySelector('.return-observations');\r\n if (ret.observations && ret.observations.trim() !== '') {\r\n observationsElement.textContent = ret.observations;\r\n observationsSection.classList.remove('hidden');\r\n }\r\n \r\n \/\/ Mostra fotos do produto se existirem\r\n const photosSection = card.querySelector('.product-photos-section');\r\n const photosGrid = card.querySelector('.product-photos-grid');\r\n if (ret.productPhotos && ret.productPhotos.length > 0) {\r\n photosGrid.innerHTML = ret.productPhotos.map(photo => `\r\n <img decoding=\"async\" src=\"${photo}\" alt=\"Foto do produto\" \r\n class=\"w-full h-16 object-cover rounded cursor-pointer hover:opacity-75 transition-opacity\"\r\n onclick=\"viewImage('${photo}')\">\r\n `).join('');\r\n photosSection.classList.remove('hidden');\r\n }\r\n \r\n const productListContainer = card.querySelector('.products-in-card-list');\r\n productListContainer.innerHTML = '';\r\n \r\n let labelsCount = 0; \/\/ Contador de etiquetas dispon\u00edveis\r\n \r\n ret.products.forEach(p => {\r\n const item = productInCardTemplate.content.cloneNode(true);\r\n const img = item.querySelector('.product-image');\r\n img.src = p.photo || 'https:\/\/placehold.co\/100x100\/e0e0e0\/999999?text=Sem+Foto';\r\n img.dataset.labelPhoto = p.labelPhoto;\r\n img.addEventListener('click', () => viewImage(p.photo));\r\n\r\n item.querySelector('.product-name').textContent = p.name;\r\n item.querySelector('.product-quantity').textContent = p.quantity || 1;\r\n \r\n \/\/ Bot\u00e3o para visualizar etiqueta\r\n const viewLabelBtn = item.querySelector('.view-label-btn');\r\n if (p.labelPhoto && p.labelPhoto.trim() !== '') {\r\n labelsCount++; \/\/ Incrementa contador\r\n viewLabelBtn.addEventListener('click', () => viewImage(p.labelPhoto));\r\n viewLabelBtn.title = 'Ver etiqueta';\r\n viewLabelBtn.classList.remove('disabled');\r\n } else {\r\n viewLabelBtn.classList.add('disabled');\r\n viewLabelBtn.title = 'Etiqueta n\u00e3o dispon\u00edvel';\r\n \/\/ Impede clique quando n\u00e3o h\u00e1 etiqueta\r\n viewLabelBtn.addEventListener('click', (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n });\r\n }\r\n \r\n const statusBadge = item.querySelector('.status-badge');\r\n statusBadge.textContent = p.status;\r\n statusBadge.className = 'status-badge text-xs font-semibold px-2 py-1 rounded-full whitespace-nowrap';\r\n switch (p.status) {\r\n case 'BOM': statusBadge.classList.add('bg-green-100', 'text-green-800'); break;\r\n case 'RUIM': statusBadge.classList.add('bg-yellow-100', 'text-yellow-800'); break;\r\n case 'QUEBRADO': statusBadge.classList.add('bg-red-100', 'text-red-800'); break;\r\n case 'AO REMETENTE': statusBadge.classList.add('bg-blue-100', 'text-blue-800'); break;\r\n case 'FALTANDO ITENS': statusBadge.classList.add('bg-orange-100', 'text-orange-800'); break;\r\n }\r\n productListContainer.appendChild(item);\r\n });\r\n \r\n \/\/ Atualiza o contador de etiquetas no card\r\n const labelsCountBadge = card.querySelector('.labels-count-badge');\r\n const labelsCountSpan = card.querySelector('.labels-count');\r\n if (labelsCount > 0) {\r\n labelsCountSpan.textContent = labelsCount;\r\n labelsCountBadge.classList.remove('hidden');\r\n } else {\r\n labelsCountBadge.classList.add('hidden');\r\n }\r\n\r\n const finishButton = card.querySelector('.finish-button');\r\n if (isArchivedList) {\r\n finishButton.remove();\r\n } else {\r\n finishButton.addEventListener('click', () => finishReturn(ret.id));\r\n }\r\n container.appendChild(card);\r\n });\r\n };\r\n\r\n const renderMostReturned = () => {\r\n mostReturnedList.innerHTML = '';\r\n const allReturnedProducts = [...state.returned, ...state.archived].flatMap(ret => ret.products);\r\n if (allReturnedProducts.length === 0) {\r\n mostReturnedList.innerHTML = `<p class=\"text-gray-500 text-center py-10\">Nenhum retorno registrado ainda.<\/p>`;\r\n const rankingCountElement = document.getElementById('ranking-count');\r\n if (rankingCountElement) {\r\n rankingCountElement.textContent = '0';\r\n }\r\n return;\r\n }\r\n const productCounts = allReturnedProducts.reduce((acc, product) => {\r\n if (!acc[product.name]) {\r\n acc[product.name] = { count: 0, photo: product.photo };\r\n }\r\n acc[product.name].count += (product.quantity || 1);\r\n return acc;\r\n }, {});\r\n const rankedProducts = Object.entries(productCounts)\r\n .map(([name, data]) => ({ name, ...data }))\r\n .sort((a, b) => b.count - a.count);\r\n \r\n \/\/ Atualiza contador de produtos \u00fanicos\r\n const rankingCountElement = document.getElementById('ranking-count');\r\n if (rankingCountElement) {\r\n rankingCountElement.textContent = rankedProducts.length;\r\n }\r\n \r\n rankedProducts.forEach((product, index) => {\r\n const item = rankingItemTemplate.content.cloneNode(true);\r\n item.querySelector('.ranking-position').textContent = `#${index + 1}`;\r\n item.querySelector('.ranking-image').src = product.photo;\r\n item.querySelector('.ranking-name').textContent = product.name;\r\n item.querySelector('.ranking-count').textContent = product.count;\r\n mostReturnedList.appendChild(item);\r\n });\r\n };\r\n \r\n const renderProductCatalog = () => {\r\n const productCountElement = document.getElementById('product-count');\r\n \r\n \/\/ Atualiza o contador\r\n if (productCountElement) {\r\n productCountElement.textContent = state.products.length;\r\n }\r\n \r\n productCatalogList.innerHTML = '';\r\n if (state.products.length === 0) {\r\n productCatalogList.innerHTML = `<p class=\"text-gray-500 text-center py-10\">Nenhum produto cadastrado.<\/p>`;\r\n return;\r\n }\r\n state.products.forEach(product => {\r\n const productDiv = document.createElement('div');\r\n productDiv.className = 'flex items-center bg-gray-50 p-3 rounded-lg border';\r\n \r\n const createdByText = product.createdBy ? \r\n (product.createdBy.displayName || product.createdBy.email ? product.createdBy.email.split('@')[0] : 'Visitante') : \r\n 'Sistema';\r\n \r\n productDiv.innerHTML = `\r\n <img decoding=\"async\" src=\"${product.photo}\" alt=\"Foto de ${product.name}\" class=\"h-12 w-12 rounded-md object-cover mr-4\" onerror=\"this.dataset.brokenImg = 'true'\">\r\n <div class=\"flex-grow\">\r\n <div class=\"font-semibold\">${product.name}<\/div>\r\n <div class=\"text-xs text-gray-500\">Cadastrado por: ${createdByText}<\/div>\r\n <\/div>\r\n <button data-id=\"${product.id}\" class=\"delete-product-btn text-red-500 hover:text-red-700 text-lg\">\r\n <i class=\"fas fa-trash-alt\"><\/i>\r\n <\/button>`;\r\n productCatalogList.appendChild(productDiv);\r\n });\r\n document.querySelectorAll('.delete-product-btn').forEach(button => {\r\n button.addEventListener('click', (e) => deleteProductFromCatalog(e.currentTarget.dataset.id));\r\n });\r\n };\r\n\r\n \/\/ --- Product Photos Management ---\r\n const renderProductPhotos = () => {\r\n productPhotosContainer.innerHTML = '';\r\n \r\n \/\/ Renderiza fotos existentes\r\n productPhotos.forEach((photo, index) => {\r\n const photoDiv = document.createElement('div');\r\n photoDiv.className = 'product-photo-item has-image';\r\n photoDiv.innerHTML = `\r\n <img decoding=\"async\" src=\"${photo}\" alt=\"Foto do produto ${index + 1}\">\r\n <button type=\"button\" class=\"remove-photo-btn\" data-index=\"${index}\">×<\/button>\r\n `;\r\n \r\n \/\/ Visualizar foto\r\n photoDiv.querySelector('img').addEventListener('click', () => viewImage(photo));\r\n \r\n \/\/ Remover foto\r\n photoDiv.querySelector('.remove-photo-btn').addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n removeProductPhoto(index);\r\n });\r\n \r\n productPhotosContainer.appendChild(photoDiv);\r\n });\r\n \r\n \/\/ Adiciona slots vazios at\u00e9 completar 5\r\n for (let i = productPhotos.length; i < 5; i++) {\r\n const emptyDiv = document.createElement('div');\r\n emptyDiv.className = 'product-photo-item';\r\n emptyDiv.innerHTML = `\r\n <div class=\"product-photo-placeholder\">\r\n <i class=\"fas fa-camera\"><\/i>\r\n <div>Adicionar Foto<\/div>\r\n <\/div>\r\n `;\r\n \r\n emptyDiv.addEventListener('click', () => {\r\n currentImageTarget = { type: 'product-photo', index: i };\r\n openImageCaptureModal();\r\n });\r\n \r\n productPhotosContainer.appendChild(emptyDiv);\r\n }\r\n \r\n updatePhotoCountIndicator();\r\n updateAddPhotoButton();\r\n };\r\n \r\n const updatePhotoCountIndicator = () => {\r\n photoCountIndicator.textContent = `${productPhotos.length}\/5 fotos`;\r\n };\r\n \r\n const updateAddPhotoButton = () => {\r\n if (productPhotos.length >= 5) {\r\n addProductPhotoBtn.disabled = true;\r\n addProductPhotoBtn.classList.add('opacity-50', 'cursor-not-allowed');\r\n addProductPhotoBtn.innerHTML = '<i class=\"fas fa-camera mr-1\"><\/i>Limite atingido';\r\n } else {\r\n addProductPhotoBtn.disabled = false;\r\n addProductPhotoBtn.classList.remove('opacity-50', 'cursor-not-allowed');\r\n addProductPhotoBtn.innerHTML = '<i class=\"fas fa-camera mr-1\"><\/i>Adicionar Foto';\r\n }\r\n };\r\n \r\n const addProductPhoto = (photoUrl) => {\r\n if (productPhotos.length < 5) {\r\n productPhotos.push(photoUrl);\r\n renderProductPhotos();\r\n }\r\n };\r\n \r\n const removeProductPhoto = (index) => {\r\n if (index >= 0 && index < productPhotos.length) {\r\n productPhotos.splice(index, 1);\r\n renderProductPhotos();\r\n }\r\n };\r\n \r\n \/\/ Event listeners para fotos do produto\r\n addProductPhotoBtn.addEventListener('click', () => {\r\n if (productPhotos.length < 5) {\r\n currentImageTarget = { type: 'product-photo', index: productPhotos.length };\r\n openImageCaptureModal();\r\n }\r\n });\r\n\r\n \/\/ --- Form Submissions ---\r\n registerForm.addEventListener('submit', async e => {\r\n e.preventDefault();\r\n const productEntries = [];\r\n productEntriesContainer.querySelectorAll('.product-entry').forEach(entry => {\r\n productEntries.push({\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 const newReturn = {\r\n code: returnCodeInput.value.trim(),\r\n observations: returnObservationsInput.value.trim(),\r\n productPhotos: [...productPhotos], \/\/ Copia das fotos do produto\r\n date: new Date().toISOString(),\r\n products: productEntries,\r\n \/\/ Informa\u00e7\u00f5es do usu\u00e1rio que registrou\r\n createdBy: {\r\n email: currentUser.email || null,\r\n uid: currentUser.uid,\r\n displayName: 'Visitante'\r\n },\r\n createdAt: serverTimestamp()\r\n };\r\n \r\n try {\r\n await addDoc(returnedProductsRef, newReturn);\r\n registerForm.reset();\r\n productEntriesContainer.innerHTML = '';\r\n productPhotos = []; \/\/ Limpa as fotos do produto\r\n renderProductPhotos(); \/\/ Re-renderiza as fotos\r\n addProductEntry();\r\n \/\/ Chama a fun\u00e7\u00e3o global de troca de abas\r\n window.switchTabGlobal('all');\r\n } catch (error) {\r\n console.error(\"Error saving return:\", error);\r\n alert('Erro ao salvar retorno: ' + error.message);\r\n }\r\n });\r\n\r\n addProductForm.addEventListener('submit', async (e) => {\r\n e.preventDefault();\r\n console.log('Form submitted - adding product to catalog');\r\n addProductFeedback.textContent = '';\r\n const name = newProductNameInput.value.trim();\r\n const photo = newProductPhotoInput.value.trim();\r\n console.log('Product data:', { name, photo });\r\n \r\n if (!name || !photo) {\r\n addProductFeedback.textContent = 'Nome e URL s\u00e3o obrigat\u00f3rios.';\r\n addProductFeedback.className = 'text-sm text-center h-5 text-red-500';\r\n console.log('Validation failed: missing name or photo');\r\n return;\r\n }\r\n if (state.products.some(p => p.name.toLowerCase() === name.toLowerCase())) {\r\n addProductFeedback.textContent = 'Este produto j\u00e1 existe.';\r\n addProductFeedback.className = 'text-sm text-center h-5 text-red-500';\r\n console.log('Validation failed: product already exists');\r\n return;\r\n }\r\n \r\n if (!productCatalogRef) {\r\n console.error('productCatalogRef is not initialized');\r\n addProductFeedback.textContent = 'Erro: Firebase n\u00e3o inicializado.';\r\n addProductFeedback.className = 'text-sm text-center h-5 text-red-500';\r\n return;\r\n }\r\n \r\n const productData = {\r\n name, \r\n photo,\r\n \/\/ Informa\u00e7\u00f5es do usu\u00e1rio que cadastrou\r\n createdBy: {\r\n email: currentUser.email || null,\r\n uid: currentUser.uid,\r\n displayName: 'Visitante'\r\n },\r\n createdAt: serverTimestamp()\r\n };\r\n \r\n try {\r\n console.log('Attempting to add product to Firebase...');\r\n await addDoc(productCatalogRef, productData);\r\n console.log('Product added successfully!');\r\n addProductForm.reset();\r\n addProductFeedback.textContent = 'Produto adicionado!';\r\n addProductFeedback.className = 'text-sm text-center h-5 text-green-600';\r\n setTimeout(() => { addProductFeedback.textContent = ''; }, 3000);\r\n } catch (error) {\r\n console.error(\"Error adding product:\", error);\r\n addProductFeedback.textContent = 'Erro ao salvar: ' + error.message;\r\n addProductFeedback.className = 'text-sm text-center h-5 text-red-500';\r\n }\r\n });\r\n \r\n \/\/ Bot\u00e3o de teste do Firebase\r\n testFirebaseBtn.addEventListener('click', async () => {\r\n console.log('=== TESTE FIREBASE INICIADO ===');\r\n \r\n const testProduct = {\r\n name: `Produto Teste ${Date.now()}`,\r\n photo: 'https:\/\/via.placeholder.com\/100x100\/0066cc\/ffffff?text=TESTE',\r\n createdBy: {\r\n email: currentUser.email || null,\r\n uid: currentUser.uid,\r\n displayName: 'Visitante'\r\n },\r\n createdAt: serverTimestamp()\r\n };\r\n \r\n console.log('Dados do produto teste:', testProduct);\r\n console.log('Firebase inicializado?', !!app);\r\n console.log('Auth inicializado?', !!auth);\r\n console.log('Firestore inicializado?', !!db);\r\n console.log('Current User:', currentUser.email);\r\n console.log('Product catalog ref existe?', !!productCatalogRef);\r\n console.log('State atual:', state);\r\n \r\n if (!productCatalogRef) {\r\n alert('Firebase n\u00e3o est\u00e1 inicializado! Aguarde alguns segundos.');\r\n return;\r\n }\r\n \r\n try {\r\n console.log('Tentando adicionar produto teste...');\r\n const docRef = await addDoc(productCatalogRef, testProduct);\r\n console.log('\u2705 Produto teste adicionado com sucesso! ID:', docRef.id);\r\n alert(`\u2705 Teste bem-sucedido! Produto adicionado com ID: ${docRef.id}`);\r\n } catch (error) {\r\n console.error('\u274c Erro no teste:', error);\r\n alert(`\u274c Erro no teste: ${error.message}`);\r\n }\r\n });\r\n \r\n \/\/ --- Image Capture Logic ---\r\n const openImageCaptureModal = () => {\r\n imageUrlInput.value = '';\r\n imageCaptureModal.classList.remove('hidden');\r\n \/\/ Atualiza links recentes no modal\r\n updateModalRecentLinks();\r\n };\r\n \r\n const closeImageCaptureModal = () => {\r\n imageCaptureModal.classList.add('hidden');\r\n currentImageTarget = null;\r\n };\r\n\r\n confirmImageBtn.addEventListener('click', () => {\r\n const url = imageUrlInput.value.trim();\r\n if (url && currentImageTarget) {\r\n if (currentImageTarget.type === 'product-photo') {\r\n \/\/ Adiciona foto do produto\r\n addProductPhoto(url);\r\n } else {\r\n \/\/ L\u00f3gica original para fotos de produto individual\r\n currentImageTarget.src = url;\r\n currentImageTarget.nextElementSibling.value = url;\r\n }\r\n }\r\n closeImageCaptureModal();\r\n });\r\n closeImageModal.addEventListener('click', closeImageCaptureModal);\r\n \r\n \/\/ --- Modal PicoShare Logic ---\r\n const modalOpenPicoShare = document.getElementById('modal-open-picoshare');\r\n const modalRecentLinksList = document.getElementById('modal-recent-links-list');\r\n \r\n \/\/ Abrir PicoShare do modal\r\n modalOpenPicoShare?.addEventListener('click', () => {\r\n window.open('https:\/\/chatwoot-picoshare.nounpw.easypanel.host\/', '_blank');\r\n });\r\n \r\n \/\/ Atualizar links recentes no modal\r\n const updateModalRecentLinks = () => {\r\n if (!modalRecentLinksList) return;\r\n \r\n const links = loadRecentLinks();\r\n \r\n if (links.length === 0) {\r\n modalRecentLinksList.innerHTML = '<p class=\"text-xs text-gray-500\">Nenhum link salvo<\/p>';\r\n return;\r\n }\r\n \r\n modalRecentLinksList.innerHTML = links.slice(0, 3).map(link => `\r\n <div class=\"flex items-center justify-between text-xs bg-white p-2 rounded border\">\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"truncate font-medium\">${link.name}<\/div>\r\n <div class=\"truncate text-gray-500\">${link.url}<\/div>\r\n <\/div>\r\n <button onclick=\"useModalLink('${link.url}')\" class=\"ml-2 px-2 py-1 bg-blue-500 text-white rounded hover:bg-blue-600\">\r\n Usar\r\n <\/button>\r\n <\/div>\r\n `).join('');\r\n };\r\n \r\n \/\/ Fun\u00e7\u00e3o global para usar link do modal\r\n window.useModalLink = (url) => {\r\n imageUrlInput.value = url;\r\n \/\/ Dispara o evento de input para valida\u00e7\u00e3o\r\n imageUrlInput.dispatchEvent(new Event('input'));\r\n };\r\n\r\n \/\/ --- Barcode Scanner Logic ---\r\n let currentCameraIndex = 0;\r\n let availableCameras = [];\r\n \r\n const scannerMessage = document.getElementById('scanner-message');\r\n const toggleCameraBtn = document.getElementById('toggle-camera-btn');\r\n \r\n \/\/ Detectar c\u00e2meras dispon\u00edveis\r\n const detectCameras = async () => {\r\n try {\r\n const devices = await navigator.mediaDevices.enumerateDevices();\r\n availableCameras = devices.filter(device => device.kind === 'videoinput');\r\n console.log('C\u00e2meras detectadas:', availableCameras.length);\r\n \r\n if (availableCameras.length <= 1) {\r\n toggleCameraBtn.style.display = 'none';\r\n }\r\n } catch (error) {\r\n console.error('Erro ao detectar c\u00e2meras:', error);\r\n }\r\n };\r\n \r\n const updateScannerMessage = (message, type = 'info') => {\r\n if (scannerMessage) {\r\n scannerMessage.textContent = message;\r\n const statusDiv = scannerMessage.parentElement;\r\n statusDiv.className = 'bg-black bg-opacity-60 text-white text-xs px-2 py-1 rounded';\r\n \r\n switch (type) {\r\n case 'success':\r\n statusDiv.className = 'bg-green-500 bg-opacity-90 text-white text-xs px-2 py-1 rounded';\r\n break;\r\n case 'error':\r\n statusDiv.className = 'bg-red-500 bg-opacity-90 text-white text-xs px-2 py-1 rounded';\r\n break;\r\n case 'warning':\r\n statusDiv.className = 'bg-yellow-500 bg-opacity-90 text-white text-xs px-2 py-1 rounded';\r\n break;\r\n }\r\n }\r\n };\r\n \r\n const openQrScanner = async () => {\r\n qrScannerModal.classList.remove('hidden');\r\n await detectCameras();\r\n updateScannerMessage('Iniciando c\u00e2mera...');\r\n \r\n try {\r\n \/\/ Tenta usar c\u00e2mera traseira primeiro\r\n const constraints = {\r\n video: {\r\n facingMode: availableCameras.length > 1 ? 'environment' : 'user',\r\n width: { ideal: 1280, max: 1920 },\r\n height: { ideal: 720, max: 1080 }\r\n }\r\n };\r\n \r\n \/\/ Se h\u00e1 c\u00e2meras espec\u00edficas dispon\u00edveis, usa a selecionada\r\n if (availableCameras.length > 0 && currentCameraIndex < availableCameras.length) {\r\n constraints.video.deviceId = availableCameras[currentCameraIndex].deviceId;\r\n }\r\n \r\n qrScannerStream = await navigator.mediaDevices.getUserMedia(constraints);\r\n qrVideo.srcObject = qrScannerStream;\r\n qrVideo.play();\r\n \r\n updateScannerMessage('Procurando c\u00f3digo...', 'info');\r\n requestAnimationFrame(tickQrScanner);\r\n \r\n } catch(err) {\r\n console.error(\"Barcode Scanner camera error:\", err);\r\n updateScannerMessage('Erro ao acessar c\u00e2mera', 'error');\r\n \r\n setTimeout(() => {\r\n alert(\"N\u00e3o foi poss\u00edvel acessar a c\u00e2mera. Verifique as permiss\u00f5es.\");\r\n closeQrScanner();\r\n }, 2000);\r\n }\r\n };\r\n\r\n const closeQrScanner = () => {\r\n if(qrScannerStream) {\r\n qrScannerStream.getTracks().forEach(track => track.stop());\r\n }\r\n qrScannerModal.classList.add('hidden');\r\n qrScannerStream = null;\r\n updateScannerMessage('Scanner fechado');\r\n };\r\n\r\n const tickQrScanner = () => {\r\n if (qrVideo.readyState === qrVideo.HAVE_ENOUGH_DATA && qrScannerStream) {\r\n const canvasContext = qrCanvas.getContext('2d');\r\n qrCanvas.height = qrVideo.videoHeight;\r\n qrCanvas.width = qrVideo.videoWidth;\r\n canvasContext.drawImage(qrVideo, 0, 0, qrCanvas.width, qrCanvas.height);\r\n const imageData = canvasContext.getImageData(0, 0, qrCanvas.width, qrCanvas.height);\r\n \r\n try {\r\n const code = jsQR(imageData.data, imageData.width, imageData.height, {\r\n inversionAttempts: \"dontInvert\",\r\n });\r\n\r\n if (code) {\r\n \/\/ C\u00f3digo detectado com sucesso\r\n updateScannerMessage('\u2713 C\u00f3digo detectado!', 'success');\r\n \r\n \/\/ Feedback visual\/sonoro (vibra\u00e7\u00e3o se dispon\u00edvel)\r\n if (navigator.vibrate) {\r\n navigator.vibrate(200);\r\n }\r\n \r\n \/\/ Preenche o campo e fecha o scanner\r\n setTimeout(() => {\r\n returnCodeInput.value = code.data;\r\n closeQrScanner();\r\n \r\n \/\/ Foca no pr\u00f3ximo campo\r\n const firstProductName = document.querySelector('.product-name');\r\n if (firstProductName) {\r\n firstProductName.focus();\r\n }\r\n }, 500);\r\n \r\n return; \/\/ Para o loop\r\n } else {\r\n \/\/ Atualiza mensagem periodicamente para mostrar que est\u00e1 ativo\r\n const messages = [\r\n 'Procurando c\u00f3digo...',\r\n 'Aponte para o c\u00f3digo',\r\n 'Centralize o c\u00f3digo',\r\n 'Aproxime ou afaste a c\u00e2mera'\r\n ];\r\n \r\n if (Math.random() < 0.01) { \/\/ 1% de chance de mudar mensagem\r\n const randomMessage = messages[Math.floor(Math.random() * messages.length)];\r\n updateScannerMessage(randomMessage, 'info');\r\n }\r\n }\r\n } catch (error) {\r\n console.error('Erro ao processar imagem:', error);\r\n updateScannerMessage('Erro na leitura', 'warning');\r\n }\r\n }\r\n requestAnimationFrame(tickQrScanner);\r\n };\r\n \r\n \/\/ Funcionalidade de trocar c\u00e2mera\r\n const toggleCamera = async () => {\r\n if (availableCameras.length <= 1) return;\r\n \r\n updateScannerMessage('Trocando c\u00e2mera...', 'info');\r\n \r\n \/\/ Para stream atual\r\n if (qrScannerStream) {\r\n qrScannerStream.getTracks().forEach(track => track.stop());\r\n }\r\n \r\n \/\/ Pr\u00f3xima c\u00e2mera\r\n currentCameraIndex = (currentCameraIndex + 1) % availableCameras.length;\r\n \r\n try {\r\n const constraints = {\r\n video: {\r\n deviceId: availableCameras[currentCameraIndex].deviceId,\r\n width: { ideal: 1280, max: 1920 },\r\n height: { ideal: 720, max: 1080 }\r\n }\r\n };\r\n \r\n qrScannerStream = await navigator.mediaDevices.getUserMedia(constraints);\r\n qrVideo.srcObject = qrScannerStream;\r\n qrVideo.play();\r\n \r\n updateScannerMessage('C\u00e2mera alterada', 'success');\r\n setTimeout(() => {\r\n updateScannerMessage('Procurando c\u00f3digo...', 'info');\r\n }, 1000);\r\n \r\n } catch (error) {\r\n console.error('Erro ao trocar c\u00e2mera:', error);\r\n updateScannerMessage('Erro ao trocar c\u00e2mera', 'error');\r\n }\r\n };\r\n \r\n \/\/ Event listeners\r\n toggleCameraBtn?.addEventListener('click', toggleCamera);\r\n scanQrButton.addEventListener('click', openQrScanner);\r\n closeQrScannerModal.addEventListener('click', closeQrScanner);\r\n\r\n \/\/ --- Image Viewer ---\r\n const viewImage = (src) => {\r\n if (!src) return;\r\n viewerImage.src = src;\r\n imageViewerModal.classList.remove('hidden');\r\n };\r\n \r\n \/\/ Torna a fun\u00e7\u00e3o viewImage global para uso nos templates\r\n window.viewImage = viewImage;\r\n closeViewerModal.addEventListener('click', () => imageViewerModal.classList.add('hidden'));\r\n\r\n const finishReturn = async (returnId) => {\r\n const returnedDocRef = doc(returnedProductsRef, returnId);\r\n try {\r\n const returnedDoc = await getDoc(returnedDocRef);\r\n if (returnedDoc.exists()) {\r\n await addDoc(archivedProductsRef, returnedDoc.data());\r\n await deleteDoc(returnedDocRef);\r\n }\r\n } catch (error) {\r\n console.error(\"Error finishing return:\", error);\r\n }\r\n };\r\n\r\n const deleteProductFromCatalog = async (productId) => {\r\n try {\r\n await deleteDoc(doc(productCatalogRef, productId));\r\n } catch (error) {\r\n console.error(\"Error deleting product from catalog:\", error);\r\n }\r\n };\r\n \r\n \/\/ --- Catalog and Other Helpers ---\r\n const updateSuggestions = () => {\r\n if (!productSuggestions) return;\r\n productSuggestions.innerHTML = '';\r\n state.products.forEach(p => {\r\n const option = document.createElement('option');\r\n option.value = p.name;\r\n productSuggestions.appendChild(option);\r\n });\r\n };\r\n \r\n \/\/ --- Product Suggestions with Images ---\r\n let currentDropdown = null;\r\n \r\n const showProductSuggestions = (input, query) => {\r\n hideProductSuggestions();\r\n \r\n if (!query || query.length < 1) return;\r\n \r\n const container = input.closest('.product-name-container');\r\n const dropdown = container.querySelector('.product-suggestions-dropdown');\r\n \r\n \/\/ Filtra produtos que cont\u00eam o texto digitado\r\n const matchingProducts = state.products.filter(product => \r\n product.name.toLowerCase().includes(query.toLowerCase())\r\n ).slice(0, 8); \/\/ Limita a 8 resultados\r\n \r\n if (matchingProducts.length === 0) {\r\n hideProductSuggestions();\r\n return;\r\n }\r\n \r\n \/\/ Cria os itens da lista\r\n dropdown.innerHTML = matchingProducts.map(product => `\r\n <div class=\"product-suggestion-item\" data-product-id=\"${product.id}\">\r\n <img decoding=\"async\" src=\"${product.photo}\" alt=\"${product.name}\" class=\"product-suggestion-image\" onerror=\"this.src='https:\/\/placehold.co\/32x32\/e0e0e0\/999999?text=?'\">\r\n <span class=\"product-suggestion-name\">${product.name}<\/span>\r\n <\/div>\r\n `).join('');\r\n \r\n \/\/ Adiciona event listeners\r\n dropdown.querySelectorAll('.product-suggestion-item').forEach(item => {\r\n item.addEventListener('click', () => {\r\n const productId = item.dataset.productId;\r\n const product = state.products.find(p => p.id === productId);\r\n if (product) {\r\n selectProduct(input, product);\r\n }\r\n hideProductSuggestions();\r\n });\r\n });\r\n \r\n dropdown.classList.remove('hidden');\r\n currentDropdown = dropdown;\r\n };\r\n \r\n const hideProductSuggestions = () => {\r\n if (currentDropdown) {\r\n currentDropdown.classList.add('hidden');\r\n currentDropdown = null;\r\n }\r\n \/\/ Esconde todos os dropdowns\r\n document.querySelectorAll('.product-suggestions-dropdown').forEach(dropdown => {\r\n dropdown.classList.add('hidden');\r\n });\r\n };\r\n \r\n const selectProduct = (input, product) => {\r\n input.value = product.name;\r\n \r\n const entryDiv = input.closest('.product-entry');\r\n if (entryDiv) {\r\n const img = entryDiv.querySelector('.image-placeholder[data-type=\"product\"]');\r\n const hiddenInput = entryDiv.querySelector('.product-photo-data');\r\n if (img && hiddenInput) {\r\n img.src = product.photo;\r\n hiddenInput.value = product.photo;\r\n }\r\n }\r\n };\r\n \r\n productEntriesContainer.addEventListener('input', e => {\r\n if (e.target.classList.contains('product-name')) {\r\n const query = e.target.value.trim();\r\n showProductSuggestions(e.target, query);\r\n \r\n \/\/ L\u00f3gica original para produto exato\r\n const foundProduct = state.products.find(p => p.name.toLowerCase() === query.toLowerCase());\r\n const entryDiv = e.target.closest('.product-entry');\r\n if (foundProduct && entryDiv) {\r\n const img = entryDiv.querySelector('.image-placeholder[data-type=\"product\"]');\r\n const hiddenInput = entryDiv.querySelector('.product-photo-data');\r\n if (img && hiddenInput) {\r\n img.src = foundProduct.photo;\r\n hiddenInput.value = foundProduct.photo;\r\n }\r\n }\r\n }\r\n });\r\n \r\n productEntriesContainer.addEventListener('blur', e => {\r\n if (e.target.classList.contains('product-name')) {\r\n \/\/ Delay para permitir clique no dropdown\r\n setTimeout(() => {\r\n hideProductSuggestions();\r\n }, 150);\r\n }\r\n }, true);\r\n \r\n productEntriesContainer.addEventListener('focus', e => {\r\n if (e.target.classList.contains('product-name')) {\r\n const query = e.target.value.trim();\r\n if (query) {\r\n showProductSuggestions(e.target, query);\r\n }\r\n }\r\n }, true);\r\n \r\n \/\/ Esconder dropdown quando clicar fora\r\n document.addEventListener('click', (e) => {\r\n if (!e.target.closest('.product-name-container')) {\r\n hideProductSuggestions();\r\n }\r\n });\r\n \r\n \/\/ Navega\u00e7\u00e3o por teclado no dropdown\r\n productEntriesContainer.addEventListener('keydown', e => {\r\n if (!e.target.classList.contains('product-name')) return;\r\n \r\n const container = e.target.closest('.product-name-container');\r\n const dropdown = container.querySelector('.product-suggestions-dropdown');\r\n \r\n if (dropdown.classList.contains('hidden')) return;\r\n \r\n const items = dropdown.querySelectorAll('.product-suggestion-item');\r\n let selectedIndex = Array.from(items).findIndex(item => item.classList.contains('selected'));\r\n \r\n switch (e.key) {\r\n case 'ArrowDown':\r\n e.preventDefault();\r\n if (selectedIndex < items.length - 1) {\r\n if (selectedIndex >= 0) items[selectedIndex].classList.remove('selected');\r\n selectedIndex++;\r\n items[selectedIndex].classList.add('selected');\r\n items[selectedIndex].scrollIntoView({ block: 'nearest' });\r\n }\r\n break;\r\n \r\n case 'ArrowUp':\r\n e.preventDefault();\r\n if (selectedIndex > 0) {\r\n items[selectedIndex].classList.remove('selected');\r\n selectedIndex--;\r\n items[selectedIndex].classList.add('selected');\r\n items[selectedIndex].scrollIntoView({ block: 'nearest' });\r\n } else if (selectedIndex === 0) {\r\n items[selectedIndex].classList.remove('selected');\r\n selectedIndex = -1;\r\n }\r\n break;\r\n \r\n case 'Enter':\r\n e.preventDefault();\r\n if (selectedIndex >= 0) {\r\n const productId = items[selectedIndex].dataset.productId;\r\n const product = state.products.find(p => p.id === productId);\r\n if (product) {\r\n selectProduct(e.target, product);\r\n }\r\n hideProductSuggestions();\r\n }\r\n break;\r\n \r\n case 'Escape':\r\n e.preventDefault();\r\n hideProductSuggestions();\r\n break;\r\n }\r\n });\r\n\r\n searchAllInput.addEventListener('input', updateAllViews);\r\n searchArchivedInput.addEventListener('input', updateAllViews);\r\n\r\n csvFileInput.addEventListener('change', (event) => {\r\n const file = event.target.files[0];\r\n if (!file) return;\r\n \r\n console.log('=== INICIANDO IMPORTA\u00c7\u00c3O CSV ===');\r\n console.log('Arquivo selecionado:', file.name, 'Tamanho:', file.size, 'bytes');\r\n \r\n if (!productCatalogRef) {\r\n console.error('Firebase n\u00e3o inicializado!');\r\n alert('Erro: Firebase n\u00e3o est\u00e1 inicializado. Aguarde alguns segundos e tente novamente.');\r\n csvFileInput.value = '';\r\n return;\r\n }\r\n \r\n console.log('Firebase est\u00e1 inicializado, produtos atuais no state:', state.products.length);\r\n \r\n const reader = new FileReader();\r\n reader.onload = async function(e) {\r\n try {\r\n const text = e.target.result;\r\n console.log('Arquivo lido com sucesso. Tamanho do texto:', text.length);\r\n console.log('Primeiros 300 caracteres:', text.substring(0, 300));\r\n \r\n \/\/ Detecta o separador (v\u00edrgula ou ponto e v\u00edrgula)\r\n const firstLine = text.split('\\n')[0];\r\n const separator = firstLine.includes(';') ? ';' : ',';\r\n console.log('Primeira linha:', firstLine);\r\n console.log('Separador detectado:', separator);\r\n \r\n const rows = text.split('\\n').filter(row => row.trim() !== '');\r\n console.log('Total de linhas n\u00e3o vazias:', rows.length);\r\n \r\n if (rows.length === 0) {\r\n alert('Arquivo vazio ou sem dados v\u00e1lidos.');\r\n csvFileInput.value = '';\r\n return;\r\n }\r\n \r\n \/\/ Ignora cabe\u00e7alho se existir\r\n const dataRows = rows.slice(1);\r\n console.log('Linhas de dados ap\u00f3s remover cabe\u00e7alho:', dataRows.length);\r\n \r\n if (dataRows.length === 0) {\r\n alert('Arquivo s\u00f3 cont\u00e9m cabe\u00e7alho, sem dados para importar.');\r\n csvFileInput.value = '';\r\n return;\r\n }\r\n \r\n let successCount = 0;\r\n let skipCount = 0;\r\n let errorCount = 0;\r\n \r\n console.log('=== PROCESSANDO LINHAS ===');\r\n \r\n for (let index = 0; index < dataRows.length; index++) {\r\n const row = dataRows[index];\r\n console.log(`\\n--- Processando linha ${index + 2}: \"${row}\" ---`);\r\n \r\n const columns = row.split(separator).map(col => col.trim().replace(\/\"\/g, ''));\r\n console.log('Colunas extra\u00eddas:', columns);\r\n \r\n if (columns.length < 2) {\r\n console.log(`\u274c Linha com formato inv\u00e1lido (menos de 2 colunas): ${columns.length}`);\r\n errorCount++;\r\n continue;\r\n }\r\n \r\n const name = columns[0];\r\n const photo = columns[1];\r\n \r\n console.log(`Produto: \"${name}\" | Foto: \"${photo}\"`);\r\n \r\n if (!name || !photo) {\r\n console.log(`\u274c Nome ou foto vazio - Nome: \"${name}\" | Foto: \"${photo}\"`);\r\n errorCount++;\r\n continue;\r\n }\r\n \r\n \/\/ Verifica se j\u00e1 existe no state atual\r\n const existingProduct = state.products.find(p => p.name.toLowerCase() === name.toLowerCase());\r\n if (existingProduct) {\r\n console.log(`\u26a0\ufe0f Produto j\u00e1 existe no cat\u00e1logo: \"${name}\" (ID: ${existingProduct.id})`);\r\n skipCount++;\r\n continue;\r\n }\r\n \r\n console.log(`\u2705 Produto v\u00e1lido para adicionar: \"${name}\"`);\r\n \r\n try {\r\n console.log('\ud83d\udd04 Salvando no Firebase...');\r\n const productData = {\r\n name, \r\n photo,\r\n createdBy: {\r\n email: currentUser.email || null,\r\n uid: currentUser.uid,\r\n displayName: 'Visitante'\r\n },\r\n createdAt: serverTimestamp()\r\n };\r\n const docRef = await addDoc(productCatalogRef, productData);\r\n successCount++;\r\n console.log(`\u2705 Produto salvo com sucesso! ID: ${docRef.id}`);\r\n } catch (error) {\r\n errorCount++;\r\n console.error(`\u274c Erro ao salvar produto \"${name}\":`, error);\r\n }\r\n }\r\n \r\n console.log('=== RESUMO DA IMPORTA\u00c7\u00c3O ===');\r\n console.log('\u2705 Sucessos:', successCount);\r\n console.log('\u26a0\ufe0f J\u00e1 existentes:', skipCount);\r\n console.log('\u274c Erros:', errorCount);\r\n \r\n const message = `Importa\u00e7\u00e3o conclu\u00edda!\\n\u2705 Adicionados: ${successCount}\\n\u26a0\ufe0f J\u00e1 existentes: ${skipCount}\\n\u274c Erros: ${errorCount}`;\r\n alert(message);\r\n \r\n if (successCount === 0 && skipCount === 0 && errorCount > 0) {\r\n alert('Nenhum produto foi importado devido a erros no formato. Verifique o console (F12) para mais detalhes.');\r\n }\r\n \r\n } catch(error) {\r\n console.error(\"ERRO GERAL ao processar CSV:\", error);\r\n alert(`Erro ao processar arquivo: ${error.message}\\n\\nVerifique o console (F12) para mais detalhes.`);\r\n } finally {\r\n csvFileInput.value = '';\r\n }\r\n };\r\n \r\n reader.onerror = function(error) {\r\n console.error(\"ERRO ao ler arquivo:\", error);\r\n alert('Erro ao ler o arquivo. Tente novamente.');\r\n csvFileInput.value = '';\r\n };\r\n \r\n console.log('Iniciando leitura do arquivo...');\r\n reader.readAsText(file, 'UTF-8');\r\n });\r\n\r\n \/\/ --- PicoShare Logic ---\r\n \r\n \/\/ Elementos da interface PicoShare\r\n const copyUrlBtn = document.getElementById('copy-url-btn');\r\n const copyPasswordBtn = document.getElementById('copy-password-btn');\r\n const openPicoShareBtn = document.getElementById('open-picoshare-btn');\r\n const picoshareUrl = document.getElementById('picoshare-url');\r\n const picosharePassword = document.getElementById('picoshare-password');\r\n const saveLinkBtn = document.getElementById('save-link-btn');\r\n const clearLinksBtn = document.getElementById('clear-links-btn');\r\n const newLinkInput = document.getElementById('new-link-input');\r\n const recentLinksContainer = document.getElementById('recent-links-container');\r\n \r\n \/\/ Fun\u00e7\u00e3o para copiar texto para o clipboard\r\n const copyToClipboard = async (text, button, originalText) => {\r\n try {\r\n await navigator.clipboard.writeText(text);\r\n const originalHtml = button.innerHTML;\r\n button.innerHTML = '<i class=\"fas fa-check\"><\/i>';\r\n button.classList.remove('bg-gray-500', 'hover:bg-gray-600');\r\n button.classList.add('bg-green-500', 'hover:bg-green-600');\r\n \r\n setTimeout(() => {\r\n button.innerHTML = originalHtml;\r\n button.classList.remove('bg-green-500', 'hover:bg-green-600');\r\n button.classList.add('bg-gray-500', 'hover:bg-gray-600');\r\n }, 2000);\r\n } catch (err) {\r\n console.error('Erro ao copiar:', err);\r\n alert('Erro ao copiar para a \u00e1rea de transfer\u00eancia');\r\n }\r\n };\r\n \r\n \/\/ Event listeners para bot\u00f5es de copiar\r\n copyUrlBtn?.addEventListener('click', () => {\r\n copyToClipboard(picoshareUrl.value, copyUrlBtn, 'Copiar URL');\r\n });\r\n \r\n copyPasswordBtn?.addEventListener('click', () => {\r\n copyToClipboard(picosharePassword.value, copyPasswordBtn, 'Copiar Senha');\r\n });\r\n \r\n \/\/ Abrir PicoShare em nova aba\r\n openPicoShareBtn?.addEventListener('click', () => {\r\n window.open(picoshareUrl.value, '_blank');\r\n });\r\n \r\n \/\/ Gerenciamento de links recentes\r\n const STORAGE_KEY = 'picoshare_recent_links';\r\n \r\n \/\/ Carregar links salvos\r\n const loadRecentLinks = () => {\r\n try {\r\n const saved = localStorage.getItem(STORAGE_KEY);\r\n return saved ? JSON.parse(saved) : [];\r\n } catch (error) {\r\n console.error('Erro ao carregar links salvos:', error);\r\n return [];\r\n }\r\n };\r\n \r\n \/\/ Salvar links\r\n const saveRecentLinks = (links) => {\r\n try {\r\n localStorage.setItem(STORAGE_KEY, JSON.stringify(links));\r\n } catch (error) {\r\n console.error('Erro ao salvar links:', error);\r\n }\r\n };\r\n \r\n \/\/ Renderizar lista de links recentes\r\n const renderRecentLinks = () => {\r\n const links = loadRecentLinks();\r\n \r\n if (links.length === 0) {\r\n recentLinksContainer.innerHTML = '<p class=\"text-gray-500 text-sm\">Nenhum link salvo ainda. Use o bot\u00e3o \"Salvar Link\" para adicionar.<\/p>';\r\n return;\r\n }\r\n \r\n recentLinksContainer.innerHTML = links.map((link, index) => `\r\n <div class=\"flex items-center justify-between bg-white p-3 rounded border border-gray-200\">\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"text-sm font-medium text-gray-900 truncate\">${link.name || 'Link sem nome'}<\/div>\r\n <div class=\"text-xs text-gray-500 truncate\">${link.url}<\/div>\r\n <div class=\"text-xs text-gray-400\">${new Date(link.timestamp).toLocaleString('pt-BR')}<\/div>\r\n <\/div>\r\n <div class=\"flex items-center space-x-2 ml-3\">\r\n <button onclick=\"copyLinkToClipboard('${link.url}')\" class=\"px-2 py-1 bg-blue-500 text-white rounded text-xs hover:bg-blue-600\" title=\"Copiar link\">\r\n <i class=\"fas fa-copy\"><\/i>\r\n <\/button>\r\n <button onclick=\"openLink('${link.url}')\" class=\"px-2 py-1 bg-green-500 text-white rounded text-xs hover:bg-green-600\" title=\"Abrir link\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/button>\r\n <button onclick=\"removeLink(${index})\" class=\"px-2 py-1 bg-red-500 text-white rounded text-xs hover:bg-red-600\" title=\"Remover\">\r\n <i class=\"fas fa-trash\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n `).join('');\r\n };\r\n \r\n \/\/ Fun\u00e7\u00f5es globais para os bot\u00f5es inline\r\n window.copyLinkToClipboard = async (url) => {\r\n try {\r\n await navigator.clipboard.writeText(url);\r\n \/\/ Feedback visual\r\n const button = event.target.closest('button');\r\n const originalHtml = button.innerHTML;\r\n button.innerHTML = '<i class=\"fas fa-check\"><\/i>';\r\n button.classList.remove('bg-blue-500', 'hover:bg-blue-600');\r\n button.classList.add('bg-green-500', 'hover:bg-green-600');\r\n \r\n setTimeout(() => {\r\n button.innerHTML = originalHtml;\r\n button.classList.remove('bg-green-500', 'hover:bg-green-600');\r\n button.classList.add('bg-blue-500', 'hover:bg-blue-600');\r\n }, 1500);\r\n } catch (err) {\r\n alert('Erro ao copiar link');\r\n }\r\n };\r\n \r\n window.openLink = (url) => {\r\n window.open(url, '_blank');\r\n };\r\n \r\n window.removeLink = (index) => {\r\n const links = loadRecentLinks();\r\n links.splice(index, 1);\r\n saveRecentLinks(links);\r\n renderRecentLinks();\r\n };\r\n \r\n \/\/ Adicionar novo link\r\n saveLinkBtn?.addEventListener('click', () => {\r\n const url = newLinkInput.value.trim();\r\n \r\n if (!url) {\r\n alert('Por favor, insira um link v\u00e1lido');\r\n return;\r\n }\r\n \r\n if (!url.startsWith('http')) {\r\n alert('O link deve come\u00e7ar com http:\/\/ ou https:\/\/');\r\n return;\r\n }\r\n \r\n const links = loadRecentLinks();\r\n \r\n \/\/ Verifica se o link j\u00e1 existe\r\n if (links.some(link => link.url === url)) {\r\n alert('Este link j\u00e1 foi salvo');\r\n return;\r\n }\r\n \r\n \/\/ Adiciona o novo link no in\u00edcio da lista\r\n const newLink = {\r\n url: url,\r\n name: `Imagem ${links.length + 1}`,\r\n timestamp: new Date().toISOString()\r\n };\r\n \r\n links.unshift(newLink);\r\n \r\n \/\/ Mant\u00e9m apenas os \u00faltimos 10 links\r\n if (links.length > 10) {\r\n links.splice(10);\r\n }\r\n \r\n saveRecentLinks(links);\r\n renderRecentLinks();\r\n newLinkInput.value = '';\r\n \r\n \/\/ Feedback\r\n saveLinkBtn.innerHTML = '<i class=\"fas fa-check mr-1\"><\/i>Salvo!';\r\n saveLinkBtn.classList.remove('bg-green-600', 'hover:bg-green-700');\r\n saveLinkBtn.classList.add('bg-green-500');\r\n \r\n setTimeout(() => {\r\n saveLinkBtn.innerHTML = '<i class=\"fas fa-save mr-1\"><\/i>Salvar Link';\r\n saveLinkBtn.classList.remove('bg-green-500');\r\n saveLinkBtn.classList.add('bg-green-600', 'hover:bg-green-700');\r\n }, 2000);\r\n });\r\n \r\n \/\/ Limpar todos os links\r\n clearLinksBtn?.addEventListener('click', () => {\r\n if (confirm('Tem certeza que deseja remover todos os links salvos?')) {\r\n saveRecentLinks([]);\r\n renderRecentLinks();\r\n }\r\n });\r\n \r\n \/\/ Permitir adicionar link pressionando Enter\r\n newLinkInput?.addEventListener('keypress', (e) => {\r\n if (e.key === 'Enter') {\r\n saveLinkBtn.click();\r\n }\r\n });\r\n \r\n \/\/ Inicializar lista de links recentes\r\n if (recentLinksContainer) {\r\n renderRecentLinks();\r\n }\r\n\r\n \/\/ Init\r\n addProductEntry();\r\n renderProductPhotos(); \/\/ Inicializa a interface de fotos do produto\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\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>Painel de Controle de Retornos Painel de Controle de Retornos Gerencie, rastreie e analise os produtos retornados. Acesso Livre Status Registrar Todos Arquivados Mais Retornados Cat\u00e1logo PicoShare Registrar Novo Retorno C\u00f3digo de Retorno (NF-e, Pedido, etc.) Observa\u00e7\u00f5es (opcional) Fotos do Produto (opcional – at\u00e9 5 fotos) Adicionar Foto 0\/5 fotos Adicionar Produto Salvar Retorno 0 […]<\/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-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/retorno.envionacional.com.br\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/retorno.envionacional.com.br\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/retorno.envionacional.com.br\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/retorno.envionacional.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/retorno.envionacional.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":169,"href":"https:\/\/retorno.envionacional.com.br\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":198,"href":"https:\/\/retorno.envionacional.com.br\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/198"}],"wp:attachment":[{"href":"https:\/\/retorno.envionacional.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Painel de Controle de Retornos<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/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 <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 <style>\r\n \/* Estilo customizado para a fonte e transi\u00e7\u00f5es suaves *\/\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background-color: #f0f2f5;\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: #3b82f6; color: #3b82f6; }\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 img[data-broken-img=\"true\"] { content: url('https:\/\/placehold.co\/100x100\/e0e0e0\/999999?text=Sem+Foto'); }\r\n \/* Estilos para o Scanner de C\u00f3digo de Barras *\/\r\n #qr-video { \r\n transform: scaleX(-1); \/* Espelha a c\u00e2mera frontal *\/\r\n min-height: 200px;\r\n }\r\n .image-placeholder { cursor: pointer; }\r\n \r\n \/* Anima\u00e7\u00e3o para o overlay do scanner *\/\r\n @keyframes pulse-border {\r\n 0%, 100% { opacity: 0.7; }\r\n 50% { opacity: 1; }\r\n }\r\n \r\n .scanner-overlay {\r\n animation: pulse-border 2s ease-in-out infinite;\r\n }\r\n \r\n \/* Estilos para os status do scanner *\/\r\n .scanner-status-success {\r\n background: linear-gradient(45deg, #10b981, #059669);\r\n }\r\n \r\n .scanner-status-error {\r\n background: linear-gradient(45deg, #ef4444, #dc2626);\r\n }\r\n \r\n .scanner-status-warning {\r\n background: linear-gradient(45deg, #f59e0b, #d97706);\r\n }\r\n \r\n \/* Estilos para o dropdown de sugest\u00f5es de produtos *\/\r\n .product-suggestions-dropdown {\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n right: 0;\r\n background: white;\r\n border: 1px solid #d1d5db;\r\n border-top: none;\r\n border-radius: 0 0 0.375rem 0.375rem;\r\n max-height: 200px;\r\n overflow-y: auto;\r\n z-index: 50;\r\n box-shadow: 0 4px 6px -1px rgb(0 0 0 \/ 0.1);\r\n }\r\n \r\n .product-suggestion-item {\r\n display: flex;\r\n align-items: center;\r\n padding: 8px 12px;\r\n cursor: pointer;\r\n border-bottom: 1px solid #f3f4f6;\r\n }\r\n \r\n .product-suggestion-item:hover {\r\n background-color: #f9fafb;\r\n }\r\n \r\n .product-suggestion-item.selected {\r\n background-color: #eff6ff;\r\n }\r\n \r\n .product-suggestion-item:last-child {\r\n border-bottom: none;\r\n }\r\n \r\n .product-suggestion-image {\r\n width: 32px;\r\n height: 32px;\r\n object-fit: cover;\r\n border-radius: 4px;\r\n margin-right: 8px;\r\n flex-shrink: 0;\r\n }\r\n \r\n .product-suggestion-name {\r\n flex-grow: 1;\r\n font-size: 14px;\r\n color: #374151;\r\n }\r\n \r\n .product-name-container {\r\n position: relative;\r\n }\r\n \r\n \/* Estilos para o bot\u00e3o de etiqueta *\/\r\n .view-label-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 4px;\r\n transition: all 0.2s ease;\r\n }\r\n \r\n .view-label-btn:disabled,\r\n .view-label-btn.disabled {\r\n opacity: 0.3;\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n }\r\n \r\n \/* Estilos para fotos do produto *\/\r\n .product-photo-item {\r\n position: relative;\r\n border: 2px dashed #d1d5db;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n background-color: #f9fafb;\r\n transition: all 0.2s ease;\r\n cursor: pointer;\r\n min-height: 120px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n \r\n .product-photo-item:hover {\r\n border-color: #6b7280;\r\n background-color: #f3f4f6;\r\n }\r\n \r\n .product-photo-item.has-image {\r\n border-style: solid;\r\n border-color: #10b981;\r\n background-color: white;\r\n }\r\n \r\n .product-photo-item.has-image:hover {\r\n border-color: #059669;\r\n }\r\n \r\n .product-photo-item img {\r\n width: 100%;\r\n height: 120px;\r\n object-fit: cover;\r\n }\r\n \r\n .product-photo-item .remove-photo-btn {\r\n position: absolute;\r\n top: -8px;\r\n right: -8px;\r\n background: #ef4444;\r\n color: white;\r\n border: 2px solid white;\r\n border-radius: 50%;\r\n width: 24px;\r\n height: 24px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n font-size: 12px;\r\n font-weight: bold;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n transition: all 0.2s ease;\r\n }\r\n \r\n .product-photo-item .remove-photo-btn:hover {\r\n background: #dc2626;\r\n transform: scale(1.1);\r\n }\r\n \r\n .product-photo-placeholder {\r\n text-align: center;\r\n color: #6b7280;\r\n font-size: 14px;\r\n }\r\n \r\n .product-photo-placeholder i {\r\n font-size: 24px;\r\n margin-bottom: 8px;\r\n display: block;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased text-gray-800\">\r\n\r\n <div id=\"app\" class=\"max-w-7xl mx-auto p-4 sm:p-6 lg:p-8\">\r\n \r\n \r\n <div id=\"main-system\">\r\n \r\n <header class=\"mb-6\">\r\n <div class=\"flex justify-between items-center flex-wrap gap-4\">\r\n <div>\r\n <h1 class=\"text-3xl font-bold text-gray-900 flex items-center gap-3\">\r\n <i class=\"fas fa-undo text-blue-500\"><\/i>\r\n Painel de Controle de Retornos\r\n <\/h1>\r\n <p class=\"text-gray-600 mt-1\">Gerencie, rastreie e analise os produtos retornados.<\/p>\r\n <\/div>\r\n <div class=\"flex items-center space-x-4\">\r\n <div class=\"text-sm text-gray-600\">\r\n <i class=\"fas fa-user-circle mr-1\"><\/i>\r\n <span id=\"user-display-name\">Acesso Livre<\/span>\r\n <\/div>\r\n <button id=\"test-connection-btn\" class=\"bg-green-600 text-white px-3 py-1 rounded text-sm hover:bg-green-700\">\r\n <i class=\"fas fa-wifi mr-1\"><\/i>\r\n Status\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <nav class=\"bg-white rounded-lg shadow-sm mb-6 overflow-x-auto\">\r\n <ul class=\"flex border-b border-gray-200 min-w-max\">\r\n <li><a href=\"#\" data-tab=\"register\" class=\"nav-link active font-semibold p-4 inline-block border-b-2 border-transparent\">Registrar<\/a><\/li>\r\n <li><a href=\"#\" data-tab=\"all\" class=\"nav-link font-semibold p-4 inline-block border-b-2 border-transparent\">Todos<\/a><\/li>\r\n <li><a href=\"#\" data-tab=\"archived\" class=\"nav-link font-semibold p-4 inline-block border-b-2 border-transparent\">Arquivados<\/a><\/li>\r\n <li><a href=\"#\" data-tab=\"most-returned\" class=\"nav-link font-semibold p-4 inline-block border-b-2 border-transparent\">Mais Retornados<\/a><\/li>\r\n <li><a href=\"#\" data-tab=\"catalog\" class=\"nav-link font-semibold p-4 inline-block border-b-2 border-transparent\">Cat\u00e1logo<\/a><\/li>\r\n <li><a href=\"#\" data-tab=\"picoshare\" class=\"nav-link font-semibold p-4 inline-block border-b-2 border-transparent\">PicoShare<\/a><\/li>\r\n <\/ul>\r\n <\/nav>\r\n\r\n <main>\r\n \r\n <div id=\"register-content\" class=\"tab-content active\">\r\n <div class=\"bg-white p-6 rounded-lg shadow-md max-w-3xl mx-auto\">\r\n <h2 class=\"text-2xl font-bold mb-4\">Registrar Novo Retorno<\/h2>\r\n <form id=\"register-form\" class=\"space-y-6\">\r\n <div>\r\n <label for=\"return-code\" class=\"block text-sm font-medium text-gray-700 mb-1\">C\u00f3digo de Retorno (NF-e, Pedido, etc.)<\/label>\r\n <div class=\"flex items-center gap-2\">\r\n <input type=\"text\" id=\"return-code\" required class=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500\" placeholder=\"Insira o c\u00f3digo ou leia o c\u00f3digo de barras\">\r\n <button type=\"button\" id=\"scan-qr-button\" class=\"p-2.5 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300\" title=\"Ler c\u00f3digo de barras\">\r\n <i class=\"fas fa-barcode text-xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div>\r\n <label for=\"return-observations\" class=\"block text-sm font-medium text-gray-700 mb-1\">Observa\u00e7\u00f5es (opcional)<\/label>\r\n <textarea id=\"return-observations\" rows=\"3\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 resize-vertical\" placeholder=\"Adicione observa\u00e7\u00f5es sobre o retorno...\"><\/textarea>\r\n <\/div>\r\n \r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-2\">Fotos do Produto (opcional - at\u00e9 5 fotos)<\/label>\r\n <div id=\"product-photos-container\" class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3\">\r\n \r\n <\/div>\r\n <div class=\"mt-3 flex items-center justify-between\">\r\n <button type=\"button\" id=\"add-product-photo-btn\" class=\"bg-gray-200 text-gray-700 px-3 py-2 rounded-md hover:bg-gray-300 text-sm\">\r\n <i class=\"fas fa-camera mr-1\"><\/i>Adicionar Foto\r\n <\/button>\r\n <span id=\"photo-count-indicator\" class=\"text-xs text-gray-500\">0\/5 fotos<\/span>\r\n <\/div>\r\n <\/div>\r\n <div id=\"product-entries-container\" class=\"space-y-6\">\r\n \r\n <\/div>\r\n <div class=\"flex justify-between items-center pt-4 border-t\">\r\n <button type=\"button\" id=\"add-product-button\" class=\"bg-gray-200 text-gray-800 font-semibold py-2 px-4 rounded-lg hover:bg-gray-300 transition-colors\">\r\n <i class=\"fas fa-plus mr-2\"><\/i>Adicionar Produto\r\n <\/button>\r\n <button type=\"submit\" class=\"bg-blue-600 text-white font-bold py-2 px-6 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors\">\r\n <i class=\"fas fa-save mr-2\"><\/i>Salvar Retorno\r\n <\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"all-content\" class=\"tab-content\">\r\n <div class=\"sticky top-4 z-10 mb-6\">\r\n <div class=\"flex gap-4 items-center mb-3\">\r\n <input type=\"text\" id=\"search-all\" class=\"flex-1 px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-lg\" placeholder=\"\ud83d\udd0e Buscar por nome, c\u00f3digo, status ou data (AAAA-MM-DD)...\">\r\n <div class=\"bg-green-100 text-green-800 px-3 py-2 rounded-lg font-semibold text-sm whitespace-nowrap\">\r\n <i class=\"fas fa-clipboard-list mr-1\"><\/i>\r\n <span id=\"all-count\">0<\/span> retornos\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"all-products-list\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\"><\/div>\r\n <\/div>\r\n <div id=\"archived-content\" class=\"tab-content\">\r\n <div class=\"sticky top-4 z-10 mb-6\">\r\n <div class=\"flex gap-4 items-center mb-3\">\r\n <input type=\"text\" id=\"search-archived\" class=\"flex-1 px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-lg\" placeholder=\"\ud83d\udd0e Buscar em arquivados...\">\r\n <div class=\"bg-gray-100 text-gray-800 px-3 py-2 rounded-lg font-semibold text-sm whitespace-nowrap\">\r\n <i class=\"fas fa-archive mr-1\"><\/i>\r\n <span id=\"archived-count\">0<\/span> arquivados\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"archived-products-list\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\"><\/div>\r\n <\/div>\r\n <div id=\"most-returned-content\" class=\"tab-content\">\r\n <div class=\"bg-white p-6 rounded-lg shadow-md\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <h2 class=\"text-2xl font-bold\">Ranking de Produtos Mais Retornados<\/h2>\r\n <div class=\"bg-orange-100 text-orange-800 px-3 py-1 rounded-full font-semibold text-sm\">\r\n <i class=\"fas fa-chart-bar mr-1\"><\/i>\r\n <span id=\"ranking-count\">0<\/span> produtos \u00fanicos\r\n <\/div>\r\n <\/div>\r\n <div id=\"most-returned-list\" class=\"space-y-4\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"catalog-content\" class=\"tab-content\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\r\n <div class=\"lg:col-span-1 space-y-6\">\r\n <div class=\"bg-white p-6 rounded-lg shadow-md\">\r\n <h2 class=\"text-2xl font-bold mb-4\">Cadastrar Produto<\/h2>\r\n <form id=\"add-product-form\" class=\"space-y-4\">\r\n <div>\r\n <label for=\"new-product-name\" class=\"block text-sm font-medium\">Nome do Produto<\/label>\r\n <input type=\"text\" id=\"new-product-name\" required class=\"w-full px-3 py-2 border border-gray-300 rounded-md\">\r\n <\/div>\r\n <div>\r\n <label for=\"new-product-photo\" class=\"block text-sm font-medium\">URL da Foto<\/label>\r\n <input type=\"url\" id=\"new-product-photo\" required class=\"w-full px-3 py-2 border border-gray-300 rounded-md\">\r\n <\/div>\r\n <div id=\"add-product-feedback\" class=\"text-sm text-center h-5\"><\/div>\r\n <div class=\"flex gap-2\">\r\n <button type=\"submit\" class=\"flex-1 bg-blue-600 text-white font-bold py-2 px-6 rounded-lg hover:bg-blue-700\">\r\n <i class=\"fas fa-plus-circle mr-2\"><\/i>Adicionar\r\n <\/button>\r\n <button type=\"button\" id=\"test-firebase-btn\" class=\"bg-gray-500 text-white font-bold py-2 px-4 rounded-lg hover:bg-gray-600\" title=\"Testar conex\u00e3o Firebase\">\r\n <i class=\"fas fa-flask\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-lg shadow-md\">\r\n <h2 class=\"text-2xl font-bold mb-4\">Importar Planilha (CSV)<\/h2>\r\n <div class=\"mb-4 p-3 bg-blue-50 rounded-lg border border-blue-200\">\r\n <p class=\"text-sm text-blue-800 font-semibold mb-2\">\ud83d\udccb Formato esperado:<\/p>\r\n <code class=\"block bg-white p-2 rounded text-xs\">\r\nnome_produto,url_foto<br>\r\nPizza Margherita,https:\/\/exemplo.com\/pizza.jpg<br>\r\nHamb\u00farguer Cl\u00e1ssico,https:\/\/exemplo.com\/burguer.jpg\r\n <\/code>\r\n <p class=\"text-xs text-blue-600 mt-2\">\r\n \u2713 Separadores suportados: v\u00edrgula (,) ou ponto e v\u00edrgula (;)<br>\r\n \u2713 Primeira linha ser\u00e1 ignorada (cabe\u00e7alho)<br>\r\n \u2713 Aspas duplas ser\u00e3o removidas automaticamente\r\n <\/p>\r\n <\/div>\r\n <input type=\"file\" id=\"csv-file-input\" accept=\".csv\" class=\"block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"lg:col-span-2 bg-white p-6 rounded-lg shadow-md\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <h2 class=\"text-2xl font-bold\">Produtos Cadastrados<\/h2>\r\n <div class=\"bg-blue-100 text-blue-800 px-3 py-1 rounded-full font-semibold text-sm\">\r\n <i class=\"fas fa-box mr-1\"><\/i>\r\n <span id=\"product-count\">0<\/span> produtos\r\n <\/div>\r\n <\/div>\r\n <div id=\"product-catalog-list\" class=\"space-y-3 max-h-[600px] overflow-y-auto pr-2\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"picoshare-content\" class=\"tab-content\">\r\n <div class=\"max-w-4xl mx-auto\">\r\n <div class=\"bg-white p-6 rounded-lg shadow-md\">\r\n <div class=\"text-center mb-6\">\r\n <div class=\"mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-purple-100 mb-4\">\r\n <i class=\"fas fa-cloud-upload-alt text-2xl text-purple-600\"><\/i>\r\n <\/div>\r\n <h2 class=\"text-3xl font-bold text-gray-900 mb-2\">PicoShare - Upload de Imagens<\/h2>\r\n <p class=\"text-gray-600\">Acesse o sistema de upload de imagens PicoShare<\/p>\r\n <\/div>\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n \r\n <div class=\"bg-gradient-to-br from-purple-50 to-blue-50 p-6 rounded-lg border border-purple-200\">\r\n <h3 class=\"text-xl font-semibold text-gray-800 mb-4 flex items-center\">\r\n <i class=\"fas fa-external-link-alt mr-2 text-purple-600\"><\/i>\r\n Acessar PicoShare\r\n <\/h3>\r\n \r\n <div class=\"space-y-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-2\">URL do Sistema:<\/label>\r\n <div class=\"flex items-center space-x-2\">\r\n <input type=\"url\" id=\"picoshare-url\" value=\"https:\/\/chatwoot-picoshare.nounpw.easypanel.host\/\" readonly class=\"flex-1 px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-sm\">\r\n <button id=\"copy-url-btn\" class=\"px-3 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 text-sm\" title=\"Copiar URL\">\r\n <i class=\"fas fa-copy\"><\/i>\r\n <\/button>\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\">Senha de Acesso:<\/label>\r\n <div class=\"flex items-center space-x-2\">\r\n <input type=\"text\" id=\"picoshare-password\" value=\"Jmrosario19!\" readonly class=\"flex-1 px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-sm font-mono\">\r\n <button id=\"copy-password-btn\" class=\"px-3 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 text-sm\" title=\"Copiar Senha\">\r\n <i class=\"fas fa-copy\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <button id=\"open-picoshare-btn\" class=\"w-full bg-purple-600 text-white font-bold py-3 px-6 rounded-lg hover:bg-purple-700 transition-colors\">\r\n <i class=\"fas fa-external-link-alt mr-2\"><\/i>\r\n Abrir PicoShare em Nova Aba\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"bg-gradient-to-br from-blue-50 to-green-50 p-6 rounded-lg border border-blue-200\">\r\n <h3 class=\"text-xl font-semibold text-gray-800 mb-4 flex items-center\">\r\n <i class=\"fas fa-info-circle mr-2 text-blue-600\"><\/i>\r\n Como Usar\r\n <\/h3>\r\n \r\n <div class=\"space-y-3 text-sm text-gray-700\">\r\n <div class=\"flex items-start space-x-2\">\r\n <span class=\"flex-shrink-0 w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold\">1<\/span>\r\n <p>Clique em \"Abrir PicoShare\" para acessar o sistema<\/p>\r\n <\/div>\r\n \r\n <div class=\"flex items-start space-x-2\">\r\n <span class=\"flex-shrink-0 w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold\">2<\/span>\r\n <p>Use a senha <code class=\"bg-gray-200 px-1 rounded\">Jmrosario19!<\/code> se solicitada<\/p>\r\n <\/div>\r\n \r\n <div class=\"flex items-start space-x-2\">\r\n <span class=\"flex-shrink-0 w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold\">3<\/span>\r\n <p>Fa\u00e7a upload das suas imagens<\/p>\r\n <\/div>\r\n \r\n <div class=\"flex items-start space-x-2\">\r\n <span class=\"flex-shrink-0 w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold\">4<\/span>\r\n <p>Copie o link da imagem enviada<\/p>\r\n <\/div>\r\n \r\n <div class=\"flex items-start space-x-2\">\r\n <span class=\"flex-shrink-0 w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold\">5<\/span>\r\n <p>Cole o link nos campos de imagem do sistema<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg\">\r\n <p class=\"text-xs text-yellow-800\">\r\n <i class=\"fas fa-lightbulb mr-1\"><\/i>\r\n <strong>Dica:<\/strong> Guarde os links das imagens enviadas para usar nos registros de retorno.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"mt-6 bg-gray-50 p-6 rounded-lg border border-gray-200\">\r\n <h3 class=\"text-lg font-semibold text-gray-800 mb-4 flex items-center\">\r\n <i class=\"fas fa-history mr-2 text-gray-600\"><\/i>\r\n Links Recentes (salvos localmente)\r\n <\/h3>\r\n \r\n <div id=\"recent-links-container\" class=\"space-y-2 max-h-48 overflow-y-auto\">\r\n <p class=\"text-gray-500 text-sm\">Nenhum link salvo ainda. Use o bot\u00e3o \"Salvar Link\" para adicionar.<\/p>\r\n <\/div>\r\n \r\n <div class=\"mt-4 flex items-center space-x-2\">\r\n <input type=\"url\" id=\"new-link-input\" placeholder=\"Cole um link do PicoShare aqui para salvar...\" class=\"flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm\">\r\n <button id=\"save-link-btn\" class=\"px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 text-sm\">\r\n <i class=\"fas fa-save mr-1\"><\/i>Salvar Link\r\n <\/button>\r\n <button id=\"clear-links-btn\" class=\"px-3 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 text-sm\" title=\"Limpar todos os links\">\r\n <i class=\"fas fa-trash\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n \r\n <\/div> \r\n \r\n <datalist id=\"product-suggestions\"><\/datalist>\r\n\r\n \r\n <template id=\"product-entry-template\">\r\n <div class=\"product-entry border rounded-lg p-4 space-y-4 relative\">\r\n <button type=\"button\" class=\"remove-product-button absolute -top-2 -right-2 bg-red-500 text-white rounded-full h-6 w-6 flex items-center justify-center hover:bg-red-600\">×<\/button>\r\n <div class=\"product-name-container\">\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Nome do Produto<\/label>\r\n <input type=\"text\" list=\"product-suggestions\" required class=\"product-name w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"Digite para buscar\" autocomplete=\"off\">\r\n <div class=\"product-suggestions-dropdown hidden\"><\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Quantidade<\/label>\r\n <input type=\"number\" required min=\"1\" value=\"1\" class=\"product-quantity w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"Qtd\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Status<\/label>\r\n <select required class=\"return-status w-full px-3 py-2 border border-gray-300 rounded-md bg-white\">\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=\"AO REMETENTE\">AO REMETENTE<\/option>\r\n <option value=\"FALTANDO ITENS\">FALTANDO ITENS<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 items-start\">\r\n <div class=\"text-center\">\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Foto do Produto<\/label>\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/150x150\/e0e0e0\/999999?text=Produto\" class=\"image-placeholder mt-1 h-28 w-full object-cover rounded-md bg-gray-100 border\" data-type=\"product\">\r\n <input type=\"hidden\" class=\"product-photo-data\">\r\n <\/div>\r\n <div class=\"text-center\">\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Foto da Etiqueta<\/label>\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/150x150\/e0e0e0\/999999?text=Etiqueta\" class=\"image-placeholder mt-1 h-28 w-full object-cover rounded-md bg-gray-100 border\" data-type=\"label\">\r\n <input type=\"hidden\" class=\"label-photo-data\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/template>\r\n\r\n <template id=\"product-card-template\">\r\n <div class=\"bg-white rounded-lg shadow-md overflow-hidden card-animation\">\r\n <div class=\"p-4\">\r\n <div class=\"flex justify-between items-start mb-2\">\r\n <div class=\"flex-grow\">\r\n <p class=\"text-sm text-gray-600 mb-1\"><strong>C\u00f3digo:<\/strong> <span class=\"return-code\"><\/span><\/p>\r\n <p class=\"text-sm text-gray-600 mb-2\"><strong>Data:<\/strong> <span class=\"return-date\"><\/span><\/p>\r\n <div class=\"return-observations-section hidden\">\r\n <p class=\"text-sm text-gray-600 mb-2\"><strong>Observa\u00e7\u00f5es:<\/strong> <span class=\"return-observations text-gray-700\"><\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"text-right space-y-1\">\r\n <p class=\"text-xs text-gray-500\">Registrado por:<\/p>\r\n <p class=\"text-xs font-medium text-blue-600 created-by-name\"><\/p>\r\n <div class=\"labels-count-badge hidden mt-2 text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full\">\r\n <i class=\"fas fa-tag mr-1\"><\/i>\r\n <span class=\"labels-count\">0<\/span> etiqueta(s)\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"product-photos-section hidden border-b pb-3 mb-3\">\r\n <div class=\"flex items-center mb-2\">\r\n <i class=\"fas fa-images text-blue-600 mr-2\"><\/i>\r\n <span class=\"text-sm font-medium text-gray-700\">Fotos do Produto<\/span>\r\n <\/div>\r\n <div class=\"product-photos-grid grid grid-cols-3 sm:grid-cols-5 gap-2\">\r\n \r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"products-in-card-list space-y-3 border-t pt-3\"><\/div>\r\n <\/div>\r\n <div class=\"p-4 bg-gray-50\">\r\n <button class=\"finish-button w-full bg-green-500 text-white font-semibold py-2 px-4 rounded-lg hover:bg-green-600\">\r\n <i class=\"fas fa-check-circle mr-2\"><\/i>Finalizado\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/template>\r\n \r\n <template id=\"product-in-card-template\">\r\n <div class=\"flex items-center text-sm\">\r\n <img decoding=\"async\" src=\"\" class=\"product-image h-12 w-12 object-cover rounded-md mr-3 cursor-pointer\" alt=\"Foto do produto\">\r\n <div class=\"flex-grow\">\r\n <div class=\"font-semibold product-name\"><\/div>\r\n <div class=\"text-xs text-gray-500\">Qtd: <span class=\"product-quantity\"><\/span><\/div>\r\n <\/div>\r\n <div class=\"flex items-center space-x-2\">\r\n <button class=\"view-label-btn text-blue-600 hover:text-blue-800 p-1 rounded-md hover:bg-blue-50 transition-colors\" title=\"Ver etiqueta\">\r\n <i class=\"fas fa-tag text-sm\"><\/i>\r\n <\/button>\r\n <span class=\"status-badge text-xs font-semibold px-2 py-1 rounded-full whitespace-nowrap\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/template>\r\n\r\n <template id=\"ranking-item-template\">\r\n <div class=\"flex items-center bg-gray-50 p-4 rounded-lg border border-gray-200 card-animation\">\r\n <div class=\"text-2xl font-bold text-blue-600 w-12 text-center ranking-position\"><\/div>\r\n <img decoding=\"async\" src=\"\" alt=\"Foto do produto\" class=\"h-16 w-16 rounded-md object-cover mx-4 ranking-image\" onerror=\"this.dataset.brokenImg = 'true'\">\r\n <div class=\"flex-grow\">\r\n <h4 class=\"font-semibold text-lg ranking-name\"><\/h4>\r\n <\/div>\r\n <div class=\"text-right\">\r\n <p class=\"text-2xl font-bold ranking-count\"><\/p>\r\n <p class=\"text-sm text-gray-500\">retornos<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/template>\r\n\r\n \r\n <div id=\"image-capture-modal\" class=\"fixed inset-0 bg-black bg-opacity-60 z-50 flex items-center justify-center hidden\">\r\n <div class=\"bg-white p-6 rounded-lg shadow-xl max-w-lg w-full\">\r\n <div class=\"flex justify-end\"><button id=\"close-image-modal\" class=\"text-2xl\">×<\/button><\/div>\r\n <div class=\"space-y-4\">\r\n <h3 class=\"text-lg font-semibold\">Adicionar Imagem<\/h3>\r\n \r\n \r\n <div class=\"bg-purple-50 border border-purple-200 p-4 rounded-lg\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <h4 class=\"font-medium text-purple-800 flex items-center\">\r\n <i class=\"fas fa-cloud-upload-alt mr-2\"><\/i>\r\n PicoShare - Upload de Imagens\r\n <\/h4>\r\n <button id=\"modal-open-picoshare\" class=\"text-xs bg-purple-600 text-white px-3 py-1 rounded hover:bg-purple-700\">\r\n <i class=\"fas fa-external-link-alt mr-1\"><\/i>Abrir\r\n <\/button>\r\n <\/div>\r\n <div class=\"text-sm text-purple-700\">\r\n <p>\ud83d\udd17 <strong>Site:<\/strong> chatwoot-picoshare.nounpw.easypanel.host<\/p>\r\n <p>\ud83d\udd11 <strong>Senha:<\/strong> Jmrosario19!<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-2\">Cole a URL da imagem:<\/label>\r\n <input type=\"url\" id=\"image-url-input\" class=\"w-full p-2 border rounded\" placeholder=\"https:\/\/exemplo.com\/imagem.jpg\">\r\n <\/div>\r\n \r\n \r\n <div id=\"modal-recent-links\" class=\"bg-gray-50 border border-gray-200 p-3 rounded-lg max-h-32 overflow-y-auto\">\r\n <div class=\"text-xs font-medium text-gray-600 mb-2\">Links Recentes:<\/div>\r\n <div id=\"modal-recent-links-list\" class=\"space-y-1\">\r\n <p class=\"text-xs text-gray-500\">Nenhum link salvo<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flex justify-end gap-4 mt-6\">\r\n <button id=\"confirm-image-btn\" class=\"px-6 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600\">Confirmar<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"qr-scanner-modal\" class=\"fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center hidden p-4\">\r\n <div class=\"bg-white p-4 rounded-lg shadow-xl max-w-md w-full relative\">\r\n <button id=\"close-qr-scanner-modal\" class=\"absolute -top-2 -right-2 bg-red-500 text-white rounded-full h-8 w-8 text-lg\">×<\/button>\r\n \r\n \r\n <div class=\"text-center mb-4\">\r\n <div class=\"mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-blue-100 mb-2\">\r\n <i class=\"fas fa-barcode text-xl text-blue-600\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-lg font-bold text-gray-900\">Scanner de C\u00f3digo de Barras<\/h3>\r\n <p class=\"text-sm text-gray-600\">Aponte a c\u00e2mera para o c\u00f3digo<\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"relative bg-gray-900 rounded-lg overflow-hidden\">\r\n <video id=\"qr-video\" class=\"w-full h-auto rounded bg-gray-200\"><\/video>\r\n \r\n \r\n <div class=\"absolute inset-0 flex items-center justify-center pointer-events-none\">\r\n <div class=\"border-2 border-white border-dashed w-48 h-24 rounded-lg scanner-overlay\"><\/div>\r\n <\/div>\r\n \r\n \r\n <div id=\"scanner-status\" class=\"absolute bottom-2 left-2 right-2 text-center\">\r\n <div class=\"bg-black bg-opacity-60 text-white text-xs px-2 py-1 rounded\">\r\n <span id=\"scanner-message\">Procurando c\u00f3digo...<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"mt-4 flex justify-between items-center\">\r\n <button id=\"toggle-camera-btn\" class=\"px-3 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 text-sm\">\r\n <i class=\"fas fa-sync-alt mr-1\"><\/i>\r\n Trocar C\u00e2mera\r\n <\/button>\r\n \r\n <div class=\"text-xs text-gray-500\">\r\n <i class=\"fas fa-lightbulb mr-1\"><\/i>\r\n Dica: Mantenha o c\u00f3digo centralizado\r\n <\/div>\r\n <\/div>\r\n \r\n <canvas id=\"qr-canvas\" class=\"hidden\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"image-viewer-modal\" class=\"fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center hidden p-4\">\r\n <button id=\"close-viewer-modal\" class=\"absolute top-4 right-4 text-white text-4xl\">×<\/button>\r\n <img decoding=\"async\" id=\"viewer-image\" src=\"\" class=\"max-w-full max-h-full\">\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <script>\r\n \/\/ Fun\u00e7\u00e3o para trocar abas - executada imediatamente quando a p\u00e1gina carrega\r\n function initTabs() {\r\n const tabs = document.querySelectorAll('.nav-link');\r\n const tabContents = document.querySelectorAll('.tab-content');\r\n \r\n function switchTab(tabId) {\r\n \/\/ Remove a classe active de todos os conte\u00fados\r\n tabContents.forEach(content => {\r\n content.classList.remove('active');\r\n });\r\n \r\n \/\/ Remove a classe active de todas as abas\r\n tabs.forEach(tab => {\r\n tab.classList.remove('active');\r\n });\r\n \r\n \/\/ Adiciona active no conte\u00fado da aba selecionada\r\n const activeContent = document.getElementById(tabId + '-content');\r\n if (activeContent) {\r\n activeContent.classList.add('active');\r\n }\r\n \r\n \/\/ Adiciona active na aba selecionada\r\n const activeTab = document.querySelector('[data-tab=\"' + tabId + '\"]');\r\n if (activeTab) {\r\n activeTab.classList.add('active');\r\n }\r\n }\r\n \r\n \/\/ Exp\u00f5e a fun\u00e7\u00e3o switchTab globalmente\r\n window.switchTabGlobal = switchTab;\r\n \r\n \/\/ Adiciona event listeners para cada aba\r\n tabs.forEach(tab => {\r\n tab.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n const tabId = this.getAttribute('data-tab');\r\n switchTab(tabId);\r\n });\r\n });\r\n \r\n \/\/ Inicia na aba de registro\r\n switchTab('register');\r\n }\r\n \r\n \/\/ Executa quando o DOM estiver carregado\r\n if (document.readyState === 'loading') {\r\n document.addEventListener('DOMContentLoaded', initTabs);\r\n } else {\r\n initTabs();\r\n }\r\n <\/script>\r\n\r\n <script type=\"module\">\r\n import { initializeApp } from \"https:\/\/www.gstatic.com\/firebasejs\/10.12.2\/firebase-app.js\";\r\n import { getFirestore, collection, onSnapshot, addDoc, doc, deleteDoc, getDoc, serverTimestamp } from \"https:\/\/www.gstatic.com\/firebasejs\/10.12.2\/firebase-firestore.js\";\r\n import { getAuth, signInAnonymously, onAuthStateChanged } from \"https:\/\/www.gstatic.com\/firebasejs\/10.12.2\/firebase-auth.js\";\r\n\r\n \/\/ Configura\u00e7\u00e3o do Firebase\r\n const firebaseConfig = {\r\n apiKey: \"AIzaSyACSj3xQ9N_p57zQILkd_x8LUnGUh3hC5k\",\r\n authDomain: \"retorno-de-produto.firebaseapp.com\",\r\n projectId: \"retorno-de-produto\",\r\n storageBucket: \"retorno-de-produto.appspot.com\",\r\n messagingSenderId: \"1049067333037\",\r\n appId: \"1:1049067333037:web:retorno-de-produto\"\r\n };\r\n \r\n console.log('Firebase config loaded: Configuration found');\r\n \r\n const app = initializeApp(firebaseConfig);\r\n const db = getFirestore(app);\r\n const auth = getAuth(app);\r\n\r\n \/\/ Teste de conectividade Firebase\r\n console.log('Firebase App inicializado:', app.name);\r\n console.log('Firestore inicializado:', !!db);\r\n console.log('Auth inicializado:', !!auth);\r\n\r\n document.addEventListener('DOMContentLoaded', async () => {\r\n \/\/ --- Elementos da Interface ---\r\n const mainSystem = document.getElementById('main-system');\r\n const userDisplayName = document.getElementById('user-display-name');\r\n const testConnectionBtn = document.getElementById('test-connection-btn');\r\n \r\n \/\/ --- Configura\u00e7\u00e3o do Firebase ---\r\n let currentUser = null;\r\n let productCatalogRef, returnedProductsRef, archivedProductsRef;\r\n\r\n \/\/ --- State and Refs ---\r\n let state = { products: [], returned: [], archived: [] };\r\n let currentImageTarget = null;\r\n let qrScannerStream = null;\r\n let productPhotos = []; \/\/ Array para armazenar as fotos do produto\r\n \r\n \/\/ --- Selectors ---\r\n const registerForm = document.getElementById('register-form');\r\n const returnCodeInput = document.getElementById('return-code');\r\n const returnObservationsInput = document.getElementById('return-observations');\r\n const scanQrButton = document.getElementById('scan-qr-button');\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 const productSuggestions = document.getElementById('product-suggestions');\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 searchAllInput = document.getElementById('search-all');\r\n const searchArchivedInput = document.getElementById('search-archived');\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 testFirebaseBtn = document.getElementById('test-firebase-btn');\r\n const csvFileInput = document.getElementById('csv-file-input');\r\n const productCatalogList = document.getElementById('product-catalog-list');\r\n \r\n \/\/ --- Modais ---\r\n const imageCaptureModal = document.getElementById('image-capture-modal');\r\n const closeImageModal = document.getElementById('close-image-modal');\r\n const imageUrlInput = document.getElementById('image-url-input');\r\n const confirmImageBtn = document.getElementById('confirm-image-btn');\r\n \r\n const qrScannerModal = document.getElementById('qr-scanner-modal');\r\n const closeQrScannerModal = document.getElementById('close-qr-scanner-modal');\r\n const qrVideo = document.getElementById('qr-video');\r\n const qrCanvas = document.getElementById('qr-canvas');\r\n\r\n const imageViewerModal = document.getElementById('image-viewer-modal');\r\n const closeViewerModal = document.getElementById('close-viewer-modal');\r\n const viewerImage = document.getElementById('viewer-image');\r\n\r\n \/\/ --- Templates ---\r\n const productEntryTemplate = document.getElementById('product-entry-template');\r\n const productCardTemplate = document.getElementById('product-card-template');\r\n const productInCardTemplate = document.getElementById('product-in-card-template');\r\n const rankingItemTemplate = document.getElementById('ranking-item-template');\r\n\r\n \r\n \/\/ --- Firebase Auth (Login An\u00f4nimo) ---\r\n \/\/ Tenta logar anonimamente assim que carrega para garantir permiss\u00f5es do banco\r\n signInAnonymously(auth).catch((error) => {\r\n console.error(\"Erro no login an\u00f4nimo:\", error);\r\n alert(\"Erro de conex\u00e3o. Verifique o console.\");\r\n });\r\n\r\n onAuthStateChanged(auth, user => {\r\n if (user) {\r\n currentUser = user;\r\n console.log('User authenticated (Anonymous):', user.uid);\r\n initFirestoreListeners();\r\n } else {\r\n currentUser = null;\r\n console.log('No user authenticated');\r\n }\r\n });\r\n\r\n \/\/ Teste de conectividade\r\n testConnectionBtn.addEventListener('click', async () => {\r\n console.log('=== TESTE DE CONECTIVIDADE INICIADO ===');\r\n \r\n \/\/ Testa status do Firebase\r\n console.log('1. Firebase App:', app.name);\r\n console.log('2. Auth status:', !!auth.currentUser);\r\n console.log('3. User UID:', auth.currentUser?.uid);\r\n console.log('4. Firestore instance:', !!db);\r\n \r\n \/\/ Testa refer\u00eancias das cole\u00e7\u00f5es\r\n console.log('5. Product catalog ref:', !!productCatalogRef);\r\n console.log('6. Returned products ref:', !!returnedProductsRef);\r\n console.log('7. Archived products ref:', !!archivedProductsRef);\r\n \r\n if (!currentUser) {\r\n alert('\u274c Aguardando autentica\u00e7\u00e3o an\u00f4nima...');\r\n return;\r\n }\r\n \r\n if (!productCatalogRef) {\r\n alert('\u274c Referencias do Firestore n\u00e3o inicializadas');\r\n return;\r\n }\r\n \r\n try {\r\n \/\/ Tenta ler dados da cole\u00e7\u00e3o de produtos\r\n console.log('8. Testando leitura dos produtos...');\r\n const { getDocs } = await import(\"https:\/\/www.gstatic.com\/firebasejs\/10.12.2\/firebase-firestore.js\");\r\n const testSnapshot = await getDocs(productCatalogRef);\r\n console.log('9. Produtos encontrados:', testSnapshot.size);\r\n \r\n alert('\u2705 Conectividade OK! Sistema operacional.');\r\n \r\n } catch (error) {\r\n console.error('\u274c Erro no teste de conectividade:', error);\r\n \r\n let errorDetails = `C\u00f3digo: ${error.code}\\nMensagem: ${error.message}`;\r\n \r\n if (error.code === 'permission-denied') {\r\n errorDetails += '\\n\\n\ud83d\udd27 Solu\u00e7\u00e3o: Verifique as regras do Firestore no Firebase Console.';\r\n } else if (error.code === 'unavailable') {\r\n errorDetails += '\\n\\n\ud83d\udd27 Solu\u00e7\u00e3o: Problema de rede ou servidor. Tente novamente.';\r\n }\r\n \r\n alert(`\u274c Erro de conectividade:\\n\\n${errorDetails}`);\r\n }\r\n });\r\n \r\n function initFirestoreListeners() {\r\n if (!currentUser) {\r\n console.error(\"User n\u00e3o dispon\u00edvel, n\u00e3o \u00e9 poss\u00edvel iniciar listeners.\");\r\n return;\r\n }\r\n console.log('Initializing Firestore...');\r\n \r\n try {\r\n \/\/ Dados compartilhados entre todos os usu\u00e1rios (sem userid na estrutura)\r\n productCatalogRef = collection(db, `shared\/productCatalog\/products`);\r\n returnedProductsRef = collection(db, `shared\/returnedProducts\/returns`);\r\n archivedProductsRef = collection(db, `shared\/archivedProducts\/returns`);\r\n \r\n console.log('Firestore references created for shared data');\r\n \r\n \/\/ Listener para cat\u00e1logo de produtos\r\n onSnapshot(productCatalogRef, (snapshot) => {\r\n console.log('=== PRODUCT CATALOG SNAPSHOT ===');\r\n state.products = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));\r\n updateAllViews();\r\n }, (error) => {\r\n console.error(\"Catalog Listener Error:\", error);\r\n alert('Erro ao conectar com o banco de dados: ' + error.message);\r\n });\r\n \r\n } catch (error) {\r\n console.error(\"Erro fatal ao inicializar Firestore:\", error);\r\n alert('Erro fatal na inicializa\u00e7\u00e3o do Firebase: ' + error.message);\r\n }\r\n \r\n onSnapshot(returnedProductsRef, (snapshot) => {\r\n state.returned = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));\r\n updateAllViews();\r\n }, (error) => console.error(\"Returned Listener Error:\", error));\r\n \r\n onSnapshot(archivedProductsRef, (snapshot) => {\r\n state.archived = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));\r\n updateAllViews();\r\n }, (error) => console.error(\"Archived Listener Error:\", error));\r\n }\r\n \r\n \/\/ --- UI Logic: Dynamic Form, Modals ---\r\n\r\n const addProductEntry = () => {\r\n const newEntry = productEntryTemplate.content.cloneNode(true);\r\n productEntriesContainer.appendChild(newEntry);\r\n const removeButtons = productEntriesContainer.querySelectorAll('.remove-product-button');\r\n if (removeButtons.length > 1) {\r\n removeButtons.forEach(btn => btn.classList.remove('hidden'));\r\n } else if (removeButtons.length === 1) {\r\n removeButtons[0].classList.add('hidden');\r\n }\r\n };\r\n productEntriesContainer.addEventListener('click', e => {\r\n if (e.target.closest('.remove-product-button')) {\r\n if (productEntriesContainer.children.length > 1) {\r\n e.target.closest('.product-entry').remove();\r\n }\r\n }\r\n if (e.target.classList.contains('image-placeholder')) {\r\n currentImageTarget = e.target;\r\n openImageCaptureModal();\r\n }\r\n });\r\n addProductButton.addEventListener('click', addProductEntry);\r\n\r\n \/\/ --- Render Functions ---\r\n const updateAllViews = () => {\r\n const allFilter = searchAllInput.value.toLowerCase();\r\n const filteredReturned = state.returned.filter(r => r.code.toLowerCase().includes(allFilter) || r.products.some(p => p.name.toLowerCase().includes(allFilter) || p.status.toLowerCase().includes(allFilter)));\r\n \r\n \/\/ Atualiza contador de \"Todos\"\r\n const allCountElement = document.getElementById('all-count');\r\n if (allCountElement) {\r\n allCountElement.textContent = state.returned.length;\r\n }\r\n \r\n renderReturnCards(filteredReturned, allProductsList);\r\n \r\n const archivedFilter = searchArchivedInput.value.toLowerCase();\r\n const filteredArchived = state.archived.filter(r => r.code.toLowerCase().includes(archivedFilter) || r.products.some(p => p.name.toLowerCase().includes(archivedFilter) || p.status.toLowerCase().includes(archivedFilter)));\r\n \r\n \/\/ Atualiza contador de \"Arquivados\"\r\n const archivedCountElement = document.getElementById('archived-count');\r\n if (archivedCountElement) {\r\n archivedCountElement.textContent = state.archived.length;\r\n }\r\n \r\n renderReturnCards(filteredArchived, archivedProductsList, true);\r\n\r\n renderMostReturned();\r\n renderProductCatalog();\r\n updateSuggestions();\r\n };\r\n\r\n const renderReturnCards = (returns, container, isArchivedList = false) => {\r\n container.innerHTML = '';\r\n if (returns.length === 0) {\r\n container.innerHTML = `<p class=\"text-gray-500 col-span-full text-center py-10\">Nenhum registro encontrado.<\/p>`;\r\n return;\r\n }\r\n const sortedReturns = [...returns].sort((a, b) => new Date(b.date) - new Date(a.date));\r\n \r\n sortedReturns.forEach(ret => {\r\n const card = productCardTemplate.content.cloneNode(true);\r\n card.querySelector('.return-code').textContent = ret.code;\r\n card.querySelector('.return-date').textContent = new Date(ret.date).toLocaleDateString('pt-BR');\r\n \r\n \/\/ Mostra quem criou o registro\r\n const createdByElement = card.querySelector('.created-by-name');\r\n if (ret.createdBy && ret.createdBy.displayName) {\r\n createdByElement.textContent = ret.createdBy.displayName;\r\n } else if (ret.createdBy && ret.createdBy.email) {\r\n createdByElement.textContent = ret.createdBy.email.split('@')[0];\r\n } else {\r\n createdByElement.textContent = 'Visitante';\r\n }\r\n \r\n \/\/ Mostra observa\u00e7\u00f5es se existirem\r\n const observationsSection = card.querySelector('.return-observations-section');\r\n const observationsElement = card.querySelector('.return-observations');\r\n if (ret.observations && ret.observations.trim() !== '') {\r\n observationsElement.textContent = ret.observations;\r\n observationsSection.classList.remove('hidden');\r\n }\r\n \r\n \/\/ Mostra fotos do produto se existirem\r\n const photosSection = card.querySelector('.product-photos-section');\r\n const photosGrid = card.querySelector('.product-photos-grid');\r\n if (ret.productPhotos && ret.productPhotos.length > 0) {\r\n photosGrid.innerHTML = ret.productPhotos.map(photo => `\r\n <img decoding=\"async\" src=\"${photo}\" alt=\"Foto do produto\" \r\n class=\"w-full h-16 object-cover rounded cursor-pointer hover:opacity-75 transition-opacity\"\r\n onclick=\"viewImage('${photo}')\">\r\n `).join('');\r\n photosSection.classList.remove('hidden');\r\n }\r\n \r\n const productListContainer = card.querySelector('.products-in-card-list');\r\n productListContainer.innerHTML = '';\r\n \r\n let labelsCount = 0; \/\/ Contador de etiquetas dispon\u00edveis\r\n \r\n ret.products.forEach(p => {\r\n const item = productInCardTemplate.content.cloneNode(true);\r\n const img = item.querySelector('.product-image');\r\n img.src = p.photo || 'https:\/\/placehold.co\/100x100\/e0e0e0\/999999?text=Sem+Foto';\r\n img.dataset.labelPhoto = p.labelPhoto;\r\n img.addEventListener('click', () => viewImage(p.photo));\r\n\r\n item.querySelector('.product-name').textContent = p.name;\r\n item.querySelector('.product-quantity').textContent = p.quantity || 1;\r\n \r\n \/\/ Bot\u00e3o para visualizar etiqueta\r\n const viewLabelBtn = item.querySelector('.view-label-btn');\r\n if (p.labelPhoto && p.labelPhoto.trim() !== '') {\r\n labelsCount++; \/\/ Incrementa contador\r\n viewLabelBtn.addEventListener('click', () => viewImage(p.labelPhoto));\r\n viewLabelBtn.title = 'Ver etiqueta';\r\n viewLabelBtn.classList.remove('disabled');\r\n } else {\r\n viewLabelBtn.classList.add('disabled');\r\n viewLabelBtn.title = 'Etiqueta n\u00e3o dispon\u00edvel';\r\n \/\/ Impede clique quando n\u00e3o h\u00e1 etiqueta\r\n viewLabelBtn.addEventListener('click', (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n });\r\n }\r\n \r\n const statusBadge = item.querySelector('.status-badge');\r\n statusBadge.textContent = p.status;\r\n statusBadge.className = 'status-badge text-xs font-semibold px-2 py-1 rounded-full whitespace-nowrap';\r\n switch (p.status) {\r\n case 'BOM': statusBadge.classList.add('bg-green-100', 'text-green-800'); break;\r\n case 'RUIM': statusBadge.classList.add('bg-yellow-100', 'text-yellow-800'); break;\r\n case 'QUEBRADO': statusBadge.classList.add('bg-red-100', 'text-red-800'); break;\r\n case 'AO REMETENTE': statusBadge.classList.add('bg-blue-100', 'text-blue-800'); break;\r\n case 'FALTANDO ITENS': statusBadge.classList.add('bg-orange-100', 'text-orange-800'); break;\r\n }\r\n productListContainer.appendChild(item);\r\n });\r\n \r\n \/\/ Atualiza o contador de etiquetas no card\r\n const labelsCountBadge = card.querySelector('.labels-count-badge');\r\n const labelsCountSpan = card.querySelector('.labels-count');\r\n if (labelsCount > 0) {\r\n labelsCountSpan.textContent = labelsCount;\r\n labelsCountBadge.classList.remove('hidden');\r\n } else {\r\n labelsCountBadge.classList.add('hidden');\r\n }\r\n\r\n const finishButton = card.querySelector('.finish-button');\r\n if (isArchivedList) {\r\n finishButton.remove();\r\n } else {\r\n finishButton.addEventListener('click', () => finishReturn(ret.id));\r\n }\r\n container.appendChild(card);\r\n });\r\n };\r\n\r\n const renderMostReturned = () => {\r\n mostReturnedList.innerHTML = '';\r\n const allReturnedProducts = [...state.returned, ...state.archived].flatMap(ret => ret.products);\r\n if (allReturnedProducts.length === 0) {\r\n mostReturnedList.innerHTML = `<p class=\"text-gray-500 text-center py-10\">Nenhum retorno registrado ainda.<\/p>`;\r\n const rankingCountElement = document.getElementById('ranking-count');\r\n if (rankingCountElement) {\r\n rankingCountElement.textContent = '0';\r\n }\r\n return;\r\n }\r\n const productCounts = allReturnedProducts.reduce((acc, product) => {\r\n if (!acc[product.name]) {\r\n acc[product.name] = { count: 0, photo: product.photo };\r\n }\r\n acc[product.name].count += (product.quantity || 1);\r\n return acc;\r\n }, {});\r\n const rankedProducts = Object.entries(productCounts)\r\n .map(([name, data]) => ({ name, ...data }))\r\n .sort((a, b) => b.count - a.count);\r\n \r\n \/\/ Atualiza contador de produtos \u00fanicos\r\n const rankingCountElement = document.getElementById('ranking-count');\r\n if (rankingCountElement) {\r\n rankingCountElement.textContent = rankedProducts.length;\r\n }\r\n \r\n rankedProducts.forEach((product, index) => {\r\n const item = rankingItemTemplate.content.cloneNode(true);\r\n item.querySelector('.ranking-position').textContent = `#${index + 1}`;\r\n item.querySelector('.ranking-image').src = product.photo;\r\n item.querySelector('.ranking-name').textContent = product.name;\r\n item.querySelector('.ranking-count').textContent = product.count;\r\n mostReturnedList.appendChild(item);\r\n });\r\n };\r\n \r\n const renderProductCatalog = () => {\r\n const productCountElement = document.getElementById('product-count');\r\n \r\n \/\/ Atualiza o contador\r\n if (productCountElement) {\r\n productCountElement.textContent = state.products.length;\r\n }\r\n \r\n productCatalogList.innerHTML = '';\r\n if (state.products.length === 0) {\r\n productCatalogList.innerHTML = `<p class=\"text-gray-500 text-center py-10\">Nenhum produto cadastrado.<\/p>`;\r\n return;\r\n }\r\n state.products.forEach(product => {\r\n const productDiv = document.createElement('div');\r\n productDiv.className = 'flex items-center bg-gray-50 p-3 rounded-lg border';\r\n \r\n const createdByText = product.createdBy ? \r\n (product.createdBy.displayName || product.createdBy.email ? product.createdBy.email.split('@')[0] : 'Visitante') : \r\n 'Sistema';\r\n \r\n productDiv.innerHTML = `\r\n <img decoding=\"async\" src=\"${product.photo}\" alt=\"Foto de ${product.name}\" class=\"h-12 w-12 rounded-md object-cover mr-4\" onerror=\"this.dataset.brokenImg = 'true'\">\r\n <div class=\"flex-grow\">\r\n <div class=\"font-semibold\">${product.name}<\/div>\r\n <div class=\"text-xs text-gray-500\">Cadastrado por: ${createdByText}<\/div>\r\n <\/div>\r\n <button data-id=\"${product.id}\" class=\"delete-product-btn text-red-500 hover:text-red-700 text-lg\">\r\n <i class=\"fas fa-trash-alt\"><\/i>\r\n <\/button>`;\r\n productCatalogList.appendChild(productDiv);\r\n });\r\n document.querySelectorAll('.delete-product-btn').forEach(button => {\r\n button.addEventListener('click', (e) => deleteProductFromCatalog(e.currentTarget.dataset.id));\r\n });\r\n };\r\n\r\n \/\/ --- Product Photos Management ---\r\n const renderProductPhotos = () => {\r\n productPhotosContainer.innerHTML = '';\r\n \r\n \/\/ Renderiza fotos existentes\r\n productPhotos.forEach((photo, index) => {\r\n const photoDiv = document.createElement('div');\r\n photoDiv.className = 'product-photo-item has-image';\r\n photoDiv.innerHTML = `\r\n <img decoding=\"async\" src=\"${photo}\" alt=\"Foto do produto ${index + 1}\">\r\n <button type=\"button\" class=\"remove-photo-btn\" data-index=\"${index}\">×<\/button>\r\n `;\r\n \r\n \/\/ Visualizar foto\r\n photoDiv.querySelector('img').addEventListener('click', () => viewImage(photo));\r\n \r\n \/\/ Remover foto\r\n photoDiv.querySelector('.remove-photo-btn').addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n removeProductPhoto(index);\r\n });\r\n \r\n productPhotosContainer.appendChild(photoDiv);\r\n });\r\n \r\n \/\/ Adiciona slots vazios at\u00e9 completar 5\r\n for (let i = productPhotos.length; i < 5; i++) {\r\n const emptyDiv = document.createElement('div');\r\n emptyDiv.className = 'product-photo-item';\r\n emptyDiv.innerHTML = `\r\n <div class=\"product-photo-placeholder\">\r\n <i class=\"fas fa-camera\"><\/i>\r\n <div>Adicionar Foto<\/div>\r\n <\/div>\r\n `;\r\n \r\n emptyDiv.addEventListener('click', () => {\r\n currentImageTarget = { type: 'product-photo', index: i };\r\n openImageCaptureModal();\r\n });\r\n \r\n productPhotosContainer.appendChild(emptyDiv);\r\n }\r\n \r\n updatePhotoCountIndicator();\r\n updateAddPhotoButton();\r\n };\r\n \r\n const updatePhotoCountIndicator = () => {\r\n photoCountIndicator.textContent = `${productPhotos.length}\/5 fotos`;\r\n };\r\n \r\n const updateAddPhotoButton = () => {\r\n if (productPhotos.length >= 5) {\r\n addProductPhotoBtn.disabled = true;\r\n addProductPhotoBtn.classList.add('opacity-50', 'cursor-not-allowed');\r\n addProductPhotoBtn.innerHTML = '<i class=\"fas fa-camera mr-1\"><\/i>Limite atingido';\r\n } else {\r\n addProductPhotoBtn.disabled = false;\r\n addProductPhotoBtn.classList.remove('opacity-50', 'cursor-not-allowed');\r\n addProductPhotoBtn.innerHTML = '<i class=\"fas fa-camera mr-1\"><\/i>Adicionar Foto';\r\n }\r\n };\r\n \r\n const addProductPhoto = (photoUrl) => {\r\n if (productPhotos.length < 5) {\r\n productPhotos.push(photoUrl);\r\n renderProductPhotos();\r\n }\r\n };\r\n \r\n const removeProductPhoto = (index) => {\r\n if (index >= 0 && index < productPhotos.length) {\r\n productPhotos.splice(index, 1);\r\n renderProductPhotos();\r\n }\r\n };\r\n \r\n \/\/ Event listeners para fotos do produto\r\n addProductPhotoBtn.addEventListener('click', () => {\r\n if (productPhotos.length < 5) {\r\n currentImageTarget = { type: 'product-photo', index: productPhotos.length };\r\n openImageCaptureModal();\r\n }\r\n });\r\n\r\n \/\/ --- Form Submissions ---\r\n registerForm.addEventListener('submit', async e => {\r\n e.preventDefault();\r\n const productEntries = [];\r\n productEntriesContainer.querySelectorAll('.product-entry').forEach(entry => {\r\n productEntries.push({\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 const newReturn = {\r\n code: returnCodeInput.value.trim(),\r\n observations: returnObservationsInput.value.trim(),\r\n productPhotos: [...productPhotos], \/\/ Copia das fotos do produto\r\n date: new Date().toISOString(),\r\n products: productEntries,\r\n \/\/ Informa\u00e7\u00f5es do usu\u00e1rio que registrou\r\n createdBy: {\r\n email: currentUser.email || null,\r\n uid: currentUser.uid,\r\n displayName: 'Visitante'\r\n },\r\n createdAt: serverTimestamp()\r\n };\r\n \r\n try {\r\n await addDoc(returnedProductsRef, newReturn);\r\n registerForm.reset();\r\n productEntriesContainer.innerHTML = '';\r\n productPhotos = []; \/\/ Limpa as fotos do produto\r\n renderProductPhotos(); \/\/ Re-renderiza as fotos\r\n addProductEntry();\r\n \/\/ Chama a fun\u00e7\u00e3o global de troca de abas\r\n window.switchTabGlobal('all');\r\n } catch (error) {\r\n console.error(\"Error saving return:\", error);\r\n alert('Erro ao salvar retorno: ' + error.message);\r\n }\r\n });\r\n\r\n addProductForm.addEventListener('submit', async (e) => {\r\n e.preventDefault();\r\n console.log('Form submitted - adding product to catalog');\r\n addProductFeedback.textContent = '';\r\n const name = newProductNameInput.value.trim();\r\n const photo = newProductPhotoInput.value.trim();\r\n console.log('Product data:', { name, photo });\r\n \r\n if (!name || !photo) {\r\n addProductFeedback.textContent = 'Nome e URL s\u00e3o obrigat\u00f3rios.';\r\n addProductFeedback.className = 'text-sm text-center h-5 text-red-500';\r\n console.log('Validation failed: missing name or photo');\r\n return;\r\n }\r\n if (state.products.some(p => p.name.toLowerCase() === name.toLowerCase())) {\r\n addProductFeedback.textContent = 'Este produto j\u00e1 existe.';\r\n addProductFeedback.className = 'text-sm text-center h-5 text-red-500';\r\n console.log('Validation failed: product already exists');\r\n return;\r\n }\r\n \r\n if (!productCatalogRef) {\r\n console.error('productCatalogRef is not initialized');\r\n addProductFeedback.textContent = 'Erro: Firebase n\u00e3o inicializado.';\r\n addProductFeedback.className = 'text-sm text-center h-5 text-red-500';\r\n return;\r\n }\r\n \r\n const productData = {\r\n name, \r\n photo,\r\n \/\/ Informa\u00e7\u00f5es do usu\u00e1rio que cadastrou\r\n createdBy: {\r\n email: currentUser.email || null,\r\n uid: currentUser.uid,\r\n displayName: 'Visitante'\r\n },\r\n createdAt: serverTimestamp()\r\n };\r\n \r\n try {\r\n console.log('Attempting to add product to Firebase...');\r\n await addDoc(productCatalogRef, productData);\r\n console.log('Product added successfully!');\r\n addProductForm.reset();\r\n addProductFeedback.textContent = 'Produto adicionado!';\r\n addProductFeedback.className = 'text-sm text-center h-5 text-green-600';\r\n setTimeout(() => { addProductFeedback.textContent = ''; }, 3000);\r\n } catch (error) {\r\n console.error(\"Error adding product:\", error);\r\n addProductFeedback.textContent = 'Erro ao salvar: ' + error.message;\r\n addProductFeedback.className = 'text-sm text-center h-5 text-red-500';\r\n }\r\n });\r\n \r\n \/\/ Bot\u00e3o de teste do Firebase\r\n testFirebaseBtn.addEventListener('click', async () => {\r\n console.log('=== TESTE FIREBASE INICIADO ===');\r\n \r\n const testProduct = {\r\n name: `Produto Teste ${Date.now()}`,\r\n photo: 'https:\/\/via.placeholder.com\/100x100\/0066cc\/ffffff?text=TESTE',\r\n createdBy: {\r\n email: currentUser.email || null,\r\n uid: currentUser.uid,\r\n displayName: 'Visitante'\r\n },\r\n createdAt: serverTimestamp()\r\n };\r\n \r\n console.log('Dados do produto teste:', testProduct);\r\n console.log('Firebase inicializado?', !!app);\r\n console.log('Auth inicializado?', !!auth);\r\n console.log('Firestore inicializado?', !!db);\r\n console.log('Current User:', currentUser.email);\r\n console.log('Product catalog ref existe?', !!productCatalogRef);\r\n console.log('State atual:', state);\r\n \r\n if (!productCatalogRef) {\r\n alert('Firebase n\u00e3o est\u00e1 inicializado! Aguarde alguns segundos.');\r\n return;\r\n }\r\n \r\n try {\r\n console.log('Tentando adicionar produto teste...');\r\n const docRef = await addDoc(productCatalogRef, testProduct);\r\n console.log('\u2705 Produto teste adicionado com sucesso! ID:', docRef.id);\r\n alert(`\u2705 Teste bem-sucedido! Produto adicionado com ID: ${docRef.id}`);\r\n } catch (error) {\r\n console.error('\u274c Erro no teste:', error);\r\n alert(`\u274c Erro no teste: ${error.message}`);\r\n }\r\n });\r\n \r\n \/\/ --- Image Capture Logic ---\r\n const openImageCaptureModal = () => {\r\n imageUrlInput.value = '';\r\n imageCaptureModal.classList.remove('hidden');\r\n \/\/ Atualiza links recentes no modal\r\n updateModalRecentLinks();\r\n };\r\n \r\n const closeImageCaptureModal = () => {\r\n imageCaptureModal.classList.add('hidden');\r\n currentImageTarget = null;\r\n };\r\n\r\n confirmImageBtn.addEventListener('click', () => {\r\n const url = imageUrlInput.value.trim();\r\n if (url && currentImageTarget) {\r\n if (currentImageTarget.type === 'product-photo') {\r\n \/\/ Adiciona foto do produto\r\n addProductPhoto(url);\r\n } else {\r\n \/\/ L\u00f3gica original para fotos de produto individual\r\n currentImageTarget.src = url;\r\n currentImageTarget.nextElementSibling.value = url;\r\n }\r\n }\r\n closeImageCaptureModal();\r\n });\r\n closeImageModal.addEventListener('click', closeImageCaptureModal);\r\n \r\n \/\/ --- Modal PicoShare Logic ---\r\n const modalOpenPicoShare = document.getElementById('modal-open-picoshare');\r\n const modalRecentLinksList = document.getElementById('modal-recent-links-list');\r\n \r\n \/\/ Abrir PicoShare do modal\r\n modalOpenPicoShare?.addEventListener('click', () => {\r\n window.open('https:\/\/chatwoot-picoshare.nounpw.easypanel.host\/', '_blank');\r\n });\r\n \r\n \/\/ Atualizar links recentes no modal\r\n const updateModalRecentLinks = () => {\r\n if (!modalRecentLinksList) return;\r\n \r\n const links = loadRecentLinks();\r\n \r\n if (links.length === 0) {\r\n modalRecentLinksList.innerHTML = '<p class=\"text-xs text-gray-500\">Nenhum link salvo<\/p>';\r\n return;\r\n }\r\n \r\n modalRecentLinksList.innerHTML = links.slice(0, 3).map(link => `\r\n <div class=\"flex items-center justify-between text-xs bg-white p-2 rounded border\">\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"truncate font-medium\">${link.name}<\/div>\r\n <div class=\"truncate text-gray-500\">${link.url}<\/div>\r\n <\/div>\r\n <button onclick=\"useModalLink('${link.url}')\" class=\"ml-2 px-2 py-1 bg-blue-500 text-white rounded hover:bg-blue-600\">\r\n Usar\r\n <\/button>\r\n <\/div>\r\n `).join('');\r\n };\r\n \r\n \/\/ Fun\u00e7\u00e3o global para usar link do modal\r\n window.useModalLink = (url) => {\r\n imageUrlInput.value = url;\r\n \/\/ Dispara o evento de input para valida\u00e7\u00e3o\r\n imageUrlInput.dispatchEvent(new Event('input'));\r\n };\r\n\r\n \/\/ --- Barcode Scanner Logic ---\r\n let currentCameraIndex = 0;\r\n let availableCameras = [];\r\n \r\n const scannerMessage = document.getElementById('scanner-message');\r\n const toggleCameraBtn = document.getElementById('toggle-camera-btn');\r\n \r\n \/\/ Detectar c\u00e2meras dispon\u00edveis\r\n const detectCameras = async () => {\r\n try {\r\n const devices = await navigator.mediaDevices.enumerateDevices();\r\n availableCameras = devices.filter(device => device.kind === 'videoinput');\r\n console.log('C\u00e2meras detectadas:', availableCameras.length);\r\n \r\n if (availableCameras.length <= 1) {\r\n toggleCameraBtn.style.display = 'none';\r\n }\r\n } catch (error) {\r\n console.error('Erro ao detectar c\u00e2meras:', error);\r\n }\r\n };\r\n \r\n const updateScannerMessage = (message, type = 'info') => {\r\n if (scannerMessage) {\r\n scannerMessage.textContent = message;\r\n const statusDiv = scannerMessage.parentElement;\r\n statusDiv.className = 'bg-black bg-opacity-60 text-white text-xs px-2 py-1 rounded';\r\n \r\n switch (type) {\r\n case 'success':\r\n statusDiv.className = 'bg-green-500 bg-opacity-90 text-white text-xs px-2 py-1 rounded';\r\n break;\r\n case 'error':\r\n statusDiv.className = 'bg-red-500 bg-opacity-90 text-white text-xs px-2 py-1 rounded';\r\n break;\r\n case 'warning':\r\n statusDiv.className = 'bg-yellow-500 bg-opacity-90 text-white text-xs px-2 py-1 rounded';\r\n break;\r\n }\r\n }\r\n };\r\n \r\n const openQrScanner = async () => {\r\n qrScannerModal.classList.remove('hidden');\r\n await detectCameras();\r\n updateScannerMessage('Iniciando c\u00e2mera...');\r\n \r\n try {\r\n \/\/ Tenta usar c\u00e2mera traseira primeiro\r\n const constraints = {\r\n video: {\r\n facingMode: availableCameras.length > 1 ? 'environment' : 'user',\r\n width: { ideal: 1280, max: 1920 },\r\n height: { ideal: 720, max: 1080 }\r\n }\r\n };\r\n \r\n \/\/ Se h\u00e1 c\u00e2meras espec\u00edficas dispon\u00edveis, usa a selecionada\r\n if (availableCameras.length > 0 && currentCameraIndex < availableCameras.length) {\r\n constraints.video.deviceId = availableCameras[currentCameraIndex].deviceId;\r\n }\r\n \r\n qrScannerStream = await navigator.mediaDevices.getUserMedia(constraints);\r\n qrVideo.srcObject = qrScannerStream;\r\n qrVideo.play();\r\n \r\n updateScannerMessage('Procurando c\u00f3digo...', 'info');\r\n requestAnimationFrame(tickQrScanner);\r\n \r\n } catch(err) {\r\n console.error(\"Barcode Scanner camera error:\", err);\r\n updateScannerMessage('Erro ao acessar c\u00e2mera', 'error');\r\n \r\n setTimeout(() => {\r\n alert(\"N\u00e3o foi poss\u00edvel acessar a c\u00e2mera. Verifique as permiss\u00f5es.\");\r\n closeQrScanner();\r\n }, 2000);\r\n }\r\n };\r\n\r\n const closeQrScanner = () => {\r\n if(qrScannerStream) {\r\n qrScannerStream.getTracks().forEach(track => track.stop());\r\n }\r\n qrScannerModal.classList.add('hidden');\r\n qrScannerStream = null;\r\n updateScannerMessage('Scanner fechado');\r\n };\r\n\r\n const tickQrScanner = () => {\r\n if (qrVideo.readyState === qrVideo.HAVE_ENOUGH_DATA && qrScannerStream) {\r\n const canvasContext = qrCanvas.getContext('2d');\r\n qrCanvas.height = qrVideo.videoHeight;\r\n qrCanvas.width = qrVideo.videoWidth;\r\n canvasContext.drawImage(qrVideo, 0, 0, qrCanvas.width, qrCanvas.height);\r\n const imageData = canvasContext.getImageData(0, 0, qrCanvas.width, qrCanvas.height);\r\n \r\n try {\r\n const code = jsQR(imageData.data, imageData.width, imageData.height, {\r\n inversionAttempts: \"dontInvert\",\r\n });\r\n\r\n if (code) {\r\n \/\/ C\u00f3digo detectado com sucesso\r\n updateScannerMessage('\u2713 C\u00f3digo detectado!', 'success');\r\n \r\n \/\/ Feedback visual\/sonoro (vibra\u00e7\u00e3o se dispon\u00edvel)\r\n if (navigator.vibrate) {\r\n navigator.vibrate(200);\r\n }\r\n \r\n \/\/ Preenche o campo e fecha o scanner\r\n setTimeout(() => {\r\n returnCodeInput.value = code.data;\r\n closeQrScanner();\r\n \r\n \/\/ Foca no pr\u00f3ximo campo\r\n const firstProductName = document.querySelector('.product-name');\r\n if (firstProductName) {\r\n firstProductName.focus();\r\n }\r\n }, 500);\r\n \r\n return; \/\/ Para o loop\r\n } else {\r\n \/\/ Atualiza mensagem periodicamente para mostrar que est\u00e1 ativo\r\n const messages = [\r\n 'Procurando c\u00f3digo...',\r\n 'Aponte para o c\u00f3digo',\r\n 'Centralize o c\u00f3digo',\r\n 'Aproxime ou afaste a c\u00e2mera'\r\n ];\r\n \r\n if (Math.random() < 0.01) { \/\/ 1% de chance de mudar mensagem\r\n const randomMessage = messages[Math.floor(Math.random() * messages.length)];\r\n updateScannerMessage(randomMessage, 'info');\r\n }\r\n }\r\n } catch (error) {\r\n console.error('Erro ao processar imagem:', error);\r\n updateScannerMessage('Erro na leitura', 'warning');\r\n }\r\n }\r\n requestAnimationFrame(tickQrScanner);\r\n };\r\n \r\n \/\/ Funcionalidade de trocar c\u00e2mera\r\n const toggleCamera = async () => {\r\n if (availableCameras.length <= 1) return;\r\n \r\n updateScannerMessage('Trocando c\u00e2mera...', 'info');\r\n \r\n \/\/ Para stream atual\r\n if (qrScannerStream) {\r\n qrScannerStream.getTracks().forEach(track => track.stop());\r\n }\r\n \r\n \/\/ Pr\u00f3xima c\u00e2mera\r\n currentCameraIndex = (currentCameraIndex + 1) % availableCameras.length;\r\n \r\n try {\r\n const constraints = {\r\n video: {\r\n deviceId: availableCameras[currentCameraIndex].deviceId,\r\n width: { ideal: 1280, max: 1920 },\r\n height: { ideal: 720, max: 1080 }\r\n }\r\n };\r\n \r\n qrScannerStream = await navigator.mediaDevices.getUserMedia(constraints);\r\n qrVideo.srcObject = qrScannerStream;\r\n qrVideo.play();\r\n \r\n updateScannerMessage('C\u00e2mera alterada', 'success');\r\n setTimeout(() => {\r\n updateScannerMessage('Procurando c\u00f3digo...', 'info');\r\n }, 1000);\r\n \r\n } catch (error) {\r\n console.error('Erro ao trocar c\u00e2mera:', error);\r\n updateScannerMessage('Erro ao trocar c\u00e2mera', 'error');\r\n }\r\n };\r\n \r\n \/\/ Event listeners\r\n toggleCameraBtn?.addEventListener('click', toggleCamera);\r\n scanQrButton.addEventListener('click', openQrScanner);\r\n closeQrScannerModal.addEventListener('click', closeQrScanner);\r\n\r\n \/\/ --- Image Viewer ---\r\n const viewImage = (src) => {\r\n if (!src) return;\r\n viewerImage.src = src;\r\n imageViewerModal.classList.remove('hidden');\r\n };\r\n \r\n \/\/ Torna a fun\u00e7\u00e3o viewImage global para uso nos templates\r\n window.viewImage = viewImage;\r\n closeViewerModal.addEventListener('click', () => imageViewerModal.classList.add('hidden'));\r\n\r\n const finishReturn = async (returnId) => {\r\n const returnedDocRef = doc(returnedProductsRef, returnId);\r\n try {\r\n const returnedDoc = await getDoc(returnedDocRef);\r\n if (returnedDoc.exists()) {\r\n await addDoc(archivedProductsRef, returnedDoc.data());\r\n await deleteDoc(returnedDocRef);\r\n }\r\n } catch (error) {\r\n console.error(\"Error finishing return:\", error);\r\n }\r\n };\r\n\r\n const deleteProductFromCatalog = async (productId) => {\r\n try {\r\n await deleteDoc(doc(productCatalogRef, productId));\r\n } catch (error) {\r\n console.error(\"Error deleting product from catalog:\", error);\r\n }\r\n };\r\n \r\n \/\/ --- Catalog and Other Helpers ---\r\n const updateSuggestions = () => {\r\n if (!productSuggestions) return;\r\n productSuggestions.innerHTML = '';\r\n state.products.forEach(p => {\r\n const option = document.createElement('option');\r\n option.value = p.name;\r\n productSuggestions.appendChild(option);\r\n });\r\n };\r\n \r\n \/\/ --- Product Suggestions with Images ---\r\n let currentDropdown = null;\r\n \r\n const showProductSuggestions = (input, query) => {\r\n hideProductSuggestions();\r\n \r\n if (!query || query.length < 1) return;\r\n \r\n const container = input.closest('.product-name-container');\r\n const dropdown = container.querySelector('.product-suggestions-dropdown');\r\n \r\n \/\/ Filtra produtos que cont\u00eam o texto digitado\r\n const matchingProducts = state.products.filter(product => \r\n product.name.toLowerCase().includes(query.toLowerCase())\r\n ).slice(0, 8); \/\/ Limita a 8 resultados\r\n \r\n if (matchingProducts.length === 0) {\r\n hideProductSuggestions();\r\n return;\r\n }\r\n \r\n \/\/ Cria os itens da lista\r\n dropdown.innerHTML = matchingProducts.map(product => `\r\n <div class=\"product-suggestion-item\" data-product-id=\"${product.id}\">\r\n <img decoding=\"async\" src=\"${product.photo}\" alt=\"${product.name}\" class=\"product-suggestion-image\" onerror=\"this.src='https:\/\/placehold.co\/32x32\/e0e0e0\/999999?text=?'\">\r\n <span class=\"product-suggestion-name\">${product.name}<\/span>\r\n <\/div>\r\n `).join('');\r\n \r\n \/\/ Adiciona event listeners\r\n dropdown.querySelectorAll('.product-suggestion-item').forEach(item => {\r\n item.addEventListener('click', () => {\r\n const productId = item.dataset.productId;\r\n const product = state.products.find(p => p.id === productId);\r\n if (product) {\r\n selectProduct(input, product);\r\n }\r\n hideProductSuggestions();\r\n });\r\n });\r\n \r\n dropdown.classList.remove('hidden');\r\n currentDropdown = dropdown;\r\n };\r\n \r\n const hideProductSuggestions = () => {\r\n if (currentDropdown) {\r\n currentDropdown.classList.add('hidden');\r\n currentDropdown = null;\r\n }\r\n \/\/ Esconde todos os dropdowns\r\n document.querySelectorAll('.product-suggestions-dropdown').forEach(dropdown => {\r\n dropdown.classList.add('hidden');\r\n });\r\n };\r\n \r\n const selectProduct = (input, product) => {\r\n input.value = product.name;\r\n \r\n const entryDiv = input.closest('.product-entry');\r\n if (entryDiv) {\r\n const img = entryDiv.querySelector('.image-placeholder[data-type=\"product\"]');\r\n const hiddenInput = entryDiv.querySelector('.product-photo-data');\r\n if (img && hiddenInput) {\r\n img.src = product.photo;\r\n hiddenInput.value = product.photo;\r\n }\r\n }\r\n };\r\n \r\n productEntriesContainer.addEventListener('input', e => {\r\n if (e.target.classList.contains('product-name')) {\r\n const query = e.target.value.trim();\r\n showProductSuggestions(e.target, query);\r\n \r\n \/\/ L\u00f3gica original para produto exato\r\n const foundProduct = state.products.find(p => p.name.toLowerCase() === query.toLowerCase());\r\n const entryDiv = e.target.closest('.product-entry');\r\n if (foundProduct && entryDiv) {\r\n const img = entryDiv.querySelector('.image-placeholder[data-type=\"product\"]');\r\n const hiddenInput = entryDiv.querySelector('.product-photo-data');\r\n if (img && hiddenInput) {\r\n img.src = foundProduct.photo;\r\n hiddenInput.value = foundProduct.photo;\r\n }\r\n }\r\n }\r\n });\r\n \r\n productEntriesContainer.addEventListener('blur', e => {\r\n if (e.target.classList.contains('product-name')) {\r\n \/\/ Delay para permitir clique no dropdown\r\n setTimeout(() => {\r\n hideProductSuggestions();\r\n }, 150);\r\n }\r\n }, true);\r\n \r\n productEntriesContainer.addEventListener('focus', e => {\r\n if (e.target.classList.contains('product-name')) {\r\n const query = e.target.value.trim();\r\n if (query) {\r\n showProductSuggestions(e.target, query);\r\n }\r\n }\r\n }, true);\r\n \r\n \/\/ Esconder dropdown quando clicar fora\r\n document.addEventListener('click', (e) => {\r\n if (!e.target.closest('.product-name-container')) {\r\n hideProductSuggestions();\r\n }\r\n });\r\n \r\n \/\/ Navega\u00e7\u00e3o por teclado no dropdown\r\n productEntriesContainer.addEventListener('keydown', e => {\r\n if (!e.target.classList.contains('product-name')) return;\r\n \r\n const container = e.target.closest('.product-name-container');\r\n const dropdown = container.querySelector('.product-suggestions-dropdown');\r\n \r\n if (dropdown.classList.contains('hidden')) return;\r\n \r\n const items = dropdown.querySelectorAll('.product-suggestion-item');\r\n let selectedIndex = Array.from(items).findIndex(item => item.classList.contains('selected'));\r\n \r\n switch (e.key) {\r\n case 'ArrowDown':\r\n e.preventDefault();\r\n if (selectedIndex < items.length - 1) {\r\n if (selectedIndex >= 0) items[selectedIndex].classList.remove('selected');\r\n selectedIndex++;\r\n items[selectedIndex].classList.add('selected');\r\n items[selectedIndex].scrollIntoView({ block: 'nearest' });\r\n }\r\n break;\r\n \r\n case 'ArrowUp':\r\n e.preventDefault();\r\n if (selectedIndex > 0) {\r\n items[selectedIndex].classList.remove('selected');\r\n selectedIndex--;\r\n items[selectedIndex].classList.add('selected');\r\n items[selectedIndex].scrollIntoView({ block: 'nearest' });\r\n } else if (selectedIndex === 0) {\r\n items[selectedIndex].classList.remove('selected');\r\n selectedIndex = -1;\r\n }\r\n break;\r\n \r\n case 'Enter':\r\n e.preventDefault();\r\n if (selectedIndex >= 0) {\r\n const productId = items[selectedIndex].dataset.productId;\r\n const product = state.products.find(p => p.id === productId);\r\n if (product) {\r\n selectProduct(e.target, product);\r\n }\r\n hideProductSuggestions();\r\n }\r\n break;\r\n \r\n case 'Escape':\r\n e.preventDefault();\r\n hideProductSuggestions();\r\n break;\r\n }\r\n });\r\n\r\n searchAllInput.addEventListener('input', updateAllViews);\r\n searchArchivedInput.addEventListener('input', updateAllViews);\r\n\r\n csvFileInput.addEventListener('change', (event) => {\r\n const file = event.target.files[0];\r\n if (!file) return;\r\n \r\n console.log('=== INICIANDO IMPORTA\u00c7\u00c3O CSV ===');\r\n console.log('Arquivo selecionado:', file.name, 'Tamanho:', file.size, 'bytes');\r\n \r\n if (!productCatalogRef) {\r\n console.error('Firebase n\u00e3o inicializado!');\r\n alert('Erro: Firebase n\u00e3o est\u00e1 inicializado. Aguarde alguns segundos e tente novamente.');\r\n csvFileInput.value = '';\r\n return;\r\n }\r\n \r\n console.log('Firebase est\u00e1 inicializado, produtos atuais no state:', state.products.length);\r\n \r\n const reader = new FileReader();\r\n reader.onload = async function(e) {\r\n try {\r\n const text = e.target.result;\r\n console.log('Arquivo lido com sucesso. Tamanho do texto:', text.length);\r\n console.log('Primeiros 300 caracteres:', text.substring(0, 300));\r\n \r\n \/\/ Detecta o separador (v\u00edrgula ou ponto e v\u00edrgula)\r\n const firstLine = text.split('\\n')[0];\r\n const separator = firstLine.includes(';') ? ';' : ',';\r\n console.log('Primeira linha:', firstLine);\r\n console.log('Separador detectado:', separator);\r\n \r\n const rows = text.split('\\n').filter(row => row.trim() !== '');\r\n console.log('Total de linhas n\u00e3o vazias:', rows.length);\r\n \r\n if (rows.length === 0) {\r\n alert('Arquivo vazio ou sem dados v\u00e1lidos.');\r\n csvFileInput.value = '';\r\n return;\r\n }\r\n \r\n \/\/ Ignora cabe\u00e7alho se existir\r\n const dataRows = rows.slice(1);\r\n console.log('Linhas de dados ap\u00f3s remover cabe\u00e7alho:', dataRows.length);\r\n \r\n if (dataRows.length === 0) {\r\n alert('Arquivo s\u00f3 cont\u00e9m cabe\u00e7alho, sem dados para importar.');\r\n csvFileInput.value = '';\r\n return;\r\n }\r\n \r\n let successCount = 0;\r\n let skipCount = 0;\r\n let errorCount = 0;\r\n \r\n console.log('=== PROCESSANDO LINHAS ===');\r\n \r\n for (let index = 0; index < dataRows.length; index++) {\r\n const row = dataRows[index];\r\n console.log(`\\n--- Processando linha ${index + 2}: \"${row}\" ---`);\r\n \r\n const columns = row.split(separator).map(col => col.trim().replace(\/\"\/g, ''));\r\n console.log('Colunas extra\u00eddas:', columns);\r\n \r\n if (columns.length < 2) {\r\n console.log(`\u274c Linha com formato inv\u00e1lido (menos de 2 colunas): ${columns.length}`);\r\n errorCount++;\r\n continue;\r\n }\r\n \r\n const name = columns[0];\r\n const photo = columns[1];\r\n \r\n console.log(`Produto: \"${name}\" | Foto: \"${photo}\"`);\r\n \r\n if (!name || !photo) {\r\n console.log(`\u274c Nome ou foto vazio - Nome: \"${name}\" | Foto: \"${photo}\"`);\r\n errorCount++;\r\n continue;\r\n }\r\n \r\n \/\/ Verifica se j\u00e1 existe no state atual\r\n const existingProduct = state.products.find(p => p.name.toLowerCase() === name.toLowerCase());\r\n if (existingProduct) {\r\n console.log(`\u26a0\ufe0f Produto j\u00e1 existe no cat\u00e1logo: \"${name}\" (ID: ${existingProduct.id})`);\r\n skipCount++;\r\n continue;\r\n }\r\n \r\n console.log(`\u2705 Produto v\u00e1lido para adicionar: \"${name}\"`);\r\n \r\n try {\r\n console.log('\ud83d\udd04 Salvando no Firebase...');\r\n const productData = {\r\n name, \r\n photo,\r\n createdBy: {\r\n email: currentUser.email || null,\r\n uid: currentUser.uid,\r\n displayName: 'Visitante'\r\n },\r\n createdAt: serverTimestamp()\r\n };\r\n const docRef = await addDoc(productCatalogRef, productData);\r\n successCount++;\r\n console.log(`\u2705 Produto salvo com sucesso! ID: ${docRef.id}`);\r\n } catch (error) {\r\n errorCount++;\r\n console.error(`\u274c Erro ao salvar produto \"${name}\":`, error);\r\n }\r\n }\r\n \r\n console.log('=== RESUMO DA IMPORTA\u00c7\u00c3O ===');\r\n console.log('\u2705 Sucessos:', successCount);\r\n console.log('\u26a0\ufe0f J\u00e1 existentes:', skipCount);\r\n console.log('\u274c Erros:', errorCount);\r\n \r\n const message = `Importa\u00e7\u00e3o conclu\u00edda!\\n\u2705 Adicionados: ${successCount}\\n\u26a0\ufe0f J\u00e1 existentes: ${skipCount}\\n\u274c Erros: ${errorCount}`;\r\n alert(message);\r\n \r\n if (successCount === 0 && skipCount === 0 && errorCount > 0) {\r\n alert('Nenhum produto foi importado devido a erros no formato. Verifique o console (F12) para mais detalhes.');\r\n }\r\n \r\n } catch(error) {\r\n console.error(\"ERRO GERAL ao processar CSV:\", error);\r\n alert(`Erro ao processar arquivo: ${error.message}\\n\\nVerifique o console (F12) para mais detalhes.`);\r\n } finally {\r\n csvFileInput.value = '';\r\n }\r\n };\r\n \r\n reader.onerror = function(error) {\r\n console.error(\"ERRO ao ler arquivo:\", error);\r\n alert('Erro ao ler o arquivo. Tente novamente.');\r\n csvFileInput.value = '';\r\n };\r\n \r\n console.log('Iniciando leitura do arquivo...');\r\n reader.readAsText(file, 'UTF-8');\r\n });\r\n\r\n \/\/ --- PicoShare Logic ---\r\n \r\n \/\/ Elementos da interface PicoShare\r\n const copyUrlBtn = document.getElementById('copy-url-btn');\r\n const copyPasswordBtn = document.getElementById('copy-password-btn');\r\n const openPicoShareBtn = document.getElementById('open-picoshare-btn');\r\n const picoshareUrl = document.getElementById('picoshare-url');\r\n const picosharePassword = document.getElementById('picoshare-password');\r\n const saveLinkBtn = document.getElementById('save-link-btn');\r\n const clearLinksBtn = document.getElementById('clear-links-btn');\r\n const newLinkInput = document.getElementById('new-link-input');\r\n const recentLinksContainer = document.getElementById('recent-links-container');\r\n \r\n \/\/ Fun\u00e7\u00e3o para copiar texto para o clipboard\r\n const copyToClipboard = async (text, button, originalText) => {\r\n try {\r\n await navigator.clipboard.writeText(text);\r\n const originalHtml = button.innerHTML;\r\n button.innerHTML = '<i class=\"fas fa-check\"><\/i>';\r\n button.classList.remove('bg-gray-500', 'hover:bg-gray-600');\r\n button.classList.add('bg-green-500', 'hover:bg-green-600');\r\n \r\n setTimeout(() => {\r\n button.innerHTML = originalHtml;\r\n button.classList.remove('bg-green-500', 'hover:bg-green-600');\r\n button.classList.add('bg-gray-500', 'hover:bg-gray-600');\r\n }, 2000);\r\n } catch (err) {\r\n console.error('Erro ao copiar:', err);\r\n alert('Erro ao copiar para a \u00e1rea de transfer\u00eancia');\r\n }\r\n };\r\n \r\n \/\/ Event listeners para bot\u00f5es de copiar\r\n copyUrlBtn?.addEventListener('click', () => {\r\n copyToClipboard(picoshareUrl.value, copyUrlBtn, 'Copiar URL');\r\n });\r\n \r\n copyPasswordBtn?.addEventListener('click', () => {\r\n copyToClipboard(picosharePassword.value, copyPasswordBtn, 'Copiar Senha');\r\n });\r\n \r\n \/\/ Abrir PicoShare em nova aba\r\n openPicoShareBtn?.addEventListener('click', () => {\r\n window.open(picoshareUrl.value, '_blank');\r\n });\r\n \r\n \/\/ Gerenciamento de links recentes\r\n const STORAGE_KEY = 'picoshare_recent_links';\r\n \r\n \/\/ Carregar links salvos\r\n const loadRecentLinks = () => {\r\n try {\r\n const saved = localStorage.getItem(STORAGE_KEY);\r\n return saved ? JSON.parse(saved) : [];\r\n } catch (error) {\r\n console.error('Erro ao carregar links salvos:', error);\r\n return [];\r\n }\r\n };\r\n \r\n \/\/ Salvar links\r\n const saveRecentLinks = (links) => {\r\n try {\r\n localStorage.setItem(STORAGE_KEY, JSON.stringify(links));\r\n } catch (error) {\r\n console.error('Erro ao salvar links:', error);\r\n }\r\n };\r\n \r\n \/\/ Renderizar lista de links recentes\r\n const renderRecentLinks = () => {\r\n const links = loadRecentLinks();\r\n \r\n if (links.length === 0) {\r\n recentLinksContainer.innerHTML = '<p class=\"text-gray-500 text-sm\">Nenhum link salvo ainda. Use o bot\u00e3o \"Salvar Link\" para adicionar.<\/p>';\r\n return;\r\n }\r\n \r\n recentLinksContainer.innerHTML = links.map((link, index) => `\r\n <div class=\"flex items-center justify-between bg-white p-3 rounded border border-gray-200\">\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"text-sm font-medium text-gray-900 truncate\">${link.name || 'Link sem nome'}<\/div>\r\n <div class=\"text-xs text-gray-500 truncate\">${link.url}<\/div>\r\n <div class=\"text-xs text-gray-400\">${new Date(link.timestamp).toLocaleString('pt-BR')}<\/div>\r\n <\/div>\r\n <div class=\"flex items-center space-x-2 ml-3\">\r\n <button onclick=\"copyLinkToClipboard('${link.url}')\" class=\"px-2 py-1 bg-blue-500 text-white rounded text-xs hover:bg-blue-600\" title=\"Copiar link\">\r\n <i class=\"fas fa-copy\"><\/i>\r\n <\/button>\r\n <button onclick=\"openLink('${link.url}')\" class=\"px-2 py-1 bg-green-500 text-white rounded text-xs hover:bg-green-600\" title=\"Abrir link\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/button>\r\n <button onclick=\"removeLink(${index})\" class=\"px-2 py-1 bg-red-500 text-white rounded text-xs hover:bg-red-600\" title=\"Remover\">\r\n <i class=\"fas fa-trash\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n `).join('');\r\n };\r\n \r\n \/\/ Fun\u00e7\u00f5es globais para os bot\u00f5es inline\r\n window.copyLinkToClipboard = async (url) => {\r\n try {\r\n await navigator.clipboard.writeText(url);\r\n \/\/ Feedback visual\r\n const button = event.target.closest('button');\r\n const originalHtml = button.innerHTML;\r\n button.innerHTML = '<i class=\"fas fa-check\"><\/i>';\r\n button.classList.remove('bg-blue-500', 'hover:bg-blue-600');\r\n button.classList.add('bg-green-500', 'hover:bg-green-600');\r\n \r\n setTimeout(() => {\r\n button.innerHTML = originalHtml;\r\n button.classList.remove('bg-green-500', 'hover:bg-green-600');\r\n button.classList.add('bg-blue-500', 'hover:bg-blue-600');\r\n }, 1500);\r\n } catch (err) {\r\n alert('Erro ao copiar link');\r\n }\r\n };\r\n \r\n window.openLink = (url) => {\r\n window.open(url, '_blank');\r\n };\r\n \r\n window.removeLink = (index) => {\r\n const links = loadRecentLinks();\r\n links.splice(index, 1);\r\n saveRecentLinks(links);\r\n renderRecentLinks();\r\n };\r\n \r\n \/\/ Adicionar novo link\r\n saveLinkBtn?.addEventListener('click', () => {\r\n const url = newLinkInput.value.trim();\r\n \r\n if (!url) {\r\n alert('Por favor, insira um link v\u00e1lido');\r\n return;\r\n }\r\n \r\n if (!url.startsWith('http')) {\r\n alert('O link deve come\u00e7ar com http:\/\/ ou https:\/\/');\r\n return;\r\n }\r\n \r\n const links = loadRecentLinks();\r\n \r\n \/\/ Verifica se o link j\u00e1 existe\r\n if (links.some(link => link.url === url)) {\r\n alert('Este link j\u00e1 foi salvo');\r\n return;\r\n }\r\n \r\n \/\/ Adiciona o novo link no in\u00edcio da lista\r\n const newLink = {\r\n url: url,\r\n name: `Imagem ${links.length + 1}`,\r\n timestamp: new Date().toISOString()\r\n };\r\n \r\n links.unshift(newLink);\r\n \r\n \/\/ Mant\u00e9m apenas os \u00faltimos 10 links\r\n if (links.length > 10) {\r\n links.splice(10);\r\n }\r\n \r\n saveRecentLinks(links);\r\n renderRecentLinks();\r\n newLinkInput.value = '';\r\n \r\n \/\/ Feedback\r\n saveLinkBtn.innerHTML = '<i class=\"fas fa-check mr-1\"><\/i>Salvo!';\r\n saveLinkBtn.classList.remove('bg-green-600', 'hover:bg-green-700');\r\n saveLinkBtn.classList.add('bg-green-500');\r\n \r\n setTimeout(() => {\r\n saveLinkBtn.innerHTML = '<i class=\"fas fa-save mr-1\"><\/i>Salvar Link';\r\n saveLinkBtn.classList.remove('bg-green-500');\r\n saveLinkBtn.classList.add('bg-green-600', 'hover:bg-green-700');\r\n }, 2000);\r\n });\r\n \r\n \/\/ Limpar todos os links\r\n clearLinksBtn?.addEventListener('click', () => {\r\n if (confirm('Tem certeza que deseja remover todos os links salvos?')) {\r\n saveRecentLinks([]);\r\n renderRecentLinks();\r\n }\r\n });\r\n \r\n \/\/ Permitir adicionar link pressionando Enter\r\n newLinkInput?.addEventListener('keypress', (e) => {\r\n if (e.key === 'Enter') {\r\n saveLinkBtn.click();\r\n }\r\n });\r\n \r\n \/\/ Inicializar lista de links recentes\r\n if (recentLinksContainer) {\r\n renderRecentLinks();\r\n }\r\n\r\n \/\/ Init\r\n addProductEntry();\r\n renderProductPhotos(); \/\/ Inicializa a interface de fotos do produto\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\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>Painel de Controle de Retornos Painel de Controle de Retornos Gerencie, rastreie e analise os produtos retornados. Acesso Livre Status Registrar Todos Arquivados Mais Retornados Cat\u00e1logo PicoShare Registrar Novo Retorno C\u00f3digo de Retorno (NF-e, Pedido, etc.) Observa\u00e7\u00f5es (opcional) Fotos do Produto (opcional – at\u00e9 5 fotos) Adicionar Foto 0\/5 fotos Adicionar Produto Salvar Retorno 0 […]<\/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-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/retorno.envionacional.com.br\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/retorno.envionacional.com.br\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/retorno.envionacional.com.br\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/retorno.envionacional.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/retorno.envionacional.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":169,"href":"https:\/\/retorno.envionacional.com.br\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":198,"href":"https:\/\/retorno.envionacional.com.br\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/198"}],"wp:attachment":[{"href":"https:\/\/retorno.envionacional.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}