@push('styles')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
    .print-queue-floating {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1000;
        background: white;
        border-radius: 20px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        border: 3px solid #3b82f6;
        min-width: 300px;
        max-width: 400px;
    }
    
    .print-queue-header {
        background: linear-gradient(135deg, #3b82f6, #1d4ed8);
        color: white;
        padding: 15px 20px;
        border-radius: 17px 17px 0 0;
        font-weight: bold;
    }
    
    .print-queue-body {
        padding: 15px 20px;
        max-height: 300px;
        overflow-y: auto;
    }
    
    .queue-item {
        background: #f8fafc;
        border-radius: 10px;
        padding: 10px;
        margin-bottom: 8px;
        border: 1px solid #e2e8f0;
    }
    
    .queue-item:last-child {
        margin-bottom: 0;
    }
    
    .queue-actions {
        padding: 15px 20px;
        border-top: 1px solid #e2e8f0;
        background: #f8fafc;
        border-radius: 0 0 17px 17px;
    }
</style>
@endpush

<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between items-center">
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ __('Novo Produto') }}
            </h2>
            <div class="flex space-x-3">
                <button onclick="togglePrintQueue()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium">
                    <i class="fas fa-print mr-2"></i>
                    Fila de Impressão (<span id="queue-count-header">0</span>)
                </button>
                <a href="{{ route('labels.print') }}" 
                   class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg font-medium">
                    <i class="fas fa-print mr-2"></i>
                    Imprimir Etiquetas
                </a>
                <a href="{{ route('products.index') }}" 
                   class="bg-gray-500 hover:bg-gray-700 text-white px-4 py-2 rounded-lg font-medium">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Voltar
                </a>
            </div>
        </div>
    </x-slot>

    <div class="py-6">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <form method="POST" action="{{ route('products.store') }}" enctype="multipart/form-data">
                        @csrf
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- Nome do Produto -->
                            <div class="md:col-span-2">
                                <label for="name" class="block text-sm font-medium text-gray-700 mb-2">
                                    Nome do Produto *
                                </label>
                                <input type="text" 
                                       id="name" 
                                       name="name" 
                                       value="{{ old('name') }}"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                       required>
                                @error('name')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- SKU -->
                            <div>
                                <label for="sku" class="block text-sm font-medium text-gray-700 mb-2">
                                    SKU
                                </label>
                                <input type="text" 
                                       id="sku" 
                                       name="sku" 
                                       value="{{ old('sku') }}"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                @error('sku')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- EAN -->
                            <div>
                                <label for="ean" class="block text-sm font-medium text-gray-700 mb-2">
                                    EAN/Código de Barras
                                </label>
                                <input type="text" 
                                       id="ean" 
                                       name="ean" 
                                       value="{{ old('ean') }}"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                @error('ean')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Preço -->
                            <div>
                                <label for="price" class="block text-sm font-medium text-gray-700 mb-2">
                                    Preço de Venda *
                                </label>
                                <input type="number" 
                                       id="price" 
                                       name="price" 
                                       step="0.01"
                                       min="0"
                                       value="{{ old('price') }}"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                       required>
                                @error('price')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Custo -->
                            <div>
                                <label for="cost" class="block text-sm font-medium text-gray-700 mb-2">
                                    Custo
                                </label>
                                <input type="number" 
                                       id="cost" 
                                       name="cost" 
                                       step="0.01"
                                       min="0"
                                       value="{{ old('cost') }}"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                @error('cost')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Estoque Inicial -->
                            <div>
                                <label for="stock" class="block text-sm font-medium text-gray-700 mb-2">
                                    Estoque Inicial *
                                </label>
                                <input type="number" 
                                       id="stock" 
                                       name="stock" 
                                       min="0"
                                       value="{{ old('stock', 0) }}"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                       required>
                                <p class="mt-1 text-sm text-gray-500">
                                    Quantidade inicial em estoque. Após a criação, use o sistema de controle de estoque para gerenciar entradas e saídas.
                                </p>
                                @error('stock')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Estoque Mínimo -->
                            <div>
                                <label for="stock_min" class="block text-sm font-medium text-gray-700 mb-2">
                                    Estoque Mínimo *
                                </label>
                                <input type="number" 
                                       id="stock_min" 
                                       name="stock_min" 
                                       min="0"
                                       value="{{ old('stock_min', 0) }}"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                       required>
                                @error('stock_min')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Categoria -->
                            <div>
                                <label for="category_id" class="block text-sm font-medium text-gray-700 mb-2">
                                    Categoria
                                </label>
                                <div class="flex space-x-2">
                                    <select id="category_id" 
                                            name="category_id" 
                                            class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                        <option value="">Selecione uma categoria</option>
                                        @foreach(\App\Models\Category::forAccount(auth()->user()->account_id)->active()->orderBy('name')->get() as $category)
                                            <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                                {{ $category->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <button type="button" 
                                            onclick="openNewCategoryModal()" 
                                            class="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 font-medium text-sm">
                                        <span class="mr-1">+</span>
                                        Nova Categoria
                                    </button>
                                </div>
                                @error('category_id')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Imagem do Produto -->
                            <div>
                                <label for="image" class="block text-sm font-medium text-gray-700 mb-2">
                                    Imagem do Produto
                                </label>
                                <input type="file" 
                                       id="image" 
                                       name="image" 
                                       accept="image/*"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                @error('image')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Adicionar à Fila de Impressão -->
                            <div class="md:col-span-2">
                                <div class="flex items-center space-x-3 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                                    <input type="checkbox" 
                                           id="add_to_print_queue" 
                                           name="add_to_print_queue" 
                                           value="1"
                                           class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                                           onchange="updateQueueIndicator()">
                                    <div class="flex-1">
                                        <label for="add_to_print_queue" class="text-sm font-medium text-blue-900">
                                            <i class="fas fa-print mr-2"></i>
                                            Adicionar à fila de impressão
                                        </label>
                                        <p class="text-sm text-blue-700 mt-1">
                                            Marque esta opção para adicionar o produto automaticamente à fila de impressão de etiquetas após o cadastro.
                                        </p>
                                        <div id="queue-indicator" class="mt-2 text-xs text-blue-600 hidden">
                                            <i class="fas fa-info-circle mr-1"></i>
                                            Produto será adicionado à fila após o cadastro
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Botões -->
                        <div class="mt-6 flex justify-end space-x-3">
                            <a href="{{ route('products.index') }}" 
                               class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
                                Cancelar
                            </a>
                            <button type="submit" 
                                    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
                                    onclick="showSaveMessage()">
                                <span id="save-button-text">Salvar Produto</span>
                                <span id="save-button-icon" class="ml-2"></span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Resumo da Fila de Impressão -->
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 mt-6">
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">
                    <i class="fas fa-print mr-2"></i>
                    Resumo da Fila de Impressão
                </h3>
                <div id="queue-summary" class="text-center py-8">
                    <div class="text-gray-500">
                        <i class="fas fa-info-circle text-4xl mb-4"></i>
                        <p>Nenhum produto na fila de impressão</p>
                        <p class="text-sm mt-2">Marque a opção "Adicionar à fila de impressão" ao cadastrar produtos para vê-los aqui</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Fila de Impressão Flutuante -->
    <div id="print-queue-floating" class="print-queue-floating hidden">
        <div class="print-queue-header">
            <div class="flex justify-between items-center">
                <span><i class="fas fa-print mr-2"></i>Fila de Impressão</span>
                <button onclick="togglePrintQueue()" class="text-white hover:text-gray-200">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
        
        <div class="print-queue-body">
            <div id="queue-items-list">
                <!-- Itens da fila serão inseridos aqui -->
            </div>
        </div>
        
        <div class="queue-actions">
            <div class="flex space-x-2">
                <button onclick="processPrintQueue()" 
                        id="process-queue-btn" 
                        class="flex-1 bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg disabled:bg-gray-400 disabled:cursor-not-allowed"
                        disabled>
                    <i class="fas fa-play mr-2"></i>Imprimir
                </button>
                <button onclick="clearPrintQueue()" 
                        class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg">
                    <i class="fas fa-trash mr-2"></i>Limpar
                </button>
            </div>
        </div>
    </div>
</x-app-layout>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    let printQueue = [];

    // Toggle fila de impressão
    function togglePrintQueue() {
        const queue = document.getElementById('print-queue-floating');
        queue.classList.toggle('hidden');
        updateQueueDisplay();
    }

    // Atualizar display da fila
    function updateQueueDisplay() {
        // Busca status da fila do servidor
        fetch('/labels/queue-status')
            .then(response => response.json())
            .then(data => {
                const queueItemsList = document.getElementById('queue-items-list');
                const processBtn = document.getElementById('process-queue-btn');
                const queueCountHeader = document.getElementById('queue-count-header');
                
                if (data.queue_count === 0) {
                    queueItemsList.innerHTML = '<p class="text-gray-500 text-center py-4">Fila vazia</p>';
                    processBtn.disabled = true;
                } else {
                    let html = '';
                    data.items.forEach((item, index) => {
                        html += `
                            <div class="queue-item">
                                <div class="flex justify-between items-center">
                                    <div>
                                        <div class="font-medium text-gray-900">${item.product_name}</div>
                                        <div class="text-sm text-gray-500">R$ ${parseFloat(item.price).toFixed(2).replace('.', ',')}</div>
                                        <div class="text-xs text-gray-400">${item.added_at}</div>
                                    </div>
                                    <button onclick="removeFromQueueById(${item.id})" class="text-red-500 hover:text-red-700">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>
                        `;
                    });
                    queueItemsList.innerHTML = html;
                    processBtn.disabled = !data.ready_to_print;
                }
                
                // Atualiza contador no header
                queueCountHeader.textContent = data.queue_count;
                updateQueueSummary(data);
            })
            .catch(error => {
                console.error('Erro ao atualizar fila:', error);
            });
    }

    // Atualizar resumo da fila
    function updateQueueSummary(data) {
        const summaryDiv = document.getElementById('queue-summary');
        
        if (!data || data.queue_count === 0) {
            summaryDiv.innerHTML = `
                <div class="text-gray-500">
                    <i class="fas fa-info-circle text-4xl mb-4"></i>
                    <p>Nenhum produto na fila de impressão</p>
                    <p class="text-sm mt-2">Marque a opção "Adicionar à fila de impressão" ao cadastrar produtos para vê-los aqui</p>
                </div>
            `;
        } else {
            let html = '<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">';
            data.items.forEach((item, index) => {
                html += `
                    <div class="border rounded-lg p-4 bg-gray-50">
                        <div class="flex justify-between items-start">
                            <div class="flex-1">
                                <h4 class="font-medium text-gray-900">${item.product_name}</h4>
                                <p class="text-sm text-gray-600">R$ ${parseFloat(item.price).toFixed(2).replace('.', ',')}</p>
                                <p class="text-xs text-gray-500">${item.added_at}</p>
                            </div>
                            <button onclick="removeFromQueueById(${item.id})" class="text-red-500 hover:text-red-700 ml-2">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                `;
            });
            html += '</div>';
            html += `
                <div class="mt-4 flex justify-center space-x-3">
                    <button onclick="processPrintQueue()" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg">
                        <i class="fas fa-print mr-2"></i>Imprimir Todos
                    </button>
                    <button onclick="clearPrintQueue()" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg">
                        <i class="fas fa-trash mr-2"></i>Limpar Fila
                    </button>
                </div>
            `;
            summaryDiv.innerHTML = html;
        }
    }

    // Remover da fila por ID
    function removeFromQueueById(itemId) {
        if (!confirm('Tem certeza que deseja remover este item da fila?')) {
            return;
        }
        
        fetch(`/labels/queue/${itemId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification(data.message, 'success');
                updateQueueDisplay();
            } else {
                throw new Error(data.message || 'Erro ao remover item');
            }
        })
        .catch(error => {
            console.error('Erro:', error);
            showNotification('Erro ao remover item: ' + error.message, 'error');
        });
    }

    // Processar fila de impressão
    function processPrintQueue() {
        const processBtn = document.getElementById('process-queue-btn');
        const originalText = processBtn.innerHTML;
        
        processBtn.disabled = true;
        processBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Imprimindo...';
        
        fetch('/labels/process-queue', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification(data.message, 'success');
                updateQueueDisplay();
            } else {
                throw new Error(data.message || 'Erro ao processar fila');
            }
        })
        .catch(error => {
            console.error('Erro:', error);
            showNotification('Erro ao processar fila: ' + error.message, 'error');
        })
        .finally(() => {
            processBtn.innerHTML = originalText;
            processBtn.disabled = false;
        });
    }

    // Limpar fila
    function clearPrintQueue() {
        if (!confirm('Tem certeza que deseja limpar a fila de impressão?')) {
            return;
        }
        
        fetch('/labels/clear-queue', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification(data.message, 'success');
                updateQueueDisplay();
            } else {
                throw new Error(data.message || 'Erro ao limpar fila');
            }
        })
        .catch(error => {
            console.error('Erro:', error);
            showNotification('Erro ao limpar fila: ' + error.message, 'error');
        });
    }

    // Mostrar notificações
    function showNotification(message, type) {
        const notification = document.createElement('div');
        notification.className = `fixed top-4 right-4 px-6 py-4 rounded-lg shadow-lg text-white z-50 ${
            type === 'success' ? 'bg-green-500' : 
            type === 'error' ? 'bg-red-500' : 
            'bg-blue-500'
        }`;
        notification.innerHTML = `
            <div class="flex items-center">
                <i class="fas ${type === 'success' ? 'fa-check-circle' : 
                    type === 'error' ? 'fa-exclamation-circle' : 
                    'fa-info-circle'} mr-2"></i>
                ${message}
            </div>
        `;
        document.body.appendChild(notification);
        
        setTimeout(() => {
            notification.style.opacity = '0';
            setTimeout(() => notification.remove(), 300);
        }, 3000);
    }

    // Inicializar
    document.addEventListener('DOMContentLoaded', function() {
        updateQueueDisplay();
        
        // Atualiza a fila a cada 5 segundos
        setInterval(updateQueueDisplay, 5000);
    });

    // Atualizar indicador da fila
    function updateQueueIndicator() {
        const checkbox = document.getElementById('add_to_print_queue');
        const indicator = document.getElementById('queue-indicator');
        
        if (checkbox.checked) {
            indicator.classList.remove('hidden');
            // Mostrar notificação de que será adicionado à fila
            showNotification('Produto será adicionado à fila de impressão após o cadastro', 'info');
        } else {
            indicator.classList.add('hidden');
        }
    }

    // Mostrar mensagem de salvamento
    function showSaveMessage() {
        const checkbox = document.getElementById('add_to_print_queue');
        const buttonText = document.getElementById('save-button-text');
        const buttonIcon = document.getElementById('save-button-icon');
        
        if (checkbox.checked) {
            buttonText.textContent = 'Salvar e Adicionar à Fila';
            buttonIcon.innerHTML = '<i class="fas fa-print"></i>';
        } else {
            buttonText.textContent = 'Salvar Produto';
            buttonIcon.innerHTML = '';
        }
    }

    // Modal para Nova Categoria
    function openNewCategoryModal() {
        document.getElementById('newCategoryModal').classList.remove('hidden');
    }

    function closeNewCategoryModal() {
        document.getElementById('newCategoryModal').classList.add('hidden');
        document.getElementById('newCategoryForm').reset();
        document.getElementById('new_category_color').value = '#3B82F6';
        document.getElementById('new_category_color_text').value = '#3B82F6';
    }

    // Sincronizar cor do seletor com o campo de texto
    document.getElementById('new_category_color').addEventListener('input', function() {
        document.getElementById('new_category_color_text').value = this.value;
    });

    // Criar nova categoria via AJAX
    document.getElementById('newCategoryForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        
        fetch('{{ route("categories.store") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Adicionar nova categoria ao select
                const select = document.getElementById('category_id');
                const option = document.createElement('option');
                option.value = data.category.id;
                option.textContent = data.category.name;
                option.selected = true;
                select.appendChild(option);
                
                // Fechar modal
                closeNewCategoryModal();
                
                // Mostrar mensagem de sucesso
                showNotification('Categoria criada com sucesso!', 'success');
            } else {
                showNotification('Erro ao criar categoria: ' + (data.message || 'Erro desconhecido'), 'error');
            }
        })
        .catch(error => {
            console.error('Erro:', error);
            showNotification('Erro ao criar categoria', 'error');
        });
    });
</script>

<!-- Modal para Nova Categoria -->
<div id="newCategoryModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900">Nova Categoria</h3>
                <button onclick="closeNewCategoryModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <form id="newCategoryForm">
                @csrf
                <div class="mb-4">
                    <label for="new_category_name" class="block text-sm font-medium text-gray-700 mb-2">
                        Nome da Categoria *
                    </label>
                    <input type="text" 
                           id="new_category_name" 
                           name="name" 
                           required
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                           placeholder="Ex: Roupas, Eletrônicos">
                </div>
                
                <div class="mb-4">
                    <label for="new_category_description" class="block text-sm font-medium text-gray-700 mb-2">
                        Descrição
                    </label>
                    <textarea id="new_category_description" 
                              name="description" 
                              rows="2"
                              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                              placeholder="Descrição opcional"></textarea>
                </div>
                
                <div class="mb-4">
                    <label for="new_category_color" class="block text-sm font-medium text-gray-700 mb-2">
                        Cor da Categoria
                    </label>
                    <div class="flex items-center space-x-2">
                        <input type="color" 
                               id="new_category_color" 
                               name="color" 
                               value="#3B82F6"
                               class="h-10 w-16 border border-gray-300 rounded cursor-pointer">
                        <input type="text" 
                               id="new_category_color_text" 
                               value="#3B82F6" 
                               readonly
                               class="px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-sm font-mono">
                    </div>
                </div>
                
                <div class="flex justify-end space-x-3">
                    <button type="button" 
                            onclick="closeNewCategoryModal()" 
                            class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400">
                        Cancelar
                    </button>
                    <button type="submit" 
                            class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
                        Criar Categoria
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endpush