<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
require_once 'config.php';
// Ambil data Slider
$sliders = $pdo->query("SELECT * FROM slider ORDER BY id_slider DESC LIMIT 3")->fetchAll();
// Ambil Berita Terbaru
$berita  = $pdo->query("SELECT * FROM berita ORDER BY tgl_posting DESC LIMIT 3")->fetchAll();
// Ambil Jadwal Terdekat
$jadwal  = $pdo->query("SELECT * FROM agenda_publik WHERE tgl_pelaksanaan >= CURDATE() ORDER BY tgl_pelaksanaan ASC LIMIT 2")->fetchAll();
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Posyandu Desa Gemuruh</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .hero-slider img { height: 500px; object-fit: cover; filter: brightness(0.7); }
        .chart-container { background: white; border-radius: 15px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
        .footer { background: #2c3e50; color: white; padding: 50px 0 20px; }
    </style>
</head>
<body class="bg-light">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
    <div class="container">
        <a class="navbar-brand fw-bold" href="#"><i class="fa fa-heartbeat text-danger me-2"></i>LESTARI WIDODO</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item"><a class="nav-link" href="#beranda">Beranda</a></li>
                <li class="nav-item"><a class="nav-link" href="#grafik">Grafik Kesehatan</a></li>
                <li class="nav-item"><a class="nav-link" href="#jadwal">Jadwal</a></li>
                <li class="nav-item"><a class="nav-link btn btn-primary text-white px-4 ms-lg-3" href="login.php">LOGIN</a></li>
            </ul>
        </div>
    </div>
</nav>

<div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner hero-slider">
        <?php foreach($sliders as $key => $s): ?>
        <div class="carousel-item <?= $key == 0 ? 'active' : '' ?>">
            <img src="assets/img/slider/<?= $s['gambar'] ?>" class="d-block w-100">
            <div class="carousel-caption d-none d-md-block mb-5">
                <h1 class="display-4 fw-bold"><?= $s['judul_slider'] ?></h1>
                <p class="lead"><?= $s['sub_judul'] ?></p>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
</div>

<div class="container my-5" id="grafik">
    <div class="text-center mb-5">
        <h2 class="fw-bold">Statistik Kesehatan Balita</h2>
        <p class="text-muted">Data real-time kondisi balita di desa kami</p>
    </div>
    
    <div class="row g-4">
        <div class="col-md-6">
            <div class="chart-container">
                <h6 class="fw-bold mb-4"><i class="fa fa-chart-bar me-2 text-primary"></i>Distribusi Usia Balita</h6>
                <canvas id="grafikUsia"></canvas>
            </div>
        </div>
        <div class="col-md-6">
            <div class="chart-container">
                <h6 class="fw-bold mb-4"><i class="fa fa-chart-pie me-2 text-success"></i>Status Gizi (Stunting)</h6>
                <canvas id="grafikGizi"></canvas>
            </div>
        </div>
    </div>
</div>



<div class="container my-5" id="jadwal">
    <div class="row g-4">
        <div class="col-md-8">
            <h4 class="fw-bold mb-4 border-start border-4 border-primary ps-3">Berita & Edukasi</h4>
            <div class="row g-3">
                <?php foreach($berita as $b): ?>
                <div class="col-12">
                    <div class="card border-0 shadow-sm rounded-3">
                        <div class="row g-0">
                            <div class="col-4">
                                <img src="assets/img/berita/<?= $b['gambar'] ?>" class="img-fluid rounded-start h-100" style="object-fit:cover;">
                            </div>
                            <div class="col-8">
                                <div class="card-body">
                                    <h5 class="card-title fw-bold"><?= $b['judul'] ?></h5>
                                    <p class="card-text text-muted small"><?= substr($b['isi'], 0, 100) ?>...</p>
                                    <a href="detail_berita.php?id=<?= $b['id_berita'] ?>" class="btn btn-sm btn-link p-0">Baca Selengkapnya</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>

        <div class="col-md-4">
            <h4 class="fw-bold mb-4 border-start border-4 border-success ps-3">Jadwal Posyandu</h4>
            <?php foreach($jadwal as $j): ?>
            <div class="card border-0 bg-success text-white mb-3 rounded-4 shadow-sm">
                <div class="card-body">
                    <h6 class="fw-bold mb-1"><?= $j['kegiatan'] ?></h6>
                    <small><i class="fa fa-calendar me-2"></i><?= date('d M Y', strtotime($j['tgl_pelaksanaan'])) ?></small><br>
                    <small><i class="fa fa-map-marker-alt me-2"></i><?= $j['lokasi'] ?></small>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<footer class="footer mt-5">
    <div class="container text-center">
        <h4 class="fw-bold mb-3">LESTARI WIDODO - Posyandu Desa Gemuruh</h4>
        <p class="small opacity-75">Melayani dengan hati untuk generasi sehat masa depan.</p>
        <div class="my-4">
            <a href="#" class="text-white mx-2"><i class="fab fa-facebook fa-lg"></i></a>
            <a href="#" class="text-white mx-2"><i class="fab fa-instagram fa-lg"></i></a>
            <a href="#" class="text-white mx-2"><i class="fab fa-whatsapp fa-lg"></i></a>
        </div>
        <hr class="opacity-25">
        <p class="small mb-0">&copy; 2026 | Digitalisasi Pelayanan Posyandu v.1.0 Desa Gemuruh</p>
    </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    // Memanggil data dari file get_data_grafik.php yang kita buat tadi
    fetch('get_data_grafik.php')
        .then(response => response.json())
        .then(data => {
            // Grafik Usia
            new Chart(document.getElementById('grafikUsia'), {
                type: 'bar',
                data: {
                    labels: data.labels_usia,
                    datasets: [{
                        label: 'Balita',
                        data: data.data_usia,
                        backgroundColor: '#0d6efd'
                    }]
                }
            });

            // Grafik Gizi
            new Chart(document.getElementById('grafikGizi'), {
                type: 'doughnut',
                data: {
                    labels: data.data_gizi.labels,
                    datasets: [{
                        data: data.data_gizi.total,
                        backgroundColor: ['#dc3545', '#198754', '#ffc107']
                    }]
                }
            });
        });
</script>
</body>
</html>