@extends('layouts.app')

@section('content')
    <main class="main-content">
        <div class="page-header">
            <h1 class="page-title">Dashboard</h1>
            <p class="page-subtitle">Visão geral do sistema - {{ now()->format('d/m/Y') }}</p>
        </div>

        {{-- Cards de Resumo --}}
        <div class="users-card mb-4">
            <div class="users-header">
                <h3 class="users-title">Resumo do Mês</h3>
                <div class="users-actions">
                    <form method="GET" action="{{ route('home') }}" class="d-flex align-items-center" style="gap: 0.5rem;">
                        <select name="mes" class="form-select form-select-sm" style="width: 130px;">
                            <option value="1" {{ $mesAtual == 1 ? 'selected' : '' }}>Janeiro</option>
                            <option value="2" {{ $mesAtual == 2 ? 'selected' : '' }}>Fevereiro</option>
                            <option value="3" {{ $mesAtual == 3 ? 'selected' : '' }}>Março</option>
                            <option value="4" {{ $mesAtual == 4 ? 'selected' : '' }}>Abril</option>
                            <option value="5" {{ $mesAtual == 5 ? 'selected' : '' }}>Maio</option>
                            <option value="6" {{ $mesAtual == 6 ? 'selected' : '' }}>Junho</option>
                            <option value="7" {{ $mesAtual == 7 ? 'selected' : '' }}>Julho</option>
                            <option value="8" {{ $mesAtual == 8 ? 'selected' : '' }}>Agosto</option>
                            <option value="9" {{ $mesAtual == 9 ? 'selected' : '' }}>Setembro</option>
                            <option value="10" {{ $mesAtual == 10 ? 'selected' : '' }}>Outubro</option>
                            <option value="11" {{ $mesAtual == 11 ? 'selected' : '' }}>Novembro</option>
                            <option value="12" {{ $mesAtual == 12 ? 'selected' : '' }}>Dezembro</option>
                        </select>
                        
                        <select name="ano" class="form-select form-select-sm" style="width: 100px;">
                            @for($ano = now()->year; $ano >= 2020; $ano--)
                                <option value="{{ $ano }}" {{ $anoAtual == $ano ? 'selected' : '' }}>{{ $ano }}</option>
                            @endfor
                        </select>
                        
                        @if(in_array($tipoUsuarioId, [1, 2]))
                        <select name="vendedor" class="form-select form-select-sm" style="width: 200px;">
                            <option value="">Todos os Vendedores</option>
                            @foreach($vendedores as $vendedor)
                                <option value="{{ $vendedor->id }}" {{ $vendedorFiltro == $vendedor->id ? 'selected' : '' }}>
                                    {{ $vendedor->name }}
                                </option>
                            @endforeach
                        </select>
                        @endif
                        
                        <button type="submit" class="btn btn-sm btn-primary">
                            <i class="fas fa-filter"></i> Filtrar
                        </button>
                        
                        @if(request()->has('mes') || request()->has('ano') || request()->has('vendedor'))
                        <a href="{{ route('home') }}" class="btn btn-sm btn-secondary">
                            <i class="fas fa-times"></i> Limpar
                        </a>
                        @endif
                    </form>
                </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 class="row mt-3">
                {{-- Pedidos do Mês --}}
                <div class="col-md-3 mb-3">
                    <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #4CAF50, #388E3C);">
                        <div class="card-body text-white">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <small class="text-white-50">Pedidos do Mês</small>
                                    <h3 class="mb-0 fw-bold">{{ $pedidosMes }}</h3>
                                    <small class="{{ $variacaoPedidos >= 0 ? 'text-white' : 'text-warning' }}">
                                        <i class="fas fa-{{ $variacaoPedidos >= 0 ? 'arrow-up' : 'arrow-down' }}"></i>
                                        {{ $variacaoPedidos >= 0 ? '+' : '' }}{{ $variacaoPedidos }}% vs mês anterior
                                    </small>
                                </div>
                                <i class="fas fa-shopping-cart fa-2x opacity-50"></i>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Receita do Mês --}}
                <div class="col-md-3 mb-3">
                    <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #2196F3, #1976D2);">
                        <div class="card-body text-white">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <small class="text-white-50">Receita do Mês</small>
                                    <h3 class="mb-0 fw-bold">R$ {{ number_format($receitaMes, 2, ',', '.') }}</h3>
                                    <small class="{{ $variacaoReceita >= 0 ? 'text-white' : 'text-warning' }}">
                                        <i class="fas fa-{{ $variacaoReceita >= 0 ? 'arrow-up' : 'arrow-down' }}"></i>
                                        {{ $variacaoReceita >= 0 ? '+' : '' }}{{ $variacaoReceita }}% vs mês anterior
                                    </small>
                                </div>
                                <i class="fas fa-dollar-sign fa-2x opacity-50"></i>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Total a Receber --}}
                <div class="col-md-3 mb-3">
                    <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #FF9800, #F57C00);">
                        <div class="card-body text-white">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <small class="text-white-50">Total a Receber</small>
                                    <h3 class="mb-0 fw-bold">R$ {{ number_format($totalReceber, 2, ',', '.') }}</h3>
                                    <small class="text-white">
                                        <i class="fas fa-clock"></i> {{ $pedidosAtivos }} pedidos pendentes
                                    </small>
                                </div>
                                <i class="fas fa-hand-holding-usd fa-2x opacity-50"></i>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Contas a Pagar - Apenas para Admin/Gerente --}}
                @if(in_array($tipoUsuarioId, [1, 2]))
                <div class="col-md-3 mb-3">
                    <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #f44336, #d32f2f);">
                        <div class="card-body text-white">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <small class="text-white-50">Contas a Pagar</small>
                                    <h3 class="mb-0 fw-bold">R$ {{ number_format($contasPagarPendentes, 2, ',', '.') }}</h3>
                                    @if($contasPagarVencidas > 0)
                                    <small class="text-warning">
                                        <i class="fas fa-exclamation-triangle"></i> R$ {{ number_format($contasPagarVencidas, 2, ',', '.') }} vencidas
                                    </small>
                                    @else
                                    <small class="text-white">
                                        <i class="fas fa-check"></i> Nenhuma vencida
                                    </small>
                                    @endif
                                </div>
                                <i class="fas fa-file-invoice-dollar fa-2x opacity-50"></i>
                            </div>
                        </div>
                    </div>
                </div>
                @endif

                {{-- Meta do Usuário - Apenas para usuários com meta --}}
                @if($metaUsuario)
                <div class="col-md-3 mb-3">
                    <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #9c27b0, #7b1fa2);">
                        <div class="card-body text-white">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <small class="text-white-50">Meta do Mês</small>
                                    <h3 class="mb-0 fw-bold">{{ number_format($percentualMeta, 1) }}%</h3>
                                    <small class="text-white">
                                        R$ {{ number_format($valorVendidoMes, 2, ',', '.') }} / R$ {{ number_format($metaUsuario->meta, 2, ',', '.') }}
                                    </small>
                                </div>
                                <i class="fas fa-bullseye fa-2x opacity-50"></i>
                            </div>
                            <div class="progress mt-3" style="height: 8px; background-color: rgba(255,255,255,0.2);">
                                <div class="progress-bar bg-white" role="progressbar" style="width: {{ min($percentualMeta, 100) }}%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>

        {{-- Segunda linha de cards --}}
        <div class="row mb-4">
            {{-- Orçamentos --}}
            <div class="col-md-3 mb-3">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <small class="text-muted">Orçamentos do Mês</small>
                                <h4 class="mb-0 fw-bold text-primary">{{ $orcamentosMes }}</h4>
                            </div>
                            <div class="bg-primary bg-opacity-10 rounded-circle p-3">
                                <i class="fas fa-file-alt text-primary"></i>
                            </div>
                        </div>
                        <hr class="my-2">
                        <small class="text-warning">
                            <i class="fas fa-clock"></i> {{ $orcamentosPendentes }} pendentes
                        </small>
                    </div>
                </div>
            </div>

            {{-- Pedidos Atrasados --}}
            <div class="col-md-3 mb-3">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <small class="text-muted">Pedidos Atrasados</small>
                                <h4 class="mb-0 fw-bold {{ $pedidosAtrasados > 0 ? 'text-danger' : 'text-success' }}">{{ $pedidosAtrasados }}</h4>
                            </div>
                            <div class="bg-{{ $pedidosAtrasados > 0 ? 'danger' : 'success' }} bg-opacity-10 rounded-circle p-3">
                                <i class="fas fa-{{ $pedidosAtrasados > 0 ? 'exclamation-triangle' : 'check-circle' }} text-{{ $pedidosAtrasados > 0 ? 'danger' : 'success' }}"></i>
                            </div>
                        </div>
                        <hr class="my-2">
                        <small class="{{ $pedidosAtrasados > 0 ? 'text-danger' : 'text-success' }}">
                            @if($pedidosAtrasados > 0)
                                <i class="fas fa-exclamation-circle"></i> Requer atenção
                            @else
                                <i class="fas fa-check"></i> Tudo em dia
                            @endif
                        </small>
                    </div>
                </div>
            </div>

            {{-- Clientes --}}
            <div class="col-md-3 mb-3">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <small class="text-muted">Total de Clientes</small>
                                <h4 class="mb-0 fw-bold text-info">{{ $totalClientes }}</h4>
                            </div>
                            <div class="bg-info bg-opacity-10 rounded-circle p-3">
                                <i class="fas fa-users text-info"></i>
                            </div>
                        </div>
                        <hr class="my-2">
                        <small class="text-success">
                            <i class="fas fa-user-plus"></i> +{{ $clientesNovosMes }} este mês
                        </small>
                    </div>
                </div>
            </div>

            {{-- Contas a Receber (outras) - Apenas para Admin/Gerente --}}
            @if(in_array($tipoUsuarioId, [1, 2]))
            <div class="col-md-3 mb-3">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <small class="text-muted">Outras Contas a Receber</small>
                                <h4 class="mb-0 fw-bold text-success">R$ {{ number_format($contasReceberPendentes, 2, ',', '.') }}</h4>
                            </div>
                            <div class="bg-success bg-opacity-10 rounded-circle p-3">
                                <i class="fas fa-coins text-success"></i>
                            </div>
                        </div>
                        <hr class="my-2">
                        <small class="text-muted">
                            <i class="fas fa-info-circle"></i> Parcelas pendentes (2026+)
                        </small>
                    </div>
                </div>
            </div>
            @endif
        </div>

        {{-- Seção de Gráficos --}}
        <div class="row mb-4">
            {{-- Gráfico de Pedidos por Mês --}}
            <div class="col-md-6 mb-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0">
                        <h5 class="mb-0"><i class="fas fa-chart-bar text-primary"></i> Pedidos por Mês</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="chartPedidosMes" height="200"></canvas>
                    </div>
                </div>
            </div>

            {{-- Gráfico de Receita por Mês --}}
            <div class="col-md-6 mb-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0">
                        <h5 class="mb-0"><i class="fas fa-chart-line text-success"></i> Receita por Mês</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="chartReceitaMes" height="200"></canvas>
                    </div>
                </div>
            </div>
        </div>

        {{-- Seção de Listas --}}
        <div class="row">
            {{-- Últimos Pedidos --}}
            <div class="col-md-6 mb-4">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-0 d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><i class="fas fa-shopping-bag text-primary"></i> Últimos Pedidos</h5>
                        <a href="{{ route('pedidos.index') }}" class="btn btn-sm btn-outline-primary">Ver todos</a>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>Pedido</th>
                                        <th>Cliente</th>
                                        <th>Valor</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($ultimosPedidos as $pedido)
                                    <tr>
                                        <td>
                                            <a href="{{ route('pedidos.show', $pedido) }}" class="fw-bold">#{{ $pedido->id }}</a>
                                            <br><small class="text-muted">{{ $pedido->data_pedido->format('d/m/Y') }}</small>
                                        </td>
                                        <td>{{ Str::limit($pedido->cliente->nome ?? 'N/A', 20) }}</td>
                                        <td>R$ {{ number_format($pedido->valor_total_pedido, 2, ',', '.') }}</td>
                                        <td>
                                            @if($pedido->financeiro && $pedido->financeiro->finalizado)
                                                <span class="badge bg-success">Finalizado</span>
                                            @elseif($pedido->financeiro && $pedido->financeiro->confirmar_entrada)
                                                <span class="badge bg-info">Em andamento</span>
                                            @else
                                                <span class="badge bg-warning text-dark">Pendente</span>
                                            @endif
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="4" class="text-center text-muted py-3">Nenhum pedido encontrado</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Últimos Pagamentos --}}
            <div class="col-md-6 mb-4">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-0 d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><i class="fas fa-money-bill-wave text-success"></i> Últimos Pagamentos</h5>
                        <a href="{{ route('financeiro.index') }}" class="btn btn-sm btn-outline-success">Ver todos</a>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>Data</th>
                                        <th>Pedido</th>
                                        <th>Cliente</th>
                                        <th>Valor</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($ultimosPagamentos as $pagamento)
                                    <tr>
                                        <td>{{ $pagamento->data_haver->format('d/m/Y') }}</td>
                                        <td>
                                            <a href="{{ route('pedidos.show', $pagamento->pedido) }}" class="fw-bold">#{{ $pagamento->pedido_id }}</a>
                                        </td>
                                        <td>{{ Str::limit($pagamento->pedido->cliente->nome ?? 'N/A', 20) }}</td>
                                        <td class="text-success fw-bold">R$ {{ number_format($pagamento->valor_haver, 2, ',', '.') }}</td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="4" class="text-center text-muted py-3">Nenhum pagamento encontrado</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </main>
@endsection

@push('styles')
<style>
/* Ajustes responsivos para os cards do dashboard */
@media (max-width: 1400px) {
    .card-body h3 {
        font-size: 1.5rem !important;
    }
    .card-body small {
        font-size: 0.7rem !important;
    }
}

@media (max-width: 1200px) {
    .card-body h3 {
        font-size: 1.3rem !important;
    }
    .card-body h6 {
        font-size: 0.8rem !important;
    }
    .card-body small {
        font-size: 0.65rem !important;
    }
}

@media (max-width: 992px) {
    .card-body h3 {
        font-size: 1.5rem !important;
    }
    .card-body h6 {
        font-size: 0.85rem !important;
    }
    .card-body small {
        font-size: 0.75rem !important;
    }
}

@media (max-width: 768px) {
    .card-body h3 {
        font-size: 1.8rem !important;
    }
    .card-body h6 {
        font-size: 0.9rem !important;
    }
    .card-body small {
        font-size: 0.8rem !important;
    }
}

/* Prevenir quebra de linha nos valores */
.card-body h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Garantir altura consistente dos cards */
.card.h-100 {
    min-height: 120px;
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Dados do PHP
    const labelsMeses = @json($labelsMeses);
    const pedidosPorMes = @json($pedidosPorMes);
    const receitaPorMes = @json($receitaPorMes);

    // Gráfico de Pedidos por Mês
    const ctxPedidos = document.getElementById('chartPedidosMes').getContext('2d');
    new Chart(ctxPedidos, {
        type: 'bar',
        data: {
            labels: labelsMeses,
            datasets: [{
                label: 'Quantidade de Pedidos',
                data: pedidosPorMes,
                backgroundColor: 'rgba(54, 162, 235, 0.7)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1,
                borderRadius: 5
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            }
        }
    });

    // Gráfico de Receita por Mês
    const ctxReceita = document.getElementById('chartReceitaMes').getContext('2d');
    new Chart(ctxReceita, {
        type: 'line',
        data: {
            labels: labelsMeses,
            datasets: [{
                label: 'Receita (R$)',
                data: receitaPorMes,
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 2,
                fill: true,
                tension: 0.3,
                pointBackgroundColor: 'rgba(75, 192, 192, 1)',
                pointBorderColor: '#fff',
                pointBorderWidth: 2,
                pointRadius: 5
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            let value = context.raw || 0;
                            return 'R$ ' + value.toLocaleString('pt-BR', {minimumFractionDigits: 2, maximumFractionDigits: 2});
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return 'R$ ' + value.toLocaleString('pt-BR');
                        }
                    }
                }
            }
        }
    });
});
</script>
@endpush