@php
    $items = collect($calls ?? []);

    $groupedByBusiness = $items
        ->groupBy(function ($call) {
            return $call->assignment->business_id ?? 'no-business';
        })
        ->sortBy(function ($callsOfBusiness) {
            $businessName = $callsOfBusiness->first()?->assignment?->business?->name;

            return $businessName ? mb_strtolower($businessName) : 'zzz';
        });
@endphp

<style>
    .qp-wrap { display: grid; gap: 12px; }
    .qp-business { border: 1px solid #e3e8f2; border-radius: 12px; background: #fff; overflow: hidden; }
    .qp-business > summary {
        list-style: none; cursor: pointer; padding: 12px 14px;
        display: flex; justify-content: space-between; align-items: center;
        background: #f8faff; border-bottom: 1px solid #edf1f7;
    }
    .qp-title { font-weight: 700; color: #1f2d4d; }
    .qp-sub { font-size: 12px; color: #61708b; }
    .qp-body { padding: 10px; }
    .qp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .qp-table th,.qp-table td { padding: 8px; border-bottom: 1px solid #edf2f8; text-align: left; }
    .qp-table th { background: #f8faff; color: #61708b; }
    .qp-empty { border: 1px dashed #d9e1ee; border-radius: 10px; padding: 16px; text-align: center; color: #667593; }
</style>

<div class="qp-wrap">
    @forelse($groupedByBusiness as $callsOfBusiness)
        @php
            $first = $callsOfBusiness->first();
            $business = $first?->assignment?->business;
            $sector = $first?->assignment?->sector;
            $month = $first?->assignment?->month;
            $sortedCalls = $callsOfBusiness->sortBy(function ($call) {
                return sprintf('%010d-%010d', $call->call_number ?? 9999999999, $call->id ?? 9999999999);
            })->values();
        @endphp

        <details class="qp-business">
            <summary>
                <div>
                    <div class="qp-title">{{ $business->name ?? 'Unknown Business' }}</div>
                    <div class="qp-sub">{{ $sector->name ?? 'N/A' }} | {{ $month ?? 'N/A' }}</div>
                </div>
                <span class="badge bg-warning text-dark">{{ $callsOfBusiness->count() }} pending</span>
            </summary>
            <div class="qp-body">
                <table class="qp-table">
                    <thead>
                        <tr>
                            <th>Call</th>
                            <th>Month</th>
                            <th>Sector</th>
                            <th>Business</th>
                            <th>Mystery Shopper</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($sortedCalls as $index => $call)
                            @php
                                $displayCallNumber = $call->call_number
                                    ?? ($index + 1);
                            @endphp
                            <tr>
                                <td>{{ $displayCallNumber }}</td>
                                <td>{{ $call->assignment->month ?? '-' }}</td>
                                <td>{{ $call->assignment->sector->name ?? '-' }}</td>
                                <td>{{ $call->assignment->business->name ?? '-' }}</td>
                                <td>{{ $call->mysteryShopper->name ?? 'N/A' }}</td>
                                <td><a href="{{ route('platform.assessor-quality.edit', $call->id) }}" class="btn btn-sm btn-primary">Edit</a></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </details>
    @empty
        <div class="qp-empty">No pending quality calls found.</div>
    @endforelse

    @if(isset($businessesPage) && $businessesPage)
        <div>{{ $businessesPage->links('pagination::bootstrap-4') }}</div>
    @endif
</div>