@extends('layouts.app')
@section('title', 'Admin Devices')
@section('page-title', 'All Devices')
@section('content')
<div class="card">
    <div class="card-body p-0">
        <table class="table table-hover mb-0">
            <thead class="table-light">
                <tr><th>User</th><th>Device</th><th>Instance</th><th>Phone</th><th>Status</th><th>Connected</th></tr>
            </thead>
            <tbody>
                @foreach($devices as $device)
                <tr>
                    <td>{{ $device->user?->name ?? '-' }}</td>
                    <td class="fw-semibold">{{ $device->name }}</td>
                    <td class="small text-muted">{{ $device->instance_name }}</td>
                    <td>{{ $device->phone_number ?? '-' }}</td>
                    <td><span class="badge bg-{{ $device->status === 'connected' ? 'success' : 'secondary' }}">{{ $device->status }}</span></td>
                    <td class="small">{{ $device->connected_at?->diffForHumans() ?? '-' }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
<div class="mt-3">{{ $devices->links() }}</div>
@endsection