@extends('layouts.app')

@section('title', 'Doctor routes map – Gap Finder Analytics')

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" crossorigin="">
<style>
    .map-container-wrap { position: relative; width: 100%; }
    #map { height: calc(100vh - 200px); min-height: 420px; width: 100%; border-radius: var(--radius); border: 1px solid var(--border); }
    .map-container-wrap.map-fullscreen #map { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; min-height: 100vh; border-radius: 0; z-index: 9999; }
    .map-container-wrap.map-fullscreen .map-fullscreen-close { display: block !important; }
    .map-fullscreen-btn { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 1000; padding: 0.4rem 0.75rem; font-size: 0.875rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-card); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
    .map-fullscreen-btn:hover { background: var(--bg); }
    .map-fullscreen-close { display: none; position: fixed; top: 0.5rem; right: 0.5rem; z-index: 10000; padding: 0.5rem 1rem; font-size: 0.875rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-card); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
    .map-fullscreen-close:hover { background: var(--bg); }
    .map-page { display: flex; flex-direction: column; gap: 1rem; }
    .map-employee-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 0.5rem; }
    .map-employee-bar label { font-weight: 600; margin: 0; }
    .map-employee-bar input[type="text"] { width: 220px; }
    .map-employee-bar select { min-width: 240px; }
    .map-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.75rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.875rem; }
    .map-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; padding: 0.75rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.875rem; }
    .map-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
    .map-legend .dot { width: 12px; height: 12px; border-radius: 50%; }
    .map-note { color: var(--text-muted); font-size: 0.875rem; }
    .map-empty-msg { padding: 0.75rem; background: var(--accent-soft); border: 1px solid rgba(91,141,239,0.35); border-radius: var(--radius-sm); color: var(--text); font-size: 0.875rem; }
    .map-empty-msg a { color: var(--accent); font-weight: 600; }
    .map-selected-employees { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1rem 0; font-size: 0.85rem; }
    .map-selected-employees-label { font-weight: 600; margin-right: 0.25rem; }
    .map-selected-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.5rem 0.15rem 0.4rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); }
    .map-selected-pill .pill-dot { width: 10px; height: 10px; border-radius: 50%; }
    .map-selected-pill button { border: none; background: transparent; cursor: pointer; padding: 0 0.15rem; font-size: 0.8rem; line-height: 1; }
    .leaflet-draw-toolbar a { background-color: var(--bg-card) !important; }
    .stop-marker { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #2563eb; color: #fff; font-weight: 700; font-size: 12px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
    .stop-number-icon { background: none !important; border: none !important; }
</style>
@endpush

@section('content')
    <h1>Doctor routes map</h1>
    <p class="map-note">Select an employee to display their doctors on the map. Path is drawn in the same sequence as in the imported sheet. You can also draw on the map and save custom overlays.</p>

    <div class="map-employee-bar">
        <label for="employee-search">Search employee:</label>
        <input type="text" id="employee-search" placeholder="Type to filter by name or ID..." autocomplete="off">
        <label for="employee-select">Select employee:</label>
        <select id="employee-select">
            <option value="">— Select employee to display route —</option>
            @foreach ($employeesWithRoutes as $emp)
                <option value="{{ $emp->id }}" data-name="{{ $emp->name }}" data-ref="{{ $emp->employee_reference_id ?? '' }}" {{ (isset($selectedEmployeeId) && $selectedEmployeeId == $emp->id) ? 'selected' : '' }}>{{ $emp->name }}{{ $emp->employee_reference_id ? ' (Ref: ' . $emp->employee_reference_id . ')' : '' }} (ID: {{ $emp->id }})</option>
            @endforeach
        </select>
        <button type="button" id="btn-load-route" class="btn btn-primary">Display on map</button>
        <button type="button" id="btn-remove-route" class="btn btn-ghost">Remove from map</button>
    </div>

    <div class="map-selected-employees" id="selected-employees">
        <span class="map-selected-employees-label">On map:</span>
        <span class="muted">No employees yet. Select one and click “Display on map”.</span>
    </div>

    @if ($employeesWithRoutes->isEmpty())
        <div class="map-empty-msg">
            <strong>No employees with doctor data yet.</strong> Import a <strong>location sheet</strong> (e.g. <code>doctor_db.xlsx</code>) from <a href="{{ route('imports.index') }}">Imports</a>. Required columns: <strong>EmployeeName</strong>, <strong>DoctorName</strong>, <strong>pLat</strong>, <strong>pLng</strong>; optional: EmployeeReferenceId, DesignationName, BaseTownName, TeamName, DoctorCode, DoctorSpecialty. Path order follows row order per employee.
        </div>
    @endif

    <div class="map-toolbar">
        <label class="inline">Save current drawing:</label>
        <input type="text" id="saved-map-name" placeholder="Map name" maxlength="255" style="width: 180px;">
        <button type="button" id="btn-save-map" class="btn btn-primary">Save map</button>
        <label class="inline">Load saved map (overlay):</label>
        <select id="saved-map-select" style="min-width: 160px;">
            <option value="">— Select to load —</option>
            @foreach ($savedMaps as $sm)
                <option value="{{ $sm->id }}">{{ $sm->name }} ({{ $sm->updated_at->format('M j, Y') }})</option>
            @endforeach
        </select>
        <button type="button" id="btn-load-map" class="btn btn-ghost">Load</button>
        <button type="button" id="btn-clear-drawing" class="btn btn-ghost">Clear drawing only</button>
        <label class="inline"><input type="checkbox" id="toggle-paths" checked> Show route lines</label>
        <span class="muted">Border:</span>
        <label class="inline"><input type="radio" name="border-mode" id="border-mode-polygon" value="polygon" checked> Polygon</label>
        <label class="inline"><input type="radio" name="border-mode" id="border-mode-circle" value="circle"> Circle</label>
    </div>

    <div class="map-page">
        <div class="map-legend" id="legend"></div>
        <div class="map-container-wrap" id="map-container-wrap">
            <button type="button" class="map-fullscreen-btn" id="btn-enlarge-map" title="Enlarge map">Enlarge map</button>
            <button type="button" class="map-fullscreen-close" id="btn-close-enlarge" title="Exit full screen">Exit full screen</button>
            <div id="map"></div>
        </div>
    </div>

    <div class="card mt-2">
        <h2>Employees with doctor data (from sheet)</h2>
        <p class="muted">Select an employee above to see their route. Ref ID and ASM/HOS come from the imported sheet (e.g. doctor_db.xlsx).</p>
        <div class="table-wrap">
            <table>
                <thead>
                    <tr><th>Employee (MR)</th><th>Ref ID</th><th>ASM</th><th>HOS</th><th>Stops</th></tr>
                </thead>
                <tbody>
                    @forelse ($mrsWithHierarchy as $mr)
                        <tr>
                            <td>{{ $mr->name }}</td>
                            <td>{{ $mr->employee_reference_id ?? '–' }}</td>
                            <td>{{ $mr->asm_name ?? '–' }}</td>
                            <td>{{ $mr->hos_name ?? '–' }}</td>
                            <td>{{ $mr->doctorRoutes()->count() }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="muted">Import a location sheet (e.g. doctor_db.xlsx) with EmployeeName, DoctorName, pLat, pLng.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js" crossorigin=""></script>
    <script>
(function () {
    var initialRoute = @json($initialRoute);
    var savedMaps = @json($savedMaps->keyBy('id'));
    var defaultCenter = [31.5, 74.3];
    var defaultZoom = 7;
    var routeColors = ['#2563eb', '#16a34a', '#e11d48', '#f97316', '#9333ea', '#0f766e'];
    var nextRouteColorIndex = 0;

    var map = L.map('map', { center: defaultCenter, zoom: defaultZoom });
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; OpenStreetMap' }).addTo(map);

    var markersLayer = L.layerGroup().addTo(map);
    var pathsLayer = L.layerGroup().addTo(map);
    var regionsLayer = L.layerGroup().addTo(map);
    var showPaths = true;
    var borderMode = 'polygon'; // 'polygon' or 'circle'
    var employeeRoutes = {}; // mr_id => { markers: [], polyline, regionShape, color, stops, name, points }

    function getColorForMr(mrId) {
        if (employeeRoutes[mrId] && employeeRoutes[mrId].color) {
            return employeeRoutes[mrId].color;
        }
        var color = routeColors[nextRouteColorIndex % routeColors.length];
        nextRouteColorIndex++;
        return color;
    }

    function renderSelectedEmployees() {
        var container = document.getElementById('selected-employees');
        if (!container) return;
        var ids = Object.keys(employeeRoutes);
        if (!ids.length) {
            container.innerHTML = '<span class="map-selected-employees-label">On map:</span><span class="muted">No employees yet. Select one and click “Display on map”.</span>';
            return;
        }
        var html = '<span class="map-selected-employees-label">On map:</span>' + ids.map(function (mrId) {
            var info = employeeRoutes[mrId];
            return '<span class="map-selected-pill" data-mr-id="' + mrId + '"><span class="pill-dot" style="background:' + info.color + ';"></span>' +
                info.name +
                '<button type="button" class="pill-remove" title="Remove from map">×</button></span>';
        }).join(' ');
        container.innerHTML = html;
    }

    function updateLegend() {
        var legendEl = document.getElementById('legend');
        var ids = Object.keys(employeeRoutes);
        if (!ids.length) {
            legendEl.innerHTML = '<span class="muted">Select an employee and click \"Display route\" to show their doctors and path (sequence from sheet). You can add multiple employees.</span>';
            renderSelectedEmployees();
            return;
        }
        var html = ids.map(function (mrId) {
            var info = employeeRoutes[mrId];
            return '<span><span class=\"dot\" style=\"background:' + info.color + '\"></span> ' +
                info.name + ' (' + info.stops + ' stops)</span>';
        }).join(' ');
        legendEl.innerHTML = html;
        renderSelectedEmployees();
    }

    function clearRouteForMr(mrId) {
        var existing = employeeRoutes[mrId];
        if (!existing) return;
        existing.markers.forEach(function (m) { markersLayer.removeLayer(m); });
        if (existing.polyline) {
            pathsLayer.removeLayer(existing.polyline);
        }
        if (existing.regionShape) {
            regionsLayer.removeLayer(existing.regionShape);
        }
        delete employeeRoutes[mrId];
    }

    // Update marker icons to visually highlight locations shared by multiple employees
    function updateOverlappingPoints() {
        var locations = {};
        markersLayer.eachLayer(function (layer) {
            if (!layer.getLatLng) return;
            var ll = layer.getLatLng();
            var key = ll.lat.toFixed(5) + '|' + ll.lng.toFixed(5);
            if (!locations[key]) locations[key] = [];
            locations[key].push(layer);
        });

        Object.keys(locations).forEach(function (key) {
            var group = locations[key];
            // Only treat as overlap when there are pins from different employees at the same location
            var mrIds = {};
            group.forEach(function (marker) {
                var opts = marker.options || {};
                if (opts.mrId != null) {
                    mrIds[String(opts.mrId)] = true;
                }
            });
            var distinctCount = Object.keys(mrIds).length;
            var isOverlap = distinctCount > 1;
            group.forEach(function (marker) {
                var opts = marker.options || {};
                var color = opts.baseColor || '#2563eb';
                var num = opts.stopNum != null ? opts.stopNum : '';
                var highlightStyle = isOverlap
                    ? 'box-shadow: 0 0 0 3px rgba(250,204,21,0.9); border-width:3px;'
                    : '';
                var icon = L.divIcon({
                    className: 'stop-number-icon',
                    html: '<span class="stop-marker" style="background:' + color + ';' + highlightStyle + '">' + num + '</span>',
                    iconSize: [28, 28],
                    iconAnchor: [14, 14]
                });
                marker.setIcon(icon);
            });
        });
    }

    // Compute a tight convex hull polygon around a set of lat/lng points
    function computeRegionHull(points) {
        if (!points || points.length < 3) {
            return null;
        }
        var pts = points.map(function (p) {
            return { x: p.lng, y: p.lat };
        });
        pts.sort(function (a, b) {
            return a.x === b.x ? a.y - b.y : a.x - b.x;
        });
        function cross(o, a, b) {
            return (a.x - o.x) * (b.y - o.y) - (a.y - o.y) * (b.x - o.x);
        }
        var lower = [];
        for (var i = 0; i < pts.length; i++) {
            while (lower.length >= 2 && cross(lower[lower.length - 2], lower[lower.length - 1], pts[i]) <= 0) {
                lower.pop();
            }
            lower.push(pts[i]);
        }
        var upper = [];
        for (var j = pts.length - 1; j >= 0; j--) {
            while (upper.length >= 2 && cross(upper[upper.length - 2], upper[upper.length - 1], pts[j]) <= 0) {
                upper.pop();
            }
            upper.push(pts[j]);
        }
        upper.pop();
        lower.pop();
        var hull = lower.concat(upper);
        if (hull.length < 3) {
            return null;
        }
        return hull.map(function (p) {
            return [p.y, p.x]; // [lat, lng]
        });
    }

    function buildRegionShapeForEmployee(color, validPoints) {
        if (!validPoints || !validPoints.length) return null;

        // Center of points
        var centerLat = 0, centerLng = 0;
        validPoints.forEach(function (p) {
            centerLat += p.lat;
            centerLng += p.lng;
        });
        centerLat /= validPoints.length;
        centerLng /= validPoints.length;

        if (borderMode === 'polygon' && validPoints.length >= 3) {
            var hullLatLngs = computeRegionHull(validPoints);
            if (hullLatLngs) {
                return L.polygon(hullLatLngs, {
                    color: color,
                    weight: 2,
                    fill: false,
                    dashArray: '4,4'
                }).addTo(regionsLayer);
            }
            // fall through to circle if hull not available
        }

        // Circle mode or not enough points for a hull
        var centerLatRad = centerLat * Math.PI / 180;
        var maxDistKm = 0;
        validPoints.forEach(function (p) {
            var dLat = (p.lat - centerLat) * Math.PI / 180;
            var dLng = (p.lng - centerLng) * Math.PI / 180;
            var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                Math.cos(centerLatRad) * Math.cos(p.lat * Math.PI / 180) *
                Math.sin(dLng / 2) * Math.sin(dLng / 2);
            var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
            var d = 6371 * c; // km
            if (d > maxDistKm) maxDistKm = d;
        });
        var radiusMeters = maxDistKm * 1000 * 1.2;
        if (!radiusMeters || radiusMeters < 300) {
            radiusMeters = 300;
        }
        if (radiusMeters > 8000) {
            radiusMeters = 8000;
        }
        return L.circle([centerLat, centerLng], {
            radius: radiusMeters,
            color: color,
            weight: 2,
            fill: false,
            dashArray: '4,4'
        }).addTo(regionsLayer);
    }

    function addRoute(route) {
        if (!route || !route.points || route.points.length === 0) {
            alert('No route with coordinates found for this employee.');
            return;
        }
        // Step 1: convert to numeric lat/lng and drop obvious garbage (NaN, 0/0, outside world bounds)
        var numericPoints = route.points
            .map(function (p) {
                var lat = parseFloat(p.lat);
                var lng = parseFloat(p.lng);
                return {
                    lat: lat,
                    lng: lng,
                    name: p.name,
                    clinic: p.clinic,
                    stop_number: p.stop_number
                };
            })
            .filter(function (p) {
                return !isNaN(p.lat) && !isNaN(p.lng) &&
                    !(p.lat === 0 && p.lng === 0) &&
                    p.lat <= 90 && p.lat >= -90 &&
                    p.lng <= 180 && p.lng >= -180;
            });
        if (!numericPoints.length) {
            alert('No valid coordinates found for this employee (lat/lng out of range).');
            return;
        }
        // Step 2: cluster filter – keep points reasonably close to the average
        var sumLat = 0, sumLng = 0;
        numericPoints.forEach(function (p) {
            sumLat += p.lat;
            sumLng += p.lng;
        });
        var avgLat = sumLat / numericPoints.length;
        var avgLng = sumLng / numericPoints.length;
        var validPoints = numericPoints.filter(function (p) {
            return Math.abs(p.lat - avgLat) <= 5 && Math.abs(p.lng - avgLng) <= 5;
        });
        if (!validPoints.length) {
            // If the cluster filter removed everything, fall back to numericPoints
            validPoints = numericPoints;
        }

        var mrId = route.mr_id != null ? String(route.mr_id) : (route.mr_name || '');

        // Clear any existing overlays for this MR
        clearRouteForMr(mrId);

        var color = getColorForMr(mrId);
        var points = validPoints.map(function (p) { return [p.lat, p.lng]; });
        var markers = [];
        var polyline = null;

        if (points.length >= 2) {
            polyline = L.polyline(points, { color: color, weight: 5, opacity: 0.9 })
                .bindPopup('<strong>' + route.mr_name + '</strong><br>' + validPoints.length + ' areas')
                .addTo(pathsLayer);
        }

        var bounds = [];
        validPoints.forEach(function (p, i) {
            var stopNum = p.stop_number != null ? p.stop_number : (i + 1);
            var icon = L.divIcon({
                className: 'stop-number-icon',
                html: '<span class="stop-marker" style="background:' + color + ';">' + stopNum + '</span>',
                iconSize: [28, 28],
                iconAnchor: [14, 14]
            });
            var marker = L.marker([p.lat, p.lng], { icon: icon, baseColor: color, stopNum: stopNum, mrId: mrId })
                .bindPopup('<strong>' + route.mr_name + '</strong><br>Area ' + stopNum + ': ' + (p.name || 'Doctor') + (p.clinic ? ' – ' + p.clinic : ''))
                .addTo(markersLayer);
            markers.push(marker);
            bounds.push([p.lat, p.lng]);
        });

        // Region highlight using selected border mode
        var regionShape = buildRegionShapeForEmployee(color, validPoints);

        employeeRoutes[mrId] = {
            markers: markers,
            polyline: polyline,
            regionShape: regionShape,
            color: color,
            stops: validPoints.length,
            name: route.mr_name,
            points: validPoints
        };

        updateLegend();
        updateOverlappingPoints();
        // Fit to all currently visible markers (across all employees) so the map doesn't jump to extreme bounds
        var allBounds = [];
        markersLayer.eachLayer(function (layer) {
            if (layer.getLatLng) {
                var ll = layer.getLatLng();
                allBounds.push([ll.lat, ll.lng]);
            }
        });
        if (allBounds.length) {
            map.fitBounds(allBounds, { padding: [30, 30], maxZoom: 14 });
        }
    }

    // Employee search: filter select options
    var employeeSelect = document.getElementById('employee-select');
    var employeeSearch = document.getElementById('employee-search');
    if (employeeSearch) {
        employeeSearch.addEventListener('input', function () {
            var q = this.value.toLowerCase().trim();
            var opts = employeeSelect.querySelectorAll('option[value]');
            opts.forEach(function (opt) {
                var show = !q || opt.textContent.toLowerCase().indexOf(q) >= 0 || (opt.getAttribute('data-name') || '').toLowerCase().indexOf(q) >= 0;
                opt.style.display = show ? '' : 'none';
            });
        });
    }

    function loadRouteForEmployee(id) {
        if (!id) { return; }
        fetch('{{ url("map/route") }}/' + id, { headers: { 'Accept': 'application/json' } })
            .then(function (r) { return r.json(); })
            .then(function (data) { addRoute(data); })
            .catch(function () { alert('Failed to load route for this employee.'); });
    }

    document.getElementById('btn-load-route').addEventListener('click', function () {
        var id = document.getElementById('employee-select').value;
        if (!id) { alert('Select an employee first.'); return; }
        loadRouteForEmployee(id);
        var url = new URL(window.location.href);
        url.searchParams.set('employee_id', id);
        window.history.replaceState({}, '', url);
    });

    if (initialRoute) {
        addRoute(initialRoute);
    } else {
        updateLegend();
    }

    // When changing select, optionally auto-load; clearing selection clears all routes
    employeeSelect.addEventListener('change', function () {
        var id = this.value;
        var url = new URL(window.location.href);
        if (id) {
            loadRouteForEmployee(id);
            url.searchParams.set('employee_id', id);
        } else {
            // Clear all MR routes
            Object.keys(employeeRoutes).forEach(function (mrId) {
                clearRouteForMr(mrId);
            });
            markersLayer.clearLayers();
            pathsLayer.clearLayers();
            regionsLayer.clearLayers();
            employeeRoutes = {};
            updateLegend();
            url.searchParams.delete('employee_id');
        }
        window.history.replaceState({}, '', url);
    });

    // Editable drawing layer
    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);

    var drawControl = new L.Control.Draw({
        draw: {
            // Use polygon as the primary \"route\" drawing tool so clicking the first point closes the shape
            polyline: false,
            polygon: { shapeOptions: { color: '#eab308', fillColor: '#eab308', fillOpacity: 0.08, weight: 3 } },
            rectangle: { shapeOptions: { color: '#5b8def', fillOpacity: 0.2 } },
            circle: { shapeOptions: { color: '#5b8def', fillOpacity: 0.2 } },
            marker: {},
            circlemarker: false
        },
        edit: { featureGroup: drawnItems }
    });
    map.addControl(drawControl);

    map.on(L.Draw.Event.CREATED, function (e) {
        var layer = e.layer;
        // For custom polylines, automatically close the line back to the start point
        if (layer instanceof L.Polyline && !(layer instanceof L.Polygon)) {
            var latlngs = layer.getLatLngs();
            if (latlngs && latlngs.length > 1) {
                var first = latlngs[0];
                var last = latlngs[latlngs.length - 1];
                if (first.lat !== last.lat || first.lng !== last.lng) {
                    latlngs.push(first);
                    layer.setLatLngs(latlngs);
                }
            }
        }
        drawnItems.addLayer(layer);
    });

    function getDrawnGeoJSON() {
        var fc = { type: 'FeatureCollection', features: [] };
        drawnItems.eachLayer(function (layer) {
            if (layer.toGeoJSON) fc.features.push(layer.toGeoJSON());
        });
        return fc;
    }

    function loadGeoJSONToDrawn(geojson) {
        drawnItems.clearLayers();
        if (!geojson || !geojson.features || !geojson.features.length) return;
        L.geoJSON(geojson, {
            style: function () { return { color: '#eab308', weight: 3, fillOpacity: 0.2 }; },
            onEachFeature: function (feature, layer) { drawnItems.addLayer(layer); }
        });
    }

    document.getElementById('btn-save-map').addEventListener('click', function () {
        var name = document.getElementById('saved-map-name').value.trim();
        if (!name) { alert('Enter a map name.'); return; }
        var geojson = getDrawnGeoJSON();
        var btn = this;
        btn.disabled = true;
        fetch('{{ route("map.store") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, 'Accept': 'application/json' },
            body: JSON.stringify({ name: name, geojson: geojson })
        })
        .then(function (r) { return r.json(); })
        .then(function (data) {
            btn.disabled = false;
            if (data.id) {
                var opt = document.createElement('option');
                opt.value = data.id;
                opt.textContent = data.name + ' (just saved)';
                document.getElementById('saved-map-select').appendChild(opt);
                document.getElementById('saved-map-name').value = '';
                alert('Map saved.');
            }
        })
        .catch(function () { btn.disabled = false; alert('Failed to save.'); });
    });

    document.getElementById('btn-load-map').addEventListener('click', function () {
        var id = document.getElementById('saved-map-select').value;
        if (!id) { alert('Select a saved map.'); return; }
        fetch('{{ url("map/saved") }}/' + id, { headers: { 'Accept': 'application/json' } })
        .then(function (r) { return r.json(); })
        .then(loadGeoJSONToDrawn);
    });

    document.getElementById('btn-clear-drawing').addEventListener('click', function () {
        drawnItems.clearLayers();
    });

    function recomputeAndFitAllBounds() {
        var allBounds = [];
        markersLayer.eachLayer(function (layer) {
            if (layer.getLatLng) {
                var ll = layer.getLatLng();
                allBounds.push([ll.lat, ll.lng]);
            }
        });
        if (allBounds.length) {
            map.fitBounds(allBounds, { padding: [30, 30], maxZoom: 14 });
        } else {
            map.setView(defaultCenter, defaultZoom);
        }
        updateOverlappingPoints();
    }

    // Remove selected employee from map (button)
    document.getElementById('btn-remove-route').addEventListener('click', function () {
        var id = employeeSelect.value;
        if (!id) {
            alert('Select an employee first.');
            return;
        }
        var mrId = String(id);
        clearRouteForMr(mrId);
        updateLegend();
        recomputeAndFitAllBounds();
    });

    // Selected employees pill interactions (remove / focus)
    var selectedEmployeesContainer = document.getElementById('selected-employees');
    if (selectedEmployeesContainer) {
        selectedEmployeesContainer.addEventListener('click', function (e) {
            var pill = e.target.closest('.map-selected-pill');
            if (!pill) return;
            var mrId = pill.getAttribute('data-mr-id');
            if (!mrId) return;
            if (e.target.classList.contains('pill-remove')) {
                clearRouteForMr(mrId);
                updateLegend();
                recomputeAndFitAllBounds();
            } else {
                // Focus map on this employee's markers
                var info = employeeRoutes[mrId];
                if (!info || !info.markers || !info.markers.length) return;
                var bounds = [];
                info.markers.forEach(function (m) {
                    var ll = m.getLatLng();
                    bounds.push([ll.lat, ll.lng]);
                });
                if (bounds.length) {
                    map.fitBounds(bounds, { padding: [30, 30], maxZoom: 14 });
                }
            }
        });
    }

    // Border mode controls (polygon vs circle)
    var borderPolygonRadio = document.getElementById('border-mode-polygon');
    var borderCircleRadio = document.getElementById('border-mode-circle');
    function applyBorderMode(mode) {
        borderMode = mode;
        // Rebuild region shapes for all employees
        regionsLayer.clearLayers();
        Object.keys(employeeRoutes).forEach(function (mrId) {
            var info = employeeRoutes[mrId];
            if (!info || !info.points || !info.points.length) return;
            var shape = buildRegionShapeForEmployee(info.color, info.points);
            info.regionShape = shape;
        });
    }
    if (borderPolygonRadio) {
        borderPolygonRadio.addEventListener('change', function () {
            if (this.checked) applyBorderMode('polygon');
        });
    }
    if (borderCircleRadio) {
        borderCircleRadio.addEventListener('change', function () {
            if (this.checked) applyBorderMode('circle');
        });
    }

    // Toggle showing path lines (markers always remain)
    var togglePaths = document.getElementById('toggle-paths');
    if (togglePaths) {
        togglePaths.addEventListener('change', function () {
            showPaths = this.checked;
            if (showPaths) {
                map.addLayer(pathsLayer);
            } else {
                map.removeLayer(pathsLayer);
            }
        });
    }

    // Enlarge / full-screen map
    var mapWrap = document.getElementById('map-container-wrap');
    document.getElementById('btn-enlarge-map').addEventListener('click', function () {
        mapWrap.classList.add('map-fullscreen');
        map.invalidateSize();
    });
    document.getElementById('btn-close-enlarge').addEventListener('click', function () {
        mapWrap.classList.remove('map-fullscreen');
        map.invalidateSize();
    });
})();
    </script>
@endsection