@extends('layouts.admin')

@section('title', 'Edit Category')
@section('header', 'Edit Category: ' . $category->name)

@section('content')
<div class="space-y-6" x-data="{
    name: '{{ old('name', $category->name) }}',
    slug: '{{ old('slug', $category->slug) }}',
    autoSlug: false,
    
    updateSlug() {
        if (this.autoSlug) {
            this.slug = this.name.toLowerCase()
                .replace(/[^\w\s-]/g, '')
                .replace(/[\s_-]+/g, '-')
                .replace(/^-+|-+$/g, '');
        }
    }
}">
    @include('partials.admin._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'Masters', 'url' => '#'],
            ['name' => 'Categories', 'url' => route('admin.masters.categories.index')],
            ['name' => 'Edit', 'url' => route('admin.masters.categories.edit', $category->id)]
        ]
    ])

    <form action="{{ route('admin.masters.categories.update', $category->id) }}" method="POST" enctype="multipart/form-data" class="max-w-4xl mx-auto space-y-6">
        @csrf
        @method('PUT')

        <div class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
            <div class="p-6 border-b border-slate-200 bg-slate-50/50">
                <h3 class="text-lg font-semibold text-slate-800">Basic Information</h3>
            </div>

            <div class="p-6 space-y-6">
                <!-- Parent Category -->
                <div class="space-y-2">
                    <label for="parent_id" class="block text-sm font-medium text-slate-700">Parent Category (Optional)</label>
                    <select name="parent_id" id="parent_id" class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all">
                        <option value="">None (Top Level)</option>
                        @foreach($parents as $parent)
                            <option value="{{ $parent->id }}" {{ old('parent_id', $category->parent_id) == $parent->id ? 'selected' : '' }}>{{ $parent->name }}</option>
                        @endforeach
                    </select>
                </div>

                <!-- Category Name -->
                <div class="space-y-2">
                    <label for="name" class="block text-sm font-medium text-slate-700">Category Name</label>
                    <input type="text" name="name" id="name" x-model="name" @input="updateSlug()" required
                        class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all @error('name') border-red-500 @enderror"
                        placeholder="e.g., Electronics">
                    @error('name')
                        <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Slug -->
                <div class="space-y-2">
                    <div class="flex items-center justify-between">
                        <label for="slug" class="block text-sm font-medium text-slate-700">Slug</label>
                        <button type="button" @click="autoSlug = !autoSlug; if(autoSlug) updateSlug()" 
                            class="text-xs text-indigo-600 hover:text-indigo-800" x-text="autoSlug ? 'Disable Auto-Slug' : 'Enable Auto-Slug'"></button>
                    </div>
                    <input type="text" name="slug" id="slug" x-model="slug" @input="autoSlug = false"
                        class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all @error('slug') border-red-500 @enderror"
                        placeholder="e.g., electronics-devices">
                    @error('slug')
                        <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Category Image -->
                <div class="space-y-2">
                    <label for="image" class="block text-sm font-medium text-slate-700">Category Image</label>
                    <div class="flex items-start gap-4">
                        @if($category->image)
                            <div class="relative group">
                                <img src="{{ asset('storage/' . $category->image) }}" alt="Preview" class="h-24 w-24 rounded-lg object-cover border border-slate-200 shadow-sm">
                                <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg flex items-center justify-center text-white text-xs">Current</div>
                            </div>
                        @endif
                        <div class="flex-1">
                            <input type="file" name="image" id="image" accept="image/*"
                                class="w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 transition-all">
                            <p class="text-xs text-slate-400 mt-1">Leave blank to keep existing. Max 5MB (JPG, PNG).</p>
                        </div>
                    </div>
                    @error('image')
                        <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Schema Markup -->
                <div class="space-y-2">
                    <label for="schema_markup" class="block text-sm font-medium text-slate-700">Schema Markup (JSON-LD)</label>
                    <textarea name="schema_markup" id="schema_markup" rows="4"
                        class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all font-mono text-xs"
                        placeholder='<script type="application/ld+json">{ ... }</script>'>{{ old('schema_markup', $category->schema_markup) }}</textarea>
                </div>
            </div>
        </div>

        <!-- SEO Settings -->
        <div class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
            <div class="p-6 border-b border-slate-200 bg-slate-50/50">
                <h3 class="text-lg font-semibold text-slate-800">SEO Settings</h3>
            </div>

            <div class="p-6 space-y-6">
                <!-- SEO Title -->
                <div class="space-y-2">
                    <label for="seo_title" class="block text-sm font-medium text-slate-700">SEO Title</label>
                    <input type="text" name="seo_title" id="seo_title" value="{{ old('seo_title', $category->seo_title) }}"
                        class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all"
                        placeholder="Custom SEO Title">
                </div>

                <!-- Meta Description -->
                <div class="space-y-2">
                    <label for="meta_description" class="block text-sm font-medium text-slate-700">Meta Description</label>
                    <textarea name="meta_description" id="meta_description" rows="3"
                        class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all"
                        placeholder="Write a compelling meta description...">{{ old('meta_description', $category->meta_description) }}</textarea>
                </div>

                <!-- Breadcrumbs Title -->
                <div class="space-y-2">
                    <label for="breadcrumbs_title" class="block text-sm font-medium text-slate-700">Breadcrumbs Title</label>
                    <input type="text" name="breadcrumbs_title" id="breadcrumbs_title" value="{{ old('breadcrumbs_title', $category->breadcrumbs_title) }}"
                        class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all"
                        placeholder="Short title for breadcrumbs">
                </div>

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

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

                <!-- Status -->
                <div class="space-y-2">
                    <label class="block text-sm font-medium text-slate-700 mb-2">Status</label>
                    <div class="flex items-center gap-6">
                        <label class="inline-flex items-center">
                            <input type="radio" name="status" value="1" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-slate-300" {{ old('status', $category->status) ? 'checked' : '' }}>
                            <span class="ml-2 text-sm text-slate-700">Active</span>
                        </label>
                        <label class="inline-flex items-center">
                            <input type="radio" name="status" value="0" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-slate-300" {{ !old('status', $category->status) ? 'checked' : '' }}>
                            <span class="ml-2 text-sm text-slate-700">Inactive</span>
                        </label>
                    </div>
                </div>
            </div>

            <div class="px-6 py-4 bg-slate-50 border-t border-slate-200 flex items-center justify-end gap-3">
                <a href="{{ route('admin.masters.categories.index') }}" class="px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-200 rounded-lg transition-colors">
                    Cancel
                </a>
                <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors shadow-sm shadow-indigo-200">
                    Update Category
                </button>
            </div>
        </div>
    </form>
</div>
@endsection