<?php
$eventsFile = "admin/events.json";
$events = [];
if(file_exists($eventsFile)){
    $events = json_decode(file_get_contents($eventsFile), true);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>School News | Our Lady of Perpetual Help Schools</title>
<meta name="description" content="Latest school news, events and learning resources">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="images/favicon.ico">
<style>

.news-page{
    padding:120px 20px 60px;
    background:#f7f7f7;
}

.news-container{
    max-width:1200px;
    margin:auto;
}

.news-title{
    text-align:center;
    margin-bottom:40px;
}

.news-title h1{
    font-size:36px;
    margin-bottom:10px;
}

/* Filter tabs */
.filter-tabs{
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:36px;
}

.filter-btn{
    padding:9px 22px;
    border-radius:30px;
    border:2px solid #ddd;
    background:white;
    cursor:pointer;
    font-size:14px;
    font-weight:600;
    transition:.2s;
    font-family:inherit;
}

.filter-btn:hover,
.filter-btn.active{
    background:#2E7D32;
    border-color:#2E7D32;
    color:white;
}

/* Grid */
.news-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
    gap:28px;
}

.news-card{
    background:white;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(0,0,0,0.08);
    transition:transform .25s, box-shadow .25s;
    display:flex;
    flex-direction:column;
}

.news-card:hover{
    transform:translateY(-5px);
    box-shadow:0 16px 36px rgba(0,0,0,0.12);
}

/* Media area */
.card-media{
    position:relative;
    width:100%;
    height:220px;
    background:#f0f4f0;
    overflow:hidden;
    flex-shrink:0;
}

/* Image */
.card-media img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

/* Video */
.card-media video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* Audio placeholder */
.media-placeholder{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.media-placeholder .big-icon{
    font-size:56px;
    line-height:1;
}

.media-placeholder p{
    font-size:13px;
    color:#999;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
}

.audio-bg{ background:linear-gradient(135deg,#F3E5F5,#E8EAF6); }
.pdf-bg  { background:linear-gradient(135deg,#FCE4EC,#FFF8E1); }

/* Audio player inside placeholder */
.card-media audio{
    width:90%;
    position:absolute;
    bottom:12px;
    left:5%;
}

/* Media type badge */
.media-badge{
    position:absolute;
    top:12px;
    left:12px;
    padding:4px 10px;
    border-radius:20px;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.badge-image{ background:rgba(21,101,192,.85); color:white; }
.badge-audio{ background:rgba(106,27,154,.85); color:white; }
.badge-video{ background:rgba(230,81,0,.85);  color:white; }
.badge-pdf  { background:rgba(136,14,79,.85); color:white; }

/* Content */
.news-content{
    padding:20px;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.news-content h3{
    font-size:18px;
    font-weight:700;
    line-height:1.3;
    color:#1a1a1a;
}

.news-content p{
    font-size:14px;
    color:#555;
    line-height:1.6;
    flex:1;
}

.card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:4px;
}

.news-date{
    font-size:12px;
    color:#999;
    display:flex;
    align-items:center;
    gap:5px;
}

/* PDF download button */
.pdf-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 14px;
    background:#2E7D32;
    color:white;
    border-radius:8px;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
    transition:background .2s;
}

.pdf-btn:hover{ background:#1B5E20; }

/* Empty state */
.empty-state{
    text-align:center;
    padding:60px 20px;
    color:#aaa;
    width:100%;
}
.empty-state .icon{ font-size:60px; margin-bottom:16px; }

/* hidden cards for filter */
.news-card.hidden{ display:none; }

</style>
</head>

<body>

<header>
<nav id="navbar">
<div class="container-nav">

<a style="text-decoration:none;" href="index.html" class="nav-brand">
<div class="logo">
<img src="images/logo.png" alt="Our Lady of Perpetual Help">
<h1>Our Lady of Perpetual Help Schools</h1>
</div>
</a>

<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="managememt.html">Staff</a></li>
<li><a href="academics.html">Academics</a></li>
<li><a href="news.php">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="portal.html">Portal</a></li>
</ul>

<div class="hamburger"><span></span><span></span><span></span></div>

</div>
</nav>
</header>

<section class="news-page">
<div class="news-container">

    <div class="news-title">
        <h1>School News &amp; Resources</h1>
        <p>Stay updated with events, announcements and learning materials</p>
    </div>

    <!-- Filter Tabs -->
    <div class="filter-tabs">
        <button class="filter-btn active" onclick="filterCards('all',this)">📋 All</button>
        <button class="filter-btn" onclick="filterCards('image',this)">🖼️ Photos</button>
        <button class="filter-btn" onclick="filterCards('audio',this)">🎵 Audio</button>
        <button class="filter-btn" onclick="filterCards('video',this)">🎬 Video</button>
        <button class="filter-btn" onclick="filterCards('pdf',this)">📄 Textbooks</button>
    </div>

    <div class="news-grid" id="newsGrid">

    <?php if(!empty($events)): ?>
    <?php foreach(array_reverse($events) as $event):
        $type = $event['media_type'] ?? 'image';
        $media = htmlspecialchars($event['media']);
        $title = htmlspecialchars($event['title']);
        $desc  = htmlspecialchars($event['description']);
        $date  = htmlspecialchars($event['date']);

        $badgeLabels = [
            'image'=>'📷 Photo',
            'audio'=>'🎵 Audio',
            'video'=>'🎬 Video',
            'pdf'  =>'📄 PDF'
        ];
    ?>

    <div class="news-card" data-type="<?= $type ?>">

        <div class="card-media">

            <!-- Badge -->
            <span class="media-badge badge-<?= $type ?>">
                <?= $badgeLabels[$type] ?? $type ?>
            </span>

            <?php if($type === 'image'): ?>
                <img src="<?= $media ?>" alt="<?= $title ?>">

            <?php elseif($type === 'video'): ?>
                <video controls preload="metadata">
                    <source src="<?= $media ?>">
                    Your browser does not support video.
                </video>

            <?php elseif($type === 'audio'): ?>
                <div class="media-placeholder audio-bg">
                    <div class="big-icon">🎵</div>
                    <p>Audio File</p>
                    <audio controls preload="metadata">
                        <source src="<?= $media ?>">
                        Your browser does not support audio.
                    </audio>
                </div>

            <?php elseif($type === 'pdf'): ?>
                <div class="media-placeholder pdf-bg">
                    <div class="big-icon">📄</div>
                    <p>PDF Textbook</p>
                </div>

            <?php endif; ?>

        </div>

        <div class="news-content">
            <h3><?= $title ?></h3>
            <p><?= $desc ?></p>
            <div class="card-footer">
                <div class="news-date">
                    <i class="fa fa-calendar"></i> <?= $date ?>
                </div>
                <?php if($type === 'pdf'): ?>
                    <a href="<?= $media ?>" target="_blank" class="pdf-btn">
                        <i class="fas fa-download"></i> Open PDF
                    </a>
                <?php endif; ?>
            </div>
        </div>

    </div>

    <?php endforeach; ?>

    <?php else: ?>
        <div class="empty-state">
            <div class="icon">📭</div>
            <p>No content posted yet. Check back soon!</p>
        </div>
    <?php endif; ?>

    </div><!-- /news-grid -->

</div>
</section>

<footer>
<div class="container">
<div class="footer-content">

<div class="footer-section">
<h3>The Our Lady of Perpetual Help Schools</h3>
<p>Excellence is our Target</p>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>

<div class="footer-section">
<h3>Quick Links</h3>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="academics.html">Academics</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="portal.html">Result Portal</a></li>
</ul>
</div>

<div class="footer-section">
<h3>Contact Info</h3>
<p><i class="fas fa-map-marker-alt"></i> Edupfuinyima Ishieke village, Ndegu Ishieke, Ebonyi LGA Ebonyi State.</p>
<p><i class="fas fa-phone"></i> +2347033378417</p>
<p><i class="fas fa-envelope"></i> info@ourladyofperpetualhelp.com</p>
</div>

</div>
<div class="footer-bottom">
<p>&copy; 2026 Our Lady of Perpetual Help Schools. All rights reserved.</p>
</div>
</div>
</footer>

<script src="js/script.js"></script>
<script>
function filterCards(type, btn){
    document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');

    document.querySelectorAll('.news-card').forEach(card => {
        if(type === 'all' || card.dataset.type === type){
            card.classList.remove('hidden');
        } else {
            card.classList.add('hidden');
        }
    });
}
</script>

</body>
</html>
