roi-theme/admin-panel/admin/pages/main.php

<?php
/**
 * Admin Panel - Main Page
 *
 * Interfaz de administración de componentes del tema
 *
 * @package Apus_Theme
 * @since 2.0.0
 */

if (!defined('ABSPATH')) {
	exit;
}
?>

<div class="wrap apus-admin-panel">
	<h1><?php echo esc_html(get_admin_page_title()); ?></h1>
	<p class="description">Configure los componentes del tema Apus</p>

	<!-- Navigation Tabs -->
	<ul class="nav nav-tabs" role="tablist">
		<li class="nav-item">
			<a class="nav-link active" data-bs-toggle="tab" data-bs-target="#topBarTab" href="#topBarTab" role="tab">
				<i class="bi bi-megaphone-fill me-2"></i>
				Top Bar
			</a>
		</li>
		<!-- Más tabs aquí: Navbar, Hero, Footer, etc. -->
	</ul>

	<!-- Tab Content -->
	<div class="tab-content mt-3">
		<!-- ============================= -->
		<!-- TAB: TOP BAR - VERSIÓN MEJORADA -->
		<!-- ============================= -->
		<div id="topBarTab" class="tab-pane fade show active" role="tabpanel">
			<!-- Header del Tab -->
			<div class="tab-header mb-4">
				<div class="d-flex align-items-center justify-content-between">
					<div>
						<h3 class="mb-1 text-navy-primary">
							<i class="bi bi-megaphone-fill me-2 text-orange-primary"></i>
							Configuración Top Bar
						</h3>
						<p class="text-neutral-600 mb-0">
							Personaliza la barra de anuncios superior de tu sitio
						</p>
					</div>
					<button type="button" class="btn btn-sm btn-outline-secondary" id="resetTopBarDefaults">
						<i class="bi bi-arrow-counterclockwise me-1"></i>
						Restaurar valores por defecto
					</button>
				</div>
			</div>

			<!-- Row para 2 cards por fila -->
			<div class="row">
				<!-- ============================= -->
				<!-- GRUPO 1: ACTIVACIÓN           -->
				<!-- ============================= -->
				<div class="col-md-6">
					<div class="form-section card shadow-sm border-0 mb-4 h-100">
						<div class="card-body">
							<h4 class="section-title">
						<span class="title-icon">
							<i class="bi bi-toggle-on"></i>
						</span>
						Activación y Visibilidad
					</h4>

					<!-- Enabled -->
					<div class="mb-4">
						<label class="form-label text-neutral-700 fw-medium mb-3">
							<i class="bi bi-power text-orange-primary me-1"></i>
							Estado del Componente
						</label>
						<div class="toggle-container">
							<div class="form-check form-switch form-switch-lg">
								<input class="form-check-input"
									   type="checkbox"
									   id="topBarEnabled"
									   role="switch"
									   checked>
								<label class="form-check-label" for="topBarEnabled">
									Activar Top Bar
								</label>
							</div>
							<small class="form-text text-neutral-700 d-block mt-2">
								Activa o desactiva el Top Bar en todo el sitio
							</small>
						</div>
					</div>

					<!-- Show on Mobile -->
					<div class="mb-4">
						<label class="form-label text-neutral-700 fw-medium mb-3">
							<i class="bi bi-phone text-orange-primary me-1"></i>
							Visibilidad Mobile
						</label>
						<div class="toggle-container">
							<div class="form-check form-switch form-switch-lg">
								<input class="form-check-input"
									   type="checkbox"
									   id="topBarShowOnMobile"
									   role="switch"
									   checked>
								<label class="form-check-label" for="topBarShowOnMobile">
									Mostrar en dispositivos móviles
								</label>
							</div>
							<small class="form-text text-neutral-700 d-block mt-2">
								Pantallas menores a 768px
							</small>
						</div>
					</div>

					<!-- Show on Desktop -->
					<div class="mb-0">
						<label class="form-label text-neutral-700 fw-medium mb-3">
							<i class="bi bi-display text-orange-primary me-1"></i>
							Visibilidad Desktop
						</label>
						<div class="toggle-container">
							<div class="form-check form-switch form-switch-lg">
								<input class="form-check-input"
									   type="checkbox"
									   id="topBarShowOnDesktop"
									   role="switch"
									   checked>
								<label class="form-check-label" for="topBarShowOnDesktop">
									Mostrar en desktop
								</label>
							</div>
							<small class="form-text text-neutral-700 d-block mt-2">
								Pantallas de 768px en adelante
							</small>
						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<!-- ============================= -->
				<!-- GRUPO 2: CONTENIDO            -->
				<!-- ============================= -->
				<div class="col-md-6">
					<div class="form-section card shadow-sm border-0 mb-4 h-100">
						<div class="card-body">
							<h4 class="section-title">
						<span class="title-icon">
							<i class="bi bi-card-text"></i>
						</span>
						Contenido y Mensajes
					</h4>

					<!-- Icono -->
					<div class="row g-4 mb-4">
						<div class="col-md-8">
							<div class="form-group">
								<label for="topBarIconClass" class="form-label text-neutral-700 fw-medium">
									<i class="bi bi-emoji-smile text-orange-primary me-1"></i>
									Clase del icono
									<span class="badge bg-neutral-100 text-neutral-600 ms-2">Bootstrap Icons</span>
								</label>
								<div class="input-group input-group-merge">
									<span class="input-group-text bg-neutral-50 border-end-0">
										<i class="bi bi-code-slash text-neutral-600"></i>
									</span>
									<input type="text"
										   id="topBarIconClass"
										   class="form-control border-start-0 ps-0"
										   placeholder="Ej: bi bi-megaphone-fill"
										   maxlength="50"
										   value="bi bi-megaphone-fill">
								</div>
								<small class="form-text text-neutral-700 d-flex align-items-center mt-2">
									<i class="bi bi-info-circle me-1"></i>
									Ver iconos disponibles:
									<a href="https://icons.getbootstrap.com/" target="_blank" class="ms-1 text-orange-primary">
										Bootstrap Icons <i class="bi bi-box-arrow-up-right ms-1"></i>
									</a>
								</small>
							</div>
						</div>

						<div class="col-md-4">
							<div class="form-group">
								<label class="form-label text-neutral-700 fw-medium mb-3">
									Opciones de Icono
								</label>
								<div class="toggle-container">
									<div class="form-check form-switch form-switch-lg">
										<input class="form-check-input"
											   type="checkbox"
											   id="topBarShowIcon"
											   role="switch"
											   checked>
										<label class="form-check-label" for="topBarShowIcon">
											Mostrar icono
										</label>
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- Texto destacado -->
					<div class="row g-4 mb-4">
						<div class="col-md-12">
							<div class="form-group">
								<label for="topBarHighlightText" class="form-label text-neutral-700 fw-medium">
									<i class="bi bi-bookmark-star text-orange-primary me-1"></i>
									Texto destacado
									<span class="badge bg-warning-subtle text-warning-emphasis ms-2">Opcional</span>
								</label>
								<input type="text"
									   id="topBarHighlightText"
									   class="form-control form-control-lg"
									   placeholder='Ej: "Nuevo:" o "Promoción:"'
									   maxlength="30"
									   value="Nuevo:">
								<small class="form-text text-neutral-700 d-flex align-items-center mt-2">
									<i class="bi bi-lightbulb text-warning me-1"></i>
									Se muestra en <strong class="mx-1">negritas</strong> y con <span class="text-orange-primary fw-bold mx-1">color destacado</span>. Dejar vacío para omitir.
								</small>
							</div>
						</div>
					</div>

					<!-- Mensaje principal -->
					<div class="row g-4 mb-4">
						<div class="col-md-12">
							<div class="form-group">
								<label for="topBarMessageText" class="form-label text-neutral-700 fw-medium">
									<i class="bi bi-chat-left-text text-orange-primary me-1"></i>
									Mensaje principal
									<span class="badge bg-danger-subtle text-danger-emphasis ms-2">Requerido</span>
								</label>
								<textarea id="topBarMessageText"
										  class="form-control form-control-lg"
										  rows="3"
										  maxlength="250"
										  placeholder="Ej: Accede a más de 200,000 Análisis de Precios Unitarios actualizados para 2025."
										  required>Accede a más de 200,000 Análisis de Precios Unitarios actualizados para 2025.</textarea>
								<div class="d-flex justify-content-between align-items-center mt-2">
									<small class="form-text text-neutral-700">
										<i class="bi bi-info-circle me-1"></i>
										Mensaje que se mostrará en la barra superior
									</small>
									<small class="form-text">
										<span id="topBarMessageTextCount" class="fw-bold">75</span><span class="text-neutral-600">/250 caracteres</span>
									</small>
								</div>
								<div class="progress mt-2" style="height: 4px;">
									<div id="topBarMessageTextProgress"
										 class="progress-bar bg-orange-primary"
										 role="progressbar"
										 style="width: 30%"
										 aria-valuenow="75"
										 aria-valuemin="0"
										 aria-valuemax="250"></div>
								</div>
							</div>
						</div>
					</div>

					<!-- Enlace -->
					<div class="row g-4">
						<div class="col-md-5">
							<div class="form-group">
								<label for="topBarLinkText" class="form-label text-neutral-700 fw-medium">
									<i class="bi bi-link-45deg text-orange-primary me-1"></i>
									Texto del enlace
								</label>
								<input type="text"
									   id="topBarLinkText"
									   class="form-control"
									   placeholder="Ej: Ver Catálogo"
									   maxlength="50"
									   value="Ver Catálogo →">
							</div>
						</div>

						<div class="col-md-5">
							<div class="form-group">
								<label for="topBarLinkUrl" class="form-label text-neutral-700 fw-medium">
									<i class="bi bi-globe text-orange-primary me-1"></i>
									URL del enlace
								</label>
								<input type="url"
									   id="topBarLinkUrl"
									   class="form-control"
									   placeholder="Ej: /catalogo o https://ejemplo.com"
									   value="/catalogo">
								<small class="form-text text-neutral-700 mt-2 d-block">
									URLs relativas (/page) o absolutas (https://...)
								</small>
							</div>
						</div>

						<div class="col-md-2">
							<div class="form-group">
								<label for="topBarLinkTarget" class="form-label text-neutral-700 fw-medium">
									<i class="bi bi-window text-orange-primary me-1"></i>
									Target
								</label>
								<select id="topBarLinkTarget" class="form-select">
									<option value="_self" selected>Misma ventana</option>
									<option value="_blank">Nueva ventana</option>
								</select>
							</div>
						</div>

						<div class="col-md-12">
							<div class="form-group">
								<div class="toggle-container">
									<div class="form-check form-switch form-switch-lg">
										<input class="form-check-input"
											   type="checkbox"
											   id="topBarShowLink"
											   role="switch"
											   checked>
										<label class="form-check-label" for="topBarShowLink">
											<strong>Mostrar enlace</strong>
											<span class="text-neutral-700 ms-2">- Activa para incluir un botón de acción</span>
										</label>
									</div>
								</div>
							</div>
						</div>
						</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Row para segunda fila de cards -->
			<div class="row">
				<!-- ============================= -->
				<!-- GRUPO 3: ESTILOS AVANZADOS    -->
				<!-- ============================= -->
				<div class="col-md-6">
					<div class="form-section card shadow-sm border-0 mb-4 h-100">
						<div class="card-body">
							<h4 class="section-title">
						<span class="title-icon">
							<i class="bi bi-palette"></i>
						</span>
						Estilos Personalizados
					</h4>

					<!-- Colores (4 en una fila) -->
					<div class="row g-4 mb-4">
						<div class="col-md-3">
							<div class="form-group">
								<label for="topBarBgColor" class="form-label text-neutral-700 fw-medium mb-3">
									<i class="bi bi-paint-bucket text-orange-primary me-1"></i>
									Color de fondo
								</label>
								<div class="color-picker-wrapper">
									<input type="color"
										   id="topBarBgColor"
										   class="form-control form-control-color"
										   value="#0E2337"
										   title="Seleccionar color de fondo">
									<div class="color-preview-text mt-2">
										<code class="text-neutral-600 small">#0E2337</code>
										<small class="text-neutral-700 d-block">Navy Dark (Default)</small>
									</div>
								</div>
							</div>
						</div>

						<div class="col-md-3">
							<div class="form-group">
								<label for="topBarTextColor" class="form-label text-neutral-700 fw-medium mb-3">
									<i class="bi bi-fonts text-orange-primary me-1"></i>
									Color de texto
								</label>
								<div class="color-picker-wrapper">
									<input type="color"
										   id="topBarTextColor"
										   class="form-control form-control-color"
										   value="#ffffff"
										   title="Seleccionar color de texto">
									<div class="color-preview-text mt-2">
										<code class="text-neutral-600 small">#ffffff</code>
										<small class="text-neutral-700 d-block">White (Default)</small>
									</div>
								</div>
							</div>
						</div>

						<div class="col-md-3">
							<div class="form-group">
								<label for="topBarHighlightColor" class="form-label text-neutral-700 fw-medium mb-3">
									<i class="bi bi-star text-orange-primary me-1"></i>
									Color destacado
								</label>
								<div class="color-picker-wrapper">
									<input type="color"
										   id="topBarHighlightColor"
										   class="form-control form-control-color"
										   value="#FF8600"
										   title="Seleccionar color destacado">
									<div class="color-preview-text mt-2">
										<code class="text-neutral-600 small">#FF8600</code>
										<small class="text-neutral-700 d-block">Orange Primary (Default)</small>
									</div>
								</div>
							</div>
						</div>

						<div class="col-md-3">
							<div class="form-group">
								<label for="topBarLinkHoverColor" class="form-label text-neutral-700 fw-medium mb-3">
									<i class="bi bi-cursor text-orange-primary me-1"></i>
									Hover enlace
								</label>
								<div class="color-picker-wrapper">
									<input type="color"
										   id="topBarLinkHoverColor"
										   class="form-control form-control-color"
										   value="#FF6B35"
										   title="Seleccionar color hover del enlace">
									<div class="color-preview-text mt-2">
										<code class="text-neutral-600 small">#FF6B35</code>
										<small class="text-neutral-700 d-block">Orange Hover (Default)</small>
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- Tamaño de fuente -->
					<div class="row g-4">
						<div class="col-md-4">
							<div class="form-group">
								<label for="topBarFontSize" class="form-label text-neutral-700 fw-medium">
									<i class="bi bi-type text-orange-primary me-1"></i>
									Tamaño de fuente
								</label>
								<select id="topBarFontSize" class="form-select form-select-lg">
									<option value="small">
										Pequeño - 0.8rem (ideal para mucho texto)
									</option>
									<option value="normal" selected>
										Normal - 0.9rem (recomendado)
									</option>
									<option value="large">
										Grande - 1rem (máxima legibilidad)
									</option>
								</select>
								<small class="form-text text-neutral-700 d-block mt-2">
									<i class="bi bi-info-circle me-1"></i>
									El tamaño afecta la altura total de la barra
								</small>
							</div>
						</div>

						<div class="col-md-8">
							<div class="alert alert-info-custom d-flex align-items-start" role="alert">
								<i class="bi bi-lightbulb-fill text-orange-primary me-3 fs-4"></i>
								<div>
									<h6 class="alert-heading mb-1">Tip de Diseño</h6>
									<p class="mb-0 small">
										Para mejor legibilidad, usa <strong>fondos oscuros</strong> (Navy Dark) con <strong>texto claro</strong> (White)
										y <strong>acentos naranjas</strong> para las acciones importantes.
									</p>
								</div>
							</div>
							</div>
						</div>
					</div>
				</div>

				<!-- ============================= -->
				<!-- VISTA PREVIA INTERACTIVA      -->
				<!-- ============================= -->
				<div class="col-md-6">
					<div class="form-section card shadow-sm border-0 mb-4 bg-neutral-50 h-100">
						<div class="card-body">
					<h4 class="section-title">
						<span class="title-icon">
							<i class="bi bi-eye"></i>
						</span>
						Vista Previa en Tiempo Real
					</h4>

					<div class="preview-container border border-2 border-neutral-100 rounded-3 p-4 bg-white">
						<!-- Top Bar Preview -->
						<div id="topBarPreview" class="top-bar-preview" style="background-color: #0E2337; color: #ffffff; padding: 12px 20px; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 15px; flex-wrap: wrap;">
							<i class="bi bi-megaphone-fill" style="font-size: 1.2rem; color: #FF8600;"></i>
							<span style="font-weight: 700; color: #FF8600;">Nuevo:</span>
							<span style="flex: 1; min-width: 300px; text-align: center;">Accede a más de 200,000 Análisis de Precios Unitarios actualizados para 2025.</span>
							<a href="#" style="color: #ffffff; text-decoration: underline; white-space: nowrap; transition: color 0.3s;">Ver Catálogo →</a>
						</div>

						<div class="text-center mt-4">
							<small class="text-neutral-700">
								<i class="bi bi-info-circle me-1"></i>
								La vista previa se actualiza automáticamente al modificar los campos
							</small>
						</div>
					</div>

					<div class="mt-4 d-flex gap-2 justify-content-end">
						<button type="button" class="btn btn-outline-secondary">
							<i class="bi bi-phone me-1"></i>
							Ver en Mobile
						</button>
						<button type="button" class="btn btn-outline-secondary">
							<i class="bi bi-display me-1"></i>
							Ver en Desktop
						</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Action Buttons -->
	<div class="admin-actions mt-4">
		<button type="button" id="saveSettings" class="button button-primary" disabled>
			<i class="bi bi-save me-2"></i>Guardar Cambios
		</button>
		<span class="spinner" style="display: none; float: none; margin-left: 10px;"></span>
	</div>
</div>