<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</h2>
            <p class="text-sm text-gray-500">Update service details and assign works</p>
        </div>
        <a href="<?php echo e(route('admin.services')); ?>" class="text-sm text-gray-600 hover:underline">
            ← Back to Services
        </a>
    </div>

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

        <!-- ================= LEFT: SERVICE 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">Service Information</h3>

                <div>
                    <label class="block text-sm font-medium mb-1">Service Title</label>
                    <input type="text" wire:model.defer="title"
                        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">Category</label>
                    <select wire:model.defer="service_category_id"
                        class="w-full rounded-lg border px-4 py-2 focus:ring-2 focus:ring-[#f38121]">
                        <option value="">Select Category</option>
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option value="<?php echo e($cat->id); ?>"><?php echo e($cat->name); ?></option>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-medium mb-1">Hero Video URL</label>
                    <input type="text" wire:model.defer="hero_video"
                        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">H1 Title (Main Heading)</label>
                    <input type="text" wire:model.defer="h1" placeholder="Eg: We are a Brand Strategy Agency"
                        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"
                        placeholder="Eg: Explore Brand Creation and Brand Strategy Services"
                        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 class="flex items-center justify-between pt-2">
                    <span class="text-sm font-medium">Service 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">Active</span>
                    </label>
                </div>
            </div>

            <div class="bg-white rounded-xl border shadow-sm p-6">
                <h3 class="text-sm font-semibold mb-3 border-b pb-2">Assign Works</h3>
                <input type="text" wire:model.defer="work_section_header"
                        placeholder="Works to show in this service"
                        class="w-full rounded-lg border mb-3 px-4 py-2 focus:ring-2 focus:ring-[#f38121]">
                        
                <div class="grid grid-cols-2 gap-2 max-h-64 overflow-auto">
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $works; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $work): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <label class="flex items-center gap-2 text-sm hover:bg-gray-50 p-1 rounded">
                            <input type="checkbox" wire:model="selectedWorks" value="<?php echo e($work->id); ?>">
                            <?php echo e($work->client_name); ?>

                        </label>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                </div>
            </div>
        </div>

        <!-- ================= RIGHT: SEO + SCHEMA + REDIRECT + 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="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="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="meta_description" rows="2" class="w-full rounded-lg border px-3 py-2 text-sm"></textarea>
                    </div>



                    <div 
    x-data="keywordTags()" 
    x-init="init()" 
    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="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 ?: $title ?: 'Page Title Preview'); ?>

                        </p>

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

                        </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>

                <!-- URL REDIRECTION -->
                <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">URL Redirection</h3>
                    <div class="grid grid-cols-2 gap-4">
                        <input wire:model.defer="old_url" placeholder="Old URL"
                            class="w-full rounded-lg border px-3 py-2 text-sm">
                        <input wire:model.defer="redirect_to" placeholder="Redirect To"
                            class="w-full rounded-lg border px-3 py-2 text-sm">
                    </div>

                    <select wire:model.defer="redirect_type" class="w-full rounded-lg border px-3 py-2 text-sm">
                        <option value="301">301 – Permanent</option>
                        <option value="302">302 – Temporary</option>
                        <option value="404">404 – Gone</option>
                        <option value="410">410 – Removed</option>
                    </select>
                </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 page</p>
                            <p class="text-xs text-gray-500">Prevent search engines from indexing this page</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-focus:ring-2 peer-focus:ring-[#f38121] rounded-full peer 
                        peer-checked:bg-[#f38121] after:content-[''] after:absolute after:top-[2px] after:left-[2px] 
                        after:bg-white after:border after:rounded-full after:h-5 after:w-5 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 page links</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-focus:ring-2 peer-focus:ring-[#f38121] rounded-full peer 
                        peer-checked:bg-[#f38121] after:content-[''] after:absolute after:top-[2px] after:left-[2px] 
                        after:bg-white after:border after:rounded-full after:h-5 after:w-5 after:transition-all
                        peer-checked:after:translate-x-full">
                            </div>
                        </label>
                    </div>

                    <!-- INFO -->

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

                        <div class="flex justify-between items-center border-b pb-2">
                            <h3 class="text-sm font-semibold text-gray-700">Structured Data (Schema)</h3>
                            <span class="text-xs text-gray-400">JSON-LD Validator Style</span>
                        </div>

                        <!-- Schema Type -->
                        <select wire:model.defer="schema_type"
                            class="w-full rounded-lg border px-3 py-2 text-sm focus:ring-[#f38121] focus:border-[#f38121]">
                            <option value="Service">Service</option>
                            <option value="Product">Product</option>
                            <option value="Organization">Organization</option>
                            <option value="WebPage">WebPage</option>
                            <option value="Article">Article</option>
                            <option value="FAQPage">FAQ Page</option>
                            <option value="LocalBusiness">Local Business</option>
                        </select>

                        <!-- JSON Preview Box -->
                        <div
                            class="relative bg-[#0f172a] text-[#e5e7eb] rounded-lg border border-gray-700 p-4 font-mono text-xs max-h-56 overflow-y-auto resize-y">

                            <!-- Header -->
                            <div class="flex justify-between items-center mb-2 text-gray-400 text-[11px]">
                                <span>schema.json</span>
                                <button type="button"
                                    onclick="navigator.clipboard.writeText(this.closest('.json-box').innerText)"
                                    class="text-[#f38121] hover:underline">
                                    Copy
                                </button>
                            </div>

                            <!-- JSON Code -->
                            <pre class="json-box whitespace-pre-wrap break-words leading-relaxed">
<?php echo e(json_encode(
    [
        '<?php $__contextArgs = [];
if (context()->has($__contextArgs[0])) :
if (isset($value)) { $__contextPrevious[] = $value; }
$value = context()->get($__contextArgs[0]); ?>' => 'https://schema.org',
        '@type' => $schema_type,
        'name' => $title,
        'url' => $canonical_url,
    ],
    JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES,
)); ?>

</pre>


                        </div>

                        <!-- Custom Override -->
                        <textarea wire:model.defer="schema_markup" rows="3"
                            class="w-full rounded-lg border px-3 py-2 font-mono text-xs focus:ring-[#f38121] focus:border-[#f38121]"
                            placeholder="Primary schema override (Custom JSON-LD)"></textarea>

                        <!-- Additional Schemas -->
                        <details class="border rounded-lg p-3 bg-gray-50">
                            <summary class="text-xs font-medium cursor-pointer">Additional Schemas</summary>
                            <div class="space-y-3 mt-3">
                                <textarea wire:model.defer="faq_schema" rows="2" class="w-full rounded-lg border px-3 py-2 font-mono text-xs"
                                    placeholder="FAQ Schema"></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 Schema"></textarea>
                                <textarea wire:model.defer="webpage_schema" rows="2"
                                    class="w-full rounded-lg border px-3 py-2 font-mono text-xs" placeholder="WebPage Schema"></textarea>
                                <textarea wire:model.defer="article_schema" rows="2"
                                    class="w-full rounded-lg border px-3 py-2 font-mono text-xs" placeholder="Article Schema"></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 Schema"></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 Schema"></textarea>
                            </div>
                        </details>
                    </div>





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

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

<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('keywordTags', () => ({
        tags: [],
        input: '',

        init() {
            let existing = window.Livewire.find('<?php echo e($_instance->getId()); ?>').get('meta_keywords');

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

            this.$watch('tags', value => {
                window.Livewire.find('<?php echo e($_instance->getId()); ?>').set('meta_keywords', value.join(', '));
            });
        },

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

        removeTag(index) {
            this.tags.splice(index, 1);
        }
    }))
});
</script>

<?php /**PATH /home/eggfirst/public_html/video.eggfirst.com/resources/views/livewire/admin/services/service-edit.blade.php ENDPATH**/ ?>