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

    $groupedByBusiness = $items->groupBy(function ($call) {
        return $call->assignment->business_id ?? 'no-business';
    });
@endphp

<style>
    .ac-wrap { display: grid; gap: 12px; }
    .ac-business { border: 1px solid #e3e8f2; border-radius: 12px; background: #fff; overflow: hidden; }
    .ac-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;
    }
    .ac-title { font-weight: 700; color: #1f2d4d; }
    .ac-sub { font-size: 12px; color: #61708b; }
    .ac-body { padding: 10px; }
    .ac-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .ac-table th,.ac-table td { padding: 8px; border-bottom: 1px solid #edf2f8; text-align: left; }
    .ac-table th { background: #f8faff; color: #61708b; }
    .ac-empty { border: 1px dashed #d9e1ee; border-radius: 10px; padding: 16px; text-align: center; color: #667593; }
</style>

<div class="ac-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="ac-business">
            <summary>
                <div>
                    <div class="ac-title">{{ $business->name ?? 'Unknown Business' }}</div>
                    <div class="ac-sub">{{ $sector->name ?? 'N/A' }} | {{ $month ?? 'N/A' }}</div>
                </div>
                <span class="badge bg-success">{{ $callsOfBusiness->count() }} completed</span>
            </summary>
            <div class="ac-body">
                <table class="ac-table">
                    <thead>
                        <tr>
                            <th>Call</th>
                            <th>Month</th>
                            <th>Sector</th>
                            <th>Business</th>
                            <th>Mystery Shopper</th>
                            <th>Score</th>
                            <th>Audio</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>{{ $call->score ?? 'N/A' }}</td>
                                <td>
                                    @if($call->audio_path)
                                        <audio controls style="width:220px; max-width:100%;">
                                            <source src="{{ asset('storage/' . $call->audio_path) }}" type="audio/mpeg">
                                        </audio>
                                    @else
                                        No Audio
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </details>
    @empty
        <div class="ac-empty">No completed access calls found.</div>
    @endforelse

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