{% 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 text-center" style="border: 1px solid black">
    <div class="row">
        <div class="col">
            Total Unpaid Flights: {{total_unpaid_flights}}
        </div>
    </div>
    <div class="row">
        <div class="col">
            Total Flight time this year: {{flight_time_this_year}}
        </div>
    </div>
    <div class="row">
        <div class="col">
            Total Flight Time: {{total_flight_time}}
        </div>
    </div>
</div>
<br>


<div class="container py-4">

    <!-- Page Title -->
    <h1 class="mb-4">flight_logs</h1>

    <!-- 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 complete_table[0] %}
                            {% if colName in displayTableHead %}
                                <th>{{ colName }}</th>
                            {% endif %}
                        {% endfor %}
                        <th>Edit</th>
<!--                        <th>Delete</th>-->
                    </tr>
                </thead>

                <tbody>
                {% for row in complete_table[1:] %}
                    <tr>
                        {% for col in row %}
                            {% if complete_table[0,loop.index0] in displayTableHead %}
                                <td>{{ col }}</td>
                            {% endif %}
                        {% endfor %}
                        <td><a href="/pay_flight/{{row[0]}}" class="btn btn-danger btn-sm">Pay</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 complete_table[0] %}
                        {% if colName in displayTableHead %}
                            <th></th>
                        {% endif %}
                    {% endfor %}
                    </tr>
                </tfoot>

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

</div>

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

    $('#HyundaiTable').DataTable({

        responsive: true,
        paging: true,
        searching: true,
        ordering: true,
        info: true,
        pageLength: 25,
        order: [],

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

            let api = this.api();

            // ----------------------------------
            // Helpers
            // ----------------------------------

            function parseNumber(value) {

                if (!value) {
                    return 0;
                }

                return parseFloat(
                    String(value)
                        .replace(',', '.')
                        .replace(/[^\d.-]/g, '')
                ) || 0;
            }

            function timeToSeconds(timeStr) {

                if (!timeStr) {
                    return 0;
                }

                let parts = String(timeStr).split(':');

                if (parts.length !== 3) {
                    return 0;
                }

                let h = parseInt(parts[0], 10) || 0;
                let m = parseInt(parts[1], 10) || 0;
                let s = parseInt(parts[2], 10) || 0;

                return h * 3600 + m * 60 + s;
            }

            function secondsToTime(totalSeconds) {

                let h = Math.floor(totalSeconds / 3600);

                totalSeconds %= 3600;

                let m = Math.floor(totalSeconds / 60);

                let s = totalSeconds % 60;

                return (
                    String(h).padStart(2, '0') + ':' +
                    String(m).padStart(2, '0') + ':' +
                    String(s).padStart(2, '0')
                );
            }

            // ----------------------------------
            // Find column indexes by name
            // ----------------------------------

            let flightTimeCol = -1;
            let landingsCol = -1;
            let priceHourCol = -1;

            api.columns().every(function (index) {

                let headerText = $(this.header())
                    .text()
                    .trim()
                    .toLowerCase();

                if (headerText === 'flight_time') {
                    flightTimeCol = index;
                }

                if (headerText === 'landings') {
                    landingsCol = index;
                }

                if (headerText === 'price_hour') {
                    priceHourCol = index;
                }

            });

            // ----------------------------------
            // Flight Time HH:MM:SS
            // ----------------------------------

            if (flightTimeCol >= 0) {

                let totalFlightSeconds = api
                    .column(flightTimeCol, { search: 'applied' })
                    .data()
                    .reduce(function (total, value) {

                        return total + timeToSeconds(value);

                    }, 0);

                $(api.column(flightTimeCol).footer()).html(
                    '<strong>Total: ' +
                    secondsToTime(totalFlightSeconds) +
                    '</strong>'
                );
            }

            // ----------------------------------
            // Landings
            // ----------------------------------

            if (landingsCol >= 0) {

                let totalLandings = api
                    .column(landingsCol, { search: 'applied' })
                    .data()
                    .reduce(function (total, value) {

                        return total + parseNumber(value);

                    }, 0);

                $(api.column(landingsCol).footer()).html(
                    '<strong>Total: ' +
                    totalLandings.toFixed(0) +
                    '</strong>'
                );
            }

            // ----------------------------------
            // Price Hour
            // ----------------------------------

            if (priceHourCol >= 0) {

                let totalPriceHour = api
                    .column(priceHourCol, { search: 'applied' })
                    .data()
                    .reduce(function (total, value) {

                        return total + parseNumber(value);

                    }, 0);

                $(api.column(priceHourCol).footer()).html(
                    '<strong>Total: ' +
                    totalPriceHour.toFixed(2) +
                    '</strong>'
                );
            }

        }

    });

});
</script>
{% endblock %}