@extends('layouts.app')
@section('title', 'Devices')
@section('page-title', 'My Devices')
@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <p class="text-muted mb-0">Manage your WhatsApp devices</p>
    <a href="{{ route('dashboard.devices.create') }}" class="btn btn-whatsapp"><i class="bi bi-plus-lg"></i> Add Device</a>
</div>

<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr><th>Name</th><th>Instance</th><th>Phone</th><th>Status</th><th>Battery</th><th>Connected</th><th>Actions</th></tr>
                </thead>
                <tbody>
                    @forelse($devices as $device)
                    <tr>
                        <td class="fw-semibold">{{ $device->name }}</td>
                        <td class="text-muted small">{{ $device->instance_name }}</td>
                        <td>{{ $device->phone_number ?? '-' }}</td>
                        <td>
                            @php $statusColors = ['connected'=>'success','connecting'=>'warning','disconnected'=>'secondary','qrcode_received'=>'info','disconnected_by_user'=>'dark']; @endphp
                            <span class="badge bg-{{ $statusColors[$device->status] ?? 'secondary' }}">{{ $device->status }}</span>
                        </td>
                        <td>
                            @if($device->battery_level)
                                <i class="bi bi-battery-{{ $device->battery_level > 60 ? 'full' : ($device->battery_level > 20 ? 'half' : 'low') }}"></i>
                                {{ $device->battery_level }}%
                                @if($device->is_charging) <i class="bi bi-lightning-charge text-warning"></i> @endif
                            @else - @endif
                        </td>
                        <td class="small text-muted">{{ $device->connected_at?->diffForHumans() ?? '-' }}</td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                @if($device->status === 'qrcode_received')
                                    <a href="{{ route('dashboard.devices.qr', $device->id) }}" class="btn btn-outline-primary" title="QR Code"><i class="bi bi-qr-code"></i></a>
                                @endif
                                @if($device->isConnected())
                                    <form action="{{ route('dashboard.devices.disconnect', $device->id) }}" method="POST" class="d-inline">@csrf <button class="btn btn-outline-warning btn-sm" title="Disconnect"><i class="bi bi-power"></i></button></form>
                                    <form action="{{ route('dashboard.devices.restart', $device->id) }}" method="POST" class="d-inline">@csrf <button class="btn btn-outline-info btn-sm" title="Restart"><i class="bi bi-arrow-clockwise"></i></button></form>
                                @endif
                                <form action="{{ route('dashboard.devices.destroy', $device->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete this device?')">@csrf @method('DELETE') <button class="btn btn-outline-danger btn-sm" title="Delete"><i class="bi bi-trash"></i></button></form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="7" class="text-center text-muted py-4">No devices yet. <a href="{{ route('dashboard.devices.create') }}">Create one</a></td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="mt-3">{{ $devices->links() }}</div>
@endsection