<x-app-layout>
<x-module-hero title="Chat Categories" description="Organize conversations by topic" icon="fa-th-large">
    <x-slot name="tabs">
        @can('view chats')
        <a href="{{ route('chat.index') }}"
           class="module-hero-tab opacity-70 hover:opacity-100 inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
            <i class="fas fa-tachometer-alt"></i> Dashboard
        </a>
        @endcan
        @can('handle chats')
        <a href="{{ route('chat.conversations') }}"
           class="module-hero-tab opacity-70 hover:opacity-100 inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
            <i class="fas fa-comments"></i> Conversations
        </a>
        @endcan
        @can('handle chats')
        <a href="{{ route('chat.agent-dashboard') }}"
           class="module-hero-tab opacity-70 hover:opacity-100 inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
            <i class="fas fa-headset"></i> Agent Dashboard
        </a>
        @endcan
        @can('appoint chat agents')
        <a href="{{ route('chat.agents') }}"
           class="module-hero-tab opacity-70 hover:opacity-100 inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
            <i class="fas fa-user-tie"></i> Agents
        </a>
        @endcan
        @can('manage chat categories')
        <a href="{{ route('chat.categories') }}"
           class="module-hero-tab border-b-2 border-[#1e293b] inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
            <i class="fas fa-th-large"></i> Categories
        </a>
        @endcan
    </x-slot>
    @can('manage chat categories')
    <x-slot name="actions">
        <button onclick="showCreateModal()"
           class="inline-flex items-center gap-2 px-4 py-2 bg-white text-[#1a4731] text-sm font-semibold rounded-lg hover:bg-green-50 transition">
            <i class="fas fa-plus"></i> New Category
        </button>
    </x-slot>
    @endcan
</x-module-hero>

<div class="p-6">
    @if(session('success'))
        <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center gap-2">
            <i class="fas fa-check-circle"></i> {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-center gap-2">
            <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
        </div>
    @endif

    @if($categories->isEmpty())
        <div class="text-center py-16">
            <i class="fas fa-th-large text-6xl text-gray-300 mb-4 block"></i>
            <h3 class="text-xl font-semibold text-gray-700 mb-2">No categories yet</h3>
            <p class="text-gray-500 mb-6">Create categories to organize incoming chats by topic.</p>
            @can('manage chat categories')
                <button onclick="showCreateModal()"
                    class="inline-flex items-center gap-2 px-5 py-2.5 bg-[#1a4731] text-white font-semibold rounded-lg hover:bg-[#276749] transition">
                    <i class="fas fa-plus"></i> Create Category
                </button>
            @endcan
        </div>
    @else
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($categories as $category)
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden"
                     style="border-top: 4px solid {{ $category->color ?? '#1a4731' }}">
                    <div class="p-5">
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center gap-3">
                                <div class="w-11 h-11 rounded-lg flex items-center justify-center text-white text-lg"
                                     style="background-color: {{ $category->color ?? '#1a4731' }}">
                                    <i class="fas fa-{{ $category->icon ?? 'comments' }}"></i>
                                </div>
                                <div>
                                    <h3 class="font-semibold text-gray-800">{{ $category->name }}</h3>
                                    @if($category->expected_response_time)
                                        <p class="text-xs text-gray-500">
                                            <i class="fas fa-clock mr-1"></i>{{ $category->expected_response_time }} min response
                                        </p>
                                    @endif
                                </div>
                            </div>
                            <span class="px-2 py-0.5 text-xs rounded-full {{ $category->is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600' }}">
                                {{ $category->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </div>
                        @if($category->description)
                            <p class="text-sm text-gray-600 mb-3">{{ $category->description }}</p>
                        @endif
                        <div class="flex items-center gap-4 text-xs text-gray-400">
                            <span><i class="fas fa-comments mr-1"></i>{{ $category->conversations_count ?? 0 }} chats</span>
                            <span><i class="fas fa-sort mr-1"></i>Order: {{ $category->sort_order }}</span>
                        </div>
                    </div>
                    @can('manage chat categories')
                        <div class="px-5 py-3 border-t border-gray-100 flex justify-end gap-2">
                            <button onclick="editCategory({{ $category->id }}, '{{ addslashes($category->name) }}', '{{ addslashes($category->description ?? '') }}', '{{ $category->icon ?? 'comments' }}', '{{ $category->color ?? '#1a4731' }}', {{ $category->expected_response_time ?? 0 }}, {{ $category->sort_order }}, {{ $category->is_active ? 'true' : 'false' }})"
                                class="inline-flex items-center gap-1 px-3 py-1.5 bg-amber-100 text-amber-700 text-xs font-medium rounded-lg hover:bg-amber-200 transition">
                                <i class="fas fa-edit"></i> Edit
                            </button>
                            <form action="{{ route('chat.destroy-category', $category) }}" method="POST" class="inline">
                                @csrf @method('DELETE')
                                <button type="submit"
                                    class="inline-flex items-center gap-1 px-3 py-1.5 bg-red-100 text-red-700 text-xs font-medium rounded-lg hover:bg-red-200 transition"
                                    onclick="return confirm('Delete this category?')">
                                    <i class="fas fa-trash"></i> Delete
                                </button>
                            </form>
                        </div>
                    @endcan
                </div>
            @endforeach
        </div>
    @endif
</div>

{{-- Create/Edit Modal --}}
<div id="category-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl max-w-lg w-full mx-4 max-h-[90vh] overflow-y-auto">
        <div class="flex items-center justify-between px-6 py-4 bg-gradient-to-r from-green-700 to-emerald-700">
            <h3 class="text-lg font-semibold text-white flex items-center gap-2" id="modal-title">
                <i class="fas fa-th-large"></i> New Category
            </h3>
            <button onclick="closeModal()" class="text-white/80 hover:text-white transition"><i class="fas fa-times"></i></button>
        </div>
        <form id="category-form" action="{{ route('chat.store-category') }}" method="POST" class="p-6">
            @csrf
            <input type="hidden" name="_method" id="form-method" value="POST">

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Name <span class="text-red-500">*</span></label>
                    <input type="text" name="name" id="category-name" required
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                    <textarea name="description" id="category-description" rows="2"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500"></textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Icon <span class="text-red-500">*</span></label>
                    <select name="icon" id="category-icon"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                        <option value="question-circle">Question</option>
                        <option value="headset">Support</option>
                        <option value="shopping-cart">Sales</option>
                        <option value="credit-card">Billing</option>
                        <option value="tools">Technical</option>
                        <option value="info-circle">General</option>
                        <option value="comment-dots">Feedback</option>
                        <option value="comments">Chat</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Color <span class="text-red-500">*</span></label>
                    <input type="color" name="color" id="category-color" value="#1a4731"
                        class="w-full h-10 rounded-lg cursor-pointer border border-gray-300">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Response Time (min)</label>
                    <input type="number" name="expected_response_time" id="category-response" min="1"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Sort Order</label>
                    <input type="number" name="sort_order" id="category-sort" value="0"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                </div>
            </div>

            <div class="mb-4">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="hidden" name="is_active" value="0">
                    <input type="checkbox" name="is_active" id="category-active" value="1" checked
                        class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                    <span class="text-sm text-gray-700">Active (visible to visitors)</span>
                </label>
            </div>

            <div class="flex justify-end gap-2 pt-4 border-t border-gray-200">
                <button type="button" onclick="closeModal()" class="px-4 py-2 border border-gray-300 rounded-lg text-sm text-gray-700">Cancel</button>
                <button type="submit" class="px-4 py-2 bg-[#1a4731] text-white text-sm font-semibold rounded-lg hover:bg-[#276749] transition">
                    Save Category
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function showCreateModal() {
    document.getElementById('modal-title').textContent = 'New Category';
    document.getElementById('category-form').action = "{{ route('chat.store-category') }}";
    document.getElementById('form-method').value = 'POST';
    document.getElementById('category-name').value = '';
    document.getElementById('category-description').value = '';
    document.getElementById('category-icon').value = 'question-circle';
    document.getElementById('category-color').value = '#1a4731';
    document.getElementById('category-response').value = '';
    document.getElementById('category-sort').value = '0';
    document.getElementById('category-active').checked = true;
    document.getElementById('category-modal').classList.remove('hidden');
    document.getElementById('category-modal').classList.add('flex');
}

function editCategory(id, name, description, icon, color, responseTime, sortOrder, isActive) {
    document.getElementById('modal-title').textContent = 'Edit Category';
    document.getElementById('category-form').action = `/chat/categories/${id}`;
    document.getElementById('form-method').value = 'PUT';
    document.getElementById('category-name').value = name;
    document.getElementById('category-description').value = description;
    document.getElementById('category-icon').value = icon;
    document.getElementById('category-color').value = color;
    document.getElementById('category-response').value = responseTime || '';
    document.getElementById('category-sort').value = sortOrder;
    document.getElementById('category-active').checked = isActive;
    document.getElementById('category-modal').classList.remove('hidden');
    document.getElementById('category-modal').classList.add('flex');
}

function closeModal() {
    document.getElementById('category-modal').classList.add('hidden');
    document.getElementById('category-modal').classList.remove('flex');
}
</script>
@endpush
</x-app-layout>
