{% extends 'base.html' %}

{% block content %}
<head>Add to {{table_name}}</head>
<form method="post" action="/addalim/{{table_name}}">
    <div class="container text-left">
        <div class="row" id="date-row">
            <div class="col">
                <label>Date</label>
                <input type="date" name="data"/>
            </div>
        </div>

        <div class="row" id="type-row">
            <div class="col">
                <label>Type</label>
                <select name="type" id="type-select">
                    {% for tt in types_of_costs %}
                        <option value="{{tt}}">{{tt}}</option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <div class="row" id="eprov-row">
            <div class="col">
                <label>eProvider</label>
                <select id="cars" name="eprov">
                    <option value=""></option>
                    {% for tt in current_user.auto_app.electric_providers %}
                        <option value="{{tt}}">{{tt}}</option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <div class="row" id="brutto-row">
            <div class="col">
                <label>Brutto[€]</label>
                <input type="number" name="brutto" step="any" required/>
            </div>
        </div>

        <div class="row" id="qty-row">
            <div class="col">
                <label>Qty.[L/KwH]</label>
                <input type="number" name="amount" step="any" required/>
            </div>
        </div>

        <div class="row" id="km-row">
            <div class="col">
                <label>Km stand</label>
                <input type="number" name="km"/>
            </div>
        </div>

        <div class="row" id="comment-row">
            <div class="col">
                <label>Comment</label>
                <input type="text" name="Comment"/>
            </div>
        </div>

        <div class="row" id="submit-row">
            <div class="col">
                <input type="submit" name="add_alim"/>
            </div>
        </div>
    </div>
</form>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const typeSelect = document.getElementById('type-select');

    const rows = {
        date: document.getElementById('date-row'),
        type: document.getElementById('type-row'),
        eprov: document.getElementById('eprov-row'),
        brutto: document.getElementById('brutto-row'),
        qty: document.getElementById('qty-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.comment.style.display = 'flex';
        }
    }

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


{% endblock %}
