@extends('client.layouts.dashboard')

@section('title', 'Detailed Logs')

@section('styles')
<style>
    .dl-hero{border-radius:16px;padding:1.15rem;position:relative;overflow:hidden;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.08)}
    .dl-hero::before{content:'';position:absolute;top:-25%;right:-15%;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.08)}
    .dl-hero .val{font-size:1.4rem;font-weight:800;line-height:1}
    .dl-hero .lbl{font-size:.72rem;opacity:.82;margin-top:2px}
    .bg-total{background:linear-gradient(135deg,#667eea,#764ba2)}
    .bg-calls{background:linear-gradient(135deg,#4facfe,#00f2fe)}
    .bg-sms{background:linear-gradient(135deg,#11998e,#38ef7d)}
    .bg-wa{background:linear-gradient(135deg,#128C7E,#25D366)}
    .bg-numbers{background:linear-gradient(135deg,#f093fb,#f5576c)}
    .bg-follow{background:linear-gradient(135deg,#f59e0b,#fbbf24)}
    .filter-card{background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:14px;box-shadow:0 1px 6px rgba(0,0,0,.04)}
    .filter-card .card-body{padding:1rem}
    .section-card{background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:16px;box-shadow:0 1px 8px rgba(0,0,0,.05)}
    .section-header{padding:1rem 1.15rem;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between;gap:1rem}
    .section-header h6{margin:0;font-weight:700;color:#1f2937}
    .pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:.72rem;font-weight:600}
    .pill.in{background:#dcfce7;color:#166534}
    .pill.out{background:#dbeafe;color:#1d4ed8}
    .pill.miss{background:#fee2e2;color:#b91c1c}
    .pill.sms{background:#dbeafe;color:#1d4ed8}
    .pill.wa{background:#dcfce7;color:#0f766e}
    .pill.status{background:#f3f4f6;color:#374151}
    .phone-chip{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace}
    .tiny{font-size:.75rem;color:#6b7280}
    .btn-soft{border-radius:999px;font-size:.78rem;font-weight:600;padding:.45rem 1rem}
    .timeline-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:.4rem}
    .dot-call{background:#4facfe}.dot-sms{background:#11998e}.dot-wa{background:#25D366}
    .sticky-table thead th{position:sticky;top:0;background:#fff;z-index:1}
    .compact-table td,.compact-table th{padding:.7rem .65rem;vertical-align:middle}
    .num-card{border:1px solid #eef2f7;border-radius:14px;background:linear-gradient(180deg,#fff,#fbfdff)}
    .active-card{outline:3px solid #667eea;outline-offset:2px;transform:scale(1.02);z-index:2}
</style>
@endsection
    
@section('content')
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
    <div>
        <div class="tiny mb-1"><i class="bi bi-graph-up-arrow me-1"></i>Client Reports</div>
        <h4 class="mb-1 fw-bold" style="color:#1f2937"><i class="bi bi-journal-text me-2" style="color:#667eea"></i>Detailed Logs & Number History</h4>
        <p class="text-muted mb-0">Track every user, number, call, SMS, WhatsApp, and follow-up in one place.</p>
    </div>
    <a href="{{ route('client.detailed-logs.export', request()->query()) }}" class="btn btn-success btn-soft text-white">
        <i class="bi bi-file-earmark-excel me-1"></i> Export Detailed Logs
    </a>
</div>

<div class="row g-3 mb-4">
    <div class="col-6 col-lg-2">
        <a href="{{ route('client.detailed-logs', array_merge(request()->query(), ['event_type' => ''])) }}" class="text-decoration-none">
            <div class="dl-hero bg-total {{ empty($eventType) ? 'active-card' : '' }}">
                <div class="d-flex align-items-center gap-2">
                    <i class="bi bi-layers-fill" style="font-size:1.15rem;opacity:.8"></i>
                    <div><div class="val">{{ number_format($summary->total_events ?? 0) }}</div><div class="lbl">Total Events</div></div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-6 col-lg-2">
        <a href="{{ route('client.detailed-logs', array_merge(request()->query(), ['event_type' => 'call'])) }}" class="text-decoration-none">
            <div class="dl-hero bg-calls {{ ($eventType ?? '') === 'call' ? 'active-card' : '' }}">
                <div class="d-flex align-items-center gap-2">
                    <i class="bi bi-telephone-fill" style="font-size:1.15rem;opacity:.8"></i>
                    <div><div class="val">{{ number_format($summary->total_calls ?? 0) }}</div><div class="lbl">Calls</div></div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-6 col-lg-2">
        <a href="{{ route('client.detailed-logs', array_merge(request()->query(), ['event_type' => 'sms'])) }}" class="text-decoration-none">
            <div class="dl-hero bg-sms {{ ($eventType ?? '') === 'sms' ? 'active-card' : '' }}">
                <div class="d-flex align-items-center gap-2">
                    <i class="bi bi-chat-dots-fill" style="font-size:1.15rem;opacity:.8"></i>
                    <div><div class="val">{{ number_format($summary->total_sms ?? 0) }}</div><div class="lbl">SMS</div></div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-6 col-lg-2">
        <a href="{{ route('client.detailed-logs', array_merge(request()->query(), ['event_type' => 'whatsapp'])) }}" class="text-decoration-none">
            <div class="dl-hero bg-wa {{ ($eventType ?? '') === 'whatsapp' ? 'active-card' : '' }}">
                <div class="d-flex align-items-center gap-2">
                    <i class="bi bi-whatsapp" style="font-size:1.15rem;opacity:.8"></i>
                    <div><div class="val">{{ number_format($summary->total_whatsapp ?? 0) }}</div><div class="lbl">WhatsApp</div></div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-6 col-lg-2">
        <div class="dl-hero bg-numbers">
            <div class="d-flex align-items-center gap-2">
                <i class="bi bi-phone-fill" style="font-size:1.15rem;opacity:.8"></i>
                <div><div class="val">{{ number_format($summary->unique_numbers ?? 0) }}</div><div class="lbl">Unique Numbers</div></div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-2">
        <a href="{{ route('client.detailed-logs', array_merge(request()->query(), ['event_type' => 'follow_up'])) }}" class="text-decoration-none">
            <div class="dl-hero bg-follow {{ ($eventType ?? '') === 'follow_up' ? 'active-card' : '' }}">
                <div class="d-flex align-items-center gap-2">
                    <i class="bi bi-arrow-repeat" style="font-size:1.15rem;opacity:.8"></i>
                    <div><div class="val">{{ number_format($summary->follow_ups ?? 0) }}</div><div class="lbl">Follow-ups</div></div>
                </div>
            </div>
        </a>
    </div>
</div>

@if(!empty($phoneNumber))
@php
    $selectedNumberStats = $phoneHistory->getCollection()->firstWhere('phone_number', $phoneNumber);
@endphp
<div class="section-card mb-4">
    <div class="section-header">
        <h6><i class="bi bi-telephone-forward-fill me-2" style="color:#667eea"></i>Selected Number Insights</h6>
        <span class="pill status">{{ $phoneNumber }}</span>
    </div>
    <div class="p-3">
        <div class="row g-3 align-items-center">
            <div class="col-lg-3 col-md-6">
                <div class="num-card p-3 h-100">
                    <div class="tiny text-uppercase fw-semibold mb-1">User</div>
                    <div class="fw-bold">{{ $selectedNumberStats->user_name ?? 'N/A' }}</div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="num-card p-3 h-100">
                    <div class="tiny text-uppercase fw-semibold mb-1">Total Events</div>
                    <div class="fw-bold">{{ number_format($selectedNumberStats->total_events ?? 0) }}</div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="num-card p-3 h-100">
                    <div class="tiny text-uppercase fw-semibold mb-1">First Seen</div>
                    <div class="fw-bold">{{ !empty($selectedNumberStats->first_seen) ? \Carbon\Carbon::parse($selectedNumberStats->first_seen)->format('M d, Y h:i A') : 'N/A' }}</div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="num-card p-3 h-100">
                    <div class="tiny text-uppercase fw-semibold mb-1">Last Seen</div>
                    <div class="fw-bold">{{ !empty($selectedNumberStats->last_seen) ? \Carbon\Carbon::parse($selectedNumberStats->last_seen)->format('M d, Y h:i A') : 'N/A' }}</div>
                </div>
            </div>
        </div>
        <div class="row g-2 mt-3">
            <div class="col-md-3"><span class="pill in"><i class="bi bi-telephone-inbound me-1"></i>{{ number_format($selectedNumberStats->incoming_calls ?? 0) }} Incoming</span></div>
            <div class="col-md-3"><span class="pill out"><i class="bi bi-telephone-outbound me-1"></i>{{ number_format($selectedNumberStats->outgoing_calls ?? 0) }} Outgoing</span></div>
            <div class="col-md-3"><span class="pill miss"><i class="bi bi-telephone-x me-1"></i>{{ number_format($selectedNumberStats->missed_calls ?? 0) }} Missed</span></div>
            <div class="col-md-3"><span class="pill wa"><i class="bi bi-arrow-repeat me-1"></i>{{ number_format($selectedNumberStats->follow_ups ?? 0) }} Follow-ups</span></div>
        </div>
    </div>
</div>
@endif

{{-- Multi-select dropdown styles --}}
<style>
    .ms-dropdown{position:relative}
    .ms-dropdown .ms-toggle{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:4px;background:#fff;border:1px solid #dee2e6;border-radius:6px;padding:5px 10px;font-size:.82rem;min-height:31px;transition:border-color .15s}
    .ms-dropdown .ms-toggle:hover{border-color:#86b7fe}
    .ms-dropdown .ms-toggle .ms-badge{background:#667eea;color:#fff;border-radius:999px;font-size:.68rem;padding:1px 7px;font-weight:700}
    .ms-dropdown .ms-panel{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:100;margin-top:4px;max-height:260px;overflow:hidden}
    .ms-dropdown.open .ms-panel{display:block}
    .ms-dropdown .ms-search{border:0;border-bottom:1px solid #f1f5f9;width:100%;padding:8px 10px;font-size:.8rem;outline:none}
    .ms-dropdown .ms-list{max-height:200px;overflow-y:auto;padding:4px 0}
    .ms-dropdown .ms-item{display:flex;align-items:center;gap:6px;padding:5px 10px;cursor:pointer;font-size:.8rem;transition:background .1s}
    .ms-dropdown .ms-item:hover{background:#f8f9fa}
    .ms-dropdown .ms-item input[type="checkbox"]{margin:0;accent-color:#667eea}
    .ms-dropdown .ms-actions{border-top:1px solid #f1f5f9;padding:6px 10px;display:flex;justify-content:space-between;align-items:center}
    .ms-dropdown .ms-clear{font-size:.72rem;color:#ef4444;cursor:pointer;font-weight:600}
    .ms-dropdown .ms-clear:hover{text-decoration:underline}
    .ms-dropdown .ms-count{font-size:.72rem;color:#6b7280}
</style>

<div class="filter-card mb-4">
    <div class="card-body">
        <form method="GET" action="{{ route('client.detailed-logs') }}" id="filterForm" class="row g-2 align-items-end">
            <input type="hidden" name="event_type" value="{{ $eventType ?? '' }}">

            {{-- Multi-select: USERS --}}
            <div class="col-md-2">
                <label class="form-label tiny fw-semibold">USERS</label>
                <div class="ms-dropdown" data-name="user_id[]">
                    <div class="ms-toggle" onclick="toggleMsDropdown(this)">
                        <span class="ms-label">{{ is_array($userId) && count($userId) > 0 ? '' : 'All Users' }}</span>
                        @if(is_array($userId) && count($userId) > 0)
                            <span class="ms-badge">{{ count($userId) }} selected</span>
                        @endif
                        <i class="bi bi-chevron-down" style="font-size:.7rem;opacity:.5"></i>
                    </div>
                    <div class="ms-panel">
                        <input type="text" class="ms-search" placeholder="Search users..." oninput="filterMsItems(this)">
                        <div class="ms-list">
                            @foreach($users as $user)
                            <label class="ms-item">
                                <input type="checkbox" name="user_id[]" value="{{ $user->id }}"
                                    {{ is_array($userId) && in_array($user->id, $userId) ? 'checked' : '' }}>
                                <span>{{ $user->name }}</span>
                            </label>
                            @endforeach
                        </div>
                        <div class="ms-actions">
                            <span class="ms-count">{{ $users->count() }} users</span>
                            <span class="ms-clear" onclick="clearMsDropdown(this)">Clear</span>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Phone Number --}}
            <div class="col-md-2">
                <label class="form-label tiny fw-semibold">NUMBER</label>
                <input type="text" class="form-control form-control-sm phone-chip" name="phone_number" value="{{ $phoneNumber }}" placeholder="Search number...">
            </div>

            {{-- Multi-select: STATUSES --}}
            <div class="col-md-2">
                <label class="form-label tiny fw-semibold">STATUS</label>
                <div class="ms-dropdown" data-name="status_key[]">
                    <div class="ms-toggle" onclick="toggleMsDropdown(this)">
                        <span class="ms-label">{{ is_array($statusKey) && count($statusKey) > 0 ? '' : 'All Statuses' }}</span>
                        @if(is_array($statusKey) && count($statusKey) > 0)
                            <span class="ms-badge">{{ count($statusKey) }} selected</span>
                        @endif
                        <i class="bi bi-chevron-down" style="font-size:.7rem;opacity:.5"></i>
                    </div>
                    <div class="ms-panel">
                        <input type="text" class="ms-search" placeholder="Search status..." oninput="filterMsItems(this)">
                        <div class="ms-list">
                            @foreach(($statusOptions ?? []) as $key => $label)
                            <label class="ms-item">
                                <input type="checkbox" name="status_key[]" value="{{ $key }}"
                                    {{ is_array($statusKey) && in_array($key, $statusKey) ? 'checked' : '' }}>
                                <span>{{ $label }}</span>
                            </label>
                            @endforeach
                        </div>
                        <div class="ms-actions">
                            <span class="ms-count">{{ count($statusOptions ?? []) }} statuses</span>
                            <span class="ms-clear" onclick="clearMsDropdown(this)">Clear</span>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Status Note --}}
            <div class="col-md-2">
                <label class="form-label tiny fw-semibold">STATUS NOTE</label>
                <input type="text" class="form-control form-control-sm" name="status_note" value="{{ $statusNote ?? '' }}" placeholder="Search note...">
            </div>

            {{-- Date From --}}
            <div class="col-md-1">
                <label class="form-label tiny fw-semibold">FROM</label>
                <input type="date" class="form-control form-control-sm" name="date_from" value="{{ $dateFrom }}">
            </div>

            {{-- Date To --}}
            <div class="col-md-1">
                <label class="form-label tiny fw-semibold">TO</label>
                <input type="date" class="form-control form-control-sm" name="date_to" value="{{ $dateTo }}">
            </div>

            {{-- Has Note checkbox --}}
            <div class="col-md-1 d-flex flex-column justify-content-end">
                <div class="form-check mb-1">
                    <input class="form-check-input" type="checkbox" name="has_note" value="1" id="has_note" {{ !empty($hasNote) ? 'checked' : '' }}>
                    <label class="form-check-label tiny" for="has_note">Has Note</label>
                </div>
            </div>

            {{-- Filter + Clear buttons --}}
            <div class="col-md-1 d-flex align-items-end gap-1">
                <button type="submit" class="btn btn-primary btn-sm flex-fill"><i class="bi bi-funnel me-1"></i> Filter</button>
                <a href="{{ route('client.detailed-logs') }}" class="btn btn-outline-secondary btn-sm" title="Clear"><i class="bi bi-x-lg"></i></a>
            </div>
        </form>
    </div>
</div>

{{-- Status Breakdown Card --}}
@if(!empty($statusStats) && count($statusStats) > 0)
@php
    $statusColorMap = [
        'callback'       => ['bg' => '#dbeafe', 'color' => '#1d4ed8', 'icon' => 'bi-telephone-forward'],
        'follow_up'      => ['bg' => '#fef3c7', 'color' => '#b45309', 'icon' => 'bi-arrow-repeat'],
        'interested'     => ['bg' => '#dcfce7', 'color' => '#15803d', 'icon' => 'bi-hand-thumbs-up'],
        'not_interested' => ['bg' => '#fee2e2', 'color' => '#b91c1c', 'icon' => 'bi-hand-thumbs-down'],
        'converted'      => ['bg' => '#d1fae5', 'color' => '#065f46', 'icon' => 'bi-trophy'],
        'closed'         => ['bg' => '#e5e7eb', 'color' => '#374151', 'icon' => 'bi-check-circle'],
    ];
    $defaultColor = ['bg' => '#f3f4f6', 'color' => '#6b7280', 'icon' => 'bi-tag'];
@endphp
<div class="section-card mb-4">
    <div class="section-header">
        <h6><i class="bi bi-bookmark-star-fill me-2" style="color:#667eea"></i>Call Status Breakdown</h6>
        <span class="tiny">{{ array_sum($statusStats) }} tagged calls</span>
    </div>
    <div class="p-3">
        <div class="row g-2">
            @foreach($statusStats as $sk => $cnt)
            @php $c = $statusColorMap[strtolower($sk)] ?? $defaultColor; $label = ($statusOptions[$sk] ?? ucfirst(str_replace('_',' ',$sk))); @endphp
            <div class="col-6 col-md-3 col-lg-2">
                @php
                    $currentStatusKeys = is_array($statusKey) ? $statusKey : [];
                    $isActive = in_array($sk, $currentStatusKeys);
                    // Toggle: if active remove it, if not active add it
                    if ($isActive) {
                        $newKeys = array_values(array_diff($currentStatusKeys, [$sk]));
                    } else {
                        $newKeys = array_merge($currentStatusKeys, [$sk]);
                    }
                    $linkParams = array_merge(request()->except('status_key', 'page'), ['status_key' => $newKeys]);
                @endphp
                <a href="{{ route('client.detailed-logs', $linkParams) }}" class="text-decoration-none">
                    <div class="rounded-3 p-3 h-100 d-flex align-items-center gap-2" style="background:{{ $c['bg'] }};border:1px solid rgba(0,0,0,.05);{{ $isActive ? 'outline:2px solid '.$c['color'].';' : '' }}">
                        <i class="bi {{ $c['icon'] }}" style="font-size:1.1rem;color:{{ $c['color'] }}"></i>
                        <div>
                            <div class="fw-bold" style="color:{{ $c['color'] }};font-size:1.1rem">{{ number_format($cnt) }}</div>
                            <div style="font-size:.7rem;color:{{ $c['color'] }};opacity:.85">{{ $label }}</div>
                        </div>
                    </div>
                </a>
            </div>
            @endforeach
            {{-- With Notes card --}}
            @php
                $withNoteCount = \App\Models\CallLog::whereIn('user_id', \App\Models\User::where('client_id', $client->id)->pluck('id'))
                    ->whereBetween('call_time', [$dateFrom.' 00:00:00', $dateTo.' 23:59:59'])
                    ->whereNotNull('status_note')->where('status_note','!=','')->count();
            @endphp
            <div class="col-6 col-md-3 col-lg-2">
                <a href="{{ route('client.detailed-logs', array_merge(request()->except('has_note','page'), ['has_note' => $hasNote ? '' : '1'])) }}" class="text-decoration-none">
                    <div class="rounded-3 p-3 h-100 d-flex align-items-center gap-2" style="background:#f0fdf4;border:1px solid rgba(0,0,0,.05);{{ !empty($hasNote) ? 'outline:2px solid #15803d;' : '' }}">
                        <i class="bi bi-journal-text" style="font-size:1.1rem;color:#15803d"></i>
                        <div>
                            <div class="fw-bold" style="color:#15803d;font-size:1.1rem">{{ number_format($withNoteCount) }}</div>
                            <div style="font-size:.7rem;color:#15803d;opacity:.85">With Notes</div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>
@endif

<div class="row g-3 mb-4">
    <div class="col-lg-8">
        <div class="section-card h-100">
            <div class="section-header">
                <h6><i class="bi bi-bar-chart-line-fill me-2" style="color:#667eea"></i>User-wise Statistics</h6>
                <span class="tiny">{{ $userStats->count() }} users</span>
            </div>
            <div class="table-responsive">
                <table class="table compact-table mb-0">
                    <thead>
                        <tr>
                            <th>User</th>
                            <th class="text-center">Calls</th>
                            <th class="text-center">In</th>
                            <th class="text-center">Out</th>
                            <th class="text-center">Missed</th>
                            <th class="text-center">SMS</th>
                            <th class="text-center">WA</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($userStats as $u)
                        <tr>
                            <td>
                                <div class="fw-semibold">{{ $u->name }}</div>
                                <small class="text-muted">{{ $u->email }}</small>
                            </td>
                            <td class="text-center">{{ number_format($u->calls_total_count) }}</td>
                            <td class="text-center"><span class="pill in">{{ number_format($u->calls_incoming_count) }}</span></td>
                            <td class="text-center"><span class="pill out">{{ number_format($u->calls_outgoing_count) }}</span></td>
                            <td class="text-center"><span class="pill miss">{{ number_format($u->calls_missed_count) }}</span></td>
                            <td class="text-center"><span class="pill sms">{{ number_format($u->sms_count) }}</span></td>
                            <td class="text-center"><span class="pill wa">{{ number_format($u->whatsapp_count) }}</span></td>
                        </tr>
                        @empty
                        <tr><td colspan="7" class="text-center text-muted py-4">No user statistics found</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="section-card h-100">
            <div class="section-header">
                <h6><i class="bi bi-stars me-2" style="color:#f59e0b"></i>What this shows</h6>
            </div>
            <div class="p-3">
                <div class="d-flex gap-2 mb-3"><i class="bi bi-check-circle-fill text-success mt-1"></i><div><div class="fw-semibold">Per-user progress</div><div class="tiny">See how many calls, SMS, and WhatsApp messages each user generated.</div></div></div>
                <div class="d-flex gap-2 mb-3"><i class="bi bi-phone-fill text-primary mt-1"></i><div><div class="fw-semibold">Unique number history</div><div class="tiny">Same number is grouped so repeated records appear as one history trail, not clutter.</div></div></div>
                <div class="d-flex gap-2 mb-3"><i class="bi bi-arrow-repeat text-warning mt-1"></i><div><div class="fw-semibold">Follow-ups</div><div class="tiny">Spot callback and follow-up activity for better tracking.</div></div></div>
                <div class="d-flex gap-2"><i class="bi bi-file-earmark-excel-fill text-success mt-1"></i><div><div class="fw-semibold">Exportable</div><div class="tiny">Download the same filtered data for reporting or audits.</div></div></div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3 mb-4">
    <div class="col-lg-5">
        <div class="section-card h-100">
            <div class="section-header">
                <h6><i class="bi bi-telephone-forward-fill me-2" style="color:#4facfe"></i>Grouped Number History</h6>
            </div>
            <div class="table-responsive">
                <table class="table compact-table mb-0 sticky-table">
                    <thead>
                        <tr>
                            <th>User</th>
                            <th>Number</th>
                            <th class="text-center">Total</th>
                            <th>Last Seen</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($phoneHistory as $row)
                        <tr>
                            <td>
                                <div class="fw-semibold" style="font-size:.82rem">{{ $row->user_name ?? 'N/A' }}</div>
                            </td>
                            <td>
                                <span class="phone-chip">{{ $row->phone_number }}</span>
                                @if(!empty($row->contact_name) && $row->contact_name !== '—')
                                <div class="tiny text-muted">{{ $row->contact_name }}</div>
                                @endif
                            </td>
                            <td class="text-center"><span class="pill status">{{ number_format($row->total_events) }}</span></td>
                            <td class="tiny">{{ \Carbon\Carbon::parse($row->last_seen)->format('M d, Y h:i A') }}</td>
                            <td class="text-end">
                                <a href="{{ route('client.detailed-logs', array_merge(request()->query(), ['phone_number' => $row->phone_number])) }}" class="btn btn-sm btn-outline-primary btn-soft">
                                    <i class="bi bi-eye me-1"></i> View History
                                </a>
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="5" class="text-center text-muted py-4">No grouped history found</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="p-3 border-top">{{ $phoneHistory->appends(request()->query())->links() }}</div>
        </div>
    </div>

    <div class="col-lg-7">
        <div class="section-card h-100">
            <div class="section-header">
                <h6><i class="bi bi-clock-history me-2" style="color:#667eea"></i>Detailed Timeline</h6>
                @if(!empty($phoneNumber))<span class="pill status">Filtered: {{ $phoneNumber }}</span>@endif
            </div>
            <div class="table-responsive">
                <table class="table compact-table mb-0 sticky-table">
                    <thead>
                        <tr>
                            <th>Time</th>
                            <th>User</th>
                            <th>Number</th>
                            <th>Type</th>
                            <th>Status</th>
                            <th>Details</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($numberHistory as $row)
                        <tr>
                            <td class="tiny">{{ \Carbon\Carbon::parse($row->event_time)->format('M d, Y h:i A') }}</td>
                            <td>
                                <div class="fw-semibold" style="font-size:.82rem">{{ $row->user_name ?? 'N/A' }}</div>
                            </td>
                            <td>
                                <span class="phone-chip">{{ $row->phone_number }}</span>
                                @if(!empty($row->contact_name) && $row->contact_name !== '—')
                                <div class="tiny text-muted" style="font-size: 0.7rem;">{{ $row->contact_name }}</div>
                                @endif
                            </td>
                            <td>
                                @if($row->event_type === 'call')
                                <span class="pill out"><i class="bi bi-telephone me-1"></i>CALL</span>
                                @elseif($row->event_type === 'whatsapp')
                                <span class="pill wa"><i class="bi bi-whatsapp me-1"></i>WA</span>
                                @else
                                <span class="pill sms"><i class="bi bi-chat-dots me-1"></i>SMS</span>
                                @endif
                            </td>
                            <td>
                                @if($row->event_type === 'call')
                                    @if($row->direction === 'incoming')<span class="pill in">Incoming</span>
                                    @elseif($row->direction === 'outgoing')<span class="pill out">Outgoing</span>
                                    @else<span class="pill miss">Missed</span>@endif
                                @else
                                    @if($row->message_status === 'sent')<span class="pill in">Sent</span>
                                    @elseif($row->message_status === 'pending')<span class="pill status">Pending</span>
                                    @else<span class="pill miss">Failed</span>@endif
                                @endif
                            </td>
                            <td>
                                @if($row->event_type === 'call')
                                    <div class="tiny">
                                        <strong>Call status:</strong> {{ $row->call_status ? ucfirst(str_replace('_', ' ', $row->call_status)) : '—' }}<br>
                                        <strong>Duration:</strong> {{ (int) ($row->call_duration ?? 0) }} sec
                                        @if(!empty($row->status_note))<br><strong>Note:</strong> {{ $row->status_note }}@endif
                                    </div>
                                @else
                                    <div class="tiny text-truncate" style="max-width:320px" title="{{ $row->message ?? '' }}">
                                        {{ $row->message ?? '—' }}
                                    </div>
                                @endif
                            </td>
                            <td class="text-end">
                                <a href="{{ route('client.detailed-logs', array_merge(request()->query(), ['phone_number' => $row->phone_number, 'user_id' => $row->user_id])) }}" class="btn btn-sm btn-outline-secondary btn-soft">
                                    <i class="bi bi-funnel me-1"></i> Focus
                                </a>
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="7" class="text-center text-muted py-4">No detailed events found</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="p-3 border-top">{{ $numberHistory->appends(request()->query())->links() }}</div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // ═══ Multi-select dropdown logic ═══

    function toggleMsDropdown(toggleEl) {
        const dropdown = toggleEl.closest('.ms-dropdown');
        const wasOpen = dropdown.classList.contains('open');

        // Close all other dropdowns first
        document.querySelectorAll('.ms-dropdown.open').forEach(d => {
            if (d !== dropdown) d.classList.remove('open');
        });

        dropdown.classList.toggle('open', !wasOpen);

        // Focus search when opening
        if (!wasOpen) {
            const search = dropdown.querySelector('.ms-search');
            if (search) setTimeout(() => search.focus(), 50);
        }
    }

    function filterMsItems(searchEl) {
        const list = searchEl.closest('.ms-panel').querySelector('.ms-list');
        const query = searchEl.value.toLowerCase();
        list.querySelectorAll('.ms-item').forEach(item => {
            const text = item.querySelector('span').textContent.toLowerCase();
            item.style.display = text.includes(query) ? '' : 'none';
        });
    }

    function clearMsDropdown(clearBtn) {
        const dropdown = clearBtn.closest('.ms-dropdown');
        dropdown.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = false);
        updateMsBadge(dropdown);
    }

    function updateMsBadge(dropdown) {
        const checked = dropdown.querySelectorAll('input[type="checkbox"]:checked').length;
        const toggle = dropdown.querySelector('.ms-toggle');
        const label = toggle.querySelector('.ms-label');
        let badge = toggle.querySelector('.ms-badge');

        if (checked > 0) {
            label.textContent = '';
            if (!badge) {
                badge = document.createElement('span');
                badge.className = 'ms-badge';
                toggle.insertBefore(badge, toggle.querySelector('.bi'));
            }
            badge.textContent = checked + ' selected';
        } else {
            label.textContent = dropdown.dataset.name.includes('user') ? 'All Users' : 'All Statuses';
            if (badge) badge.remove();
        }
    }

    // Listen to checkbox changes inside dropdowns
    document.querySelectorAll('.ms-dropdown input[type="checkbox"]').forEach(cb => {
        cb.addEventListener('change', function() {
            updateMsBadge(this.closest('.ms-dropdown'));
        });
    });

    // Close dropdown when clicking outside
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.ms-dropdown')) {
            document.querySelectorAll('.ms-dropdown.open').forEach(d => d.classList.remove('open'));
        }
    });
</script>
@endsection