@extends('layouts.app')

@section('title', 'PDV - Sistema PDV')
@section('page-title', 'Ponto de Venda (PDV)')
@section('page-description', 'Sistema de vendas e encomendas')

@section('content')
<div class="pdv-container">
    <!-- Produtos Disponíveis -->
    <div class="products-grid" id="products-grid">
        <p class="text-center" style="color: #666; grid-column: 1 / -1;">Carregando produtos...</p>
    </div>
    
    <!-- Painel do Carrinho -->
    <div class="cart-panel">
        <div class="cart-header">
            <h3><i class="fas fa-shopping-cart"></i> Carrinho</h3>
        </div>
        
        <div class="cart-items" id="cart-items">
            <p class="text-center" style="color: #666;">Carrinho vazio</p>
        </div>
        
        <div class="cart-total">
            <div class="total-amount">
                Total: <span id="cart-total">R$ 0,00</span>
            </div>
        </div>
        
        <div class="form-group">
            <label for="sale-type" class="form-label">Tipo de Operação</label>
            <select id="sale-type" class="form-control form-select">
                <option value="venda">Venda</option>
                <option value="encomenda">Encomenda</option>
            </select>
        </div>
        
        <div style="display: flex; gap: 10px;">
            <button id="finalize-sale-btn" class="btn btn-success" style="flex: 1;" disabled>
                <i class="fas fa-check"></i> Finalizar Venda
            </button>
            <button id="clear-cart-btn" class="btn btn-danger">
                <i class="fas fa-trash"></i>
            </button>
        </div>
        
        <button id="print-receipt-btn" class="btn btn-primary" style="width: 100%; margin-top: 10px;" disabled>
            <i class="fas fa-print"></i> Imprimir Recibo
        </button>
    </div>
</div>

<!-- Modal de Confirmação de Venda -->
<div id="sale-confirmation-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title">Venda Realizada com Sucesso!</h3>
            <button class="modal-close">&times;</button>
        </div>
        <div style="text-align: center; padding: 20px;">
            <i class="fas fa-check-circle" style="font-size: 4rem; color: #28a745; margin-bottom: 20px;"></i>
            <p style="font-size: 1.2rem; margin-bottom: 10px;">Venda #<span id="sale-id"></span></p>
            <p style="font-size: 1.5rem; font-weight: bold; color: #28a745;">Total: <span id="sale-total"></span></p>
            <p style="color: #666; margin-top: 20px;">O recibo foi gerado e pode ser impresso.</p>
        </div>
        <div style="display: flex; gap: 10px; justify-content: center;">
            <button class="btn btn-primary" onclick="printLastReceipt()">
                <i class="fas fa-print"></i> Imprimir Recibo
            </button>
            <button class="btn btn-success" onclick="modal.hide('sale-confirmation-modal')">
                <i class="fas fa-check"></i> OK
            </button>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    let lastSale = null;
    
    window.pageInit = async function() {
        try {
            await loadProducts();
            setupEventListeners();
            cart.render();
        } catch (error) {
            console.error('Erro ao inicializar PDV:', error);
            utils.showAlert('Erro ao carregar produtos', 'danger');
        }
    };
    
    async function loadProducts() {
        try {
            const productsData = await products.getAvailable();
            const productsGrid = document.getElementById('products-grid');
            
            if (productsData.length === 0) {
                productsGrid.innerHTML = '<p class="text-center" style="color: #666; grid-column: 1 / -1;">Nenhum produto disponível</p>';
                return;
            }
            
            productsGrid.innerHTML = productsData.map(product => `
                <div class="product-card ${product.stock <= 0 ? 'out-of-stock' : ''}" 
                     onclick="${product.stock > 0 ? `addToCart(${JSON.stringify(product).replace(/"/g, '&quot;')})` : ''}">
                    <div class="product-name">${product.name}</div>
                    <div class="product-price">${utils.formatCurrency(product.price)}</div>
                    <div class="product-stock">
                        ${product.stock > 0 ? `${product.stock} disponível` : 'Sem estoque'}
                    </div>
                    <div style="margin-top: 10px; font-size: 0.8rem; color: #666;">
                        ${product.type}
                    </div>
                </div>
            `).join('');
            
        } catch (error) {
            console.error('Erro ao carregar produtos:', error);
            throw error;
        }
    }
    
    function addToCart(product) {
        if (product.stock <= 0) {
            utils.showAlert('Produto sem estoque', 'danger');
            return;
        }
        
        // Verificar se já tem no carrinho e se não excede o estoque
        const existingItem = cart.items.find(item => item.product.id === product.id);
        const currentQuantity = existingItem ? existingItem.quantity : 0;
        
        if (currentQuantity >= product.stock) {
            utils.showAlert('Quantidade no carrinho já atingiu o estoque disponível', 'danger');
            return;
        }
        
        cart.add(product);
        utils.showAlert(`${product.name} adicionado ao carrinho`, 'success');
    }
    
    function setupEventListeners() {
        // Finalizar venda
        document.getElementById('finalize-sale-btn').addEventListener('click', async function() {
            if (cart.items.length === 0) {
                utils.showAlert('Carrinho vazio', 'danger');
                return;
            }
            
            const saleType = document.getElementById('sale-type').value;
            const hideLoading = utils.showLoading(this);
            
            try {
                const saleData = {
                    type: saleType,
                    total: cart.getTotal(),
                    items: cart.items.map(item => ({
                        product_id: item.product.id,
                        quantity: item.quantity,
                        unit_price: item.unit_price,
                        subtotal: item.subtotal
                    }))
                };
                
                const response = await sales.create(saleData);
                lastSale = response.sale;
                
                // Mostrar modal de confirmação
                document.getElementById('sale-id').textContent = lastSale.id;
                document.getElementById('sale-total').textContent = utils.formatCurrency(lastSale.total);
                modal.show('sale-confirmation-modal');
                
                // Limpar carrinho
                cart.clear();
                
                // Recarregar produtos para atualizar estoque
                await loadProducts();
                
                // Habilitar botão de impressão
                document.getElementById('print-receipt-btn').disabled = false;
                
            } catch (error) {
                console.error('Erro ao finalizar venda:', error);
                utils.showAlert(error.message || 'Erro ao finalizar venda', 'danger');
            } finally {
                hideLoading();
            }
        });
        
        // Limpar carrinho
        document.getElementById('clear-cart-btn').addEventListener('click', function() {
            if (cart.items.length === 0) return;
            
            if (confirm('Deseja limpar o carrinho?')) {
                cart.clear();
                utils.showAlert('Carrinho limpo', 'info');
            }
        });
        
        // Imprimir recibo
        document.getElementById('print-receipt-btn').addEventListener('click', function() {
            printLastReceipt();
        });
    }
    
    function printLastReceipt() {
        if (!lastSale) {
            utils.showAlert('Nenhuma venda para imprimir', 'danger');
            return;
        }
        
        // Criar janela de impressão
        const printWindow = window.open('', '_blank');
        const receiptHtml = generateReceiptHtml(lastSale);
        
        printWindow.document.write(receiptHtml);
        printWindow.document.close();
        printWindow.focus();
        printWindow.print();
        printWindow.close();
    }
    
    function generateReceiptHtml(sale) {
        const now = new Date();
        const items = cart.items.length > 0 ? cart.items : [];
        
        return `
            <!DOCTYPE html>
            <html>
            <head>
                <title>Recibo - Venda #${sale.id}</title>
                <style>
                    body { font-family: monospace; font-size: 12px; margin: 20px; }
                    .header { text-align: center; margin-bottom: 20px; }
                    .item { display: flex; justify-content: space-between; margin: 5px 0; }
                    .total { border-top: 1px solid #000; margin-top: 10px; padding-top: 10px; font-weight: bold; }
                    .footer { text-align: center; margin-top: 20px; font-size: 10px; }
                </style>
            </head>
            <body>
                <div class="header">
                    <h2>SISTEMA PDV</h2>
                    <p>Recibo de ${sale.type}</p>
                    <p>Venda #${sale.id}</p>
                    <p>${utils.formatDate(now)}</p>
                </div>
                
                <div class="items">
                    ${items.map(item => `
                        <div class="item">
                            <span>${item.product.name}</span>
                            <span>${item.quantity}x ${utils.formatCurrency(item.unit_price)} = ${utils.formatCurrency(item.subtotal)}</span>
                        </div>
                    `).join('')}
                </div>
                
                <div class="total">
                    <div class="item">
                        <span>TOTAL:</span>
                        <span>${utils.formatCurrency(sale.total)}</span>
                    </div>
                </div>
                
                <div class="footer">
                    <p>Obrigado pela preferência!</p>
                    <p>Sistema PDV - ${now.toLocaleString('pt-BR')}</p>
                </div>
            </body>
            </html>
        `;
    }
</script>
@endpush