<?php
session_start();

require_once "config/koneksi.php";

/* =====================================================
   AMBIL DATA PROFIL DESA
===================================================== */

$query = mysqli_query($conn, "
    SELECT * 
    FROM profil_desa 
    LIMIT 1
");

$data = mysqli_fetch_assoc($query);

/* =====================================================
   DATA PROFIL
===================================================== */

$sejarah       = $data['sejarah'] ?? '';
$visi          = $data['visi'] ?? '';
$misi          = $data['misi'] ?? '';
$struktur      = $data['struktur'] ?? '';
$data_penduduk = $data['data_penduduk'] ?? '';

/* =====================================================
   DATA PENDUDUK OTOMATIS
===================================================== */

/* Jumlah Penduduk */
$query_total = mysqli_query($conn, "
    SELECT COUNT(*) AS total
    FROM penduduk
");

$data_total = mysqli_fetch_assoc($query_total);
$jumlah_penduduk = (int)($data_total['total'] ?? 0);


/* Laki-laki */
$query_laki = mysqli_query($conn, "
    SELECT COUNT(*) AS total
    FROM penduduk
    WHERE jenis_kelamin = 'Laki-laki'
");

$data_laki = mysqli_fetch_assoc($query_laki);
$laki_laki = (int)($data_laki['total'] ?? 0);


/* Perempuan */
$query_perempuan = mysqli_query($conn, "
    SELECT COUNT(*) AS total
    FROM penduduk
    WHERE jenis_kelamin = 'Perempuan'
");

$data_perempuan = mysqli_fetch_assoc($query_perempuan);
$perempuan = (int)($data_perempuan['total'] ?? 0);


/* Jumlah Dusun */
$query_dusun = mysqli_query($conn, "
    SELECT COUNT(DISTINCT dusun) AS total
    FROM penduduk
    WHERE dusun IS NOT NULL
    AND dusun != ''
");

$data_dusun = mysqli_fetch_assoc($query_dusun);
$jumlah_dusun = (int)($data_dusun['total'] ?? 0);


/* =====================================================
   SEJARAH SINGKAT
===================================================== */

$sejarah_singkat = strip_tags($sejarah);

if (strlen($sejarah_singkat) > 380) {
    $sejarah_singkat = substr($sejarah_singkat, 0, 380) . '...';
}

?>

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

<head>

    <meta charset="UTF-8">

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

    <title>Profil Desa Oelomin</title>

    <!-- CSS KHUSUS PROFIL -->
    <link rel="stylesheet"
          href="assets/css/profil.css">

    <!-- 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">

</head>

<body>

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

    <header class="navbar">

    <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 -->
    <button class="menu-toggle" id="menuToggle" aria-label="Buka Menu">
        <i class="fa-solid fa-bars"></i>
    </button>

    <nav id="mainNav">

        <ul class="menu">

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

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

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

            <li>
                <a href="berita.php">
                    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>

<!-- =====================================================
     HEADER PROFIL
===================================================== -->

<section class="profil-hero">

    <div class="profil-hero-overlay"></div>

    <div class="profil-hero-content">

        <span class="hero-label">

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

            PROFIL DESA

        </span>

        <h1>
            Mengenal
            <span>Desa Oelomin</span>
        </h1>

        <p>
            Mengenal lebih dekat sejarah, visi dan misi,
            pemerintahan, serta kehidupan masyarakat
            Desa Oelomin.
        </p>

    </div>

</section>



<!-- =====================================================
     CONTENT
===================================================== -->

<main class="profil-container">


    <!-- =================================================
         SEJARAH
    ================================================== -->

    <section class="profil-section">

        <div class="section-heading">

            <span class="section-label">

                <i class="fa-solid fa-book-open"></i>

                SEJARAH DESA

            </span>

            <h2>
                Mengenal Sejarah Desa Oelomin
            </h2>

            <p>
                Informasi singkat mengenai sejarah dan
                perkembangan Desa Oelomin.
            </p>

        </div>


        <div class="sejarah-card">

            <div class="sejarah-icon">

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

            </div>


            <div class="sejarah-content">

                <h3>
                    Sejarah Desa Oelomin
                </h3>

                <?php if (!empty($sejarah)): ?>

                    <p>
                        <?= nl2br(
                            htmlspecialchars($sejarah_singkat)
                        ); ?>
                    </p>

                    <?php if (strlen(strip_tags($sejarah)) > 380): ?>

                        <a href="sejarah.php"
                           class="read-more">

                            Baca Selengkapnya

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

                        </a>

                    <?php endif; ?>

                <?php else: ?>

                    <p class="empty-data">
                        Informasi sejarah desa belum tersedia.
                    </p>

                <?php endif; ?>

            </div>

        </div>

    </section>

    <!-- =================================================
         VISI MISI
    ================================================== -->

    <section class="profil-section">

        <div class="section-heading">

            <span class="section-label">

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

                ARAH PEMBANGUNAN

            </span>

            <h2>
                Visi dan Misi
            </h2>

            <p>
                Arah dan tujuan pembangunan Desa Oelomin
                dalam memberikan pelayanan kepada masyarakat.
            </p>

        </div>


        <div class="visi-misi-grid">


            <!-- VISI -->

            <div class="visi-card">

                <div class="visi-icon">

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

                </div>

                <div>

                    <span class="card-label">
                        VISI
                    </span>

                    <h3>
                        Visi Desa
                    </h3>

                    <p>

                        <?= nl2br(
                            htmlspecialchars(
                                $visi ?: 'Data visi belum tersedia.'
                            )
                        ); ?>

                    </p>

                </div>

            </div>



            <!-- MISI -->

            <div class="misi-card">

                <div class="misi-icon">

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

                </div>

                <div>

                    <span class="card-label">
                        MISI
                    </span>

                    <h3>
                        Misi Desa
                    </h3>

                    <p>

                        <?= nl2br(
                            htmlspecialchars(
                                $misi ?: 'Data misi belum tersedia.'
                            )
                        ); ?>

                    </p>

                </div>

            </div>


        </div>

    </section>



    <!-- =================================================
         STRUKTUR PEMERINTAHAN
    ================================================== -->

    <section class="profil-section">

        <div class="section-heading">

            <span class="section-label">

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

                PEMERINTAHAN DESA

            </span>

            <h2>
                Struktur Pemerintahan
            </h2>

            <p>
                Struktur organisasi pemerintahan
                Desa Oelomin.
            </p>

        </div>


        <div class="struktur-card">

            <?php if (!empty($struktur)): ?>

                <a href="assets/uploads/struktur/<?= htmlspecialchars($struktur); ?>"
                   target="_blank"
                   title="Lihat struktur dalam ukuran penuh">

                    <img
                        src="assets/uploads/struktur/<?= htmlspecialchars($struktur); ?>"
                        alt="Struktur Pemerintahan Desa Oelomin">

                </a>

                <p class="struktur-note">

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

                    Klik gambar untuk melihat ukuran lebih besar

                </p>

            <?php else: ?>

                <div class="empty-structure">

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

                    <p>
                        Struktur pemerintahan desa
                        belum tersedia.
                    </p>

                </div>

            <?php endif; ?>

        </div>

    </section>

    <!-- =================================================
         DATA PENDUDUK
    ================================================== -->

    <section class="profil-section">

        <div class="section-heading">

            <span class="section-label">

                <i class="fa-solid fa-chart-simple"></i>

                DATA MASYARAKAT

            </span>

            <h2>
                Data Penduduk
            </h2>

            <p>
                Statistik penduduk Desa Oelomin
                berdasarkan data yang tersedia.
            </p>

        </div>


        <div class="statistik-grid">


            <!-- JUMLAH PENDUDUK -->

            <div class="stat-card">

                <div class="stat-icon">

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

                </div>

                <div>

                    <strong>
                        <?= number_format(
                            $jumlah_penduduk,
                            0,
                            ',',
                            '.'
                        ); ?>
                    </strong>

                    <span>
                        Jumlah Penduduk
                    </span>

                </div>

            </div>

            <!-- LAKI-LAKI -->

            <div class="stat-card">

                <div class="stat-icon">

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

                </div>

                <div>

                    <strong>
                        <?= number_format(
                            $laki_laki,
                            0,
                            ',',
                            '.'
                        ); ?>
                    </strong>

                    <span>
                        Laki-laki
                    </span>

                </div>

            </div>

            <!-- PEREMPUAN -->

            <div class="stat-card">

                <div class="stat-icon">

                    <i class="fa-solid fa-person-dress"></i>

                </div>

                <div>

                    <strong>
                        <?= number_format(
                            $perempuan,
                            0,
                            ',',
                            '.'
                        ); ?>
                    </strong>

                    <span>
                        Perempuan
                    </span>

                </div>

            </div>

            <!-- DUSUN -->

            <div class="stat-card">

                <div class="stat-icon">

                    <i class="fa-solid fa-house-chimney"></i>

                </div>

                <div>

                    <strong>
                        <?= number_format(
                            $jumlah_dusun,
                            0,
                            ',',
                            '.'
                        ); ?>
                    </strong>

                    <span>
                        Dusun
                    </span>

                </div>

            </div>


        </div>

    </section>

    <!-- =================================================
         PELAYANAN SURAT
    ================================================== -->

    <section class="profil-section pelayanan-section">

        <div class="section-heading">

            <span class="section-label">

                <i class="fa-solid fa-file-signature"></i>

                PELAYANAN MASYARAKAT

            </span>

            <h2>
                Pelayanan Surat Online
            </h2>

            <p>
                Pilih jenis pelayanan surat yang
                ingin diajukan.
            </p>

        </div>


        <div class="surat-grid">


            <a href="surat/domisili.php"
               class="surat-card">

                <div class="surat-icon">
                    <i class="fa-solid fa-house"></i>
                </div>

                <div>

                    <h4>
                        Surat Domisili
                    </h4>

                    <span>
                        Ajukan surat
                    </span>

                </div>

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

            </a>

            <a href="surat/pindah.php"
               class="surat-card">

                <div class="surat-icon">
                    <i class="fa-solid fa-truck"></i>
                </div>

                <div>

                    <h4>
                        Surat Pindah
                    </h4>

                    <span>
                        Ajukan surat
                    </span>

                </div>

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

            </a>

            <a href="surat/sktm.php"
               class="surat-card">

                <div class="surat-icon">
                    <i class="fa-solid fa-file-lines"></i>
                </div>

                <div>

                    <h4>
                        SKTM
                    </h4>

                    <span>
                        Ajukan surat
                    </span>

                </div>

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

            </a>

            <a href="surat/skbm.php"
               class="surat-card">

                <div class="surat-icon">
                    <i class="fa-solid fa-ring"></i>
                </div>

                <div>

                    <h4>
                        SKBM
                    </h4>

                    <span>
                        Ajukan surat
                    </span>

                </div>

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

            </a>

            <a href="surat/kematian.php"
               class="surat-card">

                <div class="surat-icon">
                    <i class="fa-solid fa-dove"></i>
                </div>

                <div>

                    <h4>
                        Surat Kematian
                    </h4>

                    <span>
                        Ajukan surat
                    </span>

                </div>

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

            </a>

            <a href="surat/jual_beli_tanah.php"
               class="surat-card">

                <div class="surat-icon">
                    <i class="fa-solid fa-house-chimney"></i>
                </div>

                <div>

                    <h4>
                        Jual Beli Tanah
                    </h4>

                    <span>
                        Ajukan surat
                    </span>

                </div>

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

            </a>

            <a href="surat/status.php"
               class="surat-card status-card">

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

                <div>

                    <h4>
                        Status Pengajuan
                    </h4>

                    <span>
                        Cek pengajuan surat
                    </span>

                </div>

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

            </a>

        </div>

    </section>
</main>

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

<footer class="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 -->

        <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 -->

        <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>


    <div class="footer-bottom">

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

    </div>

</footer>

<script>

/* =====================================================
   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")) {

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

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

        } else {

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

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

        }

    });


    /* Tutup menu setelah memilih halaman */

    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");

        });

    });

}

</script>

</body>
</html>