@extends('layouts.admin')

@section('page-title', 'Categories')

@push('styles')
<style>
    .categories-page-header {
        margin-top: -88px;
        padding-top: 104px;
        background: linear-gradient(180deg, #ffffff 0%, #f9fafb 50%, transparent 100%);
    }
</style>
@endpush

@section('content')
<div class="space-y-6">
    {{-- Page Header --}}
    <div class="categories-page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 pb-4 border-b border-gray-200">
        <div>
            <div class="flex items-center gap-3">
                <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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
                </div>
                <div>
                    <h1 class="text-xl font-bold text-gray-900 tracking-tight">All Categories</h1>
                    <p class="text-sm text-gray-500 mt-0.5">You have total {{ $categories->total() }} Categories</p>
                </div>
            </div>
        </div>
        <form action="{{ route('admin.categories.autoFillIcons') }}" method="POST" class="flex items-center gap-2">
            @csrf
            <button type="submit" class="px-4 py-2.5 bg-indigo-50 text-indigo-600 text-sm font-medium rounded-lg hover:bg-indigo-100 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="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/></svg>
                Auto-fill Missing Icons
            </button>
        </form>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {{-- Table --}}
        <div>
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex items-center justify-between">
                    <h2 class="text-sm font-semibold text-gray-900 uppercase tracking-wider">Categories</h2>
                    <form action="{{ route('admin.categories.index') }}" method="GET" class="flex items-center gap-2">
                        <input type="text" name="search" value="{{ request('search') }}" placeholder="Search" class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none w-48">
                        <button type="submit" class="p-1.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition-colors">
                            <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                        </button>
                    </form>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="border-b border-gray-200">
                                <th class="text-left py-3.5 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider w-12">#</th>
                                <th class="text-left py-3.5 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Title</th>
                                <th class="text-left py-3.5 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Root</th>
                                <th class="text-center py-3.5 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider w-16">Order</th>
                                <th class="text-center py-3.5 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider w-16">Thumb</th>
                                <th class="text-center py-3.5 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider w-16">Banner</th>
                                <th class="text-center py-3.5 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider w-20">Comm.</th>
                                <th class="text-center py-3.5 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Featured</th>
                                <th class="text-center py-3.5 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
                                <th class="text-center py-3.5 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider w-24">Options</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            @forelse($categories as $index => $category)
                                <tr class="hover:bg-gray-50/80 transition-colors duration-150">
                                    <td class="py-3.5 px-5 text-sm text-gray-400 font-mono">{{ $categories->firstItem() + $index }}</td>
                                    <td class="py-3.5 px-5">
                                        <div class="flex items-center gap-2">
                                            @if($category->icon)
                                                <span class="text-lg">{{ $category->icon }}</span>
                                            @endif
                                            <a href="{{ route('admin.categories.edit', $category) }}" class="text-sm font-semibold text-gray-900 hover:text-emerald-600 transition-colors">{{ $category->name }}</a>
                                        </div>
                                    </td>
                                    <td class="py-3.5 px-5 text-sm text-gray-500">{{ $category->parent?->name ?? '——' }}</td>
                                    <td class="py-3.5 px-5 text-center text-sm text-gray-600">{{ $category->sort_order }}</td>
                                    <td class="py-3.5 px-5 text-center">
                                        @if($category->image)
                                            <img src="{{ asset('storage/' . $category->image) }}" alt="{{ $category->name }}" class="w-10 h-10 rounded-lg object-cover border border-gray-200 mx-auto">
                                        @else
                                            <div class="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400 border border-gray-200 mx-auto">
                                                <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="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
                                    </td>
                                    <td class="py-3.5 px-5 text-center">
                                        @if($category->banner)
                                            <img src="{{ asset('storage/' . $category->banner) }}" alt="{{ $category->name }}" class="w-10 h-6 rounded object-cover border border-gray-200 mx-auto">
                                        @else
                                            <div class="w-10 h-6 rounded bg-gray-100 flex items-center justify-center text-gray-400 border border-gray-200 mx-auto">
                                                <svg class="w-3 h-3" 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>
                                        @endif
                                    </td>
                                    <td class="py-3.5 px-5 text-center text-sm text-gray-600">{{ $category->commission_rate }}%</td>
                                    <td class="py-3.5 px-5 text-center">
                                        <form action="{{ route('admin.categories.toggleFeatured', $category) }}" method="POST" class="inline">
                                            @csrf
                                            <label class="relative inline-flex items-center cursor-pointer">
                                                <input type="checkbox" class="sr-only peer" {{ $category->is_featured ? 'checked' : '' }} onchange="this.form.submit()">
                                                <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-emerald-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-emerald-500"></div>
                                            </label>
                                        </form>
                                    </td>
                                    <td class="py-3.5 px-5 text-center">
                                        <form action="{{ route('admin.categories.toggleStatus', $category) }}" method="POST" class="inline">
                                            @csrf
                                            <label class="relative inline-flex items-center cursor-pointer">
                                                <input type="checkbox" class="sr-only peer" {{ $category->is_active ? 'checked' : '' }} onchange="this.form.submit()">
                                                <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-emerald-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-emerald-500"></div>
                                            </label>
                                        </form>
                                    </td>
                                    <td class="py-3.5 px-5 text-center">
                                        <div class="flex items-center justify-center gap-1">
                                            <a href="{{ route('admin.categories.edit', $category) }}" class="p-2 text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition-all duration-150" title="Edit">
                                                <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                                            </a>
                                            <form action="{{ route('admin.categories.destroy', $category) }}" method="POST" onsubmit="return confirm('Delete this category?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-all duration-150" title="Delete">
                                                    <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="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"/></svg>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="10" class="py-16">
                                        <div class="text-center">
                                            <div class="w-16 h-16 mx-auto mb-4 rounded-2xl bg-gray-100 flex items-center justify-center">
                                                <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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
                                            </div>
                                            <p class="text-sm font-medium text-gray-900">No categories yet</p>
                                            <p class="text-sm text-gray-500 mt-1">Add your first category using the form</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @if($categories->hasPages())
                    <div class="px-6 py-4 border-t border-gray-100 bg-gray-50/50">
                        {{ $categories->links() }}
                    </div>
                @endif
            </div>
        </div>

        {{-- Add Category Form --}}
        <div>
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 bg-gradient-to-r from-emerald-50 via-teal-50 to-cyan-50">
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-lg bg-white shadow-sm 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="M12 4v16m8-8H4"/></svg>
                        </div>
                        <h2 class="text-sm font-semibold text-gray-900 uppercase tracking-wider">Add New Category</h2>
                    </div>
                </div>
                <div class="p-6">
                    <form action="{{ route('admin.categories.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="space-y-5">
                            <div>
                                <label for="title" class="block text-sm font-semibold text-gray-700 mb-2">Title <span class="text-red-500">*</span></label>
                                <input type="text" name="title" id="title" value="{{ old('title') }}" placeholder="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" 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>
                                <label for="category" class="block text-sm font-semibold text-gray-700 mb-2">Root 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">
                                    <option value="">Select Parent</option>
                                    @foreach($parentCategories as $parent)
                                        <option value="{{ $parent->id }}" {{ old('category') == $parent->id ? 'selected' : '' }}>{{ $parent->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label for="ordering" class="block text-sm font-semibold text-gray-700 mb-2">Order</label>
                                    <input type="number" name="ordering" id="ordering" value="{{ old('ordering', 0) }}" placeholder="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 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', 0) }}" step="any" placeholder="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">
                                </div>
                            </div>

                            <div>
                                <label for="slug" class="block text-sm font-semibold text-gray-700 mb-2">Slug</label>
                                <input type="text" name="slug" id="slug" value="{{ old('slug') }}" placeholder="auto-generated" 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">
                            </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">
                                        📦
                                    </div>
                                    <div class="flex-1">
                                        <input type="text" name="icon" id="icon" value="{{ old('icon') }}" placeholder="Auto-assigned from 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">
                                        <p class="mt-1 text-xs text-gray-500">Leave empty for auto-assign, or enter an emoji/icon class</p>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <label for="thumbnail" class="block text-sm font-semibold text-gray-700 mb-2">Thumbnail (132x132)</label>
                                <input type="file" name="thumbnail" id="thumbnail" accept="image/*" 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 file:mr-4 file:py-1 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-medium file:bg-emerald-50 file:text-emerald-700 hover:file:bg-emerald-100">
                                @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>

                            <div>
                                <label for="banner" class="block text-sm font-semibold text-gray-700 mb-2">Banner (970x270)</label>
                                <input type="file" name="banner" id="banner" accept="image/*" 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 file:mr-4 file:py-1 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-medium file:bg-emerald-50 file:text-emerald-700 hover:file:bg-emerald-100">
                                @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>
                                <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') }}" placeholder="SEO meta 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">
                            </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="SEO meta description" 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') }}</textarea>
                            </div>

                            <div class="pt-4 border-t border-gray-100">
                                <button type="submit" class="w-full px-5 py-3.5 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold rounded-xl transition-all duration-200 shadow-md hover:shadow-lg">
                                    Save Category
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

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

    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();
        }
        if (!slugInput.value || slugInput.value.trim() === '') {
            slugInput.value = this.value.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
        }
    });

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