<?php
/**
 * Template Page Content untuk Information, Help, Librarian
 * Path: plugins/multi_opac_path/template/page_content.tpl
 * Version: 1.0.0
 * 
 * KONSEP: Template untuk halaman konten per perpustakaan
 * Digunakan oleh: libinfo, help, librarian
 */

if (!defined('INDEX_AUTH')) {
    die("Direct access not allowed");
}

// ============================================================
// DATA YANG DITERIMA DARI MAIN PLUGIN
// ============================================================
// $pageTitle    - Judul halaman (Information, Help, Librarian)
// $contentType  - Tipe konten (information, help, librarian)
// $contents     - Array konten dari database
// $library      - Array data perpustakaan
// $theme        - Array tema perpustakaan
// $library_name - Nama perpustakaan
// $library_slug - Slug perpustakaan
// $library_id   - ID perpustakaan

// ============================================================
// AMBIL DATA DARI GLOBAL
// ============================================================
$pageTitle = $data['page_title'] ?? ucfirst($contentType);
$contentType = $data['content_type'] ?? 'information';
$contents = $data['contents'] ?? [];
$library = $data['library'] ?? null;
$theme = $data['theme'] ?? [];

$library_name = $library['library_name'] ?? 'Perpustakaan';
$library_slug = $library['url_slug'] ?? 'pusat';
$library_id = $library['library_id'] ?? 1;

// ============================================================
// AMBIL SEMUA LIBRARY UNTUK DROPDOWN
// ============================================================
$allLibraries = getAllLibraries();
$config = getMultiOpacConfig();
$enableSwitcher = $config['enable_library_switcher'] ?? 1;
$showBadge = $config['show_library_badge'] ?? 1;

// ============================================================
// TEMA DATA
// ============================================================
$themeData = $theme ?: [
    'primary_color' => '#0d6efd',
    'secondary_color' => '#212529',
    'header_text' => $library_name,
    'footer_text' => '© ' . date('Y') . ' ' . $library_name,
    'logo' => ''
];

// ============================================================
// ICON BERDASARKAN TIPE KONTEN
// ============================================================
$icons = [
    'information' => 'fa-solid fa-circle-info',
    'help' => 'fa-solid fa-question-circle',
    'librarian' => 'fa-solid fa-users'
];
$icon = $icons[$contentType] ?? 'fa-solid fa-file';

// ============================================================
// DESKRIPSI BERDASARKAN TIPE KONTEN
// ============================================================
$descriptions = [
    'information' => 'Informasi dan pengumuman resmi dari perpustakaan.',
    'help' => 'Panduan dan bantuan penggunaan layanan perpustakaan.',
    'librarian' => 'Daftar pustakawan yang bertugas di perpustakaan.'
];
$description = $descriptions[$contentType] ?? '';

// ============================================================
// TAMPILKAN PUSTAKAWAN (KHUSUS LIBRARIAN)
// ============================================================
if ($contentType == 'librarian') {
    $librarians = getLibrariansByLibrary($library_id, 50);
    $contents = $librarians;
}

?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($pageTitle) ?> | <?= htmlspecialchars($library_name) ?></title>
    <meta name="description" content="<?= htmlspecialchars($pageTitle) ?> - <?= htmlspecialchars($library_name) ?>">
    
    <!-- 1. Font Awesome dari SLiMS -->
    <link rel="stylesheet" href="<?= SWB ?>template/default/assets/plugin/font-awesome/css/fontawesome-all.min.css">
    
    <!-- 2. Bootstrap CSS -->
    <link href="<?= SWB ?>template/default/assets/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- 3. CSS Kustom -->
    <link rel="stylesheet" href="<?= SWB ?>plugins/multi_opac_path/assets/css/opac-style.css">
    
    <!-- 4. CSS Variables Dinamis -->
    <style>
        :root {
            --primary-color: <?= htmlspecialchars($themeData['primary_color']) ?>;
            --secondary-color: <?= htmlspecialchars($themeData['secondary_color']) ?>;
            --primary-light: color-mix(in srgb, var(--primary-color) 92%, white);
            --primary-dark: color-mix(in srgb, var(--primary-color) 70%, black);
        }
        
        /* ============================================================
        NAVBAR STYLE (KONSISTEN)
        ============================================================ */
        .navbar-custom {
            background: var(--primary-color);
            padding: 10px 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .navbar-custom .navbar-brand {
            color: white !important;
            font-weight: bold;
        }
        .navbar-custom .navbar-brand:hover {
            color: white !important;
        }
        .navbar-custom .nav-link {
            color: rgba(255,255,255,0.85) !important;
            transition: color 0.2s;
        }
        .navbar-custom .nav-link:hover,
        .navbar-custom .nav-link.active {
            color: white !important;
        }
        .navbar-custom .nav-link.active {
            font-weight: bold;
            border-bottom: 2px solid white;
        }
        .navbar-custom .dropdown-toggle {
            color: white !important;
            background: rgba(255,255,255,0.15);
            border: none;
            border-radius: 20px;
            padding: 6px 16px;
            transition: background 0.2s;
        }
        .navbar-custom .dropdown-toggle:hover {
            background: rgba(255,255,255,0.25);
        }
        .library-dropdown .dropdown-item {
            padding: 8px 20px;
            transition: background 0.2s;
        }
        .library-dropdown .dropdown-item:hover {
            background: var(--primary-light);
        }
        .library-dropdown .dropdown-item.active {
            background: var(--primary-light);
            font-weight: bold;
        }
        
        /* ============================================================
        PAGE HEADER
        ============================================================ */
        .page-header {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            color: white;
            padding: 50px 0 60px;
            margin-bottom: 40px;
        }
        .page-header .header-icon {
            font-size: 3.5rem;
            margin-bottom: 12px;
            opacity: 0.9;
        }
        .page-header h1 {
            font-weight: 700;
            font-size: 2.5rem;
        }
        .page-header .breadcrumb {
            background: transparent;
            padding: 0;
            justify-content: center;
        }
        .page-header .breadcrumb-item a {
            color: rgba(255,255,255,0.7);
            text-decoration: none;
            transition: color 0.2s;
        }
        .page-header .breadcrumb-item a:hover {
            color: white;
        }
        .page-header .breadcrumb-item.active {
            color: rgba(255,255,255,0.9);
        }
        .page-header .breadcrumb-item + .breadcrumb-item::before {
            color: rgba(255,255,255,0.5);
        }
        
        /* ============================================================
        CARD STYLE
        ============================================================ */
        .card-modern {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            border: 1px solid #f0f0f0;
            transition: transform 0.2s, box-shadow 0.2s;
            height: 100%;
        }
        .card-modern:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        }
        .card-modern .card-body {
            padding: 20px;
        }
        .card-modern .card-title {
            font-weight: 700;
            color: var(--secondary-color);
            margin-bottom: 8px;
        }
        .card-modern .card-text {
            color: #6c757d;
            font-size: 0.95rem;
            line-height: 1.6;
        }
        .card-modern .card-meta {
            font-size: 0.8rem;
            color: #999;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid #f0f0f0;
        }
        
        /* ============================================================
        LIBRARIAN CARD
        ============================================================ */
        .librarian-card {
            text-align: center;
            padding: 20px;
        }
        .librarian-card .avatar {
            width: 80px;
            height: 80px;
            background: var(--primary-light);
            color: var(--primary-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            margin: 0 auto 12px;
        }
        .librarian-card .librarian-name {
            font-weight: 700;
            color: var(--secondary-color);
            margin-bottom: 4px;
        }
        .librarian-card .librarian-role {
            font-size: 0.85rem;
            color: #999;
        }
        .librarian-card .library-badge {
            display: inline-block;
            background: var(--primary-light);
            color: var(--primary-color);
            font-size: 0.65rem;
            padding: 2px 12px;
            border-radius: 20px;
            font-weight: 600;
            margin-top: 8px;
        }
        
        /* ============================================================
        EMPTY STATE
        ============================================================ */
        .empty-state {
            padding: 60px 20px;
            text-align: center;
            background: white;
            border-radius: 12px;
            border: 1px solid #f0f0f0;
        }
        .empty-state .empty-icon {
            font-size: 4rem;
            opacity: 0.3;
            color: var(--primary-color);
            margin-bottom: 16px;
        }
        .empty-state h4 {
            color: var(--secondary-color);
        }
        .empty-state p {
            color: #999;
        }
        
        /* ============================================================
        FOOTER
        ============================================================ */
        .landing-footer {
            background: var(--secondary-color);
            padding: 30px 0;
            margin-top: 50px;
            color: rgba(255,255,255,0.7);
        }
        .landing-footer .text-white {
            color: white !important;
        }
        .landing-footer small {
            color: rgba(255,255,255,0.5);
        }
        
        /* ============================================================
        RESPONSIVE
        ============================================================ */
        @media (max-width: 768px) {
            .page-header {
                padding: 30px 0 35px;
            }
            .page-header h1 {
                font-size: 1.5rem;
            }
            .page-header .header-icon {
                font-size: 2.5rem;
            }
            .navbar-custom .navbar-brand {
                font-size: 1rem;
            }
            .librarian-card .avatar {
                width: 60px;
                height: 60px;
                font-size: 1.8rem;
            }
        }
        
        @media (max-width: 576px) {
            .page-header h1 {
                font-size: 1.2rem;
            }
            .card-modern .card-body {
                padding: 16px;
            }
        }
    </style>
</head>
<body>

<!-- ============================================================
NAVBAR
============================================================ -->
<nav class="navbar navbar-custom navbar-expand-lg">
    <div class="container">
        <!-- Brand -->
        <a class="navbar-brand" href="<?= buildLibraryUrl('multi-opac', $library_slug) ?>">
            <?php if (!empty($themeData['logo'])): ?>
                <img src="<?= htmlspecialchars($themeData['logo']) ?>" alt="Logo" height="35" class="me-2">
            <?php endif; ?>
            <?= htmlspecialchars($themeData['header_text']) ?>
        </a>
        
        <!-- Toggler -->
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        
        <!-- Menu -->
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link" href="<?= buildLibraryUrl('multi-opac', $library_slug) ?>">
                        <i class="fa-solid fa-house"></i> Home
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <?= ($contentType == 'information') ? 'active' : '' ?>" 
                       href="<?= buildLibraryUrl('libinfo', $library_slug) ?>">
                        <i class="fa-solid fa-circle-info"></i> Information
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <?= ($contentType == 'help') ? 'active' : '' ?>" 
                       href="<?= buildLibraryUrl('help', $library_slug) ?>">
                        <i class="fa-solid fa-question-circle"></i> Help
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <?= ($contentType == 'librarian') ? 'active' : '' ?>" 
                       href="<?= buildLibraryUrl('librarian', $library_slug) ?>">
                        <i class="fa-solid fa-users"></i> Librarian
                    </a>
                </li>
            </ul>
            
            <!-- Dropdown Perpustakaan -->
            <?php if ($enableSwitcher && count($allLibraries) > 0): ?>
                <div class="dropdown library-dropdown">
                    <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown">
                        <i class="fa-solid fa-building-columns"></i> 
                        <?= htmlspecialchars($library_name) ?>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li>
                            <a class="dropdown-item" href="<?= buildLibraryUrl('multi-opac') ?>">
                                <i class="fa-solid fa-globe me-2"></i> Semua Perpustakaan
                            </a>
                        </li>
                        <li><hr class="dropdown-divider"></li>
                        <?php foreach ($allLibraries as $lib): ?>
                            <?php $slug = $lib['url_slug'] ?? $lib['library_id']; ?>
                            <li>
                                <a class="dropdown-item <?= ($slug == $library_slug) ? 'active' : '' ?>" 
                                   href="<?= buildLibraryUrl($contentType == 'librarian' ? 'librarian' : ($contentType == 'help' ? 'help' : 'libinfo'), $slug) ?>">
                                    <?php if ($slug == $library_slug): ?>
                                        <i class="fa-solid fa-check text-primary me-2"></i>
                                    <?php else: ?>
                                        <i class="fa-solid fa-building me-2"></i>
                                    <?php endif; ?>
                                    <?= htmlspecialchars($lib['library_name']) ?>
                                </a>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                </div>
            <?php endif; ?>
        </div>
    </div>
</nav>

<!-- ============================================================
PAGE HEADER
============================================================ -->
<header class="page-header">
    <div class="container text-center">
        <div class="header-icon"><i class="<?= $icon ?>"></i></div>
        <h1><?= htmlspecialchars($pageTitle) ?></h1>
        <?php if (!empty($description)): ?>
            <p class="lead text-white-50"><?= htmlspecialchars($description) ?></p>
        <?php endif; ?>
        
        <!-- Breadcrumb -->
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="<?= buildLibraryUrl('multi-opac', $library_slug) ?>">
                        <i class="fa-solid fa-house"></i> Home
                    </a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">
                    <?= htmlspecialchars($pageTitle) ?>
                </li>
            </ol>
        </nav>
    </div>
</header>

<!-- ============================================================
MAIN CONTENT
============================================================ -->
<main class="container my-4">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            
            <!-- ============================================================
            LIBRARIAN (KHUSUS TIPE LIBRARIAN)
            ============================================================ -->
            <?php if ($contentType == 'librarian'): ?>
                
                <?php if (count($contents) > 0): ?>
                    <div class="row g-4">
                        <?php foreach ($contents as $l): ?>
                            <div class="col-6 col-md-4 col-lg-3">
                                <div class="card-modern librarian-card">
                                    <div class="avatar">
                                        <i class="fa-solid fa-user"></i>
                                    </div>
                                    <h6 class="librarian-name"><?= htmlspecialchars($l['realname'] ?? 'Pustakawan') ?></h6>
                                    <div class="librarian-role">Staf Perpustakaan</div>
                                    <?php if ($showBadge && !empty($l['library_id'])): ?>
                                        <span class="library-badge">
                                            <?= htmlspecialchars(getLibraryNameById($l['library_id'])) ?>
                                        </span>
                                    <?php endif; ?>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php else: ?>
                    <div class="empty-state">
                        <div class="empty-icon"><i class="fa-solid fa-users-slash"></i></div>
                        <h4 class="fw-normal"><?= __('Belum ada data pustakawan.') ?></h4>
                        <p><?= __('Pustakawan akan ditampilkan setelah diaktifkan oleh administrator.') ?></p>
                    </div>
                <?php endif; ?>
                
            <!-- ============================================================
            INFORMATION / HELP (KONTEN BIASA)
            ============================================================ -->
            <?php else: ?>
                
                <?php if (count($contents) > 0): ?>
                    <div class="row g-4">
                        <?php foreach ($contents as $c): ?>
                            <div class="col-md-6 col-lg-4">
                                <div class="card-modern">
                                    <div class="card-body">
                                        <?php if ($showBadge && !empty($c['library_id']) && $c['library_id'] == 1): ?>
                                            <span class="library-badge d-inline-block mb-2">Global</span>
                                        <?php endif; ?>
                                        <h5 class="card-title"><?= htmlspecialchars($c['title'] ?? 'Tanpa Judul') ?></h5>
                                        <p class="card-text">
                                            <?= substr(strip_tags(html_entity_decode($c['content'] ?? '')), 0, 150) ?>...
                                        </p>
                                        <div class="card-meta">
                                            <i class="fa-regular fa-clock me-1"></i>
                                            <?php 
                                            $date = $c['created_at'] ?? $c['input_date'] ?? '';
                                            echo !empty($date) ? date('d-m-Y', strtotime($date)) : '-';
                                            ?>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php else: ?>
                    <div class="empty-state">
                        <div class="empty-icon"><i class="<?= $icon ?>"></i></div>
                        <h4 class="fw-normal"><?= __('Belum ada konten untuk halaman ini.') ?></h4>
                        <p><?= __('Konten akan ditambahkan oleh administrator perpustakaan.') ?></p>
                    </div>
                <?php endif; ?>
                
            <?php endif; ?>
            
            <!-- ============================================================
            TOTAL INFO
            ============================================================ -->
            <div class="text-center text-muted small mt-4">
                <i class="fa-regular fa-circle-info me-1"></i>
                <?= __('Menampilkan') ?> <strong><?= count($contents) ?></strong> 
                <?= $contentType == 'librarian' ? __('pustakawan') : __('konten') ?> 
                <?= __('untuk') ?> <strong><?= htmlspecialchars($library_name) ?></strong>
            </div>
            
        </div>
    </div>
</main>

<!-- ============================================================
FOOTER
============================================================ -->
<footer class="landing-footer text-center">
    <div class="container">
        <p class="mb-1 text-white fw-semibold"><?= htmlspecialchars($themeData['footer_text']) ?></p>
        <small>
            Multi OPAC Path v1.0 | <?= htmlspecialchars($library_name) ?>
            <?php if ($config['auto_create_theme'] ?? 0): ?>
                | <span class="text-success"><i class="fa-solid fa-wand-magic-sparkles"></i> Auto Theme ON</span>
            <?php endif; ?>
        </small>
    </div>
</footer>

<!-- ============================================================
SCRIPTS
============================================================ -->

<!-- 1. JQUERY - LOAD SATU KALI DI ATAS BOOTSTRAP -->
<script src="<?= SWB ?>template/default/assets/js/jquery.min.js"></script>

<!-- 2. BOOTSTRAP JS -->
<script src="<?= SWB ?>template/default/assets/js/bootstrap.bundle.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('✅ jQuery:', typeof jQuery !== 'undefined' ? 'Loaded' : 'NOT loaded');
    console.log('✅ Bootstrap:', typeof bootstrap !== 'undefined' ? 'Loaded' : 'NOT loaded');
});
</script>

</body>
</html>