<?php
// ============================================================
//  MediCore — Customer Portal Layout Header
//  File: includes/shop_header.php
//  Lightweight counterpart to includes/header.php — no staff
//  sidebar/topbar, just a simple public storefront bar. Usage:
//    $shopPage = 'shop';           // 'shop' | 'orders' | 'profile' | 'login'
//    $title    = 'Shop';
//    require_once '../includes/shop_header.php';
// ============================================================
require_once __DIR__ . '/customer_auth.php';

$settings   = get_settings();
$__spage    = $shopPage ?? '';
$__stitle   = $title ?? 'Online Order';
$__loggedIn = customer_logged_in();
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?= htmlspecialchars($__stitle) ?> — <?= htmlspecialchars(portal_shop_name()) ?></title>
  <link rel="stylesheet" href="<?= base_url('assets/style.css') ?>">
  <script src="<?= base_url('assets/form-icons.js') ?>"></script>
  <script>
    // Shared globals for includes/shop_footer.php's cart + gateway JS —
    // set once here so every shop/*.php page (and the shared footer
    // script) can build correct URLs/labels without repeating PHP.
    window.SHOP_BASE = '<?= base_url('') ?>';
    window.SHOP_API  = '<?= base_url('api/') ?>';
    window.SHOP_CUR  = '<?= addslashes($settings['currency'] ?? '') ?>';
    window.SHOP_ALLOW_BACKORDER = <?= ($settings['portal_allow_backorder'] ?? '1') === '1' ? 'true' : 'false' ?>;
  </script>
  <style>
    html,body{background:var(--bg)}
    .shop-topbar{position:sticky;top:0;z-index:40;background:var(--brand);color:#fff;
      display:flex;align-items:center;gap:16px;padding:10px 20px;box-shadow:var(--shmd)}
    .shop-topbar .brand{font-weight:800;font-size:15px;display:flex;align-items:center;gap:8px;
      color:#fff;text-decoration:none}
    .shop-topbar nav{display:flex;gap:4px;margin-left:12px}
    .shop-topbar nav a{color:#fff;opacity:.85;text-decoration:none;font-size:12.5px;
      font-weight:600;padding:6px 10px;border-radius:var(--rsm)}
    .shop-topbar nav a.active,.shop-topbar nav a:hover{opacity:1;background:rgba(255,255,255,.15)}
    .shop-topbar .spacer{flex:1}
    .shop-topbar .cart-btn{position:relative;color:#fff;background:none;border:none;
      cursor:pointer;font-size:18px;padding:8px;line-height:1;text-decoration:none;
      display:inline-flex;align-items:center;justify-content:center;
      min-width:40px;min-height:40px;box-sizing:border-box;border-radius:50%}
    .shop-topbar .cart-btn:active{background:rgba(255,255,255,.15)}
    .shop-topbar .cart-count{position:absolute;top:2px;right:2px;background:var(--danger);
      color:#fff;font-size:10px;font-weight:700;border-radius:8px;padding:1px 5px;min-width:16px;text-align:center}
    .shop-topbar .who{font-size:12px;opacity:.9;text-decoration:none;color:#fff;white-space:nowrap}
    .shop-topbar .logout-link{color:#fff;opacity:.85;text-decoration:none;font-size:12px;
      padding:8px 4px;display:inline-block}
    .shop-topbar nav a{min-height:20px;display:inline-flex;align-items:center}
    .shop-wrap{max-width:1000px;margin:0 auto;padding:20px}
    /* ── Mobile responsive — the browser applies this automatically
         based on the real viewport width whenever a customer opens
         the shop from a phone; no user-agent detection needed ── */
    @media (max-width: 640px) {
      .shop-topbar{gap:4px;padding:8px 10px;flex-wrap:wrap}
      .shop-topbar nav{margin-left:0;gap:0}
      .shop-topbar nav a{padding:9px 8px;font-size:12px}
      .shop-wrap{padding:12px}
      /* Username text duplicates the Profile nav tab — drop it so the
         bar stays on one row on narrow phones */
      .shop-topbar .who{display:none}
    }
    @media (max-width: 400px) {
      /* Keep only the brand icon (not the shop name text) on very
         narrow phones so Shop/My Orders/Profile/Cart still fit */
      .shop-topbar .brand .brand-text{display:none}
    }
  </style>
</head>
<body>
<?php if ($__spage !== 'login'): ?>
<div class="shop-topbar">
  <a href="<?= base_url('shop/index.php') ?>" class="brand">
    <?php if (!empty($settings['logo'])): ?>
      <img src="<?= htmlspecialchars($settings['logo']) ?>" style="width:24px;height:24px;border-radius:6px;object-fit:cover">
    <?php else: ?>💊<?php endif; ?>
    <span class="brand-text"><?= htmlspecialchars(portal_shop_name()) ?></span>
  </a>
  <nav>
    <a href="<?= base_url('shop/index.php') ?>" class="<?= $__spage === 'shop' ? 'active' : '' ?>">Shop</a>
    <?php if ($__loggedIn): ?>
    <a href="<?= base_url('shop/orders.php') ?>" class="<?= $__spage === 'orders' ? 'active' : '' ?>">My Orders</a>
    <a href="<?= base_url('shop/profile.php') ?>" class="<?= $__spage === 'profile' ? 'active' : '' ?>">Profile</a>
    <?php endif; ?>
  </nav>
  <div class="spacer"></div>
  <a href="<?= base_url('shop/index.php') ?>" class="cart-btn" title="Cart">
    🛒<span class="cart-count" id="topbar-cart-count" style="display:none">0</span>
  </a>
  <?php if ($__loggedIn): ?>
    <a href="<?= base_url('shop/profile.php') ?>" class="who">👤 <?= htmlspecialchars(current_customer_name() ?: current_customer_phone()) ?></a>
    <a href="#" class="logout-link" onclick="shopLogout();return false">Logout</a>
  <?php else: ?>
    <a href="<?= base_url('shop/login.php') ?>" class="logout-link">Login</a>
  <?php endif; ?>
</div>
<?php endif; ?>
<div class="shop-wrap">
