<?php
require_once __DIR__ . '/../config/session.php';
requireAdmin();
require_once __DIR__ . '/../config/config.php';
require_once __DIR__ . '/../functions/helper.php';

$db = getDB();

// Statistik
$stmt = $db->query("SELECT COUNT(*) FROM ibu_hamil WHERE status = 'Aktif'");
$total_aktif = $stmt->fetchColumn();

$stmt = $db->query("SELECT COUNT(*) FROM ibu_hamil WHERE MONTH(hpl) = MONTH(CURRENT_DATE()) AND YEAR(hpl) = YEAR(CURRENT_DATE()) AND status = 'Aktif'");
$hpl_bulan_ini = $stmt->fetchColumn();

$stmt = $db->query("SELECT COUNT(*) FROM edukasi");
$total_edukasi = $stmt->fetchColumn();

// Ambil data yang trimester 3 (usia kehamilan >= 28 minggu)
// Hitung menggunakan PHP filter dari semua data aktif
$stmt = $db->query("SELECT id, nik, nama_lengkap, hpht, hpl FROM ibu_hamil WHERE status = 'Aktif' ORDER BY hpl ASC");
$semua_aktif = $stmt->fetchAll();

$trimester_3_count = 0;
$mendekati_hpl = [];
$trimester_3_data = [];

foreach ($semua_aktif as $ih) {
    $diff = (new DateTime($ih['hpht']))->diff(new DateTime())->days;
    $minggu = intdiv($diff, 7);
    if ($minggu >= 28) {
        $trimester_3_count++;
        $trimester_3_data[] = [
            'nama' => $ih['nama_lengkap'],
            'nik' => $ih['nik'],
            'hpl' => $ih['hpl'],
            'minggu' => $minggu
        ];
    }
    
    // Ambil 5 teratas yang mendekati HPL bulan ini atau ke depan
    if (count($mendekati_hpl) < 5 && $ih['hpl'] >= date('Y-m-d')) {
        $mendekati_hpl[] = [
            'nama' => $ih['nama_lengkap'],
            'hpl' => $ih['hpl'],
            'minggu' => $minggu
        ];
    }
}

// Data modal: HPL Bulan Ini
$stmt = $db->query("SELECT nama_lengkap, nik, hpl, hpht FROM ibu_hamil WHERE MONTH(hpl) = MONTH(CURRENT_DATE()) AND YEAR(hpl) = YEAR(CURRENT_DATE()) AND status = 'Aktif' ORDER BY hpl ASC");
$hpl_bulan_ini_data = $stmt->fetchAll();

// Data modal: Artikel Edukasi
$stmt = $db->query("SELECT e.judul, k.nama as nama_kategori, e.created_at, e.is_published FROM edukasi e LEFT JOIN kategori_edukasi k ON e.kategori_id = k.id ORDER BY e.created_at DESC LIMIT 20");
$edukasi_data = $stmt->fetchAll();

// Jadwal terdekat
$stmt = $db->query("SELECT * FROM jadwal_posyandu WHERE tanggal >= CURDATE() ORDER BY tanggal ASC LIMIT 2");
$jadwal = $stmt->fetchAll();
?>
<?php require_once '../includes/header_admin.php'; ?>

<div x-data="{ showModal: '' }">

<div class="mb-8">
    <h1 class="text-2xl font-bold text-gray-800">Dashboard</h1>
    <p class="text-gray-500">Ringkasan statistik dan aktivitas Posyandu Tunas Bangsa.</p>
</div>

<!-- Stats Grid -->
<div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-3 md:gap-6 mb-6 md:mb-8">
    
    <!-- Stat 1 -->
    <div @click="showModal = 'aktif'" class="bg-white rounded-xl md:rounded-2xl p-3 md:p-6 shadow-sm border border-gray-100 flex items-center gap-3 md:gap-4 group hover:shadow-md transition-shadow cursor-pointer">
        <div class="w-10 h-10 md:w-14 md:h-14 rounded-full bg-blue-50 text-blue-500 flex items-center justify-center text-lg md:text-2xl group-hover:bg-blue-500 group-hover:text-white transition-colors">
            <i class="fas fa-users"></i>
        </div>
        <div>
            <p class="text-xs md:text-sm font-medium text-gray-500 mb-0.5 md:mb-1">Ibu Hamil Aktif</p>
            <h3 class="text-lg md:text-2xl font-bold text-gray-800"><?= $total_aktif ?></h3>
        </div>
    </div>
    
    <!-- Stat 2 -->
    <div @click="showModal = 'hpl'" class="bg-white rounded-xl md:rounded-2xl p-3 md:p-6 shadow-sm border border-gray-100 flex items-center gap-3 md:gap-4 group hover:shadow-md transition-shadow cursor-pointer">
        <div class="w-10 h-10 md:w-14 md:h-14 rounded-full bg-red-50 text-red-500 flex items-center justify-center text-lg md:text-2xl group-hover:bg-red-500 group-hover:text-white transition-colors">
            <i class="fas fa-baby-carriage"></i>
        </div>
        <div>
            <p class="text-xs md:text-sm font-medium text-gray-500 mb-0.5 md:mb-1">HPL Bulan Ini</p>
            <h3 class="text-lg md:text-2xl font-bold text-gray-800"><?= $hpl_bulan_ini ?></h3>
        </div>
    </div>
    
    <!-- Stat 3 -->
    <div @click="showModal = 'trimester'" class="bg-white rounded-xl md:rounded-2xl p-3 md:p-6 shadow-sm border border-gray-100 flex items-center gap-3 md:gap-4 group hover:shadow-md transition-shadow cursor-pointer">
        <div class="w-10 h-10 md:w-14 md:h-14 rounded-full bg-yellow-50 text-yellow-600 flex items-center justify-center text-lg md:text-2xl group-hover:bg-yellow-500 group-hover:text-white transition-colors">
            <i class="fas fa-exclamation-circle"></i>
        </div>
        <div>
            <p class="text-xs md:text-sm font-medium text-gray-500 mb-0.5 md:mb-1">Trimester 3</p>
            <h3 class="text-lg md:text-2xl font-bold text-gray-800"><?= $trimester_3_count ?></h3>
        </div>
    </div>
    
    <!-- Stat 4 -->
    <div @click="showModal = 'edukasi'" class="bg-white rounded-xl md:rounded-2xl p-3 md:p-6 shadow-sm border border-gray-100 flex items-center gap-3 md:gap-4 group hover:shadow-md transition-shadow cursor-pointer">
        <div class="w-10 h-10 md:w-14 md:h-14 rounded-full bg-sky-50 text-sky-500 flex items-center justify-center text-lg md:text-2xl group-hover:bg-sky-500 group-hover:text-white transition-colors">
            <i class="fas fa-book-medical"></i>
        </div>
        <div>
            <p class="text-xs md:text-sm font-medium text-gray-500 mb-0.5 md:mb-1">Artikel Edukasi</p>
            <h3 class="text-lg md:text-2xl font-bold text-gray-800"><?= $total_edukasi ?></h3>
        </div>
    </div>

</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    
    <!-- Mendekati HPL -->
    <div class="lg:col-span-2 bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-4 md:px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
            <h3 class="font-bold text-gray-800 text-sm md:text-base"><i class="fas fa-calendar-check text-primary mr-2"></i>Mendekati HPL</h3>
            <a href="ibu_hamil/" class="text-xs md:text-sm font-medium text-primary hover:text-primary-dark">Lihat Semua</a>
        </div>
        <!-- Desktop Table -->
        <div class="hidden md:block overflow-x-auto">
            <table class="w-full text-sm text-left">
                <thead class="text-xs text-gray-500 uppercase bg-gray-50 border-b border-gray-100">
                    <tr>
                        <th class="px-6 py-4 font-semibold">Nama Ibu Hamil</th>
                        <th class="px-6 py-4 font-semibold">Usia Kandungan</th>
                        <th class="px-6 py-4 font-semibold">HPL</th>
                        <th class="px-6 py-4 font-semibold text-center">Status</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    <?php if(count($mendekati_hpl) > 0): ?>
                        <?php foreach($mendekati_hpl as $row): ?>
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-6 py-4 font-medium text-gray-900"><?= escape($row['nama']) ?></td>
                                <td class="px-6 py-4">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium <?= $row['minggu'] >= 37 ? 'bg-red-100 text-red-800' : 'bg-blue-100 text-blue-800' ?>">
                                        <?= $row['minggu'] ?> Minggu
                                    </span>
                                </td>
                                <td class="px-6 py-4 font-medium text-danger"><?= formatDate($row['hpl']) ?></td>
                                <td class="px-6 py-4 text-center">
                                    <?php if($row['minggu'] >= 37): ?>
                                        <span class="text-xs font-bold text-red-500"><i class="fas fa-exclamation-triangle"></i> Siaga 1</span>
                                    <?php else: ?>
                                        <span class="text-xs font-medium text-sky-500"><i class="fas fa-check-circle"></i> Aman</span>
                                    <?php endif; ?>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <tr>
                            <td colspan="4" class="px-6 py-8 text-center text-gray-500">Tidak ada data ibu hamil yang mendekati HPL.</td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
        <!-- Mobile Cards -->
        <div class="md:hidden divide-y divide-gray-100">
            <?php if(count($mendekati_hpl) > 0): ?>
                <?php foreach($mendekati_hpl as $row): ?>
                    <div class="p-4 hover:bg-gray-50 transition-colors">
                        <div class="flex items-center justify-between mb-2">
                            <div class="font-medium text-gray-900 text-sm"><?= escape($row['nama']) ?></div>
                            <?php if($row['minggu'] >= 37): ?>
                                <span class="text-[10px] font-bold text-red-500 bg-red-50 px-2 py-0.5 rounded-full"><i class="fas fa-exclamation-triangle"></i> Siaga 1</span>
                            <?php else: ?>
                                <span class="text-[10px] font-medium text-sky-500 bg-sky-50 px-2 py-0.5 rounded-full"><i class="fas fa-check-circle"></i> Aman</span>
                            <?php endif; ?>
                        </div>
                        <div class="flex items-center gap-3 text-xs">
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold <?= $row['minggu'] >= 37 ? 'bg-red-100 text-red-800' : 'bg-blue-100 text-blue-800' ?>"><?= $row['minggu'] ?> Minggu</span>
                            <span class="text-gray-500">HPL: <span class="font-semibold <?= $row['minggu'] >= 37 ? 'text-red-500' : 'text-primary' ?>"><?= date('d M Y', strtotime($row['hpl'])) ?></span></span>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php else: ?>
                <div class="px-4 py-8 text-center text-gray-500 text-sm">Tidak ada data ibu hamil yang mendekati HPL.</div>
            <?php endif; ?>
        </div>
    </div>
    
    <!-- Jadwal Posyandu Terdekat -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-4 md:px-6 py-4 border-b border-gray-100 bg-gray-50/50">
            <h3 class="font-bold text-gray-800 text-sm md:text-base"><i class="fas fa-calendar-alt text-accent mr-2"></i>Jadwal Terdekat</h3>
        </div>
        <div class="p-4 md:p-6">
            <?php if(count($jadwal) > 0): ?>
                <div class="space-y-4 md:space-y-6">
                    <?php foreach($jadwal as $j): ?>
                        <div class="flex gap-3 md:gap-4">
                            <div class="flex-shrink-0 w-12 h-12 md:w-14 md:h-14 bg-accent/10 text-accent rounded-xl flex flex-col items-center justify-center border border-accent/20">
                                <span class="text-lg md:text-xl font-bold leading-none"><?= date('d', strtotime($j['tanggal'])) ?></span>
                                <span class="text-[9px] md:text-[10px] font-bold uppercase mt-0.5"><?= substr(formatBulan(date('m', strtotime($j['tanggal']))), 0, 3) ?></span>
                            </div>
                            <div class="min-w-0">
                                <h4 class="font-bold text-gray-900 text-sm mb-1 line-clamp-1"><?= escape($j['kegiatan']) ?></h4>
                                <p class="text-xs text-gray-500 mb-1"><i class="far fa-clock mr-1"></i> <?= substr($j['waktu_mulai'],0,5) ?> - <?= substr($j['waktu_selesai'],0,5) ?> WIB</p>
                                <p class="text-xs text-gray-500 truncate"><i class="fas fa-map-marker-alt text-red-400 mr-1"></i> <?= escape($j['lokasi']) ?></p>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
                <div class="mt-4 md:mt-6 text-center">
                    <a href="jadwal/" class="inline-block px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-lg transition-colors w-full">Kelola Jadwal</a>
                </div>
            <?php else: ?>
                <div class="text-center py-6">
                    <div class="w-16 h-16 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-calendar-times text-2xl text-gray-300"></i>
                    </div>
                    <p class="text-sm text-gray-500">Belum ada jadwal posyandu mendatang.</p>
                </div>
            <?php endif; ?>
        </div>
    </div>

<!-- ================= MODALS ================= -->

<!-- Modal: Ibu Hamil Aktif -->
    <!-- Backdrop -->
    <template x-if="showModal === 'aktif'">
        <div class="fixed inset-0 z-50 flex items-center justify-center p-4" @click.self="showModal = ''">
            <div class="absolute inset-0 bg-black/50" @click="showModal = ''"></div>
            
            <!-- Modal Content -->
            <div x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" class="relative bg-white rounded-2xl shadow-2xl w-full max-w-2xl max-h-[80vh] flex flex-col z-10">
                <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50/50 rounded-t-2xl">
                    <h3 class="font-bold text-gray-800"><i class="fas fa-users text-blue-500 mr-2"></i>Ibu Hamil Aktif (<?= $total_aktif ?>)</h3>
                    <button @click="showModal = ''" class="w-8 h-8 rounded-lg hover:bg-gray-200 flex items-center justify-center text-gray-400 hover:text-gray-600 transition-colors"><i class="fas fa-times"></i></button>
                </div>
                <div class="overflow-auto p-4 md:p-6">
                    <!-- Desktop Table -->
                    <div class="hidden md:block">
                    <table class="w-full text-sm text-left">
                        <thead class="text-xs text-gray-500 uppercase border-b border-gray-100">
                            <tr>
                                <th class="pb-3 font-semibold">No</th>
                                <th class="pb-3 font-semibold">Nama</th>
                                <th class="pb-3 font-semibold">NIK</th>
                                <th class="pb-3 font-semibold text-center">Usia Kehamilan</th>
                                <th class="pb-3 font-semibold text-center">HPL</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-50">
                            <?php $no=1; foreach($semua_aktif as $row):
                                $diff = (new DateTime($row['hpht']))->diff(new DateTime())->days;
                                $minggu = intdiv($diff, 7);
                            ?>
                                <tr class="hover:bg-gray-50">
                                    <td class="py-3 text-gray-500"><?= $no++ ?></td>
                                    <td class="py-3 font-medium text-gray-900"><?= escape($row['nama_lengkap']) ?></td>
                                    <td class="py-3 text-gray-500"><?= escape($row['nik']) ?></td>
                                    <td class="py-3 text-center"><span class="px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"><?= $minggu ?> Minggu</span></td>
                                    <td class="py-3 text-center font-medium <?= $row['hpl'] < date('Y-m-d') ? 'text-red-500' : 'text-gray-900' ?>"><?= date('d M Y', strtotime($row['hpl'])) ?></td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                    </div>
                    <!-- Mobile Cards -->
                    <div class="md:hidden divide-y divide-gray-100">
                        <?php $no=1; foreach($semua_aktif as $row):
                            $diff = (new DateTime($row['hpht']))->diff(new DateTime())->days;
                            $minggu = intdiv($diff, 7);
                        ?>
                            <div class="py-3">
                                <div class="flex items-center justify-between mb-1">
                                    <span class="font-medium text-gray-900 text-sm"><?= escape($row['nama_lengkap']) ?></span>
                                    <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-blue-100 text-blue-800"><?= $minggu ?> mgg</span>
                                </div>
                                <div class="text-xs text-gray-500">NIK: <?= escape($row['nik']) ?> · HPL: <span class="font-semibold <?= $row['hpl'] < date('Y-m-d') ? 'text-red-500' : 'text-primary' ?>"><?= date('d M Y', strtotime($row['hpl'])) ?></span></div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
                <div class="px-4 md:px-6 py-3 border-t border-gray-100 bg-gray-50/50 rounded-b-2xl text-right">
                    <a href="ibu_hamil/" class="text-sm font-medium text-primary hover:text-primary-dark">Kelola Data Ibu Hamil <i class="fas fa-arrow-right text-xs ml-1"></i></a>
                </div>
            </div>
        </div>
    </template>

    <!-- Modal: HPL Bulan Ini -->
    <template x-if="showModal === 'hpl'">
        <div class="fixed inset-0 z-50 flex items-center justify-center p-4" @click.self="showModal = ''">
            <div class="absolute inset-0 bg-black/50" @click="showModal = ''"></div>
            <div x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" class="relative bg-white rounded-2xl shadow-2xl w-full max-w-2xl max-h-[80vh] flex flex-col z-10">
                <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50/50 rounded-t-2xl">
                    <h3 class="font-bold text-gray-800"><i class="fas fa-baby-carriage text-red-500 mr-2"></i>HPL Bulan Ini (<?= $hpl_bulan_ini ?>)</h3>
                    <button @click="showModal = ''" class="w-8 h-8 rounded-lg hover:bg-gray-200 flex items-center justify-center text-gray-400 hover:text-gray-600 transition-colors"><i class="fas fa-times"></i></button>
                </div>
                <div class="overflow-auto p-4 md:p-6">
                    <?php if(count($hpl_bulan_ini_data) > 0): ?>
                    <!-- Desktop Table -->
                    <div class="hidden md:block">
                    <table class="w-full text-sm text-left">
                        <thead class="text-xs text-gray-500 uppercase border-b border-gray-100">
                            <tr>
                                <th class="pb-3 font-semibold">No</th>
                                <th class="pb-3 font-semibold">Nama</th>
                                <th class="pb-3 font-semibold">NIK</th>
                                <th class="pb-3 font-semibold text-center">Usia Kehamilan</th>
                                <th class="pb-3 font-semibold text-center">HPL</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-50">
                            <?php $no=1; foreach($hpl_bulan_ini_data as $row):
                                $diff = (new DateTime($row['hpht']))->diff(new DateTime())->days;
                                $minggu = intdiv($diff, 7);
                            ?>
                                <tr class="hover:bg-gray-50">
                                    <td class="py-3 text-gray-500"><?= $no++ ?></td>
                                    <td class="py-3 font-medium text-gray-900"><?= escape($row['nama_lengkap']) ?></td>
                                    <td class="py-3 text-gray-500"><?= escape($row['nik']) ?></td>
                                    <td class="py-3 text-center"><span class="px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800"><?= $minggu ?> Minggu</span></td>
                                    <td class="py-3 text-center font-bold text-red-500"><?= date('d M Y', strtotime($row['hpl'])) ?></td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                    </div>
                    <!-- Mobile Cards -->
                    <div class="md:hidden divide-y divide-gray-100">
                        <?php foreach($hpl_bulan_ini_data as $row):
                            $diff = (new DateTime($row['hpht']))->diff(new DateTime())->days;
                            $minggu = intdiv($diff, 7);
                        ?>
                            <div class="py-3">
                                <div class="flex items-center justify-between mb-1">
                                    <span class="font-medium text-gray-900 text-sm"><?= escape($row['nama_lengkap']) ?></span>
                                    <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-red-100 text-red-800"><?= $minggu ?> mgg</span>
                                </div>
                                <div class="text-xs text-gray-500">NIK: <?= escape($row['nik']) ?> · HPL: <span class="font-bold text-red-500"><?= date('d M Y', strtotime($row['hpl'])) ?></span></div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                    <?php else: ?>
                        <div class="text-center py-8 text-gray-500">
                            <i class="fas fa-check-circle text-3xl text-green-300 mb-3 block"></i>
                            <p>Tidak ada ibu hamil dengan HPL bulan ini.</p>
                        </div>
                    <?php endif; ?>
                </div>
                <div class="px-4 md:px-6 py-3 border-t border-gray-100 bg-gray-50/50 rounded-b-2xl text-right">
                    <a href="ibu_hamil/" class="text-sm font-medium text-primary hover:text-primary-dark">Kelola Data Ibu Hamil <i class="fas fa-arrow-right text-xs ml-1"></i></a>
                </div>
            </div>
        </div>
    </template>

    <!-- Modal: Trimester 3 -->
    <template x-if="showModal === 'trimester'">
        <div class="fixed inset-0 z-50 flex items-center justify-center p-4" @click.self="showModal = ''">
            <div class="absolute inset-0 bg-black/50" @click="showModal = ''"></div>
            <div x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" class="relative bg-white rounded-2xl shadow-2xl w-full max-w-2xl max-h-[80vh] flex flex-col z-10">
                <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50/50 rounded-t-2xl">
                    <h3 class="font-bold text-gray-800"><i class="fas fa-exclamation-circle text-yellow-500 mr-2"></i>Trimester 3 (<?= $trimester_3_count ?>)</h3>
                    <button @click="showModal = ''" class="w-8 h-8 rounded-lg hover:bg-gray-200 flex items-center justify-center text-gray-400 hover:text-gray-600 transition-colors"><i class="fas fa-times"></i></button>
                </div>
                <div class="overflow-auto p-4 md:p-6">
                    <?php if(count($trimester_3_data) > 0): ?>
                    <!-- Desktop Table -->
                    <div class="hidden md:block">
                    <table class="w-full text-sm text-left">
                        <thead class="text-xs text-gray-500 uppercase border-b border-gray-100">
                            <tr>
                                <th class="pb-3 font-semibold">No</th>
                                <th class="pb-3 font-semibold">Nama</th>
                                <th class="pb-3 font-semibold">NIK</th>
                                <th class="pb-3 font-semibold text-center">Usia Kehamilan</th>
                                <th class="pb-3 font-semibold text-center">HPL</th>
                                <th class="pb-3 font-semibold text-center">Keterangan</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-50">
                            <?php $no=1; foreach($trimester_3_data as $row): ?>
                                <tr class="hover:bg-gray-50">
                                    <td class="py-3 text-gray-500"><?= $no++ ?></td>
                                    <td class="py-3 font-medium text-gray-900"><?= escape($row['nama']) ?></td>
                                    <td class="py-3 text-gray-500"><?= escape($row['nik']) ?></td>
                                    <td class="py-3 text-center"><span class="px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"><?= $row['minggu'] ?> Minggu</span></td>
                                    <td class="py-3 text-center font-medium <?= $row['hpl'] < date('Y-m-d') ? 'text-red-500' : 'text-gray-900' ?>"><?= date('d M Y', strtotime($row['hpl'])) ?></td>
                                    <td class="py-3 text-center">
                                        <?php if($row['minggu'] >= 37): ?>
                                            <span class="text-xs font-bold text-red-500"><i class="fas fa-exclamation-triangle"></i> Siaga 1</span>
                                        <?php else: ?>
                                            <span class="text-xs font-medium text-yellow-600"><i class="fas fa-info-circle"></i> Trimester 3</span>
                                        <?php endif; ?>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                    </div>
                    <!-- Mobile Cards -->
                    <div class="md:hidden divide-y divide-gray-100">
                        <?php foreach($trimester_3_data as $row): ?>
                            <div class="py-3">
                                <div class="flex items-center justify-between mb-1">
                                    <span class="font-medium text-gray-900 text-sm"><?= escape($row['nama']) ?></span>
                                    <?php if($row['minggu'] >= 37): ?>
                                        <span class="text-[10px] font-bold text-red-500 bg-red-50 px-2 py-0.5 rounded-full"><i class="fas fa-exclamation-triangle"></i> Siaga 1</span>
                                    <?php else: ?>
                                        <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-yellow-100 text-yellow-800"><?= $row['minggu'] ?> mgg</span>
                                    <?php endif; ?>
                                </div>
                                <div class="text-xs text-gray-500">NIK: <?= escape($row['nik']) ?> · HPL: <span class="font-semibold <?= $row['hpl'] < date('Y-m-d') ? 'text-red-500' : 'text-primary' ?>"><?= date('d M Y', strtotime($row['hpl'])) ?></span></div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                    <?php else: ?>
                        <div class="text-center py-8 text-gray-500">
                            <i class="fas fa-check-circle text-3xl text-green-300 mb-3 block"></i>
                            <p>Tidak ada ibu hamil di trimester 3 saat ini.</p>
                        </div>
                    <?php endif; ?>
                </div>
                <div class="px-4 md:px-6 py-3 border-t border-gray-100 bg-gray-50/50 rounded-b-2xl text-right">
                    <a href="ibu_hamil/" class="text-sm font-medium text-primary hover:text-primary-dark">Kelola Data Ibu Hamil <i class="fas fa-arrow-right text-xs ml-1"></i></a>
                </div>
            </div>
        </div>
    </template>

    <!-- Modal: Artikel Edukasi -->
    <template x-if="showModal === 'edukasi'">
        <div class="fixed inset-0 z-50 flex items-center justify-center p-4" @click.self="showModal = ''">
            <div class="absolute inset-0 bg-black/50" @click="showModal = ''"></div>
            <div x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" class="relative bg-white rounded-2xl shadow-2xl w-full max-w-2xl max-h-[80vh] flex flex-col z-10">
                <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50/50 rounded-t-2xl">
                    <h3 class="font-bold text-gray-800"><i class="fas fa-book-medical text-sky-500 mr-2"></i>Artikel Edukasi (<?= $total_edukasi ?>)</h3>
                    <button @click="showModal = ''" class="w-8 h-8 rounded-lg hover:bg-gray-200 flex items-center justify-center text-gray-400 hover:text-gray-600 transition-colors"><i class="fas fa-times"></i></button>
                </div>
                <div class="overflow-auto p-4 md:p-6">
                    <?php if(count($edukasi_data) > 0): ?>
                    <!-- Desktop Table -->
                    <div class="hidden md:block">
                    <table class="w-full text-sm text-left">
                        <thead class="text-xs text-gray-500 uppercase border-b border-gray-100">
                            <tr>
                                <th class="pb-3 font-semibold">No</th>
                                <th class="pb-3 font-semibold">Judul</th>
                                <th class="pb-3 font-semibold">Kategori</th>
                                <th class="pb-3 font-semibold text-center">Status</th>
                                <th class="pb-3 font-semibold">Tanggal</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-50">
                            <?php $no=1; foreach($edukasi_data as $row): ?>
                                <tr class="hover:bg-gray-50">
                                    <td class="py-3 text-gray-500"><?= $no++ ?></td>
                                    <td class="py-3 font-medium text-gray-900 max-w-[200px] truncate"><?= escape($row['judul']) ?></td>
                                    <td class="py-3"><span class="px-2 py-0.5 rounded-full text-xs font-medium bg-sky-100 text-sky-800"><?= escape($row['nama_kategori'] ?? '-') ?></span></td>
                                    <td class="py-3 text-center">
                                        <?php if($row['is_published']): ?>
                                            <span class="px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Published</span>
                                        <?php else: ?>
                                            <span class="px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">Draft</span>
                                        <?php endif; ?>
                                    </td>
                                    <td class="py-3 text-gray-500"><?= formatDate($row['created_at']) ?></td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                    </div>
                    <!-- Mobile Cards -->
                    <div class="md:hidden divide-y divide-gray-100">
                        <?php foreach($edukasi_data as $row): ?>
                            <div class="py-3">
                                <div class="flex items-center justify-between mb-1">
                                    <span class="font-medium text-gray-900 text-sm line-clamp-1 pr-2"><?= escape($row['judul']) ?></span>
                                    <?php if($row['is_published']): ?>
                                        <span class="px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-green-100 text-green-800 flex-shrink-0">Published</span>
                                    <?php else: ?>
                                        <span class="px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-gray-100 text-gray-800 flex-shrink-0">Draft</span>
                                    <?php endif; ?>
                                </div>
                                <div class="text-xs text-gray-500">
                                    <span class="px-1.5 py-0.5 rounded-full text-[10px] font-medium bg-sky-100 text-sky-800"><?= escape($row['nama_kategori'] ?? '-') ?></span>
                                    <span class="ml-2"><?= formatDate($row['created_at']) ?></span>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                    <?php else: ?>
                        <div class="text-center py-8 text-gray-500">
                            <i class="fas fa-book text-3xl text-gray-300 mb-3 block"></i>
                            <p>Belum ada artikel edukasi.</p>
                        </div>
                    <?php endif; ?>
                </div>
                <div class="px-4 md:px-6 py-3 border-t border-gray-100 bg-gray-50/50 rounded-b-2xl text-right">
                    <a href="edukasi/" class="text-sm font-medium text-primary hover:text-primary-dark">Kelola Artikel <i class="fas fa-arrow-right text-xs ml-1"></i></a>
                </div>
            </div>
        </div>
    </template>

</div>

<?php require_once '../includes/footer_admin.php'; ?>
