@php
    $stats = $report_stats ?? [];
    $state = $filter_state ?? [];
    $assignments = $assignments ?? null;
    $items = $assignments ? collect($assignments->items()) : collect();
    $groupedByBusiness = $items->groupBy(fn ($assignment) => $assignment->business_id ?? 'no-business');
    $statusBadgeClass = function ($status) {
        $status = strtolower((string) $status);
        if ($status === 'completed') {
            return 'success';
        }
        if ($status === 'pending') {
            return 'warning';
        }
        return 'secondary';
    };
@endphp

<div class="mt-6">
    @php
        $total = (int) ($stats['total'] ?? 0);
        $completed = (int) ($stats['completed'] ?? 0);
        $inProgress = (int) ($stats['in_progress'] ?? 0);
        $pending = (int) ($stats['pending'] ?? 0);
        $completedPct = $total > 0 ? (int) round(($completed / $total) * 100) : 0;
        $inProgressPct = $total > 0 ? (int) round(($inProgress / $total) * 100) : 0;
        $pendingPct = max(100 - $completedPct - $inProgressPct, 0);
    @endphp

    <style>
        .rs-summary {
            border: 1px solid #d8e3f6;
            border-radius: 16px;
            background: linear-gradient(145deg, #f7faff 0%, #ffffff 100%);
            box-shadow: 0 10px 24px rgba(28, 52, 94, 0.08);
            padding: 16px;
            margin-bottom: 14px;
        }
        .rs-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
        .rs-title { font-size: 18px; font-weight: 700; color: #1e335a; margin: 0; }
        .rs-period { font-size: 12px; color: #58719e; background: #edf4ff; border-radius: 999px; padding: 5px 10px; }
        .rs-grid { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 10px; margin-bottom: 12px; }
        .rs-stat { border: 1px solid #e2eaf8; border-radius: 12px; background: #fff; padding: 10px 12px; }
        .rs-label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #657693; margin-bottom: 4px; font-weight: 700; }
        .rs-value { font-size: 24px; font-weight: 800; line-height: 1; }
        .rs-value.total { color: #1f3257; }
        .rs-value.completed { color: #0f9f5c; }
        .rs-value.progress { color: #d28b00; }
        .rs-value.pending { color: #4c5f84; }
        .rs-track { height: 12px; border-radius: 999px; overflow: hidden; background: #e8eef9; display: flex; }
        .rs-seg-completed { background: linear-gradient(90deg, #25c17a, #16a34a); }
        .rs-seg-progress { background: linear-gradient(90deg, #ffd166, #f59e0b); }
        .rs-seg-pending { background: linear-gradient(90deg, #c9d7ef, #9fb4db); }
        @media (max-width: 900px) { .rs-grid { grid-template-columns: repeat(2, minmax(130px, 1fr)); } }
    </style>

    <section class="rs-summary">
        <div class="rs-head">
            <h3 class="rs-title">Assignment Status Summary</h3>
            <div class="rs-period">
                {{ $stats['year_month'] ?? '-' }}
                @if(!empty($state['sector_id']) || !empty($state['business_id'])) | Filtered @endif
            </div>
        </div>

        <div class="rs-grid">
            <div class="rs-stat">
                <div class="rs-label">Total Assignments</div>
                <div class="rs-value total">{{ $total }}</div>
            </div>
            <div class="rs-stat">
                <div class="rs-label">Completed</div>
                <div class="rs-value completed">{{ $completed }}</div>
            </div>
            <div class="rs-stat">
                <div class="rs-label">In Progress</div>
                <div class="rs-value progress">{{ $inProgress }}</div>
            </div>
            <div class="rs-stat">
                <div class="rs-label">Pending</div>
                <div class="rs-value pending">{{ $pending }}</div>
            </div>
        </div>

        <div class="rs-track" aria-label="Status distribution">
            <span class="rs-seg-completed" style="width: {{ $completedPct }}%"></span>
            <span class="rs-seg-progress" style="width: {{ $inProgressPct }}%"></span>
            <span class="rs-seg-pending" style="width: {{ $pendingPct }}%"></span>
        </div>
    </section>

    <div class="mt-4">
        <h4 class="mb-3">Business / Assignment Details</h4>

        <style>
            .rp-accordion-wrap { display: grid; gap: 12px; }
            .rp-business { border: 1px solid #e3e8f2; border-radius: 12px; background: #fff; overflow: hidden; }
            .rp-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;
            }
            .rp-business-title { font-weight: 700; font-size: 15px; color: #1f2d4d; }
            .rp-business-sub { font-size: 12px; color: #60708d; margin-top: 2px; }
            .rp-badge { font-size: 11px; padding: 4px 8px; border-radius: 999px; }
            .rp-body { padding: 12px; }
            .rp-card { border: 1px solid #e8edf6; border-radius: 10px; padding: 10px; background: #fcfdff; }
            .rp-card + .rp-card { margin-top: 8px; }
            .rp-meta { font-size: 12px; color: #556785; margin-bottom: 8px; }
            .rp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
            .rp-table th, .rp-table td { padding: 7px 8px; border-bottom: 1px solid #edf2f8; text-align: left; }
            .rp-table th { color: #61708b; font-weight: 600; background: #f8faff; }
            .rp-empty { border: 1px dashed #d9e1ee; border-radius: 10px; padding: 16px; text-align: center; color: #667593; }
        </style>

        <div class="rp-accordion-wrap">
            @forelse($groupedByBusiness as $businessAssignments)
                @php
                    $first = $businessAssignments->first();
                    $businessName = $first?->business?->name ?? 'Unknown Business';
                    $months = $businessAssignments->pluck('month')->filter()->unique()->implode(', ');
                    $sectors = $businessAssignments->pluck('sector.name')->filter()->unique()->implode(', ');
                    $businessCalls = $businessAssignments->flatMap(fn ($assignment) => $assignment->calls ?? collect());
                    $businessTotalCalls = $businessCalls->count();
                    $businessCompletedCalls = $businessCalls->filter(function ($call) {
                        return $call->mystery_status === 'completed'
                            && $call->access_status === 'completed'
                            && $call->quality_status === 'completed';
                    })->count();
                @endphp
                <details class="rp-business">
                    <summary>
                        <div>
                            <div class="rp-business-title">{{ $businessName }}</div>
                            <div class="rp-business-sub">{{ $sectors ?: 'N/A' }} | {{ $months ?: 'N/A' }}</div>
                        </div>
                        <div>
                            <span class="badge bg-primary rp-badge">{{ $businessCompletedCalls }}/{{ $businessTotalCalls }} completed</span>
                        </div>
                    </summary>
                    <div class="rp-body">
                        @foreach($businessAssignments as $assignment)
                            @php $calls = $assignment->calls->sortBy('id')->values(); @endphp
                            <div class="rp-card">
                                <div class="rp-meta">Assignment #{{ $assignment->id }} | {{ str_replace('-', '/', (string) $assignment->month) }}</div>
                                <table class="rp-table">
                                    <thead>
                                        <tr>
                                            <th>Call</th>
                                            <th>Mystery Shopper</th>
                                            <th>Access Assessor</th>
                                            <th>Quality Assessor</th>
                                            <th>Mystery Status</th>
                                            <th>Access Status</th>
                                            <th>Quality Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($calls as $call)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>{{ $call->mysteryShopper->name ?? 'N/A' }}</td>
                                                <td>{{ $call->assessorAccess->name ?? 'N/A' }}</td>
                                                <td>{{ $call->assessorQuality->name ?? 'N/A' }}</td>
                                                <td><span class="badge bg-{{ $statusBadgeClass($call->mystery_status) }}">{{ ucfirst($call->mystery_status ?? 'pending') }}</span></td>
                                                <td><span class="badge bg-{{ $statusBadgeClass($call->access_status) }}">{{ ucfirst($call->access_status ?? 'pending') }}</span></td>
                                                <td><span class="badge bg-{{ $statusBadgeClass($call->quality_status) }}">{{ ucfirst($call->quality_status ?? 'pending') }}</span></td>
                                            </tr>
                                        @empty
                                            <tr><td colspan="7" class="text-muted">No calls found</td></tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        @endforeach
                    </div>
                </details>
            @empty
                <div class="rp-empty">No assignments found for selected filters.</div>
            @endforelse
        </div>

        @if($assignments)
            <div class="mt-3">
                {{ $assignments->links('pagination::bootstrap-4') }}
            </div>
        @endif
    </div>
</div>