{{-- Painel de Transações (expandível) --}}
{{-- Recebe: $item (FinanceiroMatricula) --}}
@php
    $transacoes = $item->transacoes ? $item->transacoes->sortByDesc('created_at') : collect();
@endphp

@if($transacoes->count() > 0)
    <div class="border-t border-indigo-100 dark:border-gray-700">
        {{-- Cabeçalho --}}
        <div class="px-5 py-3 bg-indigo-50 dark:bg-indigo-950/30 flex items-center gap-2">
            <svg class="w-3.5 h-3.5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
            <span class="text-xs font-semibold text-gray-600 dark:text-gray-300">{{ $transacoes->count() }} transação(ões)</span>
        </div>

        {{-- Cards de transações --}}
        <div class="px-4 py-3 space-y-3 bg-indigo-50/60 dark:bg-indigo-950/20">
            @foreach($transacoes as $tr)
                @php
                    $isSucesso = in_array($tr->pagamento_situacao, ['sucesso', 'aprovada', 'approved', 'paid']);
                    $isErro = in_array($tr->pagamento_situacao, ['erro', 'recusada', 'declined', 'failed', 'erro-credtcard', 'cancelado', 'estornado']);
                    $isPendente = !$isSucesso && !$isErro;

                    if ($isSucesso) {
                        $statusBg = 'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 border-emerald-200 dark:border-emerald-800';
                        $dotColor = 'bg-emerald-500';
                        $cardBorder = 'border-l-emerald-400 dark:border-l-emerald-600';
                    } elseif ($isErro) {
                        $statusBg = 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 border-red-200 dark:border-red-800';
                        $dotColor = 'bg-red-500';
                        $cardBorder = 'border-l-red-400 dark:border-l-red-600';
                    } else {
                        $statusBg = 'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 border-amber-200 dark:border-amber-800';
                        $dotColor = 'bg-amber-500';
                        $cardBorder = 'border-l-amber-400 dark:border-l-amber-600';
                    }
                @endphp

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700 border-l-[3px] {{ $cardBorder }} px-4 py-3">
                    {{-- Linha principal --}}
                    <div class="flex flex-col sm:flex-row sm:items-start justify-between gap-2">
                        <div class="min-w-0">
                            {{-- Data + Situação --}}
                            <div class="flex flex-wrap items-center gap-2">
                                <span class="text-xs font-medium text-gray-700 dark:text-gray-300">
                                    @if($tr->pagamento_datahora)
                                        {{ \Carbon\Carbon::parse($tr->pagamento_datahora)->format('d/m/Y H:i:s') }}
                                    @else
                                        {{ $tr->created_at ? $tr->created_at->format('d/m/Y H:i:s') : '--' }}
                                    @endif
                                </span>
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-2xs font-semibold border {{ $statusBg }}">
                                    {{ mb_strtoupper($tr->pagamento_situacao ?? $tr->pagamento_descricao ?? '--') }}
                                </span>
                            </div>

                            {{-- Detalhes --}}
                            <div class="flex flex-wrap items-center gap-x-3 gap-y-1 mt-1.5 text-2xs text-gray-500 dark:text-gray-400">
                                @if($tr->pagamento_forma)
                                    <span class="uppercase font-medium">{{ $tr->pagamento_forma }}@if($tr->pagamento_forma_detalhe) · {{ $tr->pagamento_forma_detalhe }}@endif</span>
                                @endif
                                @if($tr->operadora)
                                    <span>{{ $tr->operadora }}</span>
                                @endif
                                @if($tr->operadora_nsu)
                                    <span class="font-mono text-gray-400 dark:text-gray-500" title="NSU: {{ $tr->operadora_nsu }}">NSU: {{ Str::limit($tr->operadora_nsu, 20) }}</span>
                                @endif
                            </div>

                            {{-- Mensagem de erro/status --}}
                            @if($tr->operadora_status)
                                <p class="text-2xs mt-1.5 {{ $isErro ? 'text-red-500 dark:text-red-400' : 'text-gray-400 dark:text-gray-500' }}">
                                    {{ $tr->operadora_status }}
                                </p>
                            @endif

                            {{-- Descrição do pagamento --}}
                            @if($tr->pagamento_descricao && $tr->pagamento_descricao !== $tr->pagamento_situacao)
                                <p class="text-2xs text-gray-400 dark:text-gray-500 mt-0.5">
                                    {{ $tr->pagamento_descricao }}
                                </p>
                            @endif
                        </div>

                        {{-- Valor --}}
                        <div class="shrink-0">
                            @if($tr->pagamento_valor)
                                <span class="text-sm font-semibold {{ $isSucesso ? 'text-emerald-600 dark:text-emerald-400' : ($isErro ? 'text-red-500 dark:text-red-400' : 'text-gray-700 dark:text-gray-300') }}">
                                    {{ convertMoney($tr->pagamento_valor, 'R$') }}
                                </span>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@else
    <div class="border-t border-gray-100 dark:border-gray-700 px-5 py-4 bg-gray-50/50 dark:bg-gray-900/20 text-center">
        <p class="text-xs text-gray-400 dark:text-gray-500">Nenhuma transação registrada para esta fatura</p>
    </div>
@endif