@extends('layouts.app')

@section('title', 'Dashboard - Sistema Financeiro')
@section('page-title', 'Dashboard')

@section('content')
<div class="space-y-6">
    <!-- Cards de Resumo -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Total de Receitas -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-green-100 text-green-600">
                    <i class="fas fa-arrow-up text-xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Total de Receitas</p>
                    <p class="text-2xl font-bold text-green-600">R$ {{ number_format($totalReceitas, 2, ',', '.') }}</p>
                </div>
            </div>
        </div>
        
        <!-- Total de Despesas -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-red-100 text-red-600">
                    <i class="fas fa-arrow-down text-xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Total de Despesas</p>
                    <p class="text-2xl font-bold text-red-600">R$ {{ number_format($totalDespesas, 2, ',', '.') }}</p>
                </div>
            </div>
        </div>
        
        <!-- Saldo Total -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-blue-100 text-blue-600">
                    <i class="fas fa-wallet text-xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Saldo Total</p>
                    <p class="text-2xl font-bold {{ $saldoTotal >= 0 ? 'text-green-600' : 'text-red-600' }}">
                        R$ {{ number_format($saldoTotal, 2, ',', '.') }}
                    </p>
                </div>
            </div>
        </div>
        
        <!-- Saldo em Contas -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-purple-100 text-purple-600">
                    <i class="fas fa-university text-xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Saldo em Contas</p>
                    <p class="text-2xl font-bold text-purple-600">R$ {{ number_format($saldoContasBancarias, 2, ',', '.') }}</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Cards de Contas a Pagar/Receber -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Contas a Pagar Pendentes -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-orange-100 text-orange-600">
                    <i class="fas fa-file-invoice-dollar text-xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Contas a Pagar</p>
                    <p class="text-2xl font-bold text-orange-600">R$ {{ number_format($contasPagarPendentes, 2, ',', '.') }}</p>
                </div>
            </div>
        </div>
        
        <!-- Contas a Pagar Vencidas -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-red-100 text-red-600">
                    <i class="fas fa-exclamation-triangle text-xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Contas Vencidas</p>
                    <p class="text-2xl font-bold text-red-600">R$ {{ number_format($contasPagarVencidas, 2, ',', '.') }}</p>
                </div>
            </div>
        </div>
        
        <!-- Contas a Receber Pendentes -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-green-100 text-green-600">
                    <i class="fas fa-hand-holding-usd text-xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Contas a Receber</p>
                    <p class="text-2xl font-bold text-green-600">R$ {{ number_format($contasReceberPendentes, 2, ',', '.') }}</p>
                </div>
            </div>
        </div>
        
        <!-- Contas a Receber Vencidas -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
                    <i class="fas fa-clock text-xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Receber Vencidas</p>
                    <p class="text-2xl font-bold text-yellow-600">R$ {{ number_format($contasReceberVencidas, 2, ',', '.') }}</p>
                </div>
            </div>
        </div>
    </div>
    
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Gráfico de Receitas vs Despesas -->
        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Receitas vs Despesas (Últimos 6 meses)</h3>
            <canvas id="receitasDespesasChart" height="300"></canvas>
        </div>
        
        <!-- Contas Bancárias -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900">Contas Bancárias</h3>
                <a href="{{ route('contas-bancarias.create') }}" class="text-blue-600 hover:text-blue-800">
                    <i class="fas fa-plus"></i> Adicionar
                </a>
            </div>
            <div class="space-y-3">
                @forelse($contasBancarias as $conta)
                    <div class="flex items-center justify-between p-3 border border-gray-200 rounded">
                        <div>
                            <p class="font-medium text-gray-900">{{ $conta->nome }}</p>
                            <p class="text-sm text-gray-600">{{ $conta->banco }} - {{ $conta->agencia }}/{{ $conta->conta }}</p>
                        </div>
                        <div class="text-right">
                            <p class="font-bold {{ $conta->saldo_atual >= 0 ? 'text-green-600' : 'text-red-600' }}">
                                R$ {{ number_format($conta->saldo_atual, 2, ',', '.') }}
                            </p>
                            <p class="text-xs text-gray-500">{{ ucfirst($conta->tipo_conta) }}</p>
                        </div>
                    </div>
                @empty
                    <p class="text-gray-500 text-center py-4">Nenhuma conta bancária cadastrada</p>
                @endforelse
            </div>
        </div>
    </div>
    
    <!-- Transações Recentes -->
    <div class="bg-white rounded-lg shadow">
        <div class="px-6 py-4 border-b border-gray-200">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-medium text-gray-900">Transações Recentes</h3>
                <a href="{{ route('transacoes.index') }}" class="text-blue-600 hover:text-blue-800">
                    Ver todas
                </a>
            </div>
        </div>
        <div class="divide-y divide-gray-200">
            @forelse($transacoesRecentes as $transacao)
                <div class="px-6 py-4 flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="p-2 rounded-full {{ $transacao->tipo == 'receita' ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600' }}">
                            <i class="fas {{ $transacao->tipo == 'receita' ? 'fa-arrow-up' : 'fa-arrow-down' }}"></i>
                        </div>
                        <div class="ml-4">
                            <p class="font-medium text-gray-900">{{ $transacao->descricao }}</p>
                            <p class="text-sm text-gray-600">
                                {{ $transacao->contaBancaria->nome }} • {{ $transacao->categoria->nome }}
                            </p>
                        </div>
                    </div>
                    <div class="text-right">
                        <p class="font-bold {{ $transacao->tipo == 'receita' ? 'text-green-600' : 'text-red-600' }}">
                            {{ $transacao->tipo == 'receita' ? '+' : '-' }}R$ {{ number_format($transacao->valor, 2, ',', '.') }}
                        </p>
                        <p class="text-xs text-gray-500">{{ $transacao->data_transacao->format('d/m/Y') }}</p>
                    </div>
                </div>
            @empty
                <div class="px-6 py-4">
                    <p class="text-gray-500 text-center">Nenhuma transação encontrada</p>
                </div>
            @endforelse
        </div>
    </div>
</div>

@push('scripts')
<script>
// Gráfico de Receitas vs Despesas
const ctx = document.getElementById('receitasDespesasChart').getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: @json($meses),
        datasets: [{
            label: 'Receitas',
            data: @json($receitasPorMes),
            borderColor: 'rgb(34, 197, 94)',
            backgroundColor: 'rgba(34, 197, 94, 0.1)',
            tension: 0.1
        }, {
            label: 'Despesas',
            data: @json($despesasPorMes),
            borderColor: 'rgb(239, 68, 68)',
            backgroundColor: 'rgba(239, 68, 68, 0.1)',
            tension: 0.1
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: function(value) {
                        return 'R$ ' + value.toLocaleString('pt-BR');
                    }
                }
            }
        },
        plugins: {
            tooltip: {
                callbacks: {
                    label: function(context) {
                        return context.dataset.label + ': R$ ' + context.parsed.y.toLocaleString('pt-BR');
                    }
                }
            }
        }
    }
});
</script>
@endpush
@endsection