<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<style>
	.detail-grid {
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		gap: 18px;
	}
	.detail-card {
		background: var(--panel);
		border-radius: 18px;
		padding: 16px;
		box-shadow: var(--shadow);
	}
	.item-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 8px 10px;
		border-radius: 12px;
		background: var(--card);
		box-shadow: inset 0 0 0 1px var(--border);
		margin-bottom: 8px;
	}
	.item-row form { margin: 0; }
	.note-list { margin-top: 12px; }
	.note-card {
		background: var(--card);
		border-radius: 12px;
		padding: 10px 12px;
		box-shadow: inset 0 0 0 1px var(--border);
		margin-bottom: 8px;
	}
	@media (max-width: 1100px) {
		.detail-grid { grid-template-columns: 1fr; }
	}
</style>

<div class="actions" style="margin-bottom:16px;">
	<a class="btn btn-outline" href="<?php echo site_url('tareas'); ?>">Volver</a>
</div>

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

<div class="detail-grid">
	<section class="detail-card">
		<h2 style="margin-top:0;"><?php echo htmlspecialchars((string) $assignment['title'], ENT_QUOTES, 'UTF-8'); ?></h2>
		<p class="note"><?php echo htmlspecialchars((string) $assignment['description'], ENT_QUOTES, 'UTF-8'); ?></p>
		<div class="note" style="margin-top:8px;">
			Asignada: <?php echo !empty($assignment['assigned_date']) ? date('d/m/Y', strtotime($assignment['assigned_date'])) : '-'; ?> ·
			Vence: <?php echo !empty($assignment['due_date']) ? date('d/m/Y', strtotime($assignment['due_date'])) : '-'; ?>
		</div>
		<div class="note" style="margin-top:6px;">
			Estado:
			<?php
				$status = isset($assignment['status']) ? (string)$assignment['status'] : 'pending';
				$status_label = 'Pendiente';
				$status_class = 'warning';
				if ($status === 'overdue') { $status_label = 'Vencida'; $status_class = 'danger'; }
				elseif ($status === 'in_progress') { $status_label = 'En progreso'; $status_class = 'warning'; }
				elseif ($status === 'completed') { $status_label = 'Completada'; $status_class = 'success'; }
			?>
			<span class="badge <?php echo $status_class; ?>"><?php echo $status_label; ?></span>
		</div>

		<h3 style="margin-top:18px;">Subtareas</h3>
		<?php if (empty($assignment['items'])) { ?>
			<div class="note">Sin subtareas.</div>
		<?php } else { ?>
			<?php foreach ($assignment['items'] as $item) { ?>
				<?php $completed = isset($item['status']) && $item['status'] === 'completed'; ?>
				<div class="item-row">
					<div>
						<strong><?php echo htmlspecialchars((string) $item['name'], ENT_QUOTES, 'UTF-8'); ?></strong>
						<?php if ($completed) { ?>
							<span class="badge success" style="margin-left:8px;">Completada</span>
						<?php } else { ?>
							<span class="badge warning" style="margin-left:8px;">Pendiente</span>
						<?php } ?>
					</div>
					<form method="post" action="<?php echo site_url('tareas/'.(int)$assignment['id']); ?>">
						<input type="hidden" name="action_type" value="toggle_item" />
						<input type="hidden" name="item_id" value="<?php echo (int)$item['id']; ?>" />
						<input type="hidden" name="is_completed" value="<?php echo $completed ? '0' : '1'; ?>" />
						<button class="btn btn-outline" type="submit"><?php echo $completed ? 'Marcar pendiente' : 'Completar'; ?></button>
					</form>
				</div>
			<?php } ?>
		<?php } ?>

		<?php if ($status === 'completed') { ?>
			<form method="post" action="<?php echo site_url('tareas/'.(int)$assignment['id']); ?>" style="margin-top:14px;">
				<input type="hidden" name="action_type" value="reactivate" />
				<div class="actions" style="justify-content:flex-end; margin-top:10px;">
					<button class="btn btn-outline" type="submit">Reactivar tarea</button>
				</div>
			</form>
		<?php } else { ?>
			<form method="post" action="<?php echo site_url('tareas/'.(int)$assignment['id']); ?>" style="margin-top:14px;">
				<input type="hidden" name="action_type" value="complete" />
				<label class="note" style="display:block; margin-bottom:6px;">Nota de cierre (opcional)</label>
				<textarea name="completion_note" style="width:100%; min-height:80px; border-radius:12px; border:0; padding:10px 12px; box-shadow: inset 0 0 0 1px var(--border); font-family: inherit;"></textarea>
				<div class="actions" style="justify-content:flex-end; margin-top:10px;">
					<button class="btn" type="submit">Marcar tarea completada</button>
				</div>
			</form>
		<?php } ?>
	</section>

	<section class="detail-card">
		<h3 style="margin-top:0;">Notas</h3>
		<form method="post" action="<?php echo site_url('tareas/'.(int)$assignment['id']); ?>">
			<input type="hidden" name="action_type" value="add_note" />
			<textarea name="note_text" style="width:100%; min-height:100px; border-radius:12px; border:0; padding:10px 12px; box-shadow: inset 0 0 0 1px var(--border); font-family: inherit;" placeholder="Agregar nota de seguimiento"></textarea>
			<div class="actions" style="justify-content:flex-end; margin-top:10px;">
				<button class="btn" type="submit">Guardar nota</button>
			</div>
		</form>

		<div class="note-list">
			<?php if (empty($assignment['notes'])) { ?>
				<div class="note">Sin notas registradas.</div>
			<?php } else { ?>
				<?php foreach ($assignment['notes'] as $note) { ?>
					<div class="note-card">
						<div><?php echo htmlspecialchars((string) $note['note_text'], ENT_QUOTES, 'UTF-8'); ?></div>
						<div class="note" style="margin-top:6px;">
							<?php echo htmlspecialchars((string) $note['note_type'], ENT_QUOTES, 'UTF-8'); ?> ·
							<?php echo !empty($note['created_at']) ? date('d/m/Y h:i A', strtotime($note['created_at'])) : '-'; ?>
						</div>
					</div>
				<?php } ?>
			<?php } ?>
		</div>
	</section>
</div>
