@extends('layouts.app')

@section('title', $state->name.' Traffic Map')

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
@endpush

@section('content')
<div class="page-head">
    <div>
        <h1 class="page-title">{{ $state->name }} Traffic Map</h1>
        <p class="page-subtitle">Traffic overview for {{ $state->name }}. The map defaults to the state centre and uses the state traffic status saved in the database.</p>
    </div>
    <div class="actions">
        <a class="btn secondary" href="{{ route('monitor.mapping') }}">Back to MAP Mapping</a>
        <a class="btn" href="{{ route('monitor.franchise-zones', $state) }}">Open Franchise Zones</a>
    </div>
</div>

<div class="grid grid-4">
    <div class="metric"><span>State</span><strong>{{ $state->state_code }}</strong></div>
    <div class="metric"><span>Traffic Level</span><strong style="text-transform:capitalize;">{{ $state->traffic_level }}</strong></div>
    <div class="metric"><span>Latitude</span><strong>{{ number_format($state->latitude, 3) }}</strong></div>
    <div class="metric"><span>Longitude</span><strong>{{ number_format($state->longitude, 3) }}</strong></div>
</div>

<div class="card">
    <div id="trafficMap" class="map-box"></div>
    <p class="help">Real provider traffic layers can be connected later with Google Maps or another traffic API. This version gives you the database-backed traffic map skeleton first, instead of pretending a magic traffic oracle lives in PHP.</p>
</div>
@endsection

@push('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
    const state = @json($state);
    const allStates = @json($states);
    const trafficColours = { low: '#16a34a', medium: '#f97316', high: '#dc2626', critical: '#7c3aed' };

    const map = L.map('trafficMap').setView([state.latitude, state.longitude], state.zoom_level || 8);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);

    allStates.forEach(item => {
        const colour = trafficColours[item.traffic_level] || '#2563eb';
        const radius = item.slug === state.slug ? 26000 : 14000;
        L.circleMarker([item.latitude, item.longitude], {
            radius: item.slug === state.slug ? 13 : 8,
            color: colour,
            fillColor: colour,
            fillOpacity: item.slug === state.slug ? 0.75 : 0.45,
            weight: item.slug === state.slug ? 4 : 2
        }).addTo(map).bindPopup(`<strong>${item.name}</strong><br>Traffic: ${item.traffic_level}`);

        L.circle([item.latitude, item.longitude], {
            radius: radius,
            color: colour,
            fillColor: colour,
            fillOpacity: item.slug === state.slug ? 0.10 : 0.035,
            weight: 1
        }).addTo(map);
    });

    L.marker([state.latitude, state.longitude]).addTo(map)
        .bindPopup(`<strong>${state.name}</strong><br>${state.traffic_summary || 'Traffic monitoring point'}`)
        .openPopup();
</script>
@endpush