<?php require_once __DIR__ . '/_sidebar.php'; ?>
<main class="flex-1 py-16 md:py-0 md:pl-64">
    <div class="max-w-4xl 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 mb-8">
            <div>
                <h1 class="text-3xl font-bold text-slate-950"><?= htmlspecialchars($pageTitle) ?></h1>
                <p class="mt-2 text-slate-600">Manage hero slide details shown on the homepage.</p>
            </div>
            <a href="<?= htmlspecialchars($baseUrl) ?>/admin/cms-slides" 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 Slides</a>
        </div>

        <form method="post" action="<?= htmlspecialchars($formAction) ?>" enctype="multipart/form-data" class="space-y-8 bg-white p-8 rounded-3xl shadow-lg border border-slate-200">
            <?= CSRF::input() ?>
            <?php if (!empty($slide['id'])): ?>
                <input type="hidden" name="id" value="<?= $slide['id'] ?>">
            <?php endif; ?>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2" for="title">Slide Title</label>
                <input id="title" name="title" value="<?= htmlspecialchars($slide['title'] ?? '') ?>" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm" required>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2" for="subtitle">Slide Subtitle</label>
                <textarea id="subtitle" name="subtitle" rows="4" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm"><?= htmlspecialchars($slide['subtitle'] ?? '') ?></textarea>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2" for="slide_image">Upload Image</label>
                <div class="relative">
                    <input id="slide_image" type="file" name="slide_image" accept="image/jpeg,image/png,image/webp" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm cursor-pointer">
                </div>
                <p class="mt-2 text-sm text-slate-500">JPG, PNG, or WebP (max 5MB). Upload a new image or use the path below.</p>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2" for="image_path">Image Path (Optional)</label>
                <input id="image_path" name="image_path" value="<?= htmlspecialchars($slide['image_path'] ?? '') ?>" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm" placeholder="/images/slide.jpg">
                <p class="mt-2 text-sm text-slate-500">Or provide the public image path if not uploading a new image.</p>
            </div>

            <?php if (!empty($slide['image_path'])): ?>
                <?php $imageUrl = preg_match('/^https?:\/\//i', $slide['image_path']) ? $slide['image_path'] : $baseUrl . $slide['image_path']; ?>
                <div class="rounded-3xl border border-slate-200 bg-slate-50 p-4">
                    <p class="text-sm text-slate-500 mb-2">Current image preview</p>
                    <img src="<?= htmlspecialchars($imageUrl) ?>" alt="Current slide image" class="w-full rounded-3xl object-cover max-h-72 bg-slate-100" />
                </div>
            <?php endif; ?>

            <div id="upload_preview" class="hidden rounded-3xl border border-emerald-200 bg-emerald-50 p-4">
                <p class="text-sm text-slate-600 mb-2">New image preview</p>
                <img id="preview_image" src="" alt="New image preview" class="w-full rounded-3xl object-cover max-h-72 bg-slate-100" />
            </div>

            <div class="flex items-center gap-4">
                <input id="active" type="checkbox" name="active" value="1" <?= !isset($slide['active']) || $slide['active'] ? 'checked' : '' ?> class="h-4 w-4 text-emerald-600 border-slate-300 rounded cursor-pointer">
                <label for="active" class="text-sm font-medium text-slate-700 cursor-pointer">Active (visible on homepage)</label>
            </div>

            <div class="flex justify-end gap-4">
                <a href="<?= htmlspecialchars($baseUrl) ?>/admin/cms-slides" class="inline-flex items-center justify-center rounded-full border border-slate-300 bg-white px-8 py-4 text-sm font-semibold text-slate-700 hover:bg-slate-50 transition">Cancel</a>
                <button type="submit" class="inline-flex items-center justify-center rounded-full bg-emerald-600 px-8 py-4 text-sm font-semibold text-white hover:bg-emerald-700 transition shadow-lg">Save Slide</button>
            </div>
        </form>

        <script>
            document.getElementById('slide_image').addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(event) {
                        const preview = document.getElementById('upload_preview');
                        const previewImg = document.getElementById('preview_image');
                        previewImg.src = event.target.result;
                        preview.classList.remove('hidden');
                    };
                    reader.readAsDataURL(file);
                }
            });
        </script>
</main>
</div>
