<?= $this->extend('layouts/app') ?>

<?= $this->section('content') ?>
<?php
$updateUrl = site_url('inspection-templates/' . $template['id'] . '/update');
$saveItemsUrl = site_url('inspection-templates/' . $template['id'] . '/items');
$schemaPayload = [
    'sections' => array_map(static function ($s) use ($template) {
        $sid = (int) $s['id'];
        $items = array_values(array_map(static function ($it) {
            return [
                'numero' => $it['numero'],
                'pregunta' => $it['pregunta'],
                'equipo' => $it['equipo'] ?? null,
                'frecuencia' => $it['frecuencia'],
                'tipo_campo' => $it['tipo_campo'],
                'opciones' => $it['opciones'] ? json_decode($it['opciones'], true) : null,
                'obligatorio' => (int) $it['obligatorio'],
            ];
        }, $template['items_by_section'][$sid] ?? []));
        return [
            'titulo' => $s['titulo'],
            'subtitulo' => $s['subtitulo'],
            'items' => $items,
        ];
    }, $template['sections']),
];
?>
<section class="card stack-md">
    <div class="section-head">
        <div>
            <h3><?= esc($template['code']) ?> — <?= esc($template['name']) ?></h3>
            <p><?= esc($template['form_code'] ?? '') ?> · Rev. <?= esc((string) $template['revision']) ?> · Modo: <?= esc($template['layout_mode']) ?></p>
        </div>
        <a class="btn btn-secondary" href="<?= site_url('inspection-templates') ?>">← Volver</a>
    </div>

    <form method="post" action="<?= esc($updateUrl) ?>" class="stack-md">
        <?= csrf_field() ?>
        <div class="grid grid-2">
            <div>
                <label>Código</label>
                <input type="text" name="code" value="<?= esc($template['code']) ?>" required>
            </div>
            <div>
                <label>Nombre</label>
                <input type="text" name="name" value="<?= esc($template['name']) ?>" required>
            </div>
        </div>
        <div class="grid grid-2">
            <div>
                <label>FORM.SE</label>
                <input type="text" name="form_code" value="<?= esc($template['form_code'] ?? '') ?>">
            </div>
            <div>
                <label>Modo</label>
                <select name="layout_mode">
                    <option value="checklist" <?= $template['layout_mode'] === 'checklist' ? 'selected' : '' ?>>Checklist</option>
                    <option value="equipment_table" <?= $template['layout_mode'] === 'equipment_table' ? 'selected' : '' ?>>Tabla de equipos</option>
                </select>
            </div>
        </div>
        <div>
            <label>Descripción</label>
            <textarea name="descripcion" rows="2"><?= esc($template['descripcion'] ?? '') ?></textarea>
        </div>
        <input type="hidden" name="activo" value="<?= (int) $template['activo'] ?>">
        <button class="btn btn-primary" type="submit">Guardar cabecera</button>
    </form>
</section>

<section class="card stack-md">
    <div class="section-head">
        <div>
            <h3>Secciones e ítems</h3>
            <p><?= $template['layout_mode'] === 'equipment_table'
                ? 'En modo tabla de equipos cada ítem es una columna. Tipo de campo recomendado: texto o numérico.'
                : 'Cada ítem genera una fila Sí/No/N-A/Lecturas/Comentarios o el tipo de campo que elijas.' ?></p>
        </div>
        <button type="button" class="btn btn-secondary" id="add-section-btn">Agregar sección</button>
    </div>

    <form id="schema-form" method="post" action="<?= esc($saveItemsUrl) ?>">
        <?= csrf_field() ?>
        <input type="hidden" name="schema" id="schema-input">
        <div id="sections-host" class="stack-md"></div>
        <div class="actions-row">
            <button class="btn btn-primary" type="submit">Guardar ítems</button>
        </div>
    </form>
</section>

<template id="section-tpl">
    <div class="card stack-sm tpl-section" data-section>
        <div class="section-head">
            <div style="flex:1">
                <label>Sección</label>
                <input type="text" data-field="titulo" class="sec-titulo">
            </div>
            <button type="button" class="link-button" data-act="del-section">Eliminar sección</button>
        </div>
        <div data-items class="stack-sm"></div>
        <button type="button" class="btn btn-secondary" data-act="add-item">+ Agregar ítem</button>
    </div>
</template>

<template id="item-tpl">
    <div class="tpl-item stack-sm" data-item style="border:1px dashed var(--border, #ddd); padding:.75rem; border-radius:.5rem;">
        <div class="grid grid-3">
            <div>
                <label>Número</label>
                <input type="text" data-field="numero" placeholder="23.01">
            </div>
            <div>
                <label>Equipo</label>
                <input type="text" data-field="equipo" placeholder="Ej. Bomba jockey">
            </div>
            <div>
                <label>Frecuencia</label>
                <select data-field="frecuencia">
                    <option value="">—</option>
                    <option value="M">M (Mensual)</option>
                    <option value="S">S (Semestral)</option>
                    <option value="A">A (Anual)</option>
                </select>
            </div>
        </div>
        <div>
            <label>Pregunta / etiqueta</label>
            <input type="text" data-field="pregunta">
        </div>
        <div class="grid grid-2">
            <div>
                <label>Tipo de campo</label>
                <select data-field="tipo_campo">
                    <option value="yes_no_na">Sí / No / N-A</option>
                    <option value="text">Texto</option>
                    <option value="numeric">Numérico</option>
                    <option value="checkbox">Casilla</option>
                    <option value="switch">Conmutador de opciones</option>
                    <option value="attachment">Adjunto (imagen/PDF/doc)</option>
                    <option value="signature">Firma</option>
                </select>
            </div>
            <div>
                <label><input type="checkbox" data-field="obligatorio"> Obligatorio</label>
            </div>
        </div>
        <div data-opciones-host hidden>
            <label>Opciones del conmutador (una por línea)</label>
            <textarea data-field="opciones" rows="2"></textarea>
        </div>
        <button type="button" class="link-button" data-act="del-item">Eliminar ítem</button>
    </div>
</template>

<script>
(() => {
    const initial = <?= json_encode($schemaPayload, JSON_UNESCAPED_UNICODE) ?>;
    const host = document.getElementById('sections-host');
    const secTpl = document.getElementById('section-tpl');
    const itemTpl = document.getElementById('item-tpl');
    const schemaInput = document.getElementById('schema-input');
    const form = document.getElementById('schema-form');

    function buildItem(data = {}) {
        const node = itemTpl.content.firstElementChild.cloneNode(true);
        node.querySelector('[data-field="numero"]').value = data.numero ?? '';
        node.querySelector('[data-field="equipo"]').value = data.equipo ?? '';
        node.querySelector('[data-field="frecuencia"]').value = data.frecuencia ?? '';
        node.querySelector('[data-field="pregunta"]').value = data.pregunta ?? '';
        node.querySelector('[data-field="tipo_campo"]').value = data.tipo_campo ?? 'yes_no_na';
        node.querySelector('[data-field="obligatorio"]').checked = !!data.obligatorio;
        const opcHost = node.querySelector('[data-opciones-host]');
        const opcTa = node.querySelector('[data-field="opciones"]');
        if (Array.isArray(data.opciones)) opcTa.value = data.opciones.join('\n');
        const tipoSel = node.querySelector('[data-field="tipo_campo"]');
        const syncOpciones = () => { opcHost.hidden = tipoSel.value !== 'switch'; };
        tipoSel.addEventListener('change', syncOpciones);
        syncOpciones();
        node.querySelector('[data-act="del-item"]').addEventListener('click', () => node.remove());
        return node;
    }

    function buildSection(data = {}) {
        const node = secTpl.content.firstElementChild.cloneNode(true);
        node.querySelector('[data-field="titulo"]').value = data.titulo ?? '';
        const items = node.querySelector('[data-items]');
        (data.items || []).forEach(it => items.appendChild(buildItem(it)));
        node.querySelector('[data-act="add-item"]').addEventListener('click', () => items.appendChild(buildItem()));
        node.querySelector('[data-act="del-section"]').addEventListener('click', () => node.remove());
        return node;
    }

    (initial.sections || []).forEach(s => host.appendChild(buildSection(s)));
    if ((initial.sections || []).length === 0) host.appendChild(buildSection({titulo: 'Sección 1', items: []}));

    document.getElementById('add-section-btn').addEventListener('click', () => host.appendChild(buildSection({titulo: '', items: []})));

    form.addEventListener('submit', () => {
        const sections = Array.from(host.querySelectorAll('[data-section]')).map(sec => ({
            titulo: sec.querySelector('[data-field="titulo"]').value.trim() || 'Sección',
            subtitulo: null,
            items: Array.from(sec.querySelectorAll('[data-item]')).map(it => {
                const tipo = it.querySelector('[data-field="tipo_campo"]').value;
                const opciones = tipo === 'switch'
                    ? it.querySelector('[data-field="opciones"]').value.split(/\r?\n/).map(s => s.trim()).filter(Boolean)
                    : null;
                return {
                    numero: it.querySelector('[data-field="numero"]').value.trim() || null,
                    equipo: it.querySelector('[data-field="equipo"]').value.trim() || null,
                    frecuencia: it.querySelector('[data-field="frecuencia"]').value || null,
                    pregunta: it.querySelector('[data-field="pregunta"]').value.trim(),
                    tipo_campo: tipo,
                    opciones,
                    obligatorio: it.querySelector('[data-field="obligatorio"]').checked,
                };
            }).filter(i => i.pregunta || i.numero),
        }));
        schemaInput.value = JSON.stringify({sections});
    });
})();
</script>
<?= $this->endSection() ?>
