@extends('layouts.app')

@section('titulo', 'Dashboard')
@section('subtitulo', 'Visão geral da operação')

@section('conteudo')
<div class="row g-3 mb-4">
    <div class="col-6 col-lg-3">
        <div class="kpi-card">
            <div class="kpi-label">Vendas no mês</div>
            <div class="kpi-value">R$ {{ number_format($vendasMes, 2, ',', '.') }}</div>
            <div class="kpi-delta text-muted-sm">{{ $pedidosMes }} pedido(s)</div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="kpi-card">
            <div class="kpi-label">A Receber (pendente)</div>
            <div class="kpi-value">R$ {{ number_format($aReceber, 2, ',', '.') }}</div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="kpi-card">
            <div class="kpi-label">A Pagar (pendente)</div>
            <div class="kpi-value">R$ {{ number_format($aPagar, 2, ',', '.') }}</div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="kpi-card">
            <div class="kpi-label">Estoque Crítico</div>
            <div class="kpi-value">{{ $estoqueCritico }}</div>
            <div class="kpi-delta {{ $estoqueCritico > 0 ? 'down' : 'up' }} text-muted-sm">
                {{ $estoqueCritico > 0 ? 'produto(s) abaixo do mínimo' : 'tudo OK' }}
            </div>
        </div>
    </div>
</div>

@if ($minhasComissoes)
<div class="row g-3 mb-4">
    <div class="col-6 col-lg-3">
        <div class="kpi-card">
            <div class="kpi-label">Minha Comissão (pendente)</div>
            <div class="kpi-value">R$ {{ number_format($minhasComissoes['pendente'], 2, ',', '.') }}</div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="kpi-card">
            <div class="kpi-label">Minha Comissão (paga)</div>
            <div class="kpi-value">R$ {{ number_format($minhasComissoes['paga'], 2, ',', '.') }}</div>
        </div>
    </div>
</div>
@endif

<div class="row g-3">
    <div class="col-lg-7">
        <div class="card">
            <div class="card-header">Vendas — últimos 14 dias</div>
            <div class="card-body">
                <canvas id="chartVendas" height="110"></canvas>
            </div>
        </div>
    </div>

    <div class="col-lg-5">
        <div class="card h-100">
            <div class="card-header">Pedidos recentes</div>
            <div class="card-body p-0">
                @if ($pedidosRecentes->isEmpty())
                    <div class="empty-state">
                        <p class="mb-0">Nenhum pedido cadastrado ainda.</p>
                    </div>
                @else
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>Pedido</th>
                                    <th>Cliente</th>
                                    <th>Status</th>
                                    <th class="text-end">Valor</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($pedidosRecentes as $pedido)
                                    <tr>
                                        <td>
                                            <a href="{{ route('pedidos.show', $pedido) }}">{{ $pedido->numero }}</a>
                                        </td>
                                        <td>{{ $pedido->cliente->nome_fantasia ?: $pedido->cliente->razao_social }}</td>
                                        <td><span class="badge-status {{ $pedido->status }}">{{ $pedido->status }}</span></td>
                                        <td class="text-end text-money">R$ {{ number_format($pedido->valor_liquido, 2, ',', '.') }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
<script>
    const ctx = document.getElementById('chartVendas');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: @json($serieDias),
            datasets: [{
                label: 'Vendas (R$)',
                data: @json($serieValores),
                borderColor: '#1f6e4f',
                backgroundColor: 'rgba(31,110,79,0.08)',
                tension: 0.35,
                fill: true,
                pointRadius: 2,
            }]
        },
        options: {
            plugins: { legend: { display: false } },
            scales: {
                y: { beginAtZero: true, ticks: { callback: (v) => 'R$ ' + v } }
            }
        }
    });
</script>
@endpush