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

<!--db_type: {{db_type}}-->
<!--<br>-->
<!--table_name&#45;&#45;&#45;&#45;: {{table_name}}-->

<!--<br>-->
<!--<br>-->
<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() %}
                {% 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">
                            {% for item in options[col_name] %}
                                <option value="{{ row_vals[loop.index0] }}">
                                    {{ item }}
                                </option>
                            {% endfor %}
                            <option value="__new__">new...</option>
                            </select>
                            <input
                                type="text"
                                id="newConto"
                                name="new_{{ col_name }}"
                                placeholder="Enter a new type"
                                style="display:none;">
                        {% elif col_type == 'varchar' or col_type == 'text'%}
                            <input type="text" name="{{col_name}}" value="{{ row_vals[loop.index -1] }}"/>
                        {% elif col_type == 'date' %}
                            <input type="date"  name="{{col_name}}" value="{{ row_vals[loop.index -1] }}"/>
                        {% elif col_type == 'time' %}
                            <input type="time"  name="{{col_name}}" value="{{ row_vals[loop.index -1] }}"/>
                        {% elif col_type == 'int' or col_type == 'decimal' or col_type == 'float' %}
                            <input type="number"  name="{{col_name}}" value="{{ row_vals[loop.index -1] }}" step="any"/>
                        {% elif col_type == 'tinyint' %}
                            {% if row_vals[loop.index -1] == 1%}
                                <input checked="" value=1 name="{{col_name}}" type="checkbox">
                            {% else %}
                                <input value=1 name="{{col_name}}" type="checkbox">
                            {% 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 %}
</form>

<br>
<script>
document.getElementById('type-select').addEventListener('change', function() {
    document.getElementById('newConto').style.display =
        this.value === '__new__' ? 'block' : 'none';
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const typeSelect = document.getElementById('type-select');

    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'),
    };

    // Also store inputs that have required fields
    const requiredInputs = {
        brutto: rows.brutto.querySelector('input'),
        qty: rows.qty.querySelector('input')
    };

    function toggleVisibility() {
        const selectedType = typeSelect.value.toLowerCase();

        // Hide all except date, type, and submit
        for (const key in rows) {
            if (key !== 'date' && key !== 'type' && key !== 'submit') {
                rows[key].style.display = 'none';
            }
        }

        // Disable required validation when hidden
        for (const key in requiredInputs) {
            requiredInputs[key].removeAttribute('required');
        }

        // Always visible
        rows.date.style.display = 'flex';
        rows.type.style.display = 'flex';
        rows.submit.style.display = 'flex';

        if (selectedType === 'electric') {
            // Show and re-enable required fields
            rows.eprov.style.display = 'flex';
            rows.qty.style.display = 'flex';
            requiredInputs.qty.setAttribute('required', '');
            rows.km.style.display = 'flex';
            rows.comment.style.display = 'flex';
        } else if (selectedType === 'carwash') {
            rows.brutto.style.display = 'flex';
            requiredInputs.brutto.setAttribute('required', '');
            rows.km.style.display = 'flex';
            rows.comment.style.display = 'flex';
        } else {
            rows.brutto.style.display = 'flex';
            requiredInputs.brutto.setAttribute('required', '');
            rows.qty.style.display = 'flex';
            requiredInputs.qty.setAttribute('required', '');
            rows.km.style.display = 'flex';
            rows.voll.style.display = 'flex';
            rows.comment.style.display = 'flex';
        }
    }

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

{% endblock %}