<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title><?php
// safe escape helper used everywhere below
function _e($value) {
    if (is_null($value)) return '';
    if (is_scalar($value)) return htmlspecialchars((string)$value, ENT_QUOTES, 'UTF-8');
    return htmlspecialchars(json_encode($value, JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES), ENT_QUOTES, 'UTF-8');
}
echo  _e($pageTitle ?? 'Tshen') 
?></title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="<?= \Tshen\asset('style.css') ?>" />
  <?php if (!empty($_SESSION['user'])): ?>
  <link rel="stylesheet" href="<?= \Tshen\asset('dashboard.css') ?>" />
  <?php endif; ?>
  <style>
    body{background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif}
    .container{max-width:1100px;margin:32px auto;padding:0 16px}
    .filters{display:flex;gap:12px;align-items:center;margin-bottom:20px}
    .card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .class-card{background:#111;border:1px solid #333;padding:18px;border-radius:8px;text-align:center}
    .class-image{width:100%;height:160px;object-fit:cover;border-radius:6px;margin-bottom:12px}
    .book-now-btn{display:inline-block;background:#28a745;color:#fff;padding:8px 14px;border-radius:6px;text-decoration:none}
    .notice{color:#ddd}
    select,button{padding:6px 8px;border-radius:4px}
  </style>
</head>
<body>
<?php
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}
$basePath = rtrim(dirname($_SERVER['SCRIPT_NAME']), '/\\');
if ($basePath === '/' || $basePath === '\\') {
    $basePath = '';
}
?>
<?php if (!empty($_SESSION['flash'])): ?>
  <div class="flash" style="padding:8px;background:#ffd;font-weight:600">
    <?= _e($_SESSION['flash']) ?>
  </div>
  <?php unset($_SESSION['flash']); ?>
<?php endif; ?>

<?php 
$isLoggedIn = !empty($_SESSION['user']); 
$currentPath = $_SERVER['REQUEST_URI'];
$currentPath = strtok($currentPath, '?'); // Remove query parameters
// Remove application base path (e.g., /tshen) so active page detection works correctly
if (!empty($basePath) && strpos($currentPath, $basePath) === 0) {
  $currentPath = substr($currentPath, strlen($basePath));
  if ($currentPath === '') $currentPath = '/';
}
if ($currentPath === '/') {
  $activePage = 'home';
} else {
  $activePage = trim($currentPath, '/');
  // Handle deeper paths by getting the first segment
  if (strpos($activePage, '/') !== false) {
    $activePage = explode('/', $activePage)[0];
  }
}
?>

<?php if ($isLoggedIn): ?>
<!-- Sidebar for logged-in users -->
<div class="dashboard-sidebar">
  <div class="user-profile">
    <div class="avatar">
      <?php
      // Get user profile picture
      $userId = $_SESSION['user']['id'] ?? 0;
      $profilePicture = \Tshen\asset('icon.png'); // Default image
      
      if ($userId) {
        try {
          $profile = \Tshen\Database::run('SELECT profile_picture FROM user_profiles WHERE user_id = ?', [$userId])->fetch();
          if ($profile && !empty($profile['profile_picture'])) {
            // Normalize stored path: some older entries may include a leading '/public' prefix.
            $dbPath = $profile['profile_picture'];
            if (strpos($dbPath, '/public') === 0) {
              $dbPath = substr($dbPath, 7); // remove leading '/public'
            }
            $profilePicture = '/public' . $dbPath;
          }
        } catch (\Exception $e) {
          // Silently fail and use default image
        }
      }
      ?>
      <img src="<?= _e($profilePicture) ?>" alt="Profile Picture">
    </div>
    <div class="user-info">
      <h3><?= _e($_SESSION['user']['name'] ?? 'User') ?></h3>
      
    </div>
  </div>
  
  <nav class="sidebar-nav">
    <ul>
      
      <li><a href="<?= \Tshen\url('/') ?>" class="<?= $activePage === 'home' ? 'active' : '' ?>"><span class="nav-icon">🏠</span> Home</a></li>
      <li><a href="<?= \Tshen\url('/classes') ?>" class="nav-link <?= $activePage === 'classes' ? 'active' : '' ?>"><span class="nav-icon">📅</span>Bookings</a></li>
      <li><a href="<?= (($_SESSION['role'] ?? '') === 'studio' || ($_SESSION['role'] ?? '') === 'admin') ? \Tshen\url('/studio') : \Tshen\url('/classes') ?>" class="<?= $activePage === 'studio' || $activePage === 'classes' ? 'active' : '' ?>"><span class="nav-icon">🏋️</span> Studios</a></li>
      <li><a href="<?= \Tshen\url('/about') ?>" class="<?= $activePage === 'about' ? 'active' : '' ?>"><span class="nav-icon">ℹ️</span> How It Works</a></li>
          <li><a href="<?= \Tshen\url('/store') ?>" class="<?= $activePage === 'store' ? 'active' : '' ?>"><span class="nav-icon">🛒</span> Store</a></li>
          <li><a href="<?= \Tshen\url('/contact') ?>" class="<?= $activePage === 'contact' ? 'active' : '' ?>"><span class="nav-icon">📞</span> Contact</a></li>
     
      <li><a href="<?= \Tshen\url('/profile') ?>" class="<?= $activePage === 'profile' ? 'active' : '' ?>"><span class="nav-icon">👤</span> Profile</a></li>
    </ul>
  </nav>
  
  <div class="sign-out">
    <a href="<?= \Tshen\url('/logout') ?>"><span class="nav-icon"></span> Sign out</a>
  </div>
</div>

<div class="main-with-sidebar">
<?php else: ?>
<!-- Regular header for non-logged-in users -->
<header class="site-header">
  <div class="header-container">
    <div class="logo-container">
      <img src="<?= \Tshen\asset('redlogo.png') ?>" alt="TSHEN Logo" class="logo-icon" style="width: 120px; height: auto;">
     
    </div>
    <nav class="main-nav">
      <ul class="nav-list">
        <li><a href="/" class="nav-link <?= $activePage === 'home' ? 'active' : '' ?>">Home</a></li>
        <li><a href="/classes" class="nav-link <?= $activePage === 'classes' ? 'active' : '' ?>">Bookings</a></li>
        <li><a href="<?= (($_SESSION['role'] ?? '') === 'studio' || ($_SESSION['role'] ?? '') === 'admin') ? '/studio' : '/classes' ?>" class="nav-link <?= $activePage === 'studio' || $activePage === 'classes' ? 'active' : '' ?>">Studios</a></li>
        <li><a href="/about" class="nav-link <?= $activePage === 'about' ? 'active' : '' ?>">How It Works</a></li>

        <?php if (!isset($_SESSION['user'])): ?>
         
        <?php endif; ?>
      </ul>
    </nav>
    <div class="auth-container">
      <a href="<?= \Tshen\url('/login') ?>" class="auth-link"><span class="nav-icon"><img src="<?= \Tshen\asset('icon.png') ?>" alt="Profile Picture" style="width: 20px; height: 20px; font-size: 18px;"></span>Login</a>
     
    </div>
  </div>
</header>
<?php endif; ?>

<?php if ($msg = \Tshen\flash('success')): ?>
  <div class="popup-notice success" id="popup-notice-success">
    <?= _e($msg) ?>
  </div>
  <script>
    setTimeout(function() {
      var el = document.getElementById('popup-notice-success');
      if (el) el.style.opacity = '0';
    }, 2500);
  </script>
<?php endif; ?>
<?php if ($msg = \Tshen\flash('error')): ?>
  <div class="popup-notice error" id="popup-notice-error">
    <?= _e($msg) ?>
  </div>
  <script>
    setTimeout(function() {
      var el = document.getElementById('popup-notice-error');
      if (el) el.style.opacity = '0';
    }, 2500);
  </script>
<?php endif; ?>

<?php if ($isLoggedIn): ?>
<main class="container-with-sidebar">
<?php else: ?>
<main class="container">
<?php endif; ?>