@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;
    }
    
    .product-image {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
    }
    
    .product-image-placeholder {
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 16px;
    }
    
    .table-hover tbody tr:hover {
        background-color: #f8fafc;
    }
    
    .search-container {
        background: white;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }
    
    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
    
    .btn-outline-primary {
        color: #0d6efd;
        border-color: #0d6efd;
        background-color: transparent;
    }
    
    .btn-outline-primary:hover {
        color: #fff;
        background-color: #0d6efd;
        border-color: #0d6efd;
    }
    
    .btn-outline-warning {
        color: #ffc107;
        border-color: #ffc107;
        background-color: transparent;
    }
    
    .btn-outline-warning:hover {
        color: #000;
        background-color: #ffc107;
        border-color: #ffc107;
    }
    
    .btn-outline-danger {
        color: #dc3545;
        border-color: #dc3545;
        background-color: transparent;
    }
    
    .btn-outline-danger:hover {
        color: #fff;
        background-color: #dc3545;
        border-color: #dc3545;
    }
    
    /* Correção para botões da fila de impressão */
    #process-queue-btn {
        background-color: #16a34a !important;
        color: white !important;
        border: none !important;
    }
    
    #process-queue-btn:hover:not(:disabled) {
        background-color: #15803d !important;
        color: white !important;
    }
    
    #process-queue-btn:disabled {
        background-color: #9ca3af !important;
        color: white !important;
        cursor: not-allowed !important;
    }
    
    .queue-actions button {
        background-color: #dc2626 !important;
        color: white !important;
        border: none !important;
    }
    
    .queue-actions button:hover {
        background-color: #b91c1c !important;
        color: white !important;
    }
    
    /* Correção específica para botão de limpar */
    .queue-actions button:not(#process-queue-btn) {
        background-color: #dc2626 !important;
        color: white !important;
    }
    
    .queue-actions button:not(#process-queue-btn):hover {
        background-color: #b91c1c !important;
        color: white !important;
    }
    
    /* Correção para botões do header */
    .bg-blue-600 {
        background-color: #2563eb !important;
        color: white !important;
    }
    
    .bg-blue-600:hover {
        background-color: #1d4ed8 !important;
        color: white !important;
    }
    
    .bg-green-600 {
        background-color: #16a34a !important;
        color: white !important;
    }
    
    .bg-green-600:hover {
        background-color: #15803d !important;
        color: white !important;
    }
</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">
                {{ __('Produtos') }}
            </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('products.create') }}" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg font-medium">
                    <i class="fas fa-plus mr-2"></i>
                    Novo Produto
                </a>
            </div>
        </div>
    </x-slot>

    <div class="py-6">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            @if (session('success'))
                <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-6">
                    <i class="fas fa-check-circle mr-2"></i>
                    {{ session('success') }}
                </div>
            @endif

            <!-- Barra de Pesquisa e Filtros -->
            <div class="search-container">
                <div class="row align-items-center">
                    <div class="col-md-4">
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="fas fa-search"></i>
                            </span>
                            <input type="text" 
                                   id="search-input" 
                                   class="form-control" 
                                   placeholder="Buscar por nome, SKU ou categoria..."
                                   onkeyup="filterProducts()">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <select id="category-filter" class="form-select" onchange="filterProducts()">
                            <option value="">Todas as categorias</option>
                            @foreach($products->pluck('category')->unique()->filter() as $category)
                                <option value="{{ $category }}">{{ $category }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select id="stock-filter" class="form-select" onchange="filterProducts()">
                            <option value="">Todos os produtos</option>
                            <option value="low">Estoque baixo</option>
                            <option value="normal">Estoque normal</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button onclick="exportToExcel()" class="btn btn-success w-100">
                            <i class="fas fa-file-excel mr-1"></i>Excel
                        </button>
                    </div>
                </div>
            </div>

            <!-- Tabela de Produtos -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                <div class="table-responsive">
                    <table class="table table-hover mb-0" id="products-table">
                        <thead class="table-light">
                            <tr>
                                <th width="50">
                                    <input type="checkbox" id="select-all" onchange="toggleSelectAll()">
                                </th>
                                <th width="80">Foto</th>
                                <th>Nome</th>
                                <th>SKU/EAN</th>
                                <th>Categoria</th>
                                <th>Preço</th>
                                <th>Estoque</th>
                                <th width="200">Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($products as $product)
                                <tr data-product-id="{{ $product->id }}" 
                                    data-name="{{ strtolower($product->name) }}"
                                    data-sku="{{ strtolower($product->sku ?? '') }}"
                                    data-category="{{ strtolower($product->category ?? '') }}"
                                    data-stock="{{ $product->current_stock }}"
                                    data-stock-min="{{ $product->stock_min }}">
                                    
                                    <!-- Checkbox -->
                                    <td>
                                        <input type="checkbox" 
                                               class="product-checkbox" 
                                               value="{{ $product->id }}"
                                               onchange="updateSelectAll()">
                                    </td>
                                    
                                    <!-- Foto -->
                                    <td>
                                        @if($product->image)
                                            <img src="{{ Storage::url($product->image) }}" 
                                                 alt="{{ $product->name }}" 
                                                 class="product-image">
                                        @else
                                            <div class="product-image-placeholder">
                                                <i class="fas fa-box"></i>
                                            </div>
                                        @endif
                                    </td>
                                    
                                    <!-- Nome -->
                                    <td>
                                        <div class="fw-bold text-dark">{{ $product->name }}</div>
                                        @if($product->description)
                                            <small class="text-muted">{{ Str::limit($product->description, 50) }}</small>
                                        @endif
                                    </td>
                                    
                                    <!-- SKU/EAN -->
                                    <td>
                                        @if($product->sku)
                                            <span class="badge bg-primary">{{ $product->sku }}</span>
                                        @endif
                                        @if($product->ean)
                                            <br><small class="text-muted">{{ $product->ean }}</small>
                                        @endif
                                    </td>
                                    
                                    <!-- Categoria -->
                                    <td>
                                        @if($product->category)
                                            <span class="badge bg-secondary">{{ $product->category }}</span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    
                                    <!-- Preço -->
                                    <td>
                                        <div class="fw-bold text-success">R$ {{ number_format($product->price, 2, ',', '.') }}</div>
                                        @if($product->cost)
                                            <small class="text-muted">Custo: R$ {{ number_format($product->cost, 2, ',', '.') }}</small>
                                        @endif
                                    </td>
                                    
                                    <!-- Estoque -->
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <span class="badge {{ $product->current_stock <= $product->stock_min ? 'bg-danger' : 'bg-success' }}">
                                                {{ $product->current_stock }} un
                                            </span>
                                            @if($product->current_stock <= $product->stock_min)
                                                <i class="fas fa-exclamation-triangle text-warning ms-2" title="Estoque baixo"></i>
                                            @endif
                                        </div>
                                        <small class="text-muted">Mín: {{ $product->stock_min }}</small>
                                        @if($product->available_stock != $product->current_stock)
                                            <br><small class="text-info">Disp: {{ $product->available_stock }} un</small>
                                        @endif
                                    </td>
                                    
                                    <!-- Ações -->
                                    <td>
                                        <div class="btn-group" role="group">
                                            <button onclick="addToQueue({{ $product->id }}, '{{ addslashes($product->name) }}', {{ $product->price }})" 
                                                    class="btn btn-sm btn-outline-primary" 
                                                    title="Adicionar à fila">
                                                <i class="fas fa-plus"></i>
                                            </button>
                                            <a href="{{ route('products.edit', $product) }}" 
                                               class="btn btn-sm btn-outline-warning" 
                                               title="Editar">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <button onclick="deleteProduct({{ $product->id }}, '{{ $product->name }}')" 
                                                    class="btn btn-sm btn-outline-danger" 
                                                    title="Deletar">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center py-5">
                                        <i class="fas fa-box text-muted" style="font-size: 3rem;"></i>
                                        <h5 class="text-muted mt-3">Nenhum produto encontrado</h5>
                                        <p class="text-muted">Comece adicionando seu primeiro produto</p>
                                        <a href="{{ route('products.create') }}" class="btn btn-primary">
                                            <i class="fas fa-plus mr-2"></i>Adicionar Produto
                                        </a>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Paginação -->
            @if($products->hasPages())
                <div class="mt-4">
                    {{ $products->links() }}
                </div>
            @endif
        </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>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>
    console.log('Script carregado!');
    
    // Variáveis globais
    let printQueue = [];

    // Função para remover acentos
    function removeAccents(str) {
        const accents = {
            'á': 'a', 'à': 'a', 'ã': 'a', 'â': 'a', 'ä': 'a',
            'é': 'e', 'è': 'e', 'ê': 'e', 'ë': 'e',
            'í': 'i', 'ì': 'i', 'î': 'i', 'ï': 'i',
            'ó': 'o', 'ò': 'o', 'õ': 'o', 'ô': 'o', 'ö': 'o',
            'ú': 'u', 'ù': 'u', 'û': 'u', 'ü': 'u',
            'ç': 'c', 'ñ': 'n',
            'Á': 'A', 'À': 'A', 'Ã': 'A', 'Â': 'A', 'Ä': 'A',
            'É': 'E', 'È': 'E', 'Ê': 'E', 'Ë': 'E',
            'Í': 'I', 'Ì': 'I', 'Î': 'I', 'Ï': 'I',
            'Ó': 'O', 'Ò': 'O', 'Õ': 'O', 'Ô': 'O', 'Ö': 'O',
            'Ú': 'U', 'Ù': 'U', 'Û': 'U', 'Ü': 'U',
            'Ç': 'C', 'Ñ': 'N'
        };
        
        return str.replace(/[áàãâäéèêëíìîïóòõôöúùûüçñÁÀÃÂÄÉÈÊËÍÌÎÏÓÒÕÔÖÚÙÛÜÇÑ]/g, function(match) {
            return accents[match] || match;
        });
    }

    // FUNÇÕES GLOBAIS - DEFINIDAS FORA DE QUALQUER ESCOPO
    function addToQueue(productId, productName, productPrice) {
        console.log('Função addToQueue chamada!', { productId, productName, productPrice });
        
        // Envia requisição para o servidor para adicionar à fila persistente
        fetch(`/labels/product/${productId}/add-to-queue`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ quantity: 1 })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification(data.message, 'success');
                updateQueueDisplay();
            } else {
                throw new Error(data.message || 'Erro ao adicionar à fila');
            }
        })
        .catch(error => {
            console.error('Erro:', error);
            showNotification('Erro ao adicionar à fila: ' + error.message, 'error');
        });
    }

    function togglePrintQueue() {
        const queue = document.getElementById('print-queue-floating');
        queue.classList.toggle('hidden');
        updateQueueDisplay();
    }

    function removeFromQueue(index) {
        printQueue.splice(index, 1);
        updateQueueDisplay();
    }

    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');
        });
    }

    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;
        });
    }

    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');
        });
    }

    // Filtros e pesquisa
    function filterProducts() {
        const searchTerm = document.getElementById('search-input').value.toLowerCase();
        const categoryFilter = document.getElementById('category-filter').value.toLowerCase();
        const stockFilter = document.getElementById('stock-filter').value;
        const rows = document.querySelectorAll('#products-table tbody tr[data-product-id]');
        
        rows.forEach(row => {
            const name = row.dataset.name;
            const sku = row.dataset.sku;
            const category = row.dataset.category;
            const stock = parseInt(row.dataset.stock);
            const stockMin = parseInt(row.dataset.stockMin);
            
            let show = true;
            
            // Filtro de texto
            if (searchTerm && !name.includes(searchTerm) && !sku.includes(searchTerm)) {
                show = false;
            }
            
            // Filtro de categoria
            if (categoryFilter && category !== categoryFilter) {
                show = false;
            }
            
            // Filtro de estoque
            if (stockFilter === 'low' && stock > stockMin) {
                show = false;
            } else if (stockFilter === 'normal' && stock <= stockMin) {
                show = false;
            }
            
            row.style.display = show ? '' : 'none';
        });
    }

    // Exportar para Excel
    function exportToExcel() {
        const table = document.getElementById('products-table');
        const rows = Array.from(table.querySelectorAll('tr')).filter(row => row.style.display !== 'none');
        
        const data = rows.map(row => {
            const cells = Array.from(row.querySelectorAll('td, th'));
            return cells.map(cell => cell.textContent.trim());
        });
        
        const ws = XLSX.utils.aoa_to_sheet(data);
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, 'Produtos');
        
        XLSX.writeFile(wb, 'produtos.xlsx');
    }

    // Seleção de produtos
    function toggleSelectAll() {
        const selectAll = document.getElementById('select-all');
        const checkboxes = document.querySelectorAll('.product-checkbox');
        
        checkboxes.forEach(checkbox => {
            checkbox.checked = selectAll.checked;
        });
    }

    function updateSelectAll() {
        const checkboxes = document.querySelectorAll('.product-checkbox');
        const checkedBoxes = document.querySelectorAll('.product-checkbox:checked');
        const selectAll = document.getElementById('select-all');
        
        selectAll.checked = checkboxes.length === checkedBoxes.length;
        selectAll.indeterminate = checkedBoxes.length > 0 && checkedBoxes.length < checkboxes.length;
    }


    // Deletar produto
    function deleteProduct(productId, productName) {
        if (confirm(`Tem certeza que deseja desativar o produto "${productName}"?`)) {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `/products/${productId}`;
            
            const csrfToken = document.createElement('input');
            csrfToken.type = 'hidden';
            csrfToken.name = '_token';
            csrfToken.value = document.querySelector('meta[name="csrf-token"]').content;
            
            const methodField = document.createElement('input');
            methodField.type = 'hidden';
            methodField.name = '_method';
            methodField.value = 'DELETE';
            
            form.appendChild(csrfToken);
            form.appendChild(methodField);
            document.body.appendChild(form);
            form.submit();
        }
    }


    // Atualizar display da fila
    function updateQueueDisplay() {
        console.log('Atualizando display da fila...');
        
        // 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;
            })
            .catch(error => {
                console.error('Erro ao atualizar fila:', error);
            });
    }


    // Atualizar header da fila
    function updateQueueHeader() {
        document.getElementById('queue-count-header').textContent = printQueue.length;
    }


    // 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() {
        console.log('Página carregada, inicializando fila de impressão');
        console.log('addToQueue disponível?', typeof addToQueue);
        console.log('window.addToQueue disponível?', typeof window.addToQueue);
        
        updateQueueDisplay();
        
        // Teste simples
        console.log('Testando função addToQueue...');
        window.testAddToQueue = function() {
            console.log('Chamando addToQueue...');
            addToQueue(999, 'Produto Teste', 10.50);
        };
    });
</script>