@extends('layouts.monitor')
@section('title', 'Devices')

@section('content')
<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-3xl font-bold">Devices</h1>
        <p class="text-slate-400 mt-2">Manage MikroTik, OLT, switch and server checks.</p>
    </div>
    <a href="{{ route('monitor.devices.create') }}" class="rounded-xl bg-cyan-500 px-4 py-3 font-semibold text-slate-950">Add device</a>
</div>

<div class="rounded-2xl border border-slate-800 bg-slate-900 overflow-x-auto">
<table class="w-full text-sm">
    <thead class="text-slate-400 border-b border-slate-800">
    <tr>
        <th class="text-left p-4">Name</th>
        <th class="text-left p-4">Check</th>
        <th class="text-left p-4">Status</th>
        <th class="text-left p-4">Last error</th>
        <th class="text-right p-4">Actions</th>
    </tr>
    </thead>
    <tbody class="divide-y divide-slate-800">
    @foreach($devices as $device)
        <tr>
            <td class="p-4"><div class="font-semibold">{{ $device->name }}</div><div class="text-slate-500">{{ $device->location }}</div></td>
            <td class="p-4">{{ strtoupper($device->check_type) }} · {{ $device->host }}:{{ $device->port }}</td>
            <td class="p-4">{{ strtoupper($device->status) }}</td>
            <td class="p-4 max-w-xs truncate text-slate-400">{{ $device->last_error ?: '—' }}</td>
            <td class="p-4">
                <div class="flex justify-end gap-2">
                    <form method="POST" action="{{ route('monitor.devices.check', $device) }}">@csrf
                        <button class="px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700">Check</button>
                    </form>
                    <a class="px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700" href="{{ route('monitor.devices.edit', $device) }}">Edit</a>
                    <form method="POST" action="{{ route('monitor.devices.destroy', $device) }}" onsubmit="return confirm('Delete this device?')">
                        @csrf @method('DELETE')
                        <button class="px-3 py-2 rounded-lg bg-rose-950 text-rose-300">Delete</button>
                    </form>
                </div>
            </td>
        </tr>
    @endforeach
    </tbody>
</table>
</div>
<div class="mt-5">{{ $devices->links() }}</div>
@endsection