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

		<h2 style="margin-bottom:16px;"><?php echo htmlspecialchars($title, ENT_QUOTES, 'UTF-8'); ?></h2>

		<div style="display:grid; gap:12px;">
			<?php foreach ($fields as $index => $field) { ?>
				<?php $section_id = 'pref-section-'.preg_replace('/[^a-z0-9\-]+/i', '-', $field['name']); ?>
				<div style="background:rgba(255,255,255,0.08); border-radius:18px; overflow:hidden;">
					<button
						type="button"
						class="pref-toggle"
						data-target="<?php echo htmlspecialchars($section_id, ENT_QUOTES, 'UTF-8'); ?>"
						style="width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border:0; background:var(--button); color:var(--button-ink); font:inherit; font-weight:700; text-align:left;"
					>
						<span><?php echo htmlspecialchars($field['label'], ENT_QUOTES, 'UTF-8'); ?></span>
						<span class="pref-toggle-icon"><?php echo $index === 0 ? '-' : '+'; ?></span>
					</button>
					<div
						id="<?php echo htmlspecialchars($section_id, ENT_QUOTES, 'UTF-8'); ?>"
						class="pref-toggle-body"
						style="display:<?php echo $index === 0 ? 'block' : 'none'; ?>; padding:16px 0 4px;"
					>
						<div class="field" style="margin-top:0; padding:0 2px;">
							<?php if ($field['type'] === 'color') { ?>
								<div style="display:flex; gap:12px; align-items:center;">
									<input
										id="<?php echo htmlspecialchars($field['name'], ENT_QUOTES, 'UTF-8'); ?>"
										type="color"
										name="<?php echo htmlspecialchars($field['name'], ENT_QUOTES, 'UTF-8'); ?>"
										value="<?php echo htmlspecialchars($field['value'], ENT_QUOTES, 'UTF-8'); ?>"
										style="width:72px; min-width:72px; padding:6px; height:52px;"
									/>
									<input type="text" value="<?php echo htmlspecialchars($field['value'], ENT_QUOTES, 'UTF-8'); ?>" readonly />
								</div>
							<?php } else { ?>
								<input
									id="<?php echo htmlspecialchars($field['name'], ENT_QUOTES, 'UTF-8'); ?>"
									type="number"
									step="0.10"
									min="0.5"
									max="10"
									name="<?php echo htmlspecialchars($field['name'], ENT_QUOTES, 'UTF-8'); ?>"
									value="<?php echo htmlspecialchars(number_format((float)$field['value'], 2, '.', ''), ENT_QUOTES, 'UTF-8'); ?>"
								/>
							<?php } ?>
						</div>
					</div>
				</div>
			<?php } ?>
		</div>

		<div class="actions" style="justify-content:flex-end; margin-top:22px;">
			<button class="btn" type="submit">Guardar</button>
		</div>
	</form>
</section>
<script>
document.addEventListener('DOMContentLoaded', function () {
	var toggles = document.querySelectorAll('.pref-toggle');
	toggles.forEach(function (toggle) {
		toggle.addEventListener('click', function () {
			var targetId = toggle.getAttribute('data-target');
			var body = document.getElementById(targetId);
			if (!body) {
				return;
			}

			var isOpen = body.style.display !== 'none';
			body.style.display = isOpen ? 'none' : 'block';
			var icon = toggle.querySelector('.pref-toggle-icon');
			if (icon) {
				icon.textContent = isOpen ? '+' : '-';
			}
		});
	});
});
</script>
