<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<?php $template = is_array($template) ? $template : array(); ?>
<section class="panel">
	<form method="post" action="" autocomplete="off" id="task-template-form" style="display:grid; gap:18px;">
		<div class="actions" style="justify-content:flex-start; margin-top:0; margin-bottom:4px;">
			<a class="btn btn-outline" href="<?php echo site_url('configuracion/tareas'); ?>">Regresar</a>
		</div>

		<h2 style="margin-bottom:0;"><?php echo !empty($template['id']) ? 'Editar plantilla' : 'Nueva plantilla'; ?></h2>
		<?php if (validation_errors()) { ?>
			<div style="padding:12px 14px; border-radius:16px; background:#fdecec; color:#8a1f1f; font-weight:700;">
				<?php echo validation_errors('', ' '); ?>
			</div>
		<?php } ?>

		<div class="field" style="margin-top:0;">
			<label for="name">Nombre</label>
			<input id="name" type="text" name="name" value="<?php echo htmlspecialchars(set_value('name', isset($template['name']) ? $template['name'] : ''), ENT_QUOTES, 'UTF-8'); ?>" />
		</div>

		<div class="field" style="margin-top:0;">
			<label for="description">Descripcion</label>
			<textarea id="description" name="description" placeholder="Describe brevemente esta tarea"><?php echo htmlspecialchars(set_value('description', isset($template['description']) ? $template['description'] : ''), ENT_QUOTES, 'UTF-8'); ?></textarea>
		</div>

		<div class="field" style="margin-top:0;">
			<label>Subtareas</label>
			<div style="display:grid; gap:10px;">
				<div id="task-template-items-editor" style="display:grid; gap:10px;"></div>
				<div class="actions" style="justify-content:flex-start; margin-top:0;">
					<button class="btn btn-outline" type="button" id="add-child-item">Agregar subtarea</button>
				</div>
				<div style="font-size:calc(0.85rem * var(--app-text-size)); color:var(--muted);">
					El nombre de arriba es la tarea principal. Aqui solo agregas las subtareas que quieres asignar.
				</div>
			</div>
			<textarea id="items_text" name="items_text" style="display:none;"><?php echo htmlspecialchars(set_value('items_text', $items_text), ENT_QUOTES, 'UTF-8'); ?></textarea>
		</div>

		<label style="display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink);">
			<input type="checkbox" name="is_active" value="1" <?php echo set_checkbox('is_active', '1', !isset($template['is_active']) || !empty($template['is_active'])); ?> />
			<span>Plantilla activa</span>
		</label>

		<div class="actions" style="justify-content:flex-end;">
			<button class="btn" type="submit">Guardar</button>
		</div>
	</form>
</section>
<script>
document.addEventListener('DOMContentLoaded', function () {
	var form = document.getElementById('task-template-form');
	var editor = document.getElementById('task-template-items-editor');
	var hiddenTextarea = document.getElementById('items_text');
	var addChildButton = document.getElementById('add-child-item');

	var createRow = function (value) {
		var wrapper = document.createElement('div');
		wrapper.className = 'task-template-row';
		wrapper.style.display = 'grid';
		wrapper.style.gridTemplateColumns = 'auto 1fr auto';
		wrapper.style.gap = '10px';
		wrapper.style.alignItems = 'center';
		wrapper.style.padding = '12px 14px';
		wrapper.style.borderRadius = '18px';
		wrapper.style.background = 'var(--card)';

		var badge = document.createElement('span');
		badge.textContent = 'Sub';
		badge.style.fontWeight = '800';
		badge.style.color = 'var(--ink)';

		var input = document.createElement('input');
		input.type = 'text';
		input.value = value || '';
		input.placeholder = 'Nombre de la subtarea';

		var remove = document.createElement('button');
		remove.type = 'button';
		remove.className = 'btn btn-outline';
		remove.textContent = 'Quitar';
		remove.addEventListener('click', function () {
			wrapper.remove();
		});

		wrapper.appendChild(badge);
		wrapper.appendChild(input);
		wrapper.appendChild(remove);
		return wrapper;
	};

	var seedFromTextarea = function () {
		var text = hiddenTextarea ? hiddenTextarea.value.replace(/\r\n/g, '\n') : '';
		if (!text.trim()) {
			return;
		}
		text.split('\n').forEach(function (line) {
			var raw = line.trim();
			if (!raw) {
				return;
			}
			editor.appendChild(createRow(raw.replace(/^\-\s*/, '')));
		});
	};

	var serializeToTextarea = function () {
		var lines = [];
		Array.prototype.slice.call(editor.querySelectorAll('.task-template-row')).forEach(function (row) {
			var input = row.querySelector('input');
			var value = input ? input.value.trim() : '';
			if (!value) {
				return;
			}
			lines.push(value);
		});
		hiddenTextarea.value = lines.join('\n');
	};

	if (addChildButton) {
		addChildButton.addEventListener('click', function () {
			editor.appendChild(createRow(''));
		});
	}

	if (form) {
		form.addEventListener('submit', function () {
			serializeToTextarea();
		});
	}

	seedFromTextarea();
});
</script>
