backup: estado antes de limpieza de defaults

admin/assets/js/admin-app.js

@@ -0,0 +1,430 @@
+/**
+ * Admin Panel Application
+ *
+ * Gestión de configuraciones de componentes del tema
+ *
+ * @package Apus_Theme
+ * @since 2.0.0
+ */
+
+const AdminPanel = {
+	/**
+	 * Estado de la aplicación
+	 */
+	STATE: {
+		settings: {},
+		hasChanges: false,
+		isLoading: false
+	},
+
+	/**
+	 * Inicializar aplicación
+	 */
+	init() {
+		this.bindEvents();
+		this.loadSettings();
+	},
+
+	/**
+	 * Vincular eventos
+	 */
+	bindEvents() {
+		// Botón guardar
+		document.getElementById('saveSettings').addEventListener('click', () => {
+			this.saveSettings();
+		});
+
+		// Detectar cambios en formularios
+		const enableSaveButton = () => {
+			this.STATE.hasChanges = true;
+			document.getElementById('saveSettings').disabled = false;
+		};
+
+		document.querySelectorAll('input, select, textarea').forEach(input => {
+			// Evento 'input' se dispara mientras se escribe (tiempo real)
+			input.addEventListener('input', enableSaveButton);
+			// Evento 'change' se dispara cuando pierde foco (para select y checkboxes)
+			input.addEventListener('change', enableSaveButton);
+		});
+
+		// Tabs
+		const tabs = document.querySelectorAll('.nav-tabs .nav-link');
+		tabs.forEach(tab => {
+			tab.addEventListener('click', (e) => {
+				e.preventDefault();
+				this.switchTab(tab);
+			});
+		});
+
+		// Contador de caracteres
+		this.setupCharacterCounter();
+
+		// Vista previa en tiempo real
+		this.setupLivePreview();
+	},
+
+	/**
+	 * Configurar contador de caracteres para textarea
+	 */
+	setupCharacterCounter() {
+		const messageTextarea = document.getElementById('topBarMessageText');
+		if (!messageTextarea) return;
+
+		messageTextarea.addEventListener('input', () => {
+			const count = messageTextarea.value.length;
+			const maxLength = 250;
+			const percentage = (count / maxLength) * 100;
+
+			const counter = document.getElementById('topBarMessageTextCount');
+			const progress = document.getElementById('topBarMessageTextProgress');
+
+			if (counter) {
+				counter.textContent = count;
+
+				// Cambiar color según proximidad al límite
+				counter.classList.remove('text-danger', 'text-warning', 'text-muted');
+
+				if (count > 230) {
+					counter.classList.add('text-danger');
+				} else if (count > 200) {
+					counter.classList.add('text-warning');
+				} else {
+					counter.classList.add('text-muted');
+				}
+			}
+
+			// Actualizar progress bar
+			if (progress) {
+				progress.style.width = percentage + '%';
+				progress.setAttribute('aria-valuenow', count);
+
+				// Cambiar color del progress bar
+				progress.classList.remove('bg-orange-primary', 'bg-warning', 'bg-danger');
+				if (count > 230) {
+					progress.classList.add('bg-danger');
+				} else if (count > 200) {
+					progress.classList.add('bg-warning');
+				} else {
+					progress.classList.add('bg-orange-primary');
+				}
+			}
+		});
+
+		// Trigger inicial para mostrar count actual
+		messageTextarea.dispatchEvent(new Event('input'));
+	},
+
+	/**
+	 * Configurar vista previa en tiempo real
+	 */
+	setupLivePreview() {
+		const preview = document.getElementById('topBarPreview');
+		if (!preview) return;
+
+		// Campos que afectan la vista previa
+		const fields = {
+			iconClass: document.getElementById('topBarIconClass'),
+			showIcon: document.getElementById('topBarShowIcon'),
+			highlightText: document.getElementById('topBarHighlightText'),
+			messageText: document.getElementById('topBarMessageText'),
+			linkText: document.getElementById('topBarLinkText'),
+			showLink: document.getElementById('topBarShowLink'),
+			bgColor: document.getElementById('topBarBgColor'),
+			textColor: document.getElementById('topBarTextColor'),
+			highlightColor: document.getElementById('topBarHighlightColor'),
+			fontSize: document.getElementById('topBarFontSize')
+		};
+
+		// Función para actualizar la vista previa
+		const updatePreview = () => {
+			// Obtener valores
+			const iconClass = fields.iconClass.value || 'bi bi-megaphone-fill';
+			const showIcon = fields.showIcon.checked;
+			const highlightText = fields.highlightText.value;
+			const messageText = fields.messageText.value || 'Tu mensaje aquí...';
+			const linkText = fields.linkText.value || 'Ver más';
+			const showLink = fields.showLink.checked;
+			const bgColor = fields.bgColor.value || '#0E2337';
+			const textColor = fields.textColor.value || '#ffffff';
+			const highlightColor = fields.highlightColor.value || '#FF8600';
+
+			// Mapeo de tamaños de fuente
+			const fontSizeMap = {
+				'small': '0.8rem',
+				'normal': '0.9rem',
+				'large': '1rem'
+			};
+			const fontSize = fontSizeMap[fields.fontSize.value] || '0.9rem';
+
+			// Construir HTML de la vista previa
+			let html = '';
+
+			// Icono
+			if (showIcon && iconClass) {
+				html += `<i class="${iconClass}" style="font-size: 1.2rem; color: ${highlightColor};"></i>`;
+			}
+
+			// Texto destacado
+			if (highlightText) {
+				html += `<span style="font-weight: 700; color: ${highlightColor};">${highlightText}</span>`;
+			}
+
+			// Mensaje principal
+			html += `<span style="flex: 1; min-width: 300px; text-align: center;">${messageText}</span>`;
+
+			// Enlace
+			if (showLink && linkText) {
+				html += `<a href="#" style="color: ${textColor}; text-decoration: underline; white-space: nowrap; transition: color 0.3s;">${linkText}</a>`;
+			}
+
+			// Actualizar la vista previa
+			preview.innerHTML = html;
+			preview.style.backgroundColor = bgColor;
+			preview.style.color = textColor;
+			preview.style.fontSize = fontSize;
+		};
+
+		// Agregar listeners a todos los campos
+		Object.values(fields).forEach(field => {
+			if (field) {
+				field.addEventListener('input', updatePreview);
+				field.addEventListener('change', updatePreview);
+			}
+		});
+
+		// Actualización inicial
+		updatePreview();
+	},
+
+	/**
+	 * Cambiar tab
+	 */
+	switchTab(tab) {
+		// Remover active de todos
+		document.querySelectorAll('.nav-tabs .nav-link').forEach(t => {
+			t.classList.remove('active');
+		});
+		document.querySelectorAll('.tab-pane').forEach(pane => {
+			pane.classList.remove('show', 'active');
+		});
+
+		// Activar seleccionado
+		tab.classList.add('active');
+		const targetId = tab.getAttribute('data-bs-target').substring(1);
+		const targetPane = document.getElementById(targetId);
+		if (targetPane) {
+			targetPane.classList.add('show', 'active');
+		}
+	},
+
+	/**
+	 * Cargar configuraciones desde servidor
+	 */
+	async loadSettings() {
+		this.STATE.isLoading = true;
+		this.showSpinner(true);
+
+		try {
+			const response = await axios({
+				method: 'POST',
+				url: apusAdminData.ajaxUrl,
+				data: new URLSearchParams({
+					action: 'apus_get_settings',
+					nonce: apusAdminData.nonce
+				})
+			});
+
+			if (response.data.success) {
+				this.STATE.settings = response.data.data;
+				this.renderAllComponents();
+			} else {
+				this.showNotice('Error al cargar configuraciones', 'error');
+			}
+		} catch (error) {
+			console.error('Error loading settings:', error);
+			this.showNotice('Error de conexión', 'error');
+		} finally {
+			this.STATE.isLoading = false;
+			this.showSpinner(false);
+		}
+	},
+
+	/**
+	 * Guardar configuraciones al servidor
+	 */
+	async saveSettings() {
+		if (!this.STATE.hasChanges) {
+			this.showNotice('No hay cambios para guardar', 'info');
+			return;
+		}
+
+		this.showSpinner(true);
+
+		try {
+			const formData = this.collectFormData();
+
+			// Crear FormData para WordPress AJAX
+			const postData = new URLSearchParams();
+			postData.append('action', 'apus_save_settings');
+			postData.append('nonce', apusAdminData.nonce);
+
+			// Agregar components como JSON string
+			postData.append('components', JSON.stringify(formData.components));
+
+			const response = await axios({
+				method: 'POST',
+				url: apusAdminData.ajaxUrl,
+				headers: {
+					'Content-Type': 'application/x-www-form-urlencoded'
+				},
+				data: postData
+			});
+
+			if (response.data.success) {
+				this.STATE.hasChanges = false;
+				document.getElementById('saveSettings').disabled = true;
+				this.showNotice('Configuración guardada correctamente', 'success');
+			} else {
+				this.showNotice(response.data.data.message || 'Error al guardar', 'error');
+			}
+		} catch (error) {
+			console.error('Error saving settings:', error);
+			this.showNotice('Error de conexión', 'error');
+		} finally {
+			this.showSpinner(false);
+		}
+	},
+
+	/**
+	 * Recolectar datos del formulario
+	 * Cada componente agregará su sección aquí
+	 */
+	collectFormData() {
+		return {
+			components: {
+				top_bar: {
+					enabled: document.getElementById('topBarEnabled').checked,
+					show_on_mobile: document.getElementById('topBarShowOnMobile').checked,
+					show_on_desktop: document.getElementById('topBarShowOnDesktop').checked,
+					icon_class: document.getElementById('topBarIconClass').value.trim(),
+					show_icon: document.getElementById('topBarShowIcon').checked,
+					highlight_text: document.getElementById('topBarHighlightText').value.trim(),
+					message_text: document.getElementById('topBarMessageText').value.trim(),
+					link_text: document.getElementById('topBarLinkText').value.trim(),
+					link_url: document.getElementById('topBarLinkUrl').value.trim(),
+					link_target: document.getElementById('topBarLinkTarget').value,
+					show_link: document.getElementById('topBarShowLink').checked,
+					custom_styles: {
+						background_color: this.getColorValue('topBarBgColor', ''),
+						text_color: this.getColorValue('topBarTextColor', ''),
+						highlight_color: this.getColorValue('topBarHighlightColor', ''),
+						link_hover_color: this.getColorValue('topBarLinkHoverColor', ''),
+						font_size: document.getElementById('topBarFontSize').value
+					}
+				}
+				// Navbar - Pendiente
+				// Hero - Pendiente
+				// Footer - Pendiente
+			}
+		};
+	},
+
+	/**
+	 * Renderizar todos los componentes
+	 */
+	renderAllComponents() {
+		const components = this.STATE.settings.components || {};
+
+		// Top Bar
+		if (components.top_bar) {
+			this.renderTopBar(components.top_bar);
+		}
+		// Navbar - Pendiente
+		// Hero - Pendiente
+		// Footer - Pendiente
+	},
+
+	/**
+	 * Renderizar Top Bar
+	 */
+	renderTopBar(topBar) {
+		document.getElementById('topBarEnabled').checked = topBar.enabled !== undefined ? topBar.enabled : true;
+		document.getElementById('topBarShowOnMobile').checked = topBar.show_on_mobile !== undefined ? topBar.show_on_mobile : true;
+		document.getElementById('topBarShowOnDesktop').checked = topBar.show_on_desktop !== undefined ? topBar.show_on_desktop : true;
+		document.getElementById('topBarIconClass').value = topBar.icon_class || 'bi bi-megaphone-fill';
+		document.getElementById('topBarShowIcon').checked = topBar.show_icon !== undefined ? topBar.show_icon : true;
+		document.getElementById('topBarHighlightText').value = topBar.highlight_text || 'Nuevo:';
+		document.getElementById('topBarMessageText').value = topBar.message_text || 'Accede a más de 200,000 Análisis de Precios Unitarios actualizados para 2025.';
+		document.getElementById('topBarLinkText').value = topBar.link_text || 'Ver Catálogo';
+		document.getElementById('topBarLinkUrl').value = topBar.link_url || '/catalogo';
+		document.getElementById('topBarLinkTarget').value = topBar.link_target || '_self';
+		document.getElementById('topBarShowLink').checked = topBar.show_link !== undefined ? topBar.show_link : true;
+
+		// Estilos personalizados
+		if (topBar.custom_styles) {
+			if (topBar.custom_styles.background_color) {
+				document.getElementById('topBarBgColor').value = topBar.custom_styles.background_color;
+			}
+			if (topBar.custom_styles.text_color) {
+				document.getElementById('topBarTextColor').value = topBar.custom_styles.text_color;
+			}
+			if (topBar.custom_styles.highlight_color) {
+				document.getElementById('topBarHighlightColor').value = topBar.custom_styles.highlight_color;
+			}
+			if (topBar.custom_styles.link_hover_color) {
+				document.getElementById('topBarLinkHoverColor').value = topBar.custom_styles.link_hover_color;
+			}
+			document.getElementById('topBarFontSize').value = topBar.custom_styles.font_size || 'normal';
+		}
+
+		// Trigger contador de caracteres
+		const messageTextarea = document.getElementById('topBarMessageText');
+		if (messageTextarea) {
+			messageTextarea.dispatchEvent(new Event('input'));
+		}
+	},
+
+	/**
+	 * Utilidad: Obtener valor de color con fallback
+	 */
+	getColorValue(inputId, defaultValue) {
+		const input = document.getElementById(inputId);
+		const value = input ? input.value.trim() : '';
+		return value || defaultValue;
+	},
+
+	/**
+	 * Utilidad: Mostrar spinner
+	 */
+	showSpinner(show) {
+		const spinner = document.querySelector('.spinner');
+		if (spinner) {
+			spinner.style.display = show ? 'inline-block' : 'none';
+		}
+	},
+
+	/**
+	 * Utilidad: Mostrar notificación
+	 */
+	showNotice(message, type = 'info') {
+		// WordPress admin notices
+		const noticeDiv = document.createElement('div');
+		noticeDiv.className = `notice notice-${type} is-dismissible`;
+		noticeDiv.innerHTML = `<p>${message}</p>`;
+
+		const container = document.querySelector('.apus-admin-panel');
+		if (container) {
+			container.insertBefore(noticeDiv, container.firstChild);
+
+			// Auto-dismiss después de 5 segundos
+			setTimeout(() => {
+				noticeDiv.remove();
+			}, 5000);
+		}
+	}
+};
+
+// Inicializar cuando el DOM esté listo
+document.addEventListener('DOMContentLoaded', () => {
+	AdminPanel.init();
+});

admin/assets/js/component-navbar.js

@@ -0,0 +1,191 @@
+/**
+ * Navbar Component - JavaScript Controller
+ *
+ * @package Apus_Theme
+ * @since 2.0.0
+ */
+
+window.NavbarComponent = {
+	/**
+	 * Inicialización del componente
+	 */
+	init: function() {
+		console.log('Navbar component initialized');
+
+		// Actualizar valores hexadecimales de color pickers en tiempo real
+		this.initColorPickers();
+	},
+
+	/**
+	 * Inicializar event listeners para color pickers
+	 */
+	initColorPickers: function() {
+		const colorPickers = [
+			{ input: 'navbarBgColor', display: 'navbarBgColorValue' },
+			{ input: 'navbarTextColor', display: 'navbarTextColorValue' },
+			{ input: 'navbarLinkHoverColor', display: 'navbarLinkHoverColorValue' },
+			{ input: 'navbarLinkHoverBgColor', display: 'navbarLinkHoverBgColorValue' },
+			{ input: 'navbarDropdownBgColor', display: 'navbarDropdownBgColorValue' },
+			{ input: 'navbarDropdownItemColor', display: 'navbarDropdownItemColorValue' },
+			{ input: 'navbarDropdownItemHoverColor', display: 'navbarDropdownItemHoverColorValue' }
+		];
+
+		colorPickers.forEach(function(picker) {
+			const inputEl = document.getElementById(picker.input);
+			const displayEl = document.getElementById(picker.display);
+
+			if (inputEl && displayEl) {
+				// Actualizar cuando cambia el color
+				inputEl.addEventListener('input', function() {
+					displayEl.textContent = inputEl.value.toUpperCase();
+				});
+
+				// Inicializar valor al cargar
+				displayEl.textContent = inputEl.value.toUpperCase();
+			}
+		});
+	},
+
+	/**
+	 * Recolectar datos del formulario
+	 * @returns {Object} Configuración del navbar
+	 */
+	collect: function() {
+		return {
+			// Grupo 1: Activación y Visibilidad
+			enabled: document.getElementById('navbarEnabled').checked,
+			show_on_mobile: document.getElementById('navbarShowOnMobile').checked,
+			show_on_desktop: document.getElementById('navbarShowOnDesktop').checked,
+			position: document.getElementById('navbarPosition').value,
+			responsive_breakpoint: document.getElementById('navbarBreakpoint').value,
+
+			// Grupo 4: Efectos (booleans)
+			enable_box_shadow: document.getElementById('navbarEnableBoxShadow').checked,
+			enable_underline_effect: document.getElementById('navbarEnableUnderlineEffect').checked,
+			enable_hover_background: document.getElementById('navbarEnableHoverBackground').checked,
+
+			// Grupo 6: Let's Talk Button
+			lets_talk_button: {
+				enabled: document.getElementById('navbarLetsTalkEnabled').checked,
+				text: document.getElementById('navbarLetsTalkText').value.trim(),
+				icon_class: document.getElementById('navbarLetsTalkIconClass').value.trim(),
+				show_icon: document.getElementById('navbarLetsTalkShowIcon').checked,
+				position: document.getElementById('navbarLetsTalkPosition').value
+			},
+
+			// Grupo 7: Dropdown
+			dropdown: {
+				enable_hover_desktop: document.getElementById('navbarDropdownEnableHoverDesktop').checked,
+				max_height: parseInt(document.getElementById('navbarDropdownMaxHeight').value) || 70,
+				border_radius: parseInt(document.getElementById('navbarDropdownBorderRadius').value) || 8,
+				item_padding_vertical: parseFloat(document.getElementById('navbarDropdownItemPaddingVertical').value) || 0.5,
+				item_padding_horizontal: parseFloat(document.getElementById('navbarDropdownItemPaddingHorizontal').value) || 1.25
+			},
+
+			// Grupos 2, 3, 5: Custom Styles
+			custom_styles: {
+				// Grupo 2: Colores
+				background_color: document.getElementById('navbarBgColor').value || '#1e3a5f',
+				text_color: document.getElementById('navbarTextColor').value || '#ffffff',
+				link_hover_color: document.getElementById('navbarLinkHoverColor').value || '#FF8600',
+				link_hover_bg_color: document.getElementById('navbarLinkHoverBgColor').value || '#FF8600',
+				dropdown_bg_color: document.getElementById('navbarDropdownBgColor').value || '#ffffff',
+				dropdown_item_color: document.getElementById('navbarDropdownItemColor').value || '#4A5568',
+				dropdown_item_hover_color: document.getElementById('navbarDropdownItemHoverColor').value || '#FF8600',
+
+				// Grupo 3: Tipografía
+				font_size: document.getElementById('navbarFontSize').value,
+				font_weight: document.getElementById('navbarFontWeight').value,
+
+				// Grupo 4: Efectos
+				box_shadow_intensity: document.getElementById('navbarBoxShadowIntensity').value,
+				border_radius: parseInt(document.getElementById('navbarBorderRadius').value) || 4,
+
+				// Grupo 5: Spacing
+				padding_vertical: parseFloat(document.getElementById('navbarPaddingVertical').value) || 0.75,
+				link_padding_vertical: parseFloat(document.getElementById('navbarLinkPaddingVertical').value) || 0.5,
+				link_padding_horizontal: parseFloat(document.getElementById('navbarLinkPaddingHorizontal').value) || 0.65,
+
+				// Grupo 8: Avanzado
+				z_index: parseInt(document.getElementById('navbarZIndex').value) || 1030,
+				transition_speed: document.getElementById('navbarTransitionSpeed').value || 'normal'
+			}
+		};
+	},
+
+	/**
+	 * Renderizar configuración en el formulario
+	 * @param {Object} config - Configuración del navbar
+	 */
+	render: function(config) {
+		if (!config) {
+			console.warn('No navbar config provided');
+			return;
+		}
+
+		// Grupo 1: Activación y Visibilidad
+		document.getElementById('navbarEnabled').checked = config.enabled !== undefined ? config.enabled : true;
+		document.getElementById('navbarShowOnMobile').checked = config.show_on_mobile !== undefined ? config.show_on_mobile : true;
+		document.getElementById('navbarShowOnDesktop').checked = config.show_on_desktop !== undefined ? config.show_on_desktop : true;
+		document.getElementById('navbarPosition').value = config.position || 'sticky';
+		document.getElementById('navbarBreakpoint').value = config.responsive_breakpoint || 'lg';
+
+		// Grupo 2: Colores Personalizados
+		if (config.custom_styles) {
+			document.getElementById('navbarBgColor').value = config.custom_styles.background_color || '#1e3a5f';
+			document.getElementById('navbarTextColor').value = config.custom_styles.text_color || '#ffffff';
+			document.getElementById('navbarLinkHoverColor').value = config.custom_styles.link_hover_color || '#FF8600';
+			document.getElementById('navbarLinkHoverBgColor').value = config.custom_styles.link_hover_bg_color || '#FF8600';
+			document.getElementById('navbarDropdownBgColor').value = config.custom_styles.dropdown_bg_color || '#ffffff';
+			document.getElementById('navbarDropdownItemColor').value = config.custom_styles.dropdown_item_color || '#4A5568';
+			document.getElementById('navbarDropdownItemHoverColor').value = config.custom_styles.dropdown_item_hover_color || '#FF8600';
+		}
+
+		// Grupo 3: Tipografía
+		if (config.custom_styles) {
+			document.getElementById('navbarFontSize').value = config.custom_styles.font_size || 'normal';
+			document.getElementById('navbarFontWeight').value = config.custom_styles.font_weight || '500';
+		}
+
+		// Grupo 4: Efectos Visuales
+		document.getElementById('navbarEnableBoxShadow').checked = config.enable_box_shadow !== undefined ? config.enable_box_shadow : true;
+		document.getElementById('navbarEnableUnderlineEffect').checked = config.enable_underline_effect !== undefined ? config.enable_underline_effect : true;
+		document.getElementById('navbarEnableHoverBackground').checked = config.enable_hover_background !== undefined ? config.enable_hover_background : true;
+
+		if (config.custom_styles) {
+			document.getElementById('navbarBoxShadowIntensity').value = config.custom_styles.box_shadow_intensity || 'normal';
+			document.getElementById('navbarBorderRadius').value = config.custom_styles.border_radius !== undefined ? config.custom_styles.border_radius : 4;
+		}
+
+		// Grupo 5: Spacing
+		if (config.custom_styles) {
+			document.getElementById('navbarPaddingVertical').value = config.custom_styles.padding_vertical !== undefined ? config.custom_styles.padding_vertical : 0.75;
+			document.getElementById('navbarLinkPaddingVertical').value = config.custom_styles.link_padding_vertical !== undefined ? config.custom_styles.link_padding_vertical : 0.5;
+			document.getElementById('navbarLinkPaddingHorizontal').value = config.custom_styles.link_padding_horizontal !== undefined ? config.custom_styles.link_padding_horizontal : 0.65;
+		}
+
+		// Grupo 8: Avanzado
+		if (config.custom_styles) {
+			document.getElementById('navbarZIndex').value = config.custom_styles.z_index !== undefined ? config.custom_styles.z_index : 1030;
+			document.getElementById('navbarTransitionSpeed').value = config.custom_styles.transition_speed || 'normal';
+		}
+
+		// Grupo 6: Let's Talk Button
+		if (config.lets_talk_button) {
+			document.getElementById('navbarLetsTalkEnabled').checked = config.lets_talk_button.enabled !== undefined ? config.lets_talk_button.enabled : true;
+			document.getElementById('navbarLetsTalkText').value = config.lets_talk_button.text || "Let's Talk";
+			document.getElementById('navbarLetsTalkIconClass').value = config.lets_talk_button.icon_class || 'bi bi-lightning-charge-fill';
+			document.getElementById('navbarLetsTalkShowIcon').checked = config.lets_talk_button.show_icon !== undefined ? config.lets_talk_button.show_icon : true;
+			document.getElementById('navbarLetsTalkPosition').value = config.lets_talk_button.position || 'right';
+		}
+
+		// Grupo 7: Dropdown
+		if (config.dropdown) {
+			document.getElementById('navbarDropdownEnableHoverDesktop').checked = config.dropdown.enable_hover_desktop !== undefined ? config.dropdown.enable_hover_desktop : true;
+			document.getElementById('navbarDropdownMaxHeight').value = config.dropdown.max_height !== undefined ? config.dropdown.max_height : 70;
+			document.getElementById('navbarDropdownBorderRadius').value = config.dropdown.border_radius !== undefined ? config.dropdown.border_radius : 8;
+			document.getElementById('navbarDropdownItemPaddingVertical').value = config.dropdown.item_padding_vertical !== undefined ? config.dropdown.item_padding_vertical : 0.5;
+			document.getElementById('navbarDropdownItemPaddingHorizontal').value = config.dropdown.item_padding_horizontal !== undefined ? config.dropdown.item_padding_horizontal : 1.25;
+		}
+	}
+};

admin/assets/js/theme-options.js

@@ -0,0 +1,440 @@
+/**
+ * Theme Options Admin JavaScript
+ *
+ * @package Apus_Theme
+ * @since 1.0.0
+ */
+
+(function($) {
+    'use strict';
+
+    var ApusThemeOptions = {
+
+        /**
+         * Initialize
+         */
+        init: function() {
+            this.tabs();
+            this.imageUpload();
+            this.resetOptions();
+            this.exportOptions();
+            this.importOptions();
+            this.formValidation();
+            this.conditionalFields();
+        },
+
+        /**
+         * Tab Navigation
+         */
+        tabs: function() {
+            // Tab click handler
+            $('.apus-tabs-nav a').on('click', function(e) {
+                e.preventDefault();
+
+                var tabId = $(this).attr('href');
+
+                // Update active states
+                $('.apus-tabs-nav li').removeClass('active');
+                $(this).parent().addClass('active');
+
+                // Show/hide tab content
+                $('.apus-tab-pane').removeClass('active');
+                $(tabId).addClass('active');
+
+                // Update URL hash without scrolling
+                if (history.pushState) {
+                    history.pushState(null, null, tabId);
+                } else {
+                    window.location.hash = tabId;
+                }
+            });
+
+            // Load tab from URL hash on page load
+            if (window.location.hash) {
+                var hash = window.location.hash;
+                if ($(hash).length) {
+                    $('.apus-tabs-nav a[href="' + hash + '"]').trigger('click');
+                }
+            }
+
+            // Handle browser back/forward buttons
+            $(window).on('hashchange', function() {
+                if (window.location.hash) {
+                    $('.apus-tabs-nav a[href="' + window.location.hash + '"]').trigger('click');
+                }
+            });
+        },
+
+        /**
+         * Image Upload
+         */
+        imageUpload: function() {
+            var self = this;
+            var mediaUploader;
+
+            // Upload button click
+            $(document).on('click', '.apus-upload-image', function(e) {
+                e.preventDefault();
+
+                var button = $(this);
+                var container = button.closest('.apus-image-upload');
+                var preview = container.find('.apus-image-preview');
+                var input = container.find('.apus-image-id');
+                var removeBtn = container.find('.apus-remove-image');
+
+                // If the media uploader already exists, reopen it
+                if (mediaUploader) {
+                    mediaUploader.open();
+                    return;
+                }
+
+                // Create new media uploader
+                mediaUploader = wp.media({
+                    title: apusAdminOptions.strings.selectImage,
+                    button: {
+                        text: apusAdminOptions.strings.useImage
+                    },
+                    multiple: false
+                });
+
+                // When an image is selected
+                mediaUploader.on('select', function() {
+                    var attachment = mediaUploader.state().get('selection').first().toJSON();
+
+                    // Set image ID
+                    input.val(attachment.id);
+
+                    // Show preview
+                    var imgUrl = attachment.sizes && attachment.sizes.medium ?
+                                 attachment.sizes.medium.url : attachment.url;
+                    preview.html('<img src="' + imgUrl + '" class="apus-preview-image" />');
+
+                    // Show remove button
+                    removeBtn.show();
+                });
+
+                // Open the uploader
+                mediaUploader.open();
+            });
+
+            // Remove button click
+            $(document).on('click', '.apus-remove-image', function(e) {
+                e.preventDefault();
+
+                var button = $(this);
+                var container = button.closest('.apus-image-upload');
+                var preview = container.find('.apus-image-preview');
+                var input = container.find('.apus-image-id');
+
+                // Clear values
+                input.val('');
+                preview.empty();
+                button.hide();
+            });
+        },
+
+        /**
+         * Reset Options
+         */
+        resetOptions: function() {
+            $('#apus-reset-options').on('click', function(e) {
+                e.preventDefault();
+
+                if (!confirm(apusAdminOptions.strings.confirmReset)) {
+                    return;
+                }
+
+                var button = $(this);
+                button.prop('disabled', true).addClass('updating-message');
+
+                $.ajax({
+                    url: apusAdminOptions.ajaxUrl,
+                    type: 'POST',
+                    data: {
+                        action: 'apus_reset_options',
+                        nonce: apusAdminOptions.nonce
+                    },
+                    success: function(response) {
+                        if (response.success) {
+                            // Show success message
+                            ApusThemeOptions.showNotice('success', response.data.message);
+
+                            // Reload page after 1 second
+                            setTimeout(function() {
+                                window.location.reload();
+                            }, 1000);
+                        } else {
+                            ApusThemeOptions.showNotice('error', response.data.message);
+                            button.prop('disabled', false).removeClass('updating-message');
+                        }
+                    },
+                    error: function() {
+                        ApusThemeOptions.showNotice('error', apusAdminOptions.strings.error);
+                        button.prop('disabled', false).removeClass('updating-message');
+                    }
+                });
+            });
+        },
+
+        /**
+         * Export Options
+         */
+        exportOptions: function() {
+            $('#apus-export-options').on('click', function(e) {
+                e.preventDefault();
+
+                var button = $(this);
+                button.prop('disabled', true).addClass('updating-message');
+
+                $.ajax({
+                    url: apusAdminOptions.ajaxUrl,
+                    type: 'POST',
+                    data: {
+                        action: 'apus_export_options',
+                        nonce: apusAdminOptions.nonce
+                    },
+                    success: function(response) {
+                        if (response.success) {
+                            // Create download link
+                            var blob = new Blob([response.data.data], { type: 'application/json' });
+                            var url = window.URL.createObjectURL(blob);
+                            var a = document.createElement('a');
+                            a.href = url;
+                            a.download = response.data.filename;
+                            document.body.appendChild(a);
+                            a.click();
+                            window.URL.revokeObjectURL(url);
+                            document.body.removeChild(a);
+
+                            ApusThemeOptions.showNotice('success', 'Options exported successfully!');
+                        } else {
+                            ApusThemeOptions.showNotice('error', response.data.message);
+                        }
+                        button.prop('disabled', false).removeClass('updating-message');
+                    },
+                    error: function() {
+                        ApusThemeOptions.showNotice('error', apusAdminOptions.strings.error);
+                        button.prop('disabled', false).removeClass('updating-message');
+                    }
+                });
+            });
+        },
+
+        /**
+         * Import Options
+         */
+        importOptions: function() {
+            var modal = $('#apus-import-modal');
+            var importData = $('#apus-import-data');
+
+            // Show modal
+            $('#apus-import-options').on('click', function(e) {
+                e.preventDefault();
+                modal.show();
+            });
+
+            // Close modal
+            $('.apus-modal-close, #apus-import-cancel').on('click', function() {
+                modal.hide();
+                importData.val('');
+            });
+
+            // Close modal on outside click
+            $(window).on('click', function(e) {
+                if ($(e.target).is(modal)) {
+                    modal.hide();
+                    importData.val('');
+                }
+            });
+
+            // Submit import
+            $('#apus-import-submit').on('click', function(e) {
+                e.preventDefault();
+
+                var data = importData.val().trim();
+
+                if (!data) {
+                    alert('Please paste your import data.');
+                    return;
+                }
+
+                var button = $(this);
+                button.prop('disabled', true).addClass('updating-message');
+
+                $.ajax({
+                    url: apusAdminOptions.ajaxUrl,
+                    type: 'POST',
+                    data: {
+                        action: 'apus_import_options',
+                        nonce: apusAdminOptions.nonce,
+                        import_data: data
+                    },
+                    success: function(response) {
+                        if (response.success) {
+                            ApusThemeOptions.showNotice('success', response.data.message);
+                            modal.hide();
+                            importData.val('');
+
+                            // Reload page after 1 second
+                            setTimeout(function() {
+                                window.location.reload();
+                            }, 1000);
+                        } else {
+                            ApusThemeOptions.showNotice('error', response.data.message);
+                            button.prop('disabled', false).removeClass('updating-message');
+                        }
+                    },
+                    error: function() {
+                        ApusThemeOptions.showNotice('error', apusAdminOptions.strings.error);
+                        button.prop('disabled', false).removeClass('updating-message');
+                    }
+                });
+            });
+        },
+
+        /**
+         * Form Validation
+         */
+        formValidation: function() {
+            $('.apus-options-form').on('submit', function(e) {
+                var valid = true;
+                var firstError = null;
+
+                // Validate required fields
+                $(this).find('[required]').each(function() {
+                    if (!$(this).val()) {
+                        valid = false;
+                        $(this).addClass('error');
+
+                        if (!firstError) {
+                            firstError = $(this);
+                        }
+                    } else {
+                        $(this).removeClass('error');
+                    }
+                });
+
+                // Validate number fields
+                $(this).find('input[type="number"]').each(function() {
+                    var val = $(this).val();
+                    var min = $(this).attr('min');
+                    var max = $(this).attr('max');
+
+                    if (val && min && parseInt(val) < parseInt(min)) {
+                        valid = false;
+                        $(this).addClass('error');
+                        if (!firstError) {
+                            firstError = $(this);
+                        }
+                    }
+
+                    if (val && max && parseInt(val) > parseInt(max)) {
+                        valid = false;
+                        $(this).addClass('error');
+                        if (!firstError) {
+                            firstError = $(this);
+                        }
+                    }
+                });
+
+                // Validate URL fields
+                $(this).find('input[type="url"]').each(function() {
+                    var val = $(this).val();
+                    if (val && !ApusThemeOptions.isValidUrl(val)) {
+                        valid = false;
+                        $(this).addClass('error');
+                        if (!firstError) {
+                            firstError = $(this);
+                        }
+                    }
+                });
+
+                if (!valid) {
+                    e.preventDefault();
+
+                    if (firstError) {
+                        // Scroll to first error
+                        $('html, body').animate({
+                            scrollTop: firstError.offset().top - 100
+                        }, 500);
+                        firstError.focus();
+                    }
+
+                    ApusThemeOptions.showNotice('error', 'Please fix the errors in the form.');
+                    return false;
+                }
+
+                // Add saving animation
+                $(this).find('.submit .button-primary').addClass('updating-message');
+            });
+
+            // Remove error class on input
+            $('.apus-options-form input, .apus-options-form select, .apus-options-form textarea').on('change input', function() {
+                $(this).removeClass('error');
+            });
+        },
+
+        /**
+         * Conditional Fields
+         */
+        conditionalFields: function() {
+            // Enable/disable related posts options based on checkbox
+            $('#enable_related_posts').on('change', function() {
+                var checked = $(this).is(':checked');
+                var fields = $('#related_posts_count, #related_posts_taxonomy, #related_posts_title, #related_posts_columns');
+
+                fields.closest('tr').toggleClass('apus-field-dependency', !checked);
+                fields.prop('disabled', !checked);
+            }).trigger('change');
+
+            // Enable/disable breadcrumb separator based on breadcrumbs checkbox
+            $('#enable_breadcrumbs').on('change', function() {
+                var checked = $(this).is(':checked');
+                var field = $('#breadcrumb_separator');
+
+                field.closest('tr').toggleClass('apus-field-dependency', !checked);
+                field.prop('disabled', !checked);
+            }).trigger('change');
+        },
+
+        /**
+         * Show Notice
+         */
+        showNotice: function(type, message) {
+            var notice = $('<div class="notice notice-' + type + ' is-dismissible"><p>' + message + '</p></div>');
+
+            $('.apus-theme-options h1').after(notice);
+
+            // Auto-dismiss after 5 seconds
+            setTimeout(function() {
+                notice.fadeOut(function() {
+                    $(this).remove();
+                });
+            }, 5000);
+
+            // Scroll to top
+            $('html, body').animate({ scrollTop: 0 }, 300);
+        },
+
+        /**
+         * Validate URL
+         */
+        isValidUrl: function(url) {
+            try {
+                new URL(url);
+                return true;
+            } catch (e) {
+                return false;
+            }
+        }
+    };
+
+    // Initialize on document ready
+    $(document).ready(function() {
+        ApusThemeOptions.init();
+    });
+
+    // Make it globally accessible
+    window.ApusThemeOptions = ApusThemeOptions;
+
+})(jQuery);