<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<?php
		$app_name = !empty($app_config['app_name']) ? $app_config['app_name'] : 'BellaIdea';
		$app_logo = !empty($app_config['logo_path']) ? $app_config['logo_path'] : '';
	?>
	<title>Dashboard | <?php echo html_escape($app_name); ?></title>
	<style>
		:root {
			--bg: #f6f7fb;
			--card: #ffffff;
			--text: #1f2937;
			--muted: #64748b;
			--line: #e2e8f0;
			--primary: #0ea5a3;
			--ok-bg: #dcfce7;
			--ok-text: #166534;
		}
		* { box-sizing: border-box; }
		body { margin: 0; font-family: "Segoe UI", Tahoma, Arial, sans-serif; background: var(--bg); color: var(--text); }
		.appbar { background: var(--card); border-bottom: 1px solid var(--line); padding: 10px 12px; position: sticky; top: 0; z-index: 20; }
		.appbar-inner { max-width: 540px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
		.appbar-user { font-size: 13px; color: var(--muted); font-weight: 600; }
		.menu-btn { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 9px 8px; display: flex; flex-direction: column; justify-content: space-between; }
		.menu-btn span { display: block; height: 3px; border-radius: 5px; background: var(--text); }
		.container { max-width: 540px; margin: 0 auto; padding: 14px 12px 24px; }
		.hero-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 12px; margin-bottom: 12px; text-align: center; }
		.hero-logo { width: 150px; height: 150px; border-radius: 18px; border: 1px solid var(--line); object-fit: cover; background: var(--card); margin: 0 auto 10px; display: block; }
		.hero-title { margin: 0; font-size: 32px; line-height: 1.05; font-weight: 800; word-break: break-word; }
		.hero-sub { margin-top: 4px; font-size: 13px; color: var(--muted); }
		.card { background: var(--card); border-radius: 14px; padding: 12px; border: 1px solid var(--line); margin-bottom: 12px; }
		.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
		.metric { border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
		.metric-label { font-size: 12px; color: var(--muted); }
		.metric-value { margin-top: 4px; font-size: 37px; font-weight: 800; line-height: 1; }
		.metric-value.currency { font-size: 32px; }
		h2 { margin: 0 0 10px; font-size: 16px; }
		.order-card { border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-top: 8px; }
		.order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
		.order-title { font-size: 16px; font-weight: 800; line-height: 1.2; }
		.order-total { font-size: 18px; font-weight: 800; white-space: nowrap; }
		.order-meta { margin-top: 4px; font-size: 13px; color: var(--muted); }
		.empty { font-size: 13px; color: var(--muted); }
		.drawer-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 29; }
		.drawer { position: fixed; top: 0; right: 0; width: min(86vw, 330px); height: 100vh; height: 100dvh; min-height: 100dvh; background: var(--card); border-left: 1px solid var(--line); transform: translateX(100%); transition: transform 0.25s ease; z-index: 30; padding: 16px 14px calc(72px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; overflow-y: auto; }
		.drawer.open { transform: translateX(0); }
		.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
		.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
		.drawer-title { margin: 0; font-size: 18px; }
		.close-btn { border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 8px; width: 34px; height: 34px; font-size: 18px; line-height: 1; margin-top: 0; padding: 0; }
		.module-link { display: block; text-decoration: none; font-weight: 700; color: var(--text); padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 8px; }
		.module-link.active { background: var(--primary); color: #fff; border-color: var(--primary); }
		.drawer-bottom { margin-top: auto; }
		.logout-link { display: block; margin-top: 8px; text-decoration: none; text-align: center; font-weight: 700; color: var(--text); padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
	</style>
</head>
<?php
	$theme_current = $this->session->userdata('theme') ? $this->session->userdata('theme') : 'claro';
	$theme_custom_vars = $this->session->userdata('theme_custom_vars');
	$is_custom_theme = (strpos((string) $theme_current, 'custom_') === 0) && is_array($theme_custom_vars);
	$theme_render = $theme_current;
	if (!$is_custom_theme && strpos((string) $theme_current, 'custom_') === 0) {
		$theme_render = 'claro';
	}
	$body_class = $is_custom_theme ? 'theme-custom' : 'theme-'.html_escape($theme_render);
	$theme_presets = array(
		'claro' => array('bg'=>'#f6f7fb','card'=>'#ffffff','text'=>'#1f2937','muted'=>'#64748b','line'=>'#e2e8f0','primary'=>'#0ea5a3','ok_bg'=>'#dcfce7','ok_text'=>'#166534'),
		'oscuro' => array('bg'=>'#0f172a','card'=>'#111827','text'=>'#e5e7eb','muted'=>'#9ca3af','line'=>'#334155','primary'=>'#14b8a6','ok_bg'=>'#064e3b','ok_text'=>'#bbf7d0'),
		'rosado' => array('bg'=>'#fff1f6','card'=>'#ffffff','text'=>'#4a1028','muted'=>'#8a4661','line'=>'#f8bbd0','primary'=>'#ec4899','ok_bg'=>'#fce7f3','ok_text'=>'#9d174d'),
		'fuccia' => array('bg'=>'#fdf2ff','card'=>'#ffffff','text'=>'#4a044e','muted'=>'#7e22ce','line'=>'#f0abfc','primary'=>'#d946ef','ok_bg'=>'#fae8ff','ok_text'=>'#86198f'),
		'verde' => array('bg'=>'#f0fdf4','card'=>'#ffffff','text'=>'#14532d','muted'=>'#166534','line'=>'#86efac','primary'=>'#22c55e','ok_bg'=>'#dcfce7','ok_text'=>'#166534'),
		'rojo' => array('bg'=>'#fff1f2','card'=>'#ffffff','text'=>'#7f1d1d','muted'=>'#b91c1c','line'=>'#fca5a5','primary'=>'#ef4444','ok_bg'=>'#fee2e2','ok_text'=>'#991b1b'),
		'azul_claro' => array('bg'=>'#eff6ff','card'=>'#ffffff','text'=>'#1e3a8a','muted'=>'#1d4ed8','line'=>'#93c5fd','primary'=>'#38bdf8','ok_bg'=>'#dbeafe','ok_text'=>'#1e40af'),
		'azul_rey' => array('bg'=>'#eef2ff','card'=>'#ffffff','text'=>'#1e1b4b','muted'=>'#312e81','line'=>'#a5b4fc','primary'=>'#4f46e5','ok_bg'=>'#e0e7ff','ok_text'=>'#3730a3')
	);
	$vars = $is_custom_theme ? $theme_custom_vars : (isset($theme_presets[$theme_render]) ? $theme_presets[$theme_render] : $theme_presets['claro']);
	$inline_style = '--bg:'.$vars['bg'].';--card:'.$vars['card'].';--text:'.$vars['text'].';--muted:'.$vars['muted'].';--line:'.$vars['line'].';--primary:'.$vars['primary'].';--ok-bg:'.$vars['ok_bg'].';--ok-text:'.$vars['ok_text'].';';
?>
<body class="<?php echo $body_class; ?>" style="<?php echo html_escape($inline_style); ?>">
	<header class="appbar">
		<div class="appbar-inner">
			<div class="appbar-user">Hola, <?php echo html_escape($this->session->userdata('username')); ?></div>
			<button id="openMenu" class="menu-btn" type="button" aria-label="Abrir menu">
				<span></span><span></span><span></span>
			</button>
		</div>
	</header>

	<main class="container">
		<section class="hero-card">
			<?php if (!empty($app_logo)): ?>
				<img class="hero-logo" src="<?php echo base_url($app_logo); ?>" alt="Logo grande">
			<?php endif; ?>
			<h1 class="hero-title"><?php echo html_escape($app_name); ?></h1>
			<div class="hero-sub">Dashboard principal</div>
		</section>

		<section class="card">
			<div class="grid">
				<div class="metric">
					<div class="metric-label">Clientes</div>
					<div class="metric-value"><?php echo (int) $resumen['total_clientes']; ?></div>
				</div>
				<div class="metric">
					<div class="metric-label">Pedidos pendientes</div>
					<div class="metric-value"><?php echo (int) $resumen['pedidos_pendientes']; ?></div>
				</div>
				<div class="metric">
					<div class="metric-label">Pedidos cerrados</div>
					<div class="metric-value"><?php echo (int) $resumen['pedidos_cerrados']; ?></div>
				</div>
				<div class="metric">
					<div class="metric-label">Stock productos</div>
					<div class="metric-value"><?php echo (int) $resumen['productos_stock']; ?></div>
				</div>
				<div class="metric">
					<div class="metric-label">Ventas del mes</div>
					<div class="metric-value currency"><?php echo number_format((float) $resumen['ventas_mes'], 2, '.', ','); ?></div>
				</div>
				<div class="metric">
					<div class="metric-label">Ventas totales</div>
					<div class="metric-value currency"><?php echo number_format((float) $resumen['ventas_totales'], 2, '.', ','); ?></div>
				</div>
			</div>
		</section>

		<section class="card">
			<h2>Pedidos activos pendientes</h2>
			<?php if (empty($pedidos_activos)): ?>
				<div class="empty">No hay pedidos pendientes.</div>
			<?php else: ?>
				<?php foreach ($pedidos_activos as $p): ?>
					<div class="order-card">
						<div class="order-head">
							<div class="order-title"><?php echo html_escape($p['cliente_nombre']); ?></div>
							<div class="order-total"><?php echo number_format((float) $p['total'], 2, '.', ','); ?></div>
						</div>
						<div class="order-meta"><?php echo html_escape($p['template_nombre']); ?> | <?php echo date('d/m/Y H:i', strtotime($p['fecha'])); ?></div>
					</div>
				<?php endforeach; ?>
			<?php endif; ?>
		</section>
	</main>

	<div id="drawerBackdrop" class="drawer-backdrop"></div>
	<aside id="drawer" class="drawer">
		<div class="drawer-head">
			<h3 class="drawer-title">Modulos</h3>
			<button id="closeMenu" class="close-btn" type="button" aria-label="Cerrar menu">x</button>
		</div>
		<a class="module-link active" href="<?php echo site_url('dashboard'); ?>">Dashboard</a>
		<a class="module-link" href="<?php echo site_url('clientes'); ?>">Clientes</a>
		<a class="module-link" href="<?php echo site_url('inventario'); ?>">Inventario</a>
		<a class="module-link" href="<?php echo site_url('compras'); ?>">Compras</a>
		<a class="module-link" href="<?php echo site_url('pedidos'); ?>">Pedidos</a>
		<a class="module-link" href="<?php echo site_url('reportes'); ?>">Reportes</a>
		<div class="drawer-bottom">
			<a class="module-link" href="<?php echo site_url('configuracion'); ?>">Configuracion</a>
			<a class="logout-link" href="<?php echo site_url('logout'); ?>">Salir</a>
		</div>
	</aside>

	<script>
		(function () {
			var openBtn = document.getElementById('openMenu');
			var closeBtn = document.getElementById('closeMenu');
			var drawer = document.getElementById('drawer');
			var backdrop = document.getElementById('drawerBackdrop');

			function openMenu() {
				drawer.classList.add('open');
				backdrop.classList.add('open');
			}
			function closeMenu() {
				drawer.classList.remove('open');
				backdrop.classList.remove('open');
			}

			if (openBtn) openBtn.addEventListener('click', openMenu);
			if (closeBtn) closeBtn.addEventListener('click', closeMenu);
			if (backdrop) backdrop.addEventListener('click', closeMenu);
		})();
	</script>
</body>
</html>
