<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Empleados | BellaIdea</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: #ffffff;
			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;
		}
		.company-wrap {
			display: flex;
			flex-direction: column;
			gap: 2px;
		}
		.company-name {
			font-size: 18px;
			font-weight: 800;
			color: #0f172a;
		}
		.appbar-user {
			font-size: 12px;
			color: var(--muted);
		}
		.container {
			max-width: 540px;
			margin: 0 auto;
			padding: 12px 12px 24px;
		}
		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 6px 0 12px;
		}
		.title-wrap h1 {
			margin: 0;
			font-size: 22px;
		}
		.user {
			font-size: 12px;
			color: var(--muted);
			margin-top: 3px;
		}
		.menu-btn {
			width: 42px;
			height: 42px;
			border: 1px solid var(--line);
			border-radius: 10px;
			background: #fff;
			padding: 9px 8px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.menu-btn span {
			display: block;
			height: 3px;
			border-radius: 5px;
			background: #334155;
		}
		.card {
			background: var(--card);
			border-radius: 14px;
			padding: 12px;
			border: 1px solid var(--line);
			margin-bottom: 12px;
		}
		h2 {
			margin: 0 0 10px;
			font-size: 16px;
		}
		label {
			font-size: 13px;
			font-weight: 600;
			margin: 8px 0 4px;
			display: block;
		}
		input {
			width: 100%;
			border: 1px solid #cbd5e1;
			border-radius: 10px;
			padding: 10px;
			font-size: 15px;
		}
		button {
			margin-top: 12px;
			width: 100%;
			border: 0;
			border-radius: 10px;
			background: var(--primary);
			color: #fff;
			padding: 11px;
			font-size: 15px;
			font-weight: 700;
		}
		.list-item {
			border: 1px solid var(--line);
			border-radius: 10px;
			padding: 10px;
			margin-bottom: 8px;
		}
		.name {
			font-size: 15px;
			font-weight: 700;
		}
		.meta {
			font-size: 13px;
			color: var(--muted);
			margin-top: 3px;
		}
		.empty {
			font-size: 14px;
			color: var(--muted);
		}
		.ok {
			background: var(--ok-bg);
			color: var(--ok-text);
			border-radius: 10px;
			padding: 10px;
			font-size: 13px;
			margin-bottom: 10px;
		}
		.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;
			background: #fff;
			border-left: 1px solid var(--line);
			transform: translateX(100%);
			transition: transform 0.25s ease;
			z-index: 30;
			padding: 16px 14px;
		}
		.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: #fff;
			border-radius: 8px;
			width: 34px;
			height: 34px;
			font-size: 18px;
			line-height: 1;
		}
		.module-link {
			display: block;
			text-decoration: none;
			font-weight: 700;
			color: #334155;
			padding: 11px 12px;
			border-radius: 10px;
			border: 1px solid var(--line);
			margin-bottom: 8px;
		}
		.module-link.active {
			background: #ccfbf1;
			color: #0f766e;
			border-color: #5eead4;
		}
		.logout-link {
			display: block;
			margin-top: 14px;
			text-decoration: none;
			text-align: center;
			font-weight: 700;
			color: #b42318;
			padding: 10px 12px;
			border: 1px solid #fecaca;
			border-radius: 10px;
		}
	</style>
</head>
<body>
	<header class="appbar">
		<div class="appbar-inner">
			<div class="company-wrap">
				<div class="company-name">BellaIdea</div>
				<div class="appbar-user">Hola, <?php echo html_escape($this->session->userdata('username')); ?></div>
			</div>
			<button id="openMenu" class="menu-btn" type="button" aria-label="Abrir modulos">
				<span></span>
				<span></span>
				<span></span>
			</button>
		</div>
	</header>

	<div class="container">
		<div class="top">
			<div class="title-wrap">
				<h1>Empleados</h1>
			</div>
		</div>

		<div class="card">
			<h2>Nuevo login de empleado</h2>
			<?php if ($this->session->flashdata('ok')): ?>
				<div class="ok"><?php echo $this->session->flashdata('ok'); ?></div>
			<?php endif; ?>
			<?php if (validation_errors()): ?>
				<div class="ok" style="background:#fee2e2;color:#991b1b;"><?php echo validation_errors(); ?></div>
			<?php endif; ?>

			<?php echo form_open('empleados/guardar'); ?>
				<label for="nombre">Nombre</label>
				<input id="nombre" name="nombre" type="text" placeholder="Nombre completo" required>

				<label for="username">Usuario</label>
				<input id="username" name="username" type="text" placeholder="Ej. maria" required>

				<label for="password">Contrasena</label>
				<input id="password" name="password" type="password" placeholder="Minimo 6 caracteres" required>

				<button type="submit">Crear usuario</button>
			<?php echo form_close(); ?>
		</div>

		<div class="card">
			<h2>Listado</h2>
			<?php if (empty($empleados)): ?>
				<div class="empty">Aun no hay usuarios de empleados registrados.</div>
			<?php else: ?>
				<?php foreach ($empleados as $emp): ?>
					<div class="list-item">
						<div class="name"><?php echo html_escape($emp->nombre); ?></div>
						<div class="meta">Usuario: <?php echo html_escape($emp->username); ?></div>
						<div class="meta">ID: <?php echo (int) $emp->id; ?></div>
					</div>
				<?php endforeach; ?>
			<?php endif; ?>
		</div>
	</div>

	<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('empleados'); ?>">Empleados</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>
		<a class="logout-link" href="<?php echo site_url('logout'); ?>">Salir</a>
	</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');
			}

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