@extends('admin.layouts.app')

@section('title', 'Edit Service Category')

@section('content')
    <div class="mb-6">
        <a href="{{ route('admin.scategories.index') }}"
            class="text-slate-400 hover:text-white flex items-center gap-2 transition-colors">
            <i data-lucide="arrow-left" class="w-4 h-4"></i>
            Back to Service Categories
        </a>
        <h1 class="text-2xl font-bold text-white mt-4">Edit Service Category: {{ $scategory->name }}</h1>
    </div>

    <div class="max-w-4xl mx-auto">
        @if ($errors->any())
            <div class="bg-red-500/10 border border-red-500/20 text-red-500 px-4 py-3 rounded-xl mb-6">
                <ul class="list-disc ml-5">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('admin.scategories.update', $scategory) }}" method="POST" enctype="multipart/form-data"
            class="space-y-6">
            @csrf
            @method('PUT')

            <div class="glass-card rounded-2xl p-8 space-y-6">
                <!-- Parent Category -->
                <div>
                    <label for="parent_id" class="block text-sm font-medium text-slate-300 mb-2">Parent Category
                        (Optional)</label>
                    <select name="parent_id" id="parent_id"
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                        <option value="">None (Top Level)</option>
                        @foreach($parent_categories as $parent)
                            <option value="{{ $parent->id }}" {{ old('parent_id', $scategory->parent_id) == $parent->id ? 'selected' : '' }}>{{ $parent->name }}</option>
                        @endforeach
                    </select>
                    <p class="text-[11px] text-slate-500 mt-1">Select a parent category to create a subcategory.</p>
                </div>

                <!-- Category Name -->
                <div>
                    <label for="name" class="block text-sm font-medium text-slate-300 mb-2">Category Name</label>
                    <input type="text" name="name" id="name" value="{{ old('name', $scategory->name) }}"
                        placeholder="e.g., Electronics"
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all"
                        required>
                </div>

                <!-- Slug -->
                <div>
                    <label for="slug" class="block text-sm font-medium text-slate-300 mb-2">Slug (Optional)</label>
                    <input type="text" name="slug" id="slug" value="{{ old('slug', $scategory->slug) }}"
                        placeholder="e.g., electronics-devices"
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                    <p class="text-[11px] text-slate-500 mt-1">Leave blank to auto-generate from name.</p>
                </div>

                <!-- Category Image -->
                <div>
                    <label for="image" class="block text-sm font-medium text-slate-300 mb-2">Category Image</label>
                    @if($scategory->image)
                        <div class="mb-4">
                            <img src="{{ asset('storage/' . $scategory->image) }}"
                                class="w-32 h-32 rounded-xl object-cover border border-slate-700">
                        </div>
                    @endif
                    <input type="file" name="image" id="image"
                        class="w-full text-slate-400 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-sm file:font-semibold file:bg-blue-600 file:text-white hover:file:bg-blue-700 cursor-pointer">
                    <p class="text-[11px] text-slate-500 mt-1">Upload an image (JPG, PNG, GIF). Max 5MB. Leave empty if you
                        don't want to change the image.</p>
                </div>

                <!-- Schema Markup -->
                <div>
                    <label for="schema_markup" class="block text-sm font-medium text-slate-300 mb-2">Schema Markup
                        (JSON-LD)</label>
                    <textarea name="schema_markup" id="schema_markup" rows="4"
                        placeholder='<script type="application/ld+json">{ ... }</script>'
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all font-mono text-sm">{{ old('schema_markup', $scategory->schema_markup) }}</textarea>
                    <p class="text-[11px] text-slate-500 mt-1">Paste your custom Schema.org JSON-LD code here.</p>
                </div>

                <hr class="border-slate-800">

                <div class="pt-2">
                    <h3 class="text-lg font-bold text-white mb-6">SEO Settings</h3>

                    <div class="space-y-6">
                        <!-- SEO Title -->
                        <div x-data="{ count: {{ strlen(old('seo_title', $scategory->seo_title ?? '')) }} }">
                            <div class="flex justify-between items-center mb-2">
                                <label for="seo_title" class="block text-sm font-medium text-slate-300">SEO Title</label>
                                <span class="text-[11px] text-slate-500"><span :class="count > 60 ? 'text-red-500' : ''"
                                        x-text="count"></span>/60 chars</span>
                            </div>
                            <input type="text" name="seo_title" id="seo_title"
                                x-on:input="count = $event.target.value.length"
                                value="{{ old('seo_title', $scategory->seo_title) }}" placeholder="Custom SEO Title"
                                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                        </div>

                        <!-- Meta Description -->
                        <div x-data="{ count: {{ strlen(old('meta_description', $scategory->meta_description ?? '')) }} }">
                            <div class="flex justify-between items-center mb-2">
                                <label for="meta_description" class="block text-sm font-medium text-slate-300">Meta
                                    Description</label>
                                <span class="text-[11px] text-slate-500"><span :class="count > 160 ? 'text-red-500' : ''"
                                        x-text="count"></span>/160 chars</span>
                            </div>
                            <textarea name="meta_description" id="meta_description"
                                x-on:input="count = $event.target.value.length" rows="3"
                                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">{{ old('meta_description', $scategory->meta_description) }}</textarea>
                        </div>

                        <!-- Breadcrumbs Title -->
                        <div>
                            <label for="breadcrumbs_title" class="block text-sm font-medium text-slate-300 mb-2">Breadcrumbs
                                Title</label>
                            <input type="text" name="breadcrumbs_title" id="breadcrumbs_title"
                                value="{{ old('breadcrumbs_title', $scategory->breadcrumbs_title) }}"
                                placeholder="Short title for breadcrumbs"
                                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                        </div>

                        <!-- Canonical URL -->
                        <div>
                            <label for="canonical_url" class="block text-sm font-medium text-slate-300 mb-2">Canonical
                                URL</label>
                            <input type="url" name="canonical_url" id="canonical_url"
                                value="{{ old('canonical_url', $scategory->canonical_url) }}"
                                placeholder="https://example.com/custom-canonical"
                                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                        </div>

                        <!-- No Follow -->
                        <div class="flex items-start gap-3">
                            <input type="checkbox" name="nofollow" id="nofollow" value="1" {{ old('nofollow', $scategory->nofollow) ? 'checked' : '' }}
                                class="mt-1 w-4 h-4 bg-slate-900 border-slate-700 rounded text-blue-600 focus:ring-blue-500 focus:ring-offset-slate-900">
                            <div>
                                <label for="nofollow" class="text-sm font-medium text-slate-300">Set rel="nofollow" for this
                                    category link</label>
                                <p class="text-[11px] text-slate-500">If checked, search engines will be instructed not to
                                    follow links to this category page.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <hr class="border-slate-800">

                <!-- Status -->
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-4">Status</label>
                    <div class="flex gap-6">
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="radio" name="status" value="active" {{ old('status', $scategory->status) == 'active' ? 'checked' : '' }}
                                class="w-4 h-4 bg-slate-900 border-slate-700 text-blue-600 focus:ring-blue-500 focus:ring-offset-slate-900">
                            <span class="text-sm text-slate-300">Active</span>
                        </label>
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="radio" name="status" value="inactive" {{ old('status', $scategory->status) == 'inactive' ? 'checked' : '' }}
                                class="w-4 h-4 bg-slate-900 border-slate-700 text-blue-600 focus:ring-blue-500 focus:ring-offset-slate-900">
                            <span class="text-sm text-slate-300">Inactive</span>
                        </label>
                    </div>
                </div>

                <div class="pt-4">
                    <button type="submit"
                        class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 rounded-xl shadow-lg shadow-blue-500/20 transition-all">
                        Update Service Category
                    </button>
                </div>
            </div>
        </form>
    </div>
@endsection