{% extends 'onlineanywhere_base.html' %}

{% block content %}

<link rel="stylesheet"
      href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">

<link rel="stylesheet"
      href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>


<div class="container py-4">

    <!-- Page Title -->
    <h1 class="mb-4">{{ table_name }}</h1>

    <!-- Navigation Buttons -->
    <div class="mb-4">
        <div class="btn-group" role="group">
            <a href="/masina" class="btn btn-secondary">Home</a>
            <a href="/addalim/{{table_name}}" class="btn btn-primary">Add Alim</a>
            <a href="/summary/{{id_car}}/{{table_name}}" class="btn btn-info text-white">Car Summary</a>
        </div>
    </div>


    <!-- Selected Date Info -->
    <div class="alert alert-info">
        <strong>Date From:</strong> {{ dataFrom }}
        &nbsp; | &nbsp;
        <strong>Date Bis:</strong> {{ dataBis }}
    </div>


    <!-- Data Table -->
    <div class="card">
        <div class="card-header fw-bold">
            Records
        </div>

        <div class="table-responsive">
            <table class="table table-striped table-hover table-bordered" id="HyundaiTable" style="width:100%">
                <thead class="table-light">
                    <tr>
                        {% for colName in userDetails[0] %}
                            {% if colName in display_table_head %}
                                <th>{{ colName }}</th>
                            {% endif %}
                        {% endfor %}
                        <th>Edit</th>
                        <th>Delete</th>
                    </tr>
                </thead>

                <tbody>
                {% for row in userDetails[1:] %}
                    <tr>
                        {% for col in row %}
                            {% if userDetails[0,loop.index0] in display_table_head %}
                                <td>{{ col }}</td>
                            {% endif %}
<!--                            {% if loop.index0 == 15 %}-->
<!--                                <td>-->
<!--                                    {% if col is none %}-->
<!--                                        <form action="/upload_file/{{table_name}}/{{row[0]}}"-->
<!--                                              method="POST" enctype="multipart/form-data"-->
<!--                                              class="d-flex flex-column">-->

<!--                                            <input type="file" name="myfile" class="form-control mb-2">-->
<!--                                            <button class="btn btn-primary btn-sm" type="submit">-->
<!--                                                Upload File-->
<!--                                            </button>-->
<!--                                        </form>-->
<!--                                    {% else %}-->
<!--                                        {{ col }}-->
<!--                                    {% endif %}-->
<!--                                </td>-->
<!--                            {% else %}-->
<!--                                <td>{{ col }}</td>-->
<!--                            {% endif %}-->
                        {% endfor %}
                        <td><a href="/edit_car_row/{{table_name}}/{{row[0]}}" class="btn btn-danger btn-sm">Edit</a></td>
                        <td><a href="/deleterow/{{table_name}}/{{row[0]}}" class="btn btn-danger btn-sm">Delete</a></td>
                    </tr>
                {% endfor %}
                </tbody>

                <tfoot>
            <tr>
            {% for colName in userDetails[0] %}
            {% if colName in display_table_head %}
            <th></th>
            {% endif %}
            {% endfor %}
            <th></th>
            <th></th>
            </tr>
            </tfoot>

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

</div>

<script>
$(document).ready(function () {

    function parseNumber(value) {

        if (value === null || value === undefined || value === '') {
            return 0;
        }

        value = String(value);

        value = value
            .replace(/€/g, '')
            .replace(/\s/g, '')
            .replace(/\./g, '')
            .replace(',', '.');

        var num = parseFloat(value);

        return isNaN(num) ? 0 : num;
    }

    $('#HyundaiTable').DataTable({

        responsive: true,
        paging: true,
        searching: true,
        ordering: true,
        info: true,
        pageLength: 25,

        columnDefs: [
            {
                targets: [-1, -2],
                orderable: false,
                searchable: false
            }
        ],

        footerCallback: function (row, data, start, end, display) {

            let api = this.api();

            // CHANGE TO YOUR REAL COLUMN NUMBERS
            let bruttoColumn = 3;
            let amountColumn = 4;

            let bruttoTotal = api
                .column(bruttoColumn, { search: 'applied' })
                .data()
                .reduce(function (a, b) {
                    return parseNumber(a) + parseNumber(b);
                }, 0);

            let amountTotal = api
                .column(amountColumn, { search: 'applied' })
                .data()
                .reduce(function (a, b) {
                    return parseNumber(a) + parseNumber(b);
                }, 0);

            if (api.column(bruttoColumn).footer()) {
                $(api.column(bruttoColumn).footer()).html(
                    '<strong>' + bruttoTotal.toLocaleString('de-DE', {
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    }) + '</strong>'
                );
            }

            if (api.column(amountColumn).footer()) {
                $(api.column(amountColumn).footer()).html(
                    '<strong>' + amountTotal.toLocaleString('de-DE', {
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    }) + '</strong>'
                );
            }
        }
    });

});
</script>

{% endblock %}