function updateZoomText(){    
        if (map.getZoom() >=10){
        
        document.getElementById("zoomalert").innerHTML = "";
        return;
    }
    else{
        // document.getElementById("cheapestinfo").innerHTML = "";
    }
    zoomstr = "Click the Zoom in button " + (10-map.getZoom()).toString() + " more time";
    if (10-map.getZoom() > 1){
        zoomstr +="s";
    }
    zoomstr+=" to see fuel prices";

    document.getElementById("zoomalert").innerHTML = zoomstr ;
}

function getLastSelectedFuel(){
    var fuel = localStorage.getItem('fuel');
    if (fuel == null){
        fuel = 1;
        localStorage.setItem('fuel',fuel);
    }
    return fuel;
}

function fuelSelectChange(name){
    var fuel = document.getElementById(name).value;
    localStorage.setItem('fuel',fuel);
    addMarkers(json_response);
    updateListHtml(json_response);
}

function getFuelSelectHTML(){
    var fuel = getLastSelectedFuel();
    var fuelSelectHTML ="";

    fuelSelectHTML += "<select style=\"max-width:300px;background-color:#005a6a;color:white;font-weight:bold;10px;height:50px;\" id=\"aboveMapfuelSelect\" class=\"form-control\"  onchange=\"fuelSelectChange('aboveMapfuelSelect')\">";
    fuelSelectHTML += "<option value=\"1\"";
    if (fuel == 1){
        fuelSelectHTML += " selected";
    }
    fuelSelectHTML += ">Normal Unleaded petrol prices (E10)</option>";
    fuelSelectHTML += "<option value=\"2\"";
    if (fuel == 2){
        fuelSelectHTML += " selected";
    }
    fuelSelectHTML += ">Old-style unleaded petrol prices (E5)</option>";
    fuelSelectHTML += "<option value=\"3\"";
    if (fuel == 3){
        fuelSelectHTML += " selected";
    }
    fuelSelectHTML += ">Diesel prices (B7)</option>";
    fuelSelectHTML += "<option value=\"4\"";
    if (fuel == 4){
        fuelSelectHTML += " selected";
    }
    fuelSelectHTML += ">Super Diesel prices (SDV)</option>";
    fuelSelectHTML += "</select>";
    return fuelSelectHTML;
}

function sortStationsByFuelPrice(data, fuelIndex) {
    // Extract stations as an array
    let stationsArray = Object.values(data);

    // Filter out non-station entries and stations where the price at the given index is not set, is -1, or is 999999
    stationsArray = stationsArray.filter(station => station.fuel_prices && station.fuel_prices[fuelIndex] < 999999);

    // Sort the array based on the fuel price at the given index
    stationsArray.sort((a, b) => a.fuel_prices[fuelIndex] - b.fuel_prices[fuelIndex]);
    return stationsArray;
}


function updateListHtml(json) {
    var fuel = getLastSelectedFuel();
    var priceSortedStations = sortStationsByFuelPrice(json, fuel);

    var html = "<div class=\"container\" > <div class=\"table-wrap\"><table class=\"sortable\"> <caption style=\"text-align:center; color:#005a6a;\"> Click station to see location map.<br> ";
    html += "<thead> <tr> <th style=\"padding-top: 20px;padding-bottom: 20px;\"> Station <span aria-hidden=\"true\"></span> </th> <th  class=\"num\" aria-sort=\"unsorted\">Price </th> </tr> </thead> <tbody> ";

    for (sortedStation in priceSortedStations) {
        if ((!(islandOnly))||((islandOnly) && (priceSortedStations[sortedStation]['island'] == 1) && (hasIsland))||(islandOnly && !hasIsland)){
            html+= "<tr>\n<td>\n<a style=\"color:black;\" href=\"/station/" + priceSortedStations[sortedStation]['id'] + "\">" + priceSortedStations[sortedStation]['name'] + "<br/>" + priceSortedStations[sortedStation]['address'] + "<br/>"  + priceSortedStations[sortedStation]['postcode'] + "</a>\n</td>\n<td class=\"num\">" + priceSortedStations[sortedStation]['fuel_prices'][fuel] + "</td>\n</tr>\n";
        }
    }
    html += "</tbody>\n</table>\n</div>";
    document.getElementById('station_list').innerHTML = html;
}

function populateStationModal(id){
    modalText = "<h4>Current prices:</h4>";
    if ((islandOnly)&&(hasIsland)){
        chosenMins = json_response['islandmins'];
    }
    else{
        chosenMins = json_response['mins'];
    }
    if (id['fuel_prices'][1]!=999999){
        if (id['fuel_prices'][1]==chosenMins[1]){
            modalText += "<p style='color:green'>Unleaded (E10): " + id['fuel_prices'][1] + "</p>";
        }
        else{
            modalText += "<p style='color:red'>Unleaded (E10): " + id['fuel_prices'][1] + " (" + (id['fuel_prices'][1]-chosenMins[1]).toFixed(1) + "p more expensive)</p>";
        }
    }

    if (id['fuel_prices'][2]!=999999) {
        if (id['fuel_prices'][2]==chosenMins[2]){
            modalText += "<p style='color:green'>Old unleaded (E5): " + id['fuel_prices'][2] + "</p>";
        }
        else{
            modalText += "<p style='color:red'>Old unleaded (E5): " + id['fuel_prices'][2] + " (" + (id['fuel_prices'][2]-chosenMins[2]).toFixed(1) + "p more expensive than cheapest)</p>";
        }
    }
    if (id['fuel_prices'][3]!=999999) {
        if (id['fuel_prices'][3]==chosenMins[3]){
            modalText += "<p style='color:green'>Diesel (B7): " + id['fuel_prices'][3] + "</p>";
        }
        else{
            modalText += "<p style='color:red'>Diesel (B7): " + id['fuel_prices'][3] + " (" + (id['fuel_prices'][3]-chosenMins[3]).toFixed(1) + "p more expensive than cheapest)</p>";
        }
    }

    if (id['fuel_prices'][4]!=999999) {
        if (id['fuel_prices'][4]==mins[4]){
            modalText += "<p style='color:green'>Super Diesel (SDV): " + id['fuel_prices'][4] + "</p>";
        }
        else{
            modalText += "<p style='color:red'>Super Diesel (SDV): " + id['fuel_prices'][4] + + " (" + (id['fuel_prices'][4]-chosenMins[4]).toFixed(1) + "p more expensive than cheapest)</p>";
        }
    }

    modalText += "<br/><span style='color:green'>green = cheapest in this area</span><br/>";
    modalText += "<span style='color:red'>red = not cheapest in this area</span>";


    document.getElementById("modal-body").innerHTML = modalText ;
    //  + minHTML;
    document.getElementById("exampleModalLabel").innerHTML = "<a href=\"/station/" + id['id'] +"\"><h2>" + id['name']  + ' - ' + id['short_address'] + "</a></h2>(click address to view map)";
    $('#exampleModal').modal('show');
}

function toggleIslandOnly(){
    if (document.getElementById('islandOnlyCheckbox').checked) {
        islandOnly = true;
        localStorage.setItem('islandOnly', 'true');
    }
    else{
        islandOnly = false;
        localStorage.setItem('islandOnly', 'false');
    }

    markersLayer.clearLayers();
    addMarkers(json_response);
    updateListHtml(json_response);
    addNerdMode(json_response);
}

function check_to_show_island_only(data){
    hasIsland = false;
    for (var key in data) {
        if ((key !== "mins")&&(key !== "islandmins")) {
            if (data[key]['island'] == 1){
                hasIsland = true;
                break;
            }
        }
    }
    if (hasIsland){
        document.getElementById("islandOnlyOption").innerHTML = "<input type=\"checkbox\" id=\"islandOnlyCheckbox\" name=\"islandOnly\" onclick=\"toggleIslandOnly();\"> Only show island stations";
        if (islandOnly) {
            document.getElementById("islandOnlyCheckbox").checked = true;
        }
        document.getElementById("islandOnlyOption").style.display = "block";
    }
    else{
        document.getElementById("islandOnlyOption").style.display = "none";
    }
}

function highlightPrice(price,count){    
    markers.forEach((marker, index) => {
        <!-- console.log(`Marker ${index}:`, marker); -->
    });    
    
}



function getPricesToColoursArr(data){
    var returnArr = [];
    smallest = data[0];
    largest = data[data.length - 1];
        
    var rg_delta = Math.abs(parseInt(190 / (largest - smallest)));
    var current_red ;
    var current_green ;
    
    for (var i = 0; i < data.length; i++) {        
        this_price = data[i];
        dist_from_base = this_price - smallest;
        current_green = 190 - (rg_delta * dist_from_base);
        current_red = rg_delta * dist_from_base;
        returnArr[i] = 'rgba('+current_red+', '+current_green+',' + 120 + ', 1)';
    }    
    returnArr[0] = 'rgba(0, 255, 0, 1)';
    returnArr[data.length - 1] = 'rgba(255, 0, 0, 1)';
    return returnArr;
}

function getPricesToColoursDict(data){
    var returnDict = {};
    smallest = data[0];
    largest = data[data.length - 1];
            
    var rg_delta = Math.abs(parseInt(190 / (largest - smallest)));    
    var current_red ;
    var current_green ;
    
    for (var i = 0; i < data.length; i++) {        
        this_price = data[i];
        dist_from_base = this_price - smallest;
        current_green = 190 - (rg_delta * dist_from_base);
        current_red = rg_delta * dist_from_base;
        returnDict[this_price] = 'rgba('+current_red+', '+current_green+',' + 120 + ', 1)';
    }    

    returnDict[largest] = 'rgba(255, 0, 0, 1)';
    returnDict[smallest] = 'rgba(0, 255, 0, 1)';
    return returnDict;
}

function get_prices_dict_from_data(data) {
    var x_vals = [];
    var y_vals = [];
    var prices_dict = {};    

    hasIsland = false;
    for (var key in data) {
        if ((key !== "mins")&&(key !== "islandmins")) {
            if (data[key]['island'] == 1){
                hasIsland = true;
                break;
            }
        }
    }    

    var selectedFuel = getLastSelectedFuel();
    for (var key in data) {
        if ((key !== "mins")&&(key !== "islandmins")){            

            <!-- We only need to check island if this is NOT an island station! -->
            if (!data[key]['island']) {
                if ((islandOnly)&&(hasIsland)){
                    continue;
                }                    
            }

            if (data[key]['fuel_prices'][selectedFuel] != 999999){
                if (data[key]['fuel_prices'][selectedFuel] in prices_dict) {
                    prices_dict[data[key]['fuel_prices'][selectedFuel]] += 1;
                }
                else{
                    prices_dict[data[key]['fuel_prices'][selectedFuel]] = 1;
                }                
            }                        
        }
    }
    
    var sortedKeys = Object.keys(prices_dict).map(Number).sort((a, b) => a - b);
    var keyCount = 0;
    sortedKeys.forEach(key => {
        keyCount += 1;
        x_vals.push(key);
        if (prices_dict[key] >3) {
            prices_dict[key] = 4;
        }
        y_vals.push(prices_dict[key]);
    });     

    return [x_vals, y_vals, keyCount, sortedKeys];
}




function addNerdMode(data){        
    if (typeof myChart !== 'undefined') {
        myChart.destroy();
    }

    var fuelNames = ['','Unleaded (E10)','Old unleaded (E5)','Diesel (B7)','Super Diesel (SDV)'];    

    var [x_vals, y_vals, keyCount,sortedKeys] = get_prices_dict_from_data(data);
          
    if (keyCount>2) {
        var chart_data = x_vals.map((k, i) => ({x: k, y: y_vals[i]}));
        var backgroundColrs = getPricesToColoursArr(sortedKeys);
        var borderColor = Array(x_vals.length).fill('rgba(10,10,10, 1)');
        
        const ctx = document.getElementById('myChart').getContext('2d');
        myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                datasets: [{
                    label: 'Num of Stations at this price:',
                    data: chart_data,
                    backgroundColor: backgroundColrs,
                    borderColor: borderColor,
                    borderWidth: 1,
                    barPercentage: 1,
                    categoryPercentage: .9,
                    borderRadius: 1,
                }]
            },
            options: {
            maintainAspectRatio: false,
                scales: {
                    x: {
                        type: 'category',
                        labels: x_vals,
                        grid: {
                            display: false // Hide horizontal grid lines if needed
                        },                        
                        offset: true,
                      
                        title: {
                            display: true,
                            text: 'Prices',
                            font: {
                                size: 14
                            }
                        }
                    }, 
                    y: {
                        // beginAtZero: true
                        title: {
                            display: true,
                            text: 'Stations',
                            font: {
                                size: 14
                            }
                        },
                        ticks: {
                            callback: function(value, index, values) {                                
                                if (value === 4) {
                                    return '3+';
                                }
                                return value;
                            }
                        },
                        grid: {
                            display: false // Hide horizontal grid lines if needed
                        }                                               
                    }
                },
                plugins: {
                legend: {
                    display: false,
                    },
                tooltip: {
                    callbacks: {
                        title: (items) => {
                            if (!items.length) {
                                return '';
                            }                        
                        const item = items[0];
                        return `Price: ${item.label}`;
                        },
                        label: (item) => {
                            const count = item.raw.y;
                            if (count>3) {
                                return `Num of stations at this price: 3+`;
                            }
                            return `Num of stations at this price: ${count}`;
                        }
                    }
                }
            },
            onClick: (event, elements) => {
                if (elements.length > 0) {
                    const element = elements[0];
                    const datasetIndex = element.datasetIndex;
                    const index = element.index;
                    const dataset = myChart.data.datasets[datasetIndex];
                    const data = dataset.data[index];
                    const price = data.x;
                    const count = data.y;
                    highlightPrice(price, count);                                        
                }
            }
            }
        });    
    }

}
function getPrices(){
        if (map.getZoom() >= 10){
            var bounds = map.getBounds();
        var southWest = bounds.getSouthWest();
        var northEast = bounds.getNorthEast();
        var minLat = southWest.lat;
        var minLong = southWest.lng;
        var maxLat = northEast.lat;
        var maxLong = northEast.lng;

        var url = '/stationsfromgeo?minLat=' + minLat + '&maxLat=' + maxLat + '&minLong=' + minLong + '&maxLong=' + maxLong + '&fuelType=' + getLastSelectedFuel();
        document.getElementById('spinner').style.display = 'block';
        fetch(url)
            .then(response => response.json())
            .then(data => {
                document.getElementById('spinner').style.display = 'none';
                json_response = data;
                check_to_show_island_only(json_response);
                addMarkers(json_response);
                listHtml = updateListHtml(json_response);
                addNerdMode(json_response);
                
            })
            .catch(error => {
                console.error('Error:', error);
            });
    }
    else{
        updateZoomText();
    }
}

function fetchAndColorSvg(svgContent, color, callback) {
    // Modify the SVG content to apply the desired color
    const coloredSvg = svgContent.replace(/<path/g, `<path fill="${color}"  fill-opacity="1"`);
    // Convert the modified SVG content to a data URL
    const svgDataUrl = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(coloredSvg);
    callback(svgDataUrl);
}

function addMarkers(data){
    var [x_vals, y_vals, keyCount, sortedKeys] = get_prices_dict_from_data(data);
    var backgroundColrs = getPricesToColoursDict(sortedKeys);
    markersLayer.clearLayers();
    
    mins = data['mins'];

    var selectedFuel = getLastSelectedFuel();
    for (var key in data) {
        if ((key !== "mins") && (key !== "islandmins")) {
            if (data[key]['fuel_prices'][selectedFuel] != 999999) {
                if ((islandOnly) && (hasIsland)) {
                    chosenMins = data['islandmins'];
                } else {
                    chosenMins = data['mins'];
                }

                var customcolor = backgroundColrs[data[key]['fuel_prices'][selectedFuel]];

                // Define the SVG content
                var svgContent = `<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92.53 122.88"><defs><style>.cls-1{fill-rule:evenodd;}</style></defs><title>gas-station-location</title><path class="cls-1" d="M67,31a1,1,0,0,1,.29.21l.07.07a14.71,14.71,0,0,1,3.15,3.2,6.49,6.49,0,0,1,1.13,4.87,4.76,4.76,0,0,1-.88,2.1,5.48,5.48,0,0,1-1.2,1.15c0,.62,0,1.22,0,1.81,0,.77,0,1.56.08,2.37.1,1.89.38,3.81.66,5.7A32.55,32.55,0,0,1,71,57.25a12.4,12.4,0,0,1-1.1,6.5,5.06,5.06,0,0,1-5,2.6h0c-2.83,0-4.58-1.64-5.37-4.58a14.24,14.24,0,0,1-.41-4.8c.23-3.52.87-5.37.3-9.1A13,13,0,0,0,58.26,44a4.68,4.68,0,0,0-2.51-2.42V66.89a3.52,3.52,0,0,1,.92.66,3.4,3.4,0,0,1,1,2.38v2.39a1.1,1.1,0,0,1-1.1,1.1H28.46a1.1,1.1,0,0,1-1.1-1.1V69.93A3.41,3.41,0,0,1,29,67.05V28.75a5.82,5.82,0,0,1,5.81-5.81H49.91a5.86,5.86,0,0,1,5.84,5.84V39.32A6.5,6.5,0,0,1,60.21,43a16,16,0,0,1,1.39,4.88c.69,5,0,4.4-.32,9.12a11.84,11.84,0,0,0,.34,4.17c.51,1.91,1.58,2.94,3.3,3h0a3,3,0,0,0,3-1.5,10.54,10.54,0,0,0,.82-5.33,34.76,34.76,0,0,0-.67-4.52c-.29-1.93-.58-3.87-.69-5.92,0-.8-.07-1.62-.07-2.47,0-.67,0-1.34,0-2a10.46,10.46,0,0,1-3.68-5.37,5.77,5.77,0,0,1,1.2-4.87,15.85,15.85,0,0,0-2.74-1.52,7.35,7.35,0,0,0-2.61-.82,1.09,1.09,0,0,1,.35-2.16,9.17,9.17,0,0,1,3.13,1A19.42,19.42,0,0,1,67,31ZM47.63,115.69A82.49,82.49,0,0,0,64,101.81,85.53,85.53,0,0,0,84.56,62.23c2.81-13.67,1.5-27-4.76-37.34a36.41,36.41,0,0,0-6.62-8.06C65.61,9.93,57,6.63,48.23,6.56,39.07,6.48,29.77,10,21.55,16.5a38.54,38.54,0,0,0-8.63,9.56C7.15,35.15,5.41,46.43,7.31,58.24c1.94,12,7.67,24.61,16.77,36a102.2,102.2,0,0,0,23.55,21.41Zm21.23-9.46a88.78,88.78,0,0,1-19.32,16,3.3,3.3,0,0,1-3.72.13,109.2,109.2,0,0,1-26.89-24c-9.8-12.31-16-26-18.1-39.1C-1.33,45.89.7,33,7.36,22.53a45.3,45.3,0,0,1,10.1-11.18C26.85,3.87,37.6-.09,48.29,0,58.6.09,68.79,3.93,77.6,12a43.06,43.06,0,0,1,7.81,9.53c7.16,11.8,8.72,26.83,5.58,42.05a92.05,92.05,0,0,1-22.13,42.69ZM54.75,68.86H30.27a1.16,1.16,0,0,0-.36.25,1.13,1.13,0,0,0-.35.83v1.29H55.47V69.94a1.21,1.21,0,0,0-.35-.83,1.15,1.15,0,0,0-.37-.25ZM36.11,28H48.84a2.38,2.38,0,0,1,1.7.71l.08.09a2.37,2.37,0,0,1,.62,1.6v8.12a2.39,2.39,0,0,1-.7,1.7,2.42,2.42,0,0,1-1.7.71H36.11a2.42,2.42,0,0,1-1.69-.71h0a2.39,2.39,0,0,1-.7-1.69V30.35a2.39,2.39,0,0,1,.7-1.69l.1-.09a2.42,2.42,0,0,1,1.6-.62Z"/></svg>`;
                svgContent = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 92.25 122.88" style="enable-background:new 0 0 92.25 122.88" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g><path class="st0" d="M68.51,106.28c-5.59,6.13-12.1,11.62-19.41,16.06c-0.9,0.66-2.12,0.74-3.12,0.1 c-10.8-6.87-19.87-15.12-27-24.09C9.14,86.01,2.95,72.33,0.83,59.15c-2.16-13.36-0.14-26.22,6.51-36.67 c2.62-4.13,5.97-7.89,10.05-11.14C26.77,3.87,37.48-0.08,48.16,0c10.28,0.08,20.43,3.91,29.2,11.92c3.08,2.8,5.67,6.01,7.79,9.49 c7.15,11.78,8.69,26.8,5.55,42.02c-3.1,15.04-10.8,30.32-22.19,42.82V106.28L68.51,106.28z M46.12,23.76 c12.68,0,22.95,10.28,22.95,22.95c0,12.68-10.28,22.95-22.95,22.95c-12.68,0-22.95-10.27-22.95-22.95 C23.16,34.03,33.44,23.76,46.12,23.76L46.12,23.76z"/></g></svg>';

                // Color the SVG and create the custom icon
                fetchAndColorSvg(svgContent, customcolor, function(svgDataUrl) {
                    var customIcon = L.icon({
                        iconSize: [40, 30],
                        iconAnchor: [10, 10],
                        iconUrl: svgDataUrl
                    });


                    var fuelNames = ['', 'Unleaded (E10)', 'Old unleaded (E5)', 'Diesel (B7)', 'Super Diesel (SDV)'];
                    if ((!(islandOnly)) || ((islandOnly) && (data[key]['island'] == 1) && (hasIsland)) || (islandOnly && !hasIsland)) {
                        var title = chosenMins[selectedFuel] == data[key]['fuel_prices'][selectedFuel] ? data[key]['name'] + " - Cheapest for " + fuelNames[selectedFuel] + " in this area" : data[key]['name'] + ": " + (data[key]['fuel_prices'][selectedFuel] - chosenMins[selectedFuel]).toFixed(1) + "p per liter more expensive than cheapest in this area";
                        var zIndexOffset = chosenMins[selectedFuel] == data[key]['fuel_prices'][selectedFuel] ? 1000 : 0; // Green markers on top
                        var stationMarker = L.marker([data[key]['latitude'], data[key]['longitude']], {
                            icon: customIcon,
                            title: title,
                            zIndexOffset: zIndexOffset
                        }).addTo(markersLayer);
                        markers.push(stationMarker);

                        (function(key) {
                            stationMarker.on('click', function(e) {
                                populateStationModal(data[key]);
                            });
                        })(key);
                    }
                });
            }
        }
    }
}
function initMap(inlat,inlong,zoom = 13) {
        map = L.map('map').setView([inlat, inlong], zoom);
        markersLayer = new L.LayerGroup().addTo(map);
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 30,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

    var titleControl = L.control({ position: 'bottomright' });

            
            var title="You can drag this map, and click +/- to zoom<br/>Hover over a marker to see more info<br/>Click a marker for more info<br/>Click this box to hide it"; 
            titleControl.onAdd = function(map) {
        var div = L.DomUtil.create('div', 'map-title');
        div.innerHTML = '<h6 style="margin-top:0px;margin-bottom:0px;">' + title + '</h6>';
        div.style.backgroundColor = 'white';
        div.style.padding = '5px';
        div.style.borderRadius = '5px';
        div.style.boxShadow = '0 0 15px rgba(0,0,0,0.2)';
        div.style.cursor = 'pointer'; // Add cursor pointer to indicate it's clickable
        div.onclick = function() {
            removeTitleControl(); // Call the function to remove the control when clicked
        };        
        return div;
    };

    titleControl.addTo(map);
    var titleControlRef = titleControl;

    getPrices();

    map.on('zoomend', function(e) {
        markersLayer.clearLayers();
        updateZoomText();
        getPrices();
    });

    map.on('moveend', function(e) {
        markersLayer.clearLayers();
        center = map.getCenter();
        getPrices();
        check_to_show_island_only(json_response);
    });

    function removeTitleControl() {
    if (titleControlRef) {
        map.removeControl(titleControlRef);
        titleControlRef = null; // Clear the reference
    }
}    
}