{% extends 'onlineanywhere_base.html' %}
{% block content %}

<br>

<form method="post" action="/edit_row/{{db_type}}/{{table_name}}/{{id_row}}">
    <div class="container text-left">
    {% for col_name, col_type in table_head.items() %}
        {% set idx = loop.index0 %}
        {% if col_name not in exclude_cols %}
            <div class="row" id="{{ col_name }}-row">
                <div class="col">
                    <label>{{ col_name }}</label>
                    {% if col_name in options %}
                        <select name="{{ col_name }}" id="type-select-{{ col_name }}">
                            {% for item in options[col_name] %}
                                <option value="{{ item }}"
                                    {% if item == row_vals[idx] %}selected{% endif %}>
                                    {{ item }}
                                </option>
                            {% endfor %}
<!--                            <option value="__new__">new...</option>-->
                        </select>
                        <input
                            type="text"
                            id="newConto-{{ col_name }}"
                            name="new_{{ col_name }}"
                            placeholder="Enter a new {{ col_name }}"
                            style="display:none;">

                        {% if col_name == 'eProvider' %}
                            <label id="ppu-label" style="display:none;">ppu</label>
                            <input
                                type="number"
                                step="any"
                                id="newPpu"
                                name="new_ppu"
                                placeholder="Enter ppu"
                                style="display:none;">
                        {% endif %}
                    {% else %}
                        {% if col_type in ['varchar', 'text'] %}
                            <input type="text" name="{{ col_name }}" value="{{ row_vals[idx] }}">
                        {% elif col_type == 'date' %}
                            <input type="date" name="{{ col_name }}" value="{{ row_vals[idx] }}" required>
                        {% elif col_type == 'time' %}
                            <input type="time" name="{{ col_name }}" value="{{ row_vals[idx] }}">
                        {% elif col_type in ['int', 'decimal', 'float'] %}
                            <input type="number" name="{{ col_name }}" value="{{ row_vals[idx] }}" step="any">
                        {% elif col_type == 'tinyint' %}
                            <input
                                type="checkbox"
                                name="{{ col_name }}"
                                value="1"
                                {% if row_vals[idx] == 1 %}checked{% endif %}>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
        {% endif %}
    {% endfor %}
    </div>
    <br>
    {% if row_vals == 'new'%}
        <div class="row" id="submit-row">
        <div class="col">
            <input type="submit" name="insert_new"/>
        </div>
    </div>
    {% else %}
        <div class="col">
            <button type="submit" name="edit_row" class="btn btn-primary">Edit</button>
        </div>
        <br>
        <div class="col" id="submit-row1">
                <button type="submit" name="copy_as" class="btn btn-primary">Copy As</button>
                {% if db_type == 'new'%}
                    <div class="col">
                    <label>Cancel the auto_extension and  set valid to for the original</label>
                    <input checked="" value=True name="cancel_auto_ext" type="checkbox">
                    </div>
                {% endif %}
        </div>
        <br>
        <div class="col">
            <button type="submit" name="delete_row" class="btn btn-danger">Delete Row</button>
        </div>
    {% endif %}
<br>

</form>
<script>
document.addEventListener('DOMContentLoaded', function () {

    document.querySelectorAll('select[id^="type-select-"]').forEach(function (select) {

        const colName = select.id.replace('type-select-', '');

        const input = document.getElementById('newConto-' + colName);

        if (!input) return;

        function toggleInput() {

            const isNew = select.value === '__new__';

            input.style.display = isNew ? 'block' : 'none';

            // Special handling for eProvider
            if (colName === 'eProvider') {

                const ppuInput = document.getElementById('newPpu');
                const ppuLabel = document.getElementById('ppu-label');

                if (ppuInput) {
                    ppuInput.style.display = isNew ? 'block' : 'none';
                }

                if (ppuLabel) {
                    ppuLabel.style.display = isNew ? 'block' : 'none';
                }
            }
        }

        select.addEventListener('change', toggleInput);

        toggleInput();
    });

});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {

    const typeRow = document.getElementById('type-row');
    if (!typeRow) return;

    const typeSelect = typeRow.querySelector('select');
    if (!typeSelect) return;

    const rows = {
        date: document.getElementById('data-row'),
        type: document.getElementById('type-row'),
        eprov: document.getElementById('eProvider-row'),
        brutto: document.getElementById('brutto-row'),
        qty: document.getElementById('amount-row'),
        voll: document.getElementById('voll-row'),
        km: document.getElementById('km-row'),
        comment: document.getElementById('comment-row'),
        submit: document.getElementById('submit-row')
    };

    function setRowState(row, visible) {
        if (!row) return;

        row.style.display = visible ? 'flex' : 'none';

        row.querySelectorAll('input, select, textarea').forEach(el => {
            el.disabled = !visible;

            // remove required when hidden
            if (!visible) {
                el.removeAttribute('required');
            }
        });
    }

    function toggleVisibility() {

        const selectedType = typeSelect.value.toLowerCase();

        // Hide and disable everything except always-visible rows
        Object.keys(rows).forEach(key => {
            if (key !== 'date' && key !== 'type' && key !== 'submit') {
                setRowState(rows[key], false);
            }
        });

        // Always visible rows
        setRowState(rows.date, true);
        setRowState(rows.type, true);
        setRowState(rows.submit, true);

        if (selectedType === 'electric') {

            setRowState(rows.eprov, true);
            setRowState(rows.qty, true);
            setRowState(rows.km, true);
            setRowState(rows.comment, true);

            const qtyInput = rows.qty?.querySelector('input');
            if (qtyInput) qtyInput.required = true;

        } else if (selectedType === 'benzina') {

            setRowState(rows.brutto, true);
            setRowState(rows.qty, true);
            setRowState(rows.km, true);
            setRowState(rows.comment, true);
            setRowState(rows.voll, true);

            const bruttoInput = rows.brutto?.querySelector('input');
            const qtyInput = rows.qty?.querySelector('input');

            if (bruttoInput) bruttoInput.required = true;
            if (qtyInput) qtyInput.required = true;

        } else {

            setRowState(rows.brutto, true);
            setRowState(rows.km, true);
            setRowState(rows.comment, true);

            const bruttoInput = rows.brutto?.querySelector('input');
            if (bruttoInput) bruttoInput.required = true;
        }
    }

    typeSelect.addEventListener('change', toggleVisibility);
    toggleVisibility();
});
</script>
{% endblock %}