<div class="ml-[280px] min-h-screen space-y-6 bg-gray-50 p-6">

    <!-- ================= HEADER ================= -->
    <div class="flex justify-between items-center bg-white p-5 rounded-xl border shadow-sm">
        <div>
            <h2 class="text-2xl font-semibold">Edit Service Category</h2>
            <p class="text-sm text-gray-500">Update category details and SEO</p>
        </div>
        <a href="<?php echo e(route('admin.services')); ?>" class="text-sm text-gray-600 hover:underline">
            ← Back to Services
        </a>
    </div>

    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(session()->has('success')): ?>
        <div class="bg-green-100 text-green-700 px-4 py-2 rounded-lg">
            <?php echo e(session('success')); ?>

        </div>
    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

    <!-- ================= MAIN GRID ================= -->
    <form wire:submit.prevent="update" class="grid grid-cols-1 lg:grid-cols-5 gap-6">

        <!-- ================= LEFT: CATEGORY CONTENT ================= -->
        <div class="lg:col-span-2 space-y-6">

            <div class="bg-white rounded-xl border shadow-sm p-6 space-y-6">
                <h3 class="text-sm font-semibold text-gray-700 border-b pb-3">Category Information</h3>

                <div>
                    <label class="block text-sm font-medium mb-1">Category Name</label>
                    <input type="text" wire:model.defer="name"
                        class="w-full rounded-lg border px-4 py-2 focus:ring-2 focus:ring-[#f38121]">
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                        <span class="text-red-500 text-sm"><?php echo e($message); ?></span>
                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                </div>
                
                 <div>
                    <label class="block text-sm font-medium mb-1">H1 Title (Main Heading)</label>
                    <input type="text" wire:model.defer="h1"
                        class="w-full rounded-lg border px-4 py-2 focus:ring-2 focus:ring-[#f38121]">
                </div>

                <div>
                    <label class="block text-sm font-medium mb-1">H2 Title (Sub Heading)</label>
                    <input type="text" wire:model.defer="h2"
                        class="w-full rounded-lg border px-4 py-2 focus:ring-2 focus:ring-[#f38121]">
                </div>


                <div>
                    <label class="block text-sm font-medium mb-1">Description</label>
                    <textarea wire:model.defer="description" rows="5"
                        class="w-full rounded-lg border px-4 py-2 focus:ring-2 focus:ring-[#f38121]"></textarea>
                </div>
                

                <div>
                    <label class="block text-sm font-medium mb-1">Category Video URL</label>
                    <input type="text" wire:model.defer="video_url"
                        class="w-full rounded-lg border px-4 py-2 focus:ring-2 focus:ring-[#f38121]">
                </div>

                <div>
                    <label class="block text-sm font-medium mb-1">Slug</label>
                    <input type="text" wire:model.defer="slug"
                        class="w-full rounded-lg border px-4 py-2 focus:ring-2 focus:ring-[#f38121]">
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['slug'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                        <span class="text-red-500 text-sm"><?php echo e($message); ?></span>
                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                </div>

                <div class="flex items-center justify-between pt-2">
                    <span class="text-sm font-medium">Category Status</span>
                    <label class="flex items-center gap-2">
                        <input type="checkbox" wire:model.defer="status" class="w-5 h-5 text-[#f38121]">
                        <span class="text-sm <?php echo e($status ? 'text-green-600' : 'text-red-500'); ?>">
                            <?php echo e($status ? 'Active' : 'Inactive'); ?>

                        </span>

                    </label>
                </div>
            </div>

        </div>

        <!-- ================= RIGHT: SEO + SCHEMA + ROBOTS ================= -->
        <div class="lg:col-span-3">
            <div class="sticky top-6 space-y-6">

                <!-- SEO PANEL -->
                <div class="bg-white rounded-xl border shadow-sm p-6 space-y-4">
                    <h3 class="text-sm font-semibold text-gray-700 border-b pb-2">SEO Optimization</h3>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="text-xs">Meta Title</label>
                            <input wire:model.defer="meta_title" class="w-full rounded-lg border px-3 py-2 text-sm">
                        </div>

                        <div>
                            <label class="text-xs">Canonical URL</label>
                            <input wire:model.defer="canonical_url" class="w-full rounded-lg border px-3 py-2 text-sm">
                        </div>
                    </div>

                    <div>
                        <label class="text-xs">Meta Description</label>
                        <textarea wire:model.defer="meta_description" rows="2" class="w-full rounded-lg border px-3 py-2 text-sm"></textarea>
                    </div>

                    <div x-data="keywordTags()" class="space-y-1">
                        <label class="text-xs font-medium">Focus Keywords</label>

                        <div
                            class="flex flex-wrap gap-2 border rounded-lg px-3 py-2 min-h-[44px] focus-within:ring-2 focus-within:ring-[#f38121]">
                            <template x-for="(tag, index) in tags" :key="index">
                                <span
                                    class="flex items-center gap-1 bg-[#f38121]/10 text-[#000] px-3 py-1 rounded-full text-xs font-medium">
                                    <span x-text="tag"></span>
                                    <button type="button" @click="removeTag(index)"
                                        class="text-[#000] hover:text-red-600">&times;</button>
                                </span>
                            </template>

                            <input type="text" x-model="input" @keydown.enter.prevent="addTag()"
                                @keydown.,.prevent="addTag()" @blur="addTag()" placeholder="Type keyword & press Enter"
                                class="flex-grow border-none outline-none text-sm bg-transparent min-w-[120px]">
                        </div>

                        <p class="text-[11px] text-gray-400">
                            Press <b>Enter</b> or <b>,</b> to add keywords
                        </p>
                    </div>



                    <!-- GOOGLE PREVIEW -->
                    <div class="border rounded-xl p-4 bg-gray-50">
                        <p class="text-xs text-gray-500 mb-1">Google Preview</p>

                        <p class="text-blue-600 text-base font-medium break-all">
                            <?php echo e($meta_title ?: $name ?: 'Page Title Preview'); ?>

                        </p>

                        <p class="text-green-600 text-xs break-all">
                            <?php echo e($canonical_url ?: 'https://www.example.com/category'); ?>

                        </p>

                        <p class="text-gray-600 text-sm">
                            <?php echo e($meta_description ?: \Illuminate\Support\Str::limit($description, 160) ?: 'Meta description will appear here...'); ?>

                        </p>
                    </div>
                </div>

                <!-- ROBOTS PANEL -->
                <div class="bg-white rounded-xl border shadow-sm p-6 space-y-5">

                    <div class="flex items-center justify-between border-b pb-2">
                        <h3 class="text-sm font-semibold text-gray-700">Robots & Index Control</h3>
                        <span class="text-xs text-gray-400">Search Engine Rules</span>
                    </div>

                    <!-- NOINDEX -->
                    <div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition">
                        <div>
                            <p class="text-sm font-medium text-gray-800">Noindex this category</p>
                            <p class="text-xs text-gray-500">Prevent search engines from indexing this category</p>
                        </div>

                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" wire:model.defer="noindex" class="sr-only peer">
                            <div
                                class="w-11 h-6 bg-gray-200 peer-checked:bg-[#f38121] rounded-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:h-5 after:w-5 after:rounded-full after:transition-all peer-checked:after:translate-x-full">
                            </div>
                        </label>
                    </div>

                    <!-- NOFOLLOW -->
                    <div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition">
                        <div>
                            <p class="text-sm font-medium text-gray-800">Nofollow links</p>
                            <p class="text-xs text-gray-500">Tell bots not to follow links on this page</p>
                        </div>

                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" wire:model.defer="nofollow" class="sr-only peer">
                            <div
                                class="w-11 h-6 bg-gray-200 peer-checked:bg-[#f38121] rounded-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:h-5 after:w-5 after:rounded-full after:transition-all peer-checked:after:translate-x-full">
                            </div>
                        </label>
                    </div>
                </div>

                <!-- ================= ADVANCED SCHEMA PANEL ================= -->
                <div x-data="schemaBuilder()" class="bg-white rounded-2xl border shadow-sm p-6 space-y-5">

                    <!-- Header -->
                    <div class="flex justify-between items-center border-b pb-3">
                        <div>
                            <h3 class="text-sm font-semibold text-gray-800">Structured Data (Schema)</h3>
                            <p class="text-xs text-gray-400">Yoast++ Advanced JSON-LD Builder</p>
                        </div>
                        <a href="https://validator.schema.org/" target="_blank"
                            class="text-xs text-blue-500 hover:underline">Validate Schema</a>
                    </div>

                    <!-- Schema Type -->
                    <div>
                        <label class="text-xs font-medium text-gray-600">Primary Schema Type</label>
                        <select wire:model.defer="schema_type" x-model="type"
                            class="w-full rounded-xl border px-3 py-2 text-sm bg-gray-50 focus:ring-[#f38121]">
                            <option value="CollectionPage">Collection Page</option>
                            <option value="WebPage">Web Page</option>
                            <option value="Organization">Organization</option>
                            <option value="FAQPage">FAQ Page</option>
                            <option value="LocalBusiness">Local Business</option>
                            <option value="Service">Service</option>
                            <option value="Article">Article</option>
                        </select>
                        <p class="text-[11px] text-gray-400">Defines how Google understands this page</p>
                    </div>

                    <!-- Override -->
                    <div>
                        <label class="text-xs font-medium text-gray-600">Primary Schema Override (Optional)</label>
                        <textarea wire:model.defer="schema_markup" rows="3"
                            class="w-full rounded-xl border px-3 py-2 font-mono text-xs bg-[#0f172a] text-[#e5e7eb]"
                            placeholder="Paste full JSON-LD here to override auto schema"></textarea>
                    </div>

                    <!-- LIVE PREVIEW -->
                    <div class="bg-[#020617] rounded-xl border border-gray-800 p-4 space-y-2">
                        <div class="flex justify-between items-center">
                            <span class="text-xs text-gray-400">Live Schema Preview</span>
                            <button type="button" @click="copySchema"
                                class="text-xs text-[#f38121] hover:underline">Copy</button>
                        </div>

                        <pre class="text-xs text-green-400 font-mono overflow-x-auto whitespace-pre-wrap leading-relaxed"
                            x-text="previewSchema"></pre>
                    </div>

                    <!-- Additional Schemas -->
                    <details class="group border rounded-xl p-4 bg-gray-50">
                        <summary class="cursor-pointer text-xs font-medium text-gray-700">
                            ➕ Advanced / Additional Schemas
                        </summary>

                        <div class="space-y-4 mt-4">

                            <textarea wire:model.defer="faq_schema" rows="2" class="w-full rounded-lg border px-3 py-2 font-mono text-xs"
                                placeholder="FAQPage JSON-LD"></textarea>

                            <textarea wire:model.defer="org_schema" rows="2" class="w-full rounded-lg border px-3 py-2 font-mono text-xs"
                                placeholder="Organization JSON-LD"></textarea>

                            <textarea wire:model.defer="breadcrumb_schema" rows="2"
                                class="w-full rounded-lg border px-3 py-2 font-mono text-xs" placeholder="Breadcrumb JSON-LD"></textarea>

                            <textarea wire:model.defer="localbusiness_schema" rows="2"
                                class="w-full rounded-lg border px-3 py-2 font-mono text-xs" placeholder="LocalBusiness JSON-LD"></textarea>

                        </div>
                    </details>
                </div>


                <button class="bg-[#f38121] text-white px-6 py-2 rounded-lg w-full shadow">
                    Update Category
                </button>

            </div>
        </div>
    </form>
</div>


<script>
    function keywordTags() {
        return {
            tags: [],
            input: '',

            init() {
                // Safely read initial value from Livewire
                let existing = <?php echo \Illuminate\Support\Js::from($meta_keywords ?? '')->toHtml() ?>;

                if (existing) {
                    this.tags = existing.split(',').map(tag => tag.trim()).filter(Boolean);
                }
            },

            addTag() {
                let value = this.input.trim();
                if (value && !this.tags.includes(value)) {
                    this.tags.push(value);
                    this.sync();
                }
                this.input = '';
            },

            removeTag(index) {
                this.tags.splice(index, 1);
                this.sync();
            },

            sync() {
                window.Livewire.find('<?php echo e($_instance->getId()); ?>').set('meta_keywords', this.tags.join(', '));
            }
        }
    }
</script>
<?php /**PATH /home1/eggfirst/public_html/resources/views/livewire/admin/services/category-edit.blade.php ENDPATH**/ ?>