@extends('layouts.app')

@section('title', $state->name.' Franchise Zones')

@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 }} Franchise Zones</h1>
        <p class="page-subtitle">The state is divided into four default franchise zones. Update boundary coordinates and radius below, then save. This is the control card, because apparently maps now need spreadsheets to feel complete.</p>
    </div>
    <div class="actions">
        <a class="btn secondary" href="{{ route('monitor.index') }}">Back to Monitor</a>
        <a class="btn" href="{{ route('monitor.traffic-map', $state) }}">Open Traffic Map</a>
    </div>
</div>

<div class="card">
    <div id="zonesMap" class="map-box"></div>
</div>

<div class="card">
    <h2 style="margin-top:0;">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 limit.</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

@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