{% extends 'onlineanywhere_base.html' %}
{% block content %}
db_type: {{db_type}}
<br>
table_name: {{table_name}}

<br>
<a href="/edit_row/{{db_type}}/{{table_name}}/new" class="btn btn-danger btn-sm">Insert New</a>
<a href="/edit_row/{{db_type}}/{{table_name}}/one_time" class="btn btn-danger btn-sm">Add One Time Transaction</a>


<table class="table" id="all_planned_values" border="1">
    <thead>
        <tr>
            {% for col_name in table_head if col_name not in exclude_cols %}
                <th onclick="sortMasinaTable({{ loop.index0 }})">{{ col_name }}</th>
            {% endfor %}
            <th>Copy</th>
<!--            <th>Delete</th>-->
        </tr>
        <tr>
            {% for col_name in table_head if col_name not in exclude_cols %}
                <th><input type="text" class="form-control filter" data-col="{{ loop.index0 }}" placeholder="{{ col_name }}"></th>
            {% endfor %}
            <th>Copy</th>
<!--            <th>Delete</th>-->
        </tr>
    </thead>

    <tbody>
        {% for row in table[1:] %}
        <tr>
            {% for col in row %}
                {% if table_head[loop.index0] not in exclude_cols %}
                    <td>{{ col }}</td>
                {% endif %}
            {% endfor %}
            <td><a href="/edit_row/{{db_type}}/{{table_name}}/{{row[0]}}" class="btn btn-danger btn-sm">Edit</a></td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<script>
document.addEventListener("DOMContentLoaded", function () {

    const filters = document.querySelectorAll(".filter");
    const table = document.getElementById("all_planned_values");
    const rows = table.querySelectorAll("tbody tr");

    filters.forEach(filter => {
        filter.addEventListener("keyup", filterTable);
    });

    function filterTable() {

        rows.forEach(row => {

            let visible = true;

            filters.forEach(filter => {

                const colIndex = parseInt(filter.dataset.col);
                const filterValue = filter.value.toLowerCase();

                const cell = row.cells[colIndex];

                if (cell) {
                    const cellText = cell.textContent.toLowerCase();

                    if (!cellText.includes(filterValue)) {
                        visible = false;
                    }
                }
            });

            row.style.display = visible ? "" : "none";
        });
    }
});
</script>
<script>
function sortMasinaTable(colIndex) {
    const table = document.getElementById("all_planned_values");
    const tbody = table.querySelector("tbody");

    const rows = Array.from(tbody.querySelectorAll("tr"));

    const currentSort = table.dataset.sortCol == colIndex
        ? table.dataset.sortDir === "asc" ? "desc" : "asc"
        : "asc";

    rows.sort((a, b) => {
        const aText = a.cells[colIndex]?.textContent.trim() || "";
        const bText = b.cells[colIndex]?.textContent.trim() || "";

        const aNum = parseFloat(aText);
        const bNum = parseFloat(bText);

        let result;

        if (!isNaN(aNum) && !isNaN(bNum)) {
            result = aNum - bNum;
        } else {
            result = aText.localeCompare(bText);
        }

        return currentSort === "asc" ? result : -result;
    });

    rows.forEach(row => tbody.appendChild(row));

    table.dataset.sortCol = colIndex;
    table.dataset.sortDir = currentSort;
}
</script>
{% endblock %}