@extends('admin.layouts.app')

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

@section('content')
<div class="mb-6 flex justify-between items-center">
    <div>
        <a href="{{ route('admin.inventory.index') }}" class="text-gray-600 hover:text-gray-800">
            <i class="fas fa-arrow-left mr-2"></i>Back to Inventory
        </a>
    </div>
    <button onclick="openCategoryModal()" class="bg-gold hover:bg-gold-dark text-white px-4 py-2 rounded-lg">
        <i class="fas fa-plus mr-2"></i>Add Category
    </button>
</div>

<div class="bg-white rounded-lg shadow p-6 mb-6">
    <h2 class="text-xl font-bold text-gray-800 mb-4">Inventory Categories</h2>
    <p class="text-gray-500 text-sm mb-6">Organize your inventory items into categories for easier management.</p>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    @forelse($categories as $category)
    <div class="bg-white rounded-lg shadow p-6">
        <div class="flex justify-between items-start mb-4">
            <div>
                <h3 class="text-lg font-bold text-gray-800">{{ $category->name }}</h3>
                <p class="text-gray-500 text-sm">{{ $category->items_count }} items</p>
            </div>
            <span class="bg-gold/10 text-gold text-xs font-medium px-2 py-1 rounded">
                {{ $category->is_active ? 'Active' : 'Inactive' }}
            </span>
        </div>
        @if($category->description)
        <p class="text-gray-600 text-sm mb-4">{{ $category->description }}</p>
        @endif
        <div class="flex justify-end space-x-2 border-t pt-4">
            <button onclick="editCategory({{ $category->id }}, '{{ $category->name }}', '{{ $category->description }}')"
                    class="text-blue-600 hover:text-blue-800 text-sm">
                <i class="fas fa-edit mr-1"></i>Edit
            </button>
            <form action="{{ route('admin.inventory.categories.destroy', $category) }}" method="POST" class="inline"
                  onsubmit="return confirm('Are you sure? Items in this category will need to be reassigned.')">
                @csrf
                @method('DELETE')
                <button type="submit" class="text-red-600 hover:text-red-800 text-sm">
                    <i class="fas fa-trash mr-1"></i>Delete
                </button>
            </form>
        </div>
    </div>
    @empty
    <div class="col-span-full bg-white rounded-lg shadow p-8 text-center text-gray-500">
        <i class="fas fa-folder-open text-4xl mb-3"></i>
        <p>No categories yet. <button onclick="openCategoryModal()" class="text-gold hover:underline">Create your first category</button></p>
    </div>
    @endforelse
</div>

<div id="categoryModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center">
    <div class="bg-white rounded-lg p-6 w-full max-w-md">
        <h3 class="text-lg font-bold mb-4" id="modalTitle">Add Category</h3>
        <form action="{{ route('admin.inventory.categories.store') }}" method="POST" id="categoryForm">
            @csrf
            <input type="hidden" name="_method" id="formMethod" value="POST">
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Category Name *</label>
                <input type="text" name="name" id="categoryName" required
                       class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-gold">
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                <textarea name="description" id="categoryDescription" rows="2"
                          class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-gold"></textarea>
            </div>
            <div class="flex justify-end space-x-3">
                <button type="button" onclick="closeCategoryModal()" class="px-4 py-2 bg-gray-200 rounded-lg hover:bg-gray-300">Cancel</button>
                <button type="submit" class="px-4 py-2 bg-gold text-white rounded-lg hover:bg-gold-dark">Save</button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function openCategoryModal() {
    document.getElementById('modalTitle').textContent = 'Add Category';
    document.getElementById('categoryForm').action = '{{ route('admin.inventory.categories.store') }}';
    document.getElementById('formMethod').value = 'POST';
    document.getElementById('categoryName').value = '';
    document.getElementById('categoryDescription').value = '';
    document.getElementById('categoryModal').classList.remove('hidden');
}

function editCategory(id, name, description) {
    document.getElementById('modalTitle').textContent = 'Edit Category';
    document.getElementById('categoryForm').action = '/admin/inventory/categories/' + id;
    document.getElementById('formMethod').value = 'PUT';
    document.getElementById('categoryName').value = name;
    document.getElementById('categoryDescription').value = description || '';
    document.getElementById('categoryModal').classList.remove('hidden');
}

function closeCategoryModal() {
    document.getElementById('categoryModal').classList.add('hidden');
}

document.getElementById('categoryModal').addEventListener('click', function(e) {
    if (e.target === this) closeCategoryModal();
});
</script>
@endpush
@endsection