@extends('admin.layout')



@section('title', 'Menu Categories')



@section('content')

<div class="space-y-6">

    <!-- Header -->

    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">

        <div class="flex items-center gap-3">

            <!-- Tombol Back -->

            <a href="{{ url()->previous() }}" 

               class="btn-secondary px-4 py-2 rounded-lg flex items-center gap-2 hover:shadow transition-all duration-200">

                <i class="fas fa-arrow-left"></i>

                <span>Back</span>

            </a>

            <div>

                <h1 class="text-3xl font-bold text-gray-800 font-serif">Menu Categories</h1>

                <p class="text-gray-600 mt-1">Manage your restaurant menu categories</p>

            </div>

        </div>

        <button type="button" 

                class="btn-primary px-6 py-3 rounded-xl flex items-center justify-center gap-2 shadow-lg hover:shadow-xl transition-all duration-300"

                onclick="showModal('addCategoryModal')">

            <i class="fas fa-plus-circle"></i>

            <span>Add New Category</span>

        </button>

    </div>



    <!-- Stats Cards -->

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">

        <!-- Total Categories Card -->

        <div class="card group hover:shadow-xl transition-all duration-300">

            <div class="p-6">

                <div class="flex items-center justify-between">

                    <div>

                        <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">Total Categories</p>

                        <p class="text-3xl font-bold text-gray-800 mt-2">{{ $categories->count() }}</p>

                    </div>

                    <div class="p-3 bg-blue-50 rounded-xl group-hover:bg-blue-100 transition-colors">

                        <i class="fas fa-layer-group text-2xl text-blue-500"></i>

                    </div>

                </div>

                <div class="mt-4 pt-4 border-t border-gray-100">

                    <div class="flex items-center text-sm text-gray-500">

                        <i class="fas fa-info-circle mr-2"></i>

                        <span>All menu categories</span>

                    </div>

                </div>

            </div>

        </div>



        <!-- Active Categories Card -->

        <div class="card group hover:shadow-xl transition-all duration-300">

            <div class="p-6">

                <div class="flex items-center justify-between">

                    <div>

                        <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">Active Categories</p>

                        <p class="text-3xl font-bold text-gray-800 mt-2">{{ $categories->where('is_active', true)->count() }}</p>

                    </div>

                    <div class="p-3 bg-green-50 rounded-xl group-hover:bg-green-100 transition-colors">

                        <i class="fas fa-check-circle text-2xl text-green-500"></i>

                    </div>

                </div>

                <div class="mt-4 pt-4 border-t border-gray-100">

                    <div class="flex items-center text-sm text-gray-500">

                        <i class="fas fa-eye mr-2"></i>

                        <span>Visible on website</span>

                    </div>

                </div>

            </div>

        </div>



        <!-- Total Items Card -->

        <div class="card group hover:shadow-xl transition-all duration-300">

            <div class="p-6">

                <div class="flex items-center justify-between">

                    <div>

                        <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">Menu Items</p>

                        <p class="text-3xl font-bold text-gray-800 mt-2">{{ $totalItems }}</p>

                    </div>

                    <div class="p-3 bg-amber-50 rounded-xl group-hover:bg-amber-100 transition-colors">

                        <i class="fas fa-utensils text-2xl text-amber-500"></i>

                    </div>

                </div>

                <div class="mt-4 pt-4 border-t border-gray-100">

                    <div class="flex items-center text-sm text-gray-500">

                        <i class="fas fa-list mr-2"></i>

                        <span>Total menu items</span>

                    </div>

                </div>

            </div>

        </div>



        <!-- Categories with Images Card -->

        <div class="card group hover:shadow-xl transition-all duration-300">

            <div class="p-6">

                <div class="flex items-center justify-between">

                    <div>

                        <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">With Images</p>

                        <p class="text-3xl font-bold text-gray-800 mt-2">{{ $categories->whereNotNull('image')->count() }}</p>

                    </div>

                    <div class="p-3 bg-purple-50 rounded-xl group-hover:bg-purple-100 transition-colors">

                        <i class="fas fa-image text-2xl text-purple-500"></i>

                    </div>

                </div>

                <div class="mt-4 pt-4 border-t border-gray-100">

                    <div class="flex items-center text-sm text-gray-500">

                        <i class="fas fa-camera mr-2"></i>

                        <span>Categories with images</span>

                    </div>

                </div>

            </div>

        </div>

    </div>



    <!-- Categories Table -->

    <div class="card overflow-hidden">

        <div class="p-6 border-b border-gray-100 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">

            <div>

                <h2 class="text-xl font-bold text-gray-800">All Categories</h2>

                <p class="text-gray-600 text-sm mt-1">Manage and organize your menu categories</p>

            </div>

            

            <!-- Actions Dropdown -->

            <div class="relative">

                <button type="button" 

                        class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center gap-2 text-gray-700">

                    <i class="fas fa-cog"></i>

                    <span>Actions</span>

                    <i class="fas fa-chevron-down text-xs"></i>

                </button>

                <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-10 hidden">

                    <a href="#" onclick="reorderCategories()" 

                       class="px-4 py-2 hover:bg-gray-100 flex items-center gap-2 text-gray-700">

                        <i class="fas fa-sort"></i>

                        <span>Reorder Categories</span>

                    </a>

                    <div class="border-t border-gray-200 my-2"></div>

                    <a href="#" onclick="exportCategories()" 

                       class="px-4 py-2 hover:bg-gray-100 flex items-center gap-2 text-gray-700">

                        <i class="fas fa-file-export"></i>

                        <span>Export to CSV</span>

                    </a>

                </div>

            </div>

        </div>



        <div class="p-6">

            @if($categories->isEmpty())

            <!-- Empty State -->

            <div class="text-center py-12">

                <div class="w-24 h-24 mx-auto mb-6 flex items-center justify-center bg-gray-100 rounded-full">

                    <i class="fas fa-layer-group text-4xl text-gray-400"></i>

                </div>

                <h3 class="text-xl font-semibold text-gray-700 mb-2">No Categories Yet</h3>

                <p class="text-gray-500 mb-6">Start by creating your first menu category</p>

                <button type="button" 

                        class="btn-primary px-6 py-3 rounded-lg inline-flex items-center gap-2"

                        onclick="showModal('addCategoryModal')">

                    <i class="fas fa-plus"></i>

                    <span>Create First Category</span>

                </button>

            </div>

            @else

            <!-- Table for Desktop/Laptop -->

            <div class="hidden lg:block overflow-x-auto">

                <table class="w-full">

                    <thead>

                        <tr class="bg-gray-50">

                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">

                                #

                            </th>

                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">

                                Preview

                            </th>

                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">

                                Details

                            </th>

                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">

                                Items

                            </th>

                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">

                                Status

                            </th>

                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">

                                Order

                            </th>

                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">

                                Actions

                            </th>

                        </tr>

                    </thead>

                    <tbody class="divide-y divide-gray-200">

                        @foreach($categories as $category)

                        <tr class="hover:bg-gray-50 transition-colors">

                            <td class="px-6 py-4">

                                <span class="text-gray-500 font-medium">{{ $loop->iteration }}</span>

                            </td>

                            <td class="px-6 py-4">

                                <div class="category-preview w-20 h-20 rounded-lg overflow-hidden">

                                    @if($category->image)

                                     <img src="{{ asset($category->image) }}" 

                                         alt="{{ $category->name }}"

                                         class="w-full h-full object-cover"

                                         onerror="this.src='data:image/svg+xml;charset=UTF-8,%3Csvg width=\"80\" height=\"80\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Crect width=\"80\" height=\"80\" fill=\"%23f8f9fa\"/%3E%3Ctext x=\"40\" y=\"40\" font-family=\"Inter\" font-size=\"12\" text-anchor=\"middle\" dy=\".3em\" fill=\"%239ca3af\"%3ENo Image%3C/text%3E%3C/svg%3E'">

                                    @else

                                    <div class="w-full h-full flex items-center justify-center bg-gray-100">

                                        <i class="fas fa-image text-2xl text-gray-400"></i>

                                    </div>

                                    @endif

                                </div>

                            </td>

                            <td class="px-6 py-4">

                                <div>

                                    <h4 class="font-semibold text-gray-800">{{ $category->name }}</h4>

                                    @if($category->description)

                                    <p class="text-sm text-gray-600 mt-1 line-clamp-2">{{ $category->description }}</p>

                                    @else

                                    <p class="text-sm text-gray-400 italic mt-1">No description</p>

                                    @endif

                                    <div class="flex items-center gap-2 mt-2 text-xs text-gray-500">

                                        <i class="far fa-clock"></i>

                                        <span>Created: {{ $category->created_at->format('d M Y') }}</span>

                                    </div>

                                </div>

                            </td>

                            <td class="px-6 py-4">

                                <div class="flex flex-col items-center">

                                    <span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-medium">

                                        {{ $category->items_count ?? $category->items->count() }} items

                                    </span>

                                    @if($category->items->count() > 0)

                                    <a href="{{ route('admin.categories.items', $category->id) }}" 

                                       class="mt-2 px-3 py-1 text-sm text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded transition-colors">

                                        <i class="fas fa-eye mr-1"></i>

                                        View Items

                                    </a>

                                    @endif

                                </div>

                            </td>

                            <td class="px-6 py-4">

                                @if($category->is_active)

                                <span class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm font-medium inline-flex items-center gap-1">

                                    <i class="fas fa-check-circle"></i>

                                    Active

                                </span>

                                @else

                                <span class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm font-medium inline-flex items-center gap-1">

                                    <i class="fas fa-times-circle"></i>

                                    Inactive

                                </span>

                                @endif

                            </td>

                            <td class="px-6 py-4">

                                <div class="flex items-center gap-2">

                                    <input type="number" 

                                           class="w-20 px-3 py-1 border border-gray-300 rounded-lg text-center"

                                           value="{{ $category->order }}" 

                                           data-id="{{ $category->id }}"

                                           min="0">

                                    <button class="action-btn bg-gray-100 text-gray-600 hover:bg-gray-200 update-order" 

                                            data-id="{{ $category->id }}">

                                        <i class="fas fa-save"></i>

                                    </button>

                                </div>

                            </td>

                            <td class="px-6 py-4">

                                <div class="flex items-center gap-2">

                                    <!-- Edit Button -->

                                    <a href="{{ route('admin.categories.edit', $category->id) }}" 

                                       class="action-btn bg-yellow-50 text-yellow-600 hover:bg-yellow-100"

                                       title="Edit">

                                        <i class="fas fa-edit"></i>

                                    </a>

                                    

                                    <!-- Quick Actions Dropdown -->

                                    <div class="relative">

                                        <button type="button" 

                                                class="action-btn bg-blue-50 text-blue-600 hover:bg-blue-100"

                                                data-dropdown-toggle="dropdown-{{ $category->id }}">

                                            <i class="fas fa-ellipsis-h"></i>

                                        </button>

                                        <div id="dropdown-{{ $category->id }}" 

                                             class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-10 hidden">

                                            <a href="{{ route('admin.categories.items', $category->id) }}" 

                                               class="px-4 py-2 hover:bg-gray-100 flex items-center gap-2 text-gray-700">

                                                <i class="fas fa-list"></i>

                                                <span>Manage Items</span>

                                            </a>

                                            <a href="{{ route('admin.categories.duplicate', $category->id) }}" 

                                               class="px-4 py-2 hover:bg-gray-100 flex items-center gap-2 text-gray-700">

                                                <i class="fas fa-copy"></i>

                                                <span>Duplicate</span>

                                            </a>

                                            <div class="border-t border-gray-200 my-2"></div>

                                            <a href="#" 

                                               class="px-4 py-2 hover:bg-red-50 text-red-600 flex items-center gap-2 delete-category"

                                               data-id="{{ $category->id }}"

                                               data-name="{{ $category->name }}">

                                                <i class="fas fa-trash"></i>

                                                <span>Delete</span>

                                            </a>

                                        </div>

                                    </div>

                                    

                                    <!-- Quick Toggle -->

                                    <form action="{{ route('admin.categories.toggle', $category->id) }}" 

                                          method="POST" 

                                          class="inline">

                                        @csrf

                                        <button type="submit" 

                                                class="action-btn {{ $category->is_active ? 'bg-red-50 text-red-600 hover:bg-red-100' : 'bg-green-50 text-green-600 hover:bg-green-100' }}"

                                                title="{{ $category->is_active ? 'Deactivate' : 'Activate' }}">

                                            <i class="fas {{ $category->is_active ? 'fa-eye-slash' : 'fa-eye' }}"></i>

                                        </button>

                                    </form>

                                </div>

                            </td>

                        </tr>

                        @endforeach

                    </tbody>

                </table>

            </div>



            <!-- Cards for Mobile/Tablet -->

            <div class="lg:hidden space-y-4">

                @foreach($categories as $category)

                <div class="bg-white border border-gray-200 rounded-xl p-4 hover:shadow-md transition-shadow">

                    <div class="flex items-start gap-4">

                        <!-- Image -->

                        <div class="category-preview w-16 h-16 rounded-lg overflow-hidden flex-shrink-0">

                            @if($category->image)

                            <img src="{{ asset($category->image) }}" 

                                 alt="{{ $category->name }}"

                                 class="w-full h-full object-cover rounded-lg">

                            @else

                            <div class="w-full h-full flex items-center justify-center bg-gray-100 rounded-lg">

                                <i class="fas fa-image text-xl text-gray-400"></i>

                            </div>

                            @endif

                        </div>

                        

                        <!-- Details -->

                        <div class="flex-1">

                            <div class="flex items-start justify-between">

                                <div>

                                    <h4 class="font-semibold text-gray-800">{{ $category->name }}</h4>

                                    <div class="flex items-center gap-2 mt-1">

                                        @if($category->is_active)

                                        <span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">

                                            Active

                                        </span>

                                        @else

                                        <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs">

                                            Inactive

                                        </span>

                                        @endif

                                        <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-xs">

                                            {{ $category->items_count ?? $category->items->count() }} items

                                        </span>

                                    </div>

                                </div>

                                <div class="relative">

                                    <button type="button" 

                                            class="text-gray-400 hover:text-gray-600"

                                            data-dropdown-toggle="mobile-dropdown-{{ $category->id }}">

                                        <i class="fas fa-ellipsis-v"></i>

                                    </button>

                                    <div id="mobile-dropdown-{{ $category->id }}" 

                                         class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-10 hidden">

                                        <a href="{{ route('admin.categories.edit', $category->id) }}" 

                                           class="px-4 py-2 hover:bg-gray-100 flex items-center gap-2 text-gray-700">

                                            <i class="fas fa-edit"></i>

                                            <span>Edit</span>

                                        </a>

                                        <a href="{{ route('admin.categories.duplicate', $category->id) }}" 

                                           class="px-4 py-2 hover:bg-gray-100 flex items-center gap-2 text-gray-700">

                                            <i class="fas fa-copy"></i>

                                            <span>Duplicate</span>

                                        </a>

                                        <div class="border-t border-gray-200 my-2"></div>

                                        <a href="#" 

                                           class="px-4 py-2 hover:bg-red-50 text-red-600 flex items-center gap-2 delete-category"

                                           data-id="{{ $category->id }}"

                                           data-name="{{ $category->name }}">

                                            <i class="fas fa-trash"></i>

                                            <span>Delete</span>

                                        </a>

                                    </div>

                                </div>

                            </div>

                            

                            @if($category->description)

                            <p class="text-sm text-gray-600 mt-2 line-clamp-2">{{ $category->description }}</p>

                            @endif

                            

                            <!-- Order & Actions -->

                            <div class="flex items-center justify-between mt-4">

                                <div class="flex items-center gap-2">

                                    <span class="text-sm text-gray-500">Order:</span>

                                    <input type="number" 

                                           class="w-16 px-2 py-1 border border-gray-300 rounded text-center text-sm"

                                           value="{{ $category->order }}" 

                                           data-id="{{ $category->id }}">

                                    <button class="action-btn bg-gray-100 text-gray-600 text-sm update-order" 

                                            data-id="{{ $category->id }}">

                                        <i class="fas fa-save"></i>

                                    </button>

                                </div>

                                

                                <div class="flex items-center gap-2">

                                    <a href="{{ route('admin.categories.edit', $category->id) }}" 

                                       class="action-btn bg-yellow-50 text-yellow-600">

                                        <i class="fas fa-edit"></i>

                                    </a>

                                    <a href="{{ route('admin.categories.items', $category->id) }}" 

                                       class="action-btn bg-blue-50 text-blue-600">

                                        <i class="fas fa-list"></i>

                                    </a>

                                    <form action="{{ route('admin.categories.toggle', $category->id) }}" 

                                          method="POST" 

                                          class="inline">

                                        @csrf

                                        <button type="submit" 

                                                class="action-btn {{ $category->is_active ? 'bg-red-50 text-red-600' : 'bg-green-50 text-green-600' }}">

                                            <i class="fas {{ $category->is_active ? 'fa-eye-slash' : 'fa-eye' }}"></i>

                                        </button>

                                    </form>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

                @endforeach

            </div>

            @endif

        </div>

    </div>

</div>



<!-- Add Category Modal -->

<div class="modal fade fixed inset-0 overflow-y-auto" id="addCategoryModal" tabindex="-1" aria-hidden="true">

    <div class="modal-dialog modal-lg relative w-auto my-6 mx-auto max-w-3xl">

        <div class="modal-content relative bg-white rounded-2xl shadow-2xl">

            <form action="{{ route('admin.categories.store') }}" method="POST" enctype="multipart/form-data" id="addCategoryForm">

                @csrf

                <div class="modal-header p-6 border-b border-gray-200 rounded-t-2xl bg-gradient-to-r from-gold to-dark-gold">

                    <h5 class="text-xl font-bold text-white">

                        <i class="fas fa-plus-circle mr-2"></i>

                        Add New Category

                    </h5>

                    <button type="button" 

                            class="close text-white hover:text-gray-200" 

                            onclick="hideModal('addCategoryModal')">

                        <i class="fas fa-times"></i>

                    </button>

                </div>

                

                <div class="modal-body p-6 space-y-6">

                    <!-- Basic Info -->

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                        <div>

                            <label for="name" class="block text-sm font-medium text-gray-700 mb-2">

                                Category Name <span class="text-red-500">*</span>

                            </label>

                            <input type="text" 

                                   id="name" 

                                   name="name" 

                                   required

                                   class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-gold/20 focus:border-gold transition-all"

                                   placeholder="e.g., Main Course, Desserts">

                            @error('name')

                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>

                            @enderror

                        </div>

                        

                        <div>

                            <label for="order" class="block text-sm font-medium text-gray-700 mb-2">

                                Display Order

                            </label>

                            <input type="number" 

                                   id="order" 

                                   name="order" 

                                   min="0"

                                   value="{{ old('order', $categories->max('order') + 1 ?? 0) }}"

                                   class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-gold/20 focus:border-gold transition-all">

                        </div>

                    </div>

                    

                    <!-- Description -->

                    <div>

                        <label for="description" class="block text-sm font-medium text-gray-700 mb-2">

                            Description

                        </label>

                        <textarea id="description" 

                                  name="description" 

                                  rows="3"

                                  class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-gold/20 focus:border-gold transition-all"

                                  placeholder="Brief description of this category (optional)">{{ old('description') }}</textarea>

                    </div>

                    

                    <!-- Image Upload -->

                    <div>

                        <label class="block text-sm font-medium text-gray-700 mb-2">

                            Category Image

                        </label>

                        <div class="border-2 border-dashed border-gray-300 rounded-2xl p-8 text-center hover:border-gold transition-colors cursor-pointer"

                             onclick="document.getElementById('image').click()">

                            <input type="file" 

                                   id="image" 

                                   name="image" 

                                   accept="image/*"

                                   class="hidden"

                                   onchange="previewImage(event)">

                            <div class="space-y-3">

                                <div class="w-16 h-16 mx-auto bg-gray-100 rounded-full flex items-center justify-center">

                                    <i class="fas fa-cloud-upload-alt text-2xl text-gray-400"></i>

                                </div>

                                <div>

                                    <p class="text-sm font-medium text-gray-700">Click to upload image</p>

                                    <p class="text-xs text-gray-500 mt-1">JPG, PNG, WebP (Max 5MB)</p>

                                </div>

                            </div>

                        </div>

                        

                        <!-- Image Preview -->

                        <div id="imagePreviewContainer" class="mt-4 hidden">

                            <label class="block text-sm font-medium text-gray-700 mb-2">Preview:</label>

                            <div class="border border-gray-200 rounded-xl p-4 bg-gray-50">

                                <img id="imagePreview" 

                                     src="#" 

                                     alt="Preview"

                                     class="max-w-full h-48 object-cover rounded-lg mx-auto hidden">

                                <p id="imagePreviewText" class="text-center text-gray-500">

                                    Image preview will appear here

                                </p>

                            </div>

                        </div>

                        @error('image')

                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>

                        @enderror

                    </div>

                    

                    <!-- Icon Selection -->

                    <div>

                        <label class="block text-sm font-medium text-gray-700 mb-3">

                            Category Icon

                        </label>

                        <div class="grid grid-cols-4 sm:grid-cols-8 gap-3">

                            @php

                                $icons = [

                                    'fa-utensils', 'fa-hamburger', 'fa-pizza-slice', 'fa-ice-cream',

                                    'fa-coffee', 'fa-wine-glass-alt', 'fa-cocktail', 'fa-fish',

                                    'fa-drumstick-bite', 'fa-carrot', 'fa-bread-slice', 'fa-cheese',

                                    'fa-lemon', 'fa-apple-alt', 'fa-pepper-hot', 'fa-seedling'

                                ];

                            @endphp

                            @foreach($icons as $icon)

                            <div class="icon-option p-3 border-2 border-gray-200 rounded-xl text-center cursor-pointer transition-all hover:border-gold hover:scale-105"

                                 onclick="selectIcon('{{ $icon }}')"

                                 data-icon="{{ $icon }}">

                                <i class="fas {{ $icon }} text-xl text-gray-600"></i>

                            </div>

                            @endforeach

                        </div>

                        <input type="hidden" name="icon" id="selectedIcon" value="{{ old('icon', 'fa-utensils') }}">

                    </div>

                    

                    <!-- Active Switch - DIPERBAIKI -->

                    <div class="flex items-center justify-between">

                        <label class="text-gray-700 font-medium">

                            Active Category

                        </label>

                        <label class="relative inline-flex items-center cursor-pointer">

                            <input type="checkbox" 

                                   id="is_active" 

                                   name="is_active" 

                                   value="1"

                                   checked

                                   class="sr-only peer">

                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-gold/20 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-5 after:w-5 after:transition-all peer-checked:bg-gold"></div>

                        </label>

                    </div>

                </div>

                

                <div class="modal-footer p-6 border-t border-gray-200 flex justify-end gap-3 rounded-b-2xl">

                    <button type="button" 

                            class="px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors"

                            onclick="hideModal('addCategoryModal')">

                        Cancel

                    </button>

                    <button type="submit" 

                            class="btn-primary px-6 py-3 rounded-xl flex items-center gap-2">

                        <i class="fas fa-save"></i>

                        Save Category

                    </button>

                </div>

            </form>

        </div>

    </div>

</div>



<!-- Delete Confirmation Modal -->

<div class="modal fade fixed inset-0 overflow-y-auto" id="deleteModal" tabindex="-1" aria-hidden="true">

    <div class="modal-dialog relative w-auto my-6 mx-auto max-w-md">

        <div class="modal-content relative bg-white rounded-2xl shadow-2xl">

            <div class="modal-header p-6 border-b border-gray-200 rounded-t-2xl bg-red-50">

                <div class="flex items-center">

                    <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mr-4">

                        <i class="fas fa-exclamation-triangle text-xl text-red-600"></i>

                    </div>

                    <div>

                        <h5 class="text-lg font-bold text-gray-800">Confirm Deletion</h5>

                        <p class="text-sm text-gray-600">This action cannot be undone</p>

                    </div>

                </div>

                <button type="button" 

                        class="close text-gray-400 hover:text-gray-600" 

                        onclick="hideModal('deleteModal')">

                    <i class="fas fa-times"></i>

                </button>

            </div>

            

            <div class="modal-body p-6">

                <p class="text-gray-700 mb-4">

                    Are you sure you want to delete <strong id="deleteCategoryName" class="text-red-600"></strong>?

                </p>

                <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-r mb-4">

                    <div class="flex">

                        <div class="flex-shrink-0">

                            <i class="fas fa-exclamation-circle text-yellow-400"></i>

                        </div>

                        <div class="ml-3">

                            <p class="text-sm text-yellow-700">

                                <strong>Warning:</strong> This will also delete all menu items in this category!

                            </p>

                        </div>

                    </div>

                </div>

            </div>

            

            <div class="modal-footer p-6 border-t border-gray-200 flex justify-end gap-3 rounded-b-2xl">

                <button type="button" 

                        class="px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors"

                        onclick="hideModal('deleteModal')">

                    Cancel

                </button>

                <form id="deleteForm" method="POST" class="inline">

                    @csrf

                    @method('DELETE')

                    <button type="submit" 

                            class="px-6 py-3 bg-red-600 text-white rounded-xl hover:bg-red-700 transition-colors flex items-center gap-2">

                        <i class="fas fa-trash"></i>

                        Delete Permanently

                    </button>

                </form>

            </div>

        </div>

    </div>

</div>



<style>

.line-clamp-2 {

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.icon-option.selected {

    border-color: #D4AF37;

    background: rgba(212, 175, 55, 0.1);

}



.icon-option.selected i {

    color: #D4AF37;

}



/* Action Button */

.action-btn {

    width: 36px;

    height: 36px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 0.5rem;

    transition: all 0.2s;

}



/* Category Preview */

.category-preview {

    width: 80px;

    height: 80px;

    border-radius: 0.75rem;

    overflow: hidden;

    background: #f8f9fa;

}



/* Card Styles */

.card {

    background: white;

    border-radius: 1rem;

    border: 1px solid #e5e7eb;

    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);

}



.btn-primary {

    background: linear-gradient(135deg, #D4AF37 0%, #8B6914 100%);

    color: white;

    font-weight: 600;

    border: none;

    transition: all 0.3s;

}



.btn-primary:hover {

    background: linear-gradient(135deg, #8B6914 0%, #D4AF37 100%);

    transform: translateY(-2px);

}



.btn-secondary {

    background: white;

    color: #374151;

    border: 1px solid #d1d5db;

    font-weight: 500;

    transition: all 0.2s;

}



.btn-secondary:hover {

    background: #f9fafb;

    border-color: #9ca3af;

}



/* Modal backdrop */

.modal-backdrop {

    background: rgba(0, 0, 0, 0.5);

    backdrop-filter: blur(4px);

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1040;

}



/* Modal styles */

.modal {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1050;

    overflow-y: auto;

}



.modal.show {

    display: flex !important;

    align-items: center;

    justify-content: center;

}



/* Gold color */

.from-gold {

    --tw-gradient-from: #D4AF37;

    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(212, 175, 55, 0));

}



.to-dark-gold {

    --tw-gradient-to: #8B6914;

}



.text-gold {

    color: #D4AF37;

}



.bg-gold {

    background-color: #D4AF37;

}



/* Responsive adjustments */

@media (max-width: 640px) {

    .category-preview {

        width: 60px;

        height: 60px;

    }

    

    .action-btn {

        width: 32px;

        height: 32px;

        font-size: 12px;

    }

    

    .modal-dialog {

        margin: 1rem;

        width: calc(100% - 2rem);

    }

}



/* Toast notification */

.toast {

    position: fixed;

    top: 20px;

    right: 20px;

    padding: 1rem 1.5rem;

    border-radius: 0.75rem;

    color: white;

    font-weight: 500;

    z-index: 9999;

    animation: slideIn 0.3s ease;

}



.toast-success {

    background-color: #10b981;

}



.toast-error {

    background-color: #ef4444;

}



.toast-info {

    background-color: #3b82f6;

}



@keyframes slideIn {

    from {

        transform: translateX(100%);

        opacity: 0;

    }

    to {

        transform: translateX(0);

        opacity: 1;

    }

}

</style>



<script>

// Toast notification function

function showToast(message, type = 'info') {

    const toast = document.createElement('div');

    toast.className = `toast toast-${type}`;

    toast.textContent = message;

    

    document.body.appendChild(toast);

    

    setTimeout(() => {

        toast.remove();

    }, 3000);

}



// Modal functions

window.showModal = function(modalId) {

    const modal = document.getElementById(modalId);

    if (modal) {

        modal.classList.add('show');

        document.body.style.overflow = 'hidden';

        // Add backdrop

        const backdrop = document.createElement('div');

        backdrop.className = 'modal-backdrop fade show';

        backdrop.id = 'modalBackdrop';

        backdrop.onclick = () => hideModal(modalId);

        document.body.appendChild(backdrop);

    }

};



window.hideModal = function(modalId) {

    const modal = document.getElementById(modalId);

    if (modal) {

        modal.classList.remove('show');

        document.body.style.overflow = 'auto';

        // Remove backdrop

        const backdrop = document.getElementById('modalBackdrop');

        if (backdrop) {

            backdrop.remove();

        }

    }

};



// Initialize when DOM is loaded

document.addEventListener('DOMContentLoaded', function() {

    // Image preview function

    window.previewImage = function(event) {

        const input = event.target;

        const preview = document.getElementById('imagePreview');

        const previewText = document.getElementById('imagePreviewText');

        const previewContainer = document.getElementById('imagePreviewContainer');

        

        if (input.files && input.files[0]) {

            const reader = new FileReader();

            

            reader.onload = function(e) {

                preview.src = e.target.result;

                preview.style.display = 'block';

                previewText.style.display = 'none';

                previewContainer.style.display = 'block';

            };

            

            reader.readAsDataURL(input.files[0]);

        }

    };

    

    // Icon selection

    window.selectIcon = function(icon) {

        // Remove selected class from all icons

        document.querySelectorAll('.icon-option').forEach(el => {

            el.classList.remove('selected');

        });

        

        // Add selected class to clicked icon

        const selectedEl = document.querySelector(`.icon-option[data-icon="${icon}"]`);

        if (selectedEl) {

            selectedEl.classList.add('selected');

        }

        

        // Set hidden input value

        document.getElementById('selectedIcon').value = icon;

    };

    

    // Initialize with default selected icon

    const defaultIcon = document.getElementById('selectedIcon').value;

    selectIcon(defaultIcon);

    

    // Update order functionality

    document.querySelectorAll('.update-order').forEach(button => {

        button.addEventListener('click', function() {

            const categoryId = this.getAttribute('data-id');

            const orderInput = document.querySelector(`input[data-id="${categoryId}"]`);

            const newOrder = orderInput.value;

            

            // In a real application, you would make an AJAX request here

            fetch(`/admin/categories/${categoryId}/update-order`, {

                method: 'POST',

                headers: {

                    'Content-Type': 'application/json',

                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')

                },

                body: JSON.stringify({ order: newOrder })

            })

            .then(response => response.json())

            .then(data => {

                if (data.success) {

                    showToast('Order updated successfully!', 'success');

                    setTimeout(() => location.reload(), 1000);

                } else {

                    showToast(data.message || 'Failed to update order', 'error');

                }

            })

            .catch(error => {

                showToast('Error updating order', 'error');

                console.error('Error:', error);

            });

        });

    });

    

    // Order input enter key support

    document.querySelectorAll('input[data-id]').forEach(input => {

        input.addEventListener('keypress', function(e) {

            if (e.key === 'Enter') {

                const button = this.closest('.flex').querySelector('.update-order');

                if (button) button.click();

            }

        });

    });

    

    // Delete category

    document.querySelectorAll('.delete-category').forEach(link => {

        link.addEventListener('click', function(e) {

            e.preventDefault();

            const categoryId = this.getAttribute('data-id');

            const categoryName = this.getAttribute('data-name');

            

            document.getElementById('deleteCategoryName').textContent = categoryName;

            document.getElementById('deleteForm').action = `/admin/categories/${categoryId}`;

            

            showModal('deleteModal');

        });

    });

    

    // Close modals when clicking outside

    document.querySelectorAll('.modal').forEach(modal => {

        modal.addEventListener('click', function(e) {

            if (e.target === this) {

                hideModal(this.id);

            }

        });

    });

    

    // Dropdowns functionality

    document.querySelectorAll('[data-dropdown-toggle]').forEach(button => {

        button.addEventListener('click', function() {

            const dropdownId = this.getAttribute('data-dropdown-toggle');

            const dropdown = document.getElementById(dropdownId);

            if (dropdown) {

                dropdown.classList.toggle('hidden');

            }

        });

    });

    

    // Close dropdowns when clicking outside

    document.addEventListener('click', function(e) {

        document.querySelectorAll('[data-dropdown-toggle]').forEach(button => {

            const dropdownId = button.getAttribute('data-dropdown-toggle');

            const dropdown = document.getElementById(dropdownId);

            

            if (dropdown && !button.contains(e.target) && !dropdown.contains(e.target)) {

                dropdown.classList.add('hidden');

            }

        });

    });

    

    // Form validation

    document.getElementById('addCategoryForm')?.addEventListener('submit', function(e) {

        const nameInput = document.getElementById('name');

        if (!nameInput.value.trim()) {

            e.preventDefault();

            nameInput.focus();

            showToast('Category name is required', 'error');

        }

    });

});



// Action functions

function reorderCategories() {

    if (confirm('This will open reorder mode. Save changes when done?')) {

        showToast('Reorder mode activated - drag and drop categories to reorder', 'info');

        // Implement drag and drop functionality here

    }

}



function exportCategories() {

    showToast('Exporting categories to CSV...', 'info');

    // Implement export functionality here

    setTimeout(() => {

        showToast('Categories exported successfully!', 'success');

    }, 1500);

}

</script>

@endsection