{% extends "shared/frontend/base.html" %}

{% block title %}Forbindelsesdetaljer{% endblock %}

{% block extra_css %}
<style>
  .detail-hero {
    background:
      radial-gradient(circle at top right, rgba(15, 76, 117, 0.18), transparent 34%),
      linear-gradient(135deg, rgba(15, 76, 117, 0.1), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(15, 76, 117, 0.14);
    border-radius: 24px;
    padding: 1.5rem;
    box-shadow: 0 16px 36px rgba(15, 76, 117, 0.08);
  }

  .detail-panel {
    background: var(--bg-card);
    border: 1px solid rgba(15, 76, 117, 0.12);
    border-radius: 20px;
    box-shadow: 0 14px 32px rgba(15, 76, 117, 0.06);
  }

  .detail-metric {
    background: linear-gradient(180deg, rgba(15, 76, 117, 0.04), rgba(15, 76, 117, 0.01));
    border: 1px solid rgba(15, 76, 117, 0.1);
    border-radius: 16px;
    padding: 1rem;
    height: 100%;
  }

  .detail-metric-label {
    color: var(--text-secondary);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .detail-metric-value {
    color: var(--text-primary);
    font-size: 1.35rem;
    font-weight: 700;
  }

  .detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.8rem;
  }

  .detail-grid-card {
    border: 1px solid rgba(15, 76, 117, 0.1);
    border-radius: 14px;
    background: rgba(15, 76, 117, 0.03);
    padding: 0.85rem;
  }

  .detail-grid-card.editing {
    border-color: rgba(15, 76, 117, 0.28);
    background: rgba(15, 76, 117, 0.06);
  }

  .detail-grid-card .label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
  }

  .detail-grid-card .value {
    color: var(--text-primary);
    font-weight: 600;
  }

  .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .status-pill.active {
    background: rgba(25, 135, 84, 0.12);
    color: #146c43;
  }

  .status-pill.inactive {
    background: rgba(108, 117, 125, 0.14);
    color: #495057;
  }

  .status-pill.pending,
  .status-pill.planned {
    background: rgba(255, 193, 7, 0.18);
    color: #997404;
  }

  .status-pill.terminated,
  .status-pill.cancelled {
    background: rgba(220, 53, 69, 0.12);
    color: #b02a37;
  }

  .timeline-item {
    border-left: 3px solid rgba(15, 76, 117, 0.25);
    padding-left: 1rem;
    margin-left: 0.5rem;
    margin-bottom: 1rem;
  }

  .sticky-sidebar {
    position: sticky;
    top: 1rem;
  }

  .lookup-hint {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 0.35rem;
  }

  .range-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.75rem;
  }

  .detail-read-layout {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
  }

  .detail-read-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding-bottom: 0.2rem;
  }

  .detail-read-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 42px;
    padding: 0.55rem 0.8rem;
    border: 1px solid rgba(15, 76, 117, 0.1);
    border-radius: 14px;
    background: rgba(15, 76, 117, 0.03);
    line-height: 1.2;
  }

  .detail-read-chip .label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    font-weight: 700;
    white-space: nowrap;
  }

  .detail-read-chip .value {
    font-size: 0.96rem;
    color: var(--text-primary);
    font-weight: 600;
  }

  .detail-read-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem 1.2rem;
  }

  .detail-read-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 0.7rem;
    align-items: start;
    padding: 0.15rem 0;
    border-bottom: 1px solid rgba(15, 76, 117, 0.08);
  }

  .detail-read-row.full {
    grid-column: 1 / -1;
  }

  .detail-read-row:last-child,
  .detail-read-grid > .detail-read-row:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
  }

  .detail-read-row .label {
    font-size: 0.73rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    font-weight: 700;
    padding-top: 0.2rem;
  }

  .detail-read-row .value {
    font-size: 0.98rem;
    color: var(--text-primary);
    font-weight: 600;
    word-break: break-word;
  }

  .detail-read-muted {
    color: var(--text-secondary);
    font-weight: 500;
  }

  .wizard-section {
    border: 1px solid rgba(15, 76, 117, 0.1);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(15, 76, 117, 0.03), rgba(15, 76, 117, 0.01));
    padding: 1rem;
  }

  .wizard-section-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    font-weight: 700;
    margin-bottom: 0.75rem;
  }

  @media (max-width: 991.98px) {
    .detail-read-grid {
      grid-template-columns: 1fr;
    }

    .detail-read-row,
    .detail-read-row.full {
      grid-template-columns: 1fr;
      gap: 0.2rem;
    }
  }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
  <div class="detail-hero mb-4">
      <div class="d-flex flex-column flex-xl-row justify-content-between align-items-xl-start gap-3">
      <div>
        <div class="small text-uppercase fw-semibold text-muted mb-2">Internetforbindelse</div>
        <h2 class="h3 mb-1" id="detailName">Indlæser...</h2>
        <div class="text-muted" id="detailSubtitle">Henter forbindelsesdata...</div>
        <div class="small mt-2 text-muted" id="detailSaveFeedback" role="status"></div>
      </div>
      <div class="d-flex gap-2 flex-wrap">
        <a href="/economy/internet-connections" class="btn btn-outline-secondary">
          <i class="bi bi-arrow-left me-1"></i>Tilbage
        </a>
        <button class="btn btn-primary d-none" id="openBmcnetWizardBtn" type="button" onclick="openBmcnetWizard()">
          <i class="bi bi-diagram-3 me-1"></i>Ny BMCnet
        </button>
        <button class="btn btn-outline-primary" id="editCoreDetailsBtn" type="button" onclick="toggleCoreEdit(true)">
          <i class="bi bi-pencil me-1"></i>Rediger
        </button>
        <button class="btn btn-outline-secondary d-none" id="cancelCoreDetailsBtn" type="button" onclick="toggleCoreEdit(false)">
          <i class="bi bi-x-lg me-1"></i>Annuller
        </button>
        <button class="btn btn-primary d-none" id="saveCoreDetailsBtn" type="button" onclick="saveCoreDetails()">
          <i class="bi bi-save me-1"></i>Gem ændringer
        </button>
      </div>
    </div>
  </div>

  <div class="row g-4 mb-4">
    <div class="col-6 col-xl-3">
      <div class="detail-metric">
        <div class="detail-metric-label">Salgspris</div>
        <div class="detail-metric-value" id="metricSales">0 kr.</div>
      </div>
    </div>
    <div class="col-6 col-xl-3">
      <div class="detail-metric">
        <div class="detail-metric-label">Indkøbspris</div>
        <div class="detail-metric-value" id="metricPurchase">0 kr.</div>
      </div>
    </div>
    <div class="col-6 col-xl-3">
      <div class="detail-metric">
        <div class="detail-metric-label">Dækningsbidrag</div>
        <div class="detail-metric-value" id="metricMargin">0 kr.</div>
      </div>
    </div>
    <div class="col-6 col-xl-3">
      <div class="detail-metric">
        <div class="detail-metric-label">IP-adresser</div>
        <div class="detail-metric-value" id="metricIps">0</div>
      </div>
    </div>
    <div class="col-12 col-xl-3">
      <div class="detail-metric">
        <div class="detail-metric-label">Båndbredde i brug</div>
        <div class="detail-metric-value" id="metricBandwidth">0 / 0 Mbps</div>
        <div class="small text-muted mt-1" id="metricBandwidthSub">0%</div>
      </div>
    </div>
  </div>

  <div class="row g-4">
    <div class="col-xl-8">
      <div class="detail-panel p-4 mb-4">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <h5 class="mb-0">Grunddata</h5>
          <span id="detailStatusBadge" class="status-pill inactive">-</span>
        </div>
        <div id="coreReadView" class="detail-read-layout mb-2"></div>
        <div class="row g-3 d-none" id="coreEditForm">
          <div class="col-md-6">
            <label class="form-label">Navn</label>
            <input type="text" class="form-control" id="fieldName">
          </div>
          <div class="col-md-3">
            <label class="form-label">Leverandør</label>
            <input type="text" class="form-control" id="fieldProvider">
          </div>
          <div class="col-md-3">
            <label class="form-label">Kredsløb</label>
            <input type="text" class="form-control" id="fieldCircuit">
          </div>
          <div class="col-md-6">
            <label class="form-label">Adresse</label>
            <input type="text" class="form-control" id="fieldAddress">
          </div>
          <div class="col-md-3">
            <label class="form-label">Kunde</label>
            <input type="text" class="form-control" id="fieldCustomerLookup" list="customerLookupList" placeholder="Søg kunde">
            <input type="hidden" id="fieldCustomerId">
            <div class="lookup-hint">Søg på kundenavn og behold ID i baggrunden.</div>
          </div>
          <div class="col-md-3">
            <label class="form-label">Parent-forbindelse</label>
            <input type="text" class="form-control" id="fieldParentLookup" list="connectionLookupList" placeholder="Søg forbindelse">
            <input type="hidden" id="fieldParentId">
            <div class="lookup-hint">Bruges hvis denne ligger under en hovedforbindelse.</div>
          </div>
          <div class="col-md-3">
            <label class="form-label">Forbindelsestype</label>
            <input type="text" class="form-control" id="fieldConnectionType">
          </div>
          <div class="col-md-3">
            <label class="form-label">Teknologi</label>
            <input type="text" class="form-control" id="fieldTechnology">
          </div>
          <div class="col-md-2">
            <label class="form-label">Download</label>
            <input type="number" class="form-control" id="fieldDownload">
          </div>
          <div class="col-md-2">
            <label class="form-label">Upload</label>
            <input type="number" class="form-control" id="fieldUpload">
          </div>
          <div class="col-md-2">
            <label class="form-label">Fallback Mbps</label>
            <input type="number" class="form-control" id="fieldSpeed">
          </div>
          <div class="col-md-3">
            <label class="form-label">Status</label>
            <select class="form-select" id="fieldStatus">
              <option value="active">Aktiv</option>
              <option value="planned">Planlagt</option>
              <option value="pending">Afventer</option>
              <option value="inactive">Inaktiv</option>
              <option value="terminated">Opsagt</option>
            </select>
          </div>
          <div class="col-md-6">
            <label class="form-label">Overvågning</label>
            <input type="text" class="form-control" id="fieldMonitoringUrl" placeholder="https://...">
          </div>
          <div class="col-md-3">
            <label class="form-label">Allokering</label>
            <select class="form-select" id="fieldAllocationModel">
              <option value="dedicated">Dedikeret</option>
              <option value="shared">Delt</option>
            </select>
          </div>
          <div class="col-md-3">
            <label class="form-label">Værdi-type</label>
            <select class="form-select" id="fieldValueType" onchange="toggleValueFields()">
              <option value="subscription">Abonnement</option>
              <option value="bmc_networks">BMC Networks</option>
              <option value="delefiber">Delefiber</option>
              <option value="other">Anden</option>
            </select>
          </div>
          <div class="col-md-6" id="fieldValueLabelWrap">
            <label class="form-label">Værdi / klassifikation</label>
            <input type="text" class="form-control" id="fieldValueLabel" placeholder="fx delt transit, intern backbone">
          </div>
          <div class="col-md-6 d-none" id="fieldSubscriptionWrap">
            <label class="form-label">Abonnement</label>
            <input type="text" class="form-control" id="fieldSubscriptionLookup" list="subscriptionLookupList" placeholder="Søg abonnement">
            <input type="hidden" id="fieldSubscriptionId">
            <div class="lookup-hint">Forbindelsen må kun have ét aktivt abonnement direkte koblet på.</div>
          </div>
          <div class="col-md-3">
            <label class="form-label">Kontrakt start</label>
            <input type="date" class="form-control" id="fieldContractStart">
          </div>
          <div class="col-md-3">
            <label class="form-label">Kontrakt slut</label>
            <input type="date" class="form-control" id="fieldContractEnd">
          </div>
          <div class="col-12">
            <label class="form-label">Noter</label>
            <textarea class="form-control" id="fieldNotes" rows="3"></textarea>
          </div>
        </div>
      </div>

      <div class="detail-panel p-4 mb-4">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <div>
            <h5 class="mb-0">IP-ranges</h5>
            <div class="small text-muted" id="rangeCreateFeedback"></div>
          </div>
          <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#createRangeForm">Tilføj range</button>
        </div>
        <div class="collapse mb-3" id="createRangeForm">
          <div class="row g-2">
            <div class="col-md-3">
              <label class="form-label small text-muted mb-1" for="rangeCidrInput">CIDR</label>
              <input type="text" class="form-control" id="rangeCidrInput" placeholder="fx 87.116.1.200/29">
            </div>
            <div class="col-md-3">
              <label class="form-label small text-muted mb-1" for="rangeNameInput">Navn</label>
              <input type="text" class="form-control" id="rangeNameInput" placeholder="Valgfrit, ellers bruges CIDR">
            </div>
            <div class="col-md-3">
              <label class="form-label small text-muted mb-1" for="rangeProviderReferenceInput">Provider ref.</label>
              <input type="text" class="form-control" id="rangeProviderReferenceInput" placeholder="Provider ref.">
            </div>
            <div class="col-md-3">
              <label class="form-label small text-muted mb-1" for="rangeContractInput">Kontrakt</label>
              <input type="text" class="form-control" id="rangeContractInput" placeholder="Kontrakt">
            </div>
            <div class="col-md-4">
              <label class="form-label small text-muted mb-1" for="rangeServiceAddressInput">Serviceadresse</label>
              <input type="text" class="form-control" id="rangeServiceAddressInput" placeholder="Serviceadresse">
            </div>
            <div class="col-md-4">
              <label class="form-label small text-muted mb-1" for="rangeDescriptionInput">Beskrivelse</label>
              <input type="text" class="form-control" id="rangeDescriptionInput" placeholder="Beskrivelse">
            </div>
            <div class="col-md-4">
              <label class="form-label small text-muted mb-1" for="rangeCustomerLookupInput">Kunde på range</label>
              <input type="text" class="form-control" id="rangeCustomerLookupInput" list="customerLookupList" placeholder="Kunde på range">
              <input type="hidden" id="rangeCustomerIdInput">
            </div>
            <div class="col-md-2">
              <label class="form-label small text-muted mb-1" for="rangeMonthlyCostInput">Kost</label>
              <input type="number" class="form-control" id="rangeMonthlyCostInput" placeholder="Kost">
            </div>
            <div class="col-md-2">
              <label class="form-label small text-muted mb-1" for="rangeSalesPriceInput">Salg</label>
              <input type="number" class="form-control" id="rangeSalesPriceInput" placeholder="Salg">
            </div>
            <div class="col-md-2"><button class="btn btn-primary w-100" id="createRangeButton" type="button" onclick="createRange()">Gem</button></div>
          </div>
        </div>
        <div id="ipRangesList" class="detail-grid"></div>
      </div>

      <div class="detail-panel p-4 mb-4">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <div>
            <h5 class="mb-0">IP-adresser</h5>
            <div class="small text-muted" id="ipAddressSummary">Indlæser...</div>
          </div>
          <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#createAddressForm">Tilføj IP</button>
        </div>
        <div class="collapse mb-3" id="createAddressForm">
          <div class="row g-2">
            <div class="col-md-3"><select class="form-select" id="addressRangeSelect"></select></div>
            <div class="col-md-3"><input type="text" class="form-control" id="addressIpInput" placeholder="IP-adresse"></div>
            <div class="col-md-2">
              <select class="form-select" id="addressStatusInput">
                <option value="available">Tilgængelig</option>
                <option value="reserved">Reserveret</option>
                <option value="in_use">I brug</option>
              </select>
            </div>
            <div class="col-md-2"><input type="text" class="form-control" id="addressAssignedInput" placeholder="Label"></div>
            <div class="col-md-3">
              <input type="text" class="form-control" id="addressAssignedCustomerInput" list="customerLookupList" placeholder="Kunde">
              <input type="hidden" id="addressAssignedCustomerIdInput">
            </div>
            <div class="col-md-3">
              <input type="text" class="form-control" id="addressAssignedConnectionInput" list="connectionLookupList" placeholder="Forbindelse">
              <input type="hidden" id="addressAssignedConnectionIdInput">
            </div>
            <div class="col-md-2"><button class="btn btn-primary w-100" type="button" onclick="createAddress()">Gem</button></div>
          </div>
        </div>
        <div class="row g-2 mb-3">
          <div class="col-md-6"><input type="search" class="form-control" id="addressSearchInput" placeholder="Søg IP, tildeling eller kommentar"></div>
          <div class="col-md-3">
            <select class="form-select" id="addressStatusFilter">
              <option value="">Alle statusser</option>
              <option value="available">Tilgængelig</option>
              <option value="reserved">Reserveret</option>
              <option value="in_use">I brug</option>
            </select>
          </div>
          <div class="col-md-3"><button class="btn btn-light border w-100" type="button" onclick="resetAddressFilters()">Nulstil</button></div>
        </div>
        <div class="table-responsive">
          <table class="table align-middle mb-0">
            <thead class="table-light">
              <tr>
                <th>IP</th>
                <th>Status</th>
                <th>Abonnement</th>
                <th>Firma</th>
                <th></th>
              </tr>
            </thead>
            <tbody id="ipAddressesTableBody">
              <tr><td colspan="5" class="text-muted py-4">Indlæser...</td></tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="detail-panel p-4 mb-4">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <h5 class="mb-0">Pris og kontrakt</h5>
          <div class="small text-muted" id="pricingFeedback"></div>
        </div>
        <div class="row g-2 mb-3">
          <div class="col-md-3"><input type="date" class="form-control" id="pricingEffectiveDateInput"></div>
          <div class="col-md-3"><input type="number" class="form-control" id="pricingPurchaseInput" placeholder="Indkøbspris"></div>
          <div class="col-md-3"><input type="number" class="form-control" id="pricingSalesInput" placeholder="Salgspris"></div>
          <div class="col-md-3"><input type="text" class="form-control" id="pricingNotesInput" placeholder="Note"></div>
        </div>
        <div class="mb-3">
          <button class="btn btn-primary" type="button" onclick="createPricingEntry()">Gem prislinje</button>
        </div>
        <div class="detail-grid mb-3" id="pricingSummaryGrid"></div>
        <div id="pricingHistoryList"></div>
      </div>

      <div class="detail-panel p-4">
        <h5 class="mb-3">Historik</h5>
        <div id="historyList"></div>
      </div>
    </div>

    <div class="col-xl-4">
      <div class="sticky-sidebar">
        <div class="detail-panel p-4 mb-4">
          <h5 class="mb-3">Relationer</h5>
          <div class="detail-grid" id="relationGrid"></div>
        </div>
        <div class="detail-panel p-4 mb-4 d-none" id="bmcnetChildrenPanel">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="mb-0">BMCnet</h5>
            <div class="d-flex align-items-center gap-2">
              <span class="small text-muted" id="bmcnetChildrenCount">0 kunder</span>
              <button class="btn btn-sm btn-outline-primary" type="button" onclick="openBmcnetWizard()">
                <i class="bi bi-plus-lg me-1"></i>Ny BMCnet
              </button>
            </div>
          </div>
          <div class="detail-grid mb-3" id="bmcnetChildrenSummaryGrid"></div>
          <div id="bmcnetChildrenList"></div>
        </div>
        <div class="detail-panel p-4">
          <h5 class="mb-3">Kontraktoverblik</h5>
          <div id="contractsOverviewList"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<datalist id="customerLookupList"></datalist>
<datalist id="connectionLookupList"></datalist>
<datalist id="subscriptionLookupList"></datalist>

<div class="modal fade" id="bmcnetWizardModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content border-0 shadow-lg">
      <div class="modal-header">
        <div>
          <div class="small text-uppercase text-muted fw-semibold">Hurtig Oprettelse</div>
          <h5 class="modal-title mb-0">Ny BMCnet-forbindelse</h5>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Luk"></button>
      </div>
      <div class="modal-body">
        <div class="alert alert-info mb-3" id="bmcnetWizardIntro">
          Opret en kunde-forbindelse direkte under denne delte hovedforbindelse, og reserver evt. et helt ledigt IP-range med det samme.
        </div>
        <div class="wizard-section mb-3">
          <div class="wizard-section-title">0. Hovedforbindelse</div>
          <div class="row g-2 align-items-end">
            <div class="col-lg-8">
              <label class="form-label">Brug denne hovedforbindelse</label>
              <select class="form-select" id="bmcnetWizardSharedHeadSelect"></select>
            </div>
            <div class="col-lg-4">
              <div class="small text-muted" id="bmcnetWizardHeadHint">Wizard’en bruger som standard den hovedforbindelse du står på nu.</div>
            </div>
          </div>
        </div>
        <div class="row g-3">
          <div class="col-lg-6">
            <div class="wizard-section h-100">
              <div class="wizard-section-title">1. Kunde og service</div>
              <div class="row g-2">
                <div class="col-12">
                  <label class="form-label">Kunde</label>
                  <input type="text" class="form-control" id="bmcnetWizardCustomerLookup" list="customerLookupList" placeholder="Søg kunde">
                  <input type="hidden" id="bmcnetWizardCustomerId">
                </div>
                <div class="col-12">
                  <label class="form-label">Forbindelsesnavn</label>
                  <input type="text" class="form-control" id="bmcnetWizardName" placeholder="fx BMCnet - Kunde">
                </div>
                <div class="col-12">
                  <label class="form-label">Service</label>
                  <input type="text" class="form-control" id="bmcnetWizardService" placeholder="fx Internet / Firewall / WAN">
                </div>
                <div class="col-12">
                  <label class="form-label">Adresse</label>
                  <input type="text" class="form-control" id="bmcnetWizardAddress" placeholder="Serviceadresse">
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-6">
            <div class="wizard-section h-100">
              <div class="wizard-section-title">2. Abonnement</div>
              <div class="row g-2">
                <div class="col-md-6">
                  <label class="form-label">Internetprodukt</label>
                  <select class="form-select" id="bmcnetWizardInternetProduct"></select>
                </div>
                <div class="col-md-6">
                  <label class="form-label">IP-produkt</label>
                  <select class="form-select" id="bmcnetWizardIpProduct"></select>
                </div>
                <div class="col-md-4">
                  <label class="form-label">Interval</label>
                  <select class="form-select" id="bmcnetWizardBillingInterval">
                    <option value="monthly">Måned</option>
                    <option value="quarterly">Kvartal</option>
                    <option value="yearly">År</option>
                  </select>
                </div>
                <div class="col-md-4">
                  <label class="form-label">Faktura dag</label>
                  <input type="number" class="form-control" id="bmcnetWizardBillingDay" min="1" max="31" value="1">
                </div>
                <div class="col-md-4">
                  <label class="form-label">Startdato</label>
                  <input type="date" class="form-control" id="bmcnetWizardStartDate">
                </div>
                <div class="col-md-6">
                  <label class="form-label">Pris internet</label>
                  <input type="number" class="form-control" id="bmcnetWizardInternetPrice" placeholder="Standard fra produkt" step="0.01">
                </div>
                <div class="col-md-6">
                  <label class="form-label">Pris IP-produkt</label>
                  <input type="number" class="form-control" id="bmcnetWizardIpPrice" placeholder="Standard fra produkt" step="0.01">
                </div>
                <div class="col-12">
                  <label class="form-label">Noter</label>
                  <textarea class="form-control" id="bmcnetWizardNotes" rows="3" placeholder="Interne noter"></textarea>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12">
            <div class="wizard-section">
              <div class="wizard-section-title">3. IP-range</div>
              <div class="row g-2 align-items-end" id="bmcnetWizardRangeWrap">
                <div class="col-lg-8">
                  <label class="form-label">Ledigt range på hovedforbindelsen</label>
                  <select class="form-select" id="bmcnetWizardRangeSelect"></select>
                </div>
                <div class="col-lg-4">
                  <div class="small text-muted" id="bmcnetWizardRangeHint">Vælg et helt ledigt range, hvis kunden skal have egne IP-adresser.</div>
                </div>
              </div>
              <div class="row g-2 align-items-end d-none" id="bmcnetWizardIpWrap">
                <div class="col-lg-8">
                  <label class="form-label">Ledig IP på hovedadressens ranges</label>
                  <select class="form-select" id="bmcnetWizardIpSelect"></select>
                </div>
                <div class="col-lg-4">
                  <div class="form-check mt-4">
                    <input class="form-check-input" type="checkbox" id="bmcnetWizardGatewayCheckbox">
                    <label class="form-check-label" for="bmcnetWizardGatewayCheckbox">Marker som BMCnet kunde gateway</label>
                  </div>
                  <div class="small text-muted mt-2" id="bmcnetWizardIpHint">Vælg en ledig IP fra alle ranges på hovedadressen.</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="small mt-3" id="bmcnetWizardFeedback"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Luk</button>
        <button type="button" class="btn btn-primary" id="bmcnetWizardSubmitBtn" onclick="createBmcnetConnection()">
          <i class="bi bi-check2-circle me-1"></i>Opret BMCnet-forbindelse
        </button>
      </div>
    </div>
  </div>
</div>

<script>
  const connectionId = {{ connection_id }};
  let currentConnection = null;
  let currentAddresses = [];
  let currentRanges = [];
  let currentBmcnetChildren = [];
  let editingAddressId = null;
  let coreEditMode = false;
  let customerOptions = [];
  let connectionOptions = [];
  let subscriptionOptions = [];
  let bmcnetWizardProducts = [];
  let bmcnetWizardModal = null;
  let bmcnetWizardRangesByHead = {};
  let bmcnetWizardAddressesByHead = {};

  function formatDKK(value) {
    return Number(value || 0).toLocaleString('da-DK', { style: 'currency', currency: 'DKK', minimumFractionDigits: 0 });
  }

  function formatDate(value) {
    if (!value) return '-';
    const date = new Date(value);
    if (Number.isNaN(date.getTime())) return value;
    return date.toLocaleDateString('da-DK');
  }

  function formatDateTime(value) {
    if (!value) return '-';
    const date = new Date(value);
    if (Number.isNaN(date.getTime())) return value;
    return date.toLocaleString('da-DK');
  }

  function formatSpeed(item) {
    const download = Number(item?.download_mbps || 0);
    const upload = Number(item?.upload_mbps || 0);
    const fallback = Number(item?.speed_mbps || 0);

    if (download > 0 || upload > 0) {
      if (download > 0 && upload > 0) return `${download}/${upload} Mbps`;
      return `${download || upload} Mbps`;
    }
    if (fallback > 0) return `${fallback} Mbps`;
    return '-';
  }

  function formatIpRole(value) {
    const key = String(value || '').trim().toLowerCase();
    const labels = {
      bmcnet_gateway: 'BMCnet gateway',
      webserver: 'Webserver',
      mailserver: 'Mailserver',
      unifi: 'Unifi',
      firewall: 'Firewall',
      vpn: 'VPN',
      service: 'Service',
      subscription: 'Abonnement',
    };
    return labels[key] || (value || '-');
  }

  function escapeHtml(value) {
    return String(value || '')
      .replaceAll('&', '&amp;')
      .replaceAll('<', '&lt;')
      .replaceAll('>', '&gt;')
      .replaceAll('"', '&quot;')
      .replaceAll("'", '&#39;');
  }

  async function safeJson(response, fallback) {
    if (!response || !response.ok) return fallback;
    try {
      return await response.json();
    } catch {
      return fallback;
    }
  }

  async function extractErrorMessage(response, fallback) {
    try {
      const payload = await response.clone().json();
      if (typeof payload?.detail === 'string' && payload.detail.trim()) return payload.detail.trim();
      if (Array.isArray(payload?.detail)) {
        const validation = payload.detail
          .map((item) => item?.msg || item?.message || '')
          .filter(Boolean)
          .join(', ');
        if (validation) return validation;
      }
    } catch (_) {}

    try {
      const text = (await response.text()).trim();
      if (text) return text;
    } catch (_) {}
    return fallback;
  }

  function formatHistoryValue(field, value) {
    if (value === null || value === undefined || value === '') return 'Tom';
    if (['monthly_cost', 'purchase_price', 'sales_price'].includes(field)) {
      return formatDKK(value);
    }
    if (['speed_mbps', 'download_mbps', 'upload_mbps'].includes(field)) {
      return `${value} Mbps`;
    }
    if (field === 'allocation_model') {
      return value === 'shared' ? 'Delt' : 'Dedikeret';
    }
    if (field === 'value_type') {
      const labels = {
        subscription: 'Abonnement',
        bmc_networks: 'BMC Networks',
        delefiber: 'Delefiber',
        other: 'Anden',
      };
      return labels[String(value)] || String(value);
    }
    if (field === 'status') {
      const labels = {
        active: 'Aktiv',
        planned: 'Planlagt',
        pending: 'Afventer',
        inactive: 'Inaktiv',
        terminated: 'Opsagt',
        cancelled: 'Annulleret',
      };
      return labels[String(value)] || String(value);
    }
    return String(value);
  }

  function renderHistoryDetails(entry) {
    const details = entry && entry.details && typeof entry.details === 'object' ? entry.details : {};
    const changes = details.changes && typeof details.changes === 'object' ? details.changes : null;
    const labels = {
      customer_id: 'Kunde',
      address: 'Adresse',
      monthly_cost: 'Kostpris',
      technology: 'Teknologi',
      connection_type: 'Forbindelsestype',
      circuit_number: 'Reference',
      speed_mbps: 'Fallback hastighed',
      download_mbps: 'Download',
      upload_mbps: 'Upload',
      status: 'Status',
      allocation_model: 'Allokering',
      value_type: 'Værdi-type',
      provider_reference: 'Provider-ref.',
      contract_number: 'Kontrakt',
      service_address: 'Serviceadresse',
    };

    const meta = [];
    if (details.reference) meta.push(`Ref: ${details.reference}`);
    if (details.cidr) meta.push(`Range: ${details.cidr}`);
    if (details.provider_reference && !details.reference) meta.push(`Provider-ref.: ${details.provider_reference}`);
    if (details.contract_number) meta.push(`Kontrakt: ${details.contract_number}`);

    const metaHtml = meta.length
      ? `<div class="small text-muted mt-1">${meta.join(' · ')}</div>`
      : '';

    if (!changes || !Object.keys(changes).length) {
      return metaHtml;
    }

    const changesHtml = Object.entries(changes).map(([field, change]) => `
      <div class="small mt-1">
        <strong>${labels[field] || field}</strong>: ${formatHistoryValue(field, change.from)} → ${formatHistoryValue(field, change.to)}
      </div>
    `).join('');

    return `${metaHtml}<div class="mt-2">${changesHtml}</div>`;
  }

  function setStatusBadge(status) {
    const el = document.getElementById('detailStatusBadge');
    const value = String(status || 'inactive').toLowerCase();
    const labels = {
      active: 'Aktiv',
      planned: 'Planlagt',
      pending: 'Afventer',
      inactive: 'Inaktiv',
      terminated: 'Opsagt',
      cancelled: 'Annulleret',
    };
    el.className = `status-pill ${value}`;
    el.textContent = labels[value] || value;
  }

  function buildLookupLabel(item) {
    return `${item.id} · ${item.name || '-'}`;
  }

  function populateDatalist(listId, items) {
    document.getElementById(listId).innerHTML = items
      .map((item) => `<option value="${buildLookupLabel(item)}"></option>`)
      .join('');
  }

  function buildSubscriptionLabel(item) {
    return `${item.id} · ${item.subscription_number || '-'} · ${item.product_name || '-'} · ${item.customer_name || '-'}`;
  }

  function resolveLookupId(value, items) {
    const raw = String(value || '').trim();
    if (!raw) return null;
    const idMatch = raw.match(/^(\d+)\b/);
    if (idMatch) return Number(idMatch[1]);
    const matched = items.find((item) => String(item.name || '').toLowerCase() === raw.toLowerCase());
    return matched ? Number(matched.id) : null;
  }

  function bindLookupInput(textInputId, hiddenInputId, itemsRef) {
    const textInput = document.getElementById(textInputId);
    const hiddenInput = document.getElementById(hiddenInputId);
    const sync = () => {
      hiddenInput.value = resolveLookupId(textInput.value, itemsRef()) || '';
    };
    textInput.addEventListener('change', sync);
    textInput.addEventListener('blur', sync);
  }

  function setLookupValue(textInputId, hiddenInputId, items, selectedId) {
    const match = items.find((item) => Number(item.id) === Number(selectedId));
    document.getElementById(textInputId).value = match ? buildLookupLabel(match) : '';
    document.getElementById(hiddenInputId).value = selectedId || '';
  }

  function setSubscriptionValue(selectedId) {
    const match = subscriptionOptions.find((item) => Number(item.id) === Number(selectedId));
    document.getElementById('fieldSubscriptionLookup').value = match ? buildSubscriptionLabel(match) : '';
    document.getElementById('fieldSubscriptionId').value = selectedId || '';
  }

  function resolveSubscriptionId(value) {
    const raw = String(value || '').trim();
    if (!raw) return null;
    const idMatch = raw.match(/^(\d+)\b/);
    if (idMatch) return Number(idMatch[1]);
    const matched = subscriptionOptions.find((item) => buildSubscriptionLabel(item).toLowerCase() === raw.toLowerCase());
    return matched ? Number(matched.id) : null;
  }

  async function loadLookups() {
    const [customersResponse, connectionsResponse, subscriptionsResponse, productsResponse] = await Promise.all([
      fetch('/api/v1/customers?limit=1000&is_active=true'),
      fetch('/api/v1/internet-connections'),
      fetch('/api/v1/internet-connections/subscription-options?status=active'),
      fetch('/api/v1/products'),
    ]);

    const customersPayload = customersResponse.ok ? await customersResponse.json() : { customers: [] };
    customerOptions = Array.isArray(customersPayload.customers) ? customersPayload.customers : [];
    connectionOptions = connectionsResponse.ok ? await connectionsResponse.json() : [];
    subscriptionOptions = subscriptionsResponse.ok ? await subscriptionsResponse.json() : [];
    bmcnetWizardProducts = productsResponse.ok ? await productsResponse.json() : [];

    populateDatalist('customerLookupList', customerOptions);
    populateDatalist(
      'connectionLookupList',
      connectionOptions.filter((item) => Number(item.id) !== Number(connectionId))
    );
    document.getElementById('subscriptionLookupList').innerHTML = subscriptionOptions
      .map((item) => `<option value="${buildSubscriptionLabel(item)}"></option>`)
      .join('');
    populateBmcnetWizardProducts();
  }

  function parseProductAttributes(raw) {
    if (!raw) return {};
    if (typeof raw === 'object') return raw;
    try {
      const parsed = JSON.parse(raw);
      return parsed && typeof parsed === 'object' ? parsed : {};
    } catch {
      return {};
    }
  }

  function populateBmcnetWizardProducts() {
    const internetSelect = document.getElementById('bmcnetWizardInternetProduct');
    const ipSelect = document.getElementById('bmcnetWizardIpProduct');
    if (!internetSelect || !ipSelect) return;

    const internetProducts = bmcnetWizardProducts.filter((product) => {
      const kind = parseProductAttributes(product.attributes_json)?.network?.kind;
      return kind === 'internet_access';
    });
    const ipProducts = bmcnetWizardProducts.filter((product) => {
      const kind = parseProductAttributes(product.attributes_json)?.network?.kind;
      return kind === 'ip_allocation';
    });

    internetSelect.innerHTML = '<option value="">Vælg internetprodukt</option>' + internetProducts.map((product) => (
      `<option value="${product.id}" data-price="${Number(product.sales_price || 0)}">${escapeHtml(product.name || '-')}</option>`
    )).join('');
    ipSelect.innerHTML = '<option value="">Intet IP-produkt</option>' + ipProducts.map((product) => (
      `<option value="${product.id}" data-price="${Number(product.sales_price || 0)}">${escapeHtml(product.name || '-')}</option>`
    )).join('');
  }

  function getSharedHeadOptions() {
    return (connectionOptions || []).filter((item) => item?.is_shared_head);
  }

  async function loadRangesForSharedHead(sharedHeadId) {
    const headId = Number(sharedHeadId || 0);
    if (!headId) return [];
    if (bmcnetWizardRangesByHead[headId]) {
      return bmcnetWizardRangesByHead[headId];
    }
    const response = await fetch(`/api/v1/internet-connections/${headId}/ip-ranges`);
    const ranges = response.ok ? await response.json() : [];
    bmcnetWizardRangesByHead[headId] = Array.isArray(ranges) ? ranges : [];
    return bmcnetWizardRangesByHead[headId];
  }

  async function loadAddressesForSharedHead(sharedHeadId) {
    const headId = Number(sharedHeadId || 0);
    if (!headId) return [];
    if (bmcnetWizardAddressesByHead[headId]) {
      return bmcnetWizardAddressesByHead[headId];
    }
    const response = await fetch(`/api/v1/internet-connections/${headId}/ip-addresses`);
    const addresses = response.ok ? await response.json() : [];
    bmcnetWizardAddressesByHead[headId] = Array.isArray(addresses) ? addresses : [];
    return bmcnetWizardAddressesByHead[headId];
  }

  function filterAvailableBmcnetRanges(ranges) {
    return (ranges || []).filter((range) =>
      range
      && range.belongs_to_connection !== false
      && range.is_fully_available
    );
  }

  function findWizardProduct(productId) {
    return bmcnetWizardProducts.find((product) => Number(product.id) === Number(productId)) || null;
  }

  function isStaticWanIpProduct(productId) {
    const product = findWizardProduct(productId);
    if (!product) return false;
    const attrs = parseProductAttributes(product.attributes_json);
    const prefix = Number(attrs?.network?.ip_prefix_length || 0);
    const text = `${product.name || ''} ${product.short_description || ''}`.toLowerCase();
    return prefix === 32 || text.includes('statisk wan');
  }

  async function refreshBmcnetWizardIpState(sharedHeadId) {
    const headId = Number(sharedHeadId || 0);
    const head = getSharedHeadOptions().find((item) => Number(item.id) === headId) || currentConnection;
    const selectedAddress = (document.getElementById('bmcnetWizardAddress').value || '').trim().toLowerCase();
    const addresses = await loadAddressesForSharedHead(headId);
    const availableIps = (addresses || []).filter((item) => {
      if (String(item.status || '').toLowerCase() !== 'available') return false;
      if (Number(item.range_connection_id || 0) !== headId) return false;
      const serviceAddress = String(item.range_service_address || head?.address || '').trim().toLowerCase();
      if (selectedAddress && serviceAddress && serviceAddress !== selectedAddress) return false;
      return true;
    });
    const ipSelect = document.getElementById('bmcnetWizardIpSelect');
    ipSelect.innerHTML = `<option value="">Ingen ledige IP'er</option>${availableIps.map((item) => `
      <option value="${item.id}" data-head-id="${headId}" data-range-id="${item.range_id || ''}" data-ip="${escapeHtml(item.ip_address || '')}">
        ${item.ip_address} · ${item.range_cidr || '-'}${item.range_service_address ? ` · ${escapeHtml(item.range_service_address)}` : ''}
      </option>
    `).join('')}`;
    ipSelect.value = '';
    document.getElementById('bmcnetWizardIpHint').textContent = availableIps.length
      ? `Der er ${availableIps.length} ledige IP'er på den valgte hovedadresse.`
      : 'Ingen ledige IP’er på den valgte hovedadresse lige nu.';
  }

  async function refreshBmcnetWizardAllocationMode() {
    const ipProductId = Number(document.getElementById('bmcnetWizardIpProduct').value || 0) || null;
    const isStaticIp = ipProductId ? isStaticWanIpProduct(ipProductId) : false;
    document.getElementById('bmcnetWizardRangeWrap').classList.toggle('d-none', isStaticIp);
    document.getElementById('bmcnetWizardIpWrap').classList.toggle('d-none', !isStaticIp);
    if (isStaticIp) {
      await refreshBmcnetWizardIpState(document.getElementById('bmcnetWizardSharedHeadSelect').value);
    }
  }

  async function refreshBmcnetWizardHeadState(sharedHeadId) {
    const headId = Number(sharedHeadId || 0);
    const head = getSharedHeadOptions().find((item) => Number(item.id) === headId) || currentConnection;
    const rangeSelect = document.getElementById('bmcnetWizardRangeSelect');
    const hint = document.getElementById('bmcnetWizardRangeHint');
    const headHint = document.getElementById('bmcnetWizardHeadHint');
    const feedback = document.getElementById('bmcnetWizardFeedback');

    if (headHint) {
      headHint.textContent = head?.address
        ? `${head.name || 'Hovedforbindelse'} · ${head.address}`
        : (head?.name || 'Vælg hovedforbindelse');
    }

    const ranges = headId === Number(connectionId)
      ? currentRanges
      : await loadRangesForSharedHead(headId);
    const availableRanges = filterAvailableBmcnetRanges(ranges);
    rangeSelect.innerHTML = `<option value="">Ingen IP-range endnu</option>${availableRanges.map((range) => `
      <option value="${range.id}">${range.cidr} · ${range.available_addresses || 0} ledige · ${range.service_address || head?.address || '-'}</option>
    `).join('')}`;
    hint.textContent = availableRanges.length
      ? `Der er ${availableRanges.length} helt ledige ranges på den valgte hovedforbindelse.`
      : 'Ingen helt ledige ranges på den valgte hovedforbindelse lige nu. Vælg en anden hovedforbindelse eller opret uden IP-range.';
    if (feedback) feedback.textContent = '';
    await refreshBmcnetWizardAllocationMode();
  }

  function populateBmcnetWizard(connection) {
    document.getElementById('openBmcnetWizardBtn').classList.toggle('d-none', !connection?.is_shared_head);
    if (!connection?.is_shared_head) return;

    document.getElementById('bmcnetWizardCustomerLookup').value = '';
    document.getElementById('bmcnetWizardCustomerId').value = '';
    document.getElementById('bmcnetWizardName').value = '';
    document.getElementById('bmcnetWizardService').value = '';
    document.getElementById('bmcnetWizardAddress').value = connection.address || '';
    document.getElementById('bmcnetWizardBillingInterval').value = 'monthly';
    document.getElementById('bmcnetWizardBillingDay').value = '1';
    document.getElementById('bmcnetWizardStartDate').value = new Date().toISOString().slice(0, 10);
    document.getElementById('bmcnetWizardInternetProduct').value = '';
    document.getElementById('bmcnetWizardIpProduct').value = '';
    document.getElementById('bmcnetWizardInternetPrice').value = '';
    document.getElementById('bmcnetWizardIpPrice').value = '';
    document.getElementById('bmcnetWizardNotes').value = '';
    document.getElementById('bmcnetWizardGatewayCheckbox').checked = false;
    document.getElementById('bmcnetWizardFeedback').textContent = '';
    const sharedHeadSelect = document.getElementById('bmcnetWizardSharedHeadSelect');
    const sharedHeads = getSharedHeadOptions();
    sharedHeadSelect.innerHTML = sharedHeads.map((head) => (
      `<option value="${head.id}">${escapeHtml(head.name || '-')}${head.address ? ` · ${escapeHtml(head.address)}` : ''}</option>`
    )).join('');
    sharedHeadSelect.value = String(connection.id);
    refreshBmcnetWizardHeadState(connection.id);
  }

  function openBmcnetWizard() {
    if (!currentConnection?.is_shared_head) return;
    populateBmcnetWizard(currentConnection);
    if (!bmcnetWizardModal) {
      bmcnetWizardModal = new bootstrap.Modal(document.getElementById('bmcnetWizardModal'));
    }
    bmcnetWizardModal.show();
  }

  function syncBmcnetWizardPrice(selectId, inputId) {
    const select = document.getElementById(selectId);
    const input = document.getElementById(inputId);
    if (!select || !input) return;
    const option = select.options[select.selectedIndex];
    if (!option || !option.value) {
      input.value = '';
      return;
    }
    input.value = option.dataset.price || '';
  }

  async function createBmcnetConnection() {
    const feedback = document.getElementById('bmcnetWizardFeedback');
    const button = document.getElementById('bmcnetWizardSubmitBtn');
    document.getElementById('bmcnetWizardCustomerId').value =
      resolveLookupId(document.getElementById('bmcnetWizardCustomerLookup').value, customerOptions) || '';

    const customerId = Number(document.getElementById('bmcnetWizardCustomerId').value || 0) || null;
    const sharedHeadId = Number(document.getElementById('bmcnetWizardSharedHeadSelect').value || 0) || null;
    const internetProductId = Number(document.getElementById('bmcnetWizardInternetProduct').value || 0) || null;
    const ipProductId = Number(document.getElementById('bmcnetWizardIpProduct').value || 0) || null;
    const useStaticWanIp = ipProductId ? isStaticWanIpProduct(ipProductId) : false;
    const ipSelect = document.getElementById('bmcnetWizardIpSelect');
    const selectedIpOption = ipSelect?.options?.[ipSelect.selectedIndex] || null;
    const selectedIpId = useStaticWanIp ? (Number(ipSelect?.value || 0) || null) : null;
    const selectedIpHeadId = useStaticWanIp ? (Number(selectedIpOption?.dataset?.headId || 0) || null) : null;
    const payload = {
      customer_id: customerId,
      case_title: document.getElementById('bmcnetWizardName').value.trim() || null,
      service_label: document.getElementById('bmcnetWizardService').value.trim() || null,
      address: document.getElementById('bmcnetWizardAddress').value.trim() || null,
      billing_interval: document.getElementById('bmcnetWizardBillingInterval').value || 'monthly',
      billing_day: Number(document.getElementById('bmcnetWizardBillingDay').value || 1),
      start_date: document.getElementById('bmcnetWizardStartDate').value,
      internet_product_id: internetProductId,
      internet_unit_price: document.getElementById('bmcnetWizardInternetPrice').value !== ''
        ? Number(document.getElementById('bmcnetWizardInternetPrice').value)
        : null,
      ip_product_id: ipProductId,
      ip_unit_price: document.getElementById('bmcnetWizardIpPrice').value !== ''
        ? Number(document.getElementById('bmcnetWizardIpPrice').value)
        : null,
      notes: document.getElementById('bmcnetWizardNotes').value.trim() || null,
      range_id: useStaticWanIp ? null : (Number(document.getElementById('bmcnetWizardRangeSelect').value || 0) || null),
      ip_address_id: selectedIpId,
      mark_gateway: useStaticWanIp ? Boolean(document.getElementById('bmcnetWizardGatewayCheckbox').checked) : false,
    };

    if (!sharedHeadId) {
      feedback.textContent = 'Vælg en hovedforbindelse.';
      return;
    }
    if (!payload.customer_id) {
      feedback.textContent = 'Vælg en kunde.';
      return;
    }
    if (!payload.internet_product_id) {
      feedback.textContent = 'Vælg et internetprodukt.';
      return;
    }
    if (!payload.start_date) {
      feedback.textContent = 'Vælg en startdato.';
      return;
    }
    if (payload.ip_product_id && useStaticWanIp && !payload.ip_address_id) {
      feedback.textContent = 'Vælg en ledig IP-adresse til Statisk WAN IP.';
      return;
    }
    if (payload.ip_product_id && useStaticWanIp && selectedIpHeadId !== sharedHeadId) {
      feedback.textContent = 'Den valgte IP matcher ikke den valgte hovedforbindelse. Vælg IP igen.';
      return;
    }
    if (payload.ip_product_id && !useStaticWanIp && !payload.range_id) {
      feedback.textContent = 'Vælg et IP-range til IP-produktet.';
      return;
    }

    feedback.textContent = 'Opretter sag, abonnement og BMCnet-forbindelse...';
    if (button) button.disabled = true;
    try {
      const response = await fetch(`/api/v1/internet-connections/${sharedHeadId}/bmcnet-connections`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      if (!response.ok) {
        feedback.textContent = await extractErrorMessage(response, 'Kunne ikke oprette BMCnet-forbindelsen.');
        return;
      }
      const created = await response.json();
      feedback.innerHTML = created?.sag?.id
        ? `Oprettet. <a href="/sag/${created.sag.id}/v3">Åbn sag #${created.sag.id}</a>`
        : 'Oprettet.';
      await loadConnection();
      if (bmcnetWizardModal) bmcnetWizardModal.hide();
    } catch (error) {
      feedback.textContent = error?.message || 'Netværksfejl under oprettelse.';
    } finally {
      if (button) button.disabled = false;
    }
  }

  async function loadConnection() {
    await loadLookups();

    const [
      connectionResponse,
      rangesResponse,
      addressesResponse,
      summaryResponse,
      pricingResponse,
      pricingHistoryResponse,
      contractsResponse,
      historyResponse,
    ] = await Promise.all([
      fetch(`/api/v1/internet-connections/${connectionId}`),
      fetch(`/api/v1/internet-connections/${connectionId}/ip-ranges`),
      fetch(`/api/v1/internet-connections/${connectionId}/ip-addresses`),
      fetch(`/api/v1/internet-connections/${connectionId}/ip-addresses/summary`),
      fetch(`/api/v1/internet-connections/${connectionId}/pricing`),
      fetch(`/api/v1/internet-connections/${connectionId}/pricing/history`),
      fetch('/api/v1/internet-connections/contracts'),
      fetch(`/api/v1/internet-connections/${connectionId}/history`),
    ]);

    if (!connectionResponse.ok) {
      document.getElementById('detailName').textContent = 'Forbindelse ikke fundet';
      document.getElementById('detailSubtitle').textContent = 'Den ønskede forbindelse findes ikke.';
      return;
    }

    const connection = await connectionResponse.json();
    const ranges = await rangesResponse.json();
    const addresses = await addressesResponse.json();
    const summary = await summaryResponse.json();
    const pricing = await pricingResponse.json();
    const pricingHistory = await pricingHistoryResponse.json();
    const contracts = await contractsResponse.json();
    const history = await historyResponse.json();

    currentConnection = connection;
    currentAddresses = Array.isArray(addresses) ? addresses : [];
    currentRanges = Array.isArray(ranges) ? ranges : [];
    currentBmcnetChildren = connection.is_shared_head
      ? await safeJson(await fetch(`/api/v1/internet-connections/${connectionId}/children?bmcnet_only=true`), [])
      : [];

    renderCore(connection, pricing, summary);
    renderRanges(currentRanges);
    renderAddresses(currentAddresses);
    renderPricing(pricing, pricingHistory);
    renderHistory(history);
    renderRelationGrid(connection);
    renderBmcnetChildren(connection, currentBmcnetChildren);
    renderContractsOverview(contracts);
  }

  function renderCore(connection, pricing, summary) {
    document.getElementById('detailName').textContent = connection.name || 'Unavngiven forbindelse';
    const ownerText = connection.customer_name || 'Ingen kunde koblet på';
    const businessText = connection.allocation_model === 'shared'
      ? `Ejer: ${ownerText} · kunder fordeles på ranges/IP'er`
      : ownerText;
    const ownSales = Number(pricing.sales_price || 0);
    const ownPurchase = Number(pricing.monthly_cost || 0);
    const bmcnetSales = connection.is_shared_head ? Number(connection.bmcnet_child_sales_price || 0) : 0;
    const bmcnetPurchase = connection.is_shared_head ? Number(connection.bmcnet_child_monthly_cost || 0) : 0;
    const effectiveSales = ownSales + bmcnetSales;
    const effectivePurchase = ownPurchase + bmcnetPurchase;
    const effectiveMargin = effectiveSales - effectivePurchase;
    const childConnections = Array.isArray(currentBmcnetChildren) ? currentBmcnetChildren : [];
    const totalDown = Number(connection.download_mbps || 0);
    const totalUp = Number(connection.upload_mbps || 0);
    const usedDown = childConnections.reduce((sum, child) => sum + Number(child.download_mbps || child.speed_mbps || 0), 0);
    const usedUp = childConnections.reduce((sum, child) => sum + Number(child.upload_mbps || child.speed_mbps || 0), 0);
    const downPct = totalDown > 0 ? Math.round((usedDown / totalDown) * 100) : 0;
    const upPct = totalUp > 0 ? Math.round((usedUp / totalUp) * 100) : 0;
    document.getElementById('detailSubtitle').textContent = `${connection.provider || 'Ingen leverandør'} · ${businessText}`;
    document.getElementById('metricSales').textContent = formatDKK(effectiveSales);
    document.getElementById('metricPurchase').textContent = formatDKK(effectivePurchase);
    document.getElementById('metricMargin').textContent = formatDKK(effectiveMargin);
    document.getElementById('metricIps').textContent = String((summary.in_use || 0) + (summary.reserved || 0));
    document.getElementById('metricBandwidth').textContent = `${usedDown} / ${totalDown || 0} Mbps`;
    document.getElementById('metricBandwidthSub').textContent = totalUp
      ? `Upload ${usedUp} / ${totalUp} Mbps · ${downPct}% ned / ${upPct}% op`
      : `${downPct}%`;
    document.getElementById('ipAddressSummary').innerHTML = `Tilgængelige: <strong>${summary.available || 0}</strong> · Reserverede: <strong>${summary.reserved || 0}</strong> · I brug: <strong>${summary.in_use || 0}</strong>`;

    const contractText = connection.contract_start || connection.contract_end
      ? `${formatDate(connection.contract_start)} → ${formatDate(connection.contract_end)}`
      : '-';
    const subscriptionText = connection.subscription_number
      ? `${connection.subscription_number} · ${connection.subscription_product_name || '-'}`
      : (connection.value_label || '-');
    const monitoringText = connection.monitoring_url
      ? `<a href="${escapeHtml(connection.monitoring_url)}" target="_blank" rel="noopener noreferrer">${escapeHtml(connection.monitoring_url)}</a>`
      : '<span class="detail-read-muted">-</span>';

    document.getElementById('coreReadView').innerHTML = `
      <div class="detail-read-strip">
        <div class="detail-read-chip"><span class="label">Leverandør</span><span class="value">${connection.provider || '-'}</span></div>
        <div class="detail-read-chip"><span class="label">Kredsløb</span><span class="value">${connection.circuit_number || '-'}</span></div>
        <div class="detail-read-chip"><span class="label">Binding</span><span class="value">${connection.allocation_model_label || '-'} · ${connection.value_type_label || '-'}</span></div>
        <div class="detail-read-chip"><span class="label">Type</span><span class="value">${connection.connection_type || '-'}</span></div>
        <div class="detail-read-chip"><span class="label">Teknologi</span><span class="value">${connection.technology || '-'}</span></div>
        <div class="detail-read-chip"><span class="label">Hastighed</span><span class="value">${connection.download_mbps || 0}/${connection.upload_mbps || 0} Mbps</span></div>
      </div>
      <div class="detail-read-grid">
        <div class="detail-read-row full"><span class="label">Navn</span><div class="value">${connection.name || '-'}</div></div>
        <div class="detail-read-row full"><span class="label">Adresse</span><div class="value">${connection.address || '-'}</div></div>
        <div class="detail-read-row"><span class="label">Kunde</span><div class="value">${connection.customer_name || '-'}</div></div>
        <div class="detail-read-row"><span class="label">Parent</span><div class="value">${connection.parent_name || '-'}</div></div>
        <div class="detail-read-row"><span class="label">Abonnement</span><div class="value">${subscriptionText}</div></div>
        <div class="detail-read-row"><span class="label">Kontrakt</span><div class="value">${contractText}</div></div>
        <div class="detail-read-row"><span class="label">Fallback</span><div class="value">${connection.speed_mbps || 0} Mbps</div></div>
        <div class="detail-read-row"><span class="label">Overvågning</span><div class="value">${monitoringText}</div></div>
        <div class="detail-read-row full"><span class="label">Noter</span><div class="value">${connection.notes || '<span class="detail-read-muted">-</span>'}</div></div>
      </div>
    `;

    setStatusBadge(connection.status);

    document.getElementById('fieldName').value = connection.name || '';
    document.getElementById('fieldProvider').value = connection.provider || '';
    document.getElementById('fieldCircuit').value = connection.circuit_number || '';
    document.getElementById('fieldAddress').value = connection.address || '';
    setLookupValue('fieldCustomerLookup', 'fieldCustomerId', customerOptions, connection.customer_id);
    setLookupValue('fieldParentLookup', 'fieldParentId', connectionOptions, connection.parent_id);
    document.getElementById('fieldConnectionType').value = connection.connection_type || '';
    document.getElementById('fieldTechnology').value = connection.technology || '';
    document.getElementById('fieldDownload').value = connection.download_mbps || '';
    document.getElementById('fieldUpload').value = connection.upload_mbps || '';
    document.getElementById('fieldSpeed').value = connection.speed_mbps || '';
    document.getElementById('fieldStatus').value = connection.status || 'active';
    document.getElementById('fieldMonitoringUrl').value = connection.monitoring_url || '';
    document.getElementById('fieldAllocationModel').value = connection.allocation_model || 'dedicated';
    document.getElementById('fieldValueType').value = connection.value_type || 'other';
    document.getElementById('fieldValueLabel').value = connection.value_label || '';
    setSubscriptionValue(connection.subscription_id);
    document.getElementById('fieldContractStart').value = connection.contract_start || '';
    document.getElementById('fieldContractEnd').value = connection.contract_end || '';
    document.getElementById('fieldNotes').value = connection.notes || '';
    toggleValueFields();
    toggleCoreEdit(false, true);
  }

  function toggleCoreEdit(force, silent = false) {
    coreEditMode = Boolean(force);
    document.getElementById('coreReadView').classList.toggle('d-none', coreEditMode);
    document.getElementById('coreEditForm').classList.toggle('d-none', !coreEditMode);
    document.getElementById('editCoreDetailsBtn').classList.toggle('d-none', coreEditMode);
    document.getElementById('cancelCoreDetailsBtn').classList.toggle('d-none', !coreEditMode);
    document.getElementById('saveCoreDetailsBtn').classList.toggle('d-none', !coreEditMode);
    if (!silent) {
      document.getElementById('detailSaveFeedback').textContent = coreEditMode ? 'Redigering aktiv.' : '';
    }
  }

  function renderRanges(ranges) {
    const list = document.getElementById('ipRangesList');
    const rangeSelect = document.getElementById('addressRangeSelect');
    const visibleRanges = ranges.filter((range) => range.belongs_to_connection !== false);
    const mismatchedRanges = ranges.filter((range) => range.belongs_to_connection === false);

    if (!visibleRanges.length && !mismatchedRanges.length) {
      list.innerHTML = '<div class="text-muted">Ingen IP-ranges registreret endnu.</div>';
      rangeSelect.innerHTML = '<option value="">Ingen ranges</option>';
      return;
    }

    const visibleMarkup = visibleRanges.map((range) => `
      <div class="detail-grid-card" id="rangeCard-${range.id}">
        <span class="label">${range.name || 'Range'}</span>
        <div class="value">${range.cidr || '-'}</div>
        <div class="small text-muted mt-2">Brugbare: ${range.usable_hosts || 0} · Brugt: ${range.used_addresses || 0} · Ledige: ${range.available_addresses || 0}</div>
        ${range.customer_name ? `<div class="small text-muted mt-1">Kunde: ${range.customer_name}</div>` : ''}
        ${range.provider_reference ? `<div class="small text-muted mt-1">Ref: ${range.provider_reference}</div>` : ''}
        ${range.contract_number ? `<div class="small text-muted mt-1">Kontrakt: ${range.contract_number}</div>` : ''}
        ${range.service_address ? `<div class="small text-muted mt-1">${range.service_address}</div>` : ''}
        ${(Number(range.monthly_cost || 0) || Number(range.sales_price || 0)) ? `<div class="small text-muted mt-1">Kost ${formatDKK(range.monthly_cost || 0)} · Salg ${formatDKK(range.sales_price || 0)}</div>` : ''}
        ${range.description ? `<div class="small text-muted mt-1">${range.description}</div>` : ''}
        <div class="mt-3 d-flex gap-2">
          <button class="btn btn-sm btn-outline-primary" type="button" onclick="toggleRangeEdit(${range.id}, true)">Rediger</button>
        </div>
        <div class="small text-muted mt-2" id="rangeFeedback-${range.id}"></div>
        <div class="d-none" id="rangeEdit-${range.id}">
          <div class="range-edit-grid">
            <div>
              <label class="form-label small text-muted mb-1">Navn</label>
              <input type="text" class="form-control form-control-sm" id="rangeEditName-${range.id}" value="${escapeHtml(range.name || '')}">
            </div>
            <div>
              <label class="form-label small text-muted mb-1">CIDR</label>
              <input type="text" class="form-control form-control-sm" value="${escapeHtml(range.cidr || '')}" disabled>
            </div>
            <div>
              <label class="form-label small text-muted mb-1">Provider ref.</label>
              <input type="text" class="form-control form-control-sm" id="rangeEditProviderRef-${range.id}" value="${escapeHtml(range.provider_reference || '')}">
            </div>
            <div>
              <label class="form-label small text-muted mb-1">Kontrakt</label>
              <input type="text" class="form-control form-control-sm" id="rangeEditContract-${range.id}" value="${escapeHtml(range.contract_number || '')}">
            </div>
            <div>
              <label class="form-label small text-muted mb-1">Serviceadresse</label>
              <input type="text" class="form-control form-control-sm" id="rangeEditServiceAddress-${range.id}" value="${escapeHtml(range.service_address || '')}">
            </div>
            <div>
              <label class="form-label small text-muted mb-1">Kunde på range</label>
              <input type="text" class="form-control form-control-sm" id="rangeEditCustomer-${range.id}" value="${range.customer_name ? `${range.customer_id} · ${escapeHtml(range.customer_name)}` : ''}" list="customerLookupList" placeholder="Kunde">
              <input type="hidden" id="rangeEditCustomerId-${range.id}" value="${range.customer_id || ''}">
            </div>
            <div>
              <label class="form-label small text-muted mb-1">Kost</label>
              <input type="number" class="form-control form-control-sm" id="rangeEditCost-${range.id}" value="${Number(range.monthly_cost || 0)}">
            </div>
            <div>
              <label class="form-label small text-muted mb-1">Salg</label>
              <input type="number" class="form-control form-control-sm" id="rangeEditSales-${range.id}" value="${Number(range.sales_price || 0)}">
            </div>
            <div style="grid-column: 1 / -1;">
              <label class="form-label small text-muted mb-1">Beskrivelse</label>
              <input type="text" class="form-control form-control-sm" id="rangeEditDescription-${range.id}" value="${escapeHtml(range.description || '')}">
            </div>
          </div>
          <div class="mt-3 d-flex gap-2">
            <button class="btn btn-sm btn-primary" type="button" onclick="saveRange(${range.id})">Gem range</button>
            <button class="btn btn-sm btn-outline-secondary" type="button" onclick="toggleRangeEdit(${range.id}, false)">Annuller</button>
          </div>
        </div>
      </div>
    `).join('');

    const mismatchMarkup = mismatchedRanges.length ? `
      <div class="detail-grid-card" style="grid-column: 1 / -1; border-color: #f3c2c2; background: #fff8f8;">
        <span class="label text-danger">Afvigelser</span>
        <div class="small text-muted mb-2">Disse ranges matcher ikke forbindelsens adresse eller kunde og bør kontrolleres.</div>
        ${mismatchedRanges.map((range) => `
          <div class="small mb-2">
            <strong>${range.cidr}</strong> · ${range.customer_name || 'Ingen kunde'}<br>
            <span class="text-danger">${range.alignment_warning || 'Matcher ikke forbindelsen'}</span>
          </div>
        `).join('')}
      </div>
    ` : '';

    list.innerHTML = visibleMarkup + mismatchMarkup;

    rangeSelect.innerHTML = visibleRanges.length
      ? visibleRanges.map((range) => `<option value="${range.id}">${range.name} (${range.cidr})</option>`).join('')
      : '<option value="">Ingen matchende ranges</option>';
  }

  function toggleRangeEdit(rangeId, open) {
    const panel = document.getElementById(`rangeEdit-${rangeId}`);
    const card = document.getElementById(`rangeCard-${rangeId}`);
    if (panel) panel.classList.toggle('d-none', !open);
    if (card) card.classList.toggle('editing', !!open);
  }

  async function saveRange(rangeId) {
    const feedback = document.getElementById(`rangeFeedback-${rangeId}`);
    const customerValue = document.getElementById(`rangeEditCustomer-${rangeId}`).value;
    const customerId = resolveLookupId(customerValue, customerOptions);
    document.getElementById(`rangeEditCustomerId-${rangeId}`).value = customerId || '';
    const payload = {
      name: document.getElementById(`rangeEditName-${rangeId}`).value.trim() || null,
      provider_reference: document.getElementById(`rangeEditProviderRef-${rangeId}`).value.trim() || null,
      contract_number: document.getElementById(`rangeEditContract-${rangeId}`).value.trim() || null,
      service_address: document.getElementById(`rangeEditServiceAddress-${rangeId}`).value.trim() || null,
      customer_id: Number(document.getElementById(`rangeEditCustomerId-${rangeId}`).value || 0) || null,
      monthly_cost: Number(document.getElementById(`rangeEditCost-${rangeId}`).value || 0),
      sales_price: Number(document.getElementById(`rangeEditSales-${rangeId}`).value || 0),
      description: document.getElementById(`rangeEditDescription-${rangeId}`).value.trim() || null,
    };

    if (!payload.name) {
      feedback.textContent = 'Navn er påkrævet.';
      return;
    }

    feedback.textContent = 'Gemmer range...';
    try {
      const response = await fetch(`/api/v1/internet-connections/${connectionId}/ip-ranges/${rangeId}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      if (!response.ok) {
        feedback.textContent = await extractErrorMessage(response, 'Kunne ikke gemme IP-range.');
        return;
      }
      feedback.textContent = 'IP-range gemt.';
      toggleRangeEdit(rangeId, false);
      await loadConnection();
    } catch (error) {
      feedback.textContent = error?.message || 'Netværksfejl under gem af IP-range.';
    }
  }

  function renderAddresses(addresses) {
    const search = document.getElementById('addressSearchInput').value.trim().toLowerCase();
    const statusFilter = document.getElementById('addressStatusFilter').value;
    const body = document.getElementById('ipAddressesTableBody');

    const filtered = addresses.filter((address) => {
      if (address.belongs_to_connection === false) return false;
      const haystack = `${address.ip_address || ''} ${address.assigned_to || ''} ${address.assigned_type || ''} ${address.assigned_customer_name || ''} ${address.assigned_connection_name || ''} ${address.comment || ''}`.toLowerCase();
      const searchOk = !search || haystack.includes(search);
      const statusOk = !statusFilter || address.status === statusFilter;
      return searchOk && statusOk;
    });

    if (!filtered.length) {
      body.innerHTML = '<tr><td colspan="5" class="text-muted py-4">Ingen IP-adresser matcher filtrene.</td></tr>';
      return;
    }

    body.innerHTML = filtered.map((address) => {
      const isEditing = editingAddressId === address.id;
      const companyName = address.assigned_customer_name || address.range_customer_name || '-';
      const roleLabel = address.assigned_type ? formatIpRole(address.assigned_type) : '';
      const serviceName = address.assigned_to || '-';
      const subscriptionLink = Number(address.assigned_subscription_sag_id || 0) > 0
        ? `/sag/${address.assigned_subscription_sag_id}/v3`
        : '';
      const subscriptionTitle = address.assigned_subscription_number || address.assigned_to || '';
      return `
        <tr>
          <td><strong>${address.ip_address || '-'}</strong></td>
          <td><span class="internet-status ${address.status || 'available'}">${address.status_label || address.status || '-'}</span></td>
          <td>
            ${subscriptionLink
              ? `<a href="${subscriptionLink}" class="d-inline-flex align-items-center gap-2 text-decoration-none" title="${subscriptionTitle}">
                   <input type="checkbox" checked onclick="window.location.href='${subscriptionLink}'; return false;">
                   <span>${subscriptionTitle}</span>
                 </a>`
              : '<input type="checkbox" disabled>'}
          </td>
          <td>
            <div>${companyName}</div>
            <div class="small text-muted">
              ${roleLabel ? `${roleLabel} · ` : ''}${serviceName}
            </div>
          </td>
          <td class="text-end">
            <button class="btn btn-sm btn-outline-primary" type="button" onclick="toggleAddressEdit(${address.id})" title="Rediger IP">
              <i class="bi ${isEditing ? 'bi-x-lg' : 'bi-pencil'}"></i>
            </button>
          </td>
        </tr>
        ${isEditing ? `
        <tr class="bg-light">
          <td colspan="5">
            <div class="row g-2 py-2">
              <div class="col-md-2">
                <select class="form-select form-select-sm" id="addressStatus-${address.id}">
                  <option value="available" ${address.status === 'available' ? 'selected' : ''}>Tilgængelig</option>
                  <option value="reserved" ${address.status === 'reserved' ? 'selected' : ''}>Reserveret</option>
                  <option value="in_use" ${address.status === 'in_use' ? 'selected' : ''}>I brug</option>
                </select>
              </div>
              <div class="col-md-2">
                <select class="form-select form-select-sm" id="addressRole-${address.id}">
                  <option value="" ${!address.assigned_type ? 'selected' : ''}>Ingen rolle</option>
                  <option value="bmcnet_gateway" ${address.assigned_type === 'bmcnet_gateway' ? 'selected' : ''}>BMCnet gateway</option>
                  <option value="webserver" ${address.assigned_type === 'webserver' ? 'selected' : ''}>Webserver</option>
                  <option value="mailserver" ${address.assigned_type === 'mailserver' ? 'selected' : ''}>Mailserver</option>
                  <option value="unifi" ${address.assigned_type === 'unifi' ? 'selected' : ''}>Unifi</option>
                  <option value="firewall" ${address.assigned_type === 'firewall' ? 'selected' : ''}>Firewall</option>
                  <option value="vpn" ${address.assigned_type === 'vpn' ? 'selected' : ''}>VPN</option>
                  <option value="service" ${address.assigned_type === 'service' ? 'selected' : ''}>Anden service</option>
                </select>
              </div>
              <div class="col-md-3"><input type="text" class="form-control form-control-sm" id="addressService-${address.id}" value="${address.assigned_to || ''}" placeholder="Service/navn"></div>
              <div class="col-md-3">
                <input type="text" class="form-control form-control-sm" id="addressAssignedCustomer-${address.id}" value="${address.assigned_customer_name ? `${address.assigned_customer_id} · ${address.assigned_customer_name}` : ''}" list="customerLookupList" placeholder="Kunde">
                <input type="hidden" id="addressAssignedCustomerId-${address.id}" value="${address.assigned_customer_id || ''}">
              </div>
              <div class="col-md-3"><input type="text" class="form-control form-control-sm" id="addressComment-${address.id}" value="${address.comment || ''}" placeholder="Kommentar"></div>
              <div class="col-md-auto d-flex justify-content-end">
                <button class="btn btn-sm btn-primary" type="button" onclick="updateAddress(${address.id})">Gem ændringer</button>
              </div>
            </div>
          </td>
        </tr>` : ''}
      `;
    }).join('');
  }

  function toggleAddressEdit(addressId) {
    editingAddressId = editingAddressId === addressId ? null : addressId;
    renderAddresses(currentAddresses);
  }

  function renderPricing(pricing, pricingHistory) {
    document.getElementById('pricingSummaryGrid').innerHTML = `
      <div class="detail-grid-card">
        <span class="label">Aktuel kost</span>
        <div class="value">${formatDKK(pricing.monthly_cost || 0)}</div>
      </div>
      <div class="detail-grid-card">
        <span class="label">Aktuelt salg</span>
        <div class="value">${formatDKK(pricing.sales_price || 0)}</div>
      </div>
      <div class="detail-grid-card">
        <span class="label">Kontraktstatus</span>
        <div class="value">${pricing.contract_status || 'ukendt'}</div>
      </div>
      <div class="detail-grid-card">
        <span class="label">Periode</span>
        <div class="value">${formatDate(pricing.contract_start)} → ${formatDate(pricing.contract_end)}</div>
      </div>
    `;

    const list = document.getElementById('pricingHistoryList');
    if (!pricingHistory.length) {
      list.innerHTML = '<div class="text-muted">Ingen prishistorik endnu.</div>';
      return;
    }

    list.innerHTML = pricingHistory.map((entry) => `
      <div class="timeline-item">
        <div class="fw-semibold">${formatDate(entry.effective_from)}</div>
        <div class="small text-muted">${entry.notes || 'Ingen note'}</div>
        <div class="small mt-1">Kost ${formatDKK(entry.purchase_price || 0)} · Salg ${formatDKK(entry.sales_price || 0)}</div>
      </div>
    `).join('');
  }

  function renderHistory(history) {
    const list = document.getElementById('historyList');
    if (!history.length) {
      list.innerHTML = '<div class="text-muted">Ingen historik registreret endnu.</div>';
      return;
    }

    list.innerHTML = history.map((entry) => `
      <div class="timeline-item">
        <div class="fw-semibold">${entry.summary || entry.event_type || '-'}</div>
        <div class="small text-muted">${formatDateTime(entry.created_at)}</div>
        ${renderHistoryDetails(entry)}
      </div>
    `).join('');
  }

  function renderRelationGrid(connection) {
    document.getElementById('relationGrid').innerHTML = `
      <div class="detail-grid-card">
        <span class="label">Kunde</span>
        <div class="value">${connection.customer_name || '-'}</div>
      </div>
      <div class="detail-grid-card">
        <span class="label">Forretningsbinding</span>
        <div class="value">${connection.allocation_model_label || '-'} · ${connection.value_type_label || '-'}</div>
      </div>
      <div class="detail-grid-card">
        <span class="label">Parent</span>
        <div class="value">${connection.parent_name || '-'}</div>
      </div>
      <div class="detail-grid-card">
        <span class="label">Kunde-ID</span>
        <div class="value">${connection.customer_id || '-'}</div>
      </div>
      <div class="detail-grid-card">
        <span class="label">Range / IP</span>
        <div class="value">${connection.ip_range_count || 0} / ${connection.total_ip_addresses || 0}</div>
      </div>
      <div class="detail-grid-card">
        <span class="label">Overvågning</span>
        <div class="value">${connection.monitoring_url ? `<a href="${connection.monitoring_url}" target="_blank">Åbn</a>` : '-'}</div>
      </div>
      <div class="detail-grid-card">
        <span class="label">Abonnement</span>
        <div class="value">${connection.subscription_number ? `${connection.subscription_number} · ${connection.subscription_product_name || '-'}` : (connection.value_label || '-')}</div>
      </div>
      <div class="detail-grid-card">
        <span class="label">BMCnet underforbindelser</span>
        <div class="value">${connection.is_shared_head ? Number(connection.bmcnet_child_count || 0) : '-'}</div>
      </div>
      <div class="detail-grid-card">
        <span class="label">Opdateret</span>
        <div class="value">${formatDate(connection.updated_at)}</div>
      </div>
    `;
  }

  function renderContractsOverview(contracts) {
    const list = document.getElementById('contractsOverviewList');
    if (!Array.isArray(contracts) || !contracts.length) {
      list.innerHTML = '<div class="text-muted">Ingen kontrakter fundet.</div>';
      return;
    }

    list.innerHTML = contracts.slice(0, 8).map((contract) => `
      <div class="timeline-item">
        <div class="fw-semibold">${contract.name || '-'}</div>
        <div class="small text-muted">${contract.provider || '-'} · ${formatDate(contract.contract_end)}</div>
      </div>
    `).join('');
  }

  function renderBmcnetChildren(connection, children) {
    const panel = document.getElementById('bmcnetChildrenPanel');
    const countEl = document.getElementById('bmcnetChildrenCount');
    const summaryGrid = document.getElementById('bmcnetChildrenSummaryGrid');
    const list = document.getElementById('bmcnetChildrenList');

    if (!connection.is_shared_head) {
      panel.classList.add('d-none');
      return;
    }

    panel.classList.remove('d-none');
    const summary = connection.bmcnet_summary || {};
    countEl.textContent = `${Number(summary.connection_count || 0)} kunder`;
    summaryGrid.innerHTML = `
      <div class="detail-grid-card">
        <span class="label">BMCnet kunder</span>
        <div class="value">${Number(summary.connection_count || 0)}</div>
      </div>
      <div class="detail-grid-card">
        <span class="label">Aktive</span>
        <div class="value">${Number(summary.active_connection_count || 0)}</div>
      </div>
      <div class="detail-grid-card">
        <span class="label">Salg</span>
        <div class="value">${formatDKK(summary.sales_price || 0)}</div>
      </div>
      <div class="detail-grid-card">
        <span class="label">IP i brug</span>
        <div class="value">${Number(summary.ip_in_use_count || 0)}</div>
      </div>
    `;

    if (!children.length) {
      list.innerHTML = '<div class="text-muted">Ingen BMCnet-kunder på denne hovedforbindelse endnu.</div>';
      return;
    }

    list.innerHTML = children.map((child) => `
      <div class="timeline-item">
        <div class="d-flex justify-content-between gap-2">
          <div>
            <div class="fw-semibold">${child.customer_name || child.name || 'Ukendt kunde'}</div>
            <div class="small text-muted">${child.name || '-'} · ${child.subscription_number || 'Intet abonnement'} · ${formatSpeed(child)}</div>
            <div class="small text-muted">${child.address || '-'}</div>
          </div>
          <div class="text-end">
            <div class="fw-semibold">${formatDKK(child.sales_price || 0)}</div>
            <div class="small text-muted">IP i brug ${Number(child.in_use_ip_addresses || 0)} / ${Number(child.total_ip_addresses || 0)}</div>
            <a href="/economy/internet-connections/${child.id}" class="small">Åbn</a>
          </div>
        </div>
      </div>
    `).join('');
  }

  async function saveCoreDetails() {
    const feedback = document.getElementById('detailSaveFeedback');
    const saveButton = document.getElementById('saveCoreDetailsBtn');
    document.getElementById('fieldCustomerId').value = resolveLookupId(document.getElementById('fieldCustomerLookup').value, customerOptions) || '';
    document.getElementById('fieldParentId').value = resolveLookupId(document.getElementById('fieldParentLookup').value, connectionOptions) || '';
    document.getElementById('fieldSubscriptionId').value = resolveSubscriptionId(document.getElementById('fieldSubscriptionLookup').value) || '';
    const payload = {
      name: document.getElementById('fieldName').value.trim(),
      provider: document.getElementById('fieldProvider').value.trim() || null,
      circuit_number: document.getElementById('fieldCircuit').value.trim() || null,
      address: document.getElementById('fieldAddress').value.trim() || null,
      customer_id: Number(document.getElementById('fieldCustomerId').value || 0) || null,
      parent_id: Number(document.getElementById('fieldParentId').value || 0) || null,
      connection_type: document.getElementById('fieldConnectionType').value.trim() || null,
      technology: document.getElementById('fieldTechnology').value.trim() || null,
      download_mbps: Number(document.getElementById('fieldDownload').value || 0) || null,
      upload_mbps: Number(document.getElementById('fieldUpload').value || 0) || null,
      speed_mbps: Number(document.getElementById('fieldSpeed').value || 0) || null,
      status: document.getElementById('fieldStatus').value || 'active',
      monitoring_url: document.getElementById('fieldMonitoringUrl').value.trim() || null,
      allocation_model: document.getElementById('fieldAllocationModel').value || 'dedicated',
      value_type: document.getElementById('fieldValueType').value || 'other',
      value_label: document.getElementById('fieldValueLabel').value.trim() || null,
      subscription_id: Number(document.getElementById('fieldSubscriptionId').value || 0) || null,
      contract_start: document.getElementById('fieldContractStart').value || null,
      contract_end: document.getElementById('fieldContractEnd').value || null,
      notes: document.getElementById('fieldNotes').value.trim() || null,
    };

    if (!payload.name) {
      feedback.textContent = 'Navn er påkrævet.';
      return;
    }
    if (!payload.address) {
      feedback.textContent = 'Adresse er påkrævet.';
      return;
    }
    if (payload.value_type === 'subscription' && !payload.subscription_id) {
      feedback.textContent = 'Vælg et gyldigt abonnement.';
      return;
    }

    feedback.textContent = 'Gemmer...';
    if (saveButton) saveButton.disabled = true;
    try {
      const response = await fetch(`/api/v1/internet-connections/${connectionId}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });

      if (!response.ok) {
        feedback.textContent = await extractErrorMessage(response, 'Kunne ikke gemme forbindelsen.');
        return;
      }
      feedback.textContent = 'Forbindelse gemt.';
      coreEditMode = false;
      await loadConnection();
    } catch (error) {
      feedback.textContent = error?.message || 'Netværksfejl under gem.';
    } finally {
      if (saveButton) saveButton.disabled = false;
    }
  }

  function toggleValueFields() {
    const valueType = document.getElementById('fieldValueType').value;
    document.getElementById('fieldValueLabelWrap').classList.toggle('d-none', valueType !== 'other');
    document.getElementById('fieldSubscriptionWrap').classList.toggle('d-none', valueType !== 'subscription');
  }

  async function createRange() {
    const feedback = document.getElementById('rangeCreateFeedback');
    const button = document.getElementById('createRangeButton');
    const cidrValue = document.getElementById('rangeCidrInput').value.trim();
    const nameValue = document.getElementById('rangeNameInput').value.trim();
    const payload = {
      name: nameValue || cidrValue,
      cidr: cidrValue,
      description: document.getElementById('rangeDescriptionInput').value.trim() || null,
      provider_reference: document.getElementById('rangeProviderReferenceInput').value.trim() || null,
      contract_number: document.getElementById('rangeContractInput').value.trim() || null,
      customer_id: Number(document.getElementById('rangeCustomerIdInput').value || 0) || null,
      service_address: document.getElementById('rangeServiceAddressInput').value.trim() || null,
      monthly_cost: Number(document.getElementById('rangeMonthlyCostInput').value || 0),
      sales_price: Number(document.getElementById('rangeSalesPriceInput').value || 0),
    };
    if (!payload.cidr) {
      feedback.textContent = 'CIDR er påkrævet.';
      return;
    }
    feedback.textContent = 'Gemmer range...';
    if (button) button.disabled = true;
    try {
      const response = await fetch(`/api/v1/internet-connections/${connectionId}/ip-ranges`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      if (!response.ok) {
        feedback.textContent = await extractErrorMessage(response, 'Kunne ikke oprette IP-range.');
        return;
      }
      document.getElementById('rangeNameInput').value = '';
      document.getElementById('rangeCidrInput').value = '';
      document.getElementById('rangeDescriptionInput').value = '';
      document.getElementById('rangeProviderReferenceInput').value = '';
      document.getElementById('rangeContractInput').value = '';
      document.getElementById('rangeCustomerLookupInput').value = '';
      document.getElementById('rangeCustomerIdInput').value = '';
      document.getElementById('rangeServiceAddressInput').value = '';
      document.getElementById('rangeMonthlyCostInput').value = '';
      document.getElementById('rangeSalesPriceInput').value = '';
      feedback.textContent = 'IP-range oprettet.';
      await loadConnection();
    } catch (error) {
      feedback.textContent = error?.message || 'Netværksfejl under oprettelse af IP-range.';
    } finally {
      if (button) button.disabled = false;
    }
  }

  window.createRange = createRange;

  async function createAddress() {
    const payload = {
      range_id: Number(document.getElementById('addressRangeSelect').value || 0),
      ip_address: document.getElementById('addressIpInput').value.trim(),
      status: document.getElementById('addressStatusInput').value || 'available',
      assigned_to: document.getElementById('addressAssignedInput').value.trim() || null,
      assigned_customer_id: Number(document.getElementById('addressAssignedCustomerIdInput').value || 0) || null,
      assigned_connection_id: Number(document.getElementById('addressAssignedConnectionIdInput').value || 0) || null,
    };
    if (!payload.range_id || !payload.ip_address) {
      alert('Range og IP-adresse er påkrævet');
      return;
    }

    const response = await fetch(`/api/v1/internet-connections/${connectionId}/ip-addresses`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    });
    if (!response.ok) {
      alert('Kunne ikke oprette IP-adresse');
      return;
    }
    document.getElementById('addressIpInput').value = '';
    document.getElementById('addressAssignedInput').value = '';
    document.getElementById('addressAssignedCustomerInput').value = '';
    document.getElementById('addressAssignedCustomerIdInput').value = '';
    document.getElementById('addressAssignedConnectionInput').value = '';
    document.getElementById('addressAssignedConnectionIdInput').value = '';
    await loadConnection();
  }

  async function updateAddress(addressId) {
    document.getElementById(`addressAssignedCustomerId-${addressId}`).value =
      resolveLookupId(document.getElementById(`addressAssignedCustomer-${addressId}`).value, customerOptions) || '';
    const currentAddress = (currentAddresses || []).find((item) => Number(item.id) === Number(addressId));
    const serviceValue = document.getElementById(`addressService-${addressId}`).value.trim() || null;
    let roleValue = document.getElementById(`addressRole-${addressId}`).value || null;
    let normalizedServiceValue = serviceValue;
    if (roleValue === 'bmcnet_gateway' && !normalizedServiceValue) {
      normalizedServiceValue = 'BMCnet kunde gateway';
    }
    if (!roleValue && normalizedServiceValue) {
      roleValue = 'service';
    }

    const payload = {
      status: document.getElementById(`addressStatus-${addressId}`).value,
      assigned_to: normalizedServiceValue,
      assigned_type: roleValue,
      assigned_customer_id: Number(document.getElementById(`addressAssignedCustomerId-${addressId}`).value || 0) || null,
      assigned_connection_id: Number(currentAddress?.assigned_connection_id || 0) || null,
      comment: document.getElementById(`addressComment-${addressId}`).value.trim() || null,
    };

    const response = await fetch(`/api/v1/internet-connections/${connectionId}/ip-addresses/${addressId}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    });
    if (!response.ok) {
      alert('Kunne ikke opdatere IP-adressen');
      return;
    }
    editingAddressId = null;
    await loadConnection();
  }

  async function createPricingEntry() {
    const payload = {
      effective_from: document.getElementById('pricingEffectiveDateInput').value,
      purchase_price: Number(document.getElementById('pricingPurchaseInput').value || 0),
      sales_price: Number(document.getElementById('pricingSalesInput').value || 0),
      notes: document.getElementById('pricingNotesInput').value.trim() || null,
    };
    if (!payload.effective_from) {
      document.getElementById('pricingFeedback').textContent = 'Fra dato er påkrævet.';
      return;
    }

    document.getElementById('pricingFeedback').textContent = 'Gemmer...';
    const response = await fetch(`/api/v1/internet-connections/${connectionId}/pricing`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    });
    if (!response.ok) {
      document.getElementById('pricingFeedback').textContent = 'Kunne ikke gemme prislinjen.';
      return;
    }
    document.getElementById('pricingEffectiveDateInput').value = '';
    document.getElementById('pricingPurchaseInput').value = '';
    document.getElementById('pricingSalesInput').value = '';
    document.getElementById('pricingNotesInput').value = '';
    document.getElementById('pricingFeedback').textContent = 'Prislinje gemt.';
    await loadConnection();
  }

  function resetAddressFilters() {
    document.getElementById('addressSearchInput').value = '';
    document.getElementById('addressStatusFilter').value = '';
    renderAddresses(currentAddresses);
  }

  document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('addressSearchInput').addEventListener('input', () => renderAddresses(currentAddresses));
    document.getElementById('addressStatusFilter').addEventListener('change', () => renderAddresses(currentAddresses));
    bindLookupInput('fieldCustomerLookup', 'fieldCustomerId', () => customerOptions);
    bindLookupInput('fieldParentLookup', 'fieldParentId', () => connectionOptions);
    bindLookupInput('bmcnetWizardCustomerLookup', 'bmcnetWizardCustomerId', () => customerOptions);
    bindLookupInput('rangeCustomerLookupInput', 'rangeCustomerIdInput', () => customerOptions);
    bindLookupInput('addressAssignedCustomerInput', 'addressAssignedCustomerIdInput', () => customerOptions);
    bindLookupInput('addressAssignedConnectionInput', 'addressAssignedConnectionIdInput', () => connectionOptions);
    document.getElementById('bmcnetWizardSharedHeadSelect').addEventListener('change', async (event) => {
      await refreshBmcnetWizardHeadState(event.target.value);
    });
    document.getElementById('bmcnetWizardInternetProduct').addEventListener('change', () => syncBmcnetWizardPrice('bmcnetWizardInternetProduct', 'bmcnetWizardInternetPrice'));
    document.getElementById('bmcnetWizardIpProduct').addEventListener('change', async () => {
      syncBmcnetWizardPrice('bmcnetWizardIpProduct', 'bmcnetWizardIpPrice');
      await refreshBmcnetWizardAllocationMode();
    });
    document.getElementById('bmcnetWizardAddress').addEventListener('change', async () => {
      await refreshBmcnetWizardAllocationMode();
    });
    document.getElementById('fieldSubscriptionLookup').addEventListener('change', () => {
      document.getElementById('fieldSubscriptionId').value = resolveSubscriptionId(document.getElementById('fieldSubscriptionLookup').value) || '';
    });
    const createRangeButton = document.getElementById('createRangeButton');
    if (createRangeButton) {
      createRangeButton.addEventListener('click', (event) => {
        event.preventDefault();
        createRange();
      });
    }
    loadConnection();
  });
</script>
{% endblock %}