@extends('layouts.app')

@section('title', $state->name.' Province Zoning')

@php
    $googleMapsKey = $googleMapsKey ?? config('services.google.maps_browser_key');
@endphp

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

@section('content')
<div class="page-head">
    <div>
        <h1 class="page-title">{{ $state->name }} Province Zoning</h1>
        <p class="page-subtitle">The province or territory is divided into four operational zones. This page restores the zoning feature and overlays live highway traffic when your Google Maps browser key is configured.</p>
    </div>
    <div class="actions">
        <a class="btn secondary" href="{{ route('monitor.index') }}">Back to Zoning List</a>
        <a class="btn" href="{{ route('monitor.traffic-map', $state) }}">Open Traffic Map</a>
    </div>
</div>

<div class="grid grid-4">
    <div class="metric"><span>Province/Territory</span><strong>{{ $state->state_code }}</strong></div>
    <div class="metric"><span>Zones</span><strong>{{ $state->franchiseZones->count() }}</strong></div>
    <div class="metric"><span>Saved Traffic</span><strong style="text-transform:capitalize;">{{ $state->traffic_level }}</strong></div>
    <div class="metric"><span>Live Traffic</span><strong>{{ $googleMapsKey ? 'Enabled' : 'Needs Key' }}</strong></div>
</div>

<div class="card">
    <div style="display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:flex-start; margin-bottom:14px;">
        <div>
            <h2 style="margin:0;">Zoning + Highway Traffic Map</h2>
            <p class="muted" style="margin:6px 0 0; max-width:900px; line-height:1.55;">
                Use this map to see the four operational zones while checking road traffic around highways and city corridors. The zone boundaries come from your database; live traffic comes from Google when configured.
            </p>
        </div>
    </div>
    <div id="zonesMap" class="map-box"></div>
    <p class="help">
        {{ $googleMapsKey ? 'Google Traffic Layer is enabled. Zoom into highways and major roads to inspect current movement before assigning or reviewing coverage.' : 'Add GOOGLE_MAPS_BROWSER_KEY to .env to enable live highway traffic. Without it, the map still shows zones using the fallback map.' }}
    </p>
</div>

<div class="card">
    <h2 style="margin-top:0;">Zone Control Card</h2>
    <p class="muted">Each zone has two boundary coordinate pairs plus centre point and radius. Increasing the radius expands the zone circle; reducing it shrinks the coverage area.</p>

    <form method="POST" action="{{ route('monitor.franchise-zones.save', $state) }}">
        @csrf
        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>Zone</th>
                        <th>Start Lat</th>
                        <th>Start Lng</th>
                        <th>End Lat</th>
                        <th>End Lng</th>
                        <th>Centre Lat</th>
                        <th>Centre Lng</th>
                        <th>Radius KM</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($state->franchiseZones as $index => $zone)
                        <tr>
                            <td>
                                <strong>{{ $zone->zone_name }}</strong>
                                <input type="hidden" name="zones[{{ $index }}][id]" value="{{ $zone->id }}">
                            </td>
                            <td><input name="zones[{{ $index }}][boundary_start_lat]" value="{{ old("zones.$index.boundary_start_lat", $zone->boundary_start_lat) }}" required></td>
                            <td><input name="zones[{{ $index }}][boundary_start_lng]" value="{{ old("zones.$index.boundary_start_lng", $zone->boundary_start_lng) }}" required></td>
                            <td><input name="zones[{{ $index }}][boundary_end_lat]" value="{{ old("zones.$index.boundary_end_lat", $zone->boundary_end_lat) }}" required></td>
                            <td><input name="zones[{{ $index }}][boundary_end_lng]" value="{{ old("zones.$index.boundary_end_lng", $zone->boundary_end_lng) }}" required></td>
                            <td><input name="zones[{{ $index }}][center_lat]" value="{{ old("zones.$index.center_lat", $zone->center_lat) }}" required></td>
                            <td><input name="zones[{{ $index }}][center_lng]" value="{{ old("zones.$index.center_lng", $zone->center_lng) }}" required></td>
                            <td><input name="zones[{{ $index }}][radius_km]" value="{{ old("zones.$index.radius_km", $zone->radius_km) }}" required></td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div style="margin-top:16px;">
            <button class="btn" type="submit">Save Zone Boundaries</button>
        </div>
    </form>
</div>
@endsection

@if($googleMapsKey)
    @push('scripts')
    <script>
        window.initZoningTrafficMap = function () {
            const state = @json($state);
            const zones = @json($state->franchiseZones);
            const zoneColours = ['#2563eb', '#16a34a', '#f97316', '#7c3aed'];
            const centre = { lat: Number(state.latitude), lng: Number(state.longitude) };
            const map = new google.maps.Map(document.getElementById('zonesMap'), {
                center: centre,
                zoom: Number(state.zoom_level || 8),
                mapTypeId: 'roadmap',
                gestureHandling: 'greedy',
                fullscreenControl: true,
                streetViewControl: true,
                mapTypeControl: true,
            });

            new google.maps.TrafficLayer().setMap(map);

            const info = new google.maps.InfoWindow();
            const bounds = new google.maps.LatLngBounds();
            bounds.extend(centre);

            const provinceMarker = new google.maps.Marker({
                position: centre,
                map,
                title: state.name,
            });
            provinceMarker.addListener('click', () => {
                info.setContent(`<strong>${state.name}</strong><br>Saved traffic status: ${state.traffic_level}`);
                info.open(map, provinceMarker);
            });

            zones.forEach((zone, index) => {
                const colour = zoneColours[index] || '#2563eb';
                const zoneCentre = { lat: Number(zone.center_lat), lng: Number(zone.center_lng) };
                const start = { lat: Number(zone.boundary_start_lat), lng: Number(zone.boundary_start_lng) };
                const end = { lat: Number(zone.boundary_end_lat), lng: Number(zone.boundary_end_lng) };
                const radiusMeters = Number(zone.radius_km || 75) * 1000;

                new google.maps.Circle({
                    map,
                    center: zoneCentre,
                    radius: radiusMeters,
                    strokeColor: colour,
                    strokeOpacity: 0.85,
                    strokeWeight: 2,
                    fillColor: colour,
                    fillOpacity: 0.13,
                });

                new google.maps.Polyline({
                    map,
                    path: [start, end],
                    strokeColor: colour,
                    strokeOpacity: 0.95,
                    strokeWeight: 4,
                });

                const marker = new google.maps.Marker({
                    position: zoneCentre,
                    map,
                    title: zone.zone_name,
                });
                marker.addListener('click', () => {
                    info.setContent(`<strong>${zone.zone_name}</strong><br>Radius: ${zone.radius_km} km`);
                    info.open(map, marker);
                });

                bounds.extend(zoneCentre);
                bounds.extend(start);
                bounds.extend(end);
            });

            if (zones.length) {
                map.fitBounds(bounds, 64);
            }
        };
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key={{ $googleMapsKey }}&callback=initZoningTrafficMap"></script>
    @endpush
@else
    @push('scripts')
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script>
        const state = @json($state);
        const zones = @json($state->franchiseZones);
        const zoneColours = ['#2563eb', '#16a34a', '#f97316', '#7c3aed'];

        const map = L.map('zonesMap').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);

        L.marker([state.latitude, state.longitude]).addTo(map).bindPopup(`<strong>${state.name}</strong>`);

        const boundaryVertical = [[state.latitude + 1.1, state.longitude], [state.latitude - 1.1, state.longitude]];
        const boundaryHorizontal = [[state.latitude, state.longitude - 1.1], [state.latitude, state.longitude + 1.1]];
        L.polyline(boundaryVertical, { color: '#111827', weight: 3, dashArray: '8, 8' }).addTo(map);
        L.polyline(boundaryHorizontal, { color: '#111827', weight: 3, dashArray: '8, 8' }).addTo(map);

        const bounds = [];
        zones.forEach((zone, index) => {
            const colour = zoneColours[index] || '#2563eb';
            const centre = [zone.center_lat, zone.center_lng];
            const radiusMeters = Number(zone.radius_km || 75) * 1000;

            L.circle(centre, {
                radius: radiusMeters,
                color: colour,
                fillColor: colour,
                fillOpacity: 0.12,
                weight: 2
            }).addTo(map).bindPopup(`<strong>${zone.zone_name}</strong><br>Radius: ${zone.radius_km}km`);

            L.polyline([
                [zone.boundary_start_lat, zone.boundary_start_lng],
                [zone.boundary_end_lat, zone.boundary_end_lng]
            ], { color: colour, weight: 4 }).addTo(map);

            L.marker(centre).addTo(map).bindPopup(`<strong>${zone.zone_name}</strong>`);
            bounds.push(centre);
        });

        if (bounds.length) {
            map.fitBounds(bounds, { padding: [50, 50], maxZoom: 9 });
        }
    </script>
    @endpush
@endif