{% extends 'base.html' %}

{% block title %}
    Quest Giver
{% endblock %}

{% block content %}
    <div class="main-content">
        <main class="container">
                <div class="map-placeholder">
                <div id="map" style="height: 650px;"></div> <!-- Set height for map -->
                <script>
                    // Parse the quest data (which was passed as JSON from Flask)
                    var quests = JSON.parse('{{ quests | safe }}');  // Remove tojson filter since it's already JSON
                    
                    const key = 'oNadPeTD0zNYEj6uEZwO';
                    var map = L.map('map').setView([10.7683, 106.6758], 15); // Initial position

                    // OSM layer
                    var Map_layer = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        maxZoom: 19,
                        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
                    }).addTo(map);  

                    // Google Street view (HTTPS URL)
                    var googleStreets = L.tileLayer('https://{s}.google.com/vt?lyrs=m&x={x}&y={y}&z={z}', {
                        maxZoom: 20,
                        subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
                        attribution: '&copy; Google'
                    });

                    // Add Google Street layer (optional: add based on user selection)
                    googleStreets.addTo(map); // Initial layer set to Google 

                    // Initialize marker icons
                    var myIcon = L.icon({
                        iconUrl: '../static/images/adventurer_pin_new.png',
                        iconSize: [50, 50],
                    });

                    var questIcon = L.icon({
                        iconUrl: '../static/images/quest.png',
                        iconSize: [50, 50],
                    });

                    // Marker and declare Popup
                    var my_location = L.marker([10.7683, 106.6758], {icon: myIcon}).addTo(map);
                    my_location.bindPopup("<b style='color: Red'>Adventurer!</b><br> <a style='color: black'>This is where you are</a>").openPopup();

                    // Geo-location handling
                    if (!navigator.geolocation) {
                        console.log("Your browser doesn't support location feature!")
                    } else {
                        setInterval(() => {
                            navigator.geolocation.getCurrentPosition(getPosition, handleError);
                        }, 1000); // Update every 1 seconds
                    }

                    function getPosition(position) {
                        if (position.coords.latitude && position.coords.longitude) {
                            var lat = position.coords.latitude;
                            var long = position.coords.longitude;
                            var accuracy = position.coords.accuracy;

                            // Update marker position to the user's location
                            my_location.setLatLng([lat, long]); // Move marker to new position
                            map.setView([lat, long], map.getZoom()); // Center map to new position without changing zoom

                            console.log("Your coordinates are: lat: " + lat + " long: " + long);
                        }
                    }

                    // Handle geolocation errors
                    function handleError(error) {
                        console.error("Geolocation error: ", error);
                        if (error.code === error.PERMISSION_DENIED) {
                            alert("Geolocation permission denied. Please allow access to your location.");
                        } else if (error.code === error.TIMEOUT) {
                            alert("Geolocation request timed out. Please try again.");
                        } else {
                            alert("An error occurred while retrieving your location.");
                        }
                    }

                    // Create a LatLngBounds object to fit all markers
                    var bounds = L.latLngBounds();
                    
                    // Add quest markers to the map
                    console.log("Quests data:", quests); // Debug: log quests data
                    
                    if (quests && quests.length > 0) {
                        quests.forEach(function(quest) {
                            console.log("Adding quest:", quest); // Debug: log each quest
                            
                            var questLocation = L.marker([quest.latitude, quest.longitude], {
                                icon: questIcon
                            }).addTo(map);
                            
                            // Bind a popup with quest details
                            questLocation.bindPopup("<span style='color: red; font-size: 13px;'>Quest: </span><b>" + quest.job_name + "</b>" + "<br><span style='color: blue; font-size: 13px;'>Description: </span><b>" + quest.description + "<br></b><span style='color: green; font-size: 13px;'>Salary</span> " + quest.salary + "$");
                            
                            // Extend the bounds to include this marker's position
                            bounds.extend(questLocation.getLatLng());
                        });
                        
                        // If there are quests, fit the map to show all of them
                        map.fitBounds(bounds, { padding: [50, 50] });
                    } else {
                        console.log("No quests found or quests data is invalid");
                    }

                    // Layers control setup
                    var baseMaps = {
                        "<span style='color: green'>OSM</span>": Map_layer,
                        "<span style='color: blue'>Google</span>": googleStreets
                    };

                    var overlayMaps = {
                        "<span style='color: red'>My Location</span>": my_location
                    };

                    // Add control layers after map initialization
                    L.control.layers(baseMaps, overlayMaps, {collapsed: false}).addTo(map);

                    //click on map
                    var popup = L.popup();

                    function onMapClick(e) {
                        popup
                            .setLatLng(e.latlng)
                            .setContent("You clicked the map at " + e.latlng.toString())
                            .openOn(map);
                    }

                    map.on('click', onMapClick);

                    //search bar 
                    L.Control.geocoder().addTo(map);
                </script>
                
                <!-- Embed the quests data as a JSON script for debugging -->
                <script type="application/json" id="quests_data">
                    {{ quests | safe }}
                </script>
                
            </div>
        </main>
    </div>
{% endblock %}