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

$db = getDB();

$limit = 10;
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
if ($page < 1) $page = 1;
$offset = ($page - 1) * $limit;

$total_rows = $db->query("SELECT COUNT(*) FROM edukasi")->fetchColumn();
$total_pages = ceil($total_rows / $limit);

$stmt = $db->query("SELECT e.*, k.nama as nama_kategori FROM edukasi e LEFT JOIN kategori_edukasi k ON e.kategori_id = k.id ORDER BY e.created_at DESC LIMIT $limit OFFSET $offset");
$edukasi = $stmt->fetchAll();
?>
<?php require_once '../../includes/header_admin.php'; ?>

<div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
    <div>
        <h1 class="text-2xl font-bold text-gray-800">Artikel Edukasi</h1>
        <p class="text-gray-500 text-sm mt-1">Kelola konten edukasi kesehatan untuk ibu hamil.</p>
    </div>
    <div>
        <a href="tambah" class="inline-flex items-center justify-center px-4 py-2 bg-primary hover:bg-primary-dark text-white font-medium rounded-lg transition-colors shadow-sm focus:ring-2 focus:ring-offset-2 focus:ring-primary">
            <i class="fas fa-plus mr-2"></i> Tambah Artikel Baru
        </a>
    </div>
</div>

<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden mb-8">
    <!-- 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 w-16">No</th>
                    <th class="px-6 py-4 font-semibold w-32">Gambar</th>
                    <th class="px-6 py-4 font-semibold">Judul Artikel</th>
                    <th class="px-6 py-4 font-semibold text-center">Status</th>
                    <th class="px-6 py-4 font-semibold text-center">Views</th>
                    <th class="px-6 py-4 font-semibold text-center">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                <?php if (count($edukasi) > 0): ?>
                    <?php $no = 1; foreach ($edukasi as $row): ?>
                        <tr class="hover:bg-gray-50 transition-colors group">
                            <td class="px-6 py-4 text-gray-500"><?= $no++ ?></td>
                            <td class="px-6 py-4">
                                <?php if($row['gambar']): ?>
                                    <div class="w-20 h-14 rounded-lg overflow-hidden border border-gray-200">
                                        <img src="<?= BASE_URL ?>/assets/uploads/edukasi/<?= escape($row['gambar']) ?>" class="w-full h-full object-cover" alt="img">
                                    </div>
                                <?php else: ?>
                                    <div class="w-20 h-14 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400 border border-gray-200">
                                        <i class="fas fa-image text-xl"></i>
                                    </div>
                                <?php endif; ?>
                            </td>
                            <td class="px-6 py-4">
                                <div class="font-bold text-gray-900 text-base mb-1 group-hover:text-primary transition-colors"><?= escape($row['judul']) ?></div>
                                <div class="flex items-center gap-3 text-xs">
                                    <span class="text-gray-500"><i class="far fa-clock mr-1"></i> <?= formatDate($row['created_at']) ?></span>
                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-blue-50 text-blue-600 border border-blue-200">
                                        <?= escape($row['nama_kategori']) ?>
                                    </span>
                                </div>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <?php if($row['is_published']): ?>
                                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold bg-sky-100 text-sky-800 border border-sky-200">
                                        <i class="fas fa-globe-asia mr-1 text-sky-500"></i> Published
                                    </span>
                                <?php else: ?>
                                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold bg-gray-100 text-gray-800 border border-gray-200">
                                        <i class="fas fa-file-alt mr-1 text-gray-500"></i> Draft
                                    </span>
                                <?php endif; ?>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <span class="font-medium text-gray-700 bg-gray-100 px-3 py-1 rounded-full text-xs"><?= $row['views'] ?></span>
                            </td>
                            <td class="px-6 py-4 text-center space-x-1 whitespace-nowrap">
                                <a href="edit.php?id=<?= $row['id'] ?>" class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-yellow-50 text-yellow-600 hover:bg-yellow-500 hover:text-white transition-colors" title="Edit">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form action="hapus" method="POST" class="inline-block" onsubmit="return confirm('Yakin ingin menghapus artikel ini?');">
                                    <?= csrfField() ?>
                                    <input type="hidden" name="id" value="<?= $row['id'] ?>">
                                    <button type="submit" class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-red-50 text-red-600 hover:bg-red-600 hover:text-white transition-colors" title="Hapus">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                <?php else: ?>
                    <tr>
                        <td colspan="6" class="px-6 py-12 text-center text-gray-500">
                            <i class="fas fa-newspaper text-4xl mb-3 text-gray-300 block"></i>
                            Belum ada artikel edukasi.
                        </td>
                    </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>

    <!-- Mobile Cards -->
    <div class="md:hidden divide-y divide-gray-100">
        <?php if (count($edukasi) > 0): ?>
            <?php foreach ($edukasi as $row): ?>
                <div class="p-4 hover:bg-gray-50 transition-colors">
                    <div class="flex gap-3">
                        <?php if($row['gambar']): ?>
                            <div class="w-16 h-12 rounded-lg overflow-hidden border border-gray-200 flex-shrink-0">
                                <img src="<?= BASE_URL ?>/assets/uploads/edukasi/<?= escape($row['gambar']) ?>" class="w-full h-full object-cover" alt="img">
                            </div>
                        <?php else: ?>
                            <div class="w-16 h-12 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400 border border-gray-200 flex-shrink-0">
                                <i class="fas fa-image"></i>
                            </div>
                        <?php endif; ?>
                        <div class="flex-grow min-w-0">
                            <div class="font-bold text-gray-900 text-sm mb-1 line-clamp-2"><?= escape($row['judul']) ?></div>
                            <div class="flex items-center gap-2 text-xs flex-wrap">
                                <span class="text-gray-500"><i class="far fa-clock mr-0.5"></i> <?= formatDate($row['created_at']) ?></span>
                                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold bg-blue-50 text-blue-600 border border-blue-200">
                                    <?= escape($row['nama_kategori']) ?>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center justify-between mt-3">
                        <div class="flex items-center gap-3">
                            <?php if($row['is_published']): ?>
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-sky-100 text-sky-800 border border-sky-200">
                                    <i class="fas fa-globe-asia mr-1"></i> Published
                                </span>
                            <?php else: ?>
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-gray-100 text-gray-800 border border-gray-200">
                                    <i class="fas fa-file-alt mr-1"></i> Draft
                                </span>
                            <?php endif; ?>
                            <span class="text-xs text-gray-500"><i class="fas fa-eye mr-1"></i> <?= $row['views'] ?></span>
                        </div>
                        <div class="flex gap-1">
                            <a href="edit.php?id=<?= $row['id'] ?>" class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-yellow-50 text-yellow-600 hover:bg-yellow-500 hover:text-white transition-colors" title="Edit">
                                <i class="fas fa-edit"></i>
                            </a>
                            <form action="hapus" method="POST" class="inline-block" onsubmit="return confirm('Yakin ingin menghapus artikel ini?');">
                                <?= csrfField() ?>
                                <input type="hidden" name="id" value="<?= $row['id'] ?>">
                                <button type="submit" class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-red-50 text-red-600 hover:bg-red-600 hover:text-white transition-colors" title="Hapus">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        <?php else: ?>
            <div class="px-6 py-12 text-center text-gray-500">
                <i class="fas fa-newspaper text-4xl mb-3 text-gray-300 block"></i>
                Belum ada artikel edukasi.
            </div>
        <?php endif; ?>
    </div>

    <?= renderPagination($total_pages, $page, './', $_GET) ?>
</div>

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