<?php
// my_main_header.php (converted from your sidebar HTML)
// NOTE: Session start can stay in your main layout; uncomment if needed.
// if (session_status() === PHP_SESSION_NONE) { session_start(); }

require_once __DIR__ . '/../config/dbConnection.php';

$db   = DatabaseConnection::getInstance();
$conn = $db->getConnection();

// Optional defaults (kept similar to your example)
$notifications = [];
$approvedCount = 0;
$profilePic    = 'default.png';

// Fetch profile picture (optional)
if ($conn instanceof mysqli && isset($_SESSION['username'])) {
    $username = (string)$_SESSION['username'];
    $stmt = $conn->prepare("SELECT profile_pic FROM users WHERE username = ? LIMIT 1");
    $stmt->bind_param('s', $username);
    $stmt->execute();
    $res = $stmt->get_result();
    if ($row = $res->fetch_assoc()) {
        if (!empty($row['profile_pic'])) $profilePic = $row['profile_pic'];
    }
    $stmt->close();
}

// (Optional) Notifications logic placeholder (keep your real logic if you already have it)
// $notifications = [...];
?>
<!-- Start::app-sidebar -->
<aside class="app-sidebar sticky" id="sidebar">

  <div class="container-xl">
    <!-- Start::main-sidebar -->
    <div class="main-sidebar">

      <!-- Start::nav -->
      <nav class="main-menu-container nav nav-pills sub-open">
        <div class="landing-logo-container">
          <div class="horizontal-logo">
            <a href="index.php" class="header-logo">
              <img src="../assets/images/brand-logos/desktop-logo.png" alt="logo" class="desktop-logo">
              <img src="../assets/images/brand-logos/desktop-dark.png" alt="logo" class="desktop-dark">
            </a>
          </div>
        </div>

        <div class="slide-left" id="slide-left">
          <svg xmlns="http://www.w3.org/2000/svg" fill="#7b8191" width="24" height="24" viewBox="0 0 24 24">
            <path d="M13.293 6.293 7.586 12l5.707 5.707 1.414-1.414L10.414 12l4.293-4.293z"></path>
          </svg>
        </div>

        <ul class="main-menu flex-fill">

          <li class="slide">
            <a class="side-menu__item active" href="javascript:void(0);">
              <span class="side-menu__label">Home</span>
            </a>
          </li>

          <li class="slide">
            <a href="javascript:void(0);" class="side-menu__item">
              <span class="side-menu__label">Categoriest</span>
            </a>
          </li>

          <li class="slide">
            <a href="javascript:void(0);" class="side-menu__item">
              <span class="side-menu__label">All Ads</span>
            </a>
          </li>

          <li class="slide has-sub">
            <a href="javascript:void(0);" class="side-menu__item">
              <span class="side-menu__label">Pages</span>
              <i class="fe fe-chevron-down side-menu__angle"></i>
            </a>
            <ul class="slide-menu child1">
              <li class="slide"><a href="javascript:void(0);" class="side-menu__item">Abous Us</a></li>
              <li class="slide"><a href="javascript:void(0);" class="side-menu__item">FAQ</a></li>
              <li class="slide"><a href="javascript:void(0);" class="side-menu__item">Services</a></li>
              <li class="slide"><a href="javascript:void(0);" class="side-menu__item">Add Details</a></li>
              <li class="slide"><a href="javascript:void(0);" class="side-menu__item">Add Post</a></li>
              <li class="slide"><a href="javascript:void(0);" class="side-menu__item">404</a></li>

              <li class="slide has-sub">
                <a href="javascript:void(0);" class="side-menu__item">
                  Level-2 <i class="fe fe-chevron-right side-menu__angle"></i>
                </a>
                <ul class="slide-menu child2">
                  <li class="slide"><a href="javascript:void(0);" class="side-menu__item">Level-2-1</a></li>
                  <li class="slide has-sub">
                    <a href="javascript:void(0);" class="side-menu__item">
                      Level-2-2 <i class="fe fe-chevron-right side-menu__angle"></i>
                    </a>
                    <ul class="slide-menu child3">
                      <li class="slide"><a href="javascript:void(0);" class="side-menu__item">Level-2-2-1</a></li>
                      <li class="slide has-sub"><a href="javascript:void(0);" class="side-menu__item">Level-2-2-2</a></li>
                    </ul>
                  </li>
                </ul>
              </li>

            </ul>
          </li>

          <li class="slide has-sub">
            <a href="javascript:void(0);" class="side-menu__item">
              <span class="side-menu__label">Blog</span>
              <i class="fe fe-chevron-down side-menu__angle"></i>
            </a>
            <ul class="slide-menu child1">
              <li class="slide"><a href="javascript:void(0);" class="side-menu__item">Blog</a></li>
              <li class="slide"><a href="javascript:void(0);" class="side-menu__item">Blog Details</a></li>
              <li class="slide"><a href="javascript:void(0);" class="side-menu__item">Blog Post</a></li>
            </ul>
          </li>

          <li class="slide">
            <a href="javascript:void(0);" class="side-menu__item">
              <span class="side-menu__label">Contact Us</span>
            </a>
          </li>

        </ul>

        <div class="slide-right" id="slide-right">
          <svg xmlns="http://www.w3.org/2000/svg" fill="#7b8191" width="24" height="24" viewBox="0 0 24 24">
            <path d="M10.707 17.707 16.414 12l-5.707-5.707-1.414 1.414L13.586 12l-4.293 4.293z"></path>
          </svg>
        </div>

        <div class="d-lg-flex d-none align-items-center">

          <a href="javascript:void(0);" class="me-3" data-bs-toggle="modal" data-bs-target="#searchModal">
            <svg xmlns="http://www.w3.org/2000/svg" width="20px" viewBox="0 0 24 24">
              <path fill="var(--primary-color)" d="M21.71,20.29,18,16.61A9,9,0,1,0,16.61,18l3.68,3.68a1,1,0,0,0,1.42,0A1,1,0,0,0,21.71,20.29ZM11,18a7,7,0,1,1,7-7A7,7,0,0,1,11,18Z"/>
            </svg>
          </a>

          <div class="country-selector dropdown">
            <a href="javascript:void(0);" class="btn btn-wave btn-light border btn-country dropdown-toggle me-2" data-bs-toggle="dropdown">
              English
            </a>
            <ul class="main-header-dropdown dropdown-menu py-2" data-popper-placement="none">
              <li><a class="dropdown-item" href="javascript:void(0);">English</a></li>
              <li><a class="dropdown-item" href="javascript:void(0);">Spanish</a></li>
              <li><a class="dropdown-item" href="javascript:void(0);">French</a></li>
              <li><a class="dropdown-item" href="javascript:void(0);">German</a></li>
              <li><a class="dropdown-item" href="javascript:void(0);">Italian</a></li>
              <li><a class="dropdown-item" href="javascript:void(0);">Russian</a></li>
            </ul>
          </div>

          <div class="btn-list d-xl-flex d-none">
            <a href="sign-in-basic.html" class="btn btn-wave btn-light border">Login / Register</a>
            <button class="btn btn-wave btn-primary"><i class="bi bi-plus-circle me-2"></i>Post Your Ad</button>
          </div>

          <a href="javascript:void(0);" class="btn btn-icon btn-secondary-light switcher-icon" data-bs-toggle="offcanvas" data-bs-target="#switcher-canvas">
            <i class="ti ti-settings"></i>
          </a>
        </div>
      </nav>
      <!-- End::nav -->

    </div>
    <!-- End::main-sidebar -->
  </div>

</aside>
<!-- End::app-sidebar -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  document.querySelectorAll('.dropdown-toggle').forEach(function(el){
    new bootstrap.Dropdown(el);
  });
</script>
