@extends('layouts.app')

@section('titulo', 'Fluxo de Caixa')
@section('subtitulo', 'Visão consolidada do período')

@section('conteudo')
<div class="card mb-3">
    <div class="card-body">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-3">
                <label class="form-label small fw-semibold">De</label>
                <input type="date" name="data_inicio" class="form-control form-control-sm" value="{{ $inicio->toDateString() }}">
            </div>
            <div class="col-md-3">
                <label class="form-label small fw-semibold">Até</label>
                <input type="date" name="data_fim" class="form-control form-control-sm" value="{{ $fim->toDateString() }}">
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-outline-secondary btn-sm w-100">Filtrar</button>
            </div>
        </form>
    </div>
</div>

<div class="row g-3 mb-3">
    <div class="col-6 col-lg-3">
        <div class="kpi-card">
            <div class="kpi-label">A Receber (período)</div>
            <div class="kpi-value">R$ {{ number_format($totalReceber, 2, ',', '.') }}</div>
            <div class="kpi-delta text-muted-sm">Recebido: R$ {{ number_format($totalRecebido, 2, ',', '.') }}</div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="kpi-card">
            <div class="kpi-label">A Pagar (período)</div>
            <div class="kpi-value">R$ {{ number_format($totalPagar, 2, ',', '.') }}</div>
            <div class="kpi-delta text-muted-sm">Pago: R$ {{ number_format($totalPago, 2, ',', '.') }}</div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="kpi-card">
            <div class="kpi-label">Saldo Previsto</div>
            <div class="kpi-value {{ $saldoPrevisto < 0 ? 'text-danger' : '' }}">R$ {{ number_format($saldoPrevisto, 2, ',', '.') }}</div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="kpi-card">
            <div class="kpi-label">Saldo Realizado</div>
            <div class="kpi-value {{ $saldoRealizado < 0 ? 'text-danger' : '' }}">R$ {{ number_format($saldoRealizado, 2, ',', '.') }}</div>
        </div>
    </div>
</div>

<div class="row g-3 mb-3">
    @if ($vencidasReceber > 0)
    <div class="col-md-6">
        <div class="alert alert-danger mb-0">
            <strong>{{ $vencidasReceber }}</strong> conta(s) a receber vencida(s).
            <a href="{{ route('financeiro.receber', ['situacao' => 'vencido']) }}" class="alert-link">Ver contas</a>
        </div>
    </div>
    @endif
    @if ($vencidasPagar > 0)
    <div class="col-md-6">
        <div class="alert alert-danger mb-0">
            <strong>{{ $vencidasPagar }}</strong> conta(s) a pagar vencida(s).
            <a href="{{ route('financeiro.pagar', ['situacao' => 'vencido']) }}" class="alert-link">Ver contas</a>
        </div>
    </div>
    @endif
</div>

<div class="card">
    <div class="card-header">Recebimentos vs Pagamentos (realizados no período)</div>
    <div class="card-body">
        <canvas id="chartFluxo" height="100"></canvas>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
<script>
    new Chart(document.getElementById('chartFluxo'), {
        type: 'bar',
        data: {
            labels: @json($dias),
            datasets: [
                { label: 'Recebido', data: @json($valoresReceber), backgroundColor: '#1f6e4f' },
                { label: 'Pago', data: @json($valoresPagar), backgroundColor: '#e1672f' },
            ]
        },
        options: {
            scales: { y: { beginAtZero: true, ticks: { callback: (v) => 'R$ ' + v } } }
        }
    });
</script>
@endpush