{% extends 'srppayouts/base.html' %}
{% load i18n %}
{% load humanize %}
{% load icons_tags %}

{% block details %}

<div class="row">
    <div class="col-sm-4">
    </div>
    <div class="col-sm-5">

    </div>
    <div class="col-sm-3">
        <div class="input-group mb-3">
            <span class="input-group-text">Search</span>
            <input type="text" id="searchInput" placeholder="Ship.." class="form-control" id="basic-url" aria-describedby="basic-addon3">
        </div>
    </div>
</div>

<table id="srpTable" class="table table-striped">
    <thead>
        <tr>
            <th>
                <!-- Used for the ships icon -->
            </th>
            <th style="cursor: pointer;" onclick="sortTable(1)" width="{{ column_width }}%">
                <i class="fa-solid fa-sort" style="margin-right: 0.25rem;"></i>
                Ship Name
            </th>
            {% for column in columns %}
            {% with count=forloop.counter %}
            <th style="cursor: pointer;" onclick="sortTable('{{ forloop.counter|add:1 }}')" width="{{ column_width }}%">
                <i class="fa-solid fa-sort" style="margin-right: 0.25rem;"></i>
                {{ column.name }}
            </th>
            {% endwith %}
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        {% for row_data in matrix %}
        <tr>
            <td>
                <img src="https://image.eveonline.com/types/{{ row_data.0.ship_id }}/icon?size=32">
            </td>
            <td>
              {% if row_data.0.ship_id is not 0 %}
              
              {% endif %}
              <b>{{ row_data.0.name }}</b>
            </td>
            {% for cell in row_data|slice:"1:" %}
            <td>
              {% if cell %}
              {{ cell.value|intcomma }} ISK
              {% else %}
              0 ISK
              {% endif %}
            </td>
            {% endfor %}
        </tr>
        {% endfor %}
    </tbody>
</table>

<div class="row">
    <div class="col-sm-4">
    </div>
    <div class="col-sm-4">
    </div>
    <div class="col-sm-4">
        <div id="showingCount" class="float-end">

        </div>
    </div>
</div>

{% endblock %}

{% block extra_javascript %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        updateShowingCount();
    });

    var inputField = document.getElementById('searchInput');

    inputField.addEventListener('input', function() {
        searchSRP();
        updateShowingCount();
    });

    function searchSRP() {
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("searchInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("srpTable");
        tr = table.getElementsByTagName("tr");

        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[1];
            if (td) {
                txtValue = td.textContent || td.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }

    function updateShowingCount() {
        var showingCount = document.getElementById("showingCount");

        displayedCount = countEntries();
        allCount = countAllEntries();

        showingCount.innerHTML = "Showing " + displayedCount + " of " + allCount + " entries";
    }

    function countEntries() {
        var table = document.getElementById("srpTable");

        const allRows = document.querySelectorAll('tr');
        let displayedCount = 0;

        allRows.forEach(row => {
            if (row.style.display !== 'none') {
                displayedCount++;
            }
        });
        displayedCount--;

        return displayedCount;
    }

    function countAllEntries() {
        var table = document.getElementById("srpTable");
        var showingCount = document.getElementById("showingCount");

        var rowCount = table.rows.length - 1;

        return rowCount;
    }

    function sortTable(n) {
        var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
        table = document.getElementById("srpTable");
        switching = true;
        // Set the sorting direction to ascending:
        dir = "asc";
        while (switching) {
            // Start by saying: no switching is done:
            switching = false;
            rows = table.rows;
            for (i = 1; i < (rows.length - 1); i++) {
                // Start by saying there should be no switching:
                shouldSwitch = false;

                x = rows[i].getElementsByTagName("TD")[n];
                y = rows[i + 1].getElementsByTagName("TD")[n];

                if (dir == "asc") {
                    if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                        shouldSwitch = true;
                        break;
                    }
                } else if (dir == "desc") {
                    if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                        shouldSwitch = true;
                        break;
                    }
                }
            }
            if (shouldSwitch) {
                rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                switching = true;
                // Each time a switch is done, increase this count by 1:
                switchcount++;
            } else {
                if (switchcount == 0 && dir == "asc") {
                    dir = "desc";
                    switching = true;
                }
            }
        }
    }
</script>
{% endblock %}

{% block extra_css %}
{% endblock %}

{% block extra_script %}

{% endblock %}
