{% extends 'base/layout.html' %}
{% load static %}

{% block title %}Route Planner{% endblock %}

{% block content %}
<style>
    /* Map card fills full viewport below the navbar */
    .pathways-map-wrapper {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }
    .pathways-map-wrapper .card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        margin: 0;
    }
    .pathways-map-wrapper .card-body {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        flex: 1;
        min-height: 0;
        overflow: hidden;
        padding: 0 !important;
    }
    #pathways-map .leaflet-container {
        width: 100% !important;
    }
    .pw-map-flex {
        display: flex;
        width: 100%;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }
    .pw-map-flex #pathways-map {
        flex: 1;
        min-width: 0;
        min-height: 0;
    }

    /* --- Sidebar --- */
    .pw-sidebar {
        width: 380px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        background: var(--tblr-card-bg, var(--tblr-body-bg, #fff));
        color: var(--tblr-body-color, inherit);
        border-left: 1px solid var(--tblr-border-color, #dee2e6);
        overflow-y: auto;
    }
    /* TomSelect dropdowns: overlay instead of pushing content down */
    .pw-sidebar .ts-wrapper {
        position: relative;
    }
    .pw-sidebar .ts-dropdown {
        position: absolute;
        z-index: 1000;
        max-height: 200px;
        overflow-y: auto;
    }
    .pw-sidebar-section {
        border-bottom: 1px solid var(--tblr-border-color, #dee2e6);
        padding: 12px 14px;
    }
    .pw-sidebar-section:last-child {
        border-bottom: none;
    }
    .pw-section-title {
        font-size: 0.8em;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--tblr-muted-color, #667382);
        margin-bottom: 10px;
    }
    .pw-constraint-card {
        border-radius: 6px;
        padding: 10px 12px;
        margin-bottom: 8px;
        background: var(--tblr-card-bg, var(--tblr-bg-surface, #fff));
        color: var(--tblr-body-color, #212529);
        position: relative;
    }
    .pw-constraint-include {
        border: 1px solid var(--tblr-green, #2fb344);
        border-left: 3px solid var(--tblr-green, #2fb344);
    }
    .pw-constraint-avoid {
        border: 1px solid var(--tblr-red, #d63939);
        border-left: 3px solid var(--tblr-red, #d63939);
    }
    .pw-constraint-card .pw-constraint-label {
        font-size: 0.8em;
        font-weight: 600;
        margin-bottom: 6px;
    }
    .pw-constraint-include .pw-constraint-label { color: var(--tblr-green, #2fb344); }
    .pw-constraint-avoid .pw-constraint-label { color: var(--tblr-red, #d63939); }
    .pw-constraint-card .btn-close {
        position: absolute;
        top: 8px;
        right: 8px;
        font-size: 0.55em;
    }
    .pw-add-constraint-menu .dropdown-header {
        font-size: 0.7em;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 6px 16px 4px;
    }
    .pw-add-constraint-menu .dropdown-item {
        font-size: 0.85em;
        padding: 4px 16px;
    }
    .pw-add-constraint-menu .dropdown-item i {
        width: 18px;
        display: inline-block;
        text-align: center;
    }
    .pw-pref-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }
    .pw-pref-row label {
        font-size: 0.85em;
        white-space: nowrap;
        margin: 0;
    }
    .pw-pref-row .form-range {
        flex: 1;
    }
    .pw-pref-row .pw-pref-value {
        font-size: 0.8em;
        color: var(--tblr-muted-color, #667382);
        min-width: 36px;
        text-align: right;
    }
    .pw-check-row {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 6px;
        font-size: 0.85em;
    }
    #planner-results-section {
        min-height: 0;
        flex-shrink: 0;
    }
    /* Empty state in the results area */
    .pw-results-empty {
        text-align: center;
        padding: 16px 14px;
        color: var(--tblr-muted-color, #667382);
        font-size: 0.85em;
    }
    /* Hop list — interleaved structures + pathways */
    .pw-hop-list {
        font-size: 0.85em;
    }
    .pw-hop-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 5px 0;
        cursor: pointer;
        border-radius: 4px;
        transition: background 0.1s;
    }
    .pw-hop-item:hover {
        background: var(--tblr-border-color-translucent, rgba(0,0,0,0.06));
    }
    .pw-hop-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
        margin-left: 4px;
    }
    .pw-hop-start .pw-hop-dot { width: 12px; height: 12px; }
    .pw-hop-end .pw-hop-dot { width: 12px; height: 12px; }
    .pw-hop-line {
        width: 2px;
        height: 16px;
        background: var(--tblr-border-color, #dee2e6);
        flex-shrink: 0;
        margin-left: 8px;
    }
    .pw-hop-label {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .pw-hop-label a {
        color: inherit;
        text-decoration: none;
    }
    .pw-hop-label a:hover {
        text-decoration: underline;
    }
    .pw-hop-type {
        font-size: 0.75em;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--tblr-muted-color, #667382);
        flex-shrink: 0;
    }
    .pw-hop-length {
        font-size: 0.8em;
        color: var(--tblr-muted-color, #667382);
        flex-shrink: 0;
    }
    .pw-hop-structure {
        font-weight: 600;
    }
    .pw-hop-pathway {
        padding-left: 2px;
    }
    .pw-hop-active {
        background: var(--tblr-primary-lt, rgba(32,107,196,0.1));
    }
    .pw-route-summary {
        display: flex;
        gap: 10px;
        margin-bottom: 10px;
        font-size: 0.85em;
    }
    .pw-route-stat {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 10px;
        border-radius: 4px;
        font-weight: 600;
        background: var(--tblr-border-color-translucent, rgba(0,0,0,0.06));
    }
    .pw-cable-info {
        font-size: 0.85em;
        padding: 8px 10px;
        border-radius: 4px;
        margin-bottom: 10px;
        background: var(--tblr-azure-lt, rgba(32,107,196,0.08));
        border: 1px solid var(--tblr-azure, #206bc4);
    }
    .pw-cable-info i { margin-right: 4px; }
    /* Style constraint checkboxes inline */
    .pw-constraint-checks {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4px 8px;
    }
    .pw-constraint-checks .form-check {
        margin: 0;
        padding-left: 1.6em;
        white-space: nowrap;
    }
    .pw-constraint-checks .form-check-label {
        font-size: 0.8em;
        color: var(--tblr-body-color, #212529);
    }
    .pw-constraint-checks .form-check-input {
        background-color: var(--tblr-bg-surface-secondary, #f8f9fa);
        border-color: var(--tblr-border-color, #dee2e6);
    }
    .pw-constraint-checks .form-check-input:checked {
        background-color: var(--tblr-primary, #206bc4);
        border-color: var(--tblr-primary, #206bc4);
    }
    /* Spinner */
    .pw-find-spinner {
        display: none;
    }
    .htmx-request .pw-find-spinner {
        display: inline-block;
    }
    .htmx-request .pw-find-text {
        display: none;
    }
</style>

<div class="pathways-map-wrapper">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title mb-0">
                <i class="mdi mdi-map-search-outline"></i> Route Planner
            </h3>
        </div>
        <div class="card-body p-0">
            <div class="pw-map-flex">
                <div id="pathways-map" style="min-height: 400px; position: relative;"></div>

                <div class="pw-sidebar">
                    <form id="route-planner-form"
                          hx-post="{% url 'plugins:netbox_pathways:route_planner_find' %}"
                          hx-target="#planner-results"
                          hx-swap="innerHTML"
                          hx-indicator="#route-planner-form">
                        {% csrf_token %}
                        {% if cable %}
                        <input type="hidden" name="cable_pk" value="{{ cable.pk }}">
                        {% endif %}

                        {# === Endpoints === #}
                        <div class="pw-sidebar-section">
                            <div class="pw-section-title">Endpoints</div>
                            {% if cable %}
                            <div class="pw-cable-info">
                                <i class="mdi mdi-cable-data"></i>
                                Route for cable <a href="/dcim/cables/{{ cable.pk }}/">{{ cable }}</a>
                            </div>
                            <div class="pw-cable-info" style="background: var(--tblr-bg-surface-secondary, rgba(0,0,0,0.03)); border-color: var(--tblr-border-color, #dee2e6);">
                                <div><small class="text-muted">Start:</small> <strong>{{ start_structure|default:"(unresolved)" }}</strong></div>
                                <div><small class="text-muted">End:</small> <strong>{{ end_structure|default:"(unresolved)" }}</strong></div>
                            </div>
                            {# Hidden inputs carry the values since selects are omitted #}
                            {% if start_structure %}
                            <input type="hidden" name="start_structure" value="{{ start_structure.pk }}">
                            {% endif %}
                            {% if end_structure %}
                            <input type="hidden" name="end_structure" value="{{ end_structure.pk }}">
                            {% endif %}
                            {% else %}
                            <div class="mb-2">
                                <label class="form-label" style="font-size:0.85em;" for="id_start_structure">Start</label>
                                {{ form.start_structure }}
                            </div>
                            <div>
                                <label class="form-label" style="font-size:0.85em;" for="id_end_structure">End</label>
                                {{ form.end_structure }}
                            </div>
                            {% endif %}
                        </div>

                        {# === Constraints === #}
                        <div class="pw-sidebar-section">
                            <div class="pw-section-title">Constraints</div>
                            <div id="constraint-cards"></div>
                            <div class="dropdown">
                                <button type="button" class="btn btn-sm btn-outline-primary dropdown-toggle"
                                        data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="mdi mdi-plus"></i> Add Constraint
                                </button>
                                <ul class="dropdown-menu pw-add-constraint-menu">
                                    <li><span class="dropdown-header text-green">
                                        <i class="mdi mdi-check-circle"></i> Must include</span></li>
                                    <li><a class="dropdown-item pw-add-constraint" href="#"
                                           data-type="must_pass_through">
                                        <i class="mdi mdi-map-marker-path"></i> Pass through structure(s)</a></li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li><span class="dropdown-header text-red">
                                        <i class="mdi mdi-close-circle"></i> Must avoid</span></li>
                                    <li><a class="dropdown-item pw-add-constraint" href="#"
                                           data-type="avoid_structures">
                                        <i class="mdi mdi-office-building"></i> Structure(s)</a></li>
                                    <li><a class="dropdown-item pw-add-constraint" href="#"
                                           data-type="avoid_cables">
                                        <i class="mdi mdi-cable-data"></i> Cable(s)</a></li>
                                    <li><a class="dropdown-item pw-add-constraint" href="#"
                                           data-type="avoid_circuits">
                                        <i class="mdi mdi-swap-horizontal"></i> Circuit(s)</a></li>
                                    <li><a class="dropdown-item pw-add-constraint" href="#"
                                           data-type="avoid_circuit_geometries">
                                        <i class="mdi mdi-vector-polyline"></i> Circuit geometry(s)</a></li>
                                    <li><a class="dropdown-item pw-add-constraint" href="#"
                                           data-type="avoid_pathway_types">
                                        <i class="mdi mdi-road-variant"></i> Pathway type(s)</a></li>
                                    <li><a class="dropdown-item pw-add-constraint" href="#"
                                           data-type="avoid_structure_types">
                                        <i class="mdi mdi-shape"></i> Structure type(s)</a></li>
                                    <li><a class="dropdown-item pw-add-constraint" href="#"
                                           data-type="avoid_tenants">
                                        <i class="mdi mdi-account-group"></i> Tenant(s)</a></li>
                                </ul>
                            </div>
                        </div>

                        {# === Preferences === #}
                        <div class="pw-sidebar-section">
                            <div class="pw-section-title">Preferences</div>
                            <div class="pw-pref-row">
                                <label for="prefer-in-use-slider">Prefer shared</label>
                                <input type="range" class="form-range" name="prefer_in_use"
                                       min="0" max="100" value="0" id="prefer-in-use-slider">
                                <span class="pw-pref-value" id="prefer-in-use-value">0%</span>
                            </div>
                            <div class="pw-pref-row">
                                <label for="max-divergence-slider">Max divergence</label>
                                <input type="range" class="form-range" name="max_divergence"
                                       min="100" max="500" step="10" value="200" id="max-divergence-slider">
                                <span class="pw-pref-value" id="max-divergence-value">200%</span>
                            </div>
                            <div class="pw-check-row">
                                <input type="checkbox" class="form-check-input" name="include_inactive"
                                       id="include-inactive">
                                <label for="include-inactive">Include inactive/retired</label>
                            </div>
                            <div class="pw-check-row">
                                <input type="checkbox" class="form-check-input"
                                       id="show-occupied">
                                <label for="show-occupied">Show occupied infrastructure</label>
                            </div>
                        </div>

                        {# === Find Route Button === #}
                        <div class="pw-sidebar-section" style="padding-top:8px; padding-bottom:8px;">
                            <button type="submit" class="btn btn-primary w-100">
                                <span class="pw-find-text">
                                    <i class="mdi mdi-map-search-outline"></i> Find Route
                                </span>
                                <span class="pw-find-spinner">
                                    <span class="spinner-border spinner-border-sm" role="status"></span>
                                    Finding...
                                </span>
                            </button>
                        </div>
                    </form>

                    {# === Results === #}
                    <div id="planner-results-section" class="pw-sidebar-section" style="padding:0;">
                        <div id="planner-results">
                            <div class="pw-results-empty">
                                <i class="mdi mdi-map-search-outline" style="font-size: 2rem; opacity: 0.3;"></i>
                                {% if cable %}
                                <p class="mt-1 mb-0">Click <strong>Find Route</strong> to plan the cable's route.</p>
                                {% else %}
                                <p class="mt-1 mb-0">Select endpoints and click <strong>Find Route</strong>.</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascript %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'netbox_pathways/vendor/leaflet/leaflet.css' %}" />
<link rel="stylesheet" href="{% static 'netbox_pathways/css/leaflet-theme.css' %}" />
<script src="{% static 'netbox_pathways/vendor/leaflet/leaflet.js' %}"></script>
{{ pathways_config|json_script:"pathways-config" }}
{{ map_init_config|json_script:"pathways-map-init" }}
{# PATHWAYS_CONFIG must be set before the bundle: its modules read it at load time. #}
<script>window.PATHWAYS_CONFIG=JSON.parse(document.getElementById('pathways-config').textContent);</script>
<script src="{% static 'netbox_pathways/dist/route-planner-map.min.js' %}"></script>
<script>
(function() {
    var MAP_INIT = JSON.parse(document.getElementById('pathways-map-init').textContent);

    // --- Viewport sizing ---
    function sizeMap() {
        var wrapper = document.querySelector('.pathways-map-wrapper');
        var el = document.getElementById('pathways-map');
        if (!wrapper || !el) return;
        var gap = 8;
        var wrapRect = wrapper.getBoundingClientRect();
        var wrapH = Math.max(400, window.innerHeight - wrapRect.top - gap);
        wrapper.style.height = wrapH + 'px';
        var flexWrap = el.parentElement;
        if (flexWrap) {
            var flexRect = flexWrap.getBoundingClientRect();
            var flexH = Math.max(300, window.innerHeight - flexRect.top - gap);
            flexWrap.style.height = flexH + 'px';
            el.style.height = flexH + 'px';
        }
        if (window._rpMap) window._rpMap.invalidateSize();
    }

    document.addEventListener('DOMContentLoaded', function() {
        sizeMap();

        try {
            window.initializeRoutePlannerMap('pathways-map', MAP_INIT);
        } catch (err) {
            console.error('[pathways] Map init failed:', err);
        }

        setTimeout(sizeMap, 200);
        setTimeout(sizeMap, 500);
        window.addEventListener('resize', sizeMap);

        // --- Constraint builder (event delegation on the dropdown menu) ---
        var constraintMenu = document.querySelector('.pw-add-constraint-menu');
        if (constraintMenu) {
            constraintMenu.addEventListener('click', function(e) {
                var link = e.target.closest('.pw-add-constraint');
                if (!link) return;
                e.preventDefault();
                var type = link.dataset.type;
                if (!type) return;
                var cards = document.getElementById('constraint-cards');
                if (!cards) return;
                if (cards.querySelector('[data-constraint-type="' + type + '"]')) return;
                var url = '{% url "plugins:netbox_pathways:route_planner_constraint" %}?type=' + type;
                var xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);
                xhr.onload = function() {
                    if (xhr.status === 200) {
                        cards.insertAdjacentHTML('beforeend', xhr.responseText);
                        // Trigger NetBox's re-initialization for TomSelect/api-select widgets
                        document.dispatchEvent(new CustomEvent('htmx:afterSettle'));
                    }
                };
                xhr.send();
            });
        }

        // Remove constraint card on close button click (delegated)
        document.getElementById('constraint-cards').addEventListener('click', function(e) {
            var closeBtn = e.target.closest('.btn-close');
            if (closeBtn) {
                var card = closeBtn.closest('.pw-constraint-card');
                if (card) card.remove();
            }
        });

        // --- Preferences: localStorage persistence ---
        var preferSlider = document.getElementById('prefer-in-use-slider');
        var preferDisplay = document.getElementById('prefer-in-use-value');
        if (preferSlider && preferDisplay) {
            var savedPrefer = localStorage.getItem('pw_prefer_in_use');
            if (savedPrefer !== null) { preferSlider.value = savedPrefer; preferDisplay.textContent = savedPrefer + '%'; }
            preferSlider.addEventListener('input', function() { preferDisplay.textContent = this.value + '%'; });
            preferSlider.addEventListener('change', function() { localStorage.setItem('pw_prefer_in_use', this.value); });
        }

        var divSlider = document.getElementById('max-divergence-slider');
        var divDisplay = document.getElementById('max-divergence-value');
        if (divSlider && divDisplay) {
            var savedDiv = localStorage.getItem('pw_max_divergence');
            if (savedDiv !== null) { divSlider.value = savedDiv; divDisplay.textContent = savedDiv + '%'; }
            divSlider.addEventListener('input', function() { divDisplay.textContent = this.value + '%'; });
            divSlider.addEventListener('change', function() { localStorage.setItem('pw_max_divergence', this.value); });
        }

        var inactiveCheck = document.getElementById('include-inactive');
        if (inactiveCheck) {
            var savedInactive = localStorage.getItem('pw_include_inactive');
            if (savedInactive === 'true') inactiveCheck.checked = true;
            inactiveCheck.addEventListener('change', function() {
                localStorage.setItem('pw_include_inactive', this.checked);
            });
        }

        // --- Show occupied infrastructure toggle ---
        var occupiedCheck = document.getElementById('show-occupied');
        var _occupiedLayer = null;
        var _apiBase = (window.PATHWAYS_CONFIG || {}).apiBase || '/api/plugins/pathways/geo/';

        function _clearOccupied() {
            if (_occupiedLayer) {
                if (window._rpMap) window._rpMap.removeLayer(_occupiedLayer);
                _occupiedLayer = null;
            }
        }

        function _loadOccupied() {
            _clearOccupied();
            if (!window._rpMap) return;
            var map = window._rpMap;
            var DIM = 0.35;
            var group = L.featureGroup();
            var pending = 2;

            function done() {
                pending--;
                if (pending <= 0) {
                    group.addTo(map);
                    _occupiedLayer = group;
                }
            }

            var pop = window.pwPopover;
            var tc = window.pwTitleCase;

            // Fetch occupied structures — same icons, dimmed, interactive
            fetch(_apiBase + 'structures/?occupied=true&format=json')
                .then(function(r) { return r.json(); })
                .then(function(geojson) {
                    if (geojson.features) {
                        geojson.features.forEach(function(f) {
                            if (!f.geometry || !f.geometry.coordinates) return;
                            var coords = f.geometry.coordinates;
                            var props = f.properties || {};
                            var stype = props.structure_type || '';
                            var icon = window.pwStructureIcon(stype, 18);
                            var marker = L.marker([coords[1], coords[0]], {
                                icon: icon,
                                opacity: DIM,
                            });
                            marker.on('mouseover', function(e) {
                                pop.show(e.latlng || marker.getLatLng(), {
                                    id: props.id, name: props.name || '', structure_type: stype
                                });
                            });
                            marker.on('mouseout', function() { pop.hide(); });
                            marker.on('click', function() {
                                window.open('/plugins/pathways/structures/' + f.id + '/', '_blank');
                            });
                            group.addLayer(marker);
                        });
                    }
                    done();
                })
                .catch(function() { done(); });

            // Fetch occupied pathways — same style, dimmed, interactive
            fetch(_apiBase + 'pathways/?occupied=true&format=json')
                .then(function(r) { return r.json(); })
                .then(function(geojson) {
                    if (geojson.features) {
                        geojson.features.forEach(function(f) {
                            if (!f.geometry || !f.geometry.coordinates) return;
                            var props = f.properties || {};
                            var ptype = props.pathway_type || '';
                            var style = window.pwPathwayStyle(ptype);
                            var latlngs = f.geometry.coordinates.map(function(c) {
                                return [c[1], c[0]];
                            });
                            var polyline = L.polyline(latlngs, {
                                color: style.color,
                                weight: style.weight,
                                opacity: DIM,
                                dashArray: style.dashArray,
                            });
                            polyline.on('mouseover', function(e) {
                                pop.show(e.latlng, {
                                    id: props.id, name: props.label || '', pathway_type: ptype
                                });
                            });
                            polyline.on('mousemove', function(e) {
                                pop.show(e.latlng, {
                                    id: props.id, name: props.label || '', pathway_type: ptype
                                });
                            });
                            polyline.on('mouseout', function() { pop.hide(); });
                            polyline.on('click', function() {
                                window.open('/plugins/pathways/pathways/' + f.id + '/', '_blank');
                            });
                            group.addLayer(polyline);
                        });
                    }
                    done();
                })
                .catch(function() { done(); });
        }

        if (occupiedCheck) {
            var savedOccupied = localStorage.getItem('pw_show_occupied');
            if (savedOccupied === 'true') {
                occupiedCheck.checked = true;
                // Delay until map is ready
                setTimeout(_loadOccupied, 300);
            }
            occupiedCheck.addEventListener('change', function() {
                localStorage.setItem('pw_show_occupied', this.checked);
                if (this.checked) {
                    _loadOccupied();
                } else {
                    _clearOccupied();
                }
            });
        }

        // --- Clear results (delegated — button lives inside results HTML) ---
        var resultsDiv = document.getElementById('planner-results');
        if (resultsDiv) {
            resultsDiv.addEventListener('click', function(e) {
                if (!e.target.closest('.pw-clear-results')) return;
                // Rebuild empty-state placeholder
                while (resultsDiv.firstChild) resultsDiv.removeChild(resultsDiv.firstChild);
                var emptyDiv = document.createElement('div');
                emptyDiv.className = 'pw-results-empty';
                var icon = document.createElement('i');
                icon.className = 'mdi mdi-map-search-outline';
                icon.style.cssText = 'font-size:2rem;opacity:0.3;';
                emptyDiv.appendChild(icon);
                var p = document.createElement('p');
                p.className = 'mt-1 mb-0';
                p.textContent = 'Select endpoints and click Find Route.';
                emptyDiv.appendChild(p);
                resultsDiv.appendChild(emptyDiv);
                // Clear map layers
                if (window._rpRouteLayer) { window._rpRouteLayer.remove(); window._rpRouteLayer = null; }
                if (window._rpMarkerLayer) { window._rpMarkerLayer.remove(); window._rpMarkerLayer = null; }
                try { sessionStorage.removeItem('pw_route_cache'); } catch (_e) {}
            });
        }
    });
})();
</script>
{% endblock %}