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

{% 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>
  </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' %}
            <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>

  </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>
  // 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 %}