From 82abdf047a02ec6111ab0466bd9eb1e1b28735f4 Mon Sep 17 00:00:00 2001
From: FrankZamora <prime.leads.app@gmail.com>
Date: Thu, 27 Nov 2025 18:47:13 -0600
Subject: [PATCH] ui(theme-settings): split into two cards (CSS left, JS right)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CSS Personalizado card on left column (10 rows textarea)
- JavaScript Personalizado card on right column (Header + Footer)
- Improved visual organization with separate alerts per card

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../Ui/ThemeSettingsFormBuilder.php           | 80 ++++++++++++++-----
 1 file changed, 61 insertions(+), 19 deletions(-)

diff --git a/Admin/ThemeSettings/Infrastructure/Ui/ThemeSettingsFormBuilder.php b/Admin/ThemeSettings/Infrastructure/Ui/ThemeSettingsFormBuilder.php
index f468ff91..77472a73 100644
--- a/Admin/ThemeSettings/Infrastructure/Ui/ThemeSettingsFormBuilder.php
+++ b/Admin/ThemeSettings/Infrastructure/Ui/ThemeSettingsFormBuilder.php
@@ -29,9 +29,14 @@ final class ThemeSettingsFormBuilder
 
         $html .= '<div class="row g-3">';
 
-        // Columna unica - Custom Code
-        $html .= '<div class="col-lg-8 mx-auto">';
-        $html .= $this->buildCustomCodeGroup($componentId);
+        // Columna izquierda - CSS
+        $html .= '<div class="col-lg-6">';
+        $html .= $this->buildCssGroup($componentId);
+        $html .= '</div>';
+
+        // Columna derecha - JavaScript
+        $html .= '<div class="col-lg-6">';
+        $html .= $this->buildJsGroup($componentId);
         $html .= '</div>';
 
         $html .= '</div>';
@@ -63,27 +68,27 @@ final class ThemeSettingsFormBuilder
         return $html;
     }
 
-    private function buildCustomCodeGroup(string $componentId): string
+    private function buildCssGroup(string $componentId): string
     {
         $html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
         $html .= '    <div class="card-body">';
         $html .= '        <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
-        $html .= '            <i class="bi bi-code-slash me-2" style="color: #FF8600;"></i>';
-        $html .= '            Codigo Personalizado';
+        $html .= '            <i class="bi bi-filetype-css me-2" style="color: #FF8600;"></i>';
+        $html .= '            CSS Personalizado';
         $html .= '        </h5>';
 
         $customCss = $this->renderer->getFieldValue($componentId, 'custom_code', 'custom_css', '');
-        $html .= $this->buildTextareaCode('themeSettingsCustomCss', 'CSS Personalizado', 'bi-filetype-css', $customCss, 'Se inyecta en wp_head. No incluir etiquetas &lt;style&gt;');
+        $html .= $this->buildTextareaCode(
+            'themeSettingsCustomCss',
+            'Estilos CSS',
+            $customCss,
+            'Se inyecta en wp_head. No incluir etiquetas &lt;style&gt;',
+            10
+        );
 
-        $customJsHeader = $this->renderer->getFieldValue($componentId, 'custom_code', 'custom_js_header', '');
-        $html .= $this->buildTextareaCode('themeSettingsCustomJsHeader', 'JavaScript en Header', 'bi-filetype-js', $customJsHeader, 'Se inyecta en wp_head. No incluir etiquetas &lt;script&gt;');
-
-        $customJsFooter = $this->renderer->getFieldValue($componentId, 'custom_code', 'custom_js_footer', '');
-        $html .= $this->buildTextareaCode('themeSettingsCustomJsFooter', 'JavaScript en Footer', 'bi-filetype-js', $customJsFooter, 'Se inyecta en wp_footer. No incluir etiquetas &lt;script&gt;');
-
-        $html .= '        <div class="alert alert-danger small mb-0 mt-2">';
-        $html .= '            <i class="bi bi-exclamation-octagon me-1"></i>';
-        $html .= '            <strong>Advertencia:</strong> El codigo personalizado puede afectar el rendimiento y seguridad del sitio.';
+        $html .= '        <div class="alert alert-info small mb-0 mt-2">';
+        $html .= '            <i class="bi bi-info-circle me-1"></i>';
+        $html .= '            El CSS se carga despues de los estilos del tema.';
         $html .= '        </div>';
 
         $html .= '    </div>';
@@ -92,16 +97,53 @@ final class ThemeSettingsFormBuilder
         return $html;
     }
 
-    private function buildTextareaCode(string $id, string $label, string $icon, mixed $value, string $helpText = ''): string
+    private function buildJsGroup(string $componentId): string
+    {
+        $html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
+        $html .= '    <div class="card-body">';
+        $html .= '        <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
+        $html .= '            <i class="bi bi-filetype-js me-2" style="color: #FF8600;"></i>';
+        $html .= '            JavaScript Personalizado';
+        $html .= '        </h5>';
+
+        $customJsHeader = $this->renderer->getFieldValue($componentId, 'custom_code', 'custom_js_header', '');
+        $html .= $this->buildTextareaCode(
+            'themeSettingsCustomJsHeader',
+            'JavaScript en Header',
+            $customJsHeader,
+            'Se inyecta en wp_head. No incluir etiquetas &lt;script&gt;',
+            5
+        );
+
+        $customJsFooter = $this->renderer->getFieldValue($componentId, 'custom_code', 'custom_js_footer', '');
+        $html .= $this->buildTextareaCode(
+            'themeSettingsCustomJsFooter',
+            'JavaScript en Footer',
+            $customJsFooter,
+            'Se inyecta en wp_footer. No incluir etiquetas &lt;script&gt;',
+            5
+        );
+
+        $html .= '        <div class="alert alert-danger small mb-0 mt-2">';
+        $html .= '            <i class="bi bi-exclamation-octagon me-1"></i>';
+        $html .= '            <strong>Advertencia:</strong> El codigo JS puede afectar el rendimiento y seguridad del sitio.';
+        $html .= '        </div>';
+
+        $html .= '    </div>';
+        $html .= '</div>';
+
+        return $html;
+    }
+
+    private function buildTextareaCode(string $id, string $label, mixed $value, string $helpText = '', int $rows = 4): string
     {
         $value = $this->normalizeStringValue($value);
 
         $html = '        <div class="mb-3">';
         $html .= '            <label for="' . esc_attr($id) . '" class="form-label small mb-1 fw-semibold">';
-        $html .= '                <i class="bi ' . esc_attr($icon) . ' me-1" style="color: #FF8600;"></i>';
         $html .= '                ' . esc_html($label);
         $html .= '            </label>';
-        $html .= '            <textarea class="form-control form-control-sm font-monospace" id="' . esc_attr($id) . '" rows="4" style="font-size: 0.85em;">' . esc_textarea($value) . '</textarea>';
+        $html .= '            <textarea class="form-control form-control-sm font-monospace" id="' . esc_attr($id) . '" rows="' . $rows . '" style="font-size: 0.85em;">' . esc_textarea($value) . '</textarea>';
         if (!empty($helpText)) {
             $html .= '            <div class="form-text small">' . $helpText . '</div>';
         }