@extends('layouts.app')

@section('title', 'Monitoring Dashboard')

@section('content')
<div class="page-head">
    <div>
        <h1 class="page-title">Nigeria Traffic Monitoring</h1>
        <p class="page-subtitle">This dashboard gives Monitoring users a state-by-state view of traffic status, franchise-zone mapping, and state map pages. It is built for 36 states plus FCT.</p>
    </div>
    <div class="actions">
        <a class="btn" href="{{ route('monitor.index') }}">Open Monitor</a>
        <a class="btn secondary" href="{{ route('monitor.mapping') }}">MAP Mapping</a>
    </div>
</div>

<div class="grid grid-4">
    <div class="metric"><span>Total States</span><strong>{{ $states->count() }}</strong></div>
    <div class="metric"><span>Low Traffic</span><strong>{{ $trafficCounts['low'] ?? 0 }}</strong></div>
    <div class="metric"><span>High Traffic</span><strong>{{ ($trafficCounts['high'] ?? 0) + ($trafficCounts['critical'] ?? 0) }}</strong></div>
    <div class="metric"><span>Default Focus</span><strong>Lagos</strong></div>
</div>

<div class="card">
    <h2 style="margin-top:0;">Traffic by State</h2>
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>State</th>
                    <th>Traffic Level</th>
                    <th>Latitude</th>
                    <th>Longitude</th>
                    <th>Map</th>
                </tr>
            </thead>
            <tbody>
                @foreach($states as $state)
                    <tr class="row-link" onclick="window.location='{{ route('monitor.traffic-map', $state) }}'">
                        <td><strong>{{ $state->name }}</strong></td>
                        <td><span class="badge {{ $state->traffic_level }}">{{ $state->traffic_level }}</span></td>
                        <td>{{ number_format($state->latitude, 5) }}</td>
                        <td>{{ number_format($state->longitude, 5) }}</td>
                        <td><a class="btn small" href="{{ route('monitor.traffic-map', $state) }}" onclick="event.stopPropagation();">Open Map</a></td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection