<?php
require_once __DIR__ . '/../config/session.php';
requireLogin();
if($_SESSION['role'] !== 'user') {
    header('Location: ' . BASE_URL . '/admin/dashboard');
    exit;
}
require_once __DIR__ . '/../config/config.php';
require_once __DIR__ . '/../functions/helper.php';

$db = getDB();

$stmt = $db->query("SELECT * FROM jadwal_posyandu ORDER BY tanggal DESC");
$jadwal = $stmt->fetchAll();
?>
<?php require_once '../includes/header_user.php'; ?>

<div class="mb-8">
    <h2 class="text-2xl font-bold text-gray-800">Jadwal Posyandu</h2>
    <p class="text-gray-500">Ikuti terus jadwal kegiatan bulanan posyandu agar tidak terlewatkan.</p>
</div>

<div class="max-w-3xl mx-auto">
    <?php if(count($jadwal)>0): ?>
        <div class="relative border-l-2 border-primary/20 ml-4 md:ml-8 space-y-8 pb-8">
            <?php foreach($jadwal as $j): ?>
                <?php 
                    $is_past = (new DateTime($j['tanggal'])) < (new DateTime(date('Y-m-d')));
                    $is_today = $j['tanggal'] == date('Y-m-d');
                    
                    $dotColor = $is_today ? 'bg-primary border-4 border-primary/30' : ($is_past ? 'bg-gray-300' : 'bg-primary');
                    $cardClass = $is_today ? 'border-2 border-primary/50 shadow-md bg-white' : ($is_past ? 'bg-gray-50 opacity-80 border border-gray-100' : 'bg-white shadow-sm border border-gray-100 hover:shadow-md transition-shadow');
                ?>
                <div class="relative pl-8 md:pl-12">
                    <!-- Timeline Dot -->
                    <div class="absolute w-5 h-5 rounded-full <?= $dotColor ?> -left-[11px] top-6 transform shadow-sm z-10">
                        <?php if($is_today): ?>
                            <div class="absolute inset-0 rounded-full border-2 border-primary animate-ping opacity-75"></div>
                        <?php endif; ?>
                    </div>
                    
                    <!-- Card -->
                    <div class="rounded-2xl p-6 md:p-8 <?= $cardClass ?> relative overflow-hidden group">
                        <?php if($is_today): ?>
                            <div class="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-bl-full -mr-8 -mt-8 pointer-events-none"></div>
                        <?php endif; ?>
                        
                        <div class="flex flex-col md:flex-row gap-6 items-start md:items-center relative z-10">
                            <!-- Date Box -->
                            <div class="flex-shrink-0 text-center w-24">
                                <span class="block text-4xl font-black <?= $is_past ? 'text-gray-400' : 'text-primary' ?> leading-none mb-1">
                                    <?= date('d', strtotime($j['tanggal'])) ?>
                                </span>
                                <span class="block text-sm font-bold text-gray-500 uppercase tracking-widest">
                                    <?= formatBulan(date('m', strtotime($j['tanggal']))) ?>
                                </span>
                                <span class="block text-xs text-gray-400 mt-1">
                                    <?= date('Y', strtotime($j['tanggal'])) ?>
                                </span>
                            </div>
                            
                            <!-- Divider -->
                            <div class="hidden md:block w-px h-16 bg-gray-200"></div>
                            
                            <!-- Details -->
                            <div class="flex-grow">
                                <div class="flex items-center gap-3 mb-2">
                                    <h4 class="text-xl font-bold <?= $is_past ? 'text-gray-600' : 'text-gray-900' ?>">
                                        <?= escape($j['kegiatan']) ?>
                                    </h4>
                                    <?php if($is_today): ?>
                                        <span class="bg-primary text-white text-[10px] font-bold px-2 py-0.5 rounded-sm animate-pulse">HARI INI</span>
                                    <?php elseif($is_past): ?>
                                        <span class="bg-gray-200 text-gray-500 text-[10px] font-bold px-2 py-0.5 rounded-sm">SELESAI</span>
                                    <?php endif; ?>
                                </div>
                                
                                <div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-6 text-sm text-gray-600 font-medium mb-3">
                                    <div class="flex items-center gap-2">
                                        <i class="fas fa-clock text-primary/80"></i>
                                        <span><?= substr($j['waktu_mulai'],0,5) ?> - <?= substr($j['waktu_selesai'],0,5) ?> WIB</span>
                                    </div>
                                    <div class="flex items-center gap-2">
                                        <i class="fas fa-map-marker-alt text-red-400"></i>
                                        <span><?= escape($j['lokasi']) ?></span>
                                    </div>
                                </div>
                                
                                <?php if($j['keterangan']): ?>
                                    <div class="bg-gray-50 rounded-lg p-3 text-sm text-gray-600 mt-2 border border-gray-100 flex gap-2 items-start">
                                        <i class="fas fa-info-circle text-primary mt-0.5"></i>
                                        <p><?= escape($j['keterangan']) ?></p>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    <?php else: ?>
        <div class="bg-white rounded-3xl shadow-sm border border-gray-100 p-12 text-center">
            <div class="w-24 h-24 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-6">
                <i class="fas fa-calendar-times text-4xl text-gray-300"></i>
            </div>
            <h3 class="text-2xl font-bold text-gray-800 mb-3">Jadwal Belum Tersedia</h3>
            <p class="text-gray-500 max-w-md mx-auto">Admin posyandu belum menambahkan jadwal kegiatan terbaru. Silakan cek kembali beberapa hari lagi.</p>
        </div>
    <?php endif; ?>
</div>

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