<?php
$edited = can_action('54', 'edited');
?>

<div class="space-y-6">
	<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
		<div>
			<h3 class="text-base font-semibold text-slate-900 dark:text-white"><?= lang('all') . ' ' . lang('sub_tasks') ?></h3>
			<p class="text-sm text-slate-500 dark:text-slate-400"><?= lang('task') . ' #' . $task_details->task_id; ?></p>
		</div>
		<?php if (!empty($edited)) { ?>
			<a href="<?= base_url('admin/tasks/create/sub_tasks/' . $task_details->task_id) ?>"
				class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
				<i data-lucide="plus" class="h-4 w-4"></i>
				<?= lang('new') . ' ' . lang('sub_tasks') ?>
			</a>
		<?php } ?>
	</div>

	<div class="overflow-hidden rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900">
		<table class="min-w-full text-sm">
			<thead class="bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-300">
				<tr>
					<th class="px-4 py-3"></th>
					<th class="px-4 py-3 text-left"><?= lang('task_name') ?></th>
					<th class="px-4 py-3 text-left"><?= lang('due_date') ?></th>
					<th class="px-4 py-3 text-left"><?= lang('progress') ?></th>
					<th class="px-4 py-3 text-left"><?= lang('status') ?></th>
					<th class="px-4 py-3 text-right"><?= lang('changes/view') ?></th>
				</tr>
			</thead>
			<tbody class="divide-y divide-slate-200 dark:divide-slate-800">
				<?php
				$all_sub_tasks = get_result('tbl_task', array('sub_task_id' => $task_details->task_id));
				if (!empty($all_sub_tasks)) : foreach ($all_sub_tasks as $key => $v_task) :
						$due_date = $v_task->due_date;
						$due_time = safe_strtotime($due_date);
						$current_time = safe_strtotime(date('Y-m-d'));
						$overdue = ($current_time > $due_time && $v_task->task_progress < 100);
						if ($v_task->task_status == 'completed') {
							$label = 'bg-emerald-50 text-emerald-700 border-emerald-200';
						} elseif ($v_task->task_status == 'not_started') {
							$label = 'bg-slate-100 text-slate-600 border-slate-200';
						} elseif ($v_task->task_status == 'deferred') {
							$label = 'bg-rose-50 text-rose-700 border-rose-200';
						} else {
							$label = 'bg-amber-50 text-amber-700 border-amber-200';
						}
				?>
						<tr>
							<td class="px-4 py-3">
								<input type="checkbox" class="js-subtask-complete-toggle h-4 w-4 rounded border-border text-emerald-600 focus:ring-2 focus:ring-emerald-500/20" data-id="<?= $v_task->task_id ?>" <?php if ($v_task->task_progress >= 100) echo 'checked'; ?> <?= empty($edited) ? 'disabled' : '' ?>>
							</td>
							<td class="px-4 py-3">
								<a class="text-slate-900 dark:text-white font-medium" style="<?= $v_task->task_progress >= 100 ? 'text-decoration: line-through;' : '' ?>"
									href="<?= base_url() ?>admin/tasks/details/<?= $v_task->task_id ?>">
									<?= $v_task->task_name; ?>
								</a>
							</td>
							<td class="px-4 py-3">
								<span class="<?= $overdue ? 'text-rose-600' : 'text-slate-600 dark:text-slate-300' ?>">
									<?= display_date($due_date) ?>
								</span>
								<?php if ($overdue) { ?>
									<span class="ml-2 inline-flex items-center rounded-full border border-rose-200 bg-rose-50 px-2 py-0.5 text-xs font-semibold text-rose-700"><?= lang('overdue') ?></span>
								<?php } ?>
							</td>
							<td class="px-4 py-3">
								<div class="flex items-center gap-2">
									<div class="h-2 w-24 rounded-full bg-slate-100 dark:bg-slate-700">
										<div class="h-2 rounded-full bg-indigo-600" style="width: <?= $v_task->task_progress ?>%"></div>
									</div>
									<span class="text-xs text-slate-500"><?= $v_task->task_progress ?>%</span>
								</div>
							</td>
							<td class="px-4 py-3">
								<span class="inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-semibold <?= $label ?>"><?= lang($v_task->task_status) ?></span>
							</td>
							<td class="px-4 py-3 text-right">
								<?= btn_view('admin/tasks/details/' . $v_task->task_id) ?>
								<?php if (!empty($edited)) { ?>
									<?= btn_edit('admin/tasks/create/' . $v_task->task_id) ?>
								<?php } ?>
							</td>
						</tr>
				<?php endforeach;
				endif; ?>
			</tbody>
		</table>
	</div>
</div>

<script>
	(function($) {
		if (window.__taskSubTabToggleBound) {
			return;
		}
		window.__taskSubTabToggleBound = true;

		$(document).on('change', '.js-subtask-complete-toggle', function() {
			const el = this;
			const taskId = $(el).data('id');
			if (!taskId) {
				return;
			}

			const isChecked = $(el).is(':checked');
			$(el).prop('disabled', true);

			$.ajax({
				url: base_url + 'admin/tasks/completed_tasks/' + taskId,
				type: 'POST',
				dataType: 'json',
				data: {
					task_progress: isChecked ? 100 : 0,
					task_status: isChecked ? 'completed' : 'not_started',
					csrf_token: typeof getCookie === 'function' ? getCookie('csrf_cookie') : ''
				}
			}).always(function() {
				window.location.reload();
			});
		});
	})(jQuery);
</script>
