@php
    $items = collect($calls ?? []);
    $groupedBySector = $items
        ->groupBy(function ($call) {
            return $call->mysteryAssignment->sector_id ?? 'no-sector';
        })
        ->sortBy(function ($callsOfSector) {
            $sectorName = $callsOfSector->first()?->mysteryAssignment?->sector?->name;

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

<style>
    .mp-wrap { display: grid; gap: 12px; }
    .mp-sector { border: 1px solid #d9e3f1; border-radius: 14px; background: #f8fbff; overflow: hidden; }
    .mp-sector > summary {
        list-style: none;
        cursor: pointer;
        padding: 14px;
        background: #eef5ff;
    }
    .mp-sector > summary::-webkit-details-marker { display: none; }
    .mp-sector-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }
    .mp-sector-title { font-size: 18px; font-weight: 700; color: #163a70; }
    .mp-sector-copy { font-size: 12px; color: #61708b; }
    .mp-sector-body { display: grid; gap: 12px; padding: 14px; }
    .mp-business { border: 1px solid #e3e8f2; border-radius: 12px; background: #fff; overflow: hidden; }
    .mp-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;
    }
    .mp-summary-main {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }
    .mp-title { font-weight: 700; color: #1f2d4d; }
    .mp-sub { font-size: 12px; color: #61708b; }
    .mp-phone {
        font-size: 12px;
        font-weight: 500;
        color: #61708b;
    }
    .mp-body { padding: 10px; }
    .mp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .mp-table th,.mp-table td { padding: 8px; border-bottom: 1px solid #edf2f8; text-align: left; }
    .mp-table th { background: #f8faff; color: #61708b; }
    .mp-empty { border: 1px dashed #d9e1ee; border-radius: 10px; padding: 16px; text-align: center; color: #667593; }
</style>

<div class="mp-wrap">
    @forelse($groupedBySector as $callsOfSector)
        @php
            $sector = $callsOfSector->first()?->mysteryAssignment?->sector;
            $groupedByBusiness = $callsOfSector
                ->groupBy(function ($call) {
                    return $call->mysteryAssignment->business_id ?? 'no-business';
                })
                ->sortBy(function ($sectorBusinessCalls) {
                    $businessName = $sectorBusinessCalls->first()?->mysteryAssignment?->business?->name;

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

        <details class="mp-sector">
            <summary>
                <div class="mp-sector-head">
                    <div>
                        <div class="mp-sector-title">Sector: {{ $sector->name ?? 'Unknown Sector' }}</div>
                        <div class="mp-sector-copy">Pending assignments grouped by business in this sector.</div>
                    </div>
                    <span class="badge bg-warning text-dark">{{ $callsOfSector->count() }} pending</span>
                </div>
            </summary>

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

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

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