@extends('layouts.admin')

@section('page-title', 'Edit Category')

@section('content')
<div class="space-y-6">
    {{-- Breadcrumb & Header --}}
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
            <a href="{{ route('admin.categories.index') }}" class="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
                <svg class="w-5 h-5" 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-7m2 14l7-7m0 0l-7-7"/></svg>
            </a>
            <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center shadow-lg shadow-emerald-200">
                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/></svg>
            </div>
            <div>
                <h1 class="text-xl font-bold text-gray-900 tracking-tight">Edit Category</h1>
                <p class="text-sm text-gray-500 mt-0.5">Update details for <span class="font-medium text-gray-700">{{ $category->name }}</span></p>
            </div>
        </div>
        <a href="{{ route('admin.categories.index') }}" class="px-4 py-2.5 border border-gray-300 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-50 transition-colors flex items-center gap-2">
            <svg class="w-4 h-4" 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-7m2 14l7-7m0 0l-7-7"/></svg>
            Back to List
        </a>
    </div>

    <div class="max-w-3xl">
        <form action="{{ route('admin.categories.update', $category) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            {{-- Basic Information --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-6">
                <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50">
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-lg bg-emerald-100 flex items-center justify-center">
                            <svg class="w-4 h-4 text-emerald-600" 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"/></svg>
                        </div>
                        <h2 class="text-sm font-semibold text-gray-900 uppercase tracking-wider">Basic Information</h2>
                    </div>
                </div>
                <div class="p-6 space-y-5">
                    <div>
                        <label for="title" class="block text-sm font-semibold text-gray-700 mb-2">Category Name <span class="text-red-500">*</span></label>
                        <input type="text" name="title" id="title" value="{{ old('title', $category->name) }}" class="w-full px-4 py-3 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition-all duration-200 hover:border-gray-400" placeholder="e.g. Men's Clothing" required>
                        @error('title')
                            <p class="mt-2 text-xs text-red-500 flex items-center gap-1">
                                <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    <div class="grid grid-cols-2 gap-5">
                        <div>
                            <label for="category" class="block text-sm font-semibold text-gray-700 mb-2">Parent Category</label>
                            <select name="category" id="category" class="w-full px-4 py-3 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition-all duration-200 hover:border-gray-400 bg-white">
                                <option value="">None (Top Level)</option>
                                @foreach(\App\Models\Category::whereNull('parent_id')->where('id', '!=', $category->id)->orderBy('name')->get() as $parent)
                                    <option value="{{ $parent->id }}" {{ old('category', $category->parent_id) == $parent->id ? 'selected' : '' }}>{{ $parent->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label for="slug" class="block text-sm font-semibold text-gray-700 mb-2">URL Slug</label>
                            <input type="text" name="slug" id="slug" value="{{ old('slug', $category->slug) }}" class="w-full px-4 py-3 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition-all duration-200 hover:border-gray-400 bg-gray-50 font-mono">
                            <p class="mt-1.5 text-xs text-gray-500">Auto-generated from name if blank</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-3 gap-5">
                        <div>
                            <label for="ordering" class="block text-sm font-semibold text-gray-700 mb-2">Sort Order</label>
                            <input type="number" name="ordering" id="ordering" value="{{ old('ordering', $category->sort_order) }}" min="0" class="w-full px-4 py-3 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition-all duration-200 hover:border-gray-400">
                            <p class="mt-1.5 text-xs text-gray-500">Menu display order</p>
                        </div>
                        <div>
                            <label for="commission" class="block text-sm font-semibold text-gray-700 mb-2">Commission (%)</label>
                            <input type="number" name="commission" id="commission" value="{{ old('commission', $category->commission_rate) }}" step="any" min="0" max="100" class="w-full px-4 py-3 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition-all duration-200 hover:border-gray-400">
                        </div>
                        <div>
                            <label for="icon" class="block text-sm font-semibold text-gray-700 mb-2">Icon</label>
                            <div class="flex items-center gap-3">
                                <div id="icon-preview" class="w-12 h-12 rounded-xl bg-gray-50 border border-gray-200 flex items-center justify-center text-2xl flex-shrink-0">
                                    {{ $category->icon ?: '📦' }}
                                </div>
                                <div class="flex-1">
                                    <input type="text" name="icon" id="icon" value="{{ old('icon', $category->icon) }}" placeholder="Leave empty to auto-assign" class="w-full px-4 py-3 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition-all duration-200 hover:border-gray-400">
                                    <p class="mt-1 text-xs text-gray-500">Enter an emoji or leave empty for auto-assign based on name</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Media --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-6">
                <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50">
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center">
                            <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                        </div>
                        <h2 class="text-sm font-semibold text-gray-900 uppercase tracking-wider">Media</h2>
                    </div>
                </div>
                <div class="p-6 space-y-6">
                    <div class="grid grid-cols-2 gap-6">
                        {{-- Thumbnail --}}
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Thumbnail <span class="text-gray-400 font-normal text-xs">(132×132)</span></label>
                            <div class="border-2 border-dashed border-gray-300 rounded-xl p-4 text-center hover:border-emerald-400 transition-colors">
                                @if($category->image)
                                    <div class="relative group">
                                        <img src="{{ asset('storage/' . $category->image) }}" alt="{{ $category->name }}" class="w-24 h-24 rounded-lg object-cover mx-auto border border-gray-200">
                                        <div class="absolute inset-0 bg-black/40 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                            <span class="text-white text-xs font-medium">Current</span>
                                        </div>
                                    </div>
                                @else
                                    <div class="w-24 h-24 rounded-lg bg-gray-100 flex items-center justify-center mx-auto border border-gray-200">
                                        <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                    </div>
                                @endif
                                <div class="mt-3">
                                    <label for="thumbnail" class="cursor-pointer inline-flex items-center gap-1.5 px-3 py-1.5 bg-emerald-50 text-emerald-700 text-xs font-medium rounded-lg hover:bg-emerald-100 transition-colors">
                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m0 0l4 4"/></svg>
                                        Replace
                                    </label>
                                    <input type="file" name="thumbnail" id="thumbnail" accept="image/*" class="hidden">
                                </div>
                            </div>
                            @error('thumbnail')
                                <p class="mt-2 text-xs text-red-500 flex items-center gap-1">
                                    <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>

                        {{-- Banner --}}
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Banner <span class="text-gray-400 font-normal text-xs">(970×270)</span></label>
                            <div class="border-2 border-dashed border-gray-300 rounded-xl p-4 text-center hover:border-emerald-400 transition-colors">
                                @if($category->banner)
                                    <div class="relative group">
                                        <img src="{{ asset('storage/' . $category->banner) }}" alt="{{ $category->name }}" class="w-full h-20 rounded-lg object-cover border border-gray-200">
                                        <div class="absolute inset-0 bg-black/40 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                            <span class="text-white text-xs font-medium">Current</span>
                                        </div>
                                    </div>
                                @else
                                    <div class="w-full h-20 rounded-lg bg-gray-100 flex items-center justify-center border border-gray-200">
                                        <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                    </div>
                                @endif
                                <div class="mt-3">
                                    <label for="banner" class="cursor-pointer inline-flex items-center gap-1.5 px-3 py-1.5 bg-emerald-50 text-emerald-700 text-xs font-medium rounded-lg hover:bg-emerald-100 transition-colors">
                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m0 0l4 4"/></svg>
                                        Replace
                                    </label>
                                    <input type="file" name="banner" id="banner" accept="image/*" class="hidden">
                                </div>
                            </div>
                            @error('banner')
                                <p class="mt-2 text-xs text-red-500 flex items-center gap-1">
                                    <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            {{-- SEO --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-6">
                <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50">
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-lg bg-purple-100 flex items-center justify-center">
                            <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                        </div>
                        <h2 class="text-sm font-semibold text-gray-900 uppercase tracking-wider">SEO Settings</h2>
                    </div>
                </div>
                <div class="p-6 space-y-5">
                    <div>
                        <label for="meta_title" class="block text-sm font-semibold text-gray-700 mb-2">Meta Title</label>
                        <input type="text" name="meta_title" id="meta_title" value="{{ old('meta_title', $category->meta_title) }}" placeholder="SEO optimized title" class="w-full px-4 py-3 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition-all duration-200 hover:border-gray-400">
                        <p class="mt-1.5 text-xs text-gray-500">Recommended: 50-60 characters</p>
                    </div>

                    <div>
                        <label for="meta_description" class="block text-sm font-semibold text-gray-700 mb-2">Meta Description</label>
                        <textarea name="meta_description" id="meta_description" rows="3" placeholder="Brief description for search engines" class="w-full px-4 py-3 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition-all duration-200 hover:border-gray-400 resize-none">{{ old('meta_description', $category->meta_description) }}</textarea>
                        <p class="mt-1.5 text-xs text-gray-500">Recommended: 150-160 characters</p>
                    </div>
                </div>
            </div>

            {{-- Actions --}}
            <div class="flex items-center justify-end gap-3">
                <a href="{{ route('admin.categories.index') }}" class="px-6 py-3 border border-gray-300 text-gray-700 text-sm font-semibold rounded-xl hover:bg-gray-50 transition-all duration-200">
                    Cancel
                </a>
                <button type="submit" class="px-8 py-3 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold rounded-xl transition-all duration-200 shadow-md hover:shadow-lg flex items-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    Update Category
                </button>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const titleInput = document.getElementById('title');
    const iconInput = document.getElementById('icon');
    const iconPreview = document.getElementById('icon-preview');

    const iconMap = {
        'electronics': '💻', 'phone': '📱', 'mobile': '📱', 'computer': '💻', 'laptop': '💻',
        'fashion': '👗', 'clothing': '👕', 'shoe': '👟', 'apparel': '👔', 'dress': '👗',
        'jewelry': '💎', 'watch': '⌚', 'accessories': '👜', 'bag': '👜', 'handbag': '👜',
        'home': '🏠', 'furniture': '🪑', 'kitchen': '🍳', 'garden': '🌿', 'decor': '🖼️',
        'beauty': '💄', 'health': '💊', 'cosmetic': '💄', 'skincare': '🧴', 'makeup': '💄',
        'food': '🍔', 'grocery': '🛒', 'snack': '🍿', 'beverage': '🥤', 'drink': '🥤',
        'sport': '⚽', 'fitness': '🏋️', 'outdoor': '🏕️', 'camping': '⛺', 'travel': '✈️',
        'book': '📚', 'toy': '🧸', 'game': '🎮', 'baby': '🍼', 'kids': '🧒',
        'auto': '🚗', 'car': '🚗', 'motor': '🏍️', 'vehicle': '🚙', 'pet': '🐾',
        'animal': '🐾', 'music': '🎵', 'art': '🎨', 'craft': '✂️', 'office': '📎',
        'tool': '🔧', 'hardware': '🔨', 'industrial': '🏭', 'appliance': '🔌',
    };

    const fallbackIcons = ['📦', '🏷️', '⭐', '🎯', '🛍️', '📋', '🔖', '🎁', '💡', '📌'];

    function getAutoIcon(name) {
        const lower = name.toLowerCase();
        for (const [keyword, icon] of Object.entries(iconMap)) {
            if (lower.includes(keyword)) {
                return icon;
            }
        }
        let hash = 0;
        for (let i = 0; i < name.length; i++) {
            hash = name.charCodeAt(i) + ((hash << 5) - hash);
        }
        return fallbackIcons[Math.abs(hash) % fallbackIcons.length];
    }

    function updatePreview() {
        if (iconInput.value.trim()) {
            iconPreview.textContent = iconInput.value.trim();
        } else if (titleInput.value.trim()) {
            iconPreview.textContent = getAutoIcon(titleInput.value);
        } else {
            iconPreview.textContent = '📦';
        }
    }

    titleInput.addEventListener('input', function() {
        if (!iconInput.value.trim()) {
            updatePreview();
        }
    });

    iconInput.addEventListener('input', updatePreview);
});
</script>
@endsection