<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<?php
$report_data = isset($report_data) && is_array($report_data) ? $report_data : array();
$calendar_days = isset($report_data['calendar_days']) && is_array($report_data['calendar_days']) ? $report_data['calendar_days'] : array();
$weekdays = array('Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab', 'Dom');
$month_start_weekday = isset($report_data['month_start_weekday']) ? (int)$report_data['month_start_weekday'] : 1;
$leading_blanks = max(0, min(6, $month_start_weekday - 1));
$detail_lookup = array();
$default_detail_date = isset($report_data['default_detail_date']) ? (string)$report_data['default_detail_date'] : '';
foreach ($calendar_days as $day)
{
	$detail_lookup[$day['date']] = $day;
}
$selected_day = ($default_detail_date !== '' && isset($detail_lookup[$default_detail_date])) ? $detail_lookup[$default_detail_date] : null;
if ($selected_day === null)
{
	foreach ($calendar_days as $day)
	{
		if (!empty($day['status']))
		{
			$selected_day = $day;
			break;
		}
	}
}
if ($selected_day === null && !empty($calendar_days))
{
	$selected_day = $calendar_days[0];
}
$active_tab = isset($active_tab) && $active_tab === 'tareas' ? 'tareas' : 'metas';
$task_summary = isset($task_summary) && is_array($task_summary) ? $task_summary : array('pending' => 0, 'overdue' => 0, 'completed' => 0, 'total_open' => 0);
$task_report = isset($task_report) && is_array($task_report) ? $task_report : array();
$task_calendar_days = isset($task_report['calendar_days']) && is_array($task_report['calendar_days']) ? $task_report['calendar_days'] : array();
$task_month_start_weekday = isset($task_report['month_start_weekday']) ? (int)$task_report['month_start_weekday'] : 1;
$task_leading_blanks = max(0, min(6, $task_month_start_weekday - 1));
$task_detail_lookup = array();
$task_default_detail_date = isset($task_report['default_detail_date']) ? (string)$task_report['default_detail_date'] : '';
foreach ($task_calendar_days as $day)
{
	$task_detail_lookup[$day['date']] = $day;
}
$task_selected_day = ($task_default_detail_date !== '' && isset($task_detail_lookup[$task_default_detail_date])) ? $task_detail_lookup[$task_default_detail_date] : null;
if ($task_selected_day === null)
{
	foreach ($task_calendar_days as $day)
	{
		if (!empty($day['assigned_count']))
		{
			$task_selected_day = $day;
			break;
		}
	}
}
if ($task_selected_day === null && !empty($task_calendar_days))
{
	$task_selected_day = $task_calendar_days[0];
}
?>
<section class="panel">
	<div class="actions" style="justify-content:flex-start; margin-top:0; margin-bottom:18px;">
		<a class="btn btn-outline" href="<?php echo site_url('dashboard'); ?>">Regresar</a>
	</div>

		<div style="display:grid; gap:16px;">
			<div style="padding:18px; border-radius:24px; background:var(--panel); box-shadow:0 12px 24px rgba(20,41,64,0.08); display:grid; gap:12px;">
			<div style="font-size:calc(1.15rem * var(--app-text-size)); color:var(--ink); font-weight:900;">
				<?php echo htmlspecialchars($employee['full_name'], ENT_QUOTES, 'UTF-8'); ?>
			</div>
			<div style="display:flex; flex-wrap:wrap; gap:8px;">
				<span style="display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:<?php echo !empty($employee['is_active_in_visor']) ? '#dff4e7' : '#fde2e1'; ?>; color:<?php echo !empty($employee['is_active_in_visor']) ? '#18834d' : '#b53d33'; ?>; font-size:calc(0.78rem * var(--app-text-size)); font-weight:800;">
					<?php echo !empty($employee['is_active_in_visor']) ? 'Activo en Visor' : 'Inactivo en Visor'; ?>
				</span>
				<span style="display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:<?php echo !empty($employee['is_active_in_gala']) ? '#edf3ff' : '#fde2e1'; ?>; color:<?php echo !empty($employee['is_active_in_gala']) ? '#355ca8' : '#b53d33'; ?>; font-size:calc(0.78rem * var(--app-text-size)); font-weight:800;">
					<?php echo !empty($employee['is_active_in_gala']) ? 'Activo en Gala' : 'Inactivo en Gala'; ?>
				</span>
				<span style="display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:#f0f4f8; color:#516277; font-size:calc(0.78rem * var(--app-text-size)); font-weight:800;">
					<?php echo htmlspecialchars($goal_summary['status_label'], ENT_QUOTES, 'UTF-8'); ?>
				</span>
			</div>
			<?php if (!empty($groups)) { ?>
				<div style="display:flex; flex-wrap:wrap; gap:8px;">
					<?php foreach ($groups as $group) { ?>
						<span style="display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:#f8fafc; color:var(--ink); font-size:calc(0.76rem * var(--app-text-size)); font-weight:800; box-shadow:inset 0 0 0 1px rgba(20,41,64,0.08);">
							<span style="display:inline-flex; width:10px; height:10px; border-radius:999px; background:<?php echo htmlspecialchars($group['color'], ENT_QUOTES, 'UTF-8'); ?>;"></span>
							<?php echo htmlspecialchars($group['name'], ENT_QUOTES, 'UTF-8'); ?>
						</span>
					<?php } ?>
				</div>
			<?php } ?>
			</div>

			<div class="actions" style="justify-content:flex-start; margin-top:0; gap:10px;">
				<a class="btn <?php echo $active_tab === 'metas' ? '' : 'btn-outline'; ?>" href="<?php echo site_url('dashboard/empleado/'.(int)$employee['employee_id'].'?tab=metas'); ?>">Metas</a>
				<a class="btn <?php echo $active_tab === 'tareas' ? '' : 'btn-outline'; ?>" href="<?php echo site_url('dashboard/empleado/'.(int)$employee['employee_id'].'?tab=tareas'); ?>">Tareas</a>
			</div>

			<?php if ($active_tab === 'metas') { ?>
		<div class="card-grid">
			<div class="stat">
				<label>Ventas hoy</label>
				<strong><?php echo (int)$sales_today_count; ?></strong>
			</div>
			<div class="stat">
				<label>Total vendido hoy</label>
				<strong><?php echo number_format((float)$sales_today_total, 2, ',', '.'); ?></strong>
			</div>
			<div class="stat">
				<label>Total vendido mes</label>
				<strong><?php echo number_format((float)$sales_month_total, 2, ',', '.'); ?></strong>
			</div>
			<div class="stat">
				<label>Posicion hoy</label>
				<strong>#<?php echo (int)(!empty($vendor_rank['position']) ? $vendor_rank['position'] : 1); ?></strong>
			</div>
		</div>

		<div style="padding:18px; border-radius:24px; background:var(--panel); box-shadow:0 12px 24px rgba(20,41,64,0.08); display:grid; gap:12px;">
			<div style="display:flex; align-items:center; justify-content:space-between; gap:12px;">
				<div style="font-size:calc(1rem * var(--app-text-size)); color:var(--ink); font-weight:900;">Resumen de metas</div>
				<div style="font-size:calc(1.2rem * var(--app-text-size)); color:var(--theme); font-weight:900;">
					<?php echo (int)$goal_summary['progress_percent']; ?>%
				</div>
			</div>
			<div style="height:16px; border-radius:999px; background:#eef1f7; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(24,50,71,0.08);">
				<div style="width:<?php echo (int)$goal_summary['progress_percent']; ?>%; height:100%; background:linear-gradient(90deg, #7bc843, #98d245); border-radius:999px;"></div>
			</div>
			<div style="font-size:calc(0.85rem * var(--app-text-size)); color:var(--muted); font-weight:700;">
				<?php echo (int)$goal_summary['completed']; ?> de <?php echo (int)$goal_summary['total']; ?> metas cumplidas.
			</div>
		</div>

		<div style="padding:18px; border-radius:24px; background:var(--panel); box-shadow:0 12px 24px rgba(20,41,64,0.08); display:grid; gap:14px;">
			<div style="font-size:calc(1rem * var(--app-text-size)); color:var(--ink); font-weight:900;">Metas activas</div>
			<?php if (empty($goal_cards)) { ?>
				<div class="empty">Este empleado no tiene metas activas ahora mismo.</div>
			<?php } else { ?>
				<div style="display:grid; gap:10px;">
					<?php foreach ($goal_cards as $card) { ?>
						<div style="padding:14px; border-radius:18px; background:#f8fafc; display:grid; gap:10px; box-shadow:inset 0 0 0 1px rgba(20,41,64,0.06);">
							<div style="display:flex; align-items:center; justify-content:space-between; gap:12px;">
								<div style="font-size:calc(0.94rem * var(--app-text-size)); color:var(--ink); font-weight:800;">
									<?php echo htmlspecialchars($card['name'], ENT_QUOTES, 'UTF-8'); ?>
								</div>
								<div style="font-size:calc(0.84rem * var(--app-text-size)); color:var(--muted); font-weight:800;">
									<?php echo (int)round($card['progress_ratio'] * 100); ?>%
								</div>
							</div>
							<div style="height:12px; border-radius:999px; background:#e9eef5; overflow:hidden;">
								<div style="width:<?php echo (int)round($card['progress_ratio'] * 100); ?>%; height:100%; background:<?php echo htmlspecialchars(!empty($card['group_color']) ? $card['group_color'] : '#98d245', ENT_QUOTES, 'UTF-8'); ?>; border-radius:999px;"></div>
							</div>
						</div>
					<?php } ?>
				</div>
			<?php } ?>
		</div>

		<div style="padding:18px; border-radius:24px; background:var(--panel); box-shadow:0 12px 24px rgba(20,41,64,0.08); display:grid; gap:14px;">
			<div style="font-size:calc(1rem * var(--app-text-size)); color:var(--ink); font-weight:900;">Reporte del mes</div>
			<div class="card-grid">
				<div class="stat">
					<label>Completadas hoy</label>
					<strong><?php echo (int)$report_data['completed_today']; ?></strong>
				</div>
				<div class="stat">
					<label>Cumplidas este mes</label>
					<strong><?php echo (int)$report_data['completed_month']; ?></strong>
				</div>
				<div class="stat">
					<label>Total del mes</label>
					<strong><?php echo (int)$report_data['total_month']; ?></strong>
				</div>
				<div class="stat">
					<label>Cumplimiento del mes</label>
					<strong><?php echo (int)$report_data['completion_percent_month']; ?>%</strong>
				</div>
			</div>
			<div class="card-grid">
				<div class="stat">
					<label>Racha actual</label>
					<strong><?php echo (int)$report_data['current_streak']; ?></strong>
				</div>
				<div class="stat">
					<label>Mejor racha</label>
					<strong><?php echo (int)$report_data['best_streak']; ?></strong>
				</div>
			</div>

			<div style="display:grid; gap:6px;">
				<div style="font-size:calc(0.96rem * var(--app-text-size)); color:var(--ink); font-weight:900;">
					<?php echo htmlspecialchars(isset($report_data['month_label']) ? $report_data['month_label'] : '', ENT_QUOTES, 'UTF-8'); ?>
				</div>
				<div style="font-size:calc(0.8rem * var(--app-text-size)); color:var(--muted); line-height:1.45;">
					Verde: cumplio al menos una meta. Naranja: tuvo avance parcial. Rojo: tuvo movimientos pero no cumplio. Sin color: no hubo movimientos.
				</div>
			</div>

			<div style="display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:8px;">
				<?php foreach ($weekdays as $weekday) { ?>
					<div style="text-align:center; font-size:calc(0.74rem * var(--app-text-size)); color:var(--muted); font-weight:800; text-transform:uppercase;">
						<?php echo htmlspecialchars($weekday, ENT_QUOTES, 'UTF-8'); ?>
					</div>
				<?php } ?>

				<?php for ($blank = 0; $blank < $leading_blanks; $blank++) { ?>
					<div></div>
				<?php } ?>

				<?php foreach ($calendar_days as $day) { ?>
					<?php
					$bg = '#f2f5f9';
					$ink = '#5d7085';
					if (!empty($day['status']) && $day['status'] === 'success')
					{
						$bg = '#87d96c';
						$ink = '#10331b';
					}
					elseif (!empty($day['status']) && $day['status'] === 'partial')
					{
						$bg = '#f5b357';
						$ink = '#4e2a00';
					}
					elseif (!empty($day['status']) && $day['status'] === 'failed')
					{
						$bg = '#f07c7c';
						$ink = '#4a1212';
					}
					$outline = !empty($day['is_today']) ? '0 0 0 3px rgba(77,116,195,0.35)' : '0 0 0 1px rgba(20,41,64,0.06)';
					$is_selected = $selected_day && $selected_day['date'] === $day['date'];
					?>
					<button
						type="button"
						class="goal-report-day"
						data-date="<?php echo htmlspecialchars($day['date'], ENT_QUOTES, 'UTF-8'); ?>"
						style="min-height:54px; border:0; border-radius:16px; background:<?php echo $bg; ?>; color:<?php echo $ink; ?>; box-shadow:<?php echo $outline; ?>; display:flex; align-items:center; justify-content:center; font-size:calc(1rem * var(--app-text-size)); font-weight:900; <?php echo $is_selected ? 'transform:scale(0.96);' : ''; ?>">
						<?php echo (int)$day['day']; ?>
					</button>
				<?php } ?>
			</div>

			<div id="goal-report-detail" style="padding:16px; border-radius:20px; background:#f8fafc; box-shadow:inset 0 0 0 1px rgba(20,41,64,0.08); display:grid; gap:12px;">
				<?php if ($selected_day) { ?>
					<div style="display:grid; gap:4px;">
						<div id="goal-report-detail-title" style="font-size:calc(0.98rem * var(--app-text-size)); color:var(--ink); font-weight:900;">
							Detalle del <?php echo htmlspecialchars($selected_day['date'], ENT_QUOTES, 'UTF-8'); ?>
						</div>
						<div id="goal-report-detail-subtitle" style="font-size:calc(0.82rem * var(--app-text-size)); color:var(--muted);">
							Completadas: <?php echo (int)$selected_day['completed_count']; ?> de <?php echo (int)$selected_day['total_count']; ?>
						</div>
					</div>
					<div id="goal-report-detail-body" style="display:grid; gap:10px;">
						<?php if (!empty($selected_day['details'])) { ?>
							<?php foreach ($selected_day['details'] as $detail) { ?>
								<?php
								$status_color = '#f07c7c';
								if ($detail['status'] === 'success')
								{
									$status_color = '#87d96c';
								}
								elseif ($detail['status'] === 'partial')
								{
									$status_color = '#f5b357';
								}
								?>
								<div style="padding:12px 14px; border-radius:16px; background:#ffffff; box-shadow:inset 0 0 0 1px rgba(20,41,64,0.08); display:grid; gap:6px;">
									<div style="display:flex; justify-content:space-between; align-items:center; gap:10px;">
										<div style="font-size:calc(0.9rem * var(--app-text-size)); color:var(--ink); font-weight:800;">
											<?php echo htmlspecialchars($detail['name'], ENT_QUOTES, 'UTF-8'); ?>
										</div>
										<span style="display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:999px; background:<?php echo $status_color; ?>; color:#ffffff; font-size:calc(0.72rem * var(--app-text-size)); font-weight:800;">
											<?php echo htmlspecialchars($detail['status_label'], ENT_QUOTES, 'UTF-8'); ?>
										</span>
									</div>
									<div style="font-size:calc(0.8rem * var(--app-text-size)); color:var(--muted); font-weight:700;">
										<?php echo htmlspecialchars($detail['summary'], ENT_QUOTES, 'UTF-8'); ?>
									</div>
								</div>
							<?php } ?>
						<?php } else { ?>
							<div style="padding:14px; border-radius:16px; background:#ffffff; box-shadow:inset 0 0 0 1px rgba(20,41,64,0.08); font-size:calc(0.84rem * var(--app-text-size)); color:var(--muted); text-align:center;">
								<?php echo !empty($selected_day['movement_count']) ? 'Ese dia hubo movimientos, pero no habia metas evaluables para este empleado.' : 'Ese dia no hubo movimientos.'; ?>
							</div>
						<?php } ?>
					</div>
				<?php } ?>
			</div>
		</div>
			<?php } else { ?>
		<div class="card-grid">
			<div class="stat">
				<label>Tareas abiertas</label>
				<strong><?php echo (int)$task_summary['total_open']; ?></strong>
			</div>
			<div class="stat">
				<label>Pendientes</label>
				<strong><?php echo (int)$task_summary['pending']; ?></strong>
			</div>
			<div class="stat">
				<label>Vencidas</label>
				<strong><?php echo (int)$task_summary['overdue']; ?></strong>
			</div>
			<div class="stat">
				<label>Completadas hoy</label>
				<strong><?php echo (int)(isset($task_report['completed_today']) ? $task_report['completed_today'] : 0); ?></strong>
			</div>
		</div>

		<div style="padding:18px; border-radius:24px; background:var(--panel); box-shadow:0 12px 24px rgba(20,41,64,0.08); display:grid; gap:12px;">
			<div style="display:flex; align-items:center; justify-content:space-between; gap:12px;">
				<div style="font-size:calc(1rem * var(--app-text-size)); color:var(--ink); font-weight:900;">Resumen de tareas</div>
				<div style="font-size:calc(1.2rem * var(--app-text-size)); color:var(--theme); font-weight:900;">
					<?php echo (int)(isset($task_report['completion_percent_month']) ? $task_report['completion_percent_month'] : 0); ?>%
				</div>
			</div>
			<div style="height:16px; border-radius:999px; background:#eef1f7; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(24,50,71,0.08);">
				<div style="width:<?php echo (int)(isset($task_report['completion_percent_month']) ? $task_report['completion_percent_month'] : 0); ?>%; height:100%; background:linear-gradient(90deg, #4d74c3, #6f95e0); border-radius:999px;"></div>
			</div>
			<div style="font-size:calc(0.85rem * var(--app-text-size)); color:var(--muted); font-weight:700;">
				<?php echo (int)(isset($task_report['completed_month']) ? $task_report['completed_month'] : 0); ?> de <?php echo (int)(isset($task_report['total_month']) ? $task_report['total_month'] : 0); ?> tareas del mes completadas.
			</div>
		</div>

		<div style="padding:18px; border-radius:24px; background:var(--panel); box-shadow:0 12px 24px rgba(20,41,64,0.08); display:grid; gap:14px;">
			<div style="font-size:calc(1rem * var(--app-text-size)); color:var(--ink); font-weight:900;">Tareas activas</div>
			<?php if (empty($task_open_assignments)) { ?>
				<div class="empty">Este empleado no tiene tareas abiertas ahora mismo.</div>
			<?php } else { ?>
				<div style="display:grid; gap:10px;">
					<?php foreach ($task_open_assignments as $assignment) { ?>
						<?php
						$task_status = isset($assignment['status']) ? (string)$assignment['status'] : 'pending';
						$task_status_bg = $task_status === 'overdue' ? '#fdecec' : ($task_status === 'in_progress' ? '#edf3ff' : '#f8fafc');
						$task_status_fg = $task_status === 'overdue' ? '#8a1f1f' : ($task_status === 'in_progress' ? '#355ca8' : '#516277');
						$task_status_label = $task_status === 'overdue' ? 'Vencida' : ($task_status === 'in_progress' ? 'En progreso' : 'Pendiente');
						?>
						<div style="padding:14px; border-radius:18px; background:#f8fafc; display:grid; gap:10px; box-shadow:inset 0 0 0 1px rgba(20,41,64,0.06);">
							<div style="display:flex; align-items:center; justify-content:space-between; gap:12px;">
								<div style="font-size:calc(0.94rem * var(--app-text-size)); color:var(--ink); font-weight:800;">
									<?php echo htmlspecialchars($assignment['title'], ENT_QUOTES, 'UTF-8'); ?>
								</div>
								<span style="display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:999px; background:<?php echo $task_status_bg; ?>; color:<?php echo $task_status_fg; ?>; font-size:calc(0.72rem * var(--app-text-size)); font-weight:800;">
									<?php echo htmlspecialchars($task_status_label, ENT_QUOTES, 'UTF-8'); ?>
								</span>
							</div>
							<div style="font-size:calc(0.82rem * var(--app-text-size)); color:var(--muted); font-weight:700;">
								<?php echo (int)$assignment['items_completed']; ?> de <?php echo (int)$assignment['items_total']; ?> subtareas completadas
							</div>
							<div style="height:12px; border-radius:999px; background:#e9eef5; overflow:hidden;">
								<div style="width:<?php echo (int)($assignment['items_total'] > 0 ? round(($assignment['items_completed'] / $assignment['items_total']) * 100) : 0); ?>%; height:100%; background:#6f95e0; border-radius:999px;"></div>
							</div>
						</div>
					<?php } ?>
				</div>
			<?php } ?>
		</div>

		<div style="padding:18px; border-radius:24px; background:var(--panel); box-shadow:0 12px 24px rgba(20,41,64,0.08); display:grid; gap:14px;">
			<div style="font-size:calc(1rem * var(--app-text-size)); color:var(--ink); font-weight:900;">Reporte del mes</div>
			<div class="card-grid">
				<div class="stat">
					<label>Completadas hoy</label>
					<strong><?php echo (int)(isset($task_report['completed_today']) ? $task_report['completed_today'] : 0); ?></strong>
				</div>
				<div class="stat">
					<label>Completadas este mes</label>
					<strong><?php echo (int)(isset($task_report['completed_month']) ? $task_report['completed_month'] : 0); ?></strong>
				</div>
				<div class="stat">
					<label>Total del mes</label>
					<strong><?php echo (int)(isset($task_report['total_month']) ? $task_report['total_month'] : 0); ?></strong>
				</div>
				<div class="stat">
					<label>Cumplimiento del mes</label>
					<strong><?php echo (int)(isset($task_report['completion_percent_month']) ? $task_report['completion_percent_month'] : 0); ?>%</strong>
				</div>
			</div>
			<div class="card-grid">
				<div class="stat">
					<label>Racha actual</label>
					<strong><?php echo (int)(isset($task_report['current_streak']) ? $task_report['current_streak'] : 0); ?></strong>
				</div>
				<div class="stat">
					<label>Mejor racha</label>
					<strong><?php echo (int)(isset($task_report['best_streak']) ? $task_report['best_streak'] : 0); ?></strong>
				</div>
			</div>
			<div style="display:grid; gap:6px;">
				<div style="font-size:calc(0.96rem * var(--app-text-size)); color:var(--ink); font-weight:900;">
					<?php echo htmlspecialchars(isset($task_report['month_label']) ? $task_report['month_label'] : '', ENT_QUOTES, 'UTF-8'); ?>
				</div>
				<div style="font-size:calc(0.8rem * var(--app-text-size)); color:var(--muted); line-height:1.45;">
					Verde: todas las tareas de ese dia fueron completadas. Naranja: hubo avance parcial o tareas pendientes. Rojo: hubo tareas vencidas.
				</div>
			</div>
			<div style="display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:8px;">
				<?php foreach ($weekdays as $weekday) { ?>
					<div style="text-align:center; font-size:calc(0.74rem * var(--app-text-size)); color:var(--muted); font-weight:800; text-transform:uppercase;">
						<?php echo htmlspecialchars($weekday, ENT_QUOTES, 'UTF-8'); ?>
					</div>
				<?php } ?>
				<?php for ($blank = 0; $blank < $task_leading_blanks; $blank++) { ?>
					<div></div>
				<?php } ?>
				<?php foreach ($task_calendar_days as $day) { ?>
					<?php
					$bg = '#f2f5f9';
					$ink = '#5d7085';
					if (!empty($day['status']) && $day['status'] === 'success')
					{
						$bg = '#87d96c';
						$ink = '#10331b';
					}
					elseif (!empty($day['status']) && $day['status'] === 'partial')
					{
						$bg = '#f5b357';
						$ink = '#4e2a00';
					}
					elseif (!empty($day['status']) && $day['status'] === 'failed')
					{
						$bg = '#f07c7c';
						$ink = '#4a1212';
					}
					$outline = !empty($day['is_today']) ? '0 0 0 3px rgba(77,116,195,0.35)' : '0 0 0 1px rgba(20,41,64,0.06)';
					$is_selected = $task_selected_day && $task_selected_day['date'] === $day['date'];
					?>
					<button
						type="button"
						class="task-report-day"
						data-date="<?php echo htmlspecialchars($day['date'], ENT_QUOTES, 'UTF-8'); ?>"
						style="min-height:54px; border:0; border-radius:16px; background:<?php echo $bg; ?>; color:<?php echo $ink; ?>; box-shadow:<?php echo $outline; ?>; display:flex; align-items:center; justify-content:center; font-size:calc(1rem * var(--app-text-size)); font-weight:900; <?php echo $is_selected ? 'transform:scale(0.96);' : ''; ?>">
						<?php echo (int)$day['day']; ?>
					</button>
				<?php } ?>
			</div>
			<div id="task-report-detail" style="padding:16px; border-radius:20px; background:#f8fafc; box-shadow:inset 0 0 0 1px rgba(20,41,64,0.08); display:grid; gap:12px;">
				<?php if ($task_selected_day) { ?>
					<div style="display:grid; gap:4px;">
						<div id="task-report-detail-title" style="font-size:calc(0.98rem * var(--app-text-size)); color:var(--ink); font-weight:900;">
							Detalle del <?php echo htmlspecialchars($task_selected_day['date'], ENT_QUOTES, 'UTF-8'); ?>
						</div>
						<div id="task-report-detail-subtitle" style="font-size:calc(0.82rem * var(--app-text-size)); color:var(--muted);">
							Completadas: <?php echo (int)$task_selected_day['completed_count']; ?> de <?php echo (int)$task_selected_day['assigned_count']; ?>
						</div>
					</div>
					<div id="task-report-detail-body" style="display:grid; gap:10px;">
						<?php if (!empty($task_selected_day['details'])) { ?>
							<?php foreach ($task_selected_day['details'] as $detail) { ?>
								<?php
								$status_color = '#f07c7c';
								if ($detail['status'] === 'success' || $detail['status'] === 'completed')
								{
									$status_color = '#87d96c';
								}
								elseif ($detail['status'] === 'partial' || $detail['status'] === 'in_progress' || $detail['status'] === 'pending')
								{
									$status_color = '#f5b357';
								}
								?>
								<div style="padding:12px 14px; border-radius:16px; background:#ffffff; box-shadow:inset 0 0 0 1px rgba(20,41,64,0.08); display:grid; gap:6px;">
									<div style="display:flex; justify-content:space-between; align-items:center; gap:10px;">
										<div style="font-size:calc(0.9rem * var(--app-text-size)); color:var(--ink); font-weight:800;">
											<?php echo htmlspecialchars($detail['name'], ENT_QUOTES, 'UTF-8'); ?>
										</div>
										<span style="display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:999px; background:<?php echo $status_color; ?>; color:#ffffff; font-size:calc(0.72rem * var(--app-text-size)); font-weight:800;">
											<?php echo htmlspecialchars($detail['status_label'], ENT_QUOTES, 'UTF-8'); ?>
										</span>
									</div>
									<div style="font-size:calc(0.8rem * var(--app-text-size)); color:var(--muted); font-weight:700;">
										<?php echo htmlspecialchars($detail['summary'], ENT_QUOTES, 'UTF-8'); ?>
									</div>
								</div>
							<?php } ?>
						<?php } else { ?>
							<div style="padding:14px; border-radius:16px; background:#ffffff; box-shadow:inset 0 0 0 1px rgba(20,41,64,0.08); font-size:calc(0.84rem * var(--app-text-size)); color:var(--muted); text-align:center;">
								No hubo tareas registradas para ese dia.
							</div>
						<?php } ?>
					</div>
				<?php } ?>
			</div>
		</div>
			<?php } ?>
	</div>
</section>
<script>
(function() {
	var activeTab = <?php echo json_encode($active_tab); ?>;
	if (activeTab !== 'metas') {
		return;
	}
	var days = <?php echo json_encode($calendar_days); ?>;
	var map = {};
	for (var i = 0; i < days.length; i++) {
		map[days[i].date] = days[i];
	}

	var buttons = document.querySelectorAll('.goal-report-day');
	var title = document.getElementById('goal-report-detail-title');
	var subtitle = document.getElementById('goal-report-detail-subtitle');
	var body = document.getElementById('goal-report-detail-body');

	function escapeHtml(value) {
		return String(value || '')
			.replace(/&/g, '&amp;')
			.replace(/</g, '&lt;')
			.replace(/>/g, '&gt;')
			.replace(/"/g, '&quot;')
			.replace(/'/g, '&#039;');
	}

	function renderStatusColor(status) {
		if (status === 'success') return '#87d96c';
		if (status === 'partial') return '#f5b357';
		return '#f07c7c';
	}

	function setSelected(date) {
		for (var i = 0; i < buttons.length; i++) {
			buttons[i].style.transform = buttons[i].getAttribute('data-date') === date ? 'scale(0.96)' : '';
		}
	}

	function renderDay(day) {
		if (!day) {
			return;
		}

		setSelected(day.date);
		if (title) {
			title.textContent = 'Detalle del ' + day.date;
		}
		if (subtitle) {
			subtitle.textContent = 'Completadas: ' + day.completed_count + ' de ' + day.total_count;
		}
		if (!body) {
			return;
		}

		if (!day.details || !day.details.length) {
			body.innerHTML = '<div style="padding:14px; border-radius:16px; background:#ffffff; box-shadow:inset 0 0 0 1px rgba(20,41,64,0.08); font-size:calc(0.84rem * var(--app-text-size)); color:var(--muted); text-align:center;">' +
				(day.movement_count > 0 ? 'Ese dia hubo movimientos, pero no habia metas evaluables para este empleado.' : 'Ese dia no hubo movimientos.') +
				'</div>';
			return;
		}

		var html = '';
		for (var i = 0; i < day.details.length; i++) {
			var detail = day.details[i];
			html += '<div style="padding:12px 14px; border-radius:16px; background:#ffffff; box-shadow:inset 0 0 0 1px rgba(20,41,64,0.08); display:grid; gap:6px;">';
			html += '<div style="display:flex; justify-content:space-between; align-items:center; gap:10px;">';
			html += '<div style="font-size:calc(0.9rem * var(--app-text-size)); color:var(--ink); font-weight:800;">' + escapeHtml(detail.name) + '</div>';
			html += '<span style="display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:999px; background:' + renderStatusColor(detail.status) + '; color:#ffffff; font-size:calc(0.72rem * var(--app-text-size)); font-weight:800;">' + escapeHtml(detail.status_label) + '</span>';
			html += '</div>';
			html += '<div style="font-size:calc(0.8rem * var(--app-text-size)); color:var(--muted); font-weight:700;">' + escapeHtml(detail.summary) + '</div>';
			html += '</div>';
		}
		body.innerHTML = html;
	}

	for (var i = 0; i < buttons.length; i++) {
		buttons[i].addEventListener('click', function() {
			var date = this.getAttribute('data-date');
			renderDay(map[date] || null);
		});
	}
})();
</script>
<script>
(function() {
	var activeTab = <?php echo json_encode($active_tab); ?>;
	if (activeTab !== 'tareas') {
		return;
	}
	var days = <?php echo json_encode($task_calendar_days); ?>;
	var map = {};
	for (var i = 0; i < days.length; i++) {
		map[days[i].date] = days[i];
	}

	var buttons = document.querySelectorAll('.task-report-day');
	var title = document.getElementById('task-report-detail-title');
	var subtitle = document.getElementById('task-report-detail-subtitle');
	var body = document.getElementById('task-report-detail-body');

	function escapeHtml(value) {
		return String(value || '')
			.replace(/&/g, '&amp;')
			.replace(/</g, '&lt;')
			.replace(/>/g, '&gt;')
			.replace(/"/g, '&quot;')
			.replace(/'/g, '&#039;');
	}

	function renderStatusColor(status) {
		if (status === 'success' || status === 'completed') return '#87d96c';
		if (status === 'partial' || status === 'in_progress' || status === 'pending') return '#f5b357';
		return '#f07c7c';
	}

	function setSelected(date) {
		for (var i = 0; i < buttons.length; i++) {
			buttons[i].style.transform = buttons[i].getAttribute('data-date') === date ? 'scale(0.96)' : '';
		}
	}

	function renderDay(day) {
		if (!day) {
			return;
		}

		setSelected(day.date);
		if (title) {
			title.textContent = 'Detalle del ' + day.date;
		}
		if (subtitle) {
			subtitle.textContent = 'Completadas: ' + day.completed_count + ' de ' + day.assigned_count;
		}
		if (!body) {
			return;
		}

		if (!day.details || !day.details.length) {
			body.innerHTML = '<div style="padding:14px; border-radius:16px; background:#ffffff; box-shadow:inset 0 0 0 1px rgba(20,41,64,0.08); font-size:calc(0.84rem * var(--app-text-size)); color:var(--muted); text-align:center;">No hubo tareas registradas para ese dia.</div>';
			return;
		}

		var html = '';
		for (var i = 0; i < day.details.length; i++) {
			var detail = day.details[i];
			html += '<div style="padding:12px 14px; border-radius:16px; background:#ffffff; box-shadow:inset 0 0 0 1px rgba(20,41,64,0.08); display:grid; gap:6px;">';
			html += '<div style="display:flex; justify-content:space-between; align-items:center; gap:10px;">';
			html += '<div style="font-size:calc(0.9rem * var(--app-text-size)); color:var(--ink); font-weight:800;">' + escapeHtml(detail.name) + '</div>';
			html += '<span style="display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:999px; background:' + renderStatusColor(detail.status) + '; color:#ffffff; font-size:calc(0.72rem * var(--app-text-size)); font-weight:800;">' + escapeHtml(detail.status_label) + '</span>';
			html += '</div>';
			html += '<div style="font-size:calc(0.8rem * var(--app-text-size)); color:var(--muted); font-weight:700;">' + escapeHtml(detail.summary) + '</div>';
			html += '</div>';
		}
		body.innerHTML = html;
	}

	for (var i = 0; i < buttons.length; i++) {
		buttons[i].addEventListener('click', function() {
			var date = this.getAttribute('data-date');
			renderDay(map[date] || null);
		});
	}
})();
</script>
