@extends('layouts.app')
@section('title', 'Dashboard')
@section('page-title', 'Dashboard')
@section('content')
<div class="row g-3 mb-4">
    <div class="col-md-3">
        <div class="card stat-card p-3">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="text-muted small">Connected Devices</div>
                    <div class="fs-3 fw-bold">{{ $stats['connected_devices'] }}</div>
                    <div class="text-muted small">of {{ $stats['total_devices'] }} total</div>
                </div>
                <div class="stat-icon bg-success bg-opacity-10 text-success"><i class="bi bi-phone"></i></div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stat-card p-3">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="text-muted small">Messages Today</div>
                    <div class="fs-3 fw-bold">{{ $stats['messages_today'] }}</div>
                    <div class="text-muted small">{{ $stats['total_messages'] }} total</div>
                </div>
                <div class="stat-icon bg-primary bg-opacity-10 text-primary"><i class="bi bi-envelope"></i></div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stat-card p-3">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="text-muted small">Messages Sent</div>
                    <div class="fs-3 fw-bold">{{ $stats['messages_sent'] }}</div>
                    <div class="text-muted small">{{ $stats['messages_received'] }} received</div>
                </div>
                <div class="stat-icon bg-info bg-opacity-10 text-info"><i class="bi bi-send"></i></div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stat-card p-3">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="text-muted small">Contacts</div>
                    <div class="fs-3 fw-bold">{{ $stats['total_contacts'] }}</div>
                    <div class="text-muted small">{{ $stats['active_campaigns'] }} active campaigns</div>
                </div>
                <div class="stat-icon bg-warning bg-opacity-10 text-warning"><i class="bi bi-people"></i></div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3">
    <div class="col-md-7">
        <div class="card">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h6 class="mb-0">Recent Messages</h6>
                <a href="{{ route('dashboard.messages.index') }}" class="btn btn-sm btn-outline-secondary">View All</a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr><th>Direction</th><th>Chat</th><th>Type</th><th>Status</th><th>Time</th></tr>
                        </thead>
                        <tbody>
                            @forelse($recentMessages as $msg)
                            <tr>
                                <td>
                                    @if($msg->direction === 'outgoing')
                                        <span class="badge bg-success"><i class="bi bi-arrow-up"></i> Sent</span>
                                    @else
                                        <span class="badge bg-info"><i class="bi bi-arrow-down"></i> Received</span>
                                    @endif
                                </td>
                                <td class="text-truncate" style="max-width: 150px;">{{ $msg->chat_jid }}</td>
                                <td><span class="badge bg-light text-dark">{{ $msg->type }}</span></td>
                                <td>
                                    @php $colors = ['pending'=>'warning','sent'=>'success','delivered'=>'primary','read'=>'info','failed'=>'danger']; @endphp
                                    <span class="badge bg-{{ $colors[$msg->status] ?? 'secondary' }}">{{ $msg->status }}</span>
                                </td>
                                <td class="text-muted small">{{ $msg->created_at->diffForHumans() }}</td>
                            </tr>
                            @empty
                            <tr><td colspan="5" class="text-center text-muted py-4">No messages yet</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-5">
        <div class="card">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h6 class="mb-0">Devices</h6>
                <a href="{{ route('dashboard.devices.create') }}" class="btn btn-sm btn-whatsapp"><i class="bi bi-plus"></i> Add</a>
            </div>
            <div class="card-body p-0">
                @forelse($devices as $device)
                <div class="d-flex justify-content-between align-items-center p-3 border-bottom">
                    <div>
                        <div class="fw-semibold">{{ $device->name }}</div>
                        <div class="text-muted small">{{ $device->phone_number ?? 'Not paired' }}</div>
                    </div>
                    @php $statusColors = ['connected'=>'success','connecting'=>'warning','disconnected'=>'secondary','qrcode_received'=>'info']; @endphp
                    <span class="badge bg-{{ $statusColors[$device->status] ?? 'secondary' }} device-status-badge">{{ $device->status }}</span>
                </div>
                @empty
                <div class="text-center text-muted py-4">No devices yet. <a href="{{ route('dashboard.devices.create') }}">Add one</a></div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection