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

@section('content')
    <div class="page-head">
        <div><h1>Sites &amp; infrastructure</h1><p>Exchanges, towers, PoPs and head-end locations.</p></div>
        <button type="button" class="btn" data-modal="site-modal">+ Register site</button>
    </div>

    <div class="card">
        <div class="card-body tight">
            <div class="table-wrap">
                <table class="data">
                    <thead>
                    <tr>
                        <th>Site</th><th>Location</th><th>Type</th><th class="num">Devices</th><th class="num">Up</th>
                        <th class="num">Latency</th><th>Status</th><th>Last poll</th><th></th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse ($sites as $site)
                        @php
                            $total = $site->devices_count;
                            $up = $site->devices_up_count;
                        @endphp
                        <tr>
                            <td>
                                <a href="{{ route('sites.show', $site) }}" class="strong">{{ $site->name }}</a>
                                <div class="tiny muted mono">{{ $site->site_code }}</div>
                            </td>
                            <td class="small">{{ $site->city }}<div class="tiny muted">{{ $site->region }}</div></td>
                            <td><span class="badge muted">{{ title_case_words($site->type) }}</span></td>
                            <td class="num">{{ $total }}</td>
                            <td class="num {{ $up === $total ? '' : 'strong' }}">{{ $up }}</td>
                            <td class="num">{{ $site->last_latency_ms !== null ? number_format($site->last_latency_ms, 1).' ms' : '—' }}</td>
                            <td><span class="badge {{ status_color($site->status) }}"><span class="dot"></span>{{ $site->status }}</span></td>
                            <td class="small muted">{{ $site->last_poll_at?->diffForHumans() ?? 'never' }}</td>
                            <td class="right">
                                <a href="{{ route('sites.show', $site) }}" class="btn xs secondary">Open</a>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="9">
                            @include('components.empty-state', ['icon' => '&#9873;', 'title' => 'No sites registered',
                                'message' => 'Sites group devices by physical location for monitoring and dispatch.',
                                'action' => '<button type="button" class="btn sm" data-modal="site-modal">+ Register site</button>'])
                        </td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if ($sites->hasPages())<div class="card-foot">{{ $sites->links('partials.pagination') }}</div>@endif
    </div>

    <div class="modal-backdrop" id="site-modal">
        <div class="modal">
            <form method="POST" action="{{ route('sites.store') }}">
                @csrf
                <div class="modal-head"><h3>Register a site</h3>
                    <button type="button" class="modal-close" data-modal-close>&times;</button></div>
                <div class="modal-body">
                    <div class="form-grid cols-1">
                        <div class="field"><label>Site name <span class="req">*</span></label>
                            <input type="text" name="name" required placeholder="e.g. Accra Central PoP"></div>
                        <div class="field"><label>Site code <span class="req">*</span></label>
                            <input type="text" name="site_code" class="mono" required placeholder="ACC-CEN-01"></div>
                        <div class="field"><label>Type <span class="req">*</span></label>
                            <select name="type" required>
                                @foreach (['exchange','pop','tower','head_end','data_center','customer_premises','hut','container'] as $t)
                                    <option value="{{ $t }}">{{ title_case_words($t) }}</option>
                                @endforeach
                            </select></div>
                        <div class="field"><label>Address</label>
                            <input type="text" name="address"></div>
                        <div class="form-grid">
                            <div class="field"><label>City</label><input type="text" name="city"></div>
                            <div class="field"><label>Region</label><input type="text" name="region"></div>
                        </div>
                        <div class="form-grid">
                            <div class="field"><label>Latitude</label>
                                <input type="number" name="latitude" step="any" min="-90" max="90"></div>
                            <div class="field"><label>Longitude</label>
                                <input type="number" name="longitude" step="any" min="-180" max="180"></div>
                        </div>
                        <div class="field"><label>Branch</label>
                            <select name="branch_id">
                                <option value="">Head office</option>
                                @foreach ($branches as $branch)
                                    <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                                @endforeach
                            </select></div>
                    </div>
                </div>
                <div class="modal-foot">
                    <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                    <button type="submit" class="btn">Register site</button>
                </div>
            </form>
        </div>
    </div>
@endsection