@php
    $business = $call->assignment->business ?? null;
    $sector = $call->assignment->sector ?? null;
    $orderedCalls = $call->assignment->calls->sortBy(fn ($assignmentCall) => $assignmentCall->call_number ?? $assignmentCall->id)->values();
    $callPosition = $orderedCalls->search(fn ($assignmentCall) => (int) $assignmentCall->id === (int) $call->id);
    $callNumber = $call->call_number ?? ($callPosition !== false ? $callPosition + 1 : null);
    $totalCalls = $orderedCalls->count();
    $scenarioDoc = $sector?->getScenarioDocumentPath($call->scenario_number);
@endphp

<style>
    .mystery-call-meta {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px;
    }
    .mystery-call-meta-card {
        border: 1px solid #e6ebf4;
        border-radius: 14px;
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        padding: 16px 18px;
        box-shadow: 0 4px 14px rgba(31, 45, 77, 0.05);
    }
    .mystery-call-meta-label {
        display: inline-block;
        margin-bottom: 8px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #6a7891;
    }
    .mystery-call-meta-value {
        font-size: 22px;
        line-height: 1.2;
        font-weight: 700;
        color: #1f2d4d;
        word-break: break-word;
    }
    .mystery-call-meta-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        border-radius: 10px;
        background: #edf4ff;
        color: #2457a6;
        font-weight: 600;
        text-decoration: none;
    }
    .mystery-call-meta-link:hover {
        background: #e1ecff;
        color: #1d4687;
        text-decoration: none;
    }
    .mystery-call-meta-empty {
        font-size: 18px;
        font-weight: 700;
        color: #7a869d;
    }
</style>

<div class="mb-4 p-3 border rounded bg-light">
    <div><strong>{{ $business->name ?? 'N/A' }} | {{ $sector->name ?? 'N/A' }} | {{ $call->assignment->month ?? 'N/A' }} | Call {{ $callNumber ?? 'N/A' }} of {{ $totalCalls ?: 'N/A' }} | Scenario {{ $call->scenario_number ?? 'N/A' }}</strong></div>
</div>

<div class="mb-4 mystery-call-meta">
    <div class="mystery-call-meta-card">
        <div class="mystery-call-meta-label">Phone Number To Call</div>
        <div class="mystery-call-meta-value">{{ $business->phone ?? 'N/A' }}</div>
    </div>
    <div class="mystery-call-meta-card">
        <div class="mystery-call-meta-label">Scenario Brief</div>
        <div>
            @if($scenarioDoc)
                <a class="mystery-call-meta-link" href="{{ asset('storage/' . $scenarioDoc) }}" target="_blank">
                    View Scenario {{ $call->scenario_number ?? '' }} PDF
                </a>
            @else
                <div class="mystery-call-meta-empty">N/A</div>
            @endif
        </div>
    </div>
</div>

@if($call->audio_path)
    <div class="mb-4">
        <label><strong>Audio Preview:</strong></label>
        <audio controls style="width: 100%;">
            <source src="{{ asset('storage/' . $call->audio_path) }}" type="audio/mpeg">
            Your browser does not support the audio tag.
        </audio>
    </div>
@else
    <p><strong>No audio uploaded yet.</strong></p>
@endif