@php
    $sum = (float) $section->sum(fn($g)=> (float)$g->total);
@endphp

<table class="table table-sm table-bordered align-middle mb-0 tblx">
    <thead>
        <tr>
            <th style="width:55px;">#</th>
            <th>Group / Account</th>
            <th class="text-end" style="width:200px;">Amount</th>
        </tr>
    </thead>

    <tbody>
        @forelse($section as $g)
            @php
                // ✅ safe unique key for toggle (works even if $g->key contains dots)
                $uid = md5(($sectionTitle ?? '').'|'.($g->key ?? ''));
            @endphp

            <tr class="grp-row js-group" data-uid="{{ $uid }}">
                <td>
                    <div class="chev">
                        <i class="fa fa-chevron-right js-icon"></i>
                    </div>
                </td>

                <td class="fw-bold">
                    {{ $name($g) }}
                    <span class="text-muted" style="font-size:12px;">
                        ({{ $g->children->count() }} lines)
                    </span>
                </td>

                <td class="text-end">
                    <span class="amt-pill">{{ number_format((float)$g->total, 2) }}</span>
                </td>
            </tr>

            @foreach($g->children as $c)
                @php $amt = (float)($c->amount ?? 0); @endphp
                <tr class="js-child" data-parent="{{ $uid }}" style="display:none;">
                    <td></td>
                    <td>
                        <div class="d-flex align-items-center gap-2">
                            <span class="keycode">{{ $c->key ?? '' }}</span>
                            <span class="text-muted fw-bold">{{ $name($c) }}</span>
                        </div>
                    </td>
                    <td class="text-end fw-bold" style="color:{{ $amt < 0 ? 'var(--bad)' : 'var(--text)' }}">
                        {{ number_format($amt, 2) }}
                    </td>
                </tr>
            @endforeach

        @empty
            <tr><td colspan="3" class="text-center text-muted py-4">No data</td></tr>
        @endforelse
    </tbody>

    <tfoot class="table-light">
        <tr>
            <th colspan="2" class="text-end">Total</th>
            <th class="text-end">{{ number_format($sum, 2) }}</th>
        </tr>
    </tfoot>
</table>