<div class="table-responsive">
    <table class="table table-hover mb-0 voucher-list-table" style="min-width:720px">
        <thead class="table-light">
            <tr>
                @foreach($visibleColumns as $columnKey)
                    <th @class([
                        'text-end' => $columnKey === 'amount',
                    ])>{{ $columnLabels[$columnKey] ?? ucfirst(str_replace('_', ' ', $columnKey)) }}</th>
                @endforeach
                @if($showActions ?? true)
                    <th class="text-end pe-3" style="width:270px">Actions</th>
                @endif
            </tr>
        </thead>
        <tbody>
            @forelse($rows as $row)
            @php
                $voucher = $row['voucher'];
                [$sbg,$sfg] = $voucher->getStatusColor();
                $extraData = $voucher->extra_data ?? [];
            @endphp
            <tr>
                @foreach($visibleColumns as $columnKey)
                    <td @class([
                        'text-end fw-semibold' => $columnKey === 'amount',
                        'text-muted' => in_array($columnKey, ['reference', 'narration', 'dimensions', 'accounts', 'customer_jobs'], true),
                    ]) style="font-size:13px;max-width:260px">
                        @if($columnKey === 'voucher_number' && ($showActions ?? true))
                            <a href="{{ route('vouchers.show', [$voucherType, $voucher]) }}"
                               class="fw-semibold text-decoration-none"
                               style="color:var(--primary)">
                                {{ $row['cells'][$columnKey] }}
                            </a>
                            @if(!empty($extraData['reversed_by']))
                                <span class="badge ms-1" style="background:#f8d7da;color:#842029;font-size:10px">Reversed</span>
                            @endif
                            @if(!empty($extraData['reversed_from']))
                                <span class="badge ms-1" style="background:#fff3cd;color:#664d03;font-size:10px">Reversal</span>
                            @endif
                        @elseif($columnKey === 'status')
                            <span class="badge" style="background:{{ $sbg }};color:{{ $sfg }};font-size:11px">
                                {{ $row['cells'][$columnKey] }}
                            </span>
                        @else
                            <div class="{{ ($showActions ?? true) ? 'text-truncate' : '' }}" title="{{ $row['cells'][$columnKey] }}">
                                {{ $row['cells'][$columnKey] }}
                            </div>
                        @endif
                    </td>
                @endforeach
                @if($showActions ?? true)
                    <td class="text-end pe-2">
                        <div class="d-flex justify-content-end gap-1">
                            <a href="{{ route('vouchers.show', [$voucherType, $voucher]) }}"
                               class="btn btn-outline-primary btn-sm" title="View" target="_blank">
                                <i class="bi bi-printer"></i>
                            </a>
                            @if(auth()->user()->hasPermission('vouchers','edit'))
                            <a href="{{ route('vouchers.edit', [$voucherType, $voucher]) }}"
                               class="btn btn-outline-secondary btn-sm" title="Edit">
                                <i class="bi bi-pencil"></i>
                            </a>
                            @endif
                            @if($approvalReq && ($voucher->isDraft() || $voucher->isSubmitted()) && auth()->user()->hasPermission('vouchers','approve'))
                            <form method="POST" action="{{ route('vouchers.approve', [$voucherType, $voucher]) }}">
                                @csrf
                                <button type="submit" class="btn btn-outline-success btn-sm" title="Approve and post to ledger">
                                    <i class="bi bi-check-circle"></i>
                                </button>
                            </form>
                            @endif
                            @if(auth()->user()->hasPermission('vouchers','delete'))
                            <form method="POST"
                                  action="{{ route('vouchers.destroy', [$voucherType, $voucher]) }}"
                                  onsubmit="return confirm('Permanently delete voucher {{ $voucher->voucher_number ?? 'draft' }}? This removes ledger entries and cannot be undone.');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-outline-danger btn-sm" title="Delete permanently">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                            @endif
                        </div>
                    </td>
                @endif
            </tr>
            @empty
            <tr>
                <td colspan="{{ count($visibleColumns) + (($showActions ?? true) ? 1 : 0) }}" class="text-center py-5 text-muted">
                    <i class="bi bi-receipt display-5 d-block mb-3"></i>
                    <p class="{{ ($showActions ?? true) ? 'mb-3' : 'mb-0' }}">No {{ $label }} vouchers found.</p>
                    @if(($showActions ?? true) && auth()->user()->hasPermission('vouchers','create'))
                    <a href="{{ route('vouchers.create', $voucherType) }}"
                       class="btn btn-primary btn-sm">
                        <i class="bi bi-plus-circle me-1"></i>Create First {{ $label }}
                    </a>
                    @endif
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>
