@extends('layouts.app')

@section('title', 'Dashboard - Sistema PDV')
@section('page-title', 'Dashboard')
@section('page-description', 'Visão geral do sistema')

@section('content')
<div class="row">
    <!-- Cards de Estatísticas -->
    <div class="col-3">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-shopping-cart" style="color: #28a745;"></i>
                    Vendas Hoje
                </h3>
            </div>
            <div style="text-align: center; padding: 20px 0;">
                <div style="font-size: 2rem; font-weight: bold; color: #28a745;" id="sales-today-count">0</div>
                <div style="color: #666;">transações</div>
            </div>
        </div>
    </div>
    
    <div class="col-3">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-dollar-sign" style="color: #17a2b8;"></i>
                    Faturamento Hoje
                </h3>
            </div>
            <div style="text-align: center; padding: 20px 0;">
                <div style="font-size: 2rem; font-weight: bold; color: #17a2b8;" id="sales-today-total">R$ 0,00</div>
                <div style="color: #666;">total</div>
            </div>
        </div>
    </div>
    
    <div class="col-3">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-boxes" style="color: #ffc107;"></i>
                    Produtos Cadastrados
                </h3>
            </div>
            <div style="text-align: center; padding: 20px 0;">
                <div style="font-size: 2rem; font-weight: bold; color: #ffc107;" id="products-count">0</div>
                <div style="color: #666;">produtos</div>
            </div>
        </div>
    </div>
    
    <div class="col-3">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-exclamation-triangle" style="color: #dc3545;"></i>
                    Estoque Baixo
                </h3>
            </div>
            <div style="text-align: center; padding: 20px 0;">
                <div style="font-size: 2rem; font-weight: bold; color: #dc3545;" id="low-stock-count">0</div>
                <div style="color: #666;">produtos</div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Produtos com Estoque Baixo -->
    <div class="col-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-exclamation-triangle"></i>
                    Produtos com Estoque Baixo
                </h3>
            </div>
            <div id="low-stock-products">
                <p class="text-center" style="color: #666; padding: 20px;">Carregando...</p>
            </div>
        </div>
    </div>
    
    <!-- Últimas Vendas -->
    <div class="col-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-clock"></i>
                    Últimas Vendas
                </h3>
            </div>
            <div id="recent-sales">
                <p class="text-center" style="color: #666; padding: 20px;">Carregando...</p>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    window.pageInit = async function() {
        try {
            // Carregar dados do dashboard
            await loadDashboardData();
        } catch (error) {
            console.error('Erro ao carregar dashboard:', error);
            utils.showAlert('Erro ao carregar dados do dashboard', 'danger');
        }
    };
    
    async function loadDashboardData() {
        try {
            // Carregar produtos
            const productsData = await products.getAll();
            document.getElementById('products-count').textContent = productsData.length;
            
            // Produtos com estoque baixo (menos de 10 unidades)
            const lowStockProducts = productsData.filter(product => product.stock < 10);
            document.getElementById('low-stock-count').textContent = lowStockProducts.length;
            
            // Renderizar produtos com estoque baixo
            const lowStockContainer = document.getElementById('low-stock-products');
            if (lowStockProducts.length === 0) {
                lowStockContainer.innerHTML = '<p class="text-center" style="color: #28a745; padding: 20px;"><i class="fas fa-check-circle"></i> Todos os produtos com estoque adequado!</p>';
            } else {
                lowStockContainer.innerHTML = lowStockProducts.map(product => `
                    <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #eee;">
                        <div>
                            <strong>${product.name}</strong>
                            <div style="color: #666; font-size: 0.9rem;">${product.type}</div>
                        </div>
                        <div style="text-align: right;">
                            <div style="color: #dc3545; font-weight: bold;">${product.stock} unidades</div>
                            <div style="color: #666; font-size: 0.9rem;">${utils.formatCurrency(product.price)}</div>
                        </div>
                    </div>
                `).join('');
            }
            
            // Carregar vendas de hoje
            try {
                const salesToday = await sales.getToday();
                document.getElementById('sales-today-count').textContent = salesToday.length;
                
                const totalToday = salesToday.reduce((sum, sale) => sum + parseFloat(sale.total), 0);
                document.getElementById('sales-today-total').textContent = utils.formatCurrency(totalToday);
                
                // Renderizar últimas vendas
                const recentSalesContainer = document.getElementById('recent-sales');
                if (salesToday.length === 0) {
                    recentSalesContainer.innerHTML = '<p class="text-center" style="color: #666; padding: 20px;">Nenhuma venda hoje</p>';
                } else {
                    const recentSales = salesToday.slice(-5).reverse(); // Últimas 5 vendas
                    recentSalesContainer.innerHTML = recentSales.map(sale => `
                        <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #eee;">
                            <div>
                                <strong>Venda #${sale.id}</strong>
                                <div style="color: #666; font-size: 0.9rem;">${utils.formatDate(sale.created_at)}</div>
                            </div>
                            <div style="text-align: right;">
                                <div style="color: #28a745; font-weight: bold;">${utils.formatCurrency(sale.total)}</div>
                                <div style="color: #666; font-size: 0.9rem;">${sale.type}</div>
                            </div>
                        </div>
                    `).join('');
                }
            } catch (error) {
                console.error('Erro ao carregar vendas:', error);
                document.getElementById('sales-today-count').textContent = '-';
                document.getElementById('sales-today-total').textContent = '-';
                document.getElementById('recent-sales').innerHTML = '<p class="text-center" style="color: #dc3545; padding: 20px;">Erro ao carregar vendas</p>';
            }
            
        } catch (error) {
            console.error('Erro ao carregar dados:', error);
            throw error;
        }
    }
</script>
@endpush