<!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" />

    {% load static %}

    <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;
        }
        .route-list {
            max-height: 400px;
            overflow-y: scroll;
        }
    </style>
    </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="drawNewShape()">Draw New Shape</button>
                    <button class="list-group-item list-group-item-action" onclick="addNewShape()">Add New Shape</button>
                    <button class="list-group-item list-group-item-action" onclick="addNewStop()">Add New Stop</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>
    <!-- Scripts with helper functions -->

    <!-- <script src="sidebar.js"></script>
    <script src="shapes_on_map.js"></script>
    <script src="parsing_files.js"></script> -->

    <script src="{%static 'pt_map/sidebar.js'%}"></script>
    <script src="{%static 'pt_map/shapes_on_map.js'%}"></script>
    <script src="{%static 'pt_map/parsing_files.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);

        // Holder for data imported from the server.
        let imported_data = null;
        let routesData = [];
        let tripsData = [];
        let stopsData = [];
        let stopTimesData = [];
        // Holder of currently inspected shape ID value
        let currentShapeIDs = {};
        currentShapeIDs["routes"] = [];
        currentShapeIDs["stops"] = [];
        // Create empty dictionary for shapes to be displayed on the map.
        let shapes = {};
        shapes["routes"] = {};
        shapes["stops"] = {};
        // 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 layers created by drawing
        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 for drawing on the map
        let polylineDrawer = new L.Draw.Polyline(map, drawControl.options.polyline);

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

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

        // 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();
            }
        }

        function importGTFS() {
            stops = JSON.parse('{{ stops }}');
            routes = JSON.parse('{{ routes }}');
            timetable = JSON.parse('{{ timetable }}');
            
            alert("Import existing GTFS clicked");
            // Logic to import existing GTFS would go here
        }
    </script>
</body>
</html>
