{% extends "base.html" %}
{% block title %}{{ _('Struttura') }} {{ struttura.id_struttura if struttura and struttura.id_struttura else _('New') }}{% endblock %}

{% block content %}
<div class="page-header">
    <h2><i class="fas fa-archway"></i>
        {% if struttura and struttura.id_struttura %}{{ _('Edit Struttura') }} #{{ struttura.id_struttura }}{% else %}{{ _('New Struttura') }}{% endif %}
    </h2>
    <a href="{{ url_for('struttura_list') }}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left"></i> {{ _('Back') }}
    </a>
</div>

<form method="POST" id="strutturaForm">
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#tab-basic">{{ _('Identification') }}</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-desc">{{ _('Description') }}</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-articolazione">{{ _('Articolazione') }}</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-rapporti">{{ _('Rapporti') }}</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-elementi-costruttivi">{{ _('Elementi costruttivi') }}</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-misure">{{ _('Misure') }}</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-stato-conservazione">{{ _('Stato conservazione') }}</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-dati-architettura">{{ _('Dati architettura') }}</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-dati-archeologici">{{ _('Dati archeologici') }}</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-crono">{{ _('Chronology') }}</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-media">{{ _('Media') }} ({{ media|length if media else 0 }})</a></li>
    </ul>
    <div class="tab-content border border-top-0 p-3">
        <!-- Identification -->
        <div class="tab-pane fade show active" id="tab-basic">
            <div class="row g-2">
                <div class="col-md-6">
                    <label class="form-label">{{ _('Site') }} *</label>
                    <input type="text" name="sito" class="form-control" value="{{ struttura.sito or '' }}" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ _('Sigla Struttura') }}</label>
                    <select name="sigla_struttura" id="sel-sigla_struttura" class="form-select" data-current="{{ struttura.sigla_struttura or '' }}"><option value="{{ struttura.sigla_struttura or '' }}" selected>{{ struttura.sigla_struttura or '—' }}</option></select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ _('Numero Struttura') }}</label>
                    <input type="number" name="numero_struttura" class="form-control" value="{{ struttura.numero_struttura if struttura.numero_struttura is not none else '' }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">{{ _('Categoria Struttura') }}</label>
                    <select name="categoria_struttura" id="sel-categoria_struttura" class="form-select" data-current="{{ struttura.categoria_struttura or '' }}"><option value="{{ struttura.categoria_struttura or '' }}" selected>{{ struttura.categoria_struttura or '—' }}</option></select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">{{ _('Tipologia Struttura') }}</label>
                    <select name="tipologia_struttura" id="sel-tipologia_struttura" class="form-select" data-current="{{ struttura.tipologia_struttura or '' }}"><option value="{{ struttura.tipologia_struttura or '' }}" selected>{{ struttura.tipologia_struttura or '—' }}</option></select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">{{ _('Definizione Struttura') }}</label>
                    <select name="definizione_struttura" id="sel-definizione_struttura" class="form-select" data-current="{{ struttura.definizione_struttura or '' }}"><option value="{{ struttura.definizione_struttura or '' }}" selected>{{ struttura.definizione_struttura or '—' }}</option></select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">{{ _('Data Compilazione') }}</label>
                    <input type="text" name="data_compilazione" class="form-control" value="{{ struttura.data_compilazione or '' }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">{{ _('Nome Compilatore') }}</label>
                    <input type="text" name="nome_compilatore" class="form-control" value="{{ struttura.nome_compilatore or '' }}">
                </div>
            </div>
        </div>
        <!-- Description -->
        <div class="tab-pane fade" id="tab-desc">
            <div class="row g-2">
                <div class="col-md-6">
                    <label class="form-label">{{ _('Descrizione') }}</label>
                    <textarea name="descrizione" class="form-control" rows="3">{{ struttura.descrizione or '' }}</textarea>
                </div>
                <div class="col-md-6">
                    <label class="form-label">{{ _('Interpretazione') }}</label>
                    <textarea name="interpretazione" class="form-control" rows="3">{{ struttura.interpretazione or '' }}</textarea>
                </div>
                <div class="col-md-4">
                    <label class="form-label">{{ _('Quota') }}</label>
                    <input type="number" step="any" name="quota" class="form-control" value="{{ struttura.quota if struttura.quota is not none else '' }}">
                </div>
                <div class="col-md-8">
                    <label class="form-label">{{ _('Relazione Topografica') }}</label>
                    <input type="text" name="relazione_topografica" class="form-control" value="{{ struttura.relazione_topografica or '' }}">
                </div>
            </div>
        </div>
        <!-- Articolazione -->
        <div class="tab-pane fade" id="tab-articolazione">
            <div class="row g-2">
                <div class="col-md-3">
                    <label class="form-label">{{ _('Orientamento Ingresso') }}</label>
                    <select name="orientamento_ingresso" class="form-select">
                        <option value="">-- --</option>
                        <option value="N" {{ 'selected' if struttura.orientamento_ingresso == 'N' else '' }}>N</option>
                        <option value="NE" {{ 'selected' if struttura.orientamento_ingresso == 'NE' else '' }}>NE</option>
                        <option value="E" {{ 'selected' if struttura.orientamento_ingresso == 'E' else '' }}>E</option>
                        <option value="SE" {{ 'selected' if struttura.orientamento_ingresso == 'SE' else '' }}>SE</option>
                        <option value="S" {{ 'selected' if struttura.orientamento_ingresso == 'S' else '' }}>S</option>
                        <option value="SO" {{ 'selected' if struttura.orientamento_ingresso == 'SO' else '' }}>SO</option>
                        <option value="O" {{ 'selected' if struttura.orientamento_ingresso == 'O' else '' }}>O</option>
                        <option value="NO" {{ 'selected' if struttura.orientamento_ingresso == 'NO' else '' }}>NO</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ _('Articolazione') }}</label>
                    <select name="articolazione" class="form-select">
                        <option value="">-- --</option>
                        <option value="AMBIENTE UNICO" {{ 'selected' if struttura.articolazione == 'AMBIENTE UNICO' else '' }}>AMBIENTE UNICO</option>
                        <option value="AMBIENTE COMPOSITO" {{ 'selected' if struttura.articolazione == 'AMBIENTE COMPOSITO' else '' }}>AMBIENTE COMPOSITO</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ _('N. Ambienti') }}</label>
                    <input type="number" name="n_ambienti" class="form-control" value="{{ struttura.n_ambienti if struttura.n_ambienti is not none else '' }}">
                </div>
                <div class="col-md-9">
                    <label class="form-label">{{ _('Sviluppo Planimetrico') }}</label>
                    <select name="sviluppo_planimetrico" id="sel-sviluppo_planimetrico" class="form-select" data-current="{{ struttura.sviluppo_planimetrico or '' }}"><option value="{{ struttura.sviluppo_planimetrico or '' }}" selected>{{ struttura.sviluppo_planimetrico or '—' }}</option></select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">{{ _('Motivo Decorativo') }}</label>
                    <input type="text" name="motivo_decorativo" class="form-control" value="{{ struttura.motivo_decorativo or '' }}">
                </div>
                <div class="col-md-6">
                    <label class="form-label">{{ _('Potenzialità Archeologica') }}</label>
                    <select name="potenzialita_archeologica" class="form-select">
                        <option value="">-- --</option>
                        <option value="NULLA" {{ 'selected' if struttura.potenzialita_archeologica == 'NULLA' else '' }}>NULLA</option>
                        <option value="BASSA" {{ 'selected' if struttura.potenzialita_archeologica == 'BASSA' else '' }}>BASSA</option>
                        <option value="MEDIA" {{ 'selected' if struttura.potenzialita_archeologica == 'MEDIA' else '' }}>MEDIA</option>
                        <option value="ALTA" {{ 'selected' if struttura.potenzialita_archeologica == 'ALTA' else '' }}>ALTA</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">{{ _('Elementi Datanti') }}</label>
                    <input type="text" name="elementi_datanti" class="form-control" value="{{ struttura.elementi_datanti or '' }}">
                </div>
            </div>
        </div>
        <!-- Repeatable sub-tables (10 list-of-lists columns, str()-repr
             serialized to match the classic pyarchinit plugin's format
             exactly — see StrutturaService._normalize_pylist / parse_pylist).
             Grouped into the SAME tabs the classic plugin's Struttura form
             uses: Rapporti / Elementi costruttivi / Misure / Stato
             conservazione / Dati architettura / Dati archeologici. -->
        <div class="tab-pane fade" id="tab-elementi-costruttivi">
            <fieldset class="mb-4">
                <legend class="h6">{{ _('Materiali Impiegati') }}</legend>
                <table class="table table-sm table-bordered align-middle" id="materiali_impiegati_table">
                    <thead><tr><th>{{ _('Materiali') }}</th><th style="width:2.5rem;"></th></tr></thead>
                    <tbody id="materiali_impiegati_tbody"></tbody>
                </table>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="materiali_impiegati_add"><i class="fas fa-plus"></i> {{ _('Aggiungi riga') }}</button>
                <input type="hidden" name="materiali_impiegati" id="materiali_impiegati_hidden">
                <datalist id="thes-materiali_impiegati"></datalist>
            </fieldset>

            <fieldset class="mb-4">
                <legend class="h6">{{ _('Elementi Strutturali') }}</legend>
                <table class="table table-sm table-bordered align-middle" id="elementi_strutturali_table">
                    <thead><tr><th>{{ _('Tipologia elemento') }}</th><th>{{ _('Quantità') }}</th><th style="width:2.5rem;"></th></tr></thead>
                    <tbody id="elementi_strutturali_tbody"></tbody>
                </table>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="elementi_strutturali_add"><i class="fas fa-plus"></i> {{ _('Aggiungi riga') }}</button>
                <input type="hidden" name="elementi_strutturali" id="elementi_strutturali_hidden">
                <datalist id="thes-elementi_strutturali"></datalist>
            </fieldset>
        </div>
        <div class="tab-pane fade" id="tab-rapporti">
            <fieldset class="mb-4">
                <legend class="h6">{{ _('Rapporti Struttura') }}</legend>
                <table class="table table-sm table-bordered align-middle" id="rapporti_struttura_table">
                    <thead><tr><th>{{ _('Tipo di rapporto') }}</th><th>{{ _('Sito') }}</th><th>{{ _('Sigla') }}</th><th>{{ _('Numero') }}</th><th style="width:2.5rem;"></th></tr></thead>
                    <tbody id="rapporti_struttura_tbody"></tbody>
                </table>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="rapporti_struttura_add"><i class="fas fa-plus"></i> {{ _('Aggiungi riga') }}</button>
                <input type="hidden" name="rapporti_struttura" id="rapporti_struttura_hidden">
                <datalist id="thes-rapporti_sigla"></datalist>
            </fieldset>
        </div>
        <div class="tab-pane fade" id="tab-misure">
            <fieldset class="mb-4">
                <legend class="h6">{{ _('Misure Struttura') }}</legend>
                <table class="table table-sm table-bordered align-middle" id="misure_struttura_table">
                    <thead><tr><th>{{ _('Ubicazione') }}</th><th>{{ _('Elementi architettonici') }}</th><th>{{ _('Tipo misura') }}</th><th>{{ _('Unità di misura') }}</th><th>{{ _('Valore') }}</th><th style="width:2.5rem;"></th></tr></thead>
                    <tbody id="misure_struttura_tbody"></tbody>
                </table>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="misure_struttura_add"><i class="fas fa-plus"></i> {{ _('Aggiungi riga') }}</button>
                <input type="hidden" name="misure_struttura" id="misure_struttura_hidden">
                <datalist id="thes-misure_elementi_arch"></datalist>
                <datalist id="thes-misure_tipo"></datalist>
                <datalist id="thes-misure_unita"></datalist>
            </fieldset>
        </div>
        <div class="tab-pane fade" id="tab-stato-conservazione">
            <fieldset class="mb-4">
                <legend class="h6">{{ _('Stato di Conservazione') }}</legend>
                <table class="table table-sm table-bordered align-middle" id="stato_conservazione_table">
                    <thead><tr><th>{{ _('Stato') }}</th><th>{{ _('Grado') }}</th><th>{{ _('Fattori agenti') }}</th><th style="width:2.5rem;"></th></tr></thead>
                    <tbody id="stato_conservazione_tbody"></tbody>
                </table>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="stato_conservazione_add"><i class="fas fa-plus"></i> {{ _('Aggiungi riga') }}</button>
                <input type="hidden" name="stato_conservazione" id="stato_conservazione_hidden">
                <datalist id="thes-stato_fattori"></datalist>
            </fieldset>
        </div>
        <div class="tab-pane fade" id="tab-dati-architettura">
            <fieldset class="mb-4">
                <legend class="h6">{{ _('Prospetto Ingresso') }}</legend>
                <table class="table table-sm table-bordered align-middle" id="prospetto_ingresso_table">
                    <thead><tr><th>{{ _('Prospetto') }}</th><th style="width:2.5rem;"></th></tr></thead>
                    <tbody id="prospetto_ingresso_tbody"></tbody>
                </table>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="prospetto_ingresso_add"><i class="fas fa-plus"></i> {{ _('Aggiungi riga') }}</button>
                <input type="hidden" name="prospetto_ingresso" id="prospetto_ingresso_hidden">
                <datalist id="thes-prospetto_ingresso"></datalist>
            </fieldset>

            <fieldset class="mb-4">
                <legend class="h6">{{ _('Orientamento Ambienti') }}</legend>
                <table class="table table-sm table-bordered align-middle" id="orientamento_ambienti_table">
                    <thead><tr><th>{{ _('Orientamento') }}</th><th style="width:2.5rem;"></th></tr></thead>
                    <tbody id="orientamento_ambienti_tbody"></tbody>
                </table>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="orientamento_ambienti_add"><i class="fas fa-plus"></i> {{ _('Aggiungi riga') }}</button>
                <input type="hidden" name="orientamento_ambienti" id="orientamento_ambienti_hidden">
            </fieldset>

            <fieldset class="mb-4">
                <legend class="h6">{{ _('Elementi Costitutivi') }}</legend>
                <table class="table table-sm table-bordered align-middle" id="elementi_costitutivi_table">
                    <thead><tr><th>{{ _('Elemento') }}</th><th style="width:2.5rem;"></th></tr></thead>
                    <tbody id="elementi_costitutivi_tbody"></tbody>
                </table>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="elementi_costitutivi_add"><i class="fas fa-plus"></i> {{ _('Aggiungi riga') }}</button>
                <input type="hidden" name="elementi_costitutivi" id="elementi_costitutivi_hidden">
                <datalist id="thes-elementi_costitutivi"></datalist>
            </fieldset>
        </div>
        <div class="tab-pane fade" id="tab-dati-archeologici">
            <fieldset class="mb-4">
                <legend class="h6">{{ _('Manufatti') }}</legend>
                <table class="table table-sm table-bordered align-middle" id="manufatti_table">
                    <thead><tr><th>{{ _('Manufatto') }}</th><th style="width:2.5rem;"></th></tr></thead>
                    <tbody id="manufatti_tbody"></tbody>
                </table>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="manufatti_add"><i class="fas fa-plus"></i> {{ _('Aggiungi riga') }}</button>
                <input type="hidden" name="manufatti" id="manufatti_hidden">
                <datalist id="thes-manufatti"></datalist>
            </fieldset>

            <fieldset class="mb-2">
                <legend class="h6">{{ _('Fasi Funzionali') }}</legend>
                <table class="table table-sm table-bordered align-middle" id="fasi_funzionali_table">
                    <thead><tr><th>{{ _('Ambiente') }}</th><th>{{ _('Periodizzazione') }}</th><th>{{ _('Definizione e fasi funzionali') }}</th><th style="width:2.5rem;"></th></tr></thead>
                    <tbody id="fasi_funzionali_tbody"></tbody>
                </table>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="fasi_funzionali_add"><i class="fas fa-plus"></i> {{ _('Aggiungi riga') }}</button>
                <input type="hidden" name="fasi_funzionali" id="fasi_funzionali_hidden">
                <datalist id="thes-fasi_definizione"></datalist>
            </fieldset>
        </div>
        <!-- Chronology -->
        <div class="tab-pane fade" id="tab-crono">
            <div class="row g-2">
                <div class="col-md-3">
                    <label class="form-label">{{ _('Periodo Iniziale') }}</label>
                    <input type="number" name="periodo_iniziale" class="form-control" value="{{ struttura.periodo_iniziale if struttura.periodo_iniziale is not none else '' }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ _('Fase Iniziale') }}</label>
                    <input type="number" name="fase_iniziale" class="form-control" value="{{ struttura.fase_iniziale if struttura.fase_iniziale is not none else '' }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ _('Periodo Finale') }}</label>
                    <input type="number" name="periodo_finale" class="form-control" value="{{ struttura.periodo_finale if struttura.periodo_finale is not none else '' }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ _('Fase Finale') }}</label>
                    <input type="number" name="fase_finale" class="form-control" value="{{ struttura.fase_finale if struttura.fase_finale is not none else '' }}">
                </div>
                <div class="col-md-12">
                    <label class="form-label">{{ _('Datazione Estesa') }}</label>
                    <input type="text" name="datazione_estesa" class="form-control" value="{{ struttura.datazione_estesa or '' }}">
                </div>
            </div>
        </div>

        <!-- Media -->
        <div class="tab-pane fade" id="tab-media">
            <h5>{{ _('Struttura Media') }}</h5>
            {% if struttura and struttura.id_struttura %}
            {% if media %}
            <div class="row g-2">
                {% for m in media %}
                <div class="col-md-3">
                    <div class="card">
                        {% if m.media_type == 'image' %}
                        <img src="{{ m.url }}" class="card-img-top" style="max-height:150px;object-fit:cover;">
                        {% else %}
                        <div class="card-body text-center"><i class="fas fa-file fa-3x text-muted"></i></div>
                        {% endif %}
                        <div class="card-body p-2">
                            <small>{{ m.media_name }}</small>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <p class="text-muted">{{ _('No media attached yet.') }}</p>
            {% endif %}

            <h6 class="mt-3">{{ _('Upload media') }}</h6>
            <form method="POST" action="{{ url_for('struttura_media_upload', struttura_id=struttura.id_struttura) }}" enctype="multipart/form-data" class="row g-2">
                <div class="col-md-8"><input type="file" name="file" class="form-control" required></div>
                <div class="col-md-4"><button type="submit" class="btn btn-primary w-100">{{ _('Upload') }}</button></div>
            </form>
            {% else %}
            <div class="alert alert-info py-2 mb-3">
              <i class="fas fa-info-circle"></i> {{ _('Save the record to enable the Media tab and attach files.') }}
            </div>
            {% endif %}
        </div>
    </div>

    <div class="mt-3">
        <button type="submit" class="btn btn-primary">
            <i class="fas fa-save"></i> {{ _('Save') }}
        </button>
    </div>
</form>

<script>
window.STRUTTURA_SUBTABLES_DATA = {{ subtables | tojson }};
</script>
<script>
// Populate datalist elements with thesaurus values from PyArchInit. The flat
// fields (sigla_struttura etc.) back plain inputs; the sub-table fields back
// the per-cell datalists used by the repeatable-row widgets below — both
// share the same fetch-and-fill logic, just different datalist ids.
const STRUTTURA_THES_FIELDS = ['sigla_struttura','categoria_struttura','tipologia_struttura','definizione_struttura','sviluppo_planimetrico'];
const STRUTTURA_SUBTABLE_THES_FIELDS = ['materiali_impiegati','elementi_strutturali','rapporti_sigla','misure_elementi_arch','misure_tipo','misure_unita','stato_fattori','prospetto_ingresso','elementi_costitutivi','manufatti','fasi_definizione'];
// Flat fields render as <select> dropdowns; populate them, preserving the
// server-rendered current value if it isn't present in the fetched vocab.
STRUTTURA_THES_FIELDS.forEach(function(field) {
    fetch('/api/struttura/thesaurus/' + field)
        .then(function(r) { return r.json(); })
        .then(function(values) {
            if (!Array.isArray(values)) return;
            const sel = document.getElementById('sel-' + field);
            if (!sel) return;
            const current = sel.getAttribute('data-current') || '';
            sel.innerHTML = '<option value="">—</option>';
            let found = false;
            (values || []).forEach(function(v){
                const o = document.createElement('option');
                o.value = v.value; o.textContent = v.value;
                if (v.value === current) { o.selected = true; found = true; }
                sel.appendChild(o);
            });
            if (current && !found) {   // preserve a stored value not in the current vocab
                const o = document.createElement('option');
                o.value = current; o.textContent = current; o.selected = true; sel.appendChild(o);
            }
        })
        .catch(function() { /* silent */ });
});
// Sub-table fields still back per-cell <datalist>s used by the repeatable-row
// widgets below — unchanged.
STRUTTURA_SUBTABLE_THES_FIELDS.forEach(function(field) {
    fetch('/api/struttura/thesaurus/' + field)
        .then(function(r) { return r.json(); })
        .then(function(values) {
            if (!Array.isArray(values)) return;
            const dl = document.getElementById('thes-' + field);
            if (!dl) return;
            dl.innerHTML = '';
            values.forEach(function(v) {
                const opt = document.createElement('option');
                opt.value = v.value || '';
                if (v.code) opt.label = v.code;
                dl.appendChild(opt);
            });
        })
        .catch(function() { /* silent */ });
});

// Reusable repeatable-row widget for the 10 struttura_table list-of-lists
// columns. The server pre-parses the stored str()-repr value into a real
// Python list (StrutturaService.parse_pylist) and hands it to the template
// as `subtables`, so `initialData` here is already a JS array — never a
// single-quoted Python-repr string, which JSON.parse cannot handle. On
// submit each widget serializes its rows to JSON (double-quoted), which the
// server re-parses with ast.literal_eval and re-serializes with repr() to
// match the classic plugin's str(list-of-lists) format exactly.
function initStrutturaRepeatableTable(opts) {
    const tbody = document.getElementById(opts.tbodyId);
    const addBtn = document.getElementById(opts.addBtnId);
    const hidden = document.getElementById(opts.hiddenInputId);
    const ncols = opts.columns.length;

    function makeCell(col, value) {
        if (col.options) {
            const sel = document.createElement('select');
            sel.className = 'form-select form-select-sm';
            const blank = document.createElement('option');
            blank.value = '';
            blank.textContent = '-- --';
            sel.appendChild(blank);
            col.options.forEach(function(o) {
                const opt = document.createElement('option');
                opt.value = o;
                opt.textContent = o;
                if (value === o) opt.selected = true;
                sel.appendChild(opt);
            });
            return sel;
        }
        const input = document.createElement('input');
        input.type = 'text';
        input.className = 'form-control form-control-sm';
        if (col.list) input.setAttribute('list', col.list);
        input.value = value != null ? value : '';
        return input;
    }

    function addRow(values) {
        const vals = values || new Array(ncols).fill('');
        const tr = document.createElement('tr');
        opts.columns.forEach(function(col, i) {
            const td = document.createElement('td');
            td.appendChild(makeCell(col, vals[i]));
            tr.appendChild(td);
        });
        const tdBtn = document.createElement('td');
        const btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'btn btn-sm btn-outline-danger';
        btn.innerHTML = '<i class="fas fa-times"></i>';
        btn.addEventListener('click', function() { tr.remove(); serialize(); });
        tdBtn.appendChild(btn);
        tr.appendChild(tdBtn);
        tbody.appendChild(tr);
    }

    function serialize() {
        const rows = [];
        Array.from(tbody.querySelectorAll('tr')).forEach(function(tr) {
            const cells = tr.querySelectorAll('input, select');
            const vals = Array.from(cells).map(function(c) { return c.value.trim(); });
            const allBlank = vals.every(function(v) { return v === ''; });
            if (!allBlank) rows.push(vals);
        });
        hidden.value = JSON.stringify(rows);
        return rows;
    }

    addBtn.addEventListener('click', function() { addRow(); serialize(); });
    tbody.addEventListener('input', serialize);
    tbody.addEventListener('change', serialize);

    let initial = opts.initialData;
    if (!Array.isArray(initial)) initial = [];
    if (initial.length === 0) {
        addRow();
    } else {
        initial.forEach(function(row) { addRow(row); });
    }
    serialize();

    return serialize;
}

const STRUTTURA_SUBTABLE_CONFIG = [
    { col: 'materiali_impiegati', columns: [{ list: 'thes-materiali_impiegati' }] },
    { col: 'elementi_strutturali', columns: [{ list: 'thes-elementi_strutturali' }, {}] },
    { col: 'rapporti_struttura', columns: [{}, {}, { list: 'thes-rapporti_sigla' }, {}] },
    { col: 'misure_struttura', columns: [
        { options: ['ESTERNO', 'INTERNO'] },
        { list: 'thes-misure_elementi_arch' },
        { list: 'thes-misure_tipo' },
        { list: 'thes-misure_unita' },
        {},
    ] },
    { col: 'stato_conservazione', columns: [
        { options: ['CONSERVAZIONE', "VISIBILITA'", "ACCESSIBILITA'"] },
        { options: ['OTTIMO', 'BUONO', 'DISCRETO', 'SCARSO', 'PESSIMO', 'NON RILEVABILE'] },
        { list: 'thes-stato_fattori' },
    ] },
    { col: 'prospetto_ingresso', columns: [{ list: 'thes-prospetto_ingresso' }] },
    { col: 'orientamento_ambienti', columns: [{ options: ['N', 'NE', 'E', 'SE', 'S', 'SO', 'O', 'NO'] }] },
    { col: 'elementi_costitutivi', columns: [{ list: 'thes-elementi_costitutivi' }] },
    { col: 'manufatti', columns: [{ list: 'thes-manufatti' }] },
    { col: 'fasi_funzionali', columns: [{}, {}, { list: 'thes-fasi_definizione' }] },
];

const strutturaSubtableSerializers = STRUTTURA_SUBTABLE_CONFIG.map(function(cfg) {
    return initStrutturaRepeatableTable({
        tbodyId: cfg.col + '_tbody',
        addBtnId: cfg.col + '_add',
        hiddenInputId: cfg.col + '_hidden',
        columns: cfg.columns,
        initialData: (window.STRUTTURA_SUBTABLES_DATA || {})[cfg.col] || [],
    });
});

document.getElementById('strutturaForm').addEventListener('submit', function() {
    strutturaSubtableSerializers.forEach(function(fn) { fn(); });
});
</script>
{% endblock %}