{{-- Drill-down timeline for a single missed caller. Returned as an HTML
     fragment and injected into the modal body on the Missed Calls report. --}}
@php
    use Illuminate\Support\Carbon;
    $answeredCount = $events->where('answered', true)->count();
@endphp

<div class="d-flex flex-wrap gap-3 mb-3">
    <div>
        <div class="text-secondary small text-uppercase" style="letter-spacing:.05em;">Number</div>
        <div class="fw-bold font-monospace">{{ $number }}</div>
    </div>
    <div>
        <div class="text-secondary small text-uppercase" style="letter-spacing:.05em;">Calls in window</div>
        <div class="fw-bold">{{ $events->count() }} <span class="text-secondary fw-normal small">({{ $answeredCount }} answered)</span></div>
    </div>
    <div>
        <div class="text-secondary small text-uppercase" style="letter-spacing:.05em;">Window</div>
        <div class="fw-bold small">{{ Carbon::parse($from)->format('d M') }} – {{ Carbon::parse($to)->format('d M Y') }}</div>
    </div>
</div>

@if($events->isEmpty())
    <div class="text-center text-secondary py-4">No call activity found for this number in the selected window.</div>
@else
<div class="table-responsive">
    <table class="table table-sm table-hover align-middle mb-0">
        <thead>
            <tr>
                <th class="ps-2">When</th>
                <th>Direction</th>
                <th>Extension</th>
                <th>Outcome</th>
                <th class="text-end">Duration</th>
                <th class="text-end pe-2">Recording</th>
            </tr>
        </thead>
        <tbody>
            @foreach($events as $e)
            <tr>
                <td class="ps-2 small text-secondary">{{ Carbon::parse($e->at)->format('d M Y H:i:s') }}</td>
                <td>
                    @if($e->direction === 'in')
                        <span class="badge bg-primary-subtle text-primary"><i data-lucide="phone-incoming" style="width:12px;height:12px;vertical-align:-1px;"></i> Inbound</span>
                    @else
                        <span class="badge bg-secondary-subtle text-secondary"><i data-lucide="phone-outgoing" style="width:12px;height:12px;vertical-align:-1px;"></i> Outbound</span>
                    @endif
                </td>
                <td class="font-monospace">{{ $e->ext ?: '—' }}</td>
                <td>
                    @if($e->answered)
                        <span class="badge bg-success-subtle text-success">Answered</span>
                    @else
                        <span class="badge bg-danger-subtle text-danger">{{ $e->disposition ?: 'No Answer' }}</span>
                    @endif
                </td>
                <td class="text-end small">{{ $e->answered ? $e->duration : '—' }}</td>
                <td class="text-end pe-2">
                    @if($e->recording)
                        <span class="text-secondary small" title="{{ $e->recording }}"><i data-lucide="mic" style="width:13px;height:13px;"></i></span>
                    @else
                        <span class="text-secondary">—</span>
                    @endif
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endif