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

@section('content')
    <div class="page-head">
        <div><h1>Topology</h1><p>{{ $links->total() }} link(s). The map that answers "what goes down if this device dies?"</p></div>
    </div>

    <div class="grid grid-4 mb-2">
        @include('components.kpi', ['label' => 'Links', 'value' => (string) $totals['count'], 'variant' => 'info'])
        @include('components.kpi', ['label' => 'Up', 'value' => (string) $totals['up'], 'variant' => 'good'])
        @include('components.kpi', ['label' => 'Down', 'value' => (string) $totals['down'],
            'variant' => $totals['down'] ? 'bad' : 'good'])
        @include('components.kpi', ['label' => 'Total capacity', 'value' => number_format($totals['capacity']).' Mbps'])
    </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="Device name or port…">
        </div>
        <div class="field">
            <label>Device</label>
            <select name="device_id" data-auto-submit>
                <option value="">All</option>
                @foreach ($devices as $d)
                    <option value="{{ $d->id }}" @selected(($filters['device_id'] ?? '') == $d->id)>{{ $d->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="field">
            <label>Medium</label>
            <select name="medium" data-auto-submit>
                <option value="">All</option>
                @foreach ($media as $m)
                    <option value="{{ $m }}" @selected(($filters['medium'] ?? '') === $m)>{{ title_case_words($m) }}</option>
                @endforeach
            </select>
        </div>
        <div class="field">
            <label>Status</label>
            <select name="status" data-auto-submit>
                <option value="">All</option>
                @foreach ($statuses as $s)
                    <option value="{{ $s }}" @selected(($filters['status'] ?? '') === $s)>{{ title_case_words($s) }}</option>
                @endforeach
            </select>
        </div>
        <div class="field"><label>&nbsp;</label><button class="btn secondary" type="submit">Filter</button></div>
    </form>

    <div class="card mb-2">
        <div class="card-head"><h3>Record a link</h3></div>
        <form method="POST" action="{{ route('links.store') }}">
            @csrf
            <div class="card-body">
                <div class="grid grid-4">
                    <div class="field">
                        <label>From device <span class="req">*</span></label>
                        <select name="source_device_id" required>
                            <option value="">Select…</option>
                            @foreach ($devices as $d)
                                <option value="{{ $d->id }}" @selected(old('source_device_id') == $d->id)>{{ $d->name }}</option>
                            @endforeach
                        </select>
                        @error('source_device_id')<span class="err">{{ $message }}</span>@enderror
                    </div>
                    <div class="field">
                        <label>From port</label>
                        <input type="text" name="source_port" class="mono" maxlength="60"
                               value="{{ old('source_port') }}" placeholder="sfp-sfpplus1">
                    </div>
                    <div class="field">
                        <label>To device <span class="req">*</span></label>
                        <select name="target_device_id" required>
                            <option value="">Select…</option>
                            @foreach ($devices as $d)
                                <option value="{{ $d->id }}" @selected(old('target_device_id') == $d->id)>{{ $d->name }}</option>
                            @endforeach
                        </select>
                        @error('target_device_id')<span class="err">{{ $message }}</span>@enderror
                    </div>
                    <div class="field">
                        <label>To port</label>
                        <input type="text" name="target_port" class="mono" maxlength="60"
                               value="{{ old('target_port') }}" placeholder="ether1">
                    </div>
                    <div class="field">
                        <label>Medium <span class="req">*</span></label>
                        <select name="medium" required>
                            @foreach ($media as $m)
                                <option value="{{ $m }}" @selected(old('medium', 'fibre') === $m)>{{ title_case_words($m) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field">
                        <label>Capacity (Mbps)</label>
                        <input type="number" name="capacity_mbps" min="0" value="{{ old('capacity_mbps', 10000) }}">
                    </div>
                    <div class="field">
                        <label>Distance (km)</label>
                        <input type="number" name="distance_km" step="0.01" min="0" value="{{ old('distance_km') }}">
                    </div>
                    <div class="field">
                        <label>Status <span class="req">*</span></label>
                        <select name="status" required>
                            @foreach ($statuses as $s)
                                <option value="{{ $s }}" @selected(old('status', 'up') === $s)>{{ title_case_words($s) }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="card-foot"><button class="btn" type="submit">Record link</button></div>
        </form>
    </div>

    <div class="card">
        <div class="card-body" style="padding:0;">
            @if ($links->isEmpty())
                @include('components.empty-state', [
                    'icon' => '&#128279;',
                    'title' => 'No links recorded',
                    'message' => 'Record the connections between devices so you can see what is affected when one fails.',
                ])
            @else
                <table class="data">
                    <thead>
                    <tr>
                        <th>From</th><th>Port</th><th></th><th>To</th><th>Port</th>
                        <th>Medium</th><th class="num">Capacity</th><th class="num">Distance</th>
                        <th>Status</th><th></th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($links as $link)
                        <tr>
                            <td class="small"><a href="{{ route('devices.neighbours', $link->source) }}">{{ $link->source?->name ?: '—' }}</a></td>
                            <td class="small mono">{{ $link->source_port ?: '—' }}</td>
                            <td class="muted">&#8594;</td>
                            <td class="small"><a href="{{ route('devices.neighbours', $link->target) }}">{{ $link->target?->name ?: '—' }}</a></td>
                            <td class="small mono">{{ $link->target_port ?: '—' }}</td>
                            <td><span class="badge muted">{{ title_case_words($link->medium) }}</span></td>
                            <td class="num">{{ $link->capacity_mbps ? number_format($link->capacity_mbps) : '—' }}</td>
                            <td class="num">{{ $link->distance_km ? $link->distance_km.' km' : '—' }}</td>
                            <td><span class="badge {{ status_color($link->status) }}">
                                <span class="dot"></span>{{ title_case_words($link->status) }}</span></td>
                            <td class="right nowrap">
                                <form method="POST" action="{{ route('links.update', $link) }}" class="inline-form">
                                    @csrf @method('PUT')
                                    <input type="hidden" name="source_device_id" value="{{ $link->source_device_id }}">
                                    <input type="hidden" name="target_device_id" value="{{ $link->target_device_id }}">
                                    <input type="hidden" name="source_port" value="{{ $link->source_port }}">
                                    <input type="hidden" name="target_port" value="{{ $link->target_port }}">
                                    <input type="hidden" name="medium" value="{{ $link->medium }}">
                                    <select name="status">
                                        @foreach ($statuses as $s)
                                            <option value="{{ $s }}" @selected($link->status === $s)>{{ title_case_words($s) }}</option>
                                        @endforeach
                                    </select>
                                    <button class="btn xs" type="submit">Set</button>
                                </form>
                                <form method="POST" action="{{ route('links.destroy', $link) }}"
                                      data-confirm="Remove this link?" style="display:inline;">
                                    @csrf @method('DELETE')
                                    <button class="btn xs danger" type="submit">Del</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            @endif
        </div>
        @if ($links->hasPages())<div class="card-foot">{{ $links->links('partials.pagination') }}</div>@endif
    </div>
@endsection