let html = `
<div>
    <h5><i class="${getItemIcon(item.item_type_name)}"></i> ${item.name}</h5>
    <div class="popup-info">
        <div class="info-row"><span class="info-label">Jenis:</span> ${item.item_type_name}</div>
        ${item.description ? `<div class="info-row"><span class="info-label">Deskripsi:</span> ${item.description}</div>` : ''}
        ${item.address ? `<div class="info-row"><span class="info-label">Alamat:</span> ${item.address}</div>` : ''}
        
        <div class="info-row"><span class="info-label">Warna Tube:</span> ${tubeColorName}</div>
        ${item.core_used ? `<div class="info-row"><span class="info-label">Core Digunakan:</span> ${item.core_used}</div>` : ''}
        <div class="info-row"><span class="info-label">Splitter Utama:</span> ${splitterMain}</div>
        <div class="info-row"><span class="info-label">Splitter ODP:</span> ${splitterOdp}</div>

        <div class="info-row"><span class="info-label">Status:</span> 
            <span class="badge badge-${getStatusBadgeClass(item.status)}">${getStatusText(item.status)}</span>
        </div>

        <!-- Redaman hanya untuk item selain ODP, ODC, Tiang Tumpu, OLT -->
        ${!['odp', 'odc', 'tiang tumpu', 'olt'].includes(item.item_type_name.toLowerCase()) 
    ? `
      <div class="info-row" id="redaman-${item.id}">
          <span class="info-label">Redaman :</span> <em>Memuat...</em>
      </div>
      <div class="info-row" id="voltage-${item.id}">
          <span class="info-label">Voltage :</span> <em>Memuat...</em>
      </div>

      <div class="info-row" id="onu-status-${item.id}">
    <span class="info-label">ONU Status :</span> <em>Memuat...</em>
</div>

<div class="info-row" id="last-update-${item.id}">
    <span class="info-label">Last Update :</span> <em>Memuat...</em>
</div>
 <div class="info-row">
      <span class="info-label">Customer Phone :</span> 
      <span>${item.customer_phone ? item.customer_phone : '-'}</span>
  </div>
      `
    : ''}