<?php require_once __DIR__ . '/_sidebar.php'; ?>
<main class="flex-1 py-16 md:py-0 md:pl-64">
    <div class="max-w-7xl mx-auto px-4 py-8 md:py-16">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
                <h1 class="text-3xl font-bold text-slate-950">Homepage Service Cards</h1>
                <p class="mt-2 text-slate-600">Create, edit, and remove service cards shown on the homepage services section.</p>
            </div>
            <div class="flex flex-col sm:flex-row gap-3">
                <a href="<?= htmlspecialchars($baseUrl) ?>/admin/cms-services/create" class="inline-flex items-center justify-center rounded-full btn-primary px-5 py-3 text-sm font-semibold text-white hover:bg-rich-crimson transition">Add Service</a>
                <a href="<?= htmlspecialchars($baseUrl) ?>/admin" class="inline-flex items-center justify-center rounded-full border border-slate-300 bg-white px-5 py-3 text-sm text-slate-950 hover:bg-slate-100 transition">Back to Dashboard</a>
            </div>
        </div>

        <div class="mt-10 overflow-x-auto rounded-3xl border border-slate-200 bg-white shadow-lg">
            <table class="min-w-full divide-y divide-slate-200 text-sm">
                <thead class="bg-charcoal text-white">
                    <tr>
                        <th class="px-6 py-4 text-left">Title</th>
                        <th class="px-6 py-4 text-left">Summary</th>
                        <th class="px-6 py-4 text-left">Icon</th>
                        <th class="px-6 py-4 text-left">Active</th>
                        <th class="px-6 py-4 text-left">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200 bg-white">
                    <?php foreach ($services as $service): ?>
                    <tr>
                        <td class="px-6 py-4 text-slate-700"><?= htmlspecialchars($service['title']) ?></td>
                        <td class="px-6 py-4 text-slate-700"><?= nl2br(htmlspecialchars($service['summary'])) ?></td>
                        <td class="px-6 py-4 text-slate-700"><?= htmlspecialchars($service['icon']) ?></td>
                        <td class="px-6 py-4 text-slate-700"><span class="inline-flex rounded-full <?= $service['active'] ? 'bg-emerald-100 text-emerald-800' : 'bg-slate-100 text-slate-600' ?> px-3 py-1 text-xs font-semibold"><?= $service['active'] ? 'Yes' : 'No' ?></span></td>
                        <td class="px-6 py-4 text-slate-700 space-x-2">
                            <a href="<?= htmlspecialchars($baseUrl) ?>/admin/cms-services/edit?id=<?= $service['id'] ?>" class="rounded-full border border-slate-300 px-4 py-2 text-xs font-semibold text-slate-800 hover:bg-slate-50 transition">Edit</a>
                            <form method="post" action="<?= htmlspecialchars($baseUrl) ?>/admin/cms-services/delete" class="inline-block" onsubmit="return confirm('Delete this service?');">
                                <?= CSRF::input() ?>
                                <input type="hidden" name="id" value="<?= $service['id'] ?>">
                                <button type="submit" class="rounded-full bg-rose-600 px-4 py-2 text-xs font-semibold text-white hover:bg-rose-700 transition">Delete</button>
                            </form>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>
</main>
</div>
