@extends('layouts.app')

@section('content')
    <main class="main-content">
        <div class="page-header">
            <h1 class="page-title">Dashboard de Relatórios</h1>
            <p class="page-subtitle">Indicadores e rankings do período atual</p>
        </div>

        <div class="users-card">
            <div class="users-header">
                <h3 class="users-title">Resumo</h3>
                <div class="users-actions">
                    <a href="{{ route('relatorios.index') }}" class="btn-secondary">
                        <i class="fas fa-arrow-left"></i>
                        Voltar
                    </a>
                </div>
            </div>

            <div class="row">
                <div class="col-md-3">
                    <div class="card bg-primary text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-white-50 mb-1">Vendas do Mês</h6>
                                    <h3 class="mb-0">R$ {{ number_format($vendasMes, 2, ',', '.') }}</h3>
                                </div>
                                <div>
                                    <i class="fas fa-dollar-sign fa-3x opacity-50"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card bg-success text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-white-50 mb-1">Pedidos do Mês</h6>
                                    <h3 class="mb-0">{{ $pedidosMes }}</h3>
                                </div>
                                <div>
                                    <i class="fas fa-shopping-cart fa-3x opacity-50"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card bg-info text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-white-50 mb-1">Orçamentos</h6>
                                    <h3 class="mb-0">{{ $orcamentosMes }}</h3>
                                </div>
                                <div>
                                    <i class="fas fa-file-invoice fa-3x opacity-50"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card bg-warning text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-white-50 mb-1">Taxa Conversão</h6>
                                    <h3 class="mb-0">{{ $taxaConversao }}%</h3>
                                </div>
                                <div>
                                    <i class="fas fa-percentage fa-3x opacity-50"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-3">
            <div class="col-md-4">
                <div class="users-card">
                    <div class="users-header">
                        <h3 class="users-title">Top Vendedores</h3>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Vendedor</th>
                                    <th>Pedidos</th>
                                    <th>Vendas</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($topVendedores as $index => $vendedor)
                                    <tr>
                                        <td>
                                            <span class="badge bg-{{ $index === 0 ? 'warning' : ($index === 1 ? 'secondary' : ($index === 2 ? 'danger' : 'info')) }}">
                                                #{{ $index + 1 }}
                                            </span>
                                            {{ $vendedor->usuario->name ?? 'N/A' }}
                                        </td>
                                        <td>{{ $vendedor->total_pedidos }}</td>
                                        <td class="text-success">
                                            <strong>R$ {{ number_format($vendedor->total_vendas, 2, ',', '.') }}</strong>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="3" class="text-center text-muted">
                                            Nenhum vendedor no período
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="users-card">
                    <div class="users-header">
                        <h3 class="users-title">Top Clientes</h3>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Cliente</th>
                                    <th>Pedidos</th>
                                    <th>Vendas</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($topClientes as $index => $cliente)
                                    <tr>
                                        <td>
                                            <span class="badge bg-{{ $index === 0 ? 'warning' : ($index === 1 ? 'secondary' : ($index === 2 ? 'danger' : 'info')) }}">
                                                #{{ $index + 1 }}
                                            </span>
                                            {{ $cliente['nome'] }}
                                        </td>
                                        <td>{{ $cliente['total_pedidos'] }}</td>
                                        <td class="text-success">
                                            <strong>R$ {{ number_format($cliente['total_vendas'], 2, ',', '.') }}</strong>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="3" class="text-center text-muted">
                                            Nenhum cliente no período
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="users-card">
                    <div class="users-header">
                        <h3 class="users-title">Top Produtos (Papel)</h3>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Produto</th>
                                    <th>Qtd</th>
                                    <th>Valor</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($topProdutos as $index => $produto)
                                    <tr>
                                        <td>
                                            <span class="badge bg-{{ $index === 0 ? 'warning' : ($index === 1 ? 'secondary' : ($index === 2 ? 'danger' : 'info')) }}">
                                                #{{ $index + 1 }}
                                            </span>
                                            {{ $produto['nome'] }}
                                        </td>
                                        <td>{{ $produto['quantidade'] }}</td>
                                        <td class="text-success">
                                            <strong>R$ {{ number_format($produto['valor_total'], 2, ',', '.') }}</strong>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="3" class="text-center text-muted">
                                            Nenhum produto no período
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="users-card">
            <div class="users-header">
                <h3 class="users-title">Indicadores de Performance</h3>
            </div>
            <div class="row">
                <div class="col-md-3 mb-3">
                    <div class="text-center">
                        <h6 class="text-muted">Ticket Médio</h6>
                        <h3 class="text-primary">
                            R$ {{ $pedidosMes > 0 ? number_format($vendasMes / $pedidosMes, 2, ',', '.') : '0,00' }}
                        </h3>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="text-center">
                        <h6 class="text-muted">Orçamentos Convertidos</h6>
                        <h3 class="text-success">{{ $orcamentosConvertidos }}</h3>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="text-center">
                        <h6 class="text-muted">Eficiência de Vendas</h6>
                        <h3 class="text-info">{{ $orcamentosMes > 0 ? round(($orcamentosConvertidos / $orcamentosMes) * 100, 1) : 0 }}%</h3>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="text-center">
                        <h6 class="text-muted">Média por Vendedor</h6>
                        <h3 class="text-warning">{{ $topVendedores->count() > 0 ? number_format($vendasMes / $topVendedores->count(), 2, ',', '.') : '0,00' }}</h3>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection