<?php require_once __DIR__ . '/_sidebar.php'; ?>
<main class="flex-1 py-16 md:py-0 md:pl-64">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-16">
        <div class="mb-8">
            <h1 class="text-2xl font-bold text-slate-900"><?= htmlspecialchars($pageTitle) ?></h1>
            <p class="text-sm text-slate-500 mt-1">Upload an image and add gallery details.</p>
        </div>

        <div class="bg-white rounded-3xl border border-slate-200 shadow-sm p-8">
            <form method="post" action="<?= htmlspecialchars($baseUrl) ?><?= htmlspecialchars($formAction) ?>" class="space-y-6">
                <?= CSRF::input() ?>
                <?php if (!empty($item['id'])): ?>
                    <input type="hidden" name="id" value="<?= (int)$item['id'] ?>">
                <?php endif; ?>

                <div>
                    <label class="block text-sm font-semibold text-slate-900 mb-2">Title *</label>
                    <input type="text" name="title" required value="<?= htmlspecialchars($item['title'] ?? '') ?>" class="w-full rounded-2xl border border-slate-200 bg-slate-50/50 px-4 py-3 text-slate-900 focus:border-[#FF007A] focus:ring-2 focus:ring-[#FF007A]/20 focus:bg-white transition-all" placeholder="Image title">
                </div>

                <div>
                    <label class="block text-sm font-semibold text-slate-900 mb-2">Image Path *</label>
                    <input type="text" name="image_path" required value="<?= htmlspecialchars($item['image_path'] ?? '') ?>" class="w-full rounded-2xl border border-slate-200 bg-slate-50/50 px-4 py-3 text-slate-900 focus:border-[#FF007A] focus:ring-2 focus:ring-[#FF007A]/20 focus:bg-white transition-all" placeholder="/images/your-image.png">
                    <p class="mt-1.5 text-xs text-slate-500">Enter the full path to the image file in the public/images folder.</p>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-slate-900 mb-2">Category</label>
                    <input type="text" name="category" value="<?= htmlspecialchars($item['category'] ?? '') ?>" class="w-full rounded-2xl border border-slate-200 bg-slate-50/50 px-4 py-3 text-slate-900 focus:border-[#FF007A] focus:ring-2 focus:ring-[#FF007A]/20 focus:bg-white transition-all" placeholder="e.g. Painting Works, Renovations">
                </div>

                <div>
                    <label class="block text-sm font-semibold text-slate-900 mb-2">Description</label>
                    <textarea name="description" rows="3" class="w-full rounded-2xl border border-slate-200 bg-slate-50/50 px-4 py-3 text-slate-900 focus:border-[#FF007A] focus:ring-2 focus:ring-[#FF007A]/20 focus:bg-white transition-all resize-none" placeholder="Describe this image..."><?= htmlspecialchars($item['description'] ?? '') ?></textarea>
                </div>

                <div class="grid grid-cols-2 gap-5">
                    <div>
                        <label class="block text-sm font-semibold text-slate-900 mb-2">Sort Order</label>
                        <input type="number" name="sort_order" value="<?= (int)($item['sort_order'] ?? 0) ?>" class="w-full rounded-2xl border border-slate-200 bg-slate-50/50 px-4 py-3 text-slate-900 focus:border-[#FF007A] focus:ring-2 focus:ring-[#FF007A]/20 focus:bg-white transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-slate-900 mb-2">Status</label>
                        <select name="status" class="w-full rounded-2xl border border-slate-200 bg-slate-50/50 px-4 py-3 text-slate-900 focus:border-[#FF007A] focus:ring-2 focus:ring-[#FF007A]/20 focus:bg-white transition-all">
                            <option value="draft" <?= (($item['status'] ?? '') === 'draft') ? 'selected' : '' ?>>Draft</option>
                            <option value="published" <?= (($item['status'] ?? 'published') === 'published') ? 'selected' : '' ?>>Published</option>
                        </select>
                    </div>
                </div>

                <div class="flex items-center gap-3 pt-2">
                    <a href="<?= htmlspecialchars($baseUrl) ?>/admin/gallery" class="inline-flex items-center gap-2 px-6 py-3 rounded-full border border-slate-200 text-slate-700 font-semibold text-sm hover:bg-slate-50 transition">
                        Cancel
                    </a>
                    <button type="submit" class="inline-flex items-center gap-2 px-8 py-3 rounded-full bg-gradient-to-r from-[#FF007A] to-[#D87AA8] text-white font-semibold text-sm shadow-xl shadow-[#FF007A]/25 hover:shadow-2xl hover:shadow-[#FF007A]/40 hover:-translate-y-0.5 transition-all duration-300">
                        <span class="material-symbols-outlined text-base">save</span>
                        Save Image
                    </button>
                </div>
            </form>
        </div>
    </div>
</main>
</div>
