@extends('layouts.app')

@section('title', 'Monitor / Province Zoning')

@section('content')
<div class="page-head">
    <div>
        <h1 class="page-title">Canadian Province Zoning</h1>
        <p class="page-subtitle">Province and territory zoning is restored. Open each province to manage its four zones, or open the live traffic map to see highway traffic with Google Traffic Layer when your Maps key is configured.</p>
    </div>
    <div class="actions">
        <a class="btn" href="{{ route('monitor.traffic-map.all') }}">Canada Traffic Map</a>
        <a class="btn secondary" href="{{ route('monitor.mapping') }}">Province Traffic Index</a>
    </div>
</div>

<div class="grid grid-4">
    <div class="metric"><span>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 / Critical</span><strong>{{ ($trafficCounts['high'] ?? 0) + ($trafficCounts['critical'] ?? 0) }}</strong></div>
    <div class="metric"><span>Live Traffic Layer</span><strong>{{ $googleMapsKey ? 'Ready' : 'Needs Key' }}</strong></div>
</div>

@if(! $googleMapsKey)
    <div class="card" style="border-color:#f97316;">
        <strong>Google traffic key not configured.</strong>
        <p class="muted" style="margin-bottom:0;">The app will still show zoning and database traffic status, but real road/highway traffic needs <code>GOOGLE_MAPS_BROWSER_KEY</code> in <code>.env</code>.</p>
    </div>
@endif

<div class="card">
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Province / Territory</th>
                    <th>Code</th>
                    <th>Traffic Level</th>
                    <th>Zones</th>
                    <th>Traffic Map</th>
                </tr>
            </thead>
            <tbody>
                @foreach($states as $state)
                    <tr class="row-link" onclick="window.location='{{ route('monitor.franchise-zones', $state) }}'">
                        <td><strong>{{ $state->name }}</strong></td>
                        <td><span class="muted">{{ $state->state_code }}</span></td>
                        <td><span class="badge {{ $state->traffic_level }}">{{ $state->traffic_level }}</span></td>
                        <td>
                            <a class="btn small secondary" href="{{ route('monitor.franchise-zones', $state) }}" onclick="event.stopPropagation();">
                                Open Zones {{ $state->franchise_zones_count ? '(' . $state->franchise_zones_count . ')' : '' }}
                            </a>
                        </td>
                        <td>
                            <a class="btn small" href="{{ route('monitor.traffic-map', $state) }}" onclick="event.stopPropagation();">Live Traffic</a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection