<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<style>
	.employee-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 16px;
	}
	.employee-card {
		background: var(--panel);
		border-radius: 18px;
		padding: 16px;
		box-shadow: var(--shadow);
	}
	.employee-card-header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 12px;
	}
	.employee-name {
		font-size: 1.05rem;
		font-weight: 800;
		line-height: 1.2;
	}
	.employee-stats {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		flex-shrink: 0;
	}
	.employee-stat-chip {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 6px 10px;
		border-radius: 999px;
		background: rgba(95, 143, 168, 0.12);
		color: var(--text);
		font-size: 0.78rem;
		font-weight: 800;
	}
	.employee-stat-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 18px;
		height: 18px;
		border-radius: 999px;
		font-size: 0.72rem;
		font-weight: 900;
		background: rgba(95, 143, 168, 0.18);
	}
	.employee-meta {
		color: var(--muted);
		font-size: 0.85rem;
		margin-top: 6px;
	}
	.group-chip {
		display: inline-flex;
		align-items: center;
		padding: 4px 8px;
		border-radius: 999px;
		font-size: 0.78rem;
		font-weight: 700;
		margin-right: 6px;
		margin-top: 6px;
		color: #fff;
	}
</style>

<?php $this->load->view('partials/filters'); ?>

<div class="actions" style="margin:12px 0;">
	<a class="btn" href="<?php echo site_url('empleados/exportar'); ?>">Exportar CSV</a>
</div>

<?php if (empty($employees)) { ?>
	<div class="panel">No hay empleados disponibles.</div>
<?php } else { ?>
	<div class="employee-grid">
		<?php foreach ($employees as $employee) { ?>
			<a class="employee-card" href="<?php echo site_url('empleados/'.(int)$employee['employee_id']); ?>" style="text-decoration:none; color:inherit;">
				<div class="employee-card-header">
					<div class="employee-name"><?php echo htmlspecialchars($employee['full_name'], ENT_QUOTES, 'UTF-8'); ?></div>
					<div class="employee-stats">
						<span class="employee-stat-chip" title="Metas completadas">
							<span class="employee-stat-icon">&#9733;</span>
							<?php echo (int)$employee['completed_goals_count']; ?>
						</span>
						<span class="employee-stat-chip" title="Tareas completadas">
							<span class="employee-stat-icon">&#10003;</span>
							<?php echo (int)$employee['completed_tasks_count']; ?>
						</span>
					</div>
				</div>
				<div class="employee-meta">
					Gala:
					<span class="badge <?php echo !empty($employee['is_active_in_gala']) ? 'success' : 'danger'; ?>">
						<?php echo !empty($employee['is_active_in_gala']) ? 'Activo' : 'Inactivo'; ?>
					</span>
				</div>
				<div class="employee-meta">
					Visor:
					<span class="badge <?php echo !empty($employee['is_active_in_visor']) ? 'success' : 'danger'; ?>">
						<?php echo !empty($employee['is_active_in_visor']) ? 'Activo' : 'Inactivo'; ?>
					</span>
					<?php if (!empty($employee['is_admin'])) { ?>
						<span class="badge warning" style="margin-left:6px;">Admin</span>
					<?php } ?>
				</div>
				<?php if (!empty($employee['groups'])) { ?>
					<div class="employee-meta">Grupos:</div>
					<div>
						<?php foreach ($employee['groups'] as $group) { ?>
							<span class="group-chip" style="background: <?php echo htmlspecialchars($group['color'], ENT_QUOTES, 'UTF-8'); ?>">
								<?php echo htmlspecialchars($group['name'], ENT_QUOTES, 'UTF-8'); ?>
							</span>
						<?php } ?>
					</div>
				<?php } else { ?>
					<div class="employee-meta">Sin grupos asignados.</div>
				<?php } ?>
			</a>
		<?php } ?>
	</div>
<?php } ?>

