@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 — Live Monitor</h4>
        <div class="text-secondary small mt-1">Near-real-time campaign activity. Updates every 5 seconds.</div>
    </div>
</div>

{{-- Summary cards --}}
<div class="row g-3 mb-3">
    <div class="col-6 col-md-2">
        <div class="card h-100"><div class="card-body text-center py-3">
            <div class="fs-4 fw-bold" id="lm-attempts">{{ $summary['attempts'] }}</div>
            <div class="small text-muted">Calls Placed</div>
        </div></div>
    </div>
    <div class="col-6 col-md-2">
        <div class="card h-100"><div class="card-body text-center py-3">
            <div class="fs-4 fw-bold text-success" id="lm-answered">{{ $summary['answered'] }}</div>
            <div class="small text-muted">Answered</div>
        </div></div>
    </div>
    <div class="col-6 col-md-2">
        <div class="card h-100"><div class="card-body text-center py-3">
            <div class="fs-4 fw-bold text-primary" id="lm-connected">{{ $summary['connected'] }}</div>
            <div class="small text-muted">Connected</div>
        </div></div>
    </div>
    <div class="col-6 col-md-2">
        <div class="card h-100 {{ $summary['not_connected'] > 0 ? 'border-danger' : '' }}"><div class="card-body text-center py-3">
            <div class="fs-4 fw-bold {{ $summary['not_connected'] > 0 ? 'text-danger' : '' }}" id="lm-not-connected">{{ $summary['not_connected'] }}</div>
            <div class="small text-muted">Not Connected</div>
            <div class="small {{ $summary['not_connected_pct'] > 5 ? 'text-danger' : 'text-muted' }}" id="lm-nc-pct">{{ $summary['not_connected_pct'] }}%</div>
        </div></div>
    </div>
    <div class="col-6 col-md-2">
        <div class="card h-100"><div class="card-body text-center py-3">
            <div class="fs-4 fw-bold text-warning" id="lm-waiting">{{ $summary['waiting_now'] }}</div>
            <div class="small text-muted">Waiting Now</div>
        </div></div>
    </div>
    <div class="col-6 col-md-2">
        <div class="card h-100"><div class="card-body text-center py-3">
            <div class="fs-4 fw-bold" id="lm-agents">{{ $agents->where('status', 'available')->count() }}</div>
            <div class="small text-muted">Available Agents</div>
        </div></div>
    </div>
</div>

{{-- Active campaigns --}}
<div class="row g-3 mb-3">
    <div class="col-12">
        <div class="card">
            <div class="card-header fw-semibold">Active Campaigns</div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0 align-middle">
                        <thead><tr><th>Campaign</th><th>Method</th><th>Status</th><th>Action</th></tr></thead>
                        <tbody>
                            @forelse($campaigns as $c)
                            <tr>
                                <td class="fw-semibold">{{ $c->name }}</td>
                                <td class="small">{{ ['preview'=>'Agent Calls Customer','direct_agent'=>'Automatic','send_to_team'=>'Send to Team'][$c->calling_mode] ?? $c->calling_mode }}</td>
                                <td><span class="badge bg-{{ $c->state === 'running' ? 'primary' : 'warning' }}-subtle text-{{ $c->state === 'running' ? 'primary' : 'warning' }}">{{ ucfirst($c->state) }}</span></td>
                                <td><a href="{{ route('dialer.campaigns.show', $c->id) }}" class="btn btn-sm btn-outline-primary">View</a></td>
                            </tr>
                            @empty
                            <tr><td colspan="4" class="text-center text-muted py-4">No active campaigns.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Agent status table --}}
<div class="card">
    <div class="card-header fw-semibold">Agent Status</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>Device</th><th>Status</th><th>Since</th></tr></thead>
                <tbody>
                    @forelse($agents as $a)
                    @php $statusStyles = ['available'=>'text-success','on_call'=>'text-primary','calling'=>'text-primary','reserved'=>'text-info','paused'=>'text-warning','wrap_up'=>'text-muted']; @endphp
                    <tr>
                        <td>Agent #{{ $a->agent_id }}</td>
                        <td class="small text-muted">{{ $a->selected_device_ref ?? '—' }}</td>
                        <td class="{{ $statusStyles[$a->status] ?? '' }} fw-semibold">{{ ucfirst(str_replace('_',' ',$a->status)) }}</td>
                        <td class="small">{{ $a->status_changed_at ? \Carbon\Carbon::parse($a->status_changed_at)->diffForHumans() : '—' }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="4" class="text-center text-muted py-4">No agents online.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection