<!-- How to Use Button -->
<button class="btn btn-info me-3" type="button" data-bs-toggle="collapse" data-bs-target="#howToUseCard" aria-expanded="false" aria-controls="howToUseCard">
  How to use?
</button>

<!-- Collapsible Card for How to Use -->
<div class="collapse" id="howToUseCard">
  <div class="card card-body">
    <h5>Pop-Up Admin Panel – Quick Guide</h5>
    <ul>
      <li>
        <strong>What this tool does:</strong>  
        You can create up to <strong>2 front-end pop-up messages</strong> for marketing, promotions, announcements, or important notices.  
        Each pop-up has its own settings, background, content, and target page rules.
      </li>

      <li>
        <strong>Popup Settings Explained:</strong>
        <ul>
          <li>
            <strong>Target Page:</strong> Define where the pop-up will appear on your website.  
            <ul>
              <li>Example: <code>index.php?cPath=1</code> to show only on an Event Category page.</li>
              <li>Example: <code>special_offer.php</code> to show on a promotion page.</li>
              <li><strong>To show on the Homepage:</strong> enter <strong>HOME</strong></li>
            </ul>
          </li>

          <li>
            <strong>Background Image:</strong> Choose an image to display behind your pop-up content.  
            <ul>
              <li>Click <strong>Select from Library</strong> to pick an image from your Media Library.</li>
              <li>OR paste a relative path such as <code>images/uploads/myimage.jpg</code>.</li>
              <li>If no image is selected, the pop-up will use the background color instead.</li>
            </ul>
          </li>

          <li>
            <strong>Background Color:</strong> Set a fallback background color (e.g., <code>#222222</code>, <code>#FF9900</code>).  
            This color is used if no image is selected or if the image fails to load.
          </li>

          <li>
            <strong>Static Page Content:</strong>  
            Create the pop-up message using a Static Page in the CMS.  
            After saving, enter the <strong>Static Page ID</strong> into the pop-up field.
            <br><em>Tip:</em> You can prepare multiple Static Pages and reuse them for future promotions.
          </li>

          <li>
            <strong>Enable:</strong> Tick to activate the pop-up on the front-end.  
            You may disable it any time without losing your settings.
          </li>
        </ul>
      </li>

      <li>
        <strong>Testing Your Popup:</strong>
        <ul>
          <li>Use the <strong>Test Popup</strong> button to see a live preview directly in the admin panel.</li>
          <li>This lets you check layout, image, color, and content before enabling it for visitors.</li>
        </ul>
      </li>

      <li>
        <strong>Important Reminders:</strong>
        <ul>
          <li>The <strong>Target Page</strong> must match the front-end page name correctly, or the pop-up won’t appear.</li>
          <li>Use visually strong background colors or images to maximize marketing visibility.</li>
          <li>You can change images anytime in your <strong>Media Library</strong>.</li>
        </ul>
      </li>

      <li>
        After configuration, click <strong>Save Changes</strong> to store your pop-up settings.
      </li>
    </ul>
  </div>
</div>
