<?php
// ============================================================
//  _layout.php  —  Shared Author Dashboard Layout
//  Include at top of every author page:
//
//  Usage:
//    $pageTitle    = 'Submit Manuscript';   // shown in top bar
//    $activePage   = 'submissions';         // matches $navItems key
//    require_once __DIR__ . '/_layout.php';
//    // ... page content ...
//    layoutEnd();
// ============================================================
if (!isset($user))  { $user    = getCurrentUser();  }
if (!isset($user_id)){ $user_id = $user['user_id']; }

$pageTitle  = $pageTitle  ?? 'Author Dashboard';
$activePage = $activePage ?? '';

$fullName = trim(($user['first_name']??'').' '.($user['last_name']??''));
$initials = strtoupper(
    substr($user['first_name'] ?? 'A', 0, 1) .
    substr($user['last_name']  ?? 'A', 0, 1)
);

$showReviewerLink = in_array($user['role'] ?? '', ['reviewer','both']);

// Current file name for active detection
$currentFile = basename($_SERVER['PHP_SELF'], '.php');

// Sidebar nav items: [label, href, icon, key]
$navItems = [
    ['Overview',         'dashboard.php',    '📊', 'dashboard'],
    ['Submit Manuscript','submission.php',   '📝', 'submission'],
    ['My Projects',      'projects.php',     '📁', 'projects'],
    ['My Profile',       'profile.php',      '👤', 'profile'],
    ['Change Password',  'change_password.php','🔑','change_password'],
    ['Raise a Ticket',   'tickets.php',      '🎫', 'tickets'],
    ['My Tickets',       'my_tickets.php',   '📋', 'my_tickets'],
    ['Author Guidelines','author_guidelines.php','📬', 'author_guidelines'],
    ['Track Paper',       'track_paper.php','📬', 'track_paper'],
    ['FAQs',          'faqs.php','📬', 'faqs'],
    ['Publication Fee',          'publication_fee.php','📬', 'publication_fee'],
];

function layoutEnd() { echo '</div></div></body></html>'; }
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><?= htmlspecialchars($pageTitle) ?> — Communeglobal</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
/* ════════════════════════════════════════════════════════════
   LAYOUT RESET & BASE
════════════════════════════════════════════════════════════ */
:root {
  --primary:   #E05A2B;
  --blue:      #1B3F6E;
  --teal:      #1A7F8E;
  --teal-dk:   #136070;
  --teal-lt:   #E0F4F7;
  --text:      #1A1A2E;
  --muted:     #6B7280;
  --border:    #E5E7EB;
  --bg:        #F5F6FA;
  --white:     #FFFFFF;
  --sidebar-w: 240px;
  --topbar-h:  58px;
  --font:      'Open Sans', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
}
a { text-decoration: none; color: inherit; }

/* ════════════════════════════════════════════════════════════
   SIDEBAR
════════════════════════════════════════════════════════════ */
.au-sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--white);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 200;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Logo area */
.au-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.au-sidebar-logo-icon {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; flex-shrink: 0;
}
.au-sidebar-logo-text { line-height: 1.2; }
.au-sidebar-logo-name { font-size: 14px; font-weight: 700; color: var(--text); }
.au-sidebar-logo-sub  { font-size: 11px; color: var(--muted); }

/* User info block */
.au-sidebar-user {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.au-sidebar-user-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.au-sidebar-av {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.au-sidebar-uname  { font-size: 13.5px; font-weight: 700; color: var(--text); }
.au-sidebar-role   {
  display: inline-block;
  font-size: 10.5px; font-weight: 700;
  background: var(--teal-lt); color: var(--teal);
  border-radius: 20px; padding: 2px 9px; margin-top: 2px;
  text-transform: uppercase; letter-spacing: .3px;
}
.au-sidebar-stats {
  display: flex; gap: 0;
  border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
}
.au-sidebar-stat {
  flex: 1; text-align: center;
  padding: 8px 4px;
  border-right: 1px solid var(--border);
}
.au-sidebar-stat:last-child { border-right: none; }
.au-stat-val  { font-size: 15px; font-weight: 700; color: var(--text); }
.au-stat-lbl  { font-size: 10px; color: var(--muted); margin-top: 1px; }
.au-stat-avail { color: #16A34A; }

/* Nav links */
.au-sidebar-nav {
  flex: 1;
  padding: 10px 0;
  display: flex; flex-direction: column; gap: 1px;
}
.au-nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px;
  font-size: 13.5px; font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all .15s;
  border-radius: 0;
}
.au-nav-link:hover {
  background: #F9FAFB;
  color: var(--text);
  border-left-color: var(--border);
}
.au-nav-link.active {
  background: #EFF6FF;
  color: var(--blue);
  font-weight: 700;
  border-left-color: var(--blue);
}
.au-nav-icon { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }

/* Sign out at bottom */
.au-sidebar-bottom {
  padding: 12px 0;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.au-signout {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px;
  font-size: 13.5px; font-weight: 500;
  color: var(--muted); cursor: pointer;
  transition: color .15s;
}
.au-signout:hover { color: #DC2626; }

/* ════════════════════════════════════════════════════════════
   TOPBAR
════════════════════════════════════════════════════════════ */
.au-topbar {
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  right: 0;
  height: var(--topbar-h);
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  z-index: 150;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.au-topbar-left {
  display: flex; align-items: center; gap: 12px;
}
.au-topbar-toggle {
  background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 4px; display: flex;
  align-items: center; font-size: 18px;
}
.au-topbar-title { font-size: 18px; font-weight: 700; color: var(--text); }
.au-topbar-date  { font-size: 12px; color: var(--muted); margin-top: 1px; }

.au-topbar-right {
  display: flex; align-items: center; gap: 14px;
}
.au-topbar-switch {
  padding: 8px 18px;
  background: var(--blue);
  color: #fff;
  border-radius: 6px;
  font-size: 13px; font-weight: 700;
  border: none; cursor: pointer;
  font-family: var(--font);
  transition: background .15s;
  white-space: nowrap;
}
.au-topbar-switch:hover { background: #153260; }
.au-topbar-user {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; position: relative;
}
.au-topbar-av {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.au-topbar-uinfo { line-height: 1.3; }
.au-topbar-uname { font-size: 13px; font-weight: 700; }
.au-topbar-urole { font-size: 11px; color: var(--muted); }
.au-topbar-logout {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--muted); cursor: pointer;
  padding: 6px 10px; border-radius: 4px; border: 1px solid var(--border);
  transition: all .15s; background: var(--white);
  white-space: nowrap;
}
.au-topbar-logout:hover { color: #DC2626; border-color: #FECACA; background: #FFF5F5; }

/* ════════════════════════════════════════════════════════════
   MAIN CONTENT WRAPPER
════════════════════════════════════════════════════════════ */
.au-main {
  margin-left: var(--sidebar-w);
  margin-top: var(--topbar-h);
  min-height: calc(100vh - var(--topbar-h));
  padding: 28px;
}

/* ════════════════════════════════════════════════════════════
   OVERLAY — dims page content when sidebar is open on mobile
════════════════════════════════════════════════════════════ */
.au-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 190;
}
.au-overlay.active { display: block; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — tablets (≤900px)
════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Sidebar slides off-canvas */
  .au-sidebar {
    width: 240px;
    transform: translateX(-240px);
    transition: transform .25s ease;
    box-shadow: none;
  }
  .au-sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.12);
  }

  /* Topbar spans full width */
  .au-topbar {
    left: 0;
    padding: 0 16px;
  }

  /* Main content uses full width */
  .au-main {
    margin-left: 0;
    padding: 20px 16px;
  }

  /* Hide verbose topbar items; keep toggle + title + avatar */
  .au-topbar-switch { display: none; }
  .au-topbar-uinfo  { display: none; }
  .au-topbar-logout { display: none; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — phones (≤480px)
════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .au-topbar-title { font-size: 15px; }
  .au-topbar-date  { display: none; }

  .au-main { padding: 14px 12px; }

  /* Tighten sidebar text slightly on very narrow phones */
  .au-nav-link { font-size: 13px; padding: 10px 16px; }
  .au-sidebar-uname { font-size: 13px; }
}
</style>
</head>
<body>

<!-- ════ OVERLAY (mobile) ══════════════════════════════════ -->
<div class="au-overlay" id="auOverlay" onclick="closeSidebar()"></div>

<!-- ════ SIDEBAR ════════════════════════════════════════════ -->
<aside class="au-sidebar" id="auSidebar">

  <!-- Logo -->
  <div class="au-sidebar-logo">
    <div class="au-sidebar-logo-icon">C</div>
    <div class="au-sidebar-logo-text">
      <div class="au-sidebar-logo-name">Communeglobal</div>
      <div class="au-sidebar-logo-sub">Author Portal</div>
    </div>
  </div>

  <!-- User info -->
  <div class="au-sidebar-user">
    <div class="au-sidebar-user-row">
      <div class="au-sidebar-av"><?= htmlspecialchars($initials) ?></div>
      <div>
        <div class="au-sidebar-uname"><?= htmlspecialchars($fullName) ?></div>
        <div class="au-sidebar-role">Author</div>
      </div>
    </div>
    <?php
    // Load submission stats for sidebar
    try {
        $sq = db()->prepare("SELECT COUNT(*) FROM submissions WHERE user_id=?");
        $sq->execute([$user_id]);
        $sTotal = (int)$sq->fetchColumn();

        $sq2 = db()->prepare("SELECT COUNT(*) FROM submissions WHERE user_id=? AND submission_status IN ('submitted','under_review','accepted')");
        $sq2->execute([$user_id]);
        $sPublished = (int)$sq2->fetchColumn();
    } catch(PDOException $e){ $sTotal = 0; $sPublished = 0; }
    ?>
    <div class="au-sidebar-stats">
      <div class="au-sidebar-stat">
        <div class="au-stat-val"><?= $sTotal ?></div>
        <div class="au-stat-lbl">Total</div>
      </div>
      <div class="au-sidebar-stat">
        <div class="au-stat-val"><?= $sPublished ?></div>
        <div class="au-stat-lbl">Active</div>
      </div>
      <div class="au-sidebar-stat">
        <div class="au-stat-val au-stat-avail">Yes</div>
        <div class="au-stat-lbl">Open</div>
      </div>
    </div>
  </div>

  <!-- Nav -->
  <nav class="au-sidebar-nav">
    <?php foreach ($navItems as [$label, $href, $icon, $key]):
      $isActive = ($activePage === $key || $currentFile === basename($href, '.php'));
    ?>
    <a href="<?= htmlspecialchars($href) ?>"
       class="au-nav-link <?= $isActive ? 'active' : '' ?>">
      <span class="au-nav-icon"><?= $icon ?></span>
      <?= htmlspecialchars($label) ?>
    </a>
    <?php endforeach; ?>

    <?php if ($showReviewerLink): ?>
    <a href="/reviewer/dashboard.php" class="au-nav-link" style="color:var(--blue);font-weight:700;margin-top:8px">
      <span class="au-nav-icon">🔄</span>
      Switch to Reviewer
    </a>
    <?php endif; ?>
  </nav>

  <!-- Sign out -->
  <div class="au-sidebar-bottom">
    <a href="logout.php" class="au-signout">
      <span class="au-nav-icon">🚪</span>
      Sign Out
    </a>
  </div>

</aside>

<!-- ════ TOPBAR ════════════════════════════════════════════ -->
<header class="au-topbar">
  <div class="au-topbar-left">
    <button class="au-topbar-toggle" onclick="toggleSidebar()" title="Toggle menu">
      ☰
    </button>
    <div>
      <div class="au-topbar-title"><?= htmlspecialchars($pageTitle) ?></div>
      <div class="au-topbar-date"><?= date('l, d F Y') ?></div>
    </div>
  </div>

  <div class="au-topbar-right">
    <?php if ($showReviewerLink): ?>
    <a href="/reviewer/dashboard.php">
      <button class="au-topbar-switch">Switch to Reviewer Dashboard →</button>
    </a>
    <?php endif; ?>

    <div class="au-topbar-user">
      <div class="au-topbar-av"><?= htmlspecialchars($initials) ?></div>
      <div class="au-topbar-uinfo">
        <div class="au-topbar-uname"><?= htmlspecialchars($fullName) ?></div>
        <div class="au-topbar-urole">Author</div>
      </div>
    </div>

    <a href="logout.php" class="au-topbar-logout">
      🚪 Logout
    </a>
  </div>
</header>

<!-- ════ MAIN CONTENT START ════════════════════════════════ -->
<div class="au-main">
<div><!-- inner wrapper closed by layoutEnd() -->

<script>
function openSidebar() {
  document.getElementById('auSidebar').classList.add('open');
  document.getElementById('auOverlay').classList.add('active');
  document.body.style.overflow = 'hidden'; // prevent background scroll
}

function closeSidebar() {
  document.getElementById('auSidebar').classList.remove('open');
  document.getElementById('auOverlay').classList.remove('active');
  document.body.style.overflow = '';
}

function toggleSidebar() {
  const isOpen = document.getElementById('auSidebar').classList.contains('open');
  isOpen ? closeSidebar() : openSidebar();
}

// Close sidebar when a nav link is tapped on mobile
document.querySelectorAll('.au-nav-link, .au-signout').forEach(function(el) {
  el.addEventListener('click', function() {
    if (window.innerWidth <= 900) closeSidebar();
  });
});

// Close on Escape key
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') closeSidebar();
});
</script>