<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<section class="panel">
	<div class="actions" style="justify-content:space-between; margin-top:0; margin-bottom:18px; gap:12px;">
		<a class="btn btn-outline" href="<?php echo site_url('inicio'); ?>">Regresar</a>
		<?php if (!empty($can_view_report)) { ?>
			<a class="btn" href="<?php echo site_url('metas/reporte'); ?>">Reporte</a>
		<?php } ?>
	</div>

	<h2 style="margin-bottom:16px;">Metas</h2>

	<?php if (!empty($goal_cards)) { ?>
		<div style="display:grid; gap:16px;">
			<?php foreach ($goal_cards as $card) { ?>
				<div style="padding:20px 18px; border-radius:28px; background:var(--panel); box-shadow:0 12px 24px rgba(20,41,64,0.08); display:grid; gap:18px; border-top:6px solid <?php echo htmlspecialchars(!empty($card['group_color']) ? $card['group_color'] : '#98d245', ENT_QUOTES, 'UTF-8'); ?>;">
					<div style="display:grid; gap:6px;">
						<div style="font-size:calc(1rem * var(--app-text-size)); color:var(--ink); font-weight:800; text-align:center;">
							<?php echo htmlspecialchars($card['name'], ENT_QUOTES, 'UTF-8'); ?>
						</div>
						<?php if (!empty($card['group_total_label'])) { ?>
							<div style="font-size:calc(0.82rem * var(--app-text-size)); color:var(--muted); font-weight:700; text-align:center;">
								<?php echo htmlspecialchars($card['group_total_label'], ENT_QUOTES, 'UTF-8'); ?>
							</div>
						<?php } ?>
					</div>

					<?php if ($card['display_mode'] === 'bar') { ?>
						<?php if (!empty($card['group_segments'])) { ?>
							<div style="display:grid; gap:12px;">
								<div style="position:relative; height:42px; border-radius:16px; background:#eef1f7; overflow:hidden; box-shadow:inset 0 0 0 2px rgba(24,50,71,0.14);">
									<?php foreach ($card['group_segments'] as $index => $segment) { ?>
										<div style="position:absolute; left:0; top:0; width:<?php echo number_format($segment['width_percent'], 2, '.', ''); ?>%; height:100%; background:<?php echo htmlspecialchars($segment['color'], ENT_QUOTES, 'UTF-8'); ?>; opacity:1; border-radius:16px; z-index:<?php echo $index + 1; ?>; box-shadow:<?php echo (int)$segment['group_id'] === (int)$card['current_group_id'] ? '0 0 0 2px rgba(255,255,255,0.9) inset, 0 0 0 1px rgba(24,50,71,0.12)' : '0 0 0 1px rgba(255,255,255,0.45) inset'; ?>;"></div>
									<?php } ?>
								</div>
								<div style="display:grid; gap:8px;">
									<?php foreach ($card['group_segments'] as $segment) { ?>
										<div style="display:flex; justify-content:flex-start; align-items:center; gap:12px; font-size:calc(0.82rem * var(--app-text-size)); color:var(--muted); font-weight:700;">
											<span style="display:inline-flex; align-items:center; gap:8px; color:var(--ink);<?php echo (int)$segment['group_id'] === (int)$card['current_group_id'] ? ' font-weight:900;' : ''; ?>">
												<span style="display:inline-flex; width:12px; height:12px; border-radius:999px; background:<?php echo htmlspecialchars($segment['color'], ENT_QUOTES, 'UTF-8'); ?>;"></span>
												<?php echo htmlspecialchars($segment['name'], ENT_QUOTES, 'UTF-8'); ?>
											</span>
										</div>
									<?php } ?>
								</div>
							</div>
						<?php } else { ?>
							<div style="height:42px; border-radius:16px; background:#eef1f7; overflow:hidden; box-shadow:inset 0 0 0 2px rgba(24,50,71,0.14);">
								<div style="width:<?php echo number_format(($card['progress_ratio'] * 100), 2, '.', ''); ?>%; height:100%; background:#98d245; border-radius:16px 12px 12px 16px;"></div>
							</div>
						<?php } ?>
						<div style="font-size:calc(0.95rem * var(--app-text-size)); color:var(--muted); text-align:center; font-weight:700;">
							<?php echo !empty($card['is_completed']) ? 'Meta cumplida' : 'Sigue avanzando hacia tu meta'; ?>
						</div>
					<?php } elseif ($card['display_mode'] === 'number') { ?>
						<div style="font-size:calc(2rem * var(--app-text-size)); color:var(--ink); font-weight:900; text-align:center;">
							<?php echo $card['metric_label'] === 'Cantidad'
								? number_format($card['current_value'], 0, ',', '.')
								: number_format($card['current_value'], 2, ',', '.'); ?>/<?php echo $card['metric_label'] === 'Cantidad'
								? number_format($card['target_value'], 0, ',', '.')
								: number_format($card['target_value'], 2, ',', '.'); ?>
						</div>
					<?php } else { ?>
						<div style="font-size:calc(2rem * var(--app-text-size)); color:var(--ink); font-weight:900; text-align:center;">
							Puesto #<?php echo (int)$card['rank_position']; ?>
						</div>
					<?php } ?>
				</div>
			<?php } ?>
		</div>
	<?php } else { ?>
		<div class="empty">No hay metas activas para mostrar en este momento.</div>
	<?php } ?>
</section>
