{% extends "metenox/base.html" %}
{% load i18n %}
{% load static %}
{% load metenox %}
{% block details %}
    <div class="table-responsive">
        <table class="table table-stripped table-moons w-100" id="table_all">
            <thead>
                <th class="w-auto">{% translate "Corporation name" %}</th>
                <th class="w-auto">{% translate "Alliance name" %}</th>
                <th class="w-auto">{% translate "Number metenoxes" %}</th>
                <th class="w-auto">{% translate "Raw revenue" %}</th>
                <th class="w-auto">{% translate "Profit" %}</th>
                <th class="w-auto"></th>
                <th class="w-auto"></th>
            </thead>
        </table>
    </div>
    {% include "metenox/partials/corp_footer.html" %}
    <!-- Modals -->
    {% include "metenox/modals/base.html" with modal_id="modalCorporationNotifications" modal_content_id="modalCorporationNotificationsContent" %}
    {% include "metenox/modals/base.html" with modal_id="modalCorporationBreakdown" modal_content_id="modalCorporationBreakdownContent" %}
{% endblock %}
{% block extra_css %}
    {% include "bundles/datatables-2-css-bs5.html" %}
{% endblock %}
{% block extra_javascript %}
    {% get_datatables_language_static LANGUAGE_CODE as DT_LANG_PATH %}
    {% include "bundles/datatables-2-js-bs5.html" %}
    <script>
        $(document).ready(() => {
          const custom_dt_filter = {

          };
          const dt = new DataTable('#table_all', {
            language: {
                url: '{{ DT_LANG_PATH }}',
                processing: `{% include "framework/datatables/process-indicator.html" %}`
            },
            searching: false,
            ordering: {
              indicators: true
            },
            processing: true,
            serverSide: true,
            ajax: {
                url: '{% url "metenox:corporation_table_data" %}',
                data: (data) => {
                  const mappedFilters = Object.fromEntries(
                      Object.entries(custom_dt_filter).map(([key, $el]) => [`filter_${key}`, $el.val()])
                  );
                  return {...data, ...mappedFilters};
                },
                error: (xhr, error) => console.error('Error fetching data:', xhr, error)
            },
            columnDefs: [
                { "orderable": false, "targets": [ 1, 3, 4, 5, 6 ] },
                { "targets": [3, 4], "render": $.fn.dataTable.render.formatisk() }
            ],
            order: [ [0, "asc"] ],
            initComplete: () => {
                // Redraw table when filter values change
                Object.values(custom_dt_filter).forEach(($el) => {
                    $el.on('change', () => dt.draw());
                });
            }
          });

          handle_modal_events("modalCorporationNotifications", "modalCorporationNotificationsContent");
          handle_modal_events("modalCorporationBreakdown", "modalCorporationBreakdownContent");
        });

    </script>
    {{ block.super }}
{% endblock %}