@extends('layouts.app')

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

@section('content')
<div class="page-head">
    <div>
        <h1 class="page-title">Canada Traffic Monitoring</h1>
        <p class="page-subtitle">Monitoring users can see Canadian traffic status, open live highway traffic maps, and manage franchise zoning for each province or territory.</p>
    </div>
    <div class="actions">
        <a class="btn" href="{{ route('monitor.index') }}">Open Zoning</a>
        <a class="btn secondary" href="{{ route('monitor.traffic-map.all') }}">Traffic Map</a>
    </div>
</div>

<div class="grid grid-4">
    <div class="metric"><span>Total Provinces/Territories</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>Ontario</strong></div>
</div>

<div class="card">
    <h2 style="margin-top:0;">Traffic and Zoning by Province/Territory</h2>
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Province / Territory</th>
                    <th>Traffic Level</th>
                    <th>Latitude</th>
                    <th>Longitude</th>
                    <th>Traffic Map</th>
                    <th>Zoning</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 Traffic</a></td>
                        <td><a class="btn small secondary" href="{{ route('monitor.franchise-zones', $state) }}" onclick="event.stopPropagation();">Open Zones</a></td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection