<?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 Hero Slides</h1>
                <p class="mt-2 text-slate-600">Create, update, and remove slides used in the homepage hero carousel.</p>
            </div>
            <div class="flex flex-col sm:flex-row gap-3">
                <a href="<?= htmlspecialchars($baseUrl) ?>/admin/cms-slides/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 Slide</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 space-y-4">
            <?php if (empty($slides)): ?>
                <div class="rounded-3xl border border-slate-200 bg-white p-12 text-center text-slate-500 shadow-lg">
                    <p class="text-lg font-medium">No slides found yet.</p>
                    <p class="mt-2">Add a hero slide to begin managing homepage hero content.</p>
                </div>
            <?php else: ?>
                <?php foreach ($slides as $index => $slide): ?>
                    <?php $imageUrl = preg_match('/^https?:\/\//i', $slide['image_path']) ? $slide['image_path'] : $baseUrl . $slide['image_path']; ?>
                    <div class="group rounded-3xl border-2 bg-white shadow-lg hover:shadow-xl transition-all duration-300 <?= $slide['active'] ? 'border-emerald-300 bg-emerald-50/30' : 'border-slate-200' ?>">
                        <div class="p-6">
                            <div class="grid grid-cols-1 lg:grid-cols-[240px_1fr] gap-6">
                                <!-- Image Preview -->
                                <div class="relative rounded-3xl overflow-hidden border-2 border-slate-200 group-hover:border-slate-300">
                                    <img src="<?= htmlspecialchars($imageUrl) ?>" alt="<?= htmlspecialchars($slide['title']) ?>" class="h-56 w-full object-cover bg-slate-100" />
                                    <?php if ($slide['active']): ?>
                                        <div class="absolute top-3 left-3 inline-flex items-center gap-2 rounded-full bg-emerald-500 px-3 py-1 text-xs font-semibold text-white">
                                            <span class="inline-block h-2 w-2 rounded-full bg-white"></span>
                                            Preview on homepage
                                        </div>
                                    <?php endif; ?>
                                </div>

                                <!-- Slide Content -->
                                <div class="space-y-4">
                                    <div class="flex items-start justify-between gap-4">
                                        <div class="flex-1">
                                            <h3 class="text-2xl font-bold text-slate-950"><?= htmlspecialchars($slide['title']) ?></h3>
                                            <p class="mt-3 text-sm text-slate-600 leading-relaxed"><?= nl2br(htmlspecialchars($slide['subtitle'])) ?></p>
                                        </div>
                                        <div class="flex items-center gap-3">
                                            <span class="inline-flex rounded-full <?= $slide['active'] ? 'bg-emerald-100 text-emerald-800' : 'bg-slate-100 text-slate-600' ?> px-3 py-1 text-xs font-semibold"><?= $slide['active'] ? 'Active' : 'Inactive' ?></span>
                                            <span class="inline-flex rounded-full bg-slate-100 text-slate-600 px-3 py-1 text-xs font-semibold">Slide <?= $index + 1 ?></span>
                                        </div>
                                    </div>

                                    <!-- Image Path -->
                                    <div class="rounded-3xl bg-slate-50 p-4 border border-slate-200">
                                        <div class="text-xs text-slate-500 font-medium uppercase tracking-wide">Image Path</div>
                                        <div class="mt-2 break-all font-mono text-sm text-slate-700"><?= htmlspecialchars($slide['image_path']) ?></div>
                                    </div>

                                    <!-- Timestamps -->
                                    <div class="grid grid-cols-2 gap-4 text-xs text-slate-500">
                                        <div>
                                            <div class="font-medium text-slate-600">Created</div>
                                            <div class="mt-1"><?= date('M d, Y', strtotime($slide['created_at'])) ?></div>
                                        </div>
                                        <?php if (!empty($slide['updated_at']) && $slide['updated_at'] !== '0000-00-00 00:00:00'): ?>
                                            <div>
                                                <div class="font-medium text-slate-600">Updated</div>
                                                <div class="mt-1"><?= date('M d, Y', strtotime($slide['updated_at'])) ?></div>
                                            </div>
                                        <?php endif; ?>
                                    </div>

                                    <!-- Actions -->
                                    <div class="flex flex-wrap items-center gap-2 pt-4 border-t border-slate-200">
                                        <a href="<?= htmlspecialchars($baseUrl) ?>/admin/cms-slides/edit?id=<?= $slide['id'] ?>" class="inline-flex items-center gap-2 rounded-full border border-slate-300 bg-white px-5 py-2 text-sm font-semibold text-slate-800 hover:bg-slate-50 transition">
                                            <span class="material-symbols-outlined text-base">edit</span>
                                            Edit
                                        </a>
                                        <form method="post" action="<?= htmlspecialchars($baseUrl) ?>/admin/cms-slides/delete" class="inline-block" onsubmit="return confirm('Delete this slide?');">
                                            <?= CSRF::input() ?>
                                            <input type="hidden" name="id" value="<?= $slide['id'] ?>">
                                            <button type="submit" class="inline-flex items-center gap-2 rounded-full bg-rose-600 px-5 py-2 text-sm font-semibold text-white hover:bg-rose-700 transition">
                                                <span class="material-symbols-outlined text-base">delete</span>
                                                Delete
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>
</main>
</div>
