<?php

include "../includes/header.php";
include "../includes/navbar.php";

require_once "../config/koneksi.php";

// Ambil data pengumuman
$query = mysqli_query(
    $koneksi,
    "SELECT * FROM pengumuman ORDER BY tanggal DESC, id DESC"
);

?>

<div style="padding-top: 120px;">

    <style>
        .pengumuman-wrapper {
            max-width: 1150px;
            margin: 0 auto;
        }

        .section-title {
            font-weight: 700;
            color: #1f4e79;
        }

        .pengumuman-subtitle {
            max-width: 750px;
            margin: 0 auto;
            color: #6c757d;
        }

        /* GRID KOTAK PENGUMUMAN */
        .pengumuman-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
        }

        /* KARTU PENGUMUMAN */
        .pengumuman-item {
            background: #ffffff;
            border: 1px solid #e8e8e8;
            border-radius: 14px;
            padding: 25px;
            min-height: 250px;

            display: flex;
            flex-direction: column;

            transition: all 0.3s ease;
        }

        .pengumuman-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.10);
            border-color: #d7e2f2;
        }

        /* JUDUL */
        .pengumuman-judul {
            color: #07357e;
            font-size: 19px;
            font-weight: 700;
            line-height: 1.4;
            margin-bottom: 10px;
        }

        /* TANGGAL */
        .pengumuman-tanggal {
            color: #888;
            font-size: 13px;
            margin-bottom: 18px;
        }

        /* GARIS */
        .pengumuman-garis {
            width: 45px;
            height: 3px;
            background: #07357e;
            border-radius: 5px;
            margin-bottom: 18px;
        }

        /* ISI */
        .pengumuman-isi {
            color: #555;
            line-height: 1.7;
            font-size: 14px;

            display: -webkit-box;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* TIDAK ADA DATA */
        .tidak-ada {
            grid-column: 1 / -1;
            text-align: center;
            padding: 50px 20px;
            color: #777;
        }

        /* RESPONSIVE */
        @media (max-width: 992px) {

            .pengumuman-grid {
                grid-template-columns: repeat(2, 1fr);
            }

        }

        @media (max-width: 576px) {

            .pengumuman-grid {
                grid-template-columns: 1fr;
            }

            .pengumuman-item {
                min-height: auto;
            }

        }
    </style>


    <div class="container py-5">

        <!-- JUDUL -->

        <div class="text-center mb-5">

            <h1 class="section-title">
                Pengumuman
            </h1>

            <p class="pengumuman-subtitle">
                Informasi dan pengumuman terbaru dari
                Dinas Perpustakaan dan Kearsipan
                Kabupaten Banyuwangi.
            </p>

        </div>


        <!-- DAFTAR PENGUMUMAN -->

        <div class="pengumuman-wrapper">

            <?php if (mysqli_num_rows($query) > 0): ?>

                <div class="pengumuman-grid">

                    <?php while ($row = mysqli_fetch_assoc($query)): ?>

                        <div class="pengumuman-item">

                            <!-- JUDUL -->

                            <div class="pengumuman-judul">

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

                            </div>


                            <!-- TANGGAL -->

                            <div class="pengumuman-tanggal">

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

                            </div>


                            <!-- GARIS -->

                            <div class="pengumuman-garis"></div>


                            <!-- ISI -->

                            <div class="pengumuman-isi">

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

                            </div>

                        </div>

                    <?php endwhile; ?>

                </div>

            <?php else: ?>

                <div class="pengumuman-grid">

                    <div class="pengumuman-item tidak-ada">

                        <h5>
                            Belum Ada Pengumuman
                        </h5>

                        <p class="mb-0">
                            Saat ini belum terdapat pengumuman
                            yang dapat ditampilkan.
                        </p>

                    </div>

                </div>

            <?php endif; ?>

        </div>

    </div>

</div>


<?php

include "../includes/footer.php";

?>