@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin mb-3">
    <div>
        <h4 class="mb-0">Automatic Calling — Reports</h4>
        <div class="text-secondary small mt-1">Campaign performance, agent metrics, and problem analysis.</div>
    </div>
</div>

{{-- Report tabs --}}
<div class="card mb-3">
    <div class="card-body py-2 d-flex flex-wrap gap-2 align-items-center">
        @php $tabs = ['summary'=>'Campaign Summary','agents'=>'Agent Performance','not-connected'=>'Not Connected','outcomes'=>'Outcomes','callbacks'=>'Callbacks']; @endphp
        @foreach($tabs as $key => $label)
            <a href="{{ route('dialer.reports', ['tab' => $key, 'campaign_id' => $selectedCampaign, 'from' => $from, 'to' => $to]) }}"
               class="btn btn-sm {{ $activeTab === $key ? 'btn-primary' : 'btn-outline-secondary' }}">
                {{ $label }}
            </a>
        @endforeach
        <span class="vr mx-2"></span>
        <form method="GET" class="d-flex gap-2 align-items-center">
            <input type="hidden" name="tab" value="{{ $activeTab }}">
            <select name="campaign_id" class="form-select form-select-sm" style="width:auto;">
                <option value="">All Campaigns</option>
                @foreach($campaigns as $c)
                    <option value="{{ $c->id }}" @selected($selectedCampaign == $c->id)>{{ $c->name }}</option>
                @endforeach
            </select>
            <input type="date" name="from" class="form-control form-control-sm" value="{{ $from }}" style="width:auto;">
            <input type="date" name="to" class="form-control form-control-sm" value="{{ $to }}" style="width:auto;">
            <button type="submit" class="btn btn-sm btn-outline-primary">Apply</button>
        </form>
    </div>
</div>

{{-- Report content --}}
@if($activeTab === 'summary' && isset($summary))
<div class="card">
    <div class="card-header fw-semibold">Campaign Summary</div>
    <div class="card-body">
        <div class="row g-3">
            @php $s = $summary; @endphp
            <div class="col-md-3"><div class="text-muted small">Total Attempts</div><div class="fs-5 fw-bold">{{ number_format($s->total_attempts ?? 0) }}</div></div>
            <div class="col-md-3"><div class="text-muted small">Customers Answered</div><div class="fs-5 fw-bold text-success">{{ number_format($s->customers_answered ?? 0) }}</div></div>
            <div class="col-md-3"><div class="text-muted small">Agents Connected</div><div class="fs-5 fw-bold text-primary">{{ number_format($s->agent_connected ?? 0) }}</div></div>
            <div class="col-md-3"><div class="text-muted small">Not Connected</div><div class="fs-5 fw-bold text-danger">{{ number_format($s->not_connected ?? 0) }} ({{ $s->not_connected_pct ?? 0 }}%)</div></div>
            <div class="col-md-3"><div class="text-muted small">No Answer</div><div>{{ number_format($s->no_answer ?? 0) }}</div></div>
            <div class="col-md-3"><div class="text-muted small">Busy</div><div>{{ number_format($s->busy ?? 0) }}</div></div>
            <div class="col-md-3"><div class="text-muted small">Failed</div><div>{{ number_format($s->failed ?? 0) }}</div></div>
            <div class="col-md-3"><div class="text-muted small">DNC Requests</div><div>{{ number_format($s->dnc_requests ?? 0) }}</div></div>
            <div class="col-md-3"><div class="text-muted small">Avg Wait (sec)</div><div>{{ $s->avg_wait_seconds ? round($s->avg_wait_seconds) : '—' }}</div></div>
            <div class="col-md-3"><div class="text-muted small">Max Wait (sec)</div><div>{{ $s->max_wait_seconds ?? '—' }}</div></div>
            <div class="col-md-3"><div class="text-muted small">Avg Talk (sec)</div><div>{{ $s->avg_talk_seconds ? round($s->avg_talk_seconds) : '—' }}</div></div>
            <div class="col-md-3"><div class="text-muted small">Callbacks Created</div><div>{{ number_format($s->callbacks_created ?? 0) }}</div></div>
        </div>
    </div>
</div>
@endif

@if($activeTab === 'agents' && isset($agents))
<div class="card">
    <div class="card-header fw-semibold">Agent Performance</div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0 align-middle">
                <thead><tr><th>Agent</th><th>Connected</th><th>Desk Phone</th><th>Webphone</th><th>Softphone</th><th>Total Talk</th><th>Avg Talk</th></tr></thead>
                <tbody>
                    @forelse($agents as $a)
                    <tr>
                        <td class="fw-semibold">Agent #{{ $a->connected_agent_id }}</td>
                        <td>{{ $a->calls_connected }}</td>
                        <td>{{ $a->desk_phone_calls }}</td>
                        <td>{{ $a->webphone_calls }}</td>
                        <td>{{ $a->softphone_calls }}</td>
                        <td>{{ gmdate('H:i:s', $a->total_talk_seconds ?? 0) }}</td>
                        <td>{{ $a->avg_talk_seconds ? round($a->avg_talk_seconds) . 's' : '—' }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="7" class="text-center text-muted py-4">No agent data yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endif

@if($activeTab === 'not-connected' && isset($notConnected))
<div class="card">
    <div class="card-header fw-semibold text-danger">Answered but Not Connected</div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0 align-middle">
                <thead><tr><th>Date</th><th>Customer</th><th>Number</th><th>Reason</th><th>Wait (sec)</th></tr></thead>
                <tbody>
                    @forelse($notConnected as $nc)
                    <tr>
                        <td class="small">{{ \Carbon\Carbon::parse($nc->created_at)->format('d M H:i') }}</td>
                        <td>{{ $nc->customer_name ?? '—' }}</td>
                        <td class="small">{{ $nc->phone_number_dialled }}</td>
                        <td><span class="badge bg-danger-subtle text-danger">{{ ucfirst(str_replace('_', ' ', $nc->not_connected_reason ?? 'unknown')) }}</span></td>
                        <td>{{ $nc->customer_waiting_seconds ?? '—' }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="5" class="text-center text-muted py-4">No failed connections recorded.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endif

@if($activeTab === 'outcomes' && isset($outcomes))
<div class="card">
    <div class="card-header fw-semibold">Call Outcomes</div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0 align-middle">
                <thead><tr><th>Outcome</th><th>Type</th><th>Count</th></tr></thead>
                <tbody>
                    @forelse($outcomes as $o)
                    <tr>
                        <td class="fw-semibold">{{ $o->label }}</td>
                        <td><span class="badge bg-{{ $o->is_system ? 'secondary' : 'primary' }}-subtle text-{{ $o->is_system ? 'secondary' : 'primary' }}">{{ $o->is_system ? 'System' : 'Conversation' }}</span></td>
                        <td>{{ $o->count }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="3" class="text-center text-muted py-4">No outcomes recorded yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endif

@if($activeTab === 'callbacks' && isset($callbackStats))
<div class="card">
    <div class="card-header fw-semibold">Callback Summary</div>
    <div class="card-body">
        @php $cs = $callbackStats; @endphp
        <div class="row g-3">
            <div class="col-md-3"><div class="text-muted small">Total Callbacks</div><div class="fs-5 fw-bold">{{ $cs->total ?? 0 }}</div></div>
            <div class="col-md-3"><div class="text-muted small">Completed</div><div class="fs-5 fw-bold text-success">{{ $cs->completed ?? 0 }}</div></div>
            <div class="col-md-3"><div class="text-muted small">Overdue</div><div class="fs-5 fw-bold text-danger">{{ $cs->overdue ?? 0 }}</div></div>
            <div class="col-md-3"><div class="text-muted small">Escalated</div><div class="fs-5 fw-bold text-warning">{{ $cs->escalated ?? 0 }}</div></div>
            <div class="col-md-3"><div class="text-muted small">Any Agent Rule</div><div>{{ $cs->any_agent ?? 0 }}</div></div>
            <div class="col-md-3"><div class="text-muted small">Prefer Same Agent</div><div>{{ $cs->prefer_same ?? 0 }}</div></div>
            <div class="col-md-3"><div class="text-muted small">Only Same Agent</div><div>{{ $cs->only_same ?? 0 }}</div></div>
            <div class="col-md-3"><div class="text-muted small">Handled by Different Agent</div><div>{{ $cs->handled_by_different ?? 0 }}</div></div>
        </div>
    </div>
</div>
@endif
@endsection