<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<style>
	.global-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
	.global-card {
		display: grid;
		gap: 16px;
		padding: 20px;
		border-radius: 24px;
		background: var(--panel);
		box-shadow: var(--shadow);
	}
	.global-head {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 12px;
	}
	.global-head h2 {
		margin: 0;
	}
	.global-head p {
		margin: 6px 0 0;
		color: var(--muted);
	}
	.global-list {
		display: grid;
		gap: 12px;
	}
	.global-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 12px;
		align-items: center;
		padding: 14px;
		border-radius: 18px;
		background: var(--card);
		box-shadow: inset 0 0 0 1px var(--border);
	}
	.global-row strong,
	.global-row span {
		display: block;
	}
	.global-row span {
		margin-top: 4px;
		color: var(--muted);
		font-size: 0.9rem;
	}
	.global-monitor {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 10px;
	}
	.global-pill {
		display: inline-flex;
		align-items: center;
		padding: 6px 10px;
		border-radius: 999px;
		background: #ffffff;
		color: var(--muted);
		font-size: 0.78rem;
		font-weight: 800;
		box-shadow: inset 0 0 0 1px rgba(20,41,64,0.08);
	}
	.global-pill-active {
		background: #dff4e7;
		color: #18834d;
		box-shadow: none;
	}
	.global-pill-ended {
		background: #fff2cc;
		color: #8a6200;
		box-shadow: none;
	}
	.global-pill-inactive {
		background: #e9edf5;
		color: #52657d;
		box-shadow: none;
	}
	.global-progress {
		height: 10px;
		margin-top: 12px;
		border-radius: 999px;
		background: #edf1fa;
		overflow: hidden;
		box-shadow: inset 0 0 0 1px rgba(20,41,64,0.08);
	}
	.global-progress > span {
		display: block;
		height: 100%;
		background: linear-gradient(90deg, #7bc843, #98d245);
		border-radius: 999px;
	}
	.global-empty {
		padding: 18px;
		border-radius: 18px;
		background: var(--card);
		color: var(--muted);
		text-align: center;
		box-shadow: inset 0 0 0 1px var(--border);
	}
	@media (max-width: 860px) {
		.global-grid {
			grid-template-columns: 1fr;
		}
	}
</style>

<?php if (!empty($flash_message)) { ?>
	<div class="panel" style="margin-bottom:16px; background:#e9f7ef; color:#1f5c3a;">
		<?php echo htmlspecialchars($flash_message, ENT_QUOTES, 'UTF-8'); ?>
	</div>
<?php } ?>

<?php if (!empty($flash_error)) { ?>
	<div class="panel" style="margin-bottom:16px; background:#fdecea; color:#7a2d2d;">
		<?php echo htmlspecialchars($flash_error, ENT_QUOTES, 'UTF-8'); ?>
	</div>
<?php } ?>

<section class="global-grid">
	<div class="global-card">
		<div class="global-head">
			<div>
				<h2>Metas globales</h2>
				<p>Metas visibles para toda la operacion con configuracion centralizada.</p>
			</div>
			<a class="btn" href="<?php echo site_url('global/metas/nueva'); ?>">Agregar meta</a>
		</div>

		<?php if (empty($global_goals)) { ?>
			<div class="global-empty">Todavia no hay metas globales configuradas.</div>
		<?php } else { ?>
			<div class="global-list">
				<?php foreach ($global_goals as $goal) { ?>
					<?php
						$status_label = isset($goal['status_label']) ? (string) $goal['status_label'] : (!empty($goal['is_active']) ? 'Activa' : 'Inactiva');
						$status_class = 'global-pill-inactive';
						if ($status_label === 'Activa') {
							$status_class = 'global-pill-active';
						} elseif ($status_label === 'Terminada') {
							$status_class = 'global-pill-ended';
						}
						$progress_percent = isset($goal['progress_percent']) ? (int) $goal['progress_percent'] : 0;
					?>
					<div class="global-row">
						<div>
							<strong><?php echo htmlspecialchars(isset($goal['name']) ? (string) $goal['name'] : 'Meta global', ENT_QUOTES, 'UTF-8'); ?></strong>
							<span>
								<?php echo htmlspecialchars(isset($goal['period_type']) ? ucfirst((string) $goal['period_type']) : 'Periodo', ENT_QUOTES, 'UTF-8'); ?>
								 -
								<?php echo htmlspecialchars(isset($goal['scope_type']) ? ucfirst((string) $goal['scope_type']) : 'General', ENT_QUOTES, 'UTF-8'); ?>
							</span>
							<div class="global-monitor">
								<span class="global-pill <?php echo $status_class; ?>"><?php echo htmlspecialchars($status_label, ENT_QUOTES, 'UTF-8'); ?></span>
								<span class="global-pill"><?php echo number_format((float) (isset($goal['current_value']) ? $goal['current_value'] : 0), 2); ?> actual</span>
								<span class="global-pill"><?php echo $progress_percent; ?>% avance</span>
								<span class="global-pill">Meta <?php echo number_format((float) (isset($goal['target_value']) ? $goal['target_value'] : 0), 2); ?></span>
							</div>
							<div class="global-progress"><span style="width: <?php echo max(0, min(100, $progress_percent)); ?>%;"></span></div>
						</div>
						<div style="display:flex; gap:8px; align-items:center;">
							<a class="btn btn-outline" href="<?php echo site_url('global/metas/'.(int) $goal['id']); ?>">Editar</a>
							<form method="post" action="<?php echo site_url('global/metas/'.(int) $goal['id'].'/eliminar'); ?>" onsubmit="return confirm('Eliminar esta meta global?');" style="margin:0;">
								<button class="btn" type="submit" style="background:#d96868; box-shadow:none;">Eliminar</button>
							</form>
						</div>
					</div>
				<?php } ?>
			</div>
		<?php } ?>
	</div>

	<div class="global-card">
		<div class="global-head">
			<div>
				<h2>Tareas globales</h2>
				<p>Reglas que se asignan a todos los empleados activos segun su recurrencia.</p>
			</div>
			<a class="btn" href="<?php echo site_url('global/tareas/nueva'); ?>">Agregar tarea</a>
		</div>

		<?php if (empty($global_rules)) { ?>
			<div class="global-empty">Todavia no hay tareas globales configuradas.</div>
		<?php } else { ?>
			<div class="global-list">
				<?php foreach ($global_rules as $rule) { ?>
					<div class="global-row">
						<div>
							<strong><?php echo htmlspecialchars(!empty($rule['display_name']) ? (string) $rule['display_name'] : 'Tarea global', ENT_QUOTES, 'UTF-8'); ?></strong>
							<span>
								<?php echo htmlspecialchars(!empty($rule['recurrence_label']) ? (string) $rule['recurrence_label'] : 'Sin recurrencia', ENT_QUOTES, 'UTF-8'); ?>
								 -
								<?php echo htmlspecialchars(!empty($rule['next_due_date_label']) ? 'Proxima: '.$rule['next_due_date_label'] : 'Sin fecha', ENT_QUOTES, 'UTF-8'); ?>
								 -
								<?php echo !empty($rule['is_active']) ? 'Activa' : 'Inactiva'; ?>
							</span>
						</div>
						<div style="display:flex; gap:8px; align-items:center;">
							<a class="btn btn-outline" href="<?php echo site_url('global/tareas/'.(int) $rule['id']); ?>">Editar</a>
							<form method="post" action="<?php echo site_url('global/tareas/'.(int) $rule['id'].'/eliminar'); ?>" onsubmit="return confirm('Eliminar esta tarea global y sus asignaciones?');" style="margin:0;">
								<button class="btn" type="submit" style="background:#d96868; box-shadow:none;">Eliminar</button>
							</form>
						</div>
					</div>
				<?php } ?>
			</div>
		<?php } ?>
	</div>
</section>

