<?= $this->extend('layout/default') ?>

<?= $this->section('content') ?>
<div class="slider-area">
    <div class="slider-active owl-carousel">
        <?php foreach ($sliders as $s) : ?>
        <div class="single-slider slider-height-1 bg-img" style="background-image:url(<?= base_url('assets/img/slider/' . $s['foto']) ?>);">
            <div class="container">
                <div class="row">
                    <div class="col-lg-9">
                        <div class="slider-content slider-animated-1 pt-230">
                            <h1 class="animated"><?= $s['judul'] ?></h1>
                            <p class="animated"><?= $s['deskripsi'] ?></p>
                            <div class="slider-btn">
                                <a class="animated default-btn btn-green-color" href="<?= base_url('profil/sejarah') ?>">JELAJAHI PROFIL</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
</div>

<div class="about-us pt-130 pb-130">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="about-content">
                    <div class="section-title section-title-green mb-30">
                        <h2>Tentang <span>Kami</span></h2>
                    </div>
                    <p>SMKN 1 Sukalarang (Negla) adalah lembaga pendidikan kejuruan yang berdedikasi untuk mencetak tenaga kerja profesional, berkarakter Pancawaluya, dan siap menghadapi tantangan industri global.</p>
                    <div class="about-btn mt-45">
                        <a class="default-btn" href="<?= base_url('profil/sejarah') ?>">BACA SELENGKAPNYA</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="about-img default-overlay shadow rounded">
                    <img src="<?= base_url('assets/img/banner/gedung.png') ?>" alt="Gedung Sekolah">
                </div>
            </div>
        </div>
    </div>
</div>

<div class="blog-area pt-100 pb-100 bg-gray">
    <div class="container">
        <div class="section-title text-center mb-60">
            <h2>Berita <span>Terbaru</span></h2>
            <p>Ikuti perkembangan kegiatan dan prestasi terbaru di SMKN 1 Sukalarang</p>
        </div>
        <div class="row">
            <?php if (!empty($berita_terbaru)) : ?>
                <?php foreach ($berita_terbaru as $b) : ?>
                    <div class="col-lg-4 col-md-6">
                        <div class="blog-wrapper mb-30 shadow-sm bg-white">
                            <div class="blog-img">
                                <a href="<?= base_url('berita/' . $b['slug']) ?>">
                                    <img src="<?= base_url('assets/img/berita/' . ($b['gambar'] ?: 'default.jpg')) ?>" alt="<?= $b['judul'] ?>" style="width: 100%; height: 250px; object-fit: cover;">
                                </a>
                                <div class="blog-date-2">
                                    <span><?= date('d M', strtotime($b['tanggal_post'])) ?></span>
                                </div>
                            </div>
                            <div class="blog-content-2 p-4">
                                <h4><a href="<?= base_url('berita/' . $b['slug']) ?>"><?= $b['judul'] ?></a></h4>
                                <p><?= character_limiter(strip_tags($b['ringkasan']), 100) ?></p>
                                <div class="blog-btn-2 mt-20">
                                    <a href="<?= base_url('berita/' . $b['slug']) ?>" class="text-success fw-bold">Selengkapnya →</a>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php else : ?>
                <div class="col-12 text-center">
                    <p class="text-muted fst-italic">Belum ada berita terbaru yang diterbitkan.</p>
                </div>
            <?php endif; ?>
        </div>
        <div class="text-center mt-40">
            <a href="<?= base_url('berita') ?>" class="default-btn">LIHAT SEMUA BERITA</a>
        </div>
    </div>
</div>

<style>
    .bg-gray { background-color: #fcfcfc; }
    .blog-wrapper { transition: 0.3s; border-radius: 8px; overflow: hidden; }
    .blog-wrapper:hover { transform: translateY(-10px); }
    .text-success { color: #28a745 !important; }
    .blog-date-2 { position: absolute; top: 10px; right: 10px; background: #28a745; color: #fff; padding: 5px 15px; border-radius: 5px; font-weight: bold; }
</style>
<script>
    // Gunakan window.onload agar berjalan PALING AKHIR setelah semua script tema
    window.onload = function() {
        if (window.jQuery) {
            var $j = jQuery.noConflict();
            var $slider = $j('.slider-active');
            
            if ($slider.length > 0) {
                // 1. Matikan slider yang macet
                $slider.trigger('stop.owl.autoplay');
                
                // 2. Setel ulang opsi internal Owl Carousel secara paksa
                $slider.owlCarousel('destroy'); 
                
                $slider.owlCarousel({
                    items: 1,
                    loop: true,
                    nav: true,
                    dots: true,
                    autoplay: true,
                    autoplayTimeout: 5000,
                    autoplayHoverPause: false, // Tetap jalan meski mouse di atasnya
                    animateOut: 'fadeOut',
                    animateIn: 'fadeIn',
                    navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>']
                });

                // 3. Paksa 'Play' secara manual
                $slider.trigger('play.owl.autoplay', [5000]);
                console.log("Slider Force Start: Berhasil dipaksa jalan.");
            }
        }
    };
</script>
<?= $this->endSection() ?>