From fa269cabf1975acf1bbfd9e6a5e602dd0f302131 Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Thu, 25 Jun 2026 11:30:03 -0500
Subject: [PATCH] fix(websms): move code examples to JS to avoid Go template
 parsing error

html/template rejects escaped quotes in attribute values. Code examples
are now built in getCodeExample() and rendered via x-text on the <pre>.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 resources/views/websms_config.html | 119 ++++++++++++++++++++---------
 1 file changed, 81 insertions(+), 38 deletions(-)

diff --git a/resources/views/websms_config.html b/resources/views/websms_config.html
index 6359162..8010716 100644
--- a/resources/views/websms_config.html
+++ b/resources/views/websms_config.html
@@ -201,45 +201,12 @@
         </template>
       </div>
 
-      <!-- cURL -->
-      <div x-show="tab==='curl'" class="relative group">
+      <!-- Bloque de código único — el contenido lo genera JS -->
+      <div class="relative group">
         <div class="bg-slate-900 rounded-lg p-4">
-          <pre class="text-green-400 text-xs font-mono leading-relaxed whitespace-pre-wrap" x-text="`curl -X POST https://admin.u-site.app/api/sms/send \\\n  -H 'Authorization: Bearer ${secretKey || '{API_KEY}'}' \\\n  -H 'Content-Type: application/json' \\\n  -d '{\n    \"numero\": \"573001234567\",\n    \"mensaje\": \"Hola, este es tu código: 9821\"\n  }'`"></pre>
+          <pre class="text-green-400 text-xs font-mono leading-relaxed whitespace-pre-wrap" x-text="getCodeExample(tab)"></pre>
         </div>
-        <button type="button" @click="copy(`curl -X POST https://admin.u-site.app/api/sms/send -H 'Authorization: Bearer ${secretKey}' -H 'Content-Type: application/json' -d '{\"numero\":\"573001234567\",\"mensaje\":\"Hola\"}'`)"
-          class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-slate-700 hover:bg-slate-600 text-slate-300 rounded px-2 py-1 text-xs">
-          Copiar
-        </button>
-      </div>
-
-      <!-- JavaScript -->
-      <div x-show="tab==='js'" class="relative group">
-        <div class="bg-slate-900 rounded-lg p-4">
-          <pre class="text-green-400 text-xs font-mono leading-relaxed whitespace-pre-wrap" x-text="`const response = await fetch('https://admin.u-site.app/api/sms/send', {\n  method: 'POST',\n  headers: {\n    'Authorization': 'Bearer ${secretKey || '{API_KEY}'}',\n    'Content-Type': 'application/json',\n  },\n  body: JSON.stringify({\n    numero: '573001234567',\n    mensaje: 'Hola, este es tu código: 9821',\n  }),\n});\n\nconst data = await response.json();\nconsole.log(data); // { ok: true, id: '6a3d...' }`"></pre>
-        </div>
-        <button type="button" @click="copy(`fetch('https://admin.u-site.app/api/sms/send',{method:'POST',headers:{'Authorization':'Bearer ${secretKey}','Content-Type':'application/json'},body:JSON.stringify({numero:'573001234567',mensaje:'Hola'})})`)"
-          class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-slate-700 hover:bg-slate-600 text-slate-300 rounded px-2 py-1 text-xs">
-          Copiar
-        </button>
-      </div>
-
-      <!-- PHP -->
-      <div x-show="tab==='php'" class="relative group">
-        <div class="bg-slate-900 rounded-lg p-4">
-          <pre class="text-green-400 text-xs font-mono leading-relaxed whitespace-pre-wrap" x-text="`<?php\n$ch = curl_init('https://admin.u-site.app/api/sms/send');\ncurl_setopt_array($ch, [\n  CURLOPT_RETURNTRANSFER => true,\n  CURLOPT_POST           => true,\n  CURLOPT_HTTPHEADER     => [\n    'Authorization: Bearer ${secretKey || '{API_KEY}'}',\n    'Content-Type: application/json',\n  ],\n  CURLOPT_POSTFIELDS => json_encode([\n    'numero'  => '573001234567',\n    'mensaje' => 'Hola, este es tu código: 9821',\n  ]),\n]);\n$response = json_decode(curl_exec($ch), true);\ncurl_close($ch);\n// $response['ok'] === true`"></pre>
-        </div>
-        <button type="button" @click="copy(`<?php $ch=curl_init('https://admin.u-site.app/api/sms/send');curl_setopt_array($ch,[CURLOPT_RETURNTRANSFER=>true,CURLOPT_POST=>true,CURLOPT_HTTPHEADER=>['Authorization: Bearer ${secretKey}','Content-Type: application/json'],CURLOPT_POSTFIELDS=>json_encode(['numero'=>'573001234567','mensaje'=>'Hola'])]);echo curl_exec($ch);`)"
-          class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-slate-700 hover:bg-slate-600 text-slate-300 rounded px-2 py-1 text-xs">
-          Copiar
-        </button>
-      </div>
-
-      <!-- Python -->
-      <div x-show="tab==='python'" class="relative group">
-        <div class="bg-slate-900 rounded-lg p-4">
-          <pre class="text-green-400 text-xs font-mono leading-relaxed whitespace-pre-wrap" x-text="`import requests\n\nresponse = requests.post(\n    'https://admin.u-site.app/api/sms/send',\n    headers={\n        'Authorization': 'Bearer ${secretKey || '{API_KEY}'}',\n        'Content-Type': 'application/json',\n    },\n    json={\n        'numero':  '573001234567',\n        'mensaje': 'Hola, este es tu código: 9821',\n    },\n)\n\ndata = response.json()\nprint(data)  # {'ok': True, 'id': '6a3d...'}`"></pre>
-        </div>
-        <button type="button" @click="copy(`import requests\nresponse=requests.post('https://admin.u-site.app/api/sms/send',headers={'Authorization':'Bearer ${secretKey}','Content-Type':'application/json'},json={'numero':'573001234567','mensaje':'Hola'})\nprint(response.json())`)"
+        <button type="button" @click="copy(getCodeExample(tab))"
           class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-slate-700 hover:bg-slate-600 text-slate-300 rounded px-2 py-1 text-xs">
           Copiar
         </button>
@@ -334,7 +301,83 @@ function websmsApp() {
     },
 
     formatDate(d){ if(!d) return ''; return new Date(d).toLocaleDateString('es-CO',{day:'2-digit',month:'short',year:'numeric',hour:'2-digit',minute:'2-digit'}); },
-    copy(text){ navigator.clipboard.writeText(text); this.copied='URL copiada'; setTimeout(()=>this.copied='', 2000); },
+    copy(text){ navigator.clipboard.writeText(text); this.copied='Copiado'; setTimeout(()=>this.copied='', 2000); },
+
+    getCodeExample(tab) {
+      const key = this.secretKey || '{API_KEY}';
+      const url = 'https://admin.u-site.app/api/sms/send';
+      if (tab === 'curl') {
+        return [
+          "curl -X POST " + url + " \\",
+          "  -H 'Authorization: Bearer " + key + "' \\",
+          "  -H 'Content-Type: application/json' \\",
+          "  -d '{",
+          '    "numero":  "573001234567",',
+          '    "mensaje": "Hola, este es tu código: 9821"',
+          "  }'"
+        ].join('\n');
+      }
+      if (tab === 'js') {
+        return [
+          "const response = await fetch('" + url + "', {",
+          "  method: 'POST',",
+          "  headers: {",
+          "    'Authorization': 'Bearer " + key + "',",
+          "    'Content-Type': 'application/json',",
+          "  },",
+          "  body: JSON.stringify({",
+          "    numero:  '573001234567',",
+          "    mensaje: 'Hola, este es tu código: 9821',",
+          "  }),",
+          "});",
+          "",
+          "const data = await response.json();",
+          "console.log(data); // { ok: true, id: '6a3d...' }"
+        ].join('\n');
+      }
+      if (tab === 'php') {
+        return [
+          "<?php",
+          "$ch = curl_init('" + url + "');",
+          "curl_setopt_array($ch, [",
+          "  CURLOPT_RETURNTRANSFER => true,",
+          "  CURLOPT_POST           => true,",
+          "  CURLOPT_HTTPHEADER     => [",
+          "    'Authorization: Bearer " + key + "',",
+          "    'Content-Type: application/json',",
+          "  ],",
+          '  CURLOPT_POSTFIELDS => json_encode([',
+          "    'numero'  => '573001234567',",
+          "    'mensaje' => 'Hola, este es tu código: 9821',",
+          "  ]),",
+          "]);",
+          "$response = json_decode(curl_exec($ch), true);",
+          "curl_close($ch);",
+          "// $response['ok'] === true"
+        ].join('\n');
+      }
+      if (tab === 'python') {
+        return [
+          "import requests",
+          "",
+          "response = requests.post(",
+          "    '" + url + "',",
+          "    headers={",
+          "        'Authorization': 'Bearer " + key + "',",
+          "        'Content-Type': 'application/json',",
+          "    },",
+          "    json={",
+          "        'numero':  '573001234567',",
+          "        'mensaje': 'Hola, este es tu código: 9821',",
+          "    },",
+          ")",
+          "",
+          "data = response.json()",
+          "print(data)  # {'ok': True, 'id': '6a3d...'}"
+        ].join('\n');
+      }
+      return '';
+    },
   }
 }
 </script>