<?php
include 'config/koneksi.php';

/* =====================================================
   AMBIL DATA BERITA
===================================================== */

$query = mysqli_query($conn, "
    SELECT *
    FROM berita
    ORDER BY tanggal DESC
");
?>

<!DOCTYPE html>
<html lang="id">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Berita & Edukasi - Desa Oelomin</title>

    <!-- GOOGLE FONT -->
    <link
        href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap"
        rel="stylesheet">

    <!-- FONT AWESOME -->
    <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

    <!-- CSS BERITA -->
    <link
        rel="stylesheet"
        href="assets/css/berita.css">

</head>


<body>


<!-- =====================================================
     NAVBAR
===================================================== -->

<header class="navbar">

    <!-- LOGO -->

    <div class="logo">

        <img
            src="assets/img/logo-desa.png"
            alt="Logo Desa Oelomin"
        >

        <div class="logo-text">

            <h2>Desa Oelomin</h2>

            <span>Portal Desa Digital</span>

        </div>

    </div>


    <!-- TOMBOL HAMBURGER MOBILE -->

    <button
        class="menu-toggle"
        id="menuToggle"
        type="button"
        aria-label="Buka Menu"
    >

        <i class="fa-solid fa-bars"></i>

    </button>


    <!-- MENU -->

    <nav id="mainNav">

        <ul class="menu">

            <li>
                <a href="index.php">
                    Beranda
                </a>
            </li>

            <li>
                <a href="profil.php">
                    Profil Desa
                </a>
            </li>

            <li>
                <a href="produk.php">
                    Produk Lokal
                </a>
            </li>

            <li>
                <a
                    href="berita.php"
                    class="active"
                >
                    Berita & Edukasi
                </a>
            </li>

            <li>
                <a
                    href="login.php"
                    class="login-btn"
                >
                    <i class="fa-solid fa-user"></i>
                    Login Admin
                </a>
            </li>

        </ul>

    </nav>

</header>

<!-- =====================================================
     HERO BERITA
===================================================== -->

<section class="berita-hero">

    <div class="hero-decoration"></div>

    <div class="hero-content">

        <div class="hero-label">

            <i class="fa-regular fa-newspaper"></i>

            INFORMASI DESA

        </div>


        <h1>

            Berita &
            <span>Edukasi</span>

        </h1>


        <p>

            Temukan informasi terbaru, kegiatan,
            pengumuman, serta berbagai edukasi
            yang bermanfaat bagi masyarakat
            Desa Oelomin.

        </p>

    </div>

</section>

<!-- =====================================================
     CONTAINER
===================================================== -->

<main class="berita-container">


    <!-- =================================================
         SECTION BERITA
    ================================================== -->

    <section class="berita-section">


        <!-- HEADER SECTION -->

        <div class="section-heading">

            <div>

                <div class="section-label">

                    <i class="fa-solid fa-newspaper"></i>

                    BERITA TERKINI

                </div>


                <h2>
                    Informasi Desa Oelomin
                </h2>


                <p>

                    Ikuti perkembangan dan berbagai
                    informasi terbaru yang disampaikan
                    oleh Desa Oelomin.

                </p>

            </div>


            <!-- SEARCH -->

            <div class="search-box">

                <i class="fa-solid fa-magnifying-glass"></i>

                <input
                    type="text"
                    id="cariBerita"
                    placeholder="Cari berita...">

            </div>

        </div>



        <!-- =================================================
             GRID BERITA
        ================================================== -->

        <div class="berita-grid">


            <?php

            if (mysqli_num_rows($query) > 0) {

                while ($row = mysqli_fetch_assoc($query)) {


                    /* =====================================
                       GAMBAR
                    ===================================== */

                    $gambar = $row['gambar'] ?? '';

                    $gambar_path =
                        'assets/img/no-image.png';


                    /* CEK FOLDER BERITA */

                    if (!empty($gambar)) {

                        if (
                            file_exists(
                                'assets/img/berita/' . $gambar
                            )
                        ) {

                            $gambar_path =
                                'assets/img/berita/' . $gambar;

                        }

                        elseif (
                            file_exists(
                                'assets/img/' . $gambar
                            )
                        ) {

                            $gambar_path =
                                'assets/img/' . $gambar;

                        }

                    }


                    /* =====================================
                       RINGKASAN
                    ===================================== */

                    $isi =
                        strip_tags($row['isi'] ?? '');

                    $ringkasan =
                        substr($isi, 0, 135);

            ?>


            <!-- =================================================
                 CARD BERITA
            ================================================== -->

            <article class="berita-card">


                <!-- GAMBAR -->

                <div class="berita-foto">

                    <img
                        src="<?= htmlspecialchars($gambar_path); ?>"
                        alt="<?= htmlspecialchars($row['judul']); ?>">
                </div>



                <!-- INFORMASI -->

                <div class="berita-info">


                    <!-- TANGGAL -->

                    <div class="berita-tanggal">

                        <i class="fa-regular fa-calendar"></i>

                        <?= date(
                            'd F Y',
                            strtotime($row['tanggal'])
                        ); ?>

                    </div>



                    <!-- JUDUL -->

                    <h3>

                        <?= htmlspecialchars(
                            $row['judul']
                        ); ?>

                    </h3>



                    <!-- DESKRIPSI -->

                    <p class="berita-deskripsi">

                        <?= htmlspecialchars(
                            $ringkasan
                        ); ?>

                        <?php

                        if (strlen($isi) > 135) {

                            echo '...';

                        }

                        ?>

                    </p>



                    <!-- BUTTON -->

                    <a
                        href="detail_berita.php?id=<?= $row['id_berita']; ?>"
                        class="btn-info">

                        Baca Selengkapnya

                        <i class="fa-solid fa-arrow-right"></i>

                    </a>


                </div>

            </article>


            <?php

                }

            }

            else {

            ?>


            <!-- =================================================
                 DATA KOSONG
            ================================================== -->

            <div class="berita-kosong">

                <div class="kosong-icon">

                    <i class="fa-regular fa-newspaper"></i>

                </div>


                <h3>
                    Belum Ada Berita
                </h3>


                <p>

                    Belum ada berita atau informasi
                    yang dipublikasikan oleh
                    Desa Oelomin.

                </p>

            </div>


            <?php

            }

            ?>


        </div>

    </section>



    <!-- =====================================================
         INFORMASI
    ===================================================== -->

    <section class="berita-info-box">

        <div class="info-icon">

            <i class="fa-solid fa-lightbulb"></i>

        </div>


        <div class="info-text">

            <span>
                INFORMASI MASYARAKAT
            </span>

            <h2>
                Tetap Ikuti Informasi Desa
            </h2>

            <p>

                Dapatkan informasi mengenai kegiatan,
                pengumuman, dan perkembangan Desa
                Oelomin melalui portal desa digital.

            </p>

        </div>

    </section>


</main>

<!-- =====================================================
     FOOTER
===================================================== -->

<footer>

    <div class="footer-container">


        <!-- MENU -->

        <div class="footer-column">

            <h3>
                Menu
            </h3>

            <ul>

                <li>
                    <a href="index.php">
                        Beranda
                    </a>
                </li>

                <li>
                    <a href="profil.php">
                        Profil Desa
                    </a>
                </li>

                <li>
                    <a href="produk.php">
                        Produk Lokal
                    </a>
                </li>

                <li>
                    <a href="berita.php">
                        Berita & Edukasi
                    </a>
                </li>

            </ul>

        </div>



        <!-- KONTAK DESA -->

        <div class="footer-column">

            <h3>
                Kontak Desa
            </h3>

            <p>
                <i class="fa-solid fa-location-dot"></i>
                Desa Oelomin
            </p>

            <p>
                Kecamatan Nekamese
            </p>

            <p>
                Kabupaten Kupang
            </p>

            <p>
                Provinsi Nusa Tenggara Timur
            </p>

        </div>



        <!-- HUBUNGI KAMI -->

        <div class="footer-column">

            <h3>
                Hubungi Kami
            </h3>

            <p>
                <i class="fa-solid fa-envelope"></i>
                desaoelomin@gmail.com
            </p>

            <p>
                <i class="fa-solid fa-phone"></i>
                0812-3456-7890
            </p>

            <p>
                <i class="fa-regular fa-clock"></i>
                Senin - Jumat
            </p>

            <p>
                08.00 - 15.00 WITA
            </p>

        </div>


    </div>



    <!-- COPYRIGHT -->

    <div class="footer-bottom">

        <p>
            © <?= date('Y'); ?>
            <span>
                Portal Desa Digital Desa Oelomin
            </span>
            · Semua Hak Dilindungi
        </p>

    </div>

</footer>



<!-- =====================================================
     JAVASCRIPT PENCARIAN
===================================================== -->

<script>

const inputCari =
    document.getElementById('cariBerita');


inputCari.addEventListener(
    'keyup',
    function () {

        const keyword =
            this.value.toLowerCase().trim();


        const cards =
            document.querySelectorAll(
                '.berita-card'
            );


        cards.forEach(function (card) {

            const judul =
                card
                .querySelector('h3')
                .textContent
                .toLowerCase();


            if (judul.includes(keyword)) {

                card.style.display = '';

            }

            else {

                card.style.display = 'none';

            }

        });

    }

);

/* =====================================================
   NAVBAR MOBILE
===================================================== */

const menuToggle =
    document.getElementById("menuToggle");

const mainNav =
    document.getElementById("mainNav");


if (menuToggle && mainNav) {

    menuToggle.addEventListener("click", function () {

        mainNav.classList.toggle("active");

        const icon =
            menuToggle.querySelector("i");


        if (mainNav.classList.contains("active")) {

            /* ☰ menjadi ✕ */

            icon.classList.remove("fa-bars");

            icon.classList.add("fa-xmark");

            menuToggle.setAttribute(
                "aria-label",
                "Tutup Menu"
            );

        } else {

            /* ✕ menjadi ☰ */

            icon.classList.remove("fa-xmark");

            icon.classList.add("fa-bars");

            menuToggle.setAttribute(
                "aria-label",
                "Buka Menu"
            );

        }

    });


    /* =================================================
       TUTUP MENU SETELAH MEMILIH LINK
    ================================================= */

    document
        .querySelectorAll("#mainNav a")
        .forEach(function(link) {

            link.addEventListener("click", function() {

                mainNav.classList.remove("active");


                const icon =
                    menuToggle.querySelector("i");


                icon.classList.remove("fa-xmark");

                icon.classList.add("fa-bars");

                menuToggle.setAttribute(
                    "aria-label",
                    "Buka Menu"
                );

            });

        });

}

</script>


</body>

</html>