@extends('client.layouts.dashboard')

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

@section('styles')
<style>
    .call-hero{border-radius:14px;padding:1.15rem;position:relative;overflow:hidden;color:#fff}
    .call-hero::before{content:'';position:absolute;top:-30%;right:-20%;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.06)}
    .call-hero .rh-val{font-size:1.4rem;font-weight:800;line-height:1}
    .call-hero .rh-lbl{font-size:.7rem;opacity:.8;margin-top:2px}
    .ch-total{background:linear-gradient(135deg,#4facfe,#00f2fe)}
    .ch-in{background:linear-gradient(135deg,#10b981,#34d399)}
    .ch-out{background:linear-gradient(135deg,#3b82f6,#60a5fa)}
    .ch-miss{background:linear-gradient(135deg,#ef4444,#f87171)}
    .filter-card{background:#fff;border-radius:12px;border:1px solid rgba(0,0,0,.05);box-shadow:0 1px 4px rgba(0,0,0,.04)}
    .filter-card .card-body{padding:.85rem 1rem}
    .user-chip{display:inline-flex;align-items:center;gap:6px}
    .user-chip .uc-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;color:#fff;flex-shrink:0}
    .time-cell{font-size:.75rem;color:#6b7280;line-height:1.4}
    .export-btn{border-radius:8px;font-size:.78rem;font-weight:600;padding:.45rem 1rem}
    .duration-badge{font-size:.72rem;padding:3px 8px;border-radius:6px;background:#f3f4f6;color:#374151;font-weight:600}
    .reply-badges{display:flex;flex-wrap:wrap;gap:3px}
    .reply-badge{font-size:.65rem;padding:2px 6px;border-radius:4px;font-weight:600;display:inline-flex;align-items:center;gap:2px}
    .reply-sms{background:#dbeafe;color:#1e40af}
    .reply-wa{background:#d1fae5;color:#065f46}
    .note-text{font-size:.75rem;color:#6b7280;max-width:180px;white-space:normal;line-height:1.3}
</style>
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
    <div>
        <h5 class="mb-1 fw-bold" style="color:#1f2937"><i class="bi bi-telephone-fill me-2" style="color:#4facfe"></i>Call Activity Report</h5>
        <p class="text-muted mb-0" style="font-size:.82rem">View and analyze all call activity and auto-replies triggered</p>
    </div>
    <a href="{{ route('client.call-logs.export', request()->query()) }}" class="btn export-btn text-white" style="background:linear-gradient(135deg,#4facfe,#00f2fe)">
        <i class="bi bi-file-earmark-excel me-1"></i> Export Call Data
    </a>
</div>

<!-- Stats -->
<div class="row g-3 mb-4">
    <div class="col-6 col-lg-3">
        <div class="call-hero ch-total">
            <div class="d-flex align-items-center gap-2">
                <i class="bi bi-telephone-fill" style="font-size:1.2rem;opacity:.7"></i>
                <div><div class="rh-val">{{ number_format($stats['total']) }}</div><div class="rh-lbl">Total Calls</div></div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="call-hero ch-in">
            <div class="d-flex align-items-center gap-2">
                <i class="bi bi-telephone-inbound-fill" style="font-size:1.2rem;opacity:.7"></i>
                <div><div class="rh-val">{{ number_format($stats['incoming']) }}</div><div class="rh-lbl">Incoming</div></div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="call-hero ch-out">
            <div class="d-flex align-items-center gap-2">
                <i class="bi bi-telephone-outbound-fill" style="font-size:1.2rem;opacity:.7"></i>
                <div><div class="rh-val">{{ number_format($stats['outgoing']) }}</div><div class="rh-lbl">Outgoing</div></div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="call-hero ch-miss">
            <div class="d-flex align-items-center gap-2">
                <i class="bi bi-telephone-x-fill" style="font-size:1.2rem;opacity:.7"></i>
                <div><div class="rh-val">{{ number_format($stats['missed']) }}</div><div class="rh-lbl">Missed</div></div>
            </div>
        </div>
    </div>
</div>

<!-- Call Breakdown -->
@php $totalCalls = $stats['total'] ?: 1; @endphp
<div class="row g-3 mb-4">
    <div class="col-md-6">
        <div class="stat-card">
            <div class="d-flex justify-content-between mb-2">
                <small class="fw-bold text-muted">Call Type Distribution</small>
            </div>
            <div class="progress" style="height:10px;border-radius:8px">
                <div class="progress-bar" style="width:{{ ($stats['incoming']/$totalCalls)*100 }}%;background:#10b981;border-radius:8px 0 0 8px" title="Incoming"></div>
                <div class="progress-bar" style="width:{{ ($stats['outgoing']/$totalCalls)*100 }}%;background:#3b82f6" title="Outgoing"></div>
                <div class="progress-bar" style="width:{{ ($stats['missed']/$totalCalls)*100 }}%;background:#ef4444;border-radius:0 8px 8px 0" title="Missed"></div>
            </div>
            <div class="d-flex justify-content-between mt-1">
                <small class="text-muted"><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#10b981;margin-right:4px"></span>In {{ round(($stats['incoming']/$totalCalls)*100) }}%</small>
                <small class="text-muted"><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#3b82f6;margin-right:4px"></span>Out {{ round(($stats['outgoing']/$totalCalls)*100) }}%</small>
                <small class="text-muted"><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#ef4444;margin-right:4px"></span>Miss {{ round(($stats['missed']/$totalCalls)*100) }}%</small>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="stat-card d-flex align-items-center gap-3 h-100">
            <div class="text-center flex-fill">
                <div style="font-size:1.3rem;font-weight:800;color:#ef4444">{{ round(($stats['missed']/$totalCalls)*100,1) }}%</div>
                <div style="font-size:.68rem;color:#6b7280;text-transform:uppercase">Missed Rate</div>
            </div>
            <div style="width:1px;height:40px;background:#e5e7eb"></div>
            <div class="text-center flex-fill">
                <div style="font-size:1.3rem;font-weight:800;color:#10b981">{{ $stats['incoming'] + $stats['outgoing'] }}</div>
                <div style="font-size:.68rem;color:#6b7280;text-transform:uppercase">Connected</div>
            </div>
            <div style="width:1px;height:40px;background:#e5e7eb"></div>
            <div class="text-center flex-fill">
                <div style="font-size:1.3rem;font-weight:800;color:#4facfe">{{ number_format($stats['total']) }}</div>
                <div style="font-size:.68rem;color:#6b7280;text-transform:uppercase">Total</div>
            </div>
        </div>
    </div>
</div>

<div class="filter-card mb-4">
    <div class="card-body">
        <form method="GET" action="{{ route('client.call-logs') }}" class="row g-2 align-items-end">
            <div class="col-md-2">
                <label class="form-label" style="font-size:.72rem;font-weight:600;color:#6b7280">PHONE</label>
                <input type="text" class="form-control form-control-sm" name="search" placeholder="Search phone..." value="{{ request('search') }}">
            </div>
            <div class="col-md-2">
                <label class="form-label" style="font-size:.72rem;font-weight:600;color:#6b7280">USER</label>
                <select class="form-select form-select-sm" name="user_id">
                    <option value="">All Users</option>
                    @foreach($users as $user)
                    <option value="{{ $user->id }}" {{ request('user_id') == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-1">
                <label class="form-label" style="font-size:.72rem;font-weight:600;color:#6b7280">TYPE</label>
                <select class="form-select form-select-sm" name="type">
                    <option value="">All Types</option>
                    <option value="incoming" {{ request('type') === 'incoming' ? 'selected' : '' }}>Incoming</option>
                    <option value="outgoing" {{ request('type') === 'outgoing' ? 'selected' : '' }}>Outgoing</option>
                    <option value="missed" {{ request('type') === 'missed' ? 'selected' : '' }}>Missed</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label" style="font-size:.72rem;font-weight:600;color:#6b7280">STATUS</label>
                <select class="form-select form-select-sm" name="status_key">
                    <option value="">All Statuses</option>
                    @foreach(($statusOptions ?? []) as $sk => $sl)
                    <option value="{{ $sk }}" {{ request('status_key') === $sk ? 'selected' : '' }}>{{ $sl }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label" style="font-size:.72rem;font-weight:600;color:#6b7280">NOTE SEARCH</label>
                <input type="text" class="form-control form-control-sm" name="status_note" placeholder="Search note..." value="{{ request('status_note') }}">
            </div>
            <div class="col-md-1">
                <label class="form-label" style="font-size:.72rem;font-weight:600;color:#6b7280">FROM</label>
                <input type="date" class="form-control form-control-sm" name="date_from" value="{{ request('date_from') }}">
            </div>
            <div class="col-md-1">
                <label class="form-label" style="font-size:.72rem;font-weight:600;color:#6b7280">TO</label>
                <input type="date" class="form-control form-control-sm" name="date_to" value="{{ request('date_to') }}">
            </div>
            <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="cl_has_note" {{ request()->boolean('has_note') ? 'checked' : '' }}>
                    <label class="form-check-label" for="cl_has_note" style="font-size:.7rem">Has Note</label>
                </div>
            </div>
            <div class="col-md d-flex gap-1 align-items-end">
                <button type="submit" class="btn btn-sm flex-fill text-white" style="background:linear-gradient(135deg,#4facfe,#00f2fe)"><i class="bi bi-funnel me-1"></i>Filter</button>
                <a href="{{ route('client.call-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 --}}
@php
    $clUserIds = \App\Models\User::where('client_id', $callLogs->first()?->user?->client_id ?? 0)->pluck('id');
    // Use the filtered query to get status stats
    $clStatusStatsQ = \App\Models\CallLog::whereIn('user_id', \App\Models\User::whereHas('client', fn($q) => $q->whereHas('clientAdmins', fn($q2) => $q2->where('id', auth()->guard('client_admin')->id())))->pluck('id'))
        ->whereNotNull('status_key')->where('status_key', '!=', '');
    if(request('date_from')) $clStatusStatsQ->whereDate('call_time', '>=', request('date_from'));
    if(request('date_to')) $clStatusStatsQ->whereDate('call_time', '<=', request('date_to'));
    if(request('user_id')) $clStatusStatsQ->where('user_id', request('user_id'));
    if(request('search')) $clStatusStatsQ->where('phone_number','like','%'.request('search').'%');
    $clStatusStats = $clStatusStatsQ->select('status_key', \Illuminate\Support\Facades\DB::raw('count(*) as count'))->groupBy('status_key')->pluck('count','status_key')->toArray();
    $clWithNotes = \App\Models\CallLog::whereIn('user_id', \App\Models\User::whereHas('client', fn($q) => $q->whereHas('clientAdmins', fn($q2) => $q2->where('id', auth()->guard('client_admin')->id())))->pluck('id'))
        ->whereNotNull('status_note')->where('status_note','!=','');
    if(request('date_from')) $clWithNotes->whereDate('call_time','>=',request('date_from'));
    if(request('date_to')) $clWithNotes->whereDate('call_time','<=',request('date_to'));
    $clWithNotesCount = $clWithNotes->count();
    $clStatusColorMap = [
        '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'],
    ];
    $clDefaultColor = ['bg' => '#f3f4f6', 'color' => '#6b7280', 'icon' => 'bi-tag'];
@endphp
@if(!empty($clStatusStats) || $clWithNotesCount > 0)
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body">
        <div class="d-flex align-items-center justify-content-between mb-3">
            <h6 class="mb-0 fw-bold"><i class="bi bi-bookmark-star-fill me-2" style="color:#4facfe"></i>Call Status Breakdown</h6>
            <small class="text-muted">{{ array_sum($clStatusStats) }} tagged calls</small>
        </div>
        <div class="row g-2">
            @foreach($clStatusStats as $sk => $cnt)
            @php $c = $clStatusColorMap[strtolower($sk)] ?? $clDefaultColor; $lbl = ($statusOptions[$sk] ?? ucfirst(str_replace('_',' ',$sk))); @endphp
            <div class="col-6 col-md-3 col-lg-2">
                <a href="{{ route('client.call-logs', array_merge(request()->except('status_key','page'), ['status_key' => $sk])) }}" class="text-decoration-none">
                    <div class="rounded-3 p-3 d-flex align-items-center gap-2" style="background:{{ $c['bg'] }};border:1px solid rgba(0,0,0,.05);{{ request('status_key') === $sk ? '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">{{ $lbl }}</div>
                        </div>
                    </div>
                </a>
            </div>
            @endforeach
            <div class="col-6 col-md-3 col-lg-2">
                <a href="{{ route('client.call-logs', array_merge(request()->except('has_note','page'), ['has_note' => request()->boolean('has_note') ? '' : '1'])) }}" class="text-decoration-none">
                    <div class="rounded-3 p-3 d-flex align-items-center gap-2" style="background:#f0fdf4;border:1px solid rgba(0,0,0,.05);{{ request()->boolean('has_note') ? '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($clWithNotesCount) }}</div>
                            <div style="font-size:.7rem;color:#15803d;opacity:.85">With Notes</div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>
@endif

<!-- Call Logs Table -->
<div class="table-card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5><i class="bi bi-telephone me-2" style="color:#4facfe"></i>Call Log Records</h5>
        <small class="text-muted">Showing {{ $callLogs->firstItem() ?? 0 }}-{{ $callLogs->lastItem() ?? 0 }} of {{ $callLogs->total() }}</small>
    </div>
    <div class="table-responsive">
        <table class="table">
            <thead><tr><th>User</th><th>Phone Number</th><th>Type</th><th>Status</th><th>Note</th><th>Duration</th><th>Auto-Reply</th><th>Time</th></tr></thead>
            <tbody>
                @forelse($callLogs as $log)
                <tr>
                    <td>
                        <div class="user-chip">
                            <div class="uc-avatar" style="background:{{ ['#4facfe','#10b981','#3b82f6','#ef4444','#8b5cf6','#f59e0b','#06b6d4','#ec4899'][$loop->index % 8] }}">
                                {{ strtoupper(substr($log->user->name ?? 'U', 0, 1)) }}
                            </div>
                            <div class="fw-semibold" style="font-size:.8rem">{{ $log->user->name ?? 'Unknown' }}</div>
                        </div>
                    </td>
                    <td>
                        <code style="font-size:.78rem">{{ $log->phone_number }}</code>
                        @php
                            $channelLogs = ($log->smsLogs ?? collect())->sortByDesc(fn($i) => optional($i->sent_at)->timestamp ?? optional($i->created_at)->timestamp ?? 0);
                            $smsChannelLog = $channelLogs->first(fn($i) => ($i->channel ?? 'sms') === 'sms');
                            $whatsAppChannelLog = $channelLogs->first(fn($i) => ($i->channel ?? '') === 'whatsapp');
                            $displayContactName = $log->contact_name ?: optional($smsChannelLog)->contact_name ?: optional($whatsAppChannelLog)->contact_name;
                        @endphp
                        @if($displayContactName)<br><small class="text-muted">{{ $displayContactName }}</small>@endif
                    </td>
                    <td>
                        @php
                            $nct = strtolower((string)$log->call_type);
                            if(in_array($nct,['incoming','answered_externally','wifi'],true)) $nct='incoming';
                            elseif($nct==='outgoing') $nct='outgoing';
                            else $nct='missed';
                        @endphp
                        @if($nct==='incoming')<span class="badge bg-success bg-opacity-10 text-success"><i class="bi bi-telephone-inbound me-1"></i>Incoming</span>
                        @elseif($nct==='outgoing')<span class="badge bg-primary bg-opacity-10 text-primary"><i class="bi bi-telephone-outbound me-1"></i>Outgoing</span>
                        @else<span class="badge bg-danger bg-opacity-10 text-danger"><i class="bi bi-telephone-x me-1"></i>Missed</span>@endif
                    </td>
                    <td>
                        @if($log->status_label)<span class="badge bg-{{ $log->status_badge_class }}">{{ $log->status_label }}</span>
                        @else<span class="text-muted">—</span>@endif
                    </td>
                    <td><div class="note-text">{{ $log->status_note ?: '—' }}</div></td>
                    <td>
                        @if($log->call_duration)<span class="duration-badge"><i class="bi bi-clock me-1"></i>{{ gmdate('H:i:s', $log->call_duration) }}</span>
                        @else<span class="text-muted">-</span>@endif
                    </td>
                    <td>
                        @if($log->sms_sent)
                        <div class="reply-badges">
                            @if($smsChannelLog)<span class="reply-badge reply-sms"><i class="bi bi-chat-text"></i>SMS</span>@endif
                            @if($whatsAppChannelLog)<span class="reply-badge reply-wa"><i class="bi bi-whatsapp"></i>WA</span>@endif
                            @if(!$smsChannelLog && !$whatsAppChannelLog)<span class="reply-badge reply-sms"><i class="bi bi-check"></i>Sent</span>@endif
                        </div>
                        @else<span class="badge bg-secondary bg-opacity-10 text-secondary">No</span>@endif
                    </td>
                    <td>
                        <div class="time-cell">{{ optional($log->call_time)->format('M d, Y') ?? $log->created_at->format('M d, Y') }}<br>{{ optional($log->call_time)->format('h:i A') ?? $log->created_at->format('h:i A') }}</div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="text-center py-5">
                        <i class="bi bi-telephone text-muted" style="font-size:2.5rem"></i>
                        <p class="text-muted mt-2 mb-0">No call logs found</p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($callLogs->hasPages())
    <div class="card-footer bg-transparent p-3">{{ $callLogs->withQueryString()->links() }}</div>
    @endif
</div>
@endsection