{% extends "base.html" %}
{% block title %}{{ _('Tomba') }} {{ tomba.id_tomba if tomba and tomba.id_tomba else _('New') }}{% endblock %}

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

<form method="POST" id="tombaForm">
    <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-rito">{{ _('Rito e Sepoltura') }}</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-corredo">{{ _('Corredo') }}</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="{{ tomba.sito or '' }}" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ _('Area') }}</label>
                    <input type="number" name="area" class="form-control" value="{{ tomba.area or '' }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ _('Nr. Scheda TAF') }}</label>
                    <input type="number" name="nr_scheda_taf" class="form-control" value="{{ tomba.nr_scheda_taf or '' }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">{{ _('Sigla Struttura') }}</label>
                    <input type="text" name="sigla_struttura" class="form-control" value="{{ tomba.sigla_struttura or '' }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">{{ _('Nr. Struttura') }}</label>
                    <input type="number" name="nr_struttura" class="form-control" value="{{ tomba.nr_struttura or '' }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">{{ _('Nr. Individuo') }}</label>
                    <select multiple id="sel-nr-individuo" class="form-select" size="4"></select>
                    <input type="hidden" name="nr_individuo" id="nr_individuo_hidden" value="{{ tomba.nr_individuo or '' }}">
                    <small class="form-text text-muted">{{ _('Individuals are loaded from the Individui records of this site/structure.') }}</small>
                </div>
            </div>
        </div>
        <!-- Rito e Sepoltura -->
        <div class="tab-pane fade" id="tab-rito">
            <div class="row g-2">
                <div class="col-md-4">
                    <label class="form-label">{{ _('Rito') }}</label>
                    <select name="rito" id="sel-rito" class="form-select" data-current="{{ tomba.rito or '' }}"><option value="{{ tomba.rito or '' }}" selected>{{ tomba.rito or '—' }}</option></select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">{{ _('Tipo Sepoltura') }}</label>
                    <select name="tipo_sepoltura" id="sel-tipo_sepoltura" class="form-select" data-current="{{ tomba.tipo_sepoltura or '' }}"><option value="{{ tomba.tipo_sepoltura or '' }}" selected>{{ tomba.tipo_sepoltura or '—' }}</option></select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">{{ _('Tipo Deposizione') }}</label>
                    <select name="tipo_deposizione" id="sel-tipo_deposizione" class="form-select" data-current="{{ tomba.tipo_deposizione or '' }}"><option value="{{ tomba.tipo_deposizione or '' }}" selected>{{ tomba.tipo_deposizione or '—' }}</option></select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">{{ _('Copertura Tipo') }}</label>
                    <select name="copertura_tipo" id="sel-copertura_tipo" class="form-select" data-current="{{ tomba.copertura_tipo or '' }}"><option value="{{ tomba.copertura_tipo or '' }}" selected>{{ tomba.copertura_tipo or '—' }}</option></select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">{{ _('Tipo Contenitore Resti') }}</label>
                    <select name="tipo_contenitore_resti" id="sel-tipo_contenitore_resti" class="form-select" data-current="{{ tomba.tipo_contenitore_resti or '' }}"><option value="{{ tomba.tipo_contenitore_resti or '' }}" selected>{{ tomba.tipo_contenitore_resti or '—' }}</option></select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">{{ _('Stato di Conservazione') }}</label>
                    <select name="stato_di_conservazione" id="sel-stato_di_conservazione" class="form-select" data-current="{{ tomba.stato_di_conservazione or '' }}"><option value="{{ tomba.stato_di_conservazione or '' }}" selected>{{ tomba.stato_di_conservazione or '—' }}</option></select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">{{ _('Segnacoli') }}</label>
                    <select name="segnacoli" id="sel-segnacoli" class="form-select" data-current="{{ tomba.segnacoli or '' }}"><option value="{{ tomba.segnacoli or '' }}" selected>{{ tomba.segnacoli or '—' }}</option></select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">{{ _('Canale Libatorio (Sì/No)') }}</label>
                    <select name="canale_libatorio_si_no" id="sel-canale_libatorio_si_no" class="form-select" data-current="{{ tomba.canale_libatorio_si_no or '' }}"><option value="{{ tomba.canale_libatorio_si_no or '' }}" selected>{{ tomba.canale_libatorio_si_no or '—' }}</option></select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">{{ _('Oggetti Rinvenuti Esterno') }}</label>
                    <input type="text" name="oggetti_rinvenuti_esterno" class="form-control" value="{{ tomba.oggetti_rinvenuti_esterno or '' }}">
                </div>
                <div class="col-md-6">
                    <label class="form-label">{{ _('Descrizione TAF') }}</label>
                    <textarea name="descrizione_taf" class="form-control" rows="3">{{ tomba.descrizione_taf or '' }}</textarea>
                </div>
                <div class="col-md-6">
                    <label class="form-label">{{ _('Interpretazione TAF') }}</label>
                    <textarea name="interpretazione_taf" class="form-control" rows="3">{{ tomba.interpretazione_taf or '' }}</textarea>
                </div>
            </div>
        </div>
        <!-- Corredo. corredo_tipo is a repeatable sub-table stored as
             str(list-of-lists) — the classic plugin's tableWidget_corredo_tipo
             format (5 positional cells per row) — NOT a flat text field. The
             server pre-parses the stored value (TombaService.SUBTABLE_COLS +
             struttura parse_pylist) and re-serializes submitted JSON with
             repr() so the value stays plugin-compatible. -->
        <div class="tab-pane fade" id="tab-corredo">
            <div class="row g-2">
                <div class="col-md-4">
                    <label class="form-label">{{ _('Corredo Presenza') }}</label>
                    <select name="corredo_presenza" id="sel-corredo_presenza" class="form-select" data-current="{{ tomba.corredo_presenza or '' }}"><option value="{{ tomba.corredo_presenza or '' }}" selected>{{ tomba.corredo_presenza or '—' }}</option></select>
                </div>
                <div class="col-md-12">
                    <fieldset class="mb-2">
                        <legend class="h6">{{ _('Corredo tomba') }}</legend>
                        <table class="table table-sm table-bordered align-middle" id="corredo_tipo_table">
                            <thead><tr>
                                <th>{{ _('ID Reperto') }}</th>
                                <th>{{ _('ID Individuo') }}</th>
                                <th>{{ _('Materiale') }}</th>
                                <th>{{ _('Posizione del corredo') }}</th>
                                <th>{{ _('Posizione nel corredo') }}</th>
                                <th style="width:2.5rem;"></th>
                            </tr></thead>
                            <tbody id="corredo_tipo_tbody"></tbody>
                        </table>
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="corredo_tipo_add"><i class="fas fa-plus"></i> {{ _('Aggiungi riga') }}</button>
                        <input type="hidden" name="corredo_tipo" id="corredo_tipo_hidden">
                    </fieldset>
                </div>
                <div class="col-md-12">
                    <label class="form-label">{{ _('Corredo Descrizione') }}</label>
                    <textarea name="corredo_descrizione" class="form-control" rows="3">{{ tomba.corredo_descrizione or '' }}</textarea>
                </div>
            </div>
        </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="{{ tomba.periodo_iniziale or '' }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ _('Fase Iniziale') }}</label>
                    <input type="number" name="fase_iniziale" class="form-control" value="{{ tomba.fase_iniziale or '' }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ _('Periodo Finale') }}</label>
                    <input type="number" name="periodo_finale" class="form-control" value="{{ tomba.periodo_finale or '' }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ _('Fase Finale') }}</label>
                    <input type="number" name="fase_finale" class="form-control" value="{{ tomba.fase_finale or '' }}">
                </div>
                <div class="col-md-12">
                    <label class="form-label">{{ _('Datazione Estesa') }}</label>
                    <input type="text" name="datazione_estesa" class="form-control" value="{{ tomba.datazione_estesa or '' }}">
                </div>
            </div>
        </div>

        <!-- Media -->
        <div class="tab-pane fade" id="tab-media">
            <h5>{{ _('Tomba Media') }}</h5>
            {% if tomba and tomba.id_tomba %}
            {% 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('tomba_media_upload', tomba_id=tomba.id_tomba) }}" 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.TOMBA_SUBTABLES_DATA = {{ (subtables or {}) | tojson }};
</script>
<script>
// Populate datalist elements with thesaurus values from PyArchInit
const TOMBA_THES_FIELDS = ['rito','stato_di_conservazione','copertura_tipo','tipo_contenitore_resti','tipo_deposizione','tipo_sepoltura','segnacoli','canale_libatorio_si_no','corredo_presenza'];
TOMBA_THES_FIELDS.forEach(function(field) {
    fetch('/api/tomba/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 */ });
});

// Repeatable-row widget for the corredo_tipo sub-table (same pattern as the
// struttura sub-table widgets). The server hands `subtables.corredo_tipo` as
// a real JS array (pre-parsed from the stored Python-repr value); on submit
// the widget serializes its rows to JSON in the hidden corredo_tipo input,
// which TombaService re-parses and re-serializes with repr() to keep the
// stored value identical to the classic plugin's str(table2dict()) format.
function initTombaRepeatableTable(opts) {
    const tbody = document.getElementById(opts.tbodyId);
    const addBtn = document.getElementById(opts.addBtnId);
    const hidden = document.getElementById(opts.hiddenInputId);
    const ncols = opts.ncols;

    function addRow(values) {
        const vals = values || new Array(ncols).fill('');
        const tr = document.createElement('tr');
        for (let i = 0; i < ncols; i++) {
            const td = document.createElement('td');
            const input = document.createElement('input');
            input.type = 'text';
            input.className = 'form-control form-control-sm';
            input.value = vals[i] != null ? vals[i] : '';
            td.appendChild(input);
            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');
            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);

    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 corredoSerialize = initTombaRepeatableTable({
    tbodyId: 'corredo_tipo_tbody',
    addBtnId: 'corredo_tipo_add',
    hiddenInputId: 'corredo_tipo_hidden',
    ncols: 5,
    initialData: (window.TOMBA_SUBTABLES_DATA || {})['corredo_tipo'] || [],
});

document.getElementById('tombaForm').addEventListener('submit', function() {
    corredoSerialize();
});
</script>
<script>
// Nr. Individuo multi-select: populated from /api/tomba/individui, filtered
// by sito + sigla_struttura + nr_struttura (the plugin's tomba<->individui
// link). Storage stays the plugin-identical comma-joined Text value in the
// hidden #nr_individuo_hidden input — a stored value not present in the
// fetched list is never dropped, it is kept as an extra selected option.
function loadIndividui() {
    var form = document.querySelector('form');
    var sel = document.getElementById('sel-nr-individuo');
    var hidden = document.getElementById('nr_individuo_hidden');
    if (!form || !sel || !hidden) return;

    function fieldValue(name) {
        var el = form.querySelector('[name="' + name + '"]');
        return el ? (el.value || '').trim() : '';
    }

    var sito = fieldValue('sito');
    var siglaStruttura = fieldValue('sigla_struttura');
    var nrStruttura = fieldValue('nr_struttura');
    var current = (hidden.value || '').split(',')
        .map(function(v) { return v.trim(); })
        .filter(function(v) { return v !== ''; });

    function renderOptions(values) {
        sel.innerHTML = '';
        var seen = {};
        (values || []).forEach(function(v) {
            var sv = String(v);
            var o = document.createElement('option');
            o.value = sv; o.textContent = sv;
            if (current.indexOf(sv) !== -1) { o.selected = true; }
            seen[sv] = true;
            sel.appendChild(o);
        });
        // Never lose data: a stored value not in the fetched list is still
        // rendered (and stays selected).
        current.forEach(function(v) {
            if (!seen[v]) {
                var o = document.createElement('option');
                o.value = v; o.textContent = v; o.selected = true;
                sel.appendChild(o);
            }
        });
    }

    if (!sito) {
        // No site yet: skip the fetch, just show the stored values as-is.
        renderOptions([]);
        return;
    }

    var qs = 'sito=' + encodeURIComponent(sito);
    if (siglaStruttura) qs += '&sigla_struttura=' + encodeURIComponent(siglaStruttura);
    if (nrStruttura) qs += '&nr_struttura=' + encodeURIComponent(nrStruttura);

    fetch('/api/tomba/individui?' + qs)
        .then(function(r) { return r.json(); })
        .then(function(values) {
            if (!Array.isArray(values)) return;
            renderOptions(values);
        })
        .catch(function() { /* fetch failed: leave the hidden input untouched (data-safe) */ });
}

(function() {
    var sel = document.getElementById('sel-nr-individuo');
    if (sel) {
        sel.addEventListener('change', function() {
            var selected = Array.prototype.slice.call(this.selectedOptions).map(function(o) { return o.value; });
            document.getElementById('nr_individuo_hidden').value = selected.join(', ');
        });
    }
    ['sito', 'sigla_struttura', 'nr_struttura'].forEach(function(name) {
        var el = document.querySelector('form [name="' + name + '"]');
        if (el) el.addEventListener('change', loadIndividui);
    });
    loadIndividui();
})();
</script>
{% endblock %}