<?php
// kader/dashboard.php
session_start();
require_once '../config.php';

if (!isset($_SESSION['role']) || $_SESSION['role'] !== 'kader') {
    header("Location: ../login.php");
    exit;
}

$id_posyandu = $_SESSION['posyandu'];
$nama_kader = $_SESSION['nama'];

// Ambil Nama Posyandu
$stmt = $pdo->prepare("SELECT nama_posyandu FROM posyandu WHERE id_posyandu = ?");
$stmt->execute([$id_posyandu]);
$posyandu = $stmt->fetch();

// Hitung Statistik untuk diletakkan di kartu
$total_balita_stmt = $pdo->prepare("
    SELECT COUNT(*) 
    FROM balita 
    WHERE id_posyandu = ? 
    AND TIMESTAMPDIFF(MONTH, tgl_lahir, CURDATE()) <= 60
");
$total_balita_stmt->execute([$id_posyandu]);
$total_balita = $total_balita_stmt->fetchColumn();

$total_bumil = $pdo->prepare("SELECT COUNT(*) FROM ibu_hamil WHERE id_posyandu = ?");
$total_bumil->execute([$id_posyandu]);
$total_bumil = $total_bumil->fetchColumn();

$total_lansia = $pdo->prepare("SELECT COUNT(*) FROM lansia WHERE id_posyandu = ?");
$total_lansia->execute([$id_posyandu]);
$total_lansia = $total_lansia->fetchColumn();
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Dashboard Kader</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>
        body { background-color: #f4f7fe; font-family: 'Segoe UI', sans-serif; }
        
        .header-section {
            background: linear-gradient(135deg, #0d6efd 0%, #004fb1 100%);
            color: white;
            padding: 30px 20px 40px;
            border-bottom-left-radius: 40px;
            border-bottom-right-radius: 40px;
            margin-bottom: -20px;
        }

        .header-content h5 { font-weight: 300; opacity: 0.9; margin-bottom: 2px; font-size: 0.95rem; }
        .header-content h2 { font-weight: 800; font-size: 1.6rem; margin-bottom: 5px; }
        .posyandu-tag {
            display: inline-block;
            background: rgba(255,255,255,0.2);
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.75rem;
            backdrop-filter: blur(5px);
        }

        .menu-container { padding: 0 15px; }

        .menu-card {
            position: relative;
            border: none;
            border-radius: 22px;
            text-decoration: none;
            color: #333;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 25px 10px;
            background: white;
            box-shadow: 0 8px 15px rgba(0,0,0,0.04);
            transition: all 0.2s ease;
            height: 100%;
        }
        .menu-card:active { transform: scale(0.95); }
        
        /* Badge Angka di Pojok Kanan Atas */
        .count-badge {
            position: absolute;
            top: 12px;
            right: 12px;
            background: #f8f9fa;
            color: #0d6efd;
            font-weight: 800;
            font-size: 0.8rem;
            width: 30px;
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            border: 1px solid #eee;
        }

        .menu-icon { font-size: 2.5rem; margin-bottom: 12px; }
        .menu-label { font-size: 1rem; font-weight: 700; color: #444; }

        .bg-balita { color: #5dade2; }
        .bg-bumil { color: #ec7063; }
        .bg-lansia { color: #58d68d; }
        .bg-laporan { color: #f5b041; }
        .bg-galeri { color: #af7ac5; }

        .btn-logout { 
            display: inline-flex;
            align-items: center;
            padding: 8px 25px;
            border-radius: 30px;
            font-size: 0.85rem;
            font-weight: 700;
            margin: 25px 0 10px;
            border: 2px solid #e74c3c;
            color: #e74c3c;
            text-decoration: none;
        }
        
        /* Footer Nama Aplikasi */
        .app-footer {
            font-size: 0.65rem;
            color: #aaa;
            letter-spacing: 0.5px;
            padding-bottom: 20px;
        }
    </style>
</head>
<body>

<div class="header-section">
    <div class="header-content">
        <h5>Selamat bertugas,</h5>
        <h2><?= htmlspecialchars($nama_kader) ?></h2>
        <div class="posyandu-tag">
            <i class="fa fa-house-medical me-1"></i> <?= htmlspecialchars($posyandu['nama_posyandu']) ?>
        </div>
    </div>
</div>

<div class="menu-container">
    <div class="row g-3">
        <div class="col-6">
            <a href="balita_index.php" class="menu-card">
                <div class="count-badge"><?= $total_balita ?></div>
                <i class="fa-solid fa-baby menu-icon bg-balita"></i>
                <span class="menu-label">Balita</span>
            </a>
        </div>
        
        <div class="col-6">
            <a href="bumil_index.php" class="menu-card">
                <div class="count-badge"><?= $total_bumil ?></div>
                <i class="fa-solid fa-person-pregnant menu-icon bg-bumil"></i>
                <span class="menu-label">Ibu Hamil</span>
            </a>
        </div>
        
        <div class="col-6">
            <a href="lansia_index.php" class="menu-card">
                <div class="count-badge"><?= $total_lansia ?></div>
                <i class="fa-solid fa-person-cane menu-icon bg-lansia"></i>
                <span class="menu-label">Lansia</span>
            </a>
        </div>

        <div class="col-6">
            <a href="laporan_kader.php" class="menu-card">
                <i class="fa-solid fa-clipboard-check menu-icon bg-laporan"></i>
                <span class="menu-label">Laporan</span>
            </a>
        </div>

        <div class="col-12">
            <a href="gallery_kader.php" class="menu-card flex-row py-3">
                <i class="fa-solid fa-camera-retro menu-icon bg-galeri me-3 mb-0" style="font-size: 2rem;"></i>
                <span class="menu-label">Dokumentasi</span>
            </a>
        </div>
    </div>

    <div class="text-center">
        <a href="../logout.php" class="btn-logout" onclick="return confirm('Yakin ingin keluar?')">
            <i class="fa-solid fa-arrow-right-from-bracket me-2"></i> KELUAR
        </a>
        <div class="app-footer">
            Digitalisasi Pelayanan Posyandu v.1.0 Desa Gemuruh
        </div>
    </div>
</div>

</body>
</html>