{% extends "allianceauth/base-bs5.html" %}
{% load i18n %}
{% load static %}
{% load humanize %}
{% block header_nav_collapse_left %}
    {% include 'corptools/top_menu.html' %}
{% endblock %}

{% block content %}

    {% if structures %}
        <h2 class="text-center">Structure and Fuel Stats</h2>
        <hr>
        <div id="chart_info" class="mx-auto">
            <div class="text-center">
                <h4 class="text-center">Filtered Stats</h4>
                <p>
                    Structures Matching Filter <span id="total_str" class="badge bg-primary"></span>
                </p>
                <p>
                    Block Usage (Month) <span id="total_fuel" class="badge bg-primary"></span>
                </p>
                <p>
                    Required Blocks for <span id="totalDaysTitle"></span> Days <span id="total_fuel_90d" class="badge bg-primary"></span>
                </p>
                <p>
                    Filtered System Count <span id="total_system" class="badge bg-primary"></span>
                </p>
                <p>
                    Filtered Constelation Count <span id="total_const" class="badge bg-primary"></span>
                </p>
                <p>
                    Filtered Region Count <span id="total_region" class="badge bg-primary"></span>
                </p>
            </div>
            <!-- <div class="text-center col-lg-6 hide">
                <h4 class="text-center">Filtered Fuel Stats</h4><hr>
                <p>Total Current Block Count <span class="label label-primary">0</span></p>
                <p>Approx Time of Current Stocks <span class="label label-primary">0</span></p>
            </div> -->
        </div>
        <hr>
        <div class="">
            <label for="fuelDuration" class="form-label">Refuel Duration in days</label>
            <input type="number" class="form-control" id="fuelDuration" placeholder="90">
        </div>
        <div class="table-responsive">
            <table id="table-structs" class="table table-responsive ">
                <thead>
                    <tr>
                        <th></th>
                        <th>Structure</th>
                        <th class="text-center">Fuel Use 30d</th>
                        <th class="text-center">Fuel Expires</th>
                        <th class="text-center">
                            Blocks for <span id="daytitle">90</span>d Refuel
                        </th>
                        <th class="text-center">Services</th>
                        <th>System</th>
                        <th>Constellation</th>
                        <th>Region</th>
                        <th>Corp</th>
                        <th>Type</th>
                    </tr>
                </thead>
                <tbody>
                    {% for structure in structures %}
                        <tr>
                            <td>
                                <img class="ra-avatar img-circle" src="https://image.eveonline.com/Type/{{ structure.structure.type_id }}_64.png">
                            </td>
                            <td>
                                {{ structure.structure.name }}
                                <br>
                                <span class="badge bg-secondary">{{ structure.structure.type_name.name }}</span>
                                <br>
                                <span class="badge bg-primary">{{ structure.structure.corporation.corporation.corporation_name }}</span>
                            </td>
                            <td class="text-center">{% widthratio structure.fuel_req 1 720 %}</td>
                            <td class="text-center">
                                {% if structure.extra_fuel_info %}
                                    {% if structure.structure.fuel_expires < structure.extra_fuel_info.expires %}
                                        {{ structure.structure.fuel_expires|date:"Y-m-d" }}
                                        <br>
                                        <span class="badge bg-secondary">Blocks: {{ structure.structure.fuel_expires|timeuntil }}</span>
                                        <br>
                                        <span class="badge bg-secondary">{{ structure.extra_fuel_info.name }}: {{ structure.extra_fuel_info.expires|timeuntil }}</span>
                                    {% else %}
                                        {{ structure.extra_fuel_info.expires|date:"Y-m-d" }}
                                        <br>
                                        <span class="badge bg-secondary">{{ structure.extra_fuel_info.name }}: {{ structure.extra_fuel_info.expires|timeuntil }}</span>
                                        <br>
                                        <span class="badge bg-secondary">Blocks: {{ structure.structure.fuel_expires|timeuntil }}</span>
                                    {% endif %}
                                {% else %}
                                    {{ structure.structure.fuel_expires|date:"Y-m-d" }}
                                    <br>
                                    <span class="badge bg-secondary">Blocks: {{ structure.structure.fuel_expires|timeuntil }}</span>
                                {% endif %}

                            </td>
                            <td class="text-center blocks-till" start_blocks="{{ structure.current_blocks }}" hourly="{{ structure.fuel_req }}">
                                {{ structure.90day }}
                            </td>
                            <td class="text-center">
                                {% for service in structure.structure.structureservice_set.all %}
                                    {% if service.state == 'online' %}
                                        <span class="badge bg-primary">{{ service.name }}</span>
                                    {% else %}
                                        <span class="badge bg-danger">{{ service.name }}</span>
                                    {% endif %}
                                {% endfor %}
                            </td>
                            <th>{{ structure.structure.system_name.name }}</th>
                            <th>{{ structure.structure.system_name.constellation.name }}</th>
                            <th>{{ structure.structure.system_name.constellation.region.name }}</th>
                            <th>{{ structure.structure.corporation.corporation.corporation_name }}</th>
                            <th>{{ structure.structure.type_name.name }}</th>
                </tr>
        {% empty %}

        {% endfor %}
    </tbody>
</table>
</div>
{% else %}
<div class="alert alert-warning text-center">{% translate "No Structures Available" %}</div>
{% endif %}
{% endblock content %}
{% block extra_javascript %}
    {% include "bundles/datatables-js-bs5.html" %}
    {% include "bundles/filterdropdown-js.html" %}

{% endblock extra_javascript %}
{% block extra_script %}
    function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

    $(document).ready(function() {
    $('#table-structs').DataTable({
    filterDropDown: {
    columns: [{
    idx: 10
    },
    {
    idx: 7
    },
    {
    idx: 8
    },
    {
    idx:9
    }
    ],

    },
    columnDefs: [
    { "searchable": false, "targets": [0] },
    { "sortable": false, "targets": [0] },
    { "visible": false, "targets": [10, 6, 7, 8, 9] }
    ],
    order: [
    [1, "desc"]
    ],
    paging: false,
    responsive: true,
    pageLength: -1,
    footerCallback: function ( row, data, start, end, display ) {
    var api = this.api(), data;

    var pageTotal = api
    .column(2, { page: 'current'})
    .data()
    .reduce( function (a, b) {
    return Number(a) + Number(b);
    }, 0 );

    pageTotal_req = api
    .column(4, { page: 'current'})
    .data()
    .reduce( function (a, b) {
    return Number(a) + Number(b);
    }, 0 );

    var total_count = api.column(9, { page: 'current'}).data().count();
    var systems = api.column(6, { page: 'current'}).data().unique().count();
    var constel = api.column(7, { page: 'current'}).data().unique().count();
    var region = api.column(8, { page: 'current'}).data().unique().count();

    var types = [];

    api.column(9, { page: 'current'}).data().unique().each(function(value, index) {
    types.push(value);
    });

    var type_count = [];
    var t;
    for ( t of types) {
    console.log(t)
    filteredData = api.column(9, {search: 'applied'})
    .data()
    .filter( function ( value, index ) {
    return value == t ? true : false;
    } ).count();
    type_count.push(filteredData);
    }
    console.log(types);
    console.log(type_count);
    $('#total_fuel').html(numberWithCommas(pageTotal))
    $('#total_fuel_90d').html(numberWithCommas(pageTotal_req))
    $('#total_str').html(numberWithCommas(total_count))
    $('#total_system').html(numberWithCommas(systems))
    $('#total_const').html(numberWithCommas(constel))
    $('#total_region').html(numberWithCommas(region))

    }
    });
    const duration_title = document.getElementById('daytitle');
    const duration_title2 = document.getElementById('totalDaysTitle');
    const duration_90d_span = document.getElementById('total_fuel_90d');

    const fuelInput = document.getElementById('fuelDuration');
    const inputHandler = function(e) {
    const fuelItems = document.getElementsByClassName("blocks-till");
    var days = Number(e.target.value)
    if (days <= 30 ){
    days = 30;
    }
    const hours = days*24
    duration_title.innerText = days;
    duration_title2.innerText = days;
    var total_reqs = 0
    for (const elem of fuelItems) {
    console.log(elem);
    const start_blocks = elem.getAttribute("start_blocks");
    const hourly = elem.getAttribute("hourly");
    var blocks = hourly*hours - start_blocks;
    if (blocks >=0){
    elem.innerText = blocks;
    total_reqs += blocks;
    } else {
    elem.innerText = 0;
    }
    }
    duration_90d_span.innerText = numberWithCommas(total_reqs);

    }
    fuelInput.addEventListener('input', inputHandler);

    });
{% endblock extra_script %}
{% block extra_css %}
    <style>
        body {
            table-layout: fixed;
        }
    </style>
    {% include "bundles/datatables-css-bs5.html" %}
{% endblock extra_css %}
