Default page

Viewing : home.php

<?= $this->extend('front-template'); ?>

<?= $this->section('head'); ?>
<style>
    /* Paksa container untuk tidak memotong baris */
    .flex-nowrap {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-behavior: smooth; /* Membuat gerakan scroll halus */
    }

    /* Memastikan kartu memiliki lebar tetap dan tidak menciut */
    .flex-shrink-0 {
        flex-shrink: 0 !important;
    }

    /* Sembunyikan scrollbar agar terlihat bersih (opsional) */
    .custom-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .custom-scrollbar {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
</style>
<style>
    /* Paksa Baris Akses Cepat tidak membungkus ke bawah */
    #scroll-direktorat {
        -webkit-overflow-scrolling: touch; /* Scroll halus di iPhone */
        scroll-snap-type: x mandatory; /* Membuat scroll "magnetis" per kartu */
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Agar kartu tidak menciut dan mendukung snap scroll */
    #scroll-direktorat .flex-shrink-0 {
        scroll-snap-align: start;
        flex: 0 0 auto;
    }

    /* Sembunyikan Scrollbar tapi tetap bisa digeser */
    .custom-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .custom-scrollbar {
        -ms-overflow-style: none;  
        scrollbar-width: none;  
    }

    /* Perbaikan Gambar agar tidak pecah rasionya */
    .object-fit-contain {
        object-fit: contain;
    }

    /* Penyesuaian Mobile (Hapus border/shadow berlebih jika perlu) */
    @media (max-width: 576px) {
        .card {
            border: 1px solid #eee !important; /* Tambah border tipis agar card terlihat jelas di layar putih */
        }
    }
</style>

<style>
    .hover-zoom img {
        transition: transform 0.3s ease;
    }
    .hover-zoom:hover img {
        transform: scale(1.05);
    }
    .hover-zoom i {
        transition: all 0.3s ease;
    }
    .hover-zoom:hover i {
        color: #ff0000; /* Warna khas YouTube saat di-hover */
        transform: scale(1.1);
    }
</style>
<style>
    .hover-overlay .overlay-icon {
        background: rgba(var(--bs-primary-rgb), 0.5);
        opacity: 0;
        transition: all 0.3s ease;
    }
    .hover-overlay:hover .overlay-icon {
        opacity: 1;
    }
    .hover-overlay img {
        transition: transform 0.3s ease;
    }
    .hover-overlay:hover img {
        transform: scale(1.1);
    }
</style>


<?= $this->endSection(); ?>
<?= $this->section('content'); ?>

<?php
// DATA DUMMY (Nanti bagian ini dihapus kalau sudah konek Database)
$opinions = [
    (object)[
        'title' => 'Pentingnya Literasi Digital di Lingkungan Pesantren',
        'author_name' => 'Dr. Ahmad Fauzi',
        'slug' => 'literasi-digital-pesantren',
        'published_at' => '2023-10-20'
    ],
    (object)[
        'title' => 'Menjaga Tradisi Turats di Era Modernisasi Ma\'had Aly',
        'author_name' => 'K.H. Mukhlis Ade',
        'slug' => 'menjaga-tradisi-turats',
        'published_at' => '2023-10-21'
    ],
    (object)[
        'title' => 'Menjaga Tradisi Turats di Era Modernisasi Ma\'had Aly',
        'author_name' => 'K.H. Ajat Ade',
        'slug' => 'menjaga-tradisi-turats',
        'published_at' => '2023-10-21'
    ],
];
?>
<div class="container my-5">
    <div class="row g-4">
        <div class="col-lg-8">
            <div id="heroCarousel" class="carousel slide shadow-sm" data-bs-ride="carousel">
                <div class="carousel-inner rounded-4">
                    <?php if(!empty($headline)): ?>
                        <?php foreach($headline as $key => $h): ?>
                        <div class="carousel-item <?= $key == 0 ? 'active' : '' ?>">
                            <div class="position-relative">
                                <img src="<?= base_url('uploads/berita/' . $h->image) ?>" class="d-block w-100 object-fit-cover" style="height: 450px;">
                                <div class="position-absolute bottom-0 w-100 p-4" style="background: linear-gradient(transparent, rgba(0,0,0,0.8));">
                                    <a href="<?= base_url('read/' . $h->slug) ?>" class="text-decoration-none">
                                        <h2 class="text-white fw-bold fs-3"><?= $h->title ?></h2>
                                    </a>
                                    <p class="text-light small"><?= date('l, d F Y', strtotime($h->published_at)) ?></p>
                                </div>
                            </div>
                        </div>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="fw-bold mb-0" style="border-left: 4px solid #008080; padding-left: 10px; font-size: 1.1rem;">Informasi</h5>
                <a href="<?= base_url('informasi') ?>" class="text-primary fw-bold text-decoration-none" style="font-size: 0.75rem;">
                    Lihat Semua <i class="bi bi-arrow-right"></i>
                </a>
            </div>
            <div class="d-flex flex-column gap-2 mb-4"> 
                <?php if(!empty($informations)): ?>
                    <?php foreach($informations as $info): ?>
                    <div class="card border-0 rounded-3 shadow-sm" style="background-color: #f1f9fa; border: 1px solid rgba(0,128,128,0.1);">
                        <div class="card-body d-flex align-items-center p-3 py-2"> <div class="text-primary me-3">
                                <i class="bi bi-file-earmark-pdf fs-5"></i>
                            </div>
                            <div class="flex-grow-1">
                                <a href="<?= base_url('uploads/informasi/' . $info['file_path']) ?>" 
                                   target="_blank" 
                                   class="text-decoration-none text-dark fw-bold lh-sm d-block" 
                                   style="font-size: 0.85rem;">
                                    <?= $info['title'] ?>
                                </a>
                            </div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>

            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="fw-bold mb-0" style="border-left: 4px solid #ffc107; padding-left: 10px; font-size: 1.1rem;">Opini</h5>
                <a href="<?= base_url('opini-semua') ?>" class="text-warning fw-bold text-decoration-none" style="font-size: 0.75rem;">
                    Lihat Semua <i class="bi bi-arrow-right"></i>
                </a>
            </div>
            <div class="d-flex flex-column gap-2">
                <?php foreach($opini as $op): ?>
                <div class="card border-0 shadow-sm rounded-3 position-relative overflow-hidden" style="background: #fffdf5; border: 1px solid rgba(255,193,7,0.1);">
                    <div class="position-absolute top-0 start-0 h-100" style="width: 4px; background-color: #ffc107;"></div>
                    
                    <div class="card-body p-3 py-2">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <span class="text-warning-emphasis fw-bold" style="font-size: 0.65rem;">
                                <i class="bi bi-person-circle me-1"></i> <?= $op->author_name ?>
                            </span>
                        </div>

                        <a href="<?= base_url('opini/' . $op->slug) ?>" class="text-decoration-none">
                            <h6 class="text-dark fw-bold mb-0 lh-base hover-warning" 
                                style="font-size: 0.85rem; 
                                       display: -webkit-box; 
                                       -webkit-line-clamp: 2; /* Maksimal 2 baris */
                                       -webkit-box-orient: vertical; 
                                       overflow: hidden; 
                                       text-overflow: ellipsis;
                                       min-height: 2.4em; /* Menjaga tinggi kotak tetap sama meski judul pendek */">
                                
                                <?php 
                                    // Batasi karakter secara PHP untuk keamanan extra (misal 70 karakter)
                                    $judul = $op->title;
                                    echo (strlen($judul) > 70) ? substr($judul, 0, 70) . '...' : $judul; 
                                ?>
                            </h6>
                        </a>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
            
        </div>
    </div>
</div>

<div class="container my-5">
    <h3 class="fw-bold mb-4">Terkini</h3>
    <div class="row g-4">
        <?php foreach($terkini as $t): ?>
        <div class="col-md-6">
            <div class="d-flex gap-3 align-items-center">
                <img src="<?= base_url('uploads/berita/' . $t->image) ?>" class="rounded-3" style="width: 120px; height: 120px; object-fit: cover;">
                <div>
                    <a href="<?= base_url('read/' . $t->slug) ?>" class="text-decoration-none text-dark">
                        <h6 class="fw-bold mb-1"><?= $t->title ?></h6>
                    </a>
                    <p class="text-muted small mb-0">
                        <?= date('l, d F Y', strtotime($t->published_at)) ?> | <i class="bi bi-eye"></i> <?= $t->reader ?>
                    </p>
                </div>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
</div>

<div class="container my-5">
    <div class="row">
        <div class="col-12">
            <div class="position-relative overflow-hidden rounded-4 shadow-sm hover-card">
                <img src="<?= base_url('uploads/config/' . ($cms['app_banner'] ?: 'default-banner.jpg')) ?>" 
                     class="w-100 d-block" 
                     style="height: auto; min-height: 180px; object-fit: cover;"
                     alt="Banner Utama">
                
                <div class="position-absolute top-0 start-0 w-100 h-100 d-flex justify-content-end align-items-end p-4 p-md-5" 
                     style="background: linear-gradient(315deg, rgba(0,77,64,0.8) 0%, transparent 60%);">
                    
                    <div class="text-end w-100">
                        <a href="<?= $cms['banner_link'] ?>" class="btn btn-light btn-sm rounded-pill px-4 fw-bold shadow-sm" style="color: #004d40;">
                            Cek Selengkapnya <i class="bi bi-arrow-right ms-1"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container mt-5 pt-2">
    <div class="text-center mb-4">
        <h2 class="fw-bold h3" style="color: #004d40;">Akses Cepat</h2>
    </div>

    <div id="scroll-direktorat" class="d-flex flex-nowrap overflow-auto pb-4 custom-scrollbar gap-3 justify-content-start">
        <?php 
        // Pastikan variabel $directorates ini dikirim dari Controller Frontend Bapak
        // Contoh: $data['directorates'] = $this->directorateModel->findAll();
        if (!empty($directorates)): 
            foreach($directorates as $d): ?>
            
            <a href="<?= $d['url'] ?: '#' ?>" target="_blank" class="text-decoration-none flex-shrink-0" style="width: 200px;">
                <div class="card h-100 border-0 shadow-sm rounded-4 text-center p-3 hover-card">
                    <div class="d-flex align-items-center justify-content-center mb-3" style="height: 100px;">
                        <img src="<?= base_url('uploads/directorate/' . ($d['icon'] ?: 'default-dir.png')) ?>" 
                             class="img-fluid rounded-3 object-fit-cover" 
                             style="width: 80px; height: 80px;"
                             alt="<?= $d['name'] ?>">
                    </div>
                    
                    <h6 class="fw-bold small mb-1 text-dark" style="min-height: 40px; display: flex; align-items: center; justify-content: center;">
                        <?= strtoupper($d['name']) ?>
                    </h6>
                    
                    <hr class="my-2 mx-auto mb-0" style="width: 30px; border-top: 3px solid #008080; opacity:1;">
                </div>
            </a>

            <?php endforeach; 
        else: ?>
            <div class="text-center w-100 py-4 text-muted small">
                Belum ada data akses cepat yang tersedia.
            </div>
        <?php endif; ?>
    </div>
</div>


<div class="container my-5">
    <div class="row">
        <div class="col-lg-6 mb-5">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h4 class="fw-bold mb-0">Galeri Foto</h4>
                <a href="<?= base_url('foto') ?>" class="small text-primary fw-bold text-decoration-none">
                    Lihat Semua <i class="bi bi-arrow-right"></i>
                </a>
            </div>
            <div class="row g-3"> <?php if(!empty($photos)): ?>
                    <?php foreach($photos as $p): ?>
                    <div class="col-6"> <a href="<?= base_url('uploads/foto/' . $p['photo_path']) ?>" 
                           data-fancybox="gallery" 
                           data-caption="<?= $p['title'] ?>">
                            <div class="position-relative rounded-4 overflow-hidden shadow-sm hover-overlay" style="height: 180px;"> <img src="<?= base_url('uploads/foto/' . $p['photo_path']) ?>" 
                                     class="w-100 h-100 object-fit-cover" 
                                     alt="<?= $p['title'] ?>">
                                <div class="overlay-icon position-absolute top-0 start-0 w-100 h-100 d-flex flex-column align-items-center justify-content-center text-white text-center p-2" 
                                     style="background: rgba(0,0,0,0.4); opacity: 0; transition: 0.3s;">
                                    <i class="bi bi-zoom-in fs-2 mb-1"></i>
                                    <span class="small fw-bold"><?= $p['title'] ?></span>
                                </div>
                            </div>
                        </a>
                    </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <div class="col-12 text-center py-5 text-muted border rounded-4 bg-light">
                        <i class="bi bi-images d-block fs-1 mb-2"></i>
                        Belum ada koleksi foto.
                    </div>
                <?php endif; ?>
            </div>
        </div>
        <div class="col-lg-6 mb-5">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h4 class="fw-bold mb-0">Galeri Video</h4>
                <a href="<?= base_url('video') ?>" class="small text-primary fw-bold text-decoration-none">
                    Lihat Semua <i class="bi bi-arrow-right"></i>
                </a>
            </div>
            <div class="row g-2">
                <?php if(!empty($videos)): ?>
                    <?php foreach($videos as $v): ?>
                    <div class="col-12 mb-2">
                        <a href="<?= $v['video_url'] ?>" target="_blank" class="text-decoration-none">
                            <div class="position-relative rounded-4 overflow-hidden shadow-sm hover-zoom">
                                <img src="https://img.youtube.com/vi/<?= $v['youtube_id'] ?>/hqdefault.jpg" 
                                     class="w-100 object-fit-cover" 
                                     style="height: 250px;" 
                                     alt="<?= $v['title'] ?>">
                                
                                <div class="position-absolute top-0 start-0 w-100 h-100 d-flex flex-column justify-content-center align-items-center text-white" 
                                     style="background: rgba(0,0,0,0.2);">
                                    <i class="bi bi-play-circle-fill" style="font-size: 4rem; opacity: 0.9;"></i>
                                </div>

                                <div class="position-absolute bottom-0 start-0 w-100 p-3 text-white" 
                                     style="background: linear-gradient(transparent, rgba(0,0,0,0.8));">
                                    <p class="small fw-bold mb-0 text-truncate"><?= $v['title'] ?></p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <div class="col-12 text-center py-5 text-muted">Belum ada video galeri.</div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<?= $this->endSection(); ?>
<?= $this->section('scripts'); ?>
<script>
    Fancybox.bind("[data-fancybox]", {
        // Opsi kustomisasi di sini
    });
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const el = document.getElementById('scroll-direktorat');
    let step = 220; // Jarak geser (lebar kartu + gap)
    let speed = 3000; // Jeda waktu (3 detik)
    
    function performScroll() {
        // Cek apakah user sedang menyentuh/menggeser manual
        if (isScrollingManual) return;

        if (el.scrollLeft + el.offsetWidth >= el.scrollWidth - 10) {
            // Jika sudah di ujung kanan, kembali ke awal
            el.scrollTo({ left: 0, behavior: 'smooth' });
        } else {
            // Geser ke kanan
            el.scrollBy({ left: step, behavior: 'smooth' });
        }
    }

    let isScrollingManual = false;
    let autoScrollTimer = setInterval(performScroll, speed);

    // Berhenti saat disentuh (mobile) atau di-hover (desktop)
    el.addEventListener('touchstart', () => isScrollingManual = true);
    el.addEventListener('touchend', () => {
        // Tunggu sebentar setelah dilepas baru jalan lagi
        setTimeout(() => { isScrollingManual = false; }, 2000);
    });
    el.addEventListener('mouseenter', () => isScrollingManual = true);
    el.addEventListener('mouseleave', () => isScrollingManual = false);
});
</script>
<?= $this->endSection(); ?>