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

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

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

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

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

        <details class="mc-business">
            <summary>
                <div>
                    <div class="mc-summary-main">
                        <div class="mc-title">{{ $business->name ?? 'Unknown Business' }}</div>
                        <div class="mc-phone">{{ $business->phone ?? 'N/A' }}</div>
                    </div>
                    <div class="mc-sub">{{ $sector->name ?? 'N/A' }} | {{ $month ?? 'N/A' }}</div>
                </div>
                <span class="badge bg-success">{{ $callsOfBusiness->count() }} completed</span>
            </summary>
            <div class="mc-body">
                <table class="mc-table">
                    <thead>
                        <tr>
                            <th>Call</th>
                            <th>Details</th>
                            <th>Phone</th>
                            <th>Scenario PDF</th>
                            <th>Score</th>
                            <th>Audio</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($sortedCalls as $index => $call)
                            @php
                                $totalCalls = $sortedCalls->count();
                                $scenarioDoc = $call->mysteryAssignment->sector?->getScenarioDocumentPath($call->scenario_number);
                                $displayCallNumber = $call->call_number
                                    ?? ($index + 1);
                            @endphp
                            <tr>
                                <td>Call {{ $displayCallNumber }} of {{ $call->mysteryAssignment->call_count ?? $totalCalls }} | Scenario {{ $call->scenario_number ?? 'N/A' }}</td>
                                <td>{{ $call->mysteryAssignment->business->name ?? '-' }} | {{ $call->mysteryAssignment->sector->name ?? '-' }} | {{ $call->mysteryAssignment->month ?? '-' }}</td>
                                <td>{{ $call->mysteryAssignment->business->phone ?? 'N/A' }}</td>
                                <td>
                                    @if($scenarioDoc)
                                        <a href="{{ asset('storage/' . $scenarioDoc) }}" target="_blank">View PDF</a>
                                    @else
                                        N/A
                                    @endif
                                </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>
                                <td>
                                    <a href="{{ route('platform.mystery.dashboard.edit', $call->id) }}"
                                       class="btn btn-sm btn-outline-primary">
                                        Edit
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </details>
    @empty
        <div class="mc-empty">No completed assignments found.</div>
    @endforelse

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