{% extends "base.html" %}
{% block title %}{{ _('Fauna') }} {{ fauna.id_fauna if fauna and fauna.id_fauna else _('New') }}{% endblock %}

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

<form method="POST" id="faunaForm">
    <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-context">{{ _('Context') }}</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-fauna">{{ _('Fauna Data') }}</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-combustion">{{ _('Combustion & Conservation') }}</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-notes">{{ _('Notes') }}</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="{{ fauna.sito or '' }}" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ _('Area') }}</label>
                    <input type="text" name="area" class="form-control" value="{{ fauna.area or '' }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ _('Saggio') }}</label>
                    <input type="text" name="saggio" class="form-control" value="{{ fauna.saggio or '' }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ _('US') }}</label>
                    <input type="text" name="us" class="form-control" value="{{ fauna.us or '' }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ _('ID US') }}</label>
                    <input type="number" name="id_us" class="form-control" value="{{ fauna.id_us if fauna.id_us is not none else '' }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ _('Datazione US') }}</label>
                    <input type="text" name="datazione_us" class="form-control" value="{{ fauna.datazione_us or '' }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ _('Data Compilazione') }}</label>
                    <input type="date" name="data_compilazione" class="form-control" value="{{ fauna.data_compilazione or '' }}">
                </div>
                <div class="col-md-6">
                    <label class="form-label">{{ _('Responsabile Scheda') }}</label>
                    <input type="text" name="responsabile_scheda" class="form-control" value="{{ fauna.responsabile_scheda or '' }}">
                </div>
                <div class="col-md-6">
                    <label class="form-label">{{ _('Documentazione Fotografica') }}</label>
                    <input type="text" name="documentazione_fotografica" class="form-control" value="{{ fauna.documentazione_fotografica or '' }}">
                </div>
            </div>
        </div>
        <!-- Context -->
        <div class="tab-pane fade" id="tab-context">
            <div class="row g-2">
                <div class="col-md-4">
                    <label class="form-label">{{ _('Metodologia Recupero') }}</label>
                    <select name="metodologia_recupero" id="sel-metodologia_recupero" class="form-select" data-current="{{ fauna.metodologia_recupero or '' }}"><option value="{{ fauna.metodologia_recupero or '' }}" selected>{{ fauna.metodologia_recupero or '—' }}</option></select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">{{ _('Contesto') }}</label>
                    <select name="contesto" id="sel-contesto" class="form-select" data-current="{{ fauna.contesto or '' }}"><option value="{{ fauna.contesto or '' }}" selected>{{ fauna.contesto or '—' }}</option></select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">{{ _('Deposizione') }}</label>
                    <select name="deposizione" id="sel-deposizione" class="form-select" data-current="{{ fauna.deposizione or '' }}"><option value="{{ fauna.deposizione or '' }}" selected>{{ fauna.deposizione or '—' }}</option></select>
                </div>
                <div class="col-md-12">
                    <label class="form-label">{{ _('Descrizione Contesto') }}</label>
                    <textarea name="descrizione_contesto" class="form-control" rows="3">{{ fauna.descrizione_contesto or '' }}</textarea>
                </div>
                <div class="col-md-6">
                    <label class="form-label">{{ _('Resti in Connessione Anatomica') }}</label>
                    <select name="resti_connessione_anatomica" id="sel-resti_connessione_anatomica" class="form-select" data-current="{{ fauna.resti_connessione_anatomica or '' }}"><option value="{{ fauna.resti_connessione_anatomica or '' }}" selected>{{ fauna.resti_connessione_anatomica or '—' }}</option></select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">{{ _('Tipologia Accumulo') }}</label>
                    <select name="tipologia_accumulo" id="sel-tipologia_accumulo" class="form-select" data-current="{{ fauna.tipologia_accumulo or '' }}"><option value="{{ fauna.tipologia_accumulo or '' }}" selected>{{ fauna.tipologia_accumulo or '—' }}</option></select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">{{ _('Note Terreno / Giacitura') }}</label>
                    <textarea name="note_terreno_giacitura" class="form-control" rows="3">{{ fauna.note_terreno_giacitura or '' }}</textarea>
                </div>
                <div class="col-md-6">
                    <label class="form-label">{{ _('Affidabilità Stratigrafica') }}</label>
                    <select name="affidabilita_stratigrafica" id="sel-affidabilita_stratigrafica" class="form-select" data-current="{{ fauna.affidabilita_stratigrafica or '' }}"><option value="{{ fauna.affidabilita_stratigrafica or '' }}" selected>{{ fauna.affidabilita_stratigrafica or '—' }}</option></select>
                </div>
            </div>
        </div>
        <!-- Fauna Data -->
        <div class="tab-pane fade" id="tab-fauna">
            <div class="row g-2">
                <div class="col-md-4">
                    <label class="form-label">{{ _('Numero Stimato Resti') }}</label>
                    <select name="numero_stimato_resti" id="sel-numero_stimato_resti" class="form-select" data-current="{{ fauna.numero_stimato_resti or '' }}"><option value="{{ fauna.numero_stimato_resti or '' }}" selected>{{ fauna.numero_stimato_resti or '—' }}</option></select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">{{ _('Numero Minimo Individui') }}</label>
                    <input type="number" name="numero_minimo_individui" class="form-control" value="{{ fauna.numero_minimo_individui if fauna.numero_minimo_individui is not none else '' }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">{{ _('Stato Frammentazione') }}</label>
                    <select name="stato_frammentazione" id="sel-stato_frammentazione" class="form-select" data-current="{{ fauna.stato_frammentazione or '' }}"><option value="{{ fauna.stato_frammentazione or '' }}" selected>{{ fauna.stato_frammentazione or '—' }}</option></select>
                </div>
                <div class="col-md-12">
                    <label class="form-label">{{ _('Specie / PSI') }}</label>
                    <table class="table table-sm table-bordered align-middle" id="specie_psi_table">
                        <thead>
                            <tr>
                                <th>{{ _('Specie') }}</th>
                                <th>{{ _('PSI (Parti Scheletriche)') }}</th>
                                <th style="width:2.5rem;"></th>
                            </tr>
                        </thead>
                        <tbody id="specie_psi_tbody"></tbody>
                    </table>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="specie_psi_add">
                        <i class="fas fa-plus"></i> {{ _('Aggiungi riga') }}
                    </button>
                    <input type="hidden" name="specie_psi" id="specie_psi_json">
                    <datalist id="thes-specie"></datalist>
                    <datalist id="thes-parti_scheletriche"></datalist>
                </div>
                <div class="col-md-12">
                    <label class="form-label">{{ _('Misure Ossa') }}</label>
                    <table class="table table-sm table-bordered align-middle" id="misure_ossa_table">
                        <thead>
                            <tr>
                                <th>{{ _('Elemento Anatomico') }}</th>
                                <th>{{ _('Specie') }}</th>
                                <th>{{ _('GL (mm)') }}</th>
                                <th>{{ _('GB (mm)') }}</th>
                                <th>{{ _('Bp (mm)') }}</th>
                                <th>{{ _('Bd (mm)') }}</th>
                                <th style="width:2.5rem;"></th>
                            </tr>
                        </thead>
                        <tbody id="misure_ossa_tbody"></tbody>
                    </table>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="misure_ossa_add">
                        <i class="fas fa-plus"></i> {{ _('Aggiungi riga') }}
                    </button>
                    <input type="hidden" name="misure_ossa" id="misure_ossa_json">
                    <datalist id="thes-elemento_anatomico"></datalist>
                </div>
            </div>
        </div>
        <!-- Combustion & Conservation -->
        <div class="tab-pane fade" id="tab-combustion">
            <div class="row g-2">
                <div class="col-md-6">
                    <label class="form-label">{{ _('Tracce Combustione') }}</label>
                    <select name="tracce_combustione" id="sel-tracce_combustione" class="form-select" data-current="{{ fauna.tracce_combustione or '' }}"><option value="{{ fauna.tracce_combustione or '' }}" selected>{{ fauna.tracce_combustione or '—' }}</option></select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ _('Combustione Altri Materiali US') }}</label>
                    <select name="combustione_altri_materiali_us" class="form-select">
                        <option value="" {{ 'selected' if fauna.combustione_altri_materiali_us is none else '' }}>{{ _('— —') }}</option>
                        <option value="sì" {{ 'selected' if fauna.combustione_altri_materiali_us == True else '' }}>{{ _('Sì') }}</option>
                        <option value="no" {{ 'selected' if fauna.combustione_altri_materiali_us == False else '' }}>{{ _('No') }}</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ _('Tipo Combustione') }}</label>
                    <select name="tipo_combustione" id="sel-tipo_combustione" class="form-select" data-current="{{ fauna.tipo_combustione or '' }}"><option value="{{ fauna.tipo_combustione or '' }}" selected>{{ fauna.tipo_combustione or '—' }}</option></select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">{{ _('Segni Tafonomici Evidenti') }}</label>
                    <select name="segni_tafonomici_evidenti" id="sel-segni_tafonomici_evidenti" class="form-select" data-current="{{ fauna.segni_tafonomici_evidenti or '' }}"><option value="{{ fauna.segni_tafonomici_evidenti or '' }}" selected>{{ fauna.segni_tafonomici_evidenti or '—' }}</option></select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">{{ _('Caratterizzazione Segni Tafonomici') }}</label>
                    <select name="caratterizzazione_segni_tafonomici" id="sel-caratterizzazione_segni_tafonomici" class="form-select" data-current="{{ fauna.caratterizzazione_segni_tafonomici or '' }}"><option value="{{ fauna.caratterizzazione_segni_tafonomici or '' }}" selected>{{ fauna.caratterizzazione_segni_tafonomici or '—' }}</option></select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">{{ _('Stato di Conservazione') }}</label>
                    <select name="stato_conservazione" id="sel-stato_conservazione" class="form-select" data-current="{{ fauna.stato_conservazione or '' }}"><option value="{{ fauna.stato_conservazione or '' }}" selected>{{ fauna.stato_conservazione or '—' }}</option></select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">{{ _('Alterazioni Morfologiche') }}</label>
                    <input type="text" name="alterazioni_morfologiche" class="form-control" value="{{ fauna.alterazioni_morfologiche or '' }}">
                </div>
            </div>
        </div>
        <!-- Notes -->
        <div class="tab-pane fade" id="tab-notes">
            <div class="row g-2">
                <div class="col-md-6">
                    <label class="form-label">{{ _('Campionature Effettuate') }}</label>
                    <input type="text" name="campionature_effettuate" class="form-control" value="{{ fauna.campionature_effettuate or '' }}">
                </div>
                <div class="col-md-6">
                    <label class="form-label">{{ _('Classi Reperti in Associazione') }}</label>
                    <input type="text" name="classi_reperti_associazione" class="form-control" value="{{ fauna.classi_reperti_associazione or '' }}">
                </div>
                <div class="col-md-6">
                    <label class="form-label">{{ _('Osservazioni') }}</label>
                    <textarea name="osservazioni" class="form-control" rows="3">{{ fauna.osservazioni or '' }}</textarea>
                </div>
                <div class="col-md-6">
                    <label class="form-label">{{ _('Interpretazione') }}</label>
                    <textarea name="interpretazione" class="form-control" rows="3">{{ fauna.interpretazione or '' }}</textarea>
                </div>
            </div>
        </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.SPECIE_PSI = {{ (fauna.specie_psi or "[]") | tojson }};
window.MISURE_OSSA = {{ (fauna.misure_ossa or "[]") | tojson }};
</script>
<script>
// Populate datalist elements with thesaurus values from PyArchInit. specie
// and parti_scheletriche no longer back flat inputs (they moved into the
// specie_psi widget's per-cell datalists below); elemento_anatomico is new
// (13.13, used by the misure_ossa widget's Elemento Anatomico cell).
const THES_FIELDS = ['contesto','metodologia_recupero','tipologia_accumulo','deposizione','stato_frammentazione','stato_conservazione','affidabilita_stratigrafica','tracce_combustione','tipo_combustione','resti_connessione_anatomica','specie','parti_scheletriche','elemento_anatomico','segni_tafonomici_evidenti','caratterizzazione_segni_tafonomici','numero_stimato_resti'];
// specie / parti_scheletriche / elemento_anatomico back only the per-cell
// datalists used by the specie_psi and misure_ossa widgets below — they
// never had a flat <select>, so they keep the datalist-population path.
const FAUNA_WIDGET_ONLY_THES_FIELDS = ['specie', 'parti_scheletriche', 'elemento_anatomico'];
THES_FIELDS.forEach(function(field) {
    fetch('/api/fauna/thesaurus/' + field)
        .then(function(r) { return r.json(); })
        .then(function(values) {
            if (!Array.isArray(values)) return;
            if (FAUNA_WIDGET_ONLY_THES_FIELDS.indexOf(field) !== -1) {
                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);
                });
                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 widgets for specie_psi ([[specie, psi], ...]) and
// misure_ossa ([[elemento, specie, GL, GB, Bp, Bd], ...]) matching the
// classic pyarchinit_fauna plugin's stored JSON format exactly (list of
// string lists; blank cells stay "" rather than becoming 0/null).
function initFaunaRepeatableTable(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 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');
            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 = 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 inputs = tr.querySelectorAll('input');
            const vals = Array.from(inputs).map(function(inp) { return inp.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 (typeof initial === 'string') {
        try { initial = JSON.parse(initial); } catch (e) { initial = []; }
    }
    if (!Array.isArray(initial)) initial = [];
    if (initial.length === 0) {
        addRow();
    } else {
        initial.forEach(function(row) { addRow(row); });
    }
    serialize();

    return serialize;
}

const speciePsiSerialize = initFaunaRepeatableTable({
    tbodyId: 'specie_psi_tbody',
    addBtnId: 'specie_psi_add',
    hiddenInputId: 'specie_psi_json',
    columns: [{ list: 'thes-specie' }, { list: 'thes-parti_scheletriche' }],
    initialData: window.SPECIE_PSI,
});

const misureOssaSerialize = initFaunaRepeatableTable({
    tbodyId: 'misure_ossa_tbody',
    addBtnId: 'misure_ossa_add',
    hiddenInputId: 'misure_ossa_json',
    columns: [{ list: 'thes-elemento_anatomico' }, { list: 'thes-specie' }, {}, {}, {}, {}],
    initialData: window.MISURE_OSSA,
});

document.getElementById('faunaForm').addEventListener('submit', function() {
    speciePsiSerialize();
    misureOssaSerialize();
});
</script>
{% endblock %}