<?php
use App\Models\Berita_model;
$m_berita = new Berita_model();
$sidebar  = $m_berita->sidebar();
?>
<?= $this->extend('layout/wrapper') ?>

<?= $this->section('style') ?>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700;800&display=swap" rel="stylesheet">
<style>
    :root {
        --neo-bg: #FDF4E3;          
        --neo-dark: #181818; 
        --neo-red: #D41343;          
        --neo-yellow: #FFD13B;      
        --neo-pink: #FFB3C6;        
        --neo-blue: #A2D2FF;
        --neo-green: #00B368;        
        --neo-white: #ffffff;
        
        --border-thick: 3px solid var(--neo-dark);
        --radius-medium: 16px;
    }

    body {
        font-family: 'Space Grotesk', sans-serif;
        color: var(--neo-dark);
        background-color: var(--neo-bg);
    }

    /* --- TYPOGRAPHY & HEADER --- */
    .neo-page-title {
        font-size: 3rem;
        font-weight: 800;
        text-transform: uppercase;
        color: var(--neo-dark);
        text-shadow: 4px 4px 0px var(--neo-yellow);
        letter-spacing: -1px;
        margin-bottom: 20px;
    }

    .badge-title {
        background: var(--neo-dark);
        color: var(--neo-white);
        padding: 8px 25px;
        border-radius: 50px;
        font-size: 1rem;
        font-weight: 800;
        display: inline-block;
        box-shadow: 4px 4px 0px var(--neo-red);
        transform: rotate(-2deg);
        border: 2px solid var(--neo-dark);
        text-transform: uppercase;
        margin-bottom: 15px;
    }

    /* --- NEO CARDS --- */
    .neo-card {
        background-color: var(--neo-white);
        border: var(--border-thick);
        border-radius: var(--radius-medium);
        padding: 25px;
        box-shadow: 8px 8px 0px var(--neo-dark);
        margin-bottom: 30px;
    }

    /* Konten Berita Utama */
    .main-article-img {
        width: 100%;
        border-radius: 12px;
        border: var(--border-thick);
        margin-bottom: 20px;
    }

    .main-article-title {
        font-size: 2rem;
        font-weight: 800;
        margin-bottom: 15px;
    }

    /* --- SIDEBAR --- */
    .sidebar-header {
        background-color: var(--neo-pink);
        padding: 15px;
        border: var(--border-thick);
        border-radius: 12px;
        margin-bottom: 20px;
        box-shadow: 4px 4px 0px var(--neo-dark);
        text-align: center;
        transform: rotate(1deg);
    }
    
    .sidebar-header h3 {
        margin: 0;
        font-weight: 800;
        font-size: 1.5rem;
    }

    .sidebar-item {
        border-bottom: 3px dashed var(--neo-dark);
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
    .sidebar-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .sidebar-item img {
        width: 100%;
        border: 2px solid var(--neo-dark);
        border-radius: 8px;
        box-shadow: 3px 3px 0px var(--neo-dark);
        transition: 0.2s;
    }
    
    .sidebar-item:hover img {
        transform: translate(-2px, -2px);
        box-shadow: 5px 5px 0px var(--neo-red);
    }

    .sidebar-item a {
        color: var(--neo-dark);
        text-decoration: none;
        font-weight: 700;
        transition: 0.2s;
    }
    .sidebar-item a:hover {
        color: var(--neo-red);
    }

    /* --- NEO BADGES --- */
    .neo-badge {
        display: inline-block;
        padding: 4px 10px;
        font-size: 0.8rem;
        font-weight: 800;
        border: 2px solid var(--neo-dark);
        border-radius: 20px;
        box-shadow: 2px 2px 0px var(--neo-dark);
        margin-top: 5px;
    }
    .badge-active { background-color: var(--neo-green); color: var(--neo-white); }
    .badge-inactive { background-color: var(--neo-red); color: var(--neo-white); }
</style>
<?= $this->endSection() ?>

<?= $this->section('content') ?>
<main id="main">
    <section id="contact" class="contact" style="padding-top: 140px; padding-bottom: 80px;">
        <div class="container">
            
            <div class="mb-4">
                <div class="badge-title">📌 INFO DETAIL</div>
                <h1 class="neo-page-title"><?= $title ?></h1>
            </div>

            <div class="row">
                <div class="col-md-8">
                    <div class="neo-card">
                        <?php if(!empty($berita['gambar'])) : ?>
                            <img src="<?= base_url('assets/upload/image/' . $berita['gambar']) ?>" alt="<?= $berita['judul_berita'] ?>" class="main-article-img">
                        <?php endif; ?>
                        
                        <div class="card-body px-0">
                            <h2 class="main-article-title"><?= $berita['judul_berita'] ?></h2>
                            <div class="article-content">
                                <?= $berita['isi'] ?>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="neo-card" style="background-color: var(--neo-yellow);">
                        
                        <div class="sidebar-header">
                            <h3>PROMO LAINNYA</h3>
                        </div>
                        
                        <div class="card-body px-0">
                            <?php foreach ($sidebar as $item) { ?>
                                <div class="row sidebar-item align-items-center">
                                    <div class="col-4">
                                        <?php if ($item['gambar'] === '') { ?>
                                            <img src="<?= icon() ?>" alt="icon">
                                        <?php } else { ?>
                                            <img src="<?= base_url('assets/upload/image/thumbs/' . $item['gambar']) ?>" alt="<?= $item['judul_berita'] ?>">
                                        <?php } ?>
                                    </div>
                                    <div class="col-8">
                                        <h4 style="font-size: 16px; margin-bottom: 5px; line-height: 1.3;">
                                            <a href="<?= base_url('berita/read/' . $item['slug_berita']) ?>">
                                                <?= $item['judul_berita'] ?>
                                            </a>
                                        </h4>
                                        <small style="font-weight: 600; opacity: 0.8;">
                                            <i class="fa fa-eye"></i> <?= $item['hits'] ?> views
                                        </small>
                                        <br>
                                        
                                        <?php if($item['tanggal_selesai'] < date('Y-m-d')): ?>
                                            <span class="neo-badge badge-inactive">Tidak Aktif</span>
                                        <?php else: ?>
                                            <span class="neo-badge badge-active">Promo Aktif</span>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            <?php } ?>
                        </div>

                    </div>
                </div>
            </div>
            
        </div>
    </section>
</main>
<?= $this->endSection() ?>