<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenStreetMap with GTFS Toolbar</title>
    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-draw/dist/leaflet.draw.css" />
	<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.css" />
    <style>
        body, html {
            height: 100%;
            margin: 0;
        }
        #map {
            height: 100%;
            width: 100%;
        }
        .sidebar {
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            width: 250px;
            background-color: #f8f9fa;
            border-right: 1px solid #dee2e6;
            padding-top: 20px;
        }
        .content {
            margin-left: 250px;
            height: 100%;
        }
        .modal-body {
            max-height: 60vh;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div class="sidebar">
        <div class="container">
            <h5 class="mt-4">Options</h5>
            <div class="list-group">
                <input type="file" id="fileInput" class="d-none" webkitdirectory mozdirectory>
                <button class="list-group-item list-group-item-action" onclick="document.getElementById('fileInput').click();">Load GTFS from computer</button>
                <button class="list-group-item list-group-item-action" onclick="importGTFS()">Import existing GTFS</button>
            </div>
            <h5 id="currentGTFS">
                Current GTFS
                <h6 id="newShape">
                    <button class="list-group-item list-group-item-action" onclick="addNewShape()">Add New Shape</button>
                </h6>
                <h6 id="chosenShape">
                    Chosen Shape
                    <!-- Shape options will be inserted here -->
                </h6>
                <h6 id="currentRoutes">
                    Current GTFS
                    <!-- Route IDs will be inserted here -->
                </h6>
            </h5>
        </div>
    </div>
    <div class="content">
        <div id="map"></div>
    </div>

    <!-- Modal for displaying trips -->
    <div class="modal fade" id="tripsModal" tabindex="-1" aria-labelledby="tripsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="tripsModalLabel">Trips</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered" id="tripsTable">
                        <!-- Trips data will be inserted here -->
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS, Popper.js, and jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <!-- Leaflet JS -->
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script>
    <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
    <script src="https://unpkg.com/leaflet-draw/dist/leaflet.draw.js"></script>
    <script>
        // Initialize the map centered on Toruń, Poland
        var map = L.map('map').setView([53.0138, 18.5984], 13);
        
        // Load OpenStreetMap tiles
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
        }).addTo(map);
		
		// Assuming route is an array of objects with lon and lat properties
		// Given route coordinates
		// Given route coordinates
		const route = [
			{ lat: 53.015498, lon: 18.548179, stop: true },
			{ lat: 53.0155061509397, lon: 18.5483665019274, stop: false },
			{ lat: 53.0154795263022, lon: 18.5488848388195, stop: false },
			{ lat: 53.0153786752536, lon: 18.5508066415787, stop: false },
			{ lat: 53.0152608809305, lon: 18.5528719425201, stop: false },
			{ lat: 53.0152253812084, lon: 18.5534271597862, stop: false },
			{ lat: 53.0150269049514, lon: 18.5555809736252, stop: false },
			{ lat: 53.014975, lon: 18.55602, stop: false },
			{ lat: 53.0149397687454, lon: 18.5565304756165, stop: false },
			{ lat: 53.0148816778436, lon: 18.5571071505547, stop: false },
			{ lat: 53.0148155186657, lon: 18.5575430095196, stop: false },
			{ lat: 53.014707404669, lon: 18.558078110218, stop: false },
			{ lat: 53.0145960631056, lon: 18.5584764182568, stop: false },
			{ lat: 53.0144782666461, lon: 18.5588613152504, stop: false },
			{ lat: 53.0143330376918, lon: 18.559333384037, stop: false },
			{ lat: 53.0141047045143, lon: 18.5600320994854, stop: false },
			{ lat: 53.0140401578139, lon: 18.5602413117886, stop: false },
			{ lat: 53.013946968345, lon: 18.5605558007956, stop: false },
			{ lat: 53.01379, lon: 18.56118, stop: false },
			{ lat: 53.0137287186281, lon: 18.5616239905357, stop: false },
			{ lat: 53.0136657850481, lon: 18.5622046887875, stop: false },
			{ lat: 53.0136310908558, lon: 18.5627853870392, stop: false },
			{ lat: 53.0136302840138, lon: 18.5634854435921, stop: false },
			{ lat: 53.0136294771718, lon: 18.5643585026264, stop: false },
			{ lat: 53.0136359319076, lon: 18.5656929016113, stop: false },
			{ lat: 53.013623, lon: 18.566067, stop: false },
			{ lat: 53.0136472276929, lon: 18.5697859525681, stop: false },
			{ lat: 53.013666, lon: 18.570766, stop: false },
			{ lat: 53.0136940244864, lon: 18.5711324214935, stop: false },
			{ lat: 53.0137174228641, lon: 18.5718646645546, stop: false },
			{ lat: 53.0137279117879, lon: 18.5728490352631, stop: false },
			{ lat: 53.0137569580252, lon: 18.5748016834259, stop: false },
			{ lat: 53.0138279598562, lon: 18.5799622535706, stop: false },
			{ lat: 53.0138271530179, lon: 18.5806059837341, stop: false },
			{ lat: 53.013829, lon: 18.581098, stop: false },
			{ lat: 53.0138465171337, lon: 18.5817566514015, stop: false },
			{ lat: 53.0138731427787, lon: 18.5820704698563, stop: false },
			{ lat: 53.013915905144, lon: 18.5823293030262, stop: false },
			{ lat: 53.0139990092421, lon: 18.5826712846756, stop: false },
			{ lat: 53.0141377846607, lon: 18.5830146074295, stop: false },
			{ lat: 53.0143023781834, lon: 18.5833364725113, stop: false },
			{ lat: 53.0147412911747, lon: 18.5841679573059, stop: false },
			{ lat: 53.0149058823955, lon: 18.5845327377319, stop: false },
			{ lat: 53.0149736550686, lon: 18.5848170518875, stop: false },
			{ lat: 53.0150059277327, lon: 18.5851013660431, stop: false },
			{ lat: 53.0149768823361, lon: 18.5854822397232, stop: false },
			{ lat: 53.0149381551103, lon: 18.5858201980591, stop: false },
			{ lat: 53.0148832914808, lon: 18.5861045122147, stop: false },
			{ lat: 53.0147412911747, lon: 18.5865873098373, stop: false },
			{ lat: 53.0144766529938, lon: 18.5873705148697, stop: false },
			{ lat: 53.0143185147695, lon: 18.5879445075989, stop: false },
			{ lat: 53.0142475137456, lon: 18.588320016861, stop: false },
			{ lat: 53.0142216951625, lon: 18.5889208316803, stop: false },
			{ lat: 53.014231377133, lon: 18.5903531312943, stop: false },
			{ lat: 53.014179739932, lon: 18.591029047966, stop: false },
			{ lat: 53.014093, lon: 18.591931, stop: false },
			{ lat: 53.0140635560039, lon: 18.5925793647766, stop: false },
			{ lat: 53.0138634607279, lon: 18.5950094461441, stop: false },
			{ lat: 53.0137860042429, lon: 18.5960957407951, stop: false },
			{ lat: 53.0137884247602, lon: 18.5964578390121, stop: false },
			{ lat: 53.013811016248, lon: 18.5968963801861, stop: false },
			{ lat: 53.013823118826, lon: 18.5972410440445, stop: false },
			{ lat: 53.0138626538902, lon: 18.5976192355156, stop: false },
			{ lat: 53.0138743530349, lon: 18.5977774858475, stop: false },
			{ lat: 53.0138929102925, lon: 18.5980108380318, stop: false },
			{ lat: 53.0139522127793, lon: 18.5982844233513, stop: false },
			{ lat: 53.0140054639226, lon: 18.5985177755356, stop: false },
			{ lat: 53.0141829672589, lon: 18.5990703105927, stop: false },
			{ lat: 53.0145186079356, lon: 18.5998964309692, stop: false },
			{ lat: 53.014776791295, lon: 18.600577712059, stop: false },
			{ lat: 53.0149026551227, lon: 18.6009210348129, stop: false },
			{ lat: 53.0150091549978, lon: 18.6013180017471, stop: false },
			{ lat: 53.015039, lon: 18.601521, stop: false },
			{ lat: 53.0150914501758, lon: 18.601650595665, stop: false },
			{ lat: 53.0151769724494, lon: 18.6019402742386, stop: false },
			{ lat: 53.0153157440799, lon: 18.6025303602219, stop: false },
			{ lat: 53.0159063253302, lon: 18.6050033569336, stop: false },
			{ lat: 53.0159595740621, lon: 18.6051052808762, stop: false },
			{ lat: 53.016212908038, lon: 18.6057087779045, stop: false },
			{ lat: 53.016392015875, lon: 18.6062023043633, stop: false },
			{ lat: 53.0167034358397, lon: 18.6071813106537, stop: false },
			{ lat: 53.0168970637, lon: 18.6077579855919, stop: false },
			{ lat: 53.0172342968156, lon: 18.6090561747551, stop: false },
			{ lat: 53.0178200112259, lon: 18.6114004254341, stop: false },
			{ lat: 53.017955, lon: 18.61257, stop: false },
			{ lat: 53.0180571990971, lon: 18.6132296919823, stop: false },
			{ lat: 53.0180975370407, lon: 18.6134120821953, stop: false },
			{ lat: 53.0182330722551, lon: 18.6135971546173, stop: false },
			{ lat: 53.0183702205505, lon: 18.6136749386787, stop: false },
			{ lat: 53.0185638409312, lon: 18.6137366294861, stop: false },
			{ lat: 53.018813932637, lon: 18.61372590065, stop: false },
			{ lat: 53.0190462746003, lon: 18.6136186122894, stop: false },
			{ lat: 53.0198610750697, lon: 18.6131680011749, stop: false },
			{ lat: 53.0206968346139, lon: 18.6127656698227, stop: false },
			{ lat: 53.020924326204, lon: 18.6126691102982, stop: false },
			{ lat: 53.021166337217, lon: 18.6126852035522, stop: false },
			{ lat: 53.0213776923911, lon: 18.6128380894661, stop: false },
			{ lat: 53.021561, lon: 18.61306, stop: false },
			{ lat: 53.0225732010204, lon: 18.6140289902687, stop: false },
			{ lat: 53.0226667751966, lon: 18.6141550540924, stop: false },
			{ lat: 53.0227329223366, lon: 18.6142757534981, stop: false },
			{ lat: 53.0228281095064, lon: 18.6145010590553, stop: false },
			{ lat: 53.0231007631186, lon: 18.6154532432556, stop: false },
			{ lat: 53.0233121088159, lon: 18.6160218715668, stop: false },
			{ lat: 53.0233766416468, lon: 18.616236448288, stop: false },
			{ lat: 53.0236105723499, lon: 18.617859184742, stop: false },
			{ lat: 53.023596, lon: 18.617925, stop: false },
			{ lat: 53.0236589716473, lon: 18.6182025074959, stop: false },
			{ lat: 53.0240042183936, lon: 18.6206004023552, stop: false },
			{ lat: 53.0243446225271, lon: 18.6229392886162, stop: false },
			{ lat: 53.024355, lon: 18.623137, stop: false },
			{ lat: 53.0244172202175, lon: 18.6234569549561, stop: false },
			{ lat: 53.0245866143533, lon: 18.6245834827423, stop: false },
			{ lat: 53.0248173119636, lon: 18.6261793971062, stop: false },
			{ lat: 53.0248770027528, lon: 18.6267426609993, stop: false },
			{ lat: 53.0249044282228, lon: 18.6272844672203, stop: false },
			{ lat: 53.0248866823325, lon: 18.6278986930847, stop: false },
			{ lat: 53.0248657099071, lon: 18.6282339692116, stop: false },
			{ lat: 53.0248156986979, lon: 18.6286067962646, stop: false },
			{ lat: 53.024689863786, lon: 18.629746735096, stop: false },
			{ lat: 53.0245382160966, lon: 18.6309456825256, stop: false },
			{ lat: 53.0243494623769, lon: 18.632450401783, stop: false },
			{ lat: 53.0243284896904, lon: 18.6327347159386, stop: false },
			{ lat: 53.0243510756601, lon: 18.6329787969589, stop: false },
			{ lat: 53.0244285131806, lon: 18.6332631111145, stop: false },
			{ lat: 53.0245382160966, lon: 18.6334374547005, stop: false },
			{ lat: 53.0248818425429, lon: 18.6338827013969, stop: false },
			{ lat: 53.0249608923709, lon: 18.6340570449829, stop: false },
			{ lat: 53.0252238530014, lon: 18.6343467235565, stop: false },
			{ lat: 53.0255368224599, lon: 18.6348643898964, stop: false },
			{ lat: 53.0261401695438, lon: 18.6358863115311, stop: false },
			{ lat: 53.0273194144766, lon: 18.6379784345627, stop: false },
			{ lat: 53.0284873352723, lon: 18.6399900913239, stop: false },
			{ lat: 53.0290357954512, lon: 18.640918135643, stop: false },
			{ lat: 53.0293326062866, lon: 18.6414679884911, stop: false },
			{ lat: 53.029613, lon: 18.642062, stop: false },
			{ lat: 53.0297358786052, lon: 18.6422833800316, stop: false },
			{ lat: 53.0298875080216, lon: 18.6425060033798, stop: false },
			{ lat: 53.030047202256, lon: 18.6426830291748, stop: false },
			{ lat: 53.0304585331672, lon: 18.6433508992195, stop: false },
			{ lat: 53.0312456966792, lon: 18.6447349190712, stop: false },
			{ lat: 53.0326973949821, lon: 18.6473366618156, stop: false },
			{ lat: 53.0329312751379, lon: 18.6478275060654, stop: false },
			{ lat: 53.033373224521, lon: 18.6488091945648, stop: false },
			{ lat: 53.0337700073347, lon: 18.6497667431831, stop: false },
			{ lat: 53.034585, lon: 18.652202, stop: false },
			{ lat: 53.0348103351817, lon: 18.6528244614601, stop: false },
			{ lat: 53.0350071075487, lon: 18.6533984541893, stop: false },
			{ lat: 53.0355458076316, lon: 18.6549916863441, stop: false },
			{ lat: 53.0360490183959, lon: 18.6564803123474, stop: false },
			{ lat: 53.0363490066345, lon: 18.6574995517731, stop: false },
			{ lat: 53.036634477375, lon: 18.658752143383, stop: false },
			{ lat: 53.036779631264, lon: 18.6595916748047, stop: false },
			{ lat: 53.036913494973, lon: 18.6604714393616, stop: false },
			{ lat: 53.0369796202662, lon: 18.6611768603325, stop: false },
			{ lat: 53.037042, lon: 18.662501, stop: false },
			{ lat: 53.037087678454, lon: 18.6630356311798, stop: false },
			{ lat: 53.0370844528404, lon: 18.6644732952118, stop: false },
			{ lat: 53.0370650991536, lon: 18.6653906106949, stop: false },
			{ lat: 53.0370538094989, lon: 18.6655354499817, stop: false },
			{ lat: 53.0369957483712, lon: 18.6657473444939, stop: false },
			{ lat: 53.0368941412094, lon: 18.6659109592438, stop: false },
			{ lat: 53.0367812440823, lon: 18.6660236120224, stop: false },
			{ lat: 53.0366635081919, lon: 18.6660584807396, stop: false },
			{ lat: 53.03626836484, lon: 18.6660531163216, stop: false },
			{ lat: 53.0360667596939, lon: 18.6660772562027, stop: false },
			{ lat: 53.035969988889, lon: 18.666130900383, stop: false },
			{ lat: 53.0359119263018, lon: 18.6662194132805, stop: false },
			{ lat: 53.0358716050147, lon: 18.666318655014, stop: false },
			{ lat: 53.0358522507835, lon: 18.6664044857025, stop: false },
			{ lat: 53.0358425736646, lon: 18.666487634182, stop: false },
			{ lat: 53.0358457993711, lon: 18.6665761470795, stop: false },
			{ lat: 53.0358490250774, lon: 18.6666512489319, stop: false },
			{ lat: 53.0358828949789, lon: 18.6667665839195, stop: false },
			{ lat: 53.0359409576052, lon: 18.6668872833252, stop: false },
			{ lat: 53.0360135357781, lon: 18.6669623851776, stop: false },
			{ lat: 53.0360909523612, lon: 18.6669918894768, stop: false },
			{ lat: 53.0361586917574, lon: 18.6669918894768, stop: false },
			{ lat: 53.0362425594339, lon: 18.6669623851776, stop: false },
			{ lat: 53.0363183627703, lon: 18.6668953299522, stop: false },
			{ lat: 53.0367167313055, lon: 18.6663025617599, stop: true },
		];


		const stops = route.filter(point => point.stop).map(point => [point.lat, point.lon]);

        /*if (stops.length < 2) {
            console.error('Not enough stops to calculate route');
        } else {
            const coordinates = stops.map(stop => stop.join(',')).join(';');

            axios.get(`http://router.project-osrm.org/route/v1/driving/${coordinates}?overview=full&geometries=geojson`)
                .then(response => {
                    const route = response.data.routes[0];
                    const routeLine = L.geoJSON(route.geometry).addTo(map);
                    map.fitBounds(routeLine.getBounds());

                    stops.forEach(stop => {
                        L.marker(stop).addTo(map);
                    });
                })
                .catch(error => {
                    console.error('Error fetching route from OSRM', error);
                });
        }*/

        let routesData = [];
        let tripsData = [];
        // Holder of currently inspected shape ID value
        let currentShapeID = null;
        // Create empty dictionary for shapes to be displayed.
        let shapes = {};
        // Total number of newly defined Shapes
        // In a mature version the indexing has to be changed.
        let numNewShapes = 0;
        // Current layer that can be saved or discarded
        let currentLayer = null;

        // Setting up the drawing control
        
        // FeatureGroup to store editable layers
        var drawnItems = new L.FeatureGroup();
            map.addLayer(drawnItems);

            // Set up the drawing control
            var drawControl = new L.Control.Draw({
                position: 'topright', // Adds the drawing control on the right
                edit: {
                    featureGroup: drawnItems
                },
                draw: false
            });

        // Polyline drawer that will be used
        let polylineDrawer = new L.Draw.Polyline(map, drawControl.options.polyline);

        document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);

        function handleFileSelect(event) {
            const files = event.target.files;
            const routesFile = Array.from(files).find(file => file.name === 'routes.txt');
            const tripsFile = Array.from(files).find(file => file.name === 'trips.txt');
            
            if (routesFile && tripsFile) {
                // Read and parse the routes file
                const reader = new FileReader();
                reader.onload = function(e) {
                    routesData = parseCSV(e.target.result);
                    displayRouteIds(routesData);
                };
                reader.readAsText(routesFile);

                // Read and parse the trips file
                const tripsReader = new FileReader();
                tripsReader.onload = function(e) {
                    tripsData = parseCSV(e.target.result);
                };
                tripsReader.readAsText(tripsFile);
            } else {
                alert('Please select a valid GTFS folder containing routes.txt and trips.txt.');
            }
			
			// Handle shapes file
			let shapesFile;
            for (let file of files) {
                if (file.name === 'shapes.txt') {
                    shapesFile = file;
                    break;
                }
            }
            if (shapesFile) {
				// Parse shapes.txt file and draw on the map
                parseShapesFile(shapesFile);
            } else {
                alert('shapes.txt file not found in the selected folder.');
            }
        }

        function parseCSV(data) {
            const lines = data.split('\n');
            const headers = lines[0].split(',');
            return lines.slice(1).map(line => {
                const values = line.split(',');
                return headers.reduce((object, header, index) => {
                    object[header] = values[index];
                    return object;
                }, {});
            });
        }

        function displayRouteIds(routes) {
            const currentRoutes = document.getElementById('currentRoutes');
            const routeList = document.createElement('div');
            routeList.className = 'list-group';
            routes.forEach(route => {
                const routeItem = document.createElement('button');
                routeItem.className = 'list-group-item list-group-item-action';
                routeItem.textContent = route.route_id;
                routeItem.onclick = () => showTrips(route.route_id);
                routeList.appendChild(routeItem);
            });
            currentRoutes.appendChild(routeList);
        }

        function showTrips(routeId) {
            const trips = tripsData.filter(trip => trip.route_id === routeId);
            const tripsTable = document.getElementById('tripsTable');
            tripsTable.innerHTML = '';

            if (trips.length > 0) {
                const headers = Object.keys(trips[0]);
                const headerRow = document.createElement('tr');
                headers.forEach(header => {
                    const th = document.createElement('th');
                    th.textContent = header;
                    headerRow.appendChild(th);
                });
                tripsTable.appendChild(headerRow);

                trips.forEach(trip => {
                    const row = document.createElement('tr');
                    headers.forEach(header => {
                        const cell = document.createElement('td');
                        cell.textContent = trip[header];
                        row.appendChild(cell);
                    });
                    tripsTable.appendChild(row);
                });
            } else {
                const noDataRow = document.createElement('tr');
                const noDataCell = document.createElement('td');
                noDataCell.colSpan = Object.keys(trips[0] || {}).length;
                noDataCell.textContent = 'No trips found for this route.';
                noDataRow.appendChild(noDataCell);
                tripsTable.appendChild(noDataRow);
            }

            $('#tripsModal').modal('show');
        }
		
		// Function to parse shapes.txt file and draw shapes on the map
        function parseShapesFile(file) {
            const reader = new FileReader();
            reader.onload = function(event) {
                const text = event.target.result;
                const lines = text.split('\n');
                const headers = lines[0].split(',');
                const shapeIdIndex = headers.indexOf('shape_id');
                const shapePtSequenceIndex = headers.indexOf('shape_pt_sequence');
                const shapePtLatIndex = headers.indexOf('shape_pt_lat');
                const shapePtLonIndex = headers.indexOf('shape_pt_lon');

                for (let i = 1; i < lines.length; i++) {
                    const line = lines[i].trim();
                    if (line) {
                        const columns = line.split(',');
                        const shape_id = columns[shapeIdIndex];
                        const shape_pt_sequence = parseInt(columns[shapePtSequenceIndex], 10);
                        const shape_pt_lat = parseFloat(columns[shapePtLatIndex]);
                        const shape_pt_lon = parseFloat(columns[shapePtLonIndex]);

                        if (!shapes[shape_id]) {
                            shapes[shape_id] = [];
                        }
                        shapes[shape_id].push({
                            sequence: shape_pt_sequence,
                            lat: shape_pt_lat,
                            lon: shape_pt_lon
                        });
                    }
                }

                // Sort the shape points by sequence and draw them with click listeners
                for (let shape_id in shapes) {
                    if (shapes.hasOwnProperty(shape_id)) {
                        shapes[shape_id].sort((a, b) => a.sequence - b.sequence);
                        const latlngs = shapes[shape_id].map(point => [point.lat, point.lon]);
                        
                        addClickableShape (latlngs, shape_id)
                    }
                }
            };
            reader.readAsText(file);
        }

        function addClickableShape (latlngs, shape_id) {
            // Create polyline and add to map
            const polyline = L.polyline(latlngs, { color: 'blue', weight: 5  }).addTo(map);
                        
            // Add click event listener to polyline
            polyline.on('click', function (e) {
                // Reset previous polyline to blue
                if (currentShapeID !== null) {
                    shapes[currentShapeID].polyline.setStyle({ color: 'blue' });
                }
                // Set new currentShapeID value
                currentShapeID = shape_id;

                // Highlight the clicked polyline
                polyline.setStyle({ color: 'red' }).bringToFront();

                displayShapeOptions(shape_id, shapes);

                console.log('Shape clicked:', shape_id);
            });

            // Store polyline reference in shapes object for reset purpose
            shapes[shape_id].polyline = polyline;
        }

        function addNewShape() {
            shapeStops = [];
            cancelShapeEdit();

            // Create a container div for the buttons
            const buttonContainer = document.createElement('div');
            buttonContainer.className = 'button-container mt-3 p-3 border rounded';

            // Create Toggle OSM router machine button
            const editButton = document.createElement('button');
            editButton.className = 'btn btn-primary btn-block my-2';
            editButton.textContent = 'Toggle OSM router machine';
            editButton.onclick = () => {
                // Open route editing tool
                shapeToOSRM(shapes[shapeID].polyline);
            };
            buttonContainer.appendChild(editButton);

            // Create Save button
            const saveButton = document.createElement('button');
            saveButton.className = 'btn btn-secondary btn-block my-2';
            saveButton.textContent = 'Save Shape';
            saveButton.setAttribute('ready-to-save', 'false');
            saveButton.onclick = () => {
                if (saveButton.getAttribute('ready-to-save') === 'true') {
                    // Append coordinates to stops list
                    var latlngs = currentLayer.getLatLngs();
                    latlngs.forEach(function(latlng) {
                        stops.push([latlng.lat, latlng.lng]);
                    });

                    // Transform the polyline into the specified format in the shapes dictionary
                    shape_id = "n_" + numNewShapes;
                    numNewShapes += 1;
                    shapes[shape_id] = [];
                    latlngs.forEach(function(latlng, index) {
                        shapes[shape_id].push({
                            sequence: index + 1,
                            lat: latlng.lat,
                            lon: latlng.lng
                        });
                    });

                    // Delete the layer with the drawn polyline
                    map.removeLayer(currentLayer);

                    // Create polyline and add to map
                    addClickableShape (latlngs, shape_id);

                    // Log the results
                    console.log('Stops:', stops);
                    console.log('Shapes:', shapes);
                    
                    // Change button esthetics to default
                    saveButton.style.backgroundColor = '';
                    saveButton.style.color = '';
                    
                    cancelShapeEdit();
                }
            };
            buttonContainer.appendChild(saveButton);

            // Create Cancel button
            const cancelButton = document.createElement('button');
            cancelButton.className = 'btn btn-secondary btn-block my-2';
            cancelButton.textContent = 'Cancel';
            cancelButton.onclick = () => {
                cancelShapeEdit();
            };
            buttonContainer.appendChild(cancelButton);

            // Append the button container to the chosenShape element
            chosenShape.appendChild(buttonContainer);

            polylineDrawer.enable();

            // Add created polylines to the map
            map.on(L.Draw.Event.CREATED, function (event) {
                var layer = event.layer;
                currentLayer = layer;
                drawnItems.addLayer(layer);
            });

            // Add created shapes to the map and handle the polyline
            map.on(L.Draw.Event.CREATED, function (event) {
                var layer = event.layer;

                // Check if the drawn shape is a polyline
                if (layer instanceof L.Polyline && !(layer instanceof L.Polygon)) {
                    // Disable the drawing control
                    map.removeControl(drawControl);

                    saveButton.style.backgroundColor = 'green';
                    saveButton.style.color = 'white'; // Ensure the text is readable
                    saveButton.setAttribute('ready-to-save', 'true');
                } else {
                    // Add the drawn layer to the map if it's not a polyline
                    drawnItems.addLayer(layer);
                }
            });
        }

        function displayShapeOptions(shapeID, shapes) {
            const chosenShape = document.getElementById('chosenShape');
            
            // Clear any existing content inside chosenShape
            while (chosenShape.firstChild) {
                chosenShape.removeChild(chosenShape.firstChild);
            }

            // Add text content at the top
            const textContent = document.createElement('div');
            textContent.textContent = "Shape " + shapeID;
            chosenShape.appendChild(textContent);

            // Create a container div for the buttons
            const buttonContainer = document.createElement('div');
            buttonContainer.className = 'button-container mt-3 p-3 border rounded';

            // Create Edit button
            const editButton = document.createElement('button');
            editButton.className = 'btn btn-primary btn-block my-2';
            editButton.textContent = 'Edit Shape';
            editButton.onclick = () => {
                // Open route editing tool
                shapeToOSRM(shapes[shapeID].polyline);
            };
            buttonContainer.appendChild(editButton);

            // Create Delete button
            const deleteButton = document.createElement('button');
            deleteButton.className = 'btn btn-danger btn-block my-2';
            deleteButton.textContent = 'Delete Shape';
            deleteButton.onclick = () => {

                // Cancel the edit view for the current shape
                cancelShapeEdit();
                // Delete the current shape and its representation from the map
                deleteShape(shapeID);
            };
            buttonContainer.appendChild(deleteButton);

            // Create Cancel button
            const cancelButton = document.createElement('button');
            cancelButton.className = 'btn btn-secondary btn-block my-2';
            cancelButton.textContent = 'Cancel';
            cancelButton.onclick = () => {
                cancelShapeEdit();
            };
            buttonContainer.appendChild(cancelButton);

            // Append the button container to the chosenShape element
            chosenShape.appendChild(buttonContainer);
        }

        function cancelShapeEdit () {
            // Define reference to the chosenShape field
            const chosenShape = document.getElementById('chosenShape');

            // Remove any existing routing control (if needed)
            if (window.routingControl) {
                map.removeControl(window.routingControl);
            }

            // Disable the current drawing
            polylineDrawer.disable();
            
            // Clear all drawn items
            drawnItems.clearLayers();

            // Clear any existing content inside chosenShape
            while (chosenShape.firstChild) {
                    chosenShape.removeChild(chosenShape.firstChild);
                }

            // Add text content at the top
            const textContent = document.createElement('div');
            textContent.textContent = "Chosen Shape";
            chosenShape.appendChild(textContent);

            // Reset previous polyline to blue
            if (currentShapeID !== null) {
                shapes[currentShapeID].polyline.setStyle({ color: 'blue' });
            }
            // Set currentShapeID to null
            currentShapeID = null;
        }

        function deleteShape(shapeID) {
            if (shapes[shapeID] && shapes[shapeID].polyline) {
                map.removeLayer(shapes[shapeID].polyline);  // Remove the polyline from the map
                delete shapes[shapeID];  // Delete the shape from the shapes object
                console.log('Shape deleted:', shapeID);
            }
        }
        
        // Function that takes a shape of a route and draws an OSRM path along it
        function shapeToOSRM (polyline) {
            if (!polyline) {
                console.error('Invalid polyline');
                return;
            }

            // Get the latlngs array from the polyline
            const latlngs = polyline.getLatLngs();

            if (latlngs.length < 2) {
                console.error('Polyline should have at least two points');
                return;
            }

            // Define start and end points
            const startPoint = latlngs[0];
            const endPoint = latlngs[latlngs.length - 1];

            const initialWaypoints = [
                L.latLng(startPoint.lat, startPoint.lng),
                L.latLng(endPoint.lat, endPoint.lng)
            ];

            console.log('initialWaypoints', initialWaypoints[0]);

            const routingControl = L.Routing.control({
                waypoints: initialWaypoints,
                routeWhileDragging: false,
                createMarker: () => null // Don't create markers for initial route
            }).addTo(map);

            console.log('Added routingControl.');

            routingControl.on('routesfound', function (e) {
                const routes = e.routes;
                const routePolyline = routes[0].coordinates;

                console.log('routePolyline[0]: ', routePolyline[0]);

                // Find the furthest point from the original polyline to the generated polyline
                const furthestPoint = findFurthestPoint(latlngs, routePolyline);
                
                console.log('furthestPoint: ', furthestPoint);

                // Create new waypoints with the furthest point added
                const newWaypoints = [
                    L.latLng(startPoint.lat, startPoint.lng),
                    L.latLng(furthestPoint.lat, furthestPoint.lng),
                    L.latLng(endPoint.lat, endPoint.lng)
                ];

                // Generate the new route with the updated waypoints
                generateNewRoute(newWaypoints);
            });
        }

        function generateNewRoute(waypoints) {
            if (window.finalRoutingControl) {
                map.removeControl(window.finalRoutingControl);
            }

            window.finalRoutingControl = L.Routing.control({
                waypoints: waypoints,
                routeWhileDragging: false
            }).addTo(map);
        }

        function findFurthestPoint(originalPolyline, generatedPolyline) {
            let maxDistance = -1;
            let furthestPoint = null;

            originalPolyline.forEach(point => {
                const latlngPoint = L.latLng(point.lat, point.lng);
                const distance = findDistanceToPolyline(latlngPoint, generatedPolyline);

                if (distance > maxDistance) {
                    maxDistance = distance;
                    furthestPoint = point;
                }
            });

            return furthestPoint;
        }

        function findDistanceToPolyline(point, polyline) {
            let minDistance = Infinity;

            polyline.forEach((segmentPoint, index) => {
                if (index === 0) return;
                const prevPoint = polyline[index - 1];
                console.log('Current shapefile point: ', point);
                console.log('Current generated polyline point: ', segment);
                const segmentDistance = L.GeometryUtil.distanceSegment(map, point, prevPoint, segmentPoint);
                minDistance = Math.min(minDistance, segmentDistance);
            });

            return minDistance;
        }

        // Function to write "Hello World!" to the console when the map is clicked
        function onMapClick(event) {
            // Check if the click event is not on a shape
            if (!event.originalEvent.target.closest('.leaflet-interactive')) {
                cancelShapeEdit();
            }
        }

        // Add the map click event listener
        map.on('click', onMapClick);

        function importGTFS() {
            alert("Import existing GTFS clicked");
            // Logic to import existing GTFS would go here
        }
    </script>
</body>
</html>
