<?php
// includes/header.php
// $page_title must be set before including this file
$page_title  = $page_title  ?? 'Dashboard';
$page_icon   = $page_icon   ?? '📊';
$user_name   = $_SESSION['user_name'] ?? 'User';
$user_role   = $_SESSION['user_role'] ?? '';

// DB connection for live counts — uses parent scope vars or falls back
$_h_host = $db_host ?? 'localhost';
$_h_user = $db_user ?? 'insugroup_habibaerp';
$_h_pass = $db_pass ?? '*#QB=Bpy6ta*';
$_h_name = $db_name ?? 'insugroup_insudine';
mysqli_report(MYSQLI_REPORT_OFF);
$conn_h = new mysqli($_h_host, $_h_user, $_h_pass, $_h_name);

// Live pending orders count
$pending_orders = 0;
if (!$conn_h->connect_error) {
    $r = $conn_h->query("SELECT COUNT(*) AS cnt FROM orders WHERE status IN ('pending','preparing') LIMIT 1");
    if ($r) $pending_orders = $r->fetch_assoc()['cnt'] ?? 0;
}

// Today's date
$today = date('D, d M Y');
?>

<!-- ════════════════════════════════════════════════
     TOP HEADER
════════════════════════════════════════════════ -->
<header class="erp-header" id="erpHeader">

  <!-- Left: mobile toggle + page title -->
  <div class="hdr-left">
    <!-- Mobile hamburger -->
    <button class="hdr-hamburger" id="mobileMenuBtn" title="Toggle menu">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
        <line x1="3" y1="6"  x2="21" y2="6"/>
        <line x1="3" y1="12" x2="21" y2="12"/>
        <line x1="3" y1="18" x2="21" y2="18"/>
      </svg>
    </button>

    <!-- Breadcrumb -->
    <div class="hdr-breadcrumb">
      <span class="hdr-icon"><?= $page_icon ?></span>
      <span class="hdr-page"><?= htmlspecialchars($page_title) ?></span>
    </div>
  </div>

  <!-- Right: search, notif, date, user -->
  <div class="hdr-right">

    <!-- Quick search -->
    <div class="hdr-search">
      <span class="hs-icon">🔍</span>
      <input type="text" placeholder="Search orders, items…" id="globalSearch">
    </div>

    <!-- Date -->
    <div class="hdr-date"><?= $today ?></div>

    <!-- Notifications -->
    <button class="hdr-notif" title="Notifications" id="notifBtn">
      🔔
      <?php if ($pending_orders > 0): ?>
        <span class="notif-badge"><?= $pending_orders ?></span>
      <?php endif; ?>
    </button>

    <!-- User dropdown -->
    <div class="hdr-user-wrap" id="userMenuWrap">
      <button class="hdr-user-btn" id="userMenuBtn">
        <div class="hdr-avatar"><?= strtoupper(substr($user_name, 0, 1)) ?></div>
        <div class="hdr-user-info">
          <span class="hdr-uname"><?= htmlspecialchars($user_name) ?></span>
          <span class="hdr-urole"><?= ucfirst($user_role) ?></span>
        </div>
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" style="opacity:.4">
          <path d="M6 9l6 6 6-6"/>
        </svg>
      </button>

      <!-- Dropdown -->
      <div class="hdr-dropdown" id="userDropdown">
        <a href="profile.php"  class="hdr-dd-item">👤 My Profile</a>
        <a href="settings.php" class="hdr-dd-item">⚙️ Settings</a>
        <div class="hdr-dd-divider"></div>
        <a href="logout.php"   class="hdr-dd-item hdr-dd-logout">🚪 Logout</a>
      </div>
    </div>

  </div>
</header>

<!-- Mobile overlay -->
<div class="sb-overlay" id="sbOverlay"></div>

<style>
/* ════════════════════════════════════════════════
   HEADER STYLES
════════════════════════════════════════════════ */
.erp-header {
  position: fixed;
  top: 0;
  left: var(--sb-width);
  right: 0;
  height: var(--header-h);
  background: rgba(255,252,249,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-c);
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0 22px 0 20px;
  z-index: 100;
  transition: left 0.28s ease;
  box-shadow: 0 1px 12px rgba(100,40,0,0.06);
}

.erp-header.collapsed { left: var(--sb-collapsed); }

/* ── Left ──────────────────────────────────────── */
.hdr-left {
  display: flex; align-items: center; gap: 14px;
}

.hdr-hamburger {
  background: none; border: none;
  color: var(--text-mid);
  padding: 7px; border-radius: 8px;
  display: none;
  transition: background 0.2s;
}

.hdr-hamburger:hover { background: #f0e8e0; }

.hdr-breadcrumb {
  display: flex; align-items: center; gap: 8px;
}

.hdr-icon { font-size: 18px; }

.hdr-page {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 700;
  color: var(--text-dark);
}

/* ── Right ─────────────────────────────────────── */
.hdr-right {
  display: flex; align-items: center; gap: 12px;
}

/* Search */
.hdr-search {
  display: flex; align-items: center; gap: 8px;
  background: #f5ede4;
  border: 1.5px solid var(--border-c);
  border-radius: 9px;
  padding: 7px 13px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.hdr-search:focus-within {
  border-color: var(--flame);
  box-shadow: 0 0 0 3px rgba(232,93,4,0.09);
  background: #fff;
}

.hs-icon { font-size: 13px; opacity: 0.5; }

.hdr-search input {
  background: none; border: none; outline: none;
  font-family: 'Nunito', sans-serif;
  font-size: 13px; font-weight: 500;
  color: var(--text-dark);
  width: 180px;
}

.hdr-search input::placeholder { color: var(--text-muted); }

/* Date */
.hdr-date {
  font-size: 12px; font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Notification */
.hdr-notif {
  background: #f5ede4;
  border: 1.5px solid var(--border-c);
  border-radius: 9px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  position: relative;
  transition: background 0.2s;
}

.hdr-notif:hover { background: #ffe0c8; }

.notif-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--chilli);
  color: #fff;
  font-size: 9px; font-weight: 800;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fffcf9;
}

/* User button */
.hdr-user-wrap { position: relative; }

.hdr-user-btn {
  display: flex; align-items: center; gap: 9px;
  background: #f5ede4;
  border: 1.5px solid var(--border-c);
  border-radius: 10px;
  padding: 6px 12px 6px 8px;
  transition: background 0.2s;
}

.hdr-user-btn:hover { background: #ffe8d4; }

.hdr-avatar {
  width: 30px; height: 30px;
  background: linear-gradient(135deg, var(--chilli), var(--saffron));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
  flex-shrink: 0;
}

.hdr-user-info { text-align: left; }

.hdr-uname {
  display: block; font-size: 12px; font-weight: 700;
  color: var(--text-dark); line-height: 1.2;
}

.hdr-urole {
  display: block; font-size: 9.5px;
  color: var(--flame); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
}

/* Dropdown */
.hdr-dropdown {
  display: none;
  position: absolute; top: calc(100% + 8px); right: 0;
  background: #fff;
  border: 1px solid var(--border-c);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  overflow: hidden;
  z-index: 300;
  animation: dropIn 0.2s ease;
}

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hdr-dropdown.open { display: block; }

.hdr-dd-item {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 16px;
  font-size: 13px; font-weight: 600;
  color: var(--text-dark);
  transition: background 0.15s;
}

.hdr-dd-item:hover { background: #fff8f4; }

.hdr-dd-logout { color: var(--chilli); }
.hdr-dd-logout:hover { background: #fff0ec; }

.hdr-dd-divider {
  height: 1px; background: var(--border-c);
  margin: 4px 0;
}

/* ═══ RESPONSIVE ══════════════════════════════════ */
@media (max-width: 768px) {
  .erp-header { left: 0 !important; padding: 0 14px; }
  .hdr-hamburger { display: flex; }
  .hdr-search    { display: none; }
  .hdr-date      { display: none; }
  .hdr-user-info { display: none; }
  .hdr-user-btn  { padding: 6px; border-radius: 50%; }
}
</style>

<script>
// ── Sidebar collapse toggle ────────────────────────────────
const sidebar    = document.getElementById('erpSidebar');
const header     = document.getElementById('erpHeader');
const mainArea   = document.querySelector('.erp-main');
const collapseBtn = document.getElementById('collapseBtn');

if (collapseBtn) {
  // Restore state
  if (localStorage.getItem('sbCollapsed') === '1') {
    sidebar?.classList.add('collapsed');
    header?.classList.add('collapsed');
    mainArea?.classList.add('collapsed');
  }

  collapseBtn.addEventListener('click', () => {
    const isCollapsed = sidebar.classList.toggle('collapsed');
    header?.classList.toggle('collapsed');
    mainArea?.classList.toggle('collapsed');
    localStorage.setItem('sbCollapsed', isCollapsed ? '1' : '0');
  });
}

// ── Mobile sidebar toggle ──────────────────────────────────
const mobileBtn = document.getElementById('mobileMenuBtn');
const overlay   = document.getElementById('sbOverlay');

mobileBtn?.addEventListener('click', () => {
  sidebar?.classList.toggle('mobile-open');
  overlay?.classList.toggle('show');
});

overlay?.addEventListener('click', () => {
  sidebar?.classList.remove('mobile-open');
  overlay?.classList.remove('show');
});

// ── User dropdown ──────────────────────────────────────────
const userBtn      = document.getElementById('userMenuBtn');
const userDropdown = document.getElementById('userDropdown');

userBtn?.addEventListener('click', (e) => {
  e.stopPropagation();
  userDropdown?.classList.toggle('open');
});

document.addEventListener('click', () => {
  userDropdown?.classList.remove('open');
});
</script>