@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 — Dashboard</h4>
        <div class="text-secondary small mt-1">Overview of today's outbound campaign activity.</div>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('dialer.campaigns.create') }}" class="btn btn-primary btn-sm">New Campaign</a>
        <a href="{{ route('dialer.live') }}" class="btn btn-outline-primary btn-sm">Live Monitor</a>
        <a href="{{ route('dialer.reports') }}" class="btn btn-outline-secondary btn-sm">Reports</a>
    </div>
</div>

{{-- Summary cards --}}
<div class="row g-3 mb-3">
    @php
        $cards = [
            ['Active Campaigns', $activeCampaigns, 'megaphone', 'primary'],
            ['Calls Attempted', $attempts, 'phone-outgoing', ''],
            ['Customers Answered', $answered, 'phone-incoming', 'success'],
            ['Connected to Agents', $connected, 'user-check', 'primary'],
            ['Not Connected', $notConnected, 'phone-off', $notConnected > 0 ? 'danger' : ''],
            ['Available Agents', $availableAgents, 'headset', 'success'],
            ['Callbacks Due', $callbacksDue, 'phone-call', $callbacksDue > 0 ? 'warning' : ''],
            ['Overdue Callbacks', $callbacksOverdue, 'alert-triangle', $callbacksOverdue > 0 ? 'danger' : ''],
            ['DNC Requests Today', $dncRequests, 'shield-off', ''],
        ];
    @endphp
    @foreach($cards as [$label, $value, $icon, $color])
    <div class="col-6 col-md-4 col-lg-{{ $loop->iteration <= 5 ? '2' : '3' }}">
        <div class="card h-100 {{ $color === 'danger' && $value > 0 ? 'border-danger' : '' }}">
            <div class="card-body text-center py-3">
                <i data-lucide="{{ $icon }}" style="width:18px;height:18px;" class="text-{{ $color ?: 'muted' }} mb-1"></i>
                <div class="fs-4 fw-bold {{ $color ? 'text-' . $color : '' }}">{{ number_format($value) }}</div>
                <div class="small text-muted">{{ $label }}</div>
            </div>
        </div>
    </div>
    @endforeach
</div>

{{-- Quick actions --}}
<div class="row g-3">
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <h6 class="fw-semibold mb-3">Quick Actions</h6>
                <div class="d-flex flex-wrap gap-2">
                    <a href="{{ route('dialer.campaigns.index') }}" class="btn btn-outline-primary btn-sm">View Campaigns</a>
                    <a href="{{ route('dialer.callbacks') }}" class="btn btn-outline-primary btn-sm">View Callbacks</a>
                    <a href="{{ route('dialer.dnc') }}" class="btn btn-outline-primary btn-sm">Do Not Call List</a>
                    <a href="{{ route('dialer.reports', ['tab' => 'not-connected']) }}" class="btn btn-outline-danger btn-sm">Not Connected Report</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection