@extends('layouts.app')
@section('title', 'Device Status')
@section('page-title', 'Device Status')
@section('content')
<div class="row justify-content-center">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header bg-white"><h6 class="mb-0">{{ $device->name }} - Status</h6></div>
            <div class="card-body">
                <table class="table">
                    <tr><th>Status</th><td><span class="badge bg-{{ $device->isConnected() ? 'success' : 'secondary' }}">{{ $device->status }}</span></td></tr>
                    <tr><th>Phone</th><td>{{ $device->phone_number ?? '-' }}</td></tr>
                    <tr><th>Platform</th><td>{{ $device->platform ?? '-' }}</td></tr>
                    <tr><th>Battery</th><td>{{ $device->battery_level ? $device->battery_level.'%' : '-' }}</td></tr>
                    <tr><th>Last Seen</th><td>{{ $device->last_seen_at?->diffForHumans() ?? '-' }}</td></tr>
                    <tr><th>Connected Since</th><td>{{ $device->connected_at?->format('M d, Y H:i') ?? '-' }}</td></tr>
                    <tr><th>Instance</th><td>{{ $device->instance_name }}</td></tr>
                </table>
                <a href="{{ route('dashboard.devices.index') }}" class="btn btn-outline-secondary">Back</a>
            </div>
        </div>
    </div>
</div>
@endsection