<?php
/**
 * include/sidebar.php
 * Dynamically fetches all published pages from DB
 * and renders them in the navigation sidebar.
 * Drop-in replacement for the static sidebar.
 */

// Pull DB connection if not already loaded
if (!isset($pdo)) {
    include_once __DIR__ . '/../config/db.php';
}

// Current slug (so we can mark the active item)
$currentSlug = $_GET['slug'] ?? '';

// Fetch all published pages ordered by title
$sidebarPages = [];
if ($pdo) {
    try {
        $stmt = $pdo->query(
            "SELECT id, title, slug FROM pages WHERE status = 'published' ORDER BY title ASC"
        );
        $sidebarPages = $stmt->fetchAll();
    } catch (PDOException $e) {
        // Silently fail – front-end still renders
    }
}

// Icon rotation so every nav item looks unique
$icons = [
    'fa-book-open', 'fa-calendar-check', 'fa-file-alt', 'fa-pen-nib',
    'fa-users', 'fa-globe', 'fa-flask', 'fa-chart-bar', 'fa-award',
    'fa-university', 'fa-search', 'fa-handshake',
];
$iconColors = ['icon-purple','icon-blue','icon-green','icon-orange','icon-red'];
?>
<style> 
 :root {
        --primary: #5b21b6;
        --primary-light: #7c3aed;
        --primary-dark: #4c1d95;
        --secondary: #0ea5e9;
        --success: #10b981;
        --warning: #f59e0b;
        --danger: #ef4444;
        --dark: #1e293b;
        --light: #f8fafc;
        --gray-50: #f9fafb;
        --gray-100: #f3f4f6;
        --gray-200: #e5e7eb;
        --gray-300: #d1d5db;
        --gray-600: #4b5563;
        --gray-700: #374151;
        --gray-800: #1f2937;
        --gray-900: #111827;
    }
  .sidebar {
        width: 100%;
    }
    
    @media (min-width: 1024px) {
        .sidebar {
            width: 25%;
            flex-shrink: 0;
        }
    }
    
     /* Card */
    .card {
        background: white;
        border-radius: 16px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: all 0.3s ease;
        margin-bottom: 1.5rem;
    }
    
    .card:hover {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }
    
    .card-header {
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--gray-200);
        background: var(--gray-50);
    }
    
    .card-header-purple {
        background: var(--primary);
        color: white;
        border: none;
    }
    
    .card-header-blue {
        background: var(--secondary);
        color: white;
        border: none;
    }
    
    .card-header-orange {
        background: var(--warning);
        color: white;
        border: none;
    }
    
    .card-title {
        font-size: 1.25rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    
    .card-body {
        padding: 0;
    }
    
    /* Navigation */
    .nav-list {
        list-style: none;
    }
    
    .nav-item {
        position: relative;
        border-bottom: 1px solid var(--gray-100);
    }
    
    .nav-item:last-child {
        border-bottom: none;
    }
    
    .nav-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem 1.5rem;
        color: var(--gray-700);
        text-decoration: none;
        transition: all 0.2s ease;
        font-weight: 500;
        position: relative;
    }
    
    .nav-link::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--primary);
        transform: scaleY(0);
        transition: transform 0.2s ease;
    }
    
    .nav-link:hover,
    .nav-item.active .nav-link {
        background: #faf5ff;
        color: var(--primary);
    }
    
    .nav-link:hover::before,
    .nav-item.active .nav-link::before {
        transform: scaleY(1);
    }
    
    .nav-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        color: white;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }
    
    .nav-link:hover .nav-icon {
        transform: scale(1.1);
    }
    
    .icon-purple { background: var(--primary); }
    .icon-blue { background: var(--secondary); }
    .icon-green { background: var(--success); }
    .icon-orange { background: var(--warning); }
    .icon-red { background: var(--danger); }
    
        /* Stats Card in Sidebar */
    .stats-card {
        background: var(--primary);
        border-radius: 16px;
        padding: 1.5rem;
        color: white;
        margin-top: 1.5rem;
    }
    
    .stats-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .stats-header i {
        font-size: 2rem;
    }
    
    .stats-label {
        font-size: 0.875rem;
        opacity: 0.9;
    }
    
    .stats-value {
        font-size: 2rem;
        font-weight: 700;
    }
    
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        margin-top: 1rem;
    }
    
    .stats-item {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        padding: 0.875rem;
        backdrop-filter: blur(10px);
    }
    
    .stats-item-label {
        font-size: 0.75rem;
        opacity: 0.9;
    }
    
    .stats-item-value {
        font-size: 1.25rem;
        font-weight: 700;
    }
    
</style> 

<!-- ════════════════════════════════════════════ SIDEBAR -->
<aside class="sidebar">

    <!-- Navigation Card -->
    <div class="card">
        <div class="card-header card-header-purple">
            <div class="card-title">
                <i class="fas fa-bars"></i>
                Quick Navigation
            </div>
        </div>
        <div class="card-body">
            <ul class="nav-list">
                <?php if (empty($sidebarPages)): ?>
                <li class="nav-item">
                    <span class="nav-link" style="color:#9ca3af;font-size:.875rem;">
                        <i class="fas fa-info-circle" style="margin-right:.5rem;"></i>
                        No pages published yet
                    </span>
                </li>
                <?php else: ?>
                <?php foreach ($sidebarPages as $i => $p): ?>
                <li class="nav-item <?= ($p['slug'] === $currentSlug) ? 'active' : '' ?>">
                    <!--<a href="<?= urlencode($p['slug']) ?>" class="nav-link">-->
                    <a href="/journals/social-science/<?= urlencode($p['slug']) ?>" class="nav-link">
                        <span class="nav-icon <?= $iconColors[$i % count($iconColors)] ?>">
                            <i class="fas <?= $icons[$i % count($icons)] ?>"></i>
                        </span>
                        <?= htmlspecialchars($p['title']) ?>
                    </a>
                </li>
                <?php endforeach; ?>
                <?php endif; ?>
                <li class="nav-item">
                    <a href="https://communeglobal.com/apply-as-reviewer.php" class="nav-link">
                        <span class="nav-icon <?= $iconColors[$i % count($iconColors)] ?>" >
                            <i class="fas fa-users"></i>
                        </span>
                        Apply as Reviewer
                    </a>
                </li>
                <li class="nav-item">
                    <a href="https://communeglobal.com/join-as-editorial-board-member.php" class="nav-link">
                        <span class="nav-icon <?= $iconColors[$i % count($iconColors)] ?>" >
                            <i class="fas fa-users"></i>
                        </span>
                        Join as Editor
                    </a>
                </li>
                <li class="nav-item">
                    <a href="https://communeglobal.com/conference-proceedings.php" class="nav-link">
                        <span class="nav-icon <?= $iconColors[$i % count($iconColors)] ?>" >
                            <i class="fas fa-users"></i>
                        </span>
                        Conference Proceedings
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- Stats Card (live counts from DB) -->
    <?php
    $totalPages     = 0;
    $publishedCount = 0;
    if ($pdo) {
        try {
            $row = $pdo->query(
                "SELECT COUNT(*) AS total,
                        SUM(status='published') AS published
                 FROM pages"
            )->fetch();
            $totalPages     = $row['total']     ?? 0;
            $publishedCount = $row['published'] ?? 0;
        } catch (PDOException $e) {}
    }
    ?>
    <div class="stats-card" style="display:none;">
        <div class="stats-header">
            <i class="fas fa-chart-bar"></i>
            <div>
                <div class="stats-label">Communeglobal Content</div>
                <!--<div class="stats-value"><?= $publishedCount ?> Pages</div>-->
            </div>
        </div>
        <div class="stats-grid">
            <div class="stats-item">
                <div class="stats-item-label">Published</div>
                <div class="stats-item-value"><?= $publishedCount ?></div>
            </div>
            <div class="stats-item">
                <div class="stats-item-label">Total</div>
                <div class="stats-item-value"><?= $totalPages ?></div>
            </div>
            <div class="stats-item">
                <div class="stats-item-label">Open Access</div>
                <div class="stats-item-value">100%</div>
            </div>
            <div class="stats-item">
                <div class="stats-item-label">Peer Review</div>
                <div class="stats-item-value">Yes</div>
            </div>
        </div>
    </div>

</aside>
<!-- ════════════════════════════════════════════ /SIDEBAR -->