<div>

    <x-title>Days In Status Report</x-title>
    <div class="card shadow-sm border-0">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                    <tr>
                        <th class="ps-4 py-3 border-0">Status Name</th>
                        <th class="text-center border-0">Today</th>
                        <th class="text-center border-0">2-7 Days</th>
                        <th class="text-center border-0">8-30 Days</th>
                        <th class="text-center border-0">30+ Days</th>
                        <th class="pe-4 text-end border-0">Total</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($reportData as $row)
                        @php
                            $total = $row->range_today + $row->range_week + $row->range_month + $row->range_old;
                        @endphp
                        <tr>
                            <td class="ps-4 fw-bold text-dark">{{ $row->name }}</td>

                            {{-- Today Bucket --}}
                            <td class="text-center">
                                <span class="badge rounded-pill {{ $row->range_today > 0 ? 'bg-success-subtle text-success' : 'bg-light text-muted' }} px-3">
                                    {{ $row->range_today }}
                                </span>
                            </td>

                            {{-- 2-7 Days Bucket --}}
                            <td class="text-center">
                                <span class="badge rounded-pill {{ $row->range_week > 0 ? 'bg-info-subtle text-info' : 'bg-light text-muted' }} px-3">
                                    {{ $row->range_week }}
                                </span>
                            </td>

                            {{-- 8-30 Days Bucket --}}
                            <td class="text-center">
                                <span class="badge rounded-pill {{ $row->range_month > 0 ? 'bg-warning-subtle text-warning' : 'bg-light text-muted' }} px-3">
                                    {{ $row->range_month }}
                                </span>
                            </td>

                            {{-- 30+ Days Bucket --}}
                            <td class="text-center">
                                <span class="badge rounded-pill {{ $row->range_old > 0 ? 'bg-danger-subtle text-danger' : 'bg-light text-muted' }} px-3">
                                    {{ $row->range_old }}
                                </span>
                            </td>

                            {{-- Row Total --}}
                            <td class="pe-4 text-end fw-bold text-secondary">
                                {{ number_format($total) }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center py-5 text-muted">
                                <i class="bi bi-inbox d-block mb-2 fs-2"></i>
                                No claims found in any status.
                            </td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>