{% extends "metenox/base.html" %}
{% load i18n %}
{% load aa_i18n %}
{% load static %}
{% load metenox %}
{% block details %}
    <div class="moon-datatable-filters">
        <div class="align-items-center d-flex flex-wrap gap-2 mb-3">
            <!-- Regions filter -->
            <div>
                <select id="filter-region" class="form-select">
                    <option value="">{% translate "(Region)" %}</option>
                    {% for region in regions %}<option value="{{ region.id }}">{{ region.name }}</option>{% endfor %}
                </select>
            </div>
            <!-- Constellation filter -->
            <div>
                <select id="filter-constellation" class="form-select">
                    <option value="">{% translate "(Constellation)" %}</option>
                    {% for constellation in constellations %}
                        <option value="{{ constellation.id }}">{{ constellation.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <!-- System filter -->
            <div>
                <select id="filter-solar-system" class="form-select">
                    <option value="">{% translate "(Solar system)" %}</option>
                    {% for solar_system in solar_systems %}
                        <option value="{{ solar_system.id }}">{{ solar_system.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <!-- Rarity filter -->
            <div>
                <select id="filter-rarity" class="form-select">
                    <option value="">{% translate "(Rarity)" %}</option>
                    {% for rarity in rarities %}<option value="{{ rarity }}">{{ rarity }}</option>{% endfor %}
                </select>
            </div>
            {% if perms.metenox.auditor %}
                <!-- Has metenox filter -->
                <div>
                    <select id="filter-metenox" class="form-select">
                        <option value="">{% translate "(Has a metenox)" %}</option>
                        <option value="Y">{% translate "Yes" %}</option>
                        <option value="N">{% translate "No" %}</option>
                    </select>
                </div>
            {% endif %}
            <!-- Tags filter -->
            <div>
                <select id="filter-tag" class="form-select">
                    <option value="">{% translate "(Tag)" %}</option>
                    {% for tag in tags %}<option value="{{ tag }}">{{ tag }}</option>{% endfor %}
                </select>
            </div>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-stripped table-moons w-100" id="table_all">
            <thead>
                <th class="w-auto">{% translate "Moon" %}</th>
                <th class="w-auto">{% translate "System" %}</th>
                <th class="w-auto">
                    {% translate "Constellation" %}
                    <br>
                    {% translate "Region" %}
                </th>
                <th class="w-auto">
                    {% translate "Est. Value" %}
                    <br>
                    {% translate 'Est. Profit' %}
                </th>
            </thead>
        </table>
    </div>
    {% include "metenox/partials/footer.html" %}
    {% include "metenox/modals/base.html" with modal_id="modalMoonDetails" modal_content_id="modalMoonDetailsContent" %}
{% 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>
      const custom_dt_filter = {
        region: $('#filter-region'),
        constellation: $('#filter-constellation'),
        solar_system: $('#filter-solar-system'),
        rarity: $('#filter-rarity'),
        {% if perms.metenox.auditor %}metenox: $('#filter-metenox'),{% endif %}
        tag: $('#filter-tag')
      };
      $(document).ready(() => {
        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:moon_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, 2, 4 ] },
          ],
          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("modalMoonDetails", "modalMoonDetailsContent");
      })
    </script>
    {{ block.super }}
{% endblock %}