@extends('layouts.admin-lti')

@section('content')
<div class="container-fluid py-4">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb bg-white p-3 rounded shadow-sm mb-4">
            <li class="breadcrumb-item"><a href="#"><i class="fa fa-home me-1"></i> Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('gestao-despesas.despesas.index') }}"><i class="fa fa-list me-1"></i> Despesas</a></li>
            <li class="breadcrumb-item active" aria-current="page"><i class="fa fa-chart-pie me-1"></i> Análise Financeira</li>
        </ol>
    </nav>

    <!-- Filtros -->
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-body">
            <form method="GET" action="{{ route('gestao-despesas.dashboard') }}" id="filtro-form">
                <div class="row g-3 align-items-end">
                    <div class="col-lg-3 col-md-6">
                        <label for="data_inicio" class="form-label">📅 Data Início</label>
                        <input type="date" name="data_inicio" id="data_inicio" class="form-control shadow-sm"
                               value="{{ $dados['data_inicio'] }}">
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <label for="data_fim" class="form-label">📅 Data Fim</label>
                        <input type="date" name="data_fim" id="data_fim" class="form-control shadow-sm"
                               value="{{ $dados['data_fim'] }}">
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <label for="mesdeEstimar" class="form-label">🔮 Meses a Projetar</label>
                        <select name="mesdeEstimar" id="mesdeEstimar" class="form-select shadow-sm">
                            @foreach(range(1, 12) as $month)
                                <option value="{{ $month }}" {{ $month == ($request->mesdeEstimar ?? 2) ? 'selected' : '' }}>
                                    {{ $month }} {{ $month == 1 ? 'mês' : 'meses' }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-3 col-md-6 d-grid">
                        <button type="submit" class="btn btn-success h-100">
                            <i class="fa fa-filter me-1"></i> Aplicar Filtros
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Financial Summary -->
    <div class="row mb-4">
        <div class="col-xl-4 col-md-6 mb-4">
            <div class="card border-start border-success border-4 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h6 class="text-muted fw-normal">💰 Total de Vendas</h6>
                            <h3 class="text-success">{{ number_format($dados['vendasdointervalo'], 2, ',', '.') }} MT</h3>
                        </div>
                        <div class="bg-success bg-opacity-10 p-3 rounded">
                            <i class="fa fa-cash-register fa-2x text-success"></i>
                        </div>
                    </div>
                    <div class="mt-3">
                        <small class="text-muted">
                            Período: {{ \Carbon\Carbon::parse($dados['data_inicio'])->format('d/m/Y') }}
                            - {{ \Carbon\Carbon::parse($dados['data_fim'])->format('d/m/Y') }}
                        </small>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-md-6 mb-4">
            <div class="card border-start border-danger border-4 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h6 class="text-muted fw-normal">🛒 Custo de Compras</h6>
                            <h3 class="text-danger">{{ number_format($dados['custodacompraIntervalo'], 2, ',', '.') }} MT</h3>
                        </div>
                        <div class="bg-danger bg-opacity-10 p-3 rounded">
                            <i class="fa fa-shopping-cart fa-2x text-danger"></i>
                        </div>
                    </div>
                    <div class="mt-3">
                        @php
                            $costRatio = $dados['vendasdointervalo'] ?
                                ($dados['custodacompraIntervalo'] / $dados['vendasdointervalo']) * 100 : 0;
                        @endphp
                        <div class="d-flex justify-content-between">
                            <small class="text-muted">Custo/Vendas</small>
                            <small class="fw-bold">{{ number_format($costRatio, 2) }}%</small>
                        </div>
                        <div class="progress mt-1" style="height: 6px">
                            <div class="progress-bar bg-danger" role="progressbar"
                                 style="width: {{ $costRatio }}%" aria-valuenow="{{ $costRatio }}"
                                 aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-md-6 mb-4">
            <div class="card border-start border-primary border-4 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h6 class="text-muted fw-normal">📈 Lucro no Intervalo</h6>
                            <h3 class="text-primary">{{ number_format($dados['lucro'], 2, ',', '.') }} MT</h3>
                        </div>
                        <div class="bg-primary bg-opacity-10 p-3 rounded">
                            <i class="fa fa-chart-line fa-2x text-primary"></i>
                        </div>
                    </div>
                    <div class="mt-3">
                        @php
                            $margin = $dados['vendasdointervalo'] ?
                                ($dados['lucro'] / $dados['vendasdointervalo']) * 100 : 0;
                        @endphp
                        <div class="d-flex justify-content-between">
                            <small class="text-muted">Margem</small>
                            <small class="fw-bold">{{ number_format($margin, 2) }}%</small>
                        </div>
                        <div class="progress mt-1" style="height: 6px">
                            <div class="progress-bar bg-primary" role="progressbar"
                                 style="width: {{ $margin }}%" aria-valuenow="{{ $margin }}"
                                 aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Inventory Summary -->
    <div class="row mb-4">
        <div class="col-lg-4 mb-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-light">
                    <h6 class="mb-0"><i class="fa fa-warehouse me-2"></i> Resumo de Estoque</h6>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <h6 class="text-muted mb-1">📦 Valor de Venda</h6>
                            <h5 class="mb-0">{{ number_format($dados['estoqueVendaArmazem'], 2, ',', '.') }} MT</h5>
                        </div>
                        <span class="badge bg-secondary">Armazém</span>
                    </div>

                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <h6 class="text-muted mb-1">💸 Valor de Compra</h6>
                            <h5 class="mb-0">{{ number_format($dados['estoqueCompraArmazem'], 2, ',', '.') }} MT</h5>
                        </div>
                        <span class="badge bg-secondary">Armazém</span>
                    </div>

                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-1">🏪 Valor de Compra</h6>
                            <h5 class="mb-0">{{ number_format($dados['estoqueCompraLoja'], 2, ',', '.') }} MT</h5>
                        </div>
                        <span class="badge bg-dark">Loja</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-8 mb-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-light">
                    <h6 class="mb-0"><i class="fa fa-chart-bar me-2"></i> Margem do Estoque</h6>
                </div>
                <div class="card-body">
                    <div class="row h-100">
                        <div class="col-md-6 d-flex flex-column">
                            <h5 class="{{ $dados['margemEstoqueArmazem'] >= 0 ? 'text-success' : 'text-danger' }}">
                                {{ number_format($dados['margemEstoqueArmazem'], 2, ',', '.') }} MT
                            </h5>
                            <p class="text-muted">
                                @if ($dados['margemEstoqueArmazem'] > 0)
                                    <i class="fa fa-check-circle text-success me-1"></i>
                                    Potencial positivo no armazém
                                @else
                                    <i class="fa fa-exclamation-triangle text-danger me-1"></i>
                                    Atenção: margem negativa no armazém
                                @endif
                            </p>
                            <div class="mt-auto">
                                <div class="d-flex justify-content-between">
                                    <span>Custo</span>
                                    <span class="fw-bold">{{ number_format($dados['estoqueCompraArmazem'], 2, ',', '.') }} MT</span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <span>Valor de Mercado</span>
                                    <span class="fw-bold">{{ number_format($dados['estoqueVendaArmazem'], 2, ',', '.') }} MT</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <canvas id="stockMarginChart" height="150"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Expense Forecast -->
    <div class="row mb-4">
        <div class="col-lg-6 mb-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-light">
                    <h6 class="mb-0"><i class="fa fa-calendar-alt me-2"></i> Despesas Estimadas</h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Mês</th>
                                    <th>Ano</th>
                                    <th class="text-end">Valor</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($dados['despesasEstimadas'] as $item)
                                <tr>
                                    <td>{{ $item['mes'] }}</td>
                                    <td>{{ $item['ano'] }}</td>
                                    <td class="text-end fw-bold">{{ number_format($item['valor'], 2, ',', '.') }} MT</td>
                                </tr>
                                @endforeach
                            </tbody>
                            <tfoot class="table-light">
                                <tr>
                                    <th colspan="2">Total Projetado</th>
                                    <th class="text-end">
                                        {{ number_format(collect($dados['despesasEstimadas'])->sum('valor'), 2, ',', '.') }} MT
                                    </th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6 mb-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-light">
                    <h6 class="mb-0"><i class="fa fa-chart-line me-2"></i> Projeção de Lucro Operacional</h6>
                </div>
                <div class="card-body">
                    <canvas id="profitProjectionChart" height="250"></canvas>

                    @php $finalProfit = last($dados['projecaoLucros'])['lucroOperacional']; @endphp
                    <div class="alert mt-3 {{ $finalProfit > 0 ? 'alert-success' : ($finalProfit == 0 ? 'alert-warning' : 'alert-danger') }}">
                        <div class="d-flex align-items-center">
                            @if ($finalProfit > 0)
                                <i class="fa fa-check-circle fa-2x me-3"></i>
                                <div>
                                    <h5 class="mb-1">Negócio Viável</h5>
                                    <p class="mb-0">Lucro projetado cobre todas as despesas futuras</p>
                                </div>
                            @elseif ($finalProfit == 0)
                                <i class="fa fa-balance-scale fa-2x me-3"></i>
                                <div>
                                    <h5 class="mb-1">Ponto de Equilíbrio</h5>
                                    <p class="mb-0">Receitas e despesas estão equilibradas</p>
                                </div>
                            @else
                                <i class="fa fa-exclamation-triangle fa-2x me-3"></i>
                                <div>
                                    <h5 class="mb-1">Risco de Prejuízo</h5>
                                    <p class="mb-0">Projeção indica possível déficit operacional</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Export Options -->
    <div class="card shadow-sm border-0">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <h6 class="mb-0"><i class="fa fa-download me-2"></i> Exportar Relatório</h6>
                <div>
                    <a href="{{ route('gestao-despesas.exportar.pdf', request()->query()) }}"
                       class="btn btn-danger me-2">
                        <i class="fa fa-file-pdf me-1"></i> PDF
                    </a>
                    <a href="{{ route('gestao-despesas.exportar.excel', request()->query()) }}"
                       class="btn btn-success">
                        <i class="fa fa-file-excel me-1"></i> Excel
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Stock Margin Chart
    const stockCtx = document.getElementById('stockMarginChart').getContext('2d');
    new Chart(stockCtx, {
        type: 'doughnut',
        data: {
            labels: ['Custo Armazém', 'Valor de Venda'],
            datasets: [{
                data: [
                    {{ $dados['estoqueCompraArmazem'] }},
                    {{ $dados['estoqueVendaArmazem'] }}
                ],
                backgroundColor: [
                    'rgba(220, 53, 69, 0.7)',
                    'rgba(25, 135, 84, 0.7)'
                ],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { position: 'bottom' },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return `${context.label}: ${context.raw.toLocaleString('pt-MZ', {
                                minimumFractionDigits: 2,
                                maximumFractionDigits: 2
                            })} MT`;
                        }
                    }
                }
            }
        }
    });

    // Profit Projection Chart
    const profitCtx = document.getElementById('profitProjectionChart').getContext('2d');
    const projectionData = @json($dados['projecaoLucros']);
    const labels = projectionData.map(item => item.mes);
    const values = projectionData.map(item => item.lucroOperacional);

    new Chart(profitCtx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Lucro Operacional',
                data: values,
                borderColor: values[values.length - 1] < 0 ? 'rgba(220, 53, 69)' : 'rgba(25, 135, 84)',
                backgroundColor: values[values.length - 1] < 0 ?
                    'rgba(220, 53, 69, 0.1)' : 'rgba(25, 135, 84, 0.1)',
                fill: true,
                tension: 0.4,
                borderWidth: 3
            }]
        },
        options: {
            responsive: true,
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return `Lucro: ${context.raw.toLocaleString('pt-MZ', {
                                minimumFractionDigits: 2,
                                maximumFractionDigits: 2
                            })} MT`;
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return value.toLocaleString('pt-MZ') + ' MT';
                        }
                    }
                }
            }
        }
    });
</script>
@endsection

@section('styles')
<style>
    .card {
        transition: transform 0.2s, box-shadow 0.2s;
        border-radius: 0.75rem;
    }
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    .progress {
        background-color: #e9ecef;
        border-radius: 10px;
    }
    .table-hover tbody tr:hover {
        background-color: rgba(0, 0, 0, 0.03);
    }
    .badge {
        font-weight: 500;
    }
</style>
@endsection