{% extends "base.html" %}
{% load static %}
{% load bootstrap4 %}

{% block head_extra %}
    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css" />
    <!-- Leaflet JS -->
    <style>
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            width: 100%;
            height: 100%;
        }
        .sidebar {
            position: absolute;
            top: 80px;
            left: 50px;
            background: rgba(255, 255, 255, 0.5); 
            padding: 10px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }
        .progress-container {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 200px;
            background: white;
            padding: 10px;
            z-index: 1000;
        }
        .progress-bar {
            width: 100%;
            background: #f3f3f3;
            border: 1px solid #ccc;
        }
        .progress-bar-fill {
            width: 0%;
            height: 20px;
            background: #4caf50;
            text-align: center;
            line-height: 20px;
            color: white;
        }
        @media (max-width: 768px) {
            .sidebar {
                top: 80px;
                left: 50px;
                width: 250px;
                flex-direction: row;
                justify-content: space-around;
                flex-wrap: wrap;
            }
            .progress-container {
                top: 50px;
                right: 10px;
                left: 10px;
                width: calc(100% - 20px);
            }
        }
    </style>
     <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@turf/turf"></script>
{% endblock %}

{% block content %}
<div id="map"></div>
<div class="sidebar">
    <button id="calculateRoute" class="btn btn-primary">
        <i class="bi bi-geo-alt"></i>
    </button>
    <button class="btn btn-primary" onclick="clearMap()">
        <i class="bi bi-x-circle"></i>
    </button>
    <button id="undoRoute" class="btn btn-primary">
        <i class="bi bi-arrow-counterclockwise"></i>
    </button>
    <button id="exportRoute" class="btn btn-primary" disabled>
        <i class="bi bi-download"></i>
    </button>
    <div id="routeInfo" class="mt-2"></div> <!-- Container to display route information -->
</div>
{{ bounding_box|json_script:"bounding-box" }}
{% endblock content %}

{% block scripts %}
<script>
    var map = L.map('map').setView([47.8191, 13.2147], 13); // Initial view set to Austria

    // Get the bounding box coordinates from the script tag
    var boundingBox = JSON.parse(document.getElementById('bounding-box').textContent);
    console.log(boundingBox)

    var bounds = [
        [boundingBox.south, boundingBox.west],
        [boundingBox.north, boundingBox.east]
    ];
    L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);


    // Add OpenStreetMap tile layer
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
        }).addTo(map);

    var sourceMarker, targetMarker, routeLine, routeCoords;
    var markers = [];
    var routeLines = [];
    var totalDistance = 0;
    var totalElevationGain = 0;
    var totalElevationLoss = 0;

    // Function to place markers
    function onMapClick(e) {
        var newMarker = L.marker(e.latlng, {draggable: true}).addTo(map).bindPopup(`Point ${markers.length + 1}`).openPopup();
        markers.push(newMarker);

        if (markers.length > 1) {
            document.getElementById('calculateRoute').disabled = false; // Enable the calculate route button
        }
    }

    map.on('click', onMapClick);

    // Function to calculate route
    document.getElementById('calculateRoute').onclick = function() {
        if (markers.length < 2) {
            alert("Please set at least two points.");
            return;
        }

        // Disable the button to prevent multiple clicks
        document.getElementById('calculateRoute').disabled = true;

        // Calculate routes for each segment
        var calculateRoutePromises = [];
        for (var i = 0; i < markers.length - 1; i++) {
            var sourceLat = markers[i].getLatLng().lat;
            var sourceLon = markers[i].getLatLng().lng;
            var targetLat = markers[i + 1].getLatLng().lat;
            var targetLon = markers[i + 1].getLatLng().lng;

            var url = "{% url 'running:calculate_route' 'source_lat' 'source_lon' 'target_lat' 'target_lon' %}";
            url = url.replace('source_lat', sourceLat).replace('source_lon', sourceLon).replace('target_lat', targetLat).replace('target_lon', targetLon);

            calculateRoutePromises.push(fetch(url).then(response => response.json()));
        }

        Promise.all(calculateRoutePromises)
            .then(routeSegments => {
                routeSegments.forEach(data => {
                    routeCoords = data.route;
                    totalDistance += data.total_distance;
                    totalElevationGain += data.total_elevation_gain;
                    totalElevationLoss += data.total_elevation_loss;

                    var routeLine = L.polyline(routeCoords, {color: 'blue'}).addTo(map);
                    routeLines.push({
                        line: routeLine,
                        distance: data.total_distance,
                        elevationGain: data.total_elevation_gain,
                        elevationLoss: data.total_elevation_loss
                    });
                });

                map.fitBounds(L.featureGroup(routeLines.map(rl => rl.line)).getBounds());
                document.getElementById('exportRoute').disabled = false;  // Enable the export button

                // Display route information
                updateRouteInfo();

                // Enable the button again
                document.getElementById('calculateRoute').disabled = false;
            })
            .catch(error => {
                console.error('Error fetching route:', error);
                document.getElementById('calculateRoute').disabled = false; // Enable the button again if there's an error
            });
    }

    // Function to update route information
    function updateRouteInfo() {
        document.getElementById('routeInfo').innerHTML = `
            <p>Total Distance: ${totalDistance.toFixed(2)} km</p>
            <p>Total Elevation Gain: ${totalElevationGain.toFixed(2)} m</p>
            <p>Total Elevation Loss: ${totalElevationLoss.toFixed(2)} m</p>
        `;
    }

    // Function to undo the last route segment
    document.getElementById('undoRoute').onclick = function() {
        if (routeLines.length > 0) {
            var lastSegment = routeLines.pop();
            map.removeLayer(lastSegment.line);
            totalDistance -= lastSegment.distance;
            totalElevationGain -= lastSegment.elevationGain;
            totalElevationLoss -= lastSegment.elevationLoss;
            if (markers.length > 0) {
                var lastMarker = markers.pop();
                map.removeLayer(lastMarker);
            }
            updateRouteInfo();
            if (routeLines.length === 0) {
                document.getElementById('exportRoute').disabled = true;  // Disable the export button if no routes left
            }
        }
    }

    // Function to export route to GPX
    document.getElementById('exportRoute').onclick = function() {
        if (routeLines.length === 0) {
            alert("No route to export. Please calculate a route first.");
            return;
        }

        var gpxData = `
            <gpx version="1.1" creator="Route Planner">
                <trk>
                    <name>Generated Route</name>
                    <trkseg>
                        ${routeLines.flatMap(line => line.line.getLatLngs().map(coord => `<trkpt lat="${coord.lat}" lon="${coord.lng}"></trkpt>`)).join('')}
                    </trkseg>
                </trk>
            </gpx>
        `;

        var blob = new Blob([gpxData], { type: 'application/gpx+xml' });
        var url = URL.createObjectURL(blob);
        var a = document.createElement('a');
        a.href = url;
        a.download = 'route.gpx';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    }

    // Function to clear map
    function clearMap() {
        markers.forEach(marker => map.removeLayer(marker));
        markers = [];
        routeLines.forEach(line => map.removeLayer(line.line));
        routeLines = [];
        document.getElementById('exportRoute').disabled = true;  // Disable the export button
        totalDistance = 0;
        totalElevationGain = 0;
        totalElevationLoss = 0;
        document.getElementById('routeInfo').innerHTML = '';
    }
</script>
{% endblock scripts %}