<?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 PENDUDUK OTOMATIS
   Diambil langsung dari tabel penduduk
===================================================== */

// Total seluruh 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'];


// Total 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);
$jumlah_laki = (int) $data_laki['total'];


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

$data_perempuan = mysqli_fetch_assoc($query_perempuan);
$jumlah_perempuan = (int) $data_perempuan['total'];


/* =====================================================
   JUMLAH DUSUN OTOMATIS
===================================================== */

$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'];

?>

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

<head>

    <meta charset="UTF-8">

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

    <title>
        Desa Oelomin | Portal Desa Digital
    </title>

    <!-- GOOGLE FONT -->
    <link rel="preconnect"
          href="https://fonts.googleapis.com">

    <link rel="preconnect"
          href="https://fonts.gstatic.com"
          crossorigin>

    <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 -->
    <link rel="stylesheet"
          href="assets/css/style.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" class="active">
                    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>

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

        </ul>

    </nav>

</header>

<!-- =====================================================
     HERO / BERANDA
===================================================== -->

<section class="hero">


    <!-- OVERLAY GELAP -->

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



    <!-- HERO CONTAINER -->

    <div class="hero-container">


        <!-- =================================================
             KIRI : INFORMASI DESA
        ================================================== -->

        <div class="hero-content">


            <div class="hero-label">

                <span></span>

                SELAMAT DATANG DI DESA OELOMIN

            </div>



            <h1>

                Desa
                <strong>Oelomin</strong>

            </h1>



            <h2>

                Portal Desa Digital

            </h2>



            <p>

                Selamat datang di Portal Desa Digital
                Desa Oelomin. Dapatkan informasi mengenai
                pemerintahan desa, pelayanan masyarakat,
                potensi desa, produk lokal, serta berbagai
                kegiatan masyarakat Desa Oelomin.

            </p>



            <!-- BUTTON -->

            <div class="hero-buttons">


                <a href="profil.php"
                   class="btn-primary">

                    Jelajahi Desa

                    <span>
                        →
                    </span>

                </a>



                <a href="produk.php"
                   class="btn-outline">

                    Produk Lokal

                </a>

            </div>



            <!-- INFORMASI LOKASI -->

            <div class="location-info">

                <span class="location-icon">
                    📍
                </span>

                <div>

                    <small>
                        LOKASI DESA
                    </small>

                    <strong>
                        Kecamatan Nekamese,
                        Kabupaten Kupang,
                        Nusa Tenggara Timur
                    </strong>

                </div>

            </div>


        </div>



        <!-- =================================================
             KANAN : DASHBOARD STATISTIK
        ================================================== -->

        <div class="dashboard">


            <!-- HEADER -->

            <div class="dashboard-header">

                <div>

                    <span>
                        DATA DESA
                    </span>

                    <h3>
                        Desa Oelomin
                    </h3>

                </div>


                <div class="online">

                    <i></i>

                    Online

                </div>

            </div>



            <!-- =================================================
                 JAM DIGITAL
            ================================================== -->

            <div class="clock-card">


                <div class="clock-top">

                    <span>
                        WAKTU SAAT INI
                    </span>

                    <span class="timezone">
                        WITA
                    </span>

                </div>


                <div id="digitalClock"
                     class="digital-clock">

                    00:00:00

                </div>


                <div id="currentDate"
                     class="current-date">

                    Memuat tanggal...

                </div>


            </div>

            <!-- =================================================
                 STATISTIK
            ================================================== -->

            <div class="statistics">

            <!-- JUMLAH PENDUDUK -->
            <div class="stat-card">

                <div class="stat-icon">
                    👥
                </div>

                <div class="stat-info">

                    <span>
                        JUMLAH PENDUDUK
                    </span>

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

                    <small>
                        Orang
                    </small>

                </div>

            </div>


            <!-- LAKI-LAKI -->
            <div class="stat-card">

                <div class="stat-icon">
                    👨
                </div>

                <div class="stat-info">

                    <span>
                        LAKI-LAKI
                    </span>

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

                    <small>
                        Orang
                    </small>

                </div>

            </div>


            <!-- PEREMPUAN -->
            <div class="stat-card">

                <div class="stat-icon">
                    👩
                </div>

                <div class="stat-info">

                    <span>
                        PEREMPUAN
                    </span>

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

                    <small>
                        Orang
                    </small>

                </div>

            </div>


            <!-- JUMLAH DUSUN -->
            <div class="stat-card">

                <div class="stat-icon">
                    🏘️
                </div>

                <div class="stat-info">

                    <span>
                        WILAYAH DUSUN
                    </span>

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

                    <small>
                        Dusun
                    </small>

                </div>

            </div>

        </div>

            <!-- =================================================
                STATUS PORTAL
            ================================================== -->

            <div class="dashboard-footer">

                <div class="portal-status">

                    <span class="status-dot"></span>

                    <div class="status-text">

                        <strong>
                            Portal Desa Aktif
                        </strong>

                        <small>
                            Sistem informasi desa sedang online
                        </small>

                    </div>

                </div>


                <div class="portal-info">

                    <span class="info-icon">
                        ℹ
                    </span>

                    <div>

                        <strong>
                            Informasi Desa Oelomin
                        </strong>

                        <small>
                            Informasi pemerintahan, masyarakat,
                            potensi dan kegiatan desa
                        </small>

                    </div>

                </div>

            </div>


        </div>

    </div>

</section>

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

<footer>

    <p>

        © <?= date('Y'); ?>

        <span>
            Portal Desa Digital Desa Oelomin
        </span>

        · Semua Hak Dilindungi

    </p>

</footer>



<!-- =====================================================
     JAVASCRIPT JAM OTOMATIS
===================================================== -->

<script>


function updateClock() {


    const now = new Date();



    /*
       JAM
    */

    let hours =
        String(
            now.getHours()
        ).padStart(2, '0');


    let minutes =
        String(
            now.getMinutes()
        ).padStart(2, '0');


    let seconds =
        String(
            now.getSeconds()
        ).padStart(2, '0');



    document.getElementById(
        "digitalClock"
    ).textContent =
        hours +
        ":" +
        minutes +
        ":" +
        seconds;



    /*
       TANGGAL
    */

    const dateOptions = {

        weekday: "long",

        day: "numeric",

        month: "long",

        year: "numeric"

    };


    const dateText =
        now.toLocaleDateString(
            "id-ID",
            dateOptions
        );


    document.getElementById(
        "currentDate"
    ).textContent =
        dateText;

}



/*
   Jalankan pertama kali
*/

updateClock();



/*
   Update setiap 1 detik
*/

setInterval(
    updateClock,
    1000
);

/* TAMBAHAN NAVBAR MOBILE */
const menuToggle = document.getElementById("menuToggle");
const mainNav = document.getElementById("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");
    } else {
        icon.classList.remove("fa-xmark");
        icon.classList.add("fa-bars");
    }

});

</script>


</body>

</html>