<?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 a service card shown in the homepage services section.</p>
            </div>
            <a href="<?= htmlspecialchars($baseUrl) ?>/admin/cms-services" 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 Services</a>
        </div>

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

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2" for="title">Service Title</label>
                <input id="title" name="title" value="<?= htmlspecialchars($service['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="summary">Service Summary</label>
                <textarea id="summary" name="summary" rows="4" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm"><?= htmlspecialchars($service['summary'] ?? '') ?></textarea>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2" for="icon">Service Icon</label>
                <input id="icon" name="icon" value="<?= htmlspecialchars($service['icon'] ?? '') ?>" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm" placeholder="e.g. format_paint">
                <p class="mt-2 text-sm text-slate-500">Optional icon name for homepage service cards. Use Material Symbols or leave blank.</p>
            </div>

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

            <div class="flex justify-end">
                <button type="submit" class="inline-flex items-center justify-center rounded-full bg-premium-charcoal px-8 py-4 text-sm font-semibold text-white hover:bg-balorp-magenta transition">Save Service</button>
            </div>
        </form>
        </div>
    </div>
</main>
</div>
