@extends('layouts.app')
@section('title', 'Edit Sale Post Category')
@section('description', 'Update sale post category details')
@section('content')

    <!-- Page Content -->
    <main class="p-8">
        <div class="max-w-4xl mx-auto">
            <!-- Back Button -->
            <div class="mb-6">
                <a href="{{ route('admin.sale-post-category.index') }}" class="inline-flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                    Back to Categories
                </a>
            </div>

            <!-- Form Card -->
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
                <div class="bg-gradient-to-r from-blue-500 to-purple-600 px-8 py-6">
                    <h2 class="text-2xl font-bold text-white">Edit Category</h2>
                    <p class="text-blue-100 mt-1">Update sale post category details</p>
                </div>

                <form action="{{ route('admin.sale-post-category.update', encryptor('encrypt', $salePostCategory->id)) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <!-- Form Body -->
                    <div class="p-8 space-y-6">
                        <!-- Name -->
                        <div>
                            <label for="name" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                Category Name <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="name" id="name" value="{{ old('name', $salePostCategory->name) }}" 
                                class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200" 
                                placeholder="e.g., Electronics, Clothing, etc." required>
                            @error('name')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Slug -->
                        <div>
                            <label for="slug" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                Slug <span class="text-gray-500 text-xs">(optional - auto-generated from name)</span>
                            </label>
                            <input type="text" name="slug" id="slug" value="{{ old('slug', $salePostCategory->slug) }}" 
                                class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200" 
                                placeholder="e.g., electronics">
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Leave blank to auto-generate from category name</p>
                            @error('slug')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Description -->
                        <div>
                            <label for="description" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                Description
                            </label>
                            <textarea name="description" id="description" rows="4"
                                class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200" 
                                placeholder="Brief description of this category">{{ old('description', $salePostCategory->description) }}</textarea>
                            @error('description')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Icon -->
                        <div>
                            <label for="icon" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                Icon <span class="text-gray-500 text-xs">(HTML, emoji, or icon class)</span>
                            </label>
                            <div class="flex items-center space-x-3">
                                @if($salePostCategory->icon)
                                <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg text-white text-xl">
                                    {!! $salePostCategory->icon !!}
                                </div>
                                @endif
                                <input type="text" name="icon" id="icon" value="{{ old('icon', $salePostCategory->icon) }}" 
                                    class="flex-1 px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200" 
                                    placeholder="e.g., 📱 or <i class='fas fa-mobile'></i>">
                            </div>
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Enter an emoji (📱) or HTML for an icon</p>
                            @error('icon')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Parent Category -->
                        <div>
                            <label for="parent_id" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                Parent Category
                            </label>
                            <select name="parent_id" id="parent_id" 
                                class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200">
                                <option value="">None (Root Category)</option>
                                @foreach(\App\Models\SalePostCategory::where('id', '!=', $salePostCategory->id)->whereNull('parent_id')->get() as $category)
                                <option value="{{ $category->id }}" {{ old('parent_id', $salePostCategory->parent_id) == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                                @endforeach
                            </select>
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Select a parent to make this a subcategory</p>
                            @error('parent_id')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Status -->
                        <div>
                            <label for="status" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                Status <span class="text-red-500">*</span>
                            </label>
                            <div class="flex items-center space-x-6">
                                <label class="flex items-center cursor-pointer">
                                    <input type="radio" name="status" value="1" {{ old('status', $salePostCategory->status) == '1' ? 'checked' : '' }}
                                        class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                                    <span class="ml-2 text-gray-900 dark:text-white">Active</span>
                                </label>
                                <label class="flex items-center cursor-pointer">
                                    <input type="radio" name="status" value="0" {{ old('status', $salePostCategory->status) == '0' ? 'checked' : '' }}
                                        class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                                    <span class="ml-2 text-gray-900 dark:text-white">Inactive</span>
                                </label>
                            </div>
                            @error('status')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Children Categories Alert -->
                        @if($salePostCategory->children->count() > 0)
                        <div class="bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-500 p-4 rounded-lg">
                            <div class="flex">
                                <svg class="w-6 h-6 text-blue-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                <div>
                                    <h4 class="text-sm font-semibold text-blue-800 dark:text-blue-300">This category has {{ $salePostCategory->children->count() }} subcategories:</h4>
                                    <ul class="mt-2 text-sm text-blue-700 dark:text-blue-400 list-disc list-inside">
                                        @foreach($salePostCategory->children as $child)
                                        <li>{{ $child->name }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>

                    <!-- Form Footer -->
                    <div class="bg-gray-50 dark:bg-gray-700/50 px-8 py-4 flex justify-end space-x-3">
                        <a href="{{ route('admin.sale-post-category.index') }}" class="px-6 py-3 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 font-semibold rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors duration-200">
                            Cancel
                        </a>
                        <button type="submit" class="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200">
                            <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            Update Category
                        </button>
                    </div>
                </form>
            </div>

            <!-- Delete Section -->
            <div class="mt-6 bg-red-50 dark:bg-red-900/20 rounded-xl shadow-lg p-6 border-2 border-red-200 dark:border-red-800">
                <div class="flex items-start justify-between">
                    <div>
                        <h3 class="text-lg font-semibold text-red-800 dark:text-red-300 mb-2">Danger Zone</h3>
                        <p class="text-sm text-red-600 dark:text-red-400">
                            Once you delete this category, there is no going back. 
                            @if($salePostCategory->children->count() > 0)
                            <strong>Warning: This will also affect {{ $salePostCategory->children->count() }} subcategories.</strong>
                            @endif
                        </p>
                    </div>
                    <form action="{{ route('admin.sale-post-category.destroy', encryptor('encrypt', $salePostCategory->id)) }}" method="POST" onsubmit="return confirm('Are you sure you want to permanently delete this category? This action cannot be undone.');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="px-6 py-3 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-200">
                            <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                            </svg>
                            Delete Category
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </main>

<script>
// Auto-generate slug from name (only if user hasn't manually edited it)
let manualSlugEdit = {{ $salePostCategory->slug ? 'true' : 'false' }};

document.getElementById('name').addEventListener('input', function(e) {
    if (!manualSlugEdit) {
        const slug = e.target.value
            .toLowerCase()
            .replace(/[^\w\s-]/g, '')
            .replace(/\s+/g, '-')
            .replace(/-+/g, '-')
            .trim();
        
        document.getElementById('slug').value = slug;
    }
});

document.getElementById('slug').addEventListener('input', function() {
    manualSlugEdit = true;
});
</script>
@endsection