@extends('layouts.app')
@section('title', 'Dashboard')
@section('page-title', 'Dashboard')
@section('content')

<div class="row g-3 mb-4">

    {{-- Stat Card Macro: number+label LEFT, icon RIGHT --}}
    <div class="col-6 col-lg-3">
        <div class="stat-card d-flex align-items-center justify-content-between">
            <div>
                <div class="stat-value">{{ number_format($stats['total_customers']) }}</div>
                <div class="stat-label">Total Customers</div>
            </div>
            <div class="stat-icon ic-sky"><i class="bi bi-people-fill"></i></div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card d-flex align-items-center justify-content-between">
            <div>
                <div class="stat-value">{{ number_format($stats['total_calls']) }}</div>
                <div class="stat-label">Total Calls</div>
            </div>
            <div class="stat-icon ic-sky"><i class="bi bi-telephone-fill"></i></div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card d-flex align-items-center justify-content-between">
            <div>
                <div class="stat-value">{{ number_format($stats['completed_calls']) }}</div>
                <div class="stat-label">Completed</div>
            </div>
            <div class="stat-icon ic-green"><i class="bi bi-check-circle-fill"></i></div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card d-flex align-items-center justify-content-between">
            <div>
                <div class="stat-value">{{ number_format($stats['failed_calls']) }}</div>
                <div class="stat-label">Failed</div>
            </div>
            <div class="stat-icon ic-red"><i class="bi bi-x-circle-fill"></i></div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card d-flex align-items-center justify-content-between">
            <div>
                <div class="stat-value">{{ number_format($stats['pending_calls']) }}</div>
                <div class="stat-label">Pending</div>
            </div>
            <div class="stat-icon ic-amber"><i class="bi bi-hourglass-split"></i></div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card d-flex align-items-center justify-content-between">
            <div>
                @php $avg = $stats['avg_duration']; @endphp
                <div class="stat-value">{{ $avg > 0 ? intdiv($avg,60).'m '.($avg%60).'s' : '—' }}</div>
                <div class="stat-label">Avg Duration</div>
            </div>
            <div class="stat-icon ic-teal"><i class="bi bi-stopwatch-fill"></i></div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card d-flex align-items-center justify-content-between">
            <div>
                <div class="stat-value">{{ number_format($stats['positive']) }}</div>
                <div class="stat-label">Positive</div>
            </div>
            <div class="stat-icon ic-green"><i class="bi bi-emoji-smile-fill"></i></div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card d-flex align-items-center justify-content-between">
            <div>
                <div class="stat-value">{{ number_format($stats['negative']) }}</div>
                <div class="stat-label">Negative</div>
            </div>
            <div class="stat-icon ic-red"><i class="bi bi-emoji-frown-fill"></i></div>
        </div>
    </div>

</div>

<div class="card">
    <div class="card-header d-flex align-items-center justify-content-between">
        <span><i class="bi bi-clock-history me-2" style="color:#38bdf8;"></i><strong>Recent Calls</strong></span>
        <a href="{{ route('calls.index') }}" class="btn btn-outline-brand btn-sm">
            View All <i class="bi bi-arrow-right ms-1"></i>
        </a>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table mb-0">
                <thead>
                    <tr>
                        <th>Customer</th><th>Product</th><th>Status</th>
                        <th>Feedback</th><th>Duration</th><th>When</th><th></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($recentCalls as $call)
                    <tr>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <div class="avatar-sm">{{ strtoupper(substr($call->customer->customer_name ?? '?', 0, 1)) }}</div>
                                <strong>{{ $call->customer->customer_name ?? '—' }}</strong>
                            </div>
                        </td>
                        <td><strong>{{ $call->customer->product_name ?? '—' }}</strong></td>
                        <td>
                            @php
                                $sc = match($call->status) {
                                    'completed'          => 'completed',
                                    'failed','no-answer' => 'failed',
                                    default              => 'calling'
                                };
                            @endphp
                            <span class="status-badge badge-{{ $sc }}">{{ ucfirst($call->status) }}</span>
                        </td>
                        <td>
                            @if($call->sentiment)
                                <span class="status-badge badge-{{ $call->sentiment }}">{{ ucfirst($call->sentiment) }}</span>
                            @else
                                <span style="color:#94a3b8;">—</span>
                            @endif
                        </td>
                        <td style="font-weight:700;">{{ $call->formatted_duration }}</td>
                        <td style="color:#64748b;font-size:12px;font-weight:600;">{{ $call->created_at->diffForHumans() }}</td>
                        <td>
                            <a href="{{ route('calls.show', $call) }}" class="btn btn-outline-brand btn-sm">
                                <i class="bi bi-eye"></i>
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="text-center py-5" style="color:#94a3b8;">
                            <i class="bi bi-telephone-x d-block mb-2" style="font-size:32px;opacity:.3;color:#38bdf8;"></i>
                            <strong>No calls yet.</strong> Go to Customers and start a campaign.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@endsection