{% extends 'base/layout.html' %}
{% load helpers %}
{% load i18n %}

{% block title %}Map Settings{% endblock %}

{% block header %}
  <h1>Map Settings</h1>
{% endblock %}

{% block content %}
<style>
  .checkbox-list { columns: 2; }
  .checkbox-list .form-check { break-inside: avoid; }
  .settings-form .form-check-label,
  .settings-form .form-text,
  .settings-form .text-muted.small {
    font-size: 0.85rem;
  }
  .settings-save-bar {
    position: sticky;
    bottom: 0;
    z-index: 100;
    padding: 0.75rem 0;
    background: inherit;
  }
</style>

<form method="post" class="settings-form">
  {% csrf_token %}

  {# ── Tab Navigation ── #}
  <ul class="nav nav-tabs mb-3" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="tab-general-btn" data-bs-toggle="tab"
              data-bs-target="#tab-general" type="button" role="tab"
              aria-controls="tab-general" aria-selected="true">
        <span class="mdi mdi-cog me-1"></span> General
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="tab-popover-btn" data-bs-toggle="tab"
              data-bs-target="#tab-popover" type="button" role="tab"
              aria-controls="tab-popover" aria-selected="false">
        <span class="mdi mdi-tooltip-text me-1"></span> Popover Fields
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="tab-detail-btn" data-bs-toggle="tab"
              data-bs-target="#tab-detail" type="button" role="tab"
              aria-controls="tab-detail" aria-selected="false">
        <span class="mdi mdi-card-text me-1"></span> Detail Panel
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="tab-tile-types-btn" data-bs-toggle="tab"
              data-bs-target="#tab-tile-types" type="button" role="tab"
              aria-controls="tab-tile-types" aria-selected="false">
        <span class="mdi mdi-shape me-1"></span> Tile Types
      </button>
    </li>
    <li class="nav-item ms-auto" role="presentation">
      <button class="nav-link" id="tab-about-btn" data-bs-toggle="tab"
              data-bs-target="#tab-about" type="button" role="tab"
              aria-controls="tab-about" aria-selected="false">
        <span class="mdi mdi-information-outline me-1"></span> About
      </button>
    </li>
  </ul>

  {# ── Tab Content ── #}
  <div class="tab-content">

    {# ━━ General Tab ━━ #}
    <div class="tab-pane fade show active" id="tab-general" role="tabpanel"
         aria-labelledby="tab-general-btn">
      <div class="card">
        <h5 class="card-header">
          <span class="mdi mdi-cog me-2"></span> General
        </h5>
        <div class="card-body">
          {% for field in form %}
            {% if field.name in 'show_mac,show_custom_fields,sync_device_gps,site_map_load_empty' %}
            <div class="mb-3 form-check">
              {{ field }}
              <label for="{{ field.id_for_label }}" class="form-check-label fw-bold">{{ field.label }}</label>
              {% if field.help_text %}
              <div class="form-text text-muted">{{ field.help_text }}</div>
              {% endif %}
              {% for error in field.errors %}
              <div class="text-danger">{{ error }}</div>
              {% endfor %}
            </div>
            {% endif %}
          {% endfor %}
        </div>
      </div>
    </div>

    {# ━━ Popover Fields Tab ━━ #}
    <div class="tab-pane fade" id="tab-popover" role="tabpanel"
         aria-labelledby="tab-popover-btn">
      <div class="accordion" id="popoverAccordion">

        {# ── Default Popover Fields (expanded) ── #}
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingPopover">
            <button class="accordion-button" type="button"
                    data-bs-toggle="collapse" data-bs-target="#collapsePopover"
                    aria-expanded="true" aria-controls="collapsePopover">
              <span class="mdi mdi-tooltip-text me-2"></span> Default Popover Fields (Fallback)
              <span class="ms-auto me-3 select-all-none" data-target="id_popover_fields">
                <a href="#" class="btn-select-all text-primary small" onclick="return false;">All</a>
                <span class="text-muted small">|</span>
                <a href="#" class="btn-select-none text-primary small" onclick="return false;">None</a>
              </span>
            </button>
          </h2>
          <div id="collapsePopover" class="accordion-collapse collapse show"
               aria-labelledby="headingPopover" data-bs-parent="#popoverAccordion">
            <div class="accordion-body checkbox-list">
              <p class="text-muted small mb-2">Fallback popover fields used when a tile type has no per-type configuration.</p>
              {% for field in form %}
                {% if field.name == 'popover_fields' %}
                  {{ field }}
                  {% for error in field.errors %}
                  <div class="text-danger">{{ error }}</div>
                  {% endfor %}
                {% endif %}
              {% endfor %}
            </div>
          </div>
        </div>

        {# ── Per-Tile-Type Popover Fields (collapsed) ── #}
        {% for tp in tile_popover_types %}
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingPopover_{{ tp.key }}">
            <button class="accordion-button collapsed" type="button"
                    data-bs-toggle="collapse" data-bs-target="#collapsePopover_{{ tp.key }}"
                    aria-expanded="false" aria-controls="collapsePopover_{{ tp.key }}">
              <span class="mdi {{ tp.icon }} me-2"></span> {{ tp.label }} Popover Fields
              <span class="ms-auto me-3 select-all-none" data-target="id_{{ tp.field_name }}">
                <a href="#" class="btn-select-all text-primary small" onclick="return false;">All</a>
                <span class="text-muted small">|</span>
                <a href="#" class="btn-select-none text-primary small" onclick="return false;">None</a>
              </span>
            </button>
          </h2>
          <div id="collapsePopover_{{ tp.key }}" class="accordion-collapse collapse"
               aria-labelledby="headingPopover_{{ tp.key }}" data-bs-parent="#popoverAccordion">
            <div class="accordion-body checkbox-list">
              <p class="text-muted small mb-2">Popover fields shown when hovering a <strong>{{ tp.label }}</strong> tile.</p>
              {% for field in form %}
                {% if field.name == tp.field_name %}
                  {{ field }}
                  {% for error in field.errors %}
                  <div class="text-danger">{{ error }}</div>
                  {% endfor %}
                {% endif %}
              {% endfor %}
            </div>
          </div>
        </div>
        {% endfor %}

      </div>{# /popoverAccordion #}
    </div>

    {# ━━ Detail Panel Tab ━━ #}
    <div class="tab-pane fade" id="tab-detail" role="tabpanel"
         aria-labelledby="tab-detail-btn">
      <div class="accordion" id="detailAccordion">

        {# ── Device Detail Fields ── #}
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingDevice">
            <button class="accordion-button collapsed" type="button"
                    data-bs-toggle="collapse" data-bs-target="#collapseDevice"
                    aria-expanded="false" aria-controls="collapseDevice">
              <span class="mdi mdi-server me-2"></span> Device Detail Fields
              <span class="ms-auto me-3 select-all-none" data-target="id_device_fields">
                <a href="#" class="btn-select-all text-primary small" onclick="return false;">All</a>
                <span class="text-muted small">|</span>
                <a href="#" class="btn-select-none text-primary small" onclick="return false;">None</a>
              </span>
            </button>
          </h2>
          <div id="collapseDevice" class="accordion-collapse collapse"
               aria-labelledby="headingDevice" data-bs-parent="#detailAccordion">
            <div class="accordion-body checkbox-list">
              {% for field in form %}
                {% if field.name == 'device_fields' %}
                  {{ field }}
                  {% for error in field.errors %}
                  <div class="text-danger">{{ error }}</div>
                  {% endfor %}
                {% endif %}
              {% endfor %}
            </div>
          </div>
        </div>

        {# ── Rack Detail Fields ── #}
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingRack">
            <button class="accordion-button collapsed" type="button"
                    data-bs-toggle="collapse" data-bs-target="#collapseRack"
                    aria-expanded="false" aria-controls="collapseRack">
              <span class="mdi mdi-collage me-2"></span> Rack Detail Fields
              <span class="ms-auto me-3 select-all-none" data-target="id_rack_fields">
                <a href="#" class="btn-select-all text-primary small" onclick="return false;">All</a>
                <span class="text-muted small">|</span>
                <a href="#" class="btn-select-none text-primary small" onclick="return false;">None</a>
              </span>
            </button>
          </h2>
          <div id="collapseRack" class="accordion-collapse collapse"
               aria-labelledby="headingRack" data-bs-parent="#detailAccordion">
            <div class="accordion-body checkbox-list">
              {% for field in form %}
                {% if field.name == 'rack_fields' %}
                  {{ field }}
                  {% for error in field.errors %}
                  <div class="text-danger">{{ error }}</div>
                  {% endfor %}
                {% endif %}
              {% endfor %}
            </div>
          </div>
        </div>

        {# ── Power Panel Detail Fields ── #}
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingPowerPanel">
            <button class="accordion-button collapsed" type="button"
                    data-bs-toggle="collapse" data-bs-target="#collapsePowerPanel"
                    aria-expanded="false" aria-controls="collapsePowerPanel">
              <span class="mdi mdi-flash me-2"></span> Power Panel Detail Fields
              <span class="ms-auto me-3 select-all-none" data-target="id_powerpanel_fields">
                <a href="#" class="btn-select-all text-primary small" onclick="return false;">All</a>
                <span class="text-muted small">|</span>
                <a href="#" class="btn-select-none text-primary small" onclick="return false;">None</a>
              </span>
            </button>
          </h2>
          <div id="collapsePowerPanel" class="accordion-collapse collapse"
               aria-labelledby="headingPowerPanel" data-bs-parent="#detailAccordion">
            <div class="accordion-body checkbox-list">
              {% for field in form %}
                {% if field.name == 'powerpanel_fields' %}
                  {{ field }}
                  {% for error in field.errors %}
                  <div class="text-danger">{{ error }}</div>
                  {% endfor %}
                {% endif %}
              {% endfor %}
            </div>
          </div>
        </div>

        {# ── Power Feed Detail Fields ── #}
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingPowerFeed">
            <button class="accordion-button collapsed" type="button"
                    data-bs-toggle="collapse" data-bs-target="#collapsePowerFeed"
                    aria-expanded="false" aria-controls="collapsePowerFeed">
              <span class="mdi mdi-power-plug me-2"></span> Power Feed Detail Fields
              <span class="ms-auto me-3 select-all-none" data-target="id_powerfeed_fields">
                <a href="#" class="btn-select-all text-primary small" onclick="return false;">All</a>
                <span class="text-muted small">|</span>
                <a href="#" class="btn-select-none text-primary small" onclick="return false;">None</a>
              </span>
            </button>
          </h2>
          <div id="collapsePowerFeed" class="accordion-collapse collapse"
               aria-labelledby="headingPowerFeed" data-bs-parent="#detailAccordion">
            <div class="accordion-body checkbox-list">
              {% for field in form %}
                {% if field.name == 'powerfeed_fields' %}
                  {{ field }}
                  {% for error in field.errors %}
                  <div class="text-danger">{{ error }}</div>
                  {% endfor %}
                {% endif %}
              {% endfor %}
            </div>
          </div>
        </div>

      </div>{# /detailAccordion #}
    </div>

    {# ━━ Tile Types Tab (#63) ━━ #}
    <div class="tab-pane fade" id="tab-tile-types" role="tabpanel"
         aria-labelledby="tab-tile-types-btn">

      {# Floor Plan section #}
      <div class="card mb-3">
        <h5 class="card-header">
          <span class="mdi mdi-floor-plan me-2"></span> {% trans "Active Tile Types — Floor Plan" %}
        </h5>
        <div class="card-body">
          <p class="text-muted small mb-3">
            {% blocktrans %}
            Tick the tile types you want available in the floor-plan editor toolbar.
            Existing tiles of unticked types still render normally — only the toolbar
            chip is hidden, so nothing breaks if a type is in use on an existing plan.
            Fresh installs hide the FTTH/fiber types by default; tick them here to enable.
            {% endblocktrans %}
          </p>
          <div class="row">
            {% for choice in form.visible_tile_types %}
            <div class="col-md-4 col-lg-3 mb-2">
              <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       name="visible_tile_types"
                       value="{{ choice.data.value }}"
                       id="{{ choice.id_for_label }}"
                       {% if choice.data.selected %}checked{% endif %}>
                <label class="form-check-label" for="{{ choice.id_for_label }}">{{ choice.choice_label }}</label>
              </div>
            </div>
            {% endfor %}
          </div>
          {% for error in form.visible_tile_types.errors %}
          <div class="text-danger small">{{ error }}</div>
          {% endfor %}
        </div>
      </div>

      {# Site Map section #}
      <div class="card">
        <h5 class="card-header">
          <span class="mdi mdi-map-outline me-2"></span> {% trans "Active Tile Types — Site Map" %}
        </h5>
        <div class="card-body">
          <p class="text-muted small mb-3">
            {% blocktrans %}
            Tick the marker types available in the Site Map create-chip tray. This
            list is independent of the floor-plan one — e.g. you can show fiber
            markers on the Site Map but hide them in individual floor plans, or
            vice versa.
            {% endblocktrans %}
          </p>
          <div class="row">
            {% for choice in form.visible_tile_types_sitemap %}
            <div class="col-md-4 col-lg-3 mb-2">
              <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       name="visible_tile_types_sitemap"
                       value="{{ choice.data.value }}"
                       id="{{ choice.id_for_label }}"
                       {% if choice.data.selected %}checked{% endif %}>
                <label class="form-check-label" for="{{ choice.id_for_label }}">{{ choice.choice_label }}</label>
              </div>
            </div>
            {% endfor %}
          </div>
          {% for error in form.visible_tile_types_sitemap.errors %}
          <div class="text-danger small">{{ error }}</div>
          {% endfor %}
        </div>
      </div>

    </div>

    {# ━━ About Tab ━━ #}
    <div class="tab-pane fade" id="tab-about" role="tabpanel"
         aria-labelledby="tab-about-btn">
      <div class="card">
        <h5 class="card-header">
          <span class="mdi mdi-information-outline me-2"></span> {% trans "About netbox-map" %}
        </h5>
        <div class="card-body">
          <dl class="row mb-3">
            <dt class="col-sm-3">{% trans "Version" %}</dt>
            <dd class="col-sm-9"><code>{{ plugin_version }}</code></dd>
            <dt class="col-sm-3">{% trans "Author" %}</dt>
            <dd class="col-sm-9">Christian Rose (<a href="https://github.com/DenDanskeMine" target="_blank" rel="noopener">@DenDanskeMine</a>)</dd>
            <dt class="col-sm-3">{% trans "License" %}</dt>
            <dd class="col-sm-9">Apache-2.0</dd>
            <dt class="col-sm-3">{% trans "Source" %}</dt>
            <dd class="col-sm-9"><a href="https://github.com/DenDanskeMine/netbox-map" target="_blank" rel="noopener">github.com/DenDanskeMine/netbox-map</a></dd>
            <dt class="col-sm-3">{% trans "Docs" %}</dt>
            <dd class="col-sm-9"><a href="https://dendanskemine.github.io/netbox-map/" target="_blank" rel="noopener">dendanskemine.github.io/netbox-map</a></dd>
            <dt class="col-sm-3">{% trans "Report an issue" %}</dt>
            <dd class="col-sm-9"><a href="https://github.com/DenDanskeMine/netbox-map/issues" target="_blank" rel="noopener">GitHub Issues</a></dd>
          </dl>

          <h6 class="mt-4">{% trans "Compatibility" %}</h6>
          <div class="table-responsive">
            <table class="table table-sm table-bordered align-middle mb-0">
              <thead>
                <tr>
                  <th>netbox-map</th>
                  <th>NetBox</th>
                  <th>Python</th>
                </tr>
              </thead>
              <tbody>
                <tr><td><code>0.12.x</code></td><td>4.5+ &middot; 4.6+</td><td>3.12+</td></tr>
                <tr><td><code>0.11.x</code></td><td>4.5+</td><td>3.12+</td></tr>
                <tr><td><code>0.10.x</code></td><td>4.5+</td><td>3.12+</td></tr>
                <tr><td><code>0.9.x</code></td><td>4.5+</td><td>3.12+</td></tr>
                <tr class="text-muted"><td>&le; 0.8.x</td><td>4.5+</td><td>3.12+</td></tr>
              </tbody>
            </table>
          </div>
          <p class="text-muted small mt-2 mb-0">
            {% trans "The plugin's <code>min_version</code> is enforced by NetBox at startup. If you upgrade NetBox to a version above the matrix, the plugin will continue to load but is not formally tested there." %}
          </p>
        </div>
      </div>
    </div>

  </div>{# /tab-content #}

  {# ── Sticky Save Button ── #}
  <div class="settings-save-bar text-end">
    <button type="submit" class="btn btn-primary">
      <span class="mdi mdi-content-save"></span> Save Settings
    </button>
  </div>
</form>

<script>
  // #63 — when the URL has a tab hash (eg #tab-tile-types), switch to it.
  // Bootstrap 5 doesn't activate tabs by URL hash on its own.
  (function () {
    var hash = window.location.hash;
    if (!hash) return;
    var btn = document.querySelector('.nav-tabs button[data-bs-target="' + hash + '"]');
    if (btn && window.bootstrap && window.bootstrap.Tab) {
      window.bootstrap.Tab.getOrCreateInstance(btn).show();
    }
  })();

  // Rewrite Django's CheckboxSelectMultiple output to use NetBox/Bootstrap 5 form-check classes
  document.querySelectorAll('.checkbox-list input[type="checkbox"]').forEach(function(input) {
    input.classList.remove('form-control');
    input.classList.add('form-check-input');
    var wrapper = input.closest('div:not([id])');
    if (wrapper) wrapper.classList.add('form-check');
    var label = input.closest('label');
    if (label) label.classList.add('form-check-label');
  });

  // Select All / None links
  document.querySelectorAll('.select-all-none').forEach(function(span) {
    var targetId = span.dataset.target;
    var container = document.getElementById(targetId);
    if (!container) return;

    span.querySelector('.btn-select-all').addEventListener('click', function(e) {
      e.stopPropagation();
      e.preventDefault();
      container.querySelectorAll('input[type="checkbox"]').forEach(function(cb) { cb.checked = true; });
    });

    span.querySelector('.btn-select-none').addEventListener('click', function(e) {
      e.stopPropagation();
      e.preventDefault();
      container.querySelectorAll('input[type="checkbox"]').forEach(function(cb) { cb.checked = false; });
    });
  });
</script>
{% endblock %}