<div id="imageTabWidget">
  <style>
   .tab-container {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .tab {
      padding: 10px 20px;
      background-color: #ffffff;
      font-weight: bold;
      color: #1e3957;
      border: none;
      border-radius: 20px !important;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    .tab:hover {
      background-color: #e0e0e0;
    }
    .tab.active {
      background-color: #eae1d7;
      color: white;
    }
    /* Hide all targeted divs by default */
    #1502368899, #1948046058, #1754443640, #1657917165 {
      display: none !important;
    }
    .visible {
      display: block !important;
    }
    .hidden {
      display: none !important;
    }
  </style>
  <div class="tab-container" id="tabContainer">
   <!-- Tabs will be generated dynamically -->
  </div>
  <script>
   (function() {
      // Configuration for tabs and their associated div IDs
      const tabs = [
        { title: "Professional Management", id: "1502368899" },
        { title: "Leasing and Resident", id: "1948046058" },
        { title: "Lease Renewal", id: "1754443640" },
        { title: "Reports & Schedule", id: "1657917165" }
      ];
      function initializeWidget() {
        const tabContainer = document.getElementById('tabContainer');
        if (!tabContainer) {
          console.error('Tab container not found');
          return;
        }
        // Create tabs and handle click events
        tabs.forEach((tab, index) => {
          const tabButton = document.createElement('button');
          tabButton.className = 'tab';
          tabButton.textContent = tab.title;
          tabButton.addEventListener('click', () => {
            // Remove active class from all tabs
            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
            tabButton.classList.add('active');
            // Hide all divs and show the selected one
            tabs.forEach(t => {
              const targetDiv = document.getElementById(t.id);
              if (targetDiv) {
                targetDiv.classList.remove('visible');
                targetDiv.classList.add('hidden');
              }
            });
            const targetDiv = document.getElementById(tab.id);
            if (targetDiv) {
              targetDiv.classList.add('visible');
              targetDiv.classList.remove('hidden');
            }
          });
          tabContainer.appendChild(tabButton);
          // Automatically click the first tab
          if (index === 0) {
            tabButton.click();
          }
        });
      }
      // Wait for DOM to be ready
      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initializeWidget);
      } else {
        initializeWidget();
      }
    })();
  </script>
 </div>