<?php

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

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


// ========================================
// AMBIL ID BERITA
// ========================================

$id = isset($_GET['id']) ? (int) $_GET['id'] : 0;


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

$query = mysqli_query(
    $koneksi,
    "SELECT * FROM berita WHERE id = $id LIMIT 1"
);

$data = mysqli_fetch_assoc($query);


// Jika berita tidak ditemukan
if (!$data) {

    echo '
    <div style="padding-top:150px;">
        <div class="container py-5">
            <div class="alert alert-danger">
                Berita tidak ditemukan.
            </div>
        </div>
    </div>';

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


// ========================================
// AMBIL BERITA TERBARU
// ========================================

$query_terbaru = mysqli_query(
    $koneksi,
    "SELECT id, judul, tanggal, gambar
     FROM berita
     WHERE id != $id
     ORDER BY tanggal DESC
     LIMIT 5"
);


// ========================================
// FORMAT TANGGAL
// ========================================

$bulan = [
    1 => 'Januari',
    2 => 'Februari',
    3 => 'Maret',
    4 => 'April',
    5 => 'Mei',
    6 => 'Juni',
    7 => 'Juli',
    8 => 'Agustus',
    9 => 'September',
    10 => 'Oktober',
    11 => 'November',
    12 => 'Desember'
];

$tanggal_berita = strtotime($data['tanggal']);

$tanggal_format =
    date('d', $tanggal_berita) . ' ' .
    $bulan[(int) date('m', $tanggal_berita)] . ' ' .
    date('Y', $tanggal_berita);

?>

<style>
    /* ========================================
       DETAIL BERITA
    ======================================== */

    .detail-page {
        padding-top: 150px;
        padding-bottom: 80px;
        background: #ffffff;
    }


    .detail-wrapper {
        max-width: 1320px;
        margin: auto;
    }


    /* ========================================
       KOLOM UTAMA
    ======================================== */

    .detail-main {
        padding-right: 50px;
    }


    /* ========================================
       META BERITA
    ======================================== */

    .detail-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 25px;
        margin-bottom: 28px;
        color: #777;
        font-size: 15px;
    }


    .detail-meta span {
        display: flex;
        align-items: center;
        gap: 8px;
    }


    .detail-meta i {
        color: #07357e;
    }


    /* ========================================
       JUDUL
    ======================================== */

    .detail-title {
        font-size: 42px;
        line-height: 1.25;
        font-weight: 700;
        color: #102a43;
        margin-bottom: 35px;
    }


    /* ========================================
       FOTO BERITA
    ======================================== */

    .detail-image-wrapper {
        width: 100%;
        background: #f8f9fa;
        margin-bottom: 35px;
        text-align: center;
    }


    .detail-image {
        width: 100%;
        max-height: 650px;
        object-fit: contain;
        display: block;
        margin: auto;
    }


    /* ========================================
       ISI BERITA
    ======================================== */

    .detail-content {
        font-size: 17px;
        line-height: 1.9;
        color: #333;
        text-align: justify;
    }


    .detail-content p {
        margin-bottom: 20px;
    }


    /* ========================================
       INSTAGRAM
    ======================================== */

    .instagram-box {
        margin-top: 40px;
        padding-top: 25px;
        border-top: 1px solid #ddd;
    }


    .instagram-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: #e1306c;
        color: white;
        padding: 11px 20px;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 500;
    }


    .instagram-btn:hover {
        background: #c9285d;
        color: white;
    }


    /* ========================================
       SIDEBAR
    ======================================== */

    .sidebar {
        padding-left: 25px;
    }


    .sidebar-title {
        font-size: 22px;
        font-weight: 700;
        color: #102a43;
        padding-bottom: 15px;
        border-bottom: 2px solid #102a43;
        margin-bottom: 25px;
    }


    /* ========================================
       BERITA TERBARU
    ======================================== */

    .recent-post {
        display: flex;
        gap: 18px;
        margin-bottom: 28px;
        text-decoration: none;
        color: inherit;
    }


    .recent-post:hover {
        color: #07357e;
    }


    .recent-image {
        width: 110px;
        height: 70px;
        flex-shrink: 0;
        object-fit: cover;
        border-radius: 3px;
    }


    .recent-info h5 {
        font-size: 16px;
        line-height: 1.35;
        font-weight: 600;
        margin: 0 0 7px;
        color: #102a43;
    }


    .recent-info small {
        color: #888;
        font-size: 14px;
    }


    /* ========================================
       RESPONSIVE
    ======================================== */

    @media (max-width: 991px) {

        .detail-page {
            padding-top: 120px;
        }

        .detail-main {
            padding-right: 0;
        }

        .sidebar {
            padding-left: 0;
            margin-top: 60px;
        }

        .detail-title {
            font-size: 32px;
        }

    }


    @media (max-width: 576px) {

        .detail-page {
            padding-top: 100px;
        }

        .detail-title {
            font-size: 27px;
        }

        .detail-meta {
            gap: 12px;
            font-size: 13px;
        }

        .detail-content {
            font-size: 16px;
        }

    }
</style>


<!-- ========================================
     DETAIL BERITA
======================================== -->

<div class="detail-page">

    <div class="container">

        <div class="row detail-wrapper">

            <!-- ========================================
                 BAGIAN KIRI
            ======================================== -->

            <div class="col-lg-8 detail-main">

                <!-- META -->

                <div class="detail-meta">

                    <span>
                        <i class="bi bi-calendar3"></i>

                        <?= $tanggal_format; ?>

                    </span>

                </div>


                <!-- JUDUL -->

                <h1 class="detail-title">

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

                </h1>


                <!-- FOTO -->

                <?php if (!empty($data['gambar'])): ?>

                    <div class="detail-image-wrapper">

                        <img
                            src="../uploads/berita/<?= htmlspecialchars($data['gambar']); ?>"
                            alt="<?= htmlspecialchars($data['judul']); ?>"
                            class="detail-image">

                    </div>

                <?php endif; ?>


                <!-- ISI -->

                <div class="detail-content">

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

                </div>


                <!-- INSTAGRAM -->

                <?php if (!empty($data['link_instagram'])): ?>

                    <div class="instagram-box">

                        <a
                            href="<?= htmlspecialchars($data['link_instagram']); ?>"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="instagram-btn">

                            <i class="bi bi-instagram"></i>

                            Lihat di Instagram

                        </a>

                    </div>

                <?php endif; ?>


            </div>


            <!-- ========================================
                 SIDEBAR
            ======================================== -->

            <div class="col-lg-4 sidebar">

                <h3 class="sidebar-title">

                    Blog Terakhir

                </h3>


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

                    <?php while ($terbaru = mysqli_fetch_assoc($query_terbaru)): ?>

                        <a
                            href="detail-berita.php?id=<?= $terbaru['id']; ?>"
                            class="recent-post">


                            <?php if (!empty($terbaru['gambar'])): ?>

                                <img
                                    src="../uploads/berita/<?= htmlspecialchars($terbaru['gambar']); ?>"
                                    class="recent-image"
                                    alt="<?= htmlspecialchars($terbaru['judul']); ?>">

                            <?php endif; ?>


                            <div class="recent-info">

                                <h5>

                                    <?= htmlspecialchars(
                                        mb_strimwidth(
                                            $terbaru['judul'],
                                            0,
                                            55,
                                            '...'
                                        )
                                    ); ?>

                                </h5>


                                <small>

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

                                </small>

                            </div>


                        </a>

                    <?php endwhile; ?>

                <?php else: ?>

                    <p class="text-muted">

                        Belum ada berita lainnya.

                    </p>

                <?php endif; ?>


                <!-- KATEGORI -->

                <div class="mt-5">

                    <h3 class="sidebar-title">

                        Kategori

                    </h3>

                    <p class="text-muted">

                        Berita DISPUSIP Kabupaten Banyuwangi

                    </p>

                </div>

            </div>

        </div>

    </div>

</div>


<?php

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

?>