<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<style>
	.form-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 12px;
		margin-bottom: 18px;
	}
	.form-grid input {
		padding: 10px 12px;
		border-radius: 12px;
		border: 0;
		box-shadow: inset 0 0 0 1px var(--border);
		font-family: inherit;
	}
	.color-field {
		display: grid;
		gap: 10px;
	}
	.color-picker-row {
		display: flex;
		align-items: center;
		gap: 12px;
	}
	.color-picker-row input[type="color"] {
		width: 56px;
		height: 40px;
		padding: 0;
		border-radius: 12px;
		border: 0;
		background: transparent;
		box-shadow: inset 0 0 0 1px var(--border);
		cursor: pointer;
	}
	.color-preview {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 14px;
		border-radius: 16px;
		background: var(--card);
		box-shadow: inset 0 0 0 1px var(--border);
	}
	.color-swatch {
		width: 34px;
		height: 34px;
		border-radius: 12px;
		box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
		flex-shrink: 0;
	}
	.color-preview strong,
	.color-preview span {
		display: block;
	}
	.color-preview span {
		color: var(--muted);
		font-size: 0.9rem;
	}
	.member-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 10px;
	}
	.member-card {
		background: var(--card);
		border-radius: 12px;
		padding: 10px 12px;
		box-shadow: inset 0 0 0 1px var(--border);
	}
</style>

<div class="actions" style="margin-bottom:16px;">
	<a class="btn btn-outline" href="<?php echo site_url('grupos'); ?>">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 } ?>

<?php $group_color = isset($group['color']) && trim((string)$group['color']) !== '' ? trim((string)$group['color']) : '#4d74c3'; ?>

<form method="post" class="panel" style="padding:18px;">
	<div class="form-grid">
		<div>
			<label class="note">Nombre</label>
			<input type="text" name="name" value="<?php echo htmlspecialchars(isset($group['name']) ? $group['name'] : '', ENT_QUOTES, 'UTF-8'); ?>" required />
		</div>
		<div class="color-field">
			<label class="note">Color</label>
			<div class="color-picker-row">
				<input id="group-color-picker" type="color" value="<?php echo htmlspecialchars($group_color, ENT_QUOTES, 'UTF-8'); ?>" />
				<input id="group-color-input" type="text" name="color" value="<?php echo htmlspecialchars($group_color, ENT_QUOTES, 'UTF-8'); ?>" />
			</div>
			<div class="color-preview">
				<div id="group-color-swatch" class="color-swatch" style="background:<?php echo htmlspecialchars($group_color, ENT_QUOTES, 'UTF-8'); ?>;"></div>
				<div>
					<strong id="group-color-value"><?php echo htmlspecialchars($group_color, ENT_QUOTES, 'UTF-8'); ?></strong>
					<span>Este sera el color visual del grupo.</span>
				</div>
			</div>
		</div>
		<div>
			<label class="note">Orden</label>
			<input type="number" name="sort_order" value="<?php echo htmlspecialchars(isset($group['sort_order']) ? $group['sort_order'] : '0', ENT_QUOTES, 'UTF-8'); ?>" />
		</div>
		<div style="display:flex; align-items:flex-end; gap:10px;">
			<label style="display:flex; align-items:center; gap:8px;">
				<input type="checkbox" name="is_active" value="1" <?php echo empty($group) || !empty($group['is_active']) ? 'checked' : ''; ?> />
				Activo
			</label>
		</div>
	</div>

	<h3>Miembros</h3>
	<div class="member-grid">
		<?php foreach ((array) $employees as $employee) { ?>
			<?php $employee_id = (int)$employee['person_id']; ?>
			<label class="member-card">
				<input type="checkbox" name="members[]" value="<?php echo $employee_id; ?>" <?php echo in_array($employee_id, (array)$selected_members, TRUE) ? 'checked' : ''; ?> />
				<?php echo htmlspecialchars($employee['full_name'], ENT_QUOTES, 'UTF-8'); ?>
			</label>
		<?php } ?>
	</div>

	<div class="actions" style="justify-content:flex-end; margin-top:16px;">
		<button class="btn" type="submit">Guardar grupo</button>
	</div>
</form>

<script>
(function () {
	const colorInput = document.getElementById('group-color-input');
	const colorPicker = document.getElementById('group-color-picker');
	const colorSwatch = document.getElementById('group-color-swatch');
	const colorValue = document.getElementById('group-color-value');

	if (!colorInput || !colorPicker || !colorSwatch || !colorValue) {
		return;
	}

	function normalizeHex(value) {
		const raw = String(value || '').trim();
		if (/^#[0-9a-fA-F]{6}$/.test(raw)) {
			return raw;
		}

		if (/^[0-9a-fA-F]{6}$/.test(raw)) {
			return '#' + raw;
		}

		return null;
	}

	function syncColor(value, fromTextInput) {
		const normalized = normalizeHex(value) || '#4d74c3';
		colorSwatch.style.background = normalized;
		colorValue.textContent = normalized;
		if (!fromTextInput || normalizeHex(colorInput.value) !== normalized) {
			colorInput.value = normalized;
		}
		if (colorPicker.value !== normalized) {
			colorPicker.value = normalized;
		}
	}

	colorPicker.addEventListener('input', function () {
		syncColor(colorPicker.value, false);
	});

	colorInput.addEventListener('input', function () {
		const normalized = normalizeHex(colorInput.value);
		colorSwatch.style.background = normalized || '#4d74c3';
		colorValue.textContent = normalized || colorInput.value.trim() || '#4d74c3';
		if (normalized) {
			colorPicker.value = normalized;
		}
	});

	colorInput.addEventListener('blur', function () {
		syncColor(colorInput.value, true);
	});

	syncColor(colorInput.value, true);
})();
</script>
