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

@section('content')
    <div class="page-head">
        <div><h1>Network devices</h1><p>{{ $devices->total() }} device(s) in the estate.</p></div>
        <div class="page-actions">
            <form method="POST" action="{{ route('noc.sweep') }}">@csrf
                <button type="submit" class="btn secondary">Poll all now</button>
            </form>
            <a href="{{ route('devices.create') }}" class="btn">+ Add device</a>
        </div>
    </div>

    <div class="grid grid-6 mb-2">
        @foreach (['up' => 'Up', 'down' => 'Down', 'degraded' => 'Degraded', 'maintenance' => 'Maintenance', 'provisioning' => 'Provisioning', 'decommissioned' => 'Decommissioned'] as $key => $label)
            @include('components.kpi', ['label' => $label, 'value' => number_format($counts[$key] ?? 0),
                'variant' => $key === 'up' ? 'good' : ($key === 'down' ? 'bad' : ($key === 'degraded' ? 'warn' : '')),
                'href' => route('devices.index', ['status' => $key])])
        @endforeach
    </div>

    <form class="filters" method="GET">
        <div class="field" style="flex:2 1 240px;">
            <label>Search</label>
            <input type="search" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Name, IP, model, serial…">
        </div>
        <div class="field">
            <label>Role</label>
            <select name="role" data-auto-submit>
                <option value="">All roles</option>
                @foreach (['core_router','edge_router','bng','olt','switch','access_point','olt_onu','server','firewall','media_converter','tower_radio'] as $r)
                    <option value="{{ $r }}" @selected(($filters['role'] ?? '') === $r)>{{ title_case_words($r) }}</option>
                @endforeach
            </select>
        </div>
        <div class="field">
            <label>Site</label>
            <select name="site" data-auto-submit>
                <option value="">All sites</option>
                @foreach ($sites as $site)
                    <option value="{{ $site->id }}" @selected(($filters['site'] ?? '') == $site->id)>{{ $site->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="field">
            <label>Status</label>
            <select name="status" data-auto-submit>
                <option value="">All</option>
                @foreach (['up','down','degraded','maintenance','provisioning','decommissioned','unreachable'] as $s)
                    <option value="{{ $s }}" @selected(($filters['status'] ?? '') === $s)>{{ title_case_words($s) }}</option>
                @endforeach
            </select>
        </div>
        <div class="field" style="flex:0 0 auto;"><label>&nbsp;</label><button type="submit" class="btn secondary">Filter</button></div>
    </form>

    <div class="card">
        <div class="card-body tight">
            <div class="table-wrap">
                <table class="data">
                    <thead>
                    <tr>
                        <th>Device</th><th>Role</th><th>Site</th><th>Management IP</th><th>Vendor / model</th>
                        <th class="num">Interfaces</th><th class="num">Latency</th><th>Status</th><th>Polled</th><th></th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse ($devices as $device)
                        <tr>
                            <td>
                                <a href="{{ route('devices.show', $device) }}" class="strong">{{ $device->name }}</a>
                                <div class="tiny muted mono">{{ $device->hostname }}</div>
                            </td>
                            <td><span class="badge info">{{ title_case_words($device->role) }}</span></td>
                            <td class="small">{{ $device->site?->name ?: '—' }}</td>
                            <td class="mono tiny">{{ $device->management_ip }}</td>
                            <td class="small">{{ $device->vendor }}<div class="tiny muted">{{ $device->model }}</div></td>
                            <td class="num">{{ $device->interfaces_count }}</td>
                            <td class="num">
                                @if ($device->status === 'up' && $device->last_ping_ms !== null)
                                    {{ number_format($device->last_ping_ms, 1) }} ms
                                @else
                                    <span class="muted">—</span>
                                @endif
                            </td>
                            <td><span class="badge {{ status_color($device->status) }}"><span class="dot"></span>{{ $device->status }}</span></td>
                            <td class="small muted">{{ $device->last_polled_at?->diffForHumans() ?? 'never' }}</td>
                            <td class="right nowrap">
                                <a href="{{ route('devices.show', $device) }}" class="btn xs secondary">Open</a>
                                <a href="{{ route('devices.edit', $device) }}" class="btn xs ghost">Edit</a>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="10">
                            @include('components.empty-state', ['icon' => '&#9881;', 'title' => 'No devices found',
                                'message' => 'Register your network equipment to start monitoring.',
                                'action' => '<a href="'.route('devices.create').'" class="btn sm">+ Add device</a>'])
                        </td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if ($devices->hasPages())<div class="card-foot">{{ $devices->links('partials.pagination') }}</div>@endif
    </div>
@endsection