@extends('layout')

@section('content')
    @php
        $scopeName = $scopeName ?? null;
        $filters = [
            '' => 'Tudo',
            'a_receber' => 'A receber',
            'a_pagar' => 'A pagar',
            'previstos' => 'Previstos',
            'realizados' => 'Realizados',
            'ocultos' => 'Ocultos'.(($hiddenCount ?? 0) > 0 ? ' ('.$hiddenCount.')' : ''),
        ];
        $exportQuery = request()->query();
        unset($exportQuery['page']);
        $exportUrl = url('financeiro/exportar.csv'.($exportQuery !== [] ? '?'.http_build_query($exportQuery) : ''));
        $rangeStart = $financeFilters['de'] ?? null;
        $rangeEnd = $financeFilters['ate'] ?? null;
        $rangeLabel = $rangeStart && $rangeEnd
            ? \Carbon\Carbon::parse($rangeStart)->format('d/m/Y').' até '.\Carbon\Carbon::parse($rangeEnd)->format('d/m/Y')
            : ($rangeStart ? 'A partir de '.\Carbon\Carbon::parse($rangeStart)->format('d/m/Y') : ($rangeEnd ? 'Até '.\Carbon\Carbon::parse($rangeEnd)->format('d/m/Y') : 'Qualquer período'));
        $advancedFilterCount = (int) filled($financeFilters['categoria'] ?? null)
            + (int) filled($financeFilters['origem'] ?? null)
            + (int) filled($financeFilters['forma'] ?? null)
            + (int) (filled($rangeStart) || filled($rangeEnd));
        $openAdvancedFilters = request()->query->has('categoria')
            || request()->query->has('origem')
            || request()->query->has('forma')
            || request()->query->has('de')
            || request()->query->has('ate');
    @endphp

    <div class="page-head">
        <div class="t">
            <h1>Financeiro</h1>
            <p class="lead">Caixa, contas a pagar e a receber</p>
        </div>
        <div class="actions">
            <a href="{{ $exportUrl }}" class="btn btn--ghost"><i class="ic">download</i><span class="lbl">CSV</span></a>
            <a href="{{ url('financeiro/carteiras') }}" class="btn btn--ghost"><i class="ic">account_balance</i><span class="lbl">Carteiras</span></a>
            <a href="{{ url('financeiro/cobrancas') }}" class="btn btn--ghost"><i class="ic">payments</i><span class="lbl">Cobranças</span></a>
            <a href="{{ url('financeiro/novo?tipo=saida') }}" class="btn btn--ghost"><i class="ic">south_west</i><span class="lbl">Saída</span></a>
            <a href="{{ url('financeiro/novo?tipo=entrada') }}" class="btn btn--primary"><i class="ic">north_east</i><span class="lbl">Entrada</span></a>
        </div>
    </div>

    <div class="grid cols-4" style="margin-bottom:14px">
        <div class="stat">
            <span class="k"><i class="ic">account_balance_wallet</i> Saldo em caixa <button type="button" class="finance-values-toggle" data-financial-toggle aria-pressed="false" title="Ocultar valores" aria-label="Ocultar valores financeiros"><i class="ic" data-financial-toggle-icon>visibility</i></button></span>
            <div class="v"><span data-financial-value>{{ money($summary['balance']) }}</span></div>
            @if (($summary['balance_source'] ?? 'local') !== 'local')
                <div class="sub">{{ $summary['balance_source_label'] ?? 'Contas conectadas' }} · {{ ($summary['balance_stale'] ?? false) ? 'inclui último valor conhecido' : 'atualizado '.human_diff((string) $summary['balance_checked_at']) }}</div>
                @foreach (($summary['balance_components'] ?? []) as $component)
                    <div class="sub">{{ $component['label'] }}: <span data-financial-value>{{ money($component['value']) }}</span>{{ $component['stale'] ? ' · desatualizado' : '' }}</div>
                @endforeach
                <div class="sub"><span data-financial-label>Livro-caixa local: </span><span data-financial-value>{{ money($summary['local_balance']) }}</span></div>
            @else
                <div class="sub"><span data-financial-label>inicial </span><span data-financial-value>{{ money($summary['opening']) }}</span></div>
            @endif
        </div>
        <a class="stat" href="{{ url('financeiro?filtro=a_receber') }}">
            <span class="k"><i class="ic">trending_up</i> A receber</span>
            <div class="v" style="color:var(--ok)"><span data-financial-value>{{ money($summary['to_receive']) }}</span></div>
            <div class="sub">
                @if ($summary['overdue_receive'] > 0)
                    <span data-financial-value>{{ money($summary['overdue_receive']) }}</span><span data-financial-label> vencido</span>
                @else
                    <span data-financial-label>em dia</span>
                @endif
            </div>
        </a>
        <a class="stat" href="{{ url('financeiro?filtro=a_pagar') }}">
            <span class="k"><i class="ic">trending_down</i> A pagar</span>
            <div class="v" style="color:var(--bad)"><span data-financial-value>{{ money($summary['to_pay']) }}</span></div>
            <div class="sub">
                @if ($summary['overdue_pay'] > 0)
                    <span data-financial-value>{{ money($summary['overdue_pay']) }}</span><span data-financial-label> vencido</span>
                @else
                    <span data-financial-label>em dia</span>
                @endif
            </div>
        </a>
        <div class="stat">
            <span class="k"><i class="ic">calendar_month</i> Resultado do mês</span>
            <div class="v" style="color:{{ $summary['month_result'] >= 0 ? 'var(--ok)' : 'var(--bad)' }}">
                <span data-financial-value>{{ money_signed($summary['month_result'], $summary['month_result'] < 0 ? 'saida' : 'entrada') }}</span>
            </div>
            <div class="sub"><span data-financial-value>{{ money($summary['month_in']) }}</span><span data-financial-label> entrou · </span><span data-financial-value>{{ money($summary['month_out']) }}</span><span data-financial-label> saiu</span></div>
        </div>
    </div>

    <div class="row wrap small" style="justify-content:flex-end;margin-bottom:18px" x-data="{ edit: false }">
        <span class="muted">Saldo inicial local: <b data-financial-value>{{ money($summary['opening']) }}</b></span>
        <button class="btn btn--sm btn--subtle" @click="edit = !edit" x-show="!edit"><i class="ic sm">tune</i> ajustar</button>
        <form method="post" action="{{ url('financeiro/saldo-inicial') }}" data-ajax data-reload="1" x-show="edit" x-cloak class="row" style="gap:6px">
            @csrf
            <input name="opening_balance" data-mask="money" inputmode="decimal"
                   value="{{ number_format($summary['opening'], 2, ',', '.') }}"
                   style="width:120px;padding:6px 9px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface)">
            <button class="btn btn--sm btn--primary">Salvar</button>
            <button type="button" class="btn btn--sm btn--ghost" @click="edit = false">Cancelar</button>
        </form>
    </div>

    @if ($scopeName)
        <div class="row" style="margin-bottom:14px;gap:10px">
            <span class="badge badge--accent"><i class="ic sm">{{ $scopeName['tipo'] === 'projeto' ? 'folder_open' : 'groups' }}</i>
                Lançamentos · {{ $scopeName['tipo'] }}: <b>{{ $scopeName['nome'] }}</b></span>
            <a href="{{ url('financeiro') }}" class="btn btn--ghost btn--sm"><i class="ic sm">arrow_back</i> Ver tudo</a>
        </div>
    @else
        <div class="card" style="margin-bottom:18px">
            <div class="card-head"><h2>Entradas × Saídas</h2><span class="grow"></span>
                <span class="small muted">últimos 6 meses</span></div>
            <div class="card-body">
                <div style="height:200px" data-financial-chart><canvas id="flowChart"></canvas></div>
            </div>
        </div>

    @endif

    <div class="toolbar" style="margin-bottom:12px">
        <div class="chips">
            @foreach ($filters as $key => $lbl)
                @php
                    $chipQuery = request()->query();
                    unset($chipQuery['page']);
                    if ($key !== '') $chipQuery['filtro'] = $key; else unset($chipQuery['filtro']);
                    $chipUrl = url('financeiro'.($chipQuery !== [] ? '?'.http_build_query($chipQuery) : ''));
                @endphp
                <a class="chip {{ $filtro === $key ? 'active' : '' }}" href="{{ $chipUrl }}">{{ $lbl }}</a>
            @endforeach
        </div>
    </div>

    <form method="get" action="{{ url('financeiro') }}" class="card finance-filter-form" style="margin-bottom:14px">
        @if ($scopeName && request()->query('projeto')) <input type="hidden" name="projeto" value="{{ request()->query('projeto') }}"> @endif
        @if ($scopeName && request()->query('cliente')) <input type="hidden" name="cliente" value="{{ request()->query('cliente') }}"> @endif
        @if ($filtro !== '') <input type="hidden" name="filtro" value="{{ $filtro }}"> @endif
        <div class="finance-search-row">
            <div class="finance-search-control"><i class="ic">search</i><input id="finance-q" type="search" name="q" placeholder="Buscar lançamento por descrição ou observação…" value="{{ $q }}"><button class="btn btn--primary btn--sm" type="submit">Buscar</button></div>
        </div>
        <details class="finance-advanced-filters" @if ($openAdvancedFilters) open @endif>
            <summary>
                <span class="finance-advanced-title"><i class="ic sm">tune</i> Filtros avançados <span class="finance-filter-count" data-finance-filter-count @if ($advancedFilterCount === 0) hidden @endif>{{ $advancedFilterCount }}</span></span>
                <span class="finance-advanced-period" data-range-summary>{{ $rangeLabel }}</span>
                <i class="ic sm finance-advanced-chevron">expand_more</i>
            </summary>
            <div class="finance-advanced-body">
                <div class="finance-advanced-grid">
                    <div class="field finance-range-field">
                        <label for="finance-period">Período</label>
                        <div class="finance-range-input-wrap"><i class="ic">calendar_month</i><input id="finance-period" type="text" placeholder="Escolha um período" autocomplete="off" data-finance-range-picker data-start="{{ $rangeStart ?? '' }}" data-end="{{ $rangeEnd ?? '' }}"><span class="finance-range-caret" aria-hidden="true"></span></div>
                        <div class="finance-range-fallback" data-finance-range-fallback>
                            <label>De<input type="date" name="de" value="{{ $rangeStart ?? '' }}" data-finance-range-start></label>
                            <label>Até<input type="date" name="ate" value="{{ $rangeEnd ?? '' }}" data-finance-range-end></label>
                        </div>
                        <div class="finance-range-presets" aria-label="Períodos rápidos">
                            <button type="button" data-finance-range-preset="this-month">Este mês</button>
                            <button type="button" data-finance-range-preset="last-month">Mês passado</button>
                            <button type="button" data-finance-range-preset="last-30-days">Últimos 30 dias</button>
                        </div>
                    </div>
                    <div class="field"><label for="finance-categoria">Categoria</label><select id="finance-categoria" name="categoria" data-searchable-select><option value="">Todas</option>@foreach ($categories as $category)<option value="{{ $category->id }}" @selected((int) ($financeFilters['categoria'] ?? 0) === $category->id)>{{ $category->name }}</option>@endforeach</select></div>
                    <div class="field"><label for="finance-origem">Origem</label><select id="finance-origem" name="origem"><option value="">Todas</option>@foreach (\App\Models\Transaction::SOURCES as $source => $meta)<option value="{{ $source }}" @selected(($financeFilters['origem'] ?? '') === $source)>{{ $meta['label'] }}</option>@endforeach</select></div>
                    <div class="field"><label for="finance-forma">Forma</label><select id="finance-forma" name="forma"><option value="">Todas</option>@foreach (\App\Models\Transaction::PAYMENT_METHODS as $method => $label)<option value="{{ $method }}" @selected(($financeFilters['forma'] ?? '') === $method)>{{ $label }}</option>@endforeach</select></div>
                </div>
                <div class="finance-filter-actions">
                    <a class="btn btn--ghost btn--sm" href="{{ url('financeiro'.($scopeName ? '?'.http_build_query(array_filter(['projeto' => request()->query('projeto'), 'cliente' => request()->query('cliente')])) : '')) }}">Limpar filtros</a>
                    <button class="btn btn--primary btn--sm" type="submit"><i class="ic sm">filter_alt</i> Aplicar filtros</button>
                </div>
            </div>
        </details>
    </form>

    <div id="tx-results" data-table-pagination>
        @include('finance._list')
    </div>

    <a href="{{ url('financeiro/novo') }}" class="fab" title="Novo lançamento"><i class="ic">add</i></a>

    <script nonce="{{ $cspNonce }}">
        (() => {
            const el = document.getElementById('flowChart');
            if (!el) return;
            const labels = {!! json_encode($flow['labels'], JSON_UNESCAPED_UNICODE) !!};
            const entradas = {!! json_encode($flow['entradas']) !!};
            const saidas = {!! json_encode($flow['saidas']) !!};
            let chart;
            const draw = () => {
                const cs = getComputedStyle(document.documentElement);
                const v = (n, f) => cs.getPropertyValue(n).trim() || f;
                chart?.destroy();
                chart = new Chart(el, {
                    type: 'bar',
                    data: {
                        labels,
                        datasets: [
                            { label: 'Entradas', data: entradas, backgroundColor: v('--chart-4', '#3f9d69'), borderRadius: 5, maxBarThickness: 26 },
                            { label: 'Saídas', data: saidas, backgroundColor: v('--chart-5', '#c0564e'), borderRadius: 5, maxBarThickness: 26 }
                        ]
                    },
                    options: {
                        responsive: true, maintainAspectRatio: false,
                        plugins: {
                            legend: { display: true, position: 'bottom', labels: { color: v('--text-2', '#555'), boxWidth: 10, boxHeight: 10, usePointStyle: true } },
                            tooltip: { displayColors: false, callbacks: { label: (c) => c.dataset.label + ': R$ ' + Number(c.raw).toLocaleString('pt-BR', { minimumFractionDigits: 2 }) } }
                        },
                        scales: {
                            x: { grid: { display: false }, border: { display: false }, ticks: { color: v('--text-3', '#888') } },
                            y: { grid: { color: v('--chart-grid', 'rgba(0,0,0,.07)') }, border: { display: false }, ticks: { color: v('--text-3', '#888'), maxTicksLimit: 5, callback: (x) => 'R$ ' + (x / 1000) + 'k' } }
                        }
                    }
                });
            };
            document.addEventListener('DOMContentLoaded', draw);
            document.addEventListener('theme:changed', draw);
        })();
    </script>
@endsection