From ad99aee11780aa85461ea89dfb40c75d149d3962 Mon Sep 17 00:00:00 2001
From: Jandl-hostacny <jakub.hostacny@jandl.sk>
Date: Thu, 8 Oct 2026 09:59:10 +0200
Subject: [PATCH] feat: moznost nahrat podklad cenovky aj ako PNG

---
 src/components/editor/BadgeEditorModal.tsx | 69 ++++++++++++++++------
 src/lib/badgeUtils.ts                      |  2 +-
 2 files changed, 51 insertions(+), 20 deletions(-)

diff --git a/src/components/editor/BadgeEditorModal.tsx b/src/components/editor/BadgeEditorModal.tsx
index 675096f..b120adf 100644
--- a/src/components/editor/BadgeEditorModal.tsx
+++ b/src/components/editor/BadgeEditorModal.tsx
@@ -280,24 +280,52 @@ export const BadgeEditorModal: React.FC<BadgeEditorModalProps> = ({
     setSelectedLayerId(newBadge.layersConfig[0].id);
   };
 
-  // Upload vlastného SVG súboru
-  const handleSvgUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+  // Upload vlastného SVG alebo PNG súboru ako podkladu
+  const handleBackgroundUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file || !activeBadge) return;
 
-    const reader = new FileReader();
-    reader.onload = (event) => {
-      const content = event.target?.result as string;
-      if (content.includes('<svg')) {
-        setActiveBadge({
-          ...activeBadge,
-          svgRaw: content
-        });
-      } else {
-        alert('Nahraný súbor nie je platný formát SVG.');
-      }
-    };
-    reader.readAsText(file);
+    if (file.type.includes('svg') || file.name.toLowerCase().endsWith('.svg')) {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        const content = event.target?.result as string;
+        if (content.includes('<svg')) {
+          setActiveBadge({
+            ...activeBadge,
+            svgRaw: content
+          });
+        } else {
+          alert('Nahraný súbor nie je platný formát SVG.');
+        }
+      };
+      reader.readAsText(file);
+    } else if (
+      file.type.includes('png') ||
+      file.type.includes('image/') ||
+      file.name.toLowerCase().endsWith('.png') ||
+      file.name.toLowerCase().endsWith('.jpg') ||
+      file.name.toLowerCase().endsWith('.jpeg') ||
+      file.name.toLowerCase().endsWith('.webp')
+    ) {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        const dataUrl = event.target?.result as string;
+        const img = new Image();
+        img.onload = () => {
+          const w = img.naturalWidth || 140;
+          const h = img.naturalHeight || 95;
+          const svgContent = `<svg width="${w}" height="${h}" viewBox="0 0 ${w} ${h}" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image href="${dataUrl}" xlink:href="${dataUrl}" width="${w}" height="${h}" preserveAspectRatio="xMidYMid meet"/></svg>`;
+          setActiveBadge({
+            ...activeBadge,
+            svgRaw: svgContent
+          });
+        };
+        img.src = dataUrl;
+      };
+      reader.readAsDataURL(file);
+    } else {
+      alert('Podporované sú len grafické súbory vo formáte SVG alebo PNG.');
+    }
   };
 
   const activeLayer =
@@ -834,18 +862,21 @@ export const BadgeEditorModal: React.FC<BadgeEditorModalProps> = ({
                   </div>
                 </div>
 
-                {/* Upload vlastného SVG podkladu */}
+                {/* Upload vlastného SVG alebo PNG podkladu */}
                 <div className="border border-dashed border-gray-300 rounded-2xl p-3 bg-gray-50/60">
                   <label className="block text-xs font-bold text-gray-800 mb-1 flex items-center gap-1.5">
                     <Upload className="w-3.5 h-3.5 text-[#e2001a]" />
-                    Nahrať vlastný tvar SVG (Podklad)
+                    Nahrať vlastný podklad cenovky (SVG alebo PNG)
                   </label>
                   <input
                     type="file"
-                    accept=".svg"
-                    onChange={handleSvgUpload}
+                    accept=".svg,.png,.jpg,.jpeg,.webp,image/svg+xml,image/png,image/jpeg,image/webp"
+                    onChange={handleBackgroundUpload}
                     className="text-xs text-gray-500 file:mr-2 file:py-1 file:px-2.5 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-gray-200 file:text-gray-700 hover:file:bg-gray-300 cursor-pointer w-full"
                   />
+                  <p className="text-[10px] text-gray-500 mt-1">
+                    Podporuje SVG vektorové tvary aj priehľadné PNG obrázky.
+                  </p>
                 </div>
 
                 {/* Rýchle pridanie vrstiev */}
diff --git a/src/lib/badgeUtils.ts b/src/lib/badgeUtils.ts
index 867ea7b..7fca900 100644
--- a/src/lib/badgeUtils.ts
+++ b/src/lib/badgeUtils.ts
@@ -110,7 +110,7 @@ export function renderCleanBadgeSvg(
     return `<text x="${layer.x}" y="${layer.y}" text-anchor="${anchor}" dominant-baseline="central" font-family="${fontFamily}" font-size="${fontSize}px" font-weight="${fontWeight}" fill="${fill}">${contentSvg}</text>`;
   }).join('\n    ');
 
-  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${vb}" width="${displayWidth}" height="${displayHeight}" style="display:block;max-width:100%;height:auto;">
+  return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="${vb}" width="${displayWidth}" height="${displayHeight}" style="display:block;max-width:100%;height:auto;">
     ${innerBg}
     ${textLayersSvg}
   </svg>`;