@extends('layouts.admin-Lti')

@section('title', 'Resumo Financeiro')

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .summary-card {
        transition: all 0.3s ease;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .summary-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    }

    .chart-container {
        background: white;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 20px;
        margin-bottom: 20px;
        height: 100%;
    }

    .status-badge {
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .filter-section {
        background: white;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 20px;
        margin-bottom: 20px;
    }

    .category-tag {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 15px;
        margin-right: 5px;
        margin-bottom: 5px;
        font-size: 0.8rem;
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-md-12">
            <h2><i class="fas fa-chart-line"></i> Resumo Financeiro</h2>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                <li class="breadcrumb-item active">Resumo Financeiro</li>
            </ol>
        </div>
    </div>

    <!-- Filtros -->
    <div class="filter-section">
        <form id="filterForm" method="GET" action="{{ route('gestao-despesas.despesas.resumoFinanceiro') }}">
            <div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="periodo">Período</label>
                        <select class="form-control" id="periodo" name="periodo">
                            <option value="hoje">Hoje</option>
                            <option value="semana">Esta Semana</option>
                            <option value="mes" selected>Este Mês</option>
                            <option value="trimestre">Este Trimestre</option>
                            <option value="semestre">Este Semestre</option>
                            <option value="ano">Este Ano</option>
                            <option value="personalizado">Personalizado</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-3" id="customDateRange" style="display: none;">
                    <div class="form-group">
                        <label for="data_inicio">Data Início</label>
                        <input type="date" class="form-control" id="data_inicio" name="data_inicio">
                    </div>
                </div>

                <div class="col-md-3" id="customDateRangeEnd" style="display: none;">
                    <div class="form-group">
                        <label for="data_fim">Data Fim</label>
                        <input type="date" class="form-control" id="data_fim" name="data_fim">
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label for="categoria_id">Categoria</label>
                        <select class="form-control select2" id="categoria_id" name="categoria_id">
                            <option value="">Todas Categorias</option>
                            @foreach($categorias as $categoria)
                                <option value="{{ $categoria->id }}">{{ $categoria->nome }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label for="status">Status</label>
                        <select class="form-control" id="status" name="status">
                            <option value="">Todos Status</option>
                            <option value="pendente">Pendente</option>
                            <option value="pago">Pago</option>
                            <option value="aprovado">Aprovado</option>
                            <option value="rejeitado">Rejeitado</option>
                            <option value="cancelado">Cancelado</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-12 text-right mt-3">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-filter"></i> Aplicar Filtros
                    </button>
                    <button type="button" id="resetFilters" class="btn btn-outline-secondary">
                        <i class="fas fa-sync-alt"></i> Limpar Filtros
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Resumo Estatístico -->
    <div class="row">
        <div class="col-md-3">
            <div class="summary-card bg-danger text-white">
                <div class="p-4">
                    <h5><i class="fas fa-exclamation-circle"></i> Pendente</h5>
                    <h3>{{ number_format($totais['pendente'], 2, ',', '.') }} MT</h3>
                    <p>{{ $contagens['pendente'] }} despesas</p>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="summary-card bg-success text-white">
                <div class="p-4">
                    <h5><i class="fas fa-check-circle"></i> Pago</h5>
                    <h3>{{ number_format($totais['pago'], 2, ',', '.') }} MT</h3>
                    <p>{{ $contagens['pago'] }} despesas</p>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="summary-card bg-primary text-white">
                <div class="p-4">
                    <h5><i class="fas fa-thumbs-up"></i> Aprovado</h5>
                    <h3>{{ number_format($totais['aprovado'], 2, ',', '.') }} MT</h3>
                    <p>{{ $contagens['aprovado'] }} despesas</p>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="summary-card bg-warning text-dark">
                <div class="p-4">
                    <h5><i class="fas fa-ban"></i> Rejeitado/Cancelado</h5>
                    <h3>{{ number_format($totais['rejeitado_cancelado'], 2, ',', '.') }} MT</h3>
                    <p>{{ $contagens['rejeitado_cancelado'] }} despesas</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Gráficos e Visualizações -->
    <div class="row mt-4">
        <div class="col-md-6">
            <div class="chart-container">
                <h5><i class="fas fa-chart-pie"></i> Distribuição por Categoria</h5>
                <canvas id="categoriaChart" height="250"></canvas>
            </div>
        </div>

        <div class="col-md-6">
            <div class="chart-container">
                <h5><i class="fas fa-chart-bar"></i> Despesas por Mês</h5>
                <canvas id="monthlyChart" height="250"></canvas>
            </div>
        </div>
    </div>

    <!-- Lista de Despesas Recentes -->
    <div class="row mt-4">
        <div class="col-md-12">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h5 class="m-0"><i class="fas fa-list"></i> Últimas Despesas</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Descrição</th>
                                    <th>Categoria</th>
                                    <th>Valor</th>
                                    <th>Vencimento</th>
                                    <th>Status</th>
                                    <th>Fornecedor</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($recentes as $despesa)
                                <tr>
                                    <td>{{ Str::limit($despesa->descricao, 30) }}</td>
                                    <td>
                                        <span class="category-tag" style="background-color: {{ $categoriaCores[$despesa->categoria_id] ?? '#6c757d' }}">
                                            {{ $despesa->categoria->nome }}
                                        </span>
                                    </td>
                                    <td>{{ number_format($despesa->valor, 2, ',', '.') }} MT</td>
                                    <td>{{ \Carbon\Carbon::parse($despesa->data_vencimento)->format('d/m/Y') }}</td>
                                    <td>
                                        <span class="status-badge
                                            @if($despesa->status == 'pago') bg-success text-white
                                            @elseif($despesa->status == 'pendente') bg-danger text-white
                                            @elseif($despesa->status == 'aprovado') bg-primary text-white
                                            @else bg-warning text-dark @endif">
                                            {{ ucfirst($despesa->status) }}
                                        </span>
                                    </td>
                                    <td>{{ $despesa->fornecedor->nome ?? 'N/A' }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="text-center mt-3">
                        <a href="{{ route('gestao-despesas.despesas.index') }}" class="btn btn-outline-primary">
                            <i class="fas fa-eye"></i> Ver Todas as Despesas
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
    // Inicializar Select2
    $('.select2').select2({
        placeholder: "Selecione uma categoria",
        allowClear: true
    });

    // Controle do filtro de período
    $('#periodo').change(function() {
        if ($(this).val() === 'personalizado') {
            $('#customDateRange, #customDateRangeEnd').show();
        } else {
            $('#customDateRange, #customDateRangeEnd').hide();
        }
    });

    // Resetar filtros
    $('#resetFilters').click(function() {
        $('#filterForm')[0].reset();
        $('.select2').val(null).trigger('change');
        $('#filterForm').submit();
    });

    // Configurar datas padrão para período personalizado
    const today = new Date().toISOString().split('T')[0];
    const firstDayOfMonth = new Date(new Date().getFullYear(), new Date().getMonth(), 2)
        .toISOString().split('T')[0];

    $('#data_inicio').val(firstDayOfMonth);
    $('#data_fim').val(today);

    // Gráfico de Categorias
    const categoriaCtx = document.getElementById('categoriaChart').getContext('2d');
    const categoriaChart = new Chart(categoriaCtx, {
        type: 'doughnut',
        data: {
            labels: @json($categoriaLabels),
            datasets: [{
                data: @json($categoriaValores),
                backgroundColor: @json($categoriaCores),
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            legend: {
                position: 'right',
            },
            tooltips: {
                callbacks: {
                    label: function(tooltipItem, data) {
                        const label = data.labels[tooltipItem.index] || '';
                        const value = data.datasets[0].data[tooltipItem.index];
                        return `${label}: ${value.toLocaleString('pt-BR', {style: 'currency', currency: 'MZN'})}`;
                    }
                }
            }
        }
    });

    // Gráfico Mensal
    const monthlyCtx = document.getElementById('monthlyChart').getContext('2d');
    const monthlyChart = new Chart(monthlyCtx, {
        type: 'bar',
        data: {
            labels: @json($monthlyLabels),
            datasets: [{
                label: 'Total de Despesas',
                data: @json($monthlyValores),
                backgroundColor: 'rgba(54, 162, 235, 0.5)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        callback: function(value) {
                            return value.toLocaleString('pt-BR', {style: 'currency', currency: 'MZN'});
                        }
                    }
                }]
            },
            tooltips: {
                callbacks: {
                    label: function(tooltipItem, data) {
                        return `Total: ${tooltipItem.yLabel.toLocaleString('pt-BR', {style: 'currency', currency: 'MZN'})}`;
                    }
                }
            }
        }
    });
});
</script>
@endpush