Main/resources/[carscripts]/lc_fuel/nui/panel.js

let currentPumpData;
let selectedFuelType;
let fuelTypeWarnSent;

// Fuel Consumption Chart Dialog
let fuelChart, speedChart, consumptionChart;
let toggleChartFocusShortcut;
let chartTimestampsIndex = 1;
let chartTimestamps = [ 15, 30, 60, 90, 120, 150, 180 ];
let isRecording;

window.addEventListener("message", async function(event) {
    const item = event.data;
    if (item.data) {
        currentPumpData = item.data;
    }
    if (item.resourceName) {
        Utils.setResourceName(item.resourceName);
    }
    if (item.utils) {
        await Utils.loadLanguageModules(item.utils);
        Utils.post("setNuiVariablesLoaded", null, "setNuiVariablesLoaded");
    }
    if (item.type === "copyToClipboard") {
        const el = document.createElement("textarea");
        el.value = item.text;
        document.body.appendChild(el);
        el.select();
        document.execCommand("copy");
        document.body.removeChild(el);
    }
    if (item.openMainUI) {
        if (currentPumpData.isElectric) {
            $("#electric-time-to-recharge").html(`${Utils.translate("electricInterface.chargerAmount.timeToRechargeText")} <span id="electric-time-to-recharge-value"></span>`);

            $("#electric-charger-type-title").text(Utils.translate("electricInterface.chargerType.title"));
            $("#electric-charger-type-fast").text(Utils.translate("electricInterface.chargerType.fast.title"));
            $("#electric-charger-type-normal").text(Utils.translate("electricInterface.chargerType.normal.title"));
            $("#electric-charger-type-label-item-fast-price").text(Utils.translate("electricInterface.chargerType.pricePerKWh").format(Utils.currencyFormat(currentPumpData.pricePerLiter.electricfast)));
            $("#electric-charger-type-label-item-normal-price").text(Utils.translate("electricInterface.chargerType.pricePerKWh").format(Utils.currencyFormat(currentPumpData.pricePerLiter.electricnormal)));
            $("#electric-charger-type-label-item-fast-power").text(Utils.translate("electricInterface.chargerType.fast.power"));
            $("#electric-charger-type-label-item-normal-power").text(Utils.translate("electricInterface.chargerType.normal.power"));
            $("#electric-charger-continue-type-button").text(Utils.translate("electricInterface.continueButton"));

            $("#electric-charger-amount-title").text(Utils.translate("electricInterface.chargerAmount.title"));
            $("#electric-charger-amount-input").attr("placeholder", Utils.translate("electricInterface.chargerAmount.placeholder"));
            $("#electric-charger-continue-amount-button").text(Utils.translate("electricInterface.continueButton"));

            $("#electric-charger-payment-title").text(Utils.translate("electricInterface.chargerPayment.title"));
            $("#electric-charger-payment-bank").text(Utils.translate("electricInterface.chargerPayment.bank"));
            $("#electric-charger-payment-money").text(Utils.translate("electricInterface.chargerPayment.money"));

            if (currentPumpData.stationStock.electricfast == 0) {
                $("#electric-charger-fast-label-wrapper")
                    .attr("data-tooltip", Utils.translate("electricInterface.outOfStock"))
                    .attr("data-tooltip-location", "top");
                $("#charger-type-fast").prop("disabled", true);
            } else {
                $("#electric-charger-fast-label-wrapper")
                    .removeAttr("data-tooltip")
                    .removeAttr("data-tooltip-location");
                $("#charger-type-fast").prop("disabled", false);
            }

            if (currentPumpData.stationStock.electricnormal == 0) {
                $("#electric-charger-normal-label-wrapper")
                    .attr("data-tooltip", Utils.translate("electricInterface.outOfStock"))
                    .attr("data-tooltip-location", "top");
                $("#charger-type-normal").prop("disabled", true);
            } else {
                $("#electric-charger-normal-label-wrapper")
                    .removeAttr("data-tooltip")
                    .removeAttr("data-tooltip-location");
                $("#charger-type-normal").prop("disabled", false);
            }

            $(".electric-charger-type-container").css("display", "");
            $(".electric-charger-amount-container").css("display", "none");
            $(".electric-charger-payment-container").css("display", "none");
            $("#electric-charger-container").fadeIn(200);
        } else {
            if (currentPumpData.pumpModel == "prop_gas_pump_1a" || currentPumpData.pumpModel == "prop_gas_pump_1b" || currentPumpData.pumpModel == "prop_gas_pump_1c" || currentPumpData.pumpModel == "prop_gas_pump_1d") {
                $("#gas-pump-container-image").attr("src", `images/${currentPumpData.pumpModel}.png`);
            } else {
                $("#gas-pump-container-image").attr("src", `images/prop_gas_pump_1b.png`);
            }
            fuelTypeWarnSent = false;
            changeSelectedFuelType(currentPumpData.currentFuelType);
            $(".vehicle-fuel").text(Utils.translate("pumpInterface.vehicleFuel").format(`${Utils.numberFormat(currentPumpData.vehicleFuel, 1)} / ${Utils.numberFormat(currentPumpData.vehicleTankSize, 0)}`));
            $(".vehicle-fuel").attr("data-tooltip", Utils.translate("pumpInterface.vehicleFuelTooltip"));
            $(".bank-balance").text(Utils.currencyFormat(currentPumpData.bankBalance, 2));
            $(".cash-balance").text(Utils.currencyFormat(currentPumpData.cashBalance, 2));

            $(".fuel-type-button.regular").text(Utils.translate("pumpInterface.fuelTypes.regular"));
            $(".fuel-type-button.plus").text(Utils.translate("pumpInterface.fuelTypes.plus"));
            $(".fuel-type-button.premium").text(Utils.translate("pumpInterface.fuelTypes.premium"));
            $(".fuel-type-button.diesel").text(Utils.translate("pumpInterface.fuelTypes.diesel"));
            $(".confirm-button").text(Utils.translate("pumpInterface.confirm"));

            $("#confirm-refuel-payment-modal-title").text(Utils.translate("confirmRefuelModal.title"));
            $("#confirm-refuel-payment-modal-pay-bank").text(Utils.translate("confirmRefuelModal.paymentBank"));
            $("#confirm-refuel-payment-modal-pay-cash").text(Utils.translate("confirmRefuelModal.paymentCash"));

            $("#confirm-jerry-can-payment-modal-title").text(Utils.translate("confirmBuyJerryCanModal.title"));
            $("#confirm-jerry-can-payment-modal-desc").text(Utils.currencyFormat(currentPumpData.jerryCan.price, 2));
            $("#confirm-jerry-can-payment-modal-pay-bank").text(Utils.translate("confirmBuyJerryCanModal.paymentBank"));
            $("#confirm-jerry-can-payment-modal-pay-cash").text(Utils.translate("confirmBuyJerryCanModal.paymentCash"));

            $("#confirm-fuel-type-modal-title").text(Utils.translate("confirmFuelChangeModal.title"));
            $("#confirm-fuel-type-modal-desc").text(Utils.translate("confirmFuelChangeModal.description"));
            $("#confirm-fuel-type-modal-confirm").text(Utils.translate("confirmation_modal_confirm_button"));
            $("#confirm-fuel-type-modal-cancel").text(Utils.translate("confirmation_modal_cancel_button"));

            if (!currentPumpData.jerryCan.enabled) {
                $(".gas-pump-interactive-button").css("display", "none");
            }

            updateFuelAmountDisplay(true);

            $("#gas-pump-container").fadeIn(200);
        }
    }
    if (item.hideMainUI) {
        $("#gas-pump-container").fadeOut(200);
        $("#electric-charger-container").fadeOut(200);
    }
    if (item.showRefuelDisplay) {
        if (item.isElectric) {
            let percentageOfTankFilled = (item.currentDisplayFuelAmount / item.currentVehicleTankSize) * 100;
            $("#recharge-display-title").text(Utils.translate("rechargerDisplay.title"));
            $("#recharge-display-battery-level-span").text(`${Utils.numberFormat(percentageOfTankFilled, 0)}%`);
            $("#recharge-display-battery-liquid").css("width", `${percentageOfTankFilled}%`);
            $("#recharge-display-remaining-time-title").text(Utils.translate("rechargerDisplay.remainingTimeText"));
            updateRechargeDisplay((item.currentVehicleTankSize - item.currentDisplayFuelAmount), item.fuelTypePurchased);
            $("#recharge-display").fadeIn(200);
        } else {
            $("#refuel-display-pump-value").text(Utils.numberFormat(item.remainingFuelAmount, 2));
            $("#refuel-display-car-value").text(`${Utils.numberFormat(item.currentDisplayFuelAmount, 2)}/${Utils.numberFormat(item.currentVehicleTankSize, 2)}`);
            $(".refuel-display-liters").text(Utils.translate("pumpRefuelDisplay.liters"));
            $("#refuel-display-car-label").text(Utils.translate("pumpRefuelDisplay.carTank"));
            $("#refuel-display-pump-label").text(Utils.translate("pumpRefuelDisplay.remaining"));
            $("#refuel-display").fadeIn(200);
        }
    }
    if (item.hideRefuelDisplay) {
        $("#refuel-display").fadeOut(200);
        $("#recharge-display").fadeOut(200);
    }
    if (item.showFuelConsumptionChart) {
        toggleChartFocusShortcut = item.focusShortcut;
        isRecording = item.isRecording;

        createFuelConsumptionChartObject();
        openFuelConsumptionChart();
        setFuelConsumptionChartPosition(item.position);
        updateFuelConsumptionChart({ fuel: null, speed: null, consumption: null });
    }
    if (item.updateFuelConsumptionChart) {
        updateFuelConsumptionChart(item.fuelConsumptionData);
    }
    if (item.hideFuelConsumptionChart) {
        updateFuelConsumptionChart({ fuel: null, speed: null, consumption: null });
        $("#chart-dialog").fadeOut();
        // fuelChart.destroy();
        // speedChart.destroy();
        // consumptionChart.destroy();
    }
});

function updateRechargeDisplay(remainingFuelAmount, chargerType) {
    if (chargerType == "electricfast") chargerType = "fast";
    if (chargerType == "electricnormal") chargerType = "normal";
    if (chargerType && (chargerType === "fast" || chargerType === "normal")) {
        // Calculate the time to recharge based on remaining fuel amount and charger type's time per unit
        let timeToRecharge = remainingFuelAmount * currentPumpData.electric.chargeTypes[chargerType].time;

        // Convert time to minutes and seconds
        let timeToRechargeMinutes = Math.floor(timeToRecharge / 60);
        let timeToRechargeSeconds = timeToRecharge % 60;

        // Update the display with calculated time
        $("#recharge-display-remaining-time-value").text(Utils.translate("rechargerDisplay.remainingTimeValue").format(Utils.numberFormat(timeToRechargeMinutes, 0), Utils.numberFormat(timeToRechargeSeconds, 0)));
    } else {
        console.log("Invalid charger type or no charger type selected");
    }
}

/*=================
	FUNCTIONS
=================*/

function changeSelectedFuelType(fuelType) {
    if (fuelType == "regular" || fuelType == "plus" || fuelType == "premium" || fuelType == "diesel") {
        $(".fuel-type-button").removeClass("selected");
        $(`.fuel-type-button.${fuelType}`).addClass("selected");

        $(".price-per-liter").text(Utils.currencyFormat(currentPumpData.pricePerLiter[fuelType], 2));
        $(".station-stock").text(Utils.translate("pumpInterface.stationStock").format(Utils.numberFormat(currentPumpData.stationStock[fuelType])));
        selectedFuelType = fuelType;
    } else {
        console.log("Invalid fuel type chosen: " + fuelType);
    }
}

// Show the modal when confirmRefuel is called
function confirmRefuel() {
    if (fuelTypeWarnSent == false && currentPumpData.currentFuelType != selectedFuelType && currentPumpData.vehicleFuel > 0) {
        fuelTypeWarnSent = true;
        $("#confirm-fuel-type-modal").fadeIn();
    } else {
        let $input = $("#input-fuel-amount");
        let fuelAmount = parseInt($input.val());
        $("#confirm-refuel-payment-modal-desc").text(Utils.translate("confirmRefuelModal.description").format(fuelAmount, Utils.translate("pumpInterface.fuelTypes."+selectedFuelType), Utils.currencyFormat(fuelAmount * currentPumpData.pricePerLiter[selectedFuelType])));
        $("#confirm-refuel-payment-modal").fadeIn();
    }
}

// Empty vehicle's tank after user confirm fuel type change
function changeVehicleFuelType() {
    closeModal();
    Utils.post("changeVehicleFuelType", { selectedFuelType });
    currentPumpData.vehicleFuel = 0;
    $(".vehicle-fuel").text(Utils.translate("pumpInterface.vehicleFuel").format(Utils.numberFormat(currentPumpData.vehicleFuel, 2)));
}

// Confirm the buy jerry can action
function openBuyJerryCanModal() {
    closeModal();
    $("#confirm-jerry-can-payment-modal").fadeIn();
}

// Hide the modal
function closeModal() {
    $(".modal").fadeOut();
}

function confirmRefuelPayment(paymentMethod) {
    let $input = $("#input-fuel-amount");
    let fuelAmount = parseInt($input.val());
    Utils.post("confirmRefuel", { selectedFuelType, fuelAmount, paymentMethod });
    closeModal();
}

function confirmJerryCanPayment(paymentMethod) {
    Utils.post("confirmJerryCanPurchase", { paymentMethod });
    closeModal();
}

function increaseZoom() {
    // Get the current zoom level
    let currentZoom = parseFloat($("#gas-pump-container").css("zoom")) || 1;

    // Increase zoom by 5%
    let newZoom = currentZoom + 0.05;

    // Limit the zoom to a maximum of 1.4 (140%)
    if (newZoom > 1.4) {
        newZoom = 1.4;
    }

    // Apply the new zoom level
    $("#gas-pump-container").css("zoom", newZoom);
}

function decreaseZoom() {
    // Get the current zoom level
    let currentZoom = parseFloat($("#gas-pump-container").css("zoom")) || 1;

    // Decrease zoom by 5%
    let newZoom = currentZoom - 0.05;

    // Limit the zoom to a minimum of 0.8 (80%)
    if (newZoom < 0.8) {
        newZoom = 0.8;
    }

    // Apply the new zoom level
    $("#gas-pump-container").css("zoom", newZoom);
}

// Function to update the display with the 'L' suffix
function updateFuelAmountDisplay(setToMax = false) {
    let $input = $("#input-fuel-amount");
    let value = parseInt($input.val());

    // Set value to 1 if it's not a positive number
    if (isNaN(value) || value <= 0) {
        value = 1;
    }

    // Don't let it purchase more L than the vehicle can hold in the tank
    if (setToMax || (!isNaN(value) && value > currentPumpData.vehicleTankSize - currentPumpData.vehicleFuel)) {
        value = Math.floor(currentPumpData.vehicleTankSize - currentPumpData.vehicleFuel);
    }

    $input.val(value + " L");
}

// Pagination for electric chargers
function chargerTypeContinue() {
    let chargerType = getSelectedChargerType();
    if (chargerType && (chargerType == "fast" || chargerType == "normal")) {
        $("#electric-charger-amount-input").val(Math.floor(currentPumpData.vehicleTankSize - currentPumpData.vehicleFuel));
        calculateTimeToRecharge();
        $("#electric-charger-amount-type-selected").text(Utils.translate("electricInterface.chargerAmount.typeSelected").format(Utils.translate(`electricInterface.chargerType.${chargerType}.title`)));
        $(".electric-charger-type-container").css("display", "none");
        $(".electric-charger-amount-container").css("display", "");
    }
}

function chargerAmountContinue() {
    let $input = $("#electric-charger-amount-input");
    let currentValue = parseInt($input.val()) || 0;
    let newWidthPercentage = ((currentPumpData.vehicleFuel / currentPumpData.vehicleTankSize) * 100) + ((currentValue / currentPumpData.vehicleTankSize) * 100);

    if (currentValue <= 0 || newWidthPercentage > 100) {
        return;
    }

    let chargerType = getSelectedChargerType();
    $("#electric-charger-pay-button").text(Utils.translate("electricInterface.chargerPayment.payButton").format(Utils.currencyFormat(currentValue * currentPumpData.pricePerLiter["electric"+chargerType], 2)));
    $(".electric-charger-amount-container").css("display", "none");
    $(".electric-charger-payment-container").css("display", "");
}

function chargerAmountReturn() {
    $(".electric-charger-type-container").css("display", "");
    $(".electric-charger-amount-container").css("display", "none");
    $(".electric-charger-payment-container").css("display", "none");
}

function confirmRecharge() {
    let $input = $("#electric-charger-amount-input");
    let fuelAmount = parseInt($input.val()) || 0;
    Utils.post("confirmRefuel", { selectedFuelType: "electric" + getSelectedChargerType(), fuelAmount, paymentMethod: getSelectedElectricPaymentMethod() });
}

function chargerPaymentReturn() {
    $(".electric-charger-type-container").css("display", "none");
    $(".electric-charger-amount-container").css("display", "");
    $(".electric-charger-payment-container").css("display", "none");
}

function getSelectedChargerType() {
    const selectedInput = $("input[name='charger-type']:checked");
    return selectedInput.length && !selectedInput.prop("disabled") ? selectedInput.val() : null;
}

function getSelectedElectricPaymentMethod() {
    const selectedInput = $("input[name='charger-payment']:checked");
    return selectedInput.length ? selectedInput.val() : null;
}

function calculateTimeToRecharge() {
    let $input = $("#electric-charger-amount-input");
    let currentValue = parseInt($input.val());

    // Allow empty input temporarily; validate only non-empty values
    if ($input.val().trim() === "" || isNaN(currentValue) || currentValue <= 0) {
        currentValue = 0;
    }

    if (currentValue > 1000) {
        currentValue = 1000;
        $input.val(currentValue);
    }

    let chargerType = getSelectedChargerType();
    if (chargerType && (chargerType == "fast" || chargerType == "normal")) {
        let timeToRecharge = currentValue * currentPumpData.electric.chargeTypes[chargerType].time;

        // Calculate minutes and seconds
        let timeToRechargeMinutes = Math.floor(timeToRecharge / 60);
        let timeToRechargeSeconds = timeToRecharge % 60;

        $("#electric-time-to-recharge-value").text(Utils.translate("electricInterface.chargerAmount.timeToRechargeValue").format(Utils.numberFormat(timeToRechargeMinutes, 0), Utils.numberFormat(timeToRechargeSeconds, 0)));

        let newWidthPercentage = ((currentPumpData.vehicleFuel / currentPumpData.vehicleTankSize) * 100) + ((currentValue / currentPumpData.vehicleTankSize) * 100);
        $("#electric-amount-progress-bar").css("width", newWidthPercentage + "%");

        if (newWidthPercentage > 100) {
            $("#electric-amount-progress-bar").css("background", "red");
        } else {
            $("#electric-amount-progress-bar").css("background", "");
        }
    } else {
        console.log("No charger type selected");
    }
}

/*===================
	CHART DIALOG
===================*/

function openFuelConsumptionChart() {
    const $dialog = $("#chart-dialog");

    $("#chart-dialog-title").text(Utils.translate("fuelConsumptionChart.title"));
    $("#chart-dialog-footer-text").text(Utils.translate("fuelConsumptionChart.footer.focus"));
    $("#stepper-chart-recording-input").text(Utils.translate("fuelConsumptionChart.footer.recordsLength").format(chartTimestamps[chartTimestampsIndex]));
    $("#start-stop-recording-label").text(Utils.translate("fuelConsumptionChart.footer.toggleRecording"));
    $("#start-stop-recording").prop("checked", isRecording);

    $dialog.css({
        right: "",
        bottom: "",
        display: "flex",
    }).fadeIn();

    $dialog.draggable({
        handle: ".dialog-header",
    }).resizable({
        minHeight: 450,
        minWidth: 300,
        maxHeight: $(window).height()*0.8,
        maxWidth: $(window).width()*0.8,
    });
    speedChart.resize();
    consumptionChart.resize();
    fuelChart.resize();
}

function setFuelConsumptionChartPosition(position) {
    const $dialog = $("#chart-dialog");
    const windowWidth = $(window).width();
    const dialogWidth = $dialog.outerWidth();

    let top = 10;
    let left;

    // Horizontal position
    if (position === "left") {
        left = 10;
    } else {
        left = windowWidth - dialogWidth - 10;
    }

    $dialog.css({
        top: `${top}px`,
        left: `${left}px`,
    });
}


function updateFuelConsumptionChart(latestData) {
    const now = Date.now();

    if (fuelChart && speedChart && consumptionChart) {
        fuelChart.data.datasets[0].data.push({ x: now, y: latestData.fuel });
        speedChart.data.datasets[0].data.push({ x: now, y: latestData.speed });
        consumptionChart.data.datasets[0].data.push({ x: now, y: latestData.consumption });
    }
    fuelChart.update("quiet");
    speedChart.update("quiet");
    consumptionChart.update("quiet");
}

function createFuelConsumptionChartObject() {
    if (fuelChart || speedChart || consumptionChart) { return; }

    Chart.defaults.color = "rgba(218, 218, 218, 0.73)";
    Chart.overrides.line.spanGaps = false;

    const baseOptions = {
        responsive: true,
        maintainAspectRatio: false,
        elements: { point: { radius: 0 } },
        animation: false,
        interaction: { mode: "index", intersect: false },
        plugins: {
            legend: {
                position: "bottom",
                labels: { boxWidth: 3, boxHeight: 3 },
            },
            streaming: {
                frameRate: 10,
            },
        },
        scales: {
            x: {
                type: "realtime",
                realtime: {
                    duration: 30000,
                    refresh: 1000,
                    delay: 1000,
                },
            },
            y: {
                beginAtZero: true,
            },
        },
    };

    // Fuel Chart

    fuelChart = new Chart(document.getElementById("fuel-chart"), {
        type: "line",
        data: {
            datasets: [{
                label: Utils.translate("fuelConsumptionChart.chartLabels.fuel"),
                data: [],
                borderColor: "#FFD800",
                cubicInterpolationMode: "monotone",
            }],
        },
        options: {
            ...baseOptions,
            scales: {
                ...baseOptions.scales,
                y: {
                    ...baseOptions.scales.y,
                    suggestedMax: 100,
                    title: { display: true, text: Utils.translate("fuelConsumptionChart.chartLabels.fuel") },
                },
            },
        },
    });

    // Speed Chart

    speedChart = new Chart(document.getElementById("speed-chart"), {
        type: "line",
        data: {
            datasets: [{
                label: Utils.translate("fuelConsumptionChart.chartLabels.speed"),
                data: [],
                borderColor: "#0026FF",
                cubicInterpolationMode: "monotone",
            }],
        },
        options: {
            ...baseOptions,
            scales: {
                ...baseOptions.scales,
                y: {
                    ...baseOptions.scales.y,
                    suggestedMax: 140,
                    title: { display: true, text: Utils.translate("fuelConsumptionChart.chartLabels.speed") },
                },
            },
        },
    });

    // Consumption Chart

    consumptionChart = new Chart(document.getElementById("consumption-chart"), {
        type: "line",
        data: {
            datasets: [{
                label: Utils.translate("fuelConsumptionChart.chartLabels.consumption"),
                data: [],
                borderColor: "#7F0000",
                cubicInterpolationMode: "monotone",
            }],
        },
        options: {
            ...baseOptions,
            scales: {
                ...baseOptions.scales,
                y: {
                    ...baseOptions.scales.y,
                    suggestedMax: 0.3,
                    title: { display: true, text: Utils.translate("fuelConsumptionChart.chartLabels.consumption") },
                },
            },
        },
    });
}


/*=================
	LISTENERS
=================*/

$(window).click(function(event) {
    // Close the modal when clicking outside of it
    if ($(event.target).is(".modal")) {
        closeModal();
    }
});

$(document).on("keydown", function(event) {
    // Handle press of Esc key
    if (event.key === "Escape" || event.keyCode === 27) {
        // Check if the modal is open by checking if it's visible
        if ($("#chart-dialog").is(":visible")) {
            closeFuelConsumptionChartUI();
        } else if ($(".modal").is(":visible")) {
            closeModal();
        } else {
            closeUI();
        }
    }
    if (event.key === toggleChartFocusShortcut
        || event.key === "w" || event.key === "W"
        || event.key === "a" || event.key === "A"
        || event.key === "d" || event.key === "D"
        || event.key === "s" || event.key === "S") {
        // Check if the modal is open by checking if it's visible
        if ($("#chart-dialog").is(":visible")) {
            removeFocusFuelConsumptionChartUI();
        }
    }
});

$(document).ready(function() {
    // Handle the add button
    $(".refuel-add").click(function() {
        let $input = $("#input-fuel-amount");
        let currentValue = parseInt($input.val()) || 0;
        if (currentValue < Math.floor(currentPumpData.vehicleTankSize - currentPumpData.vehicleFuel)) {
            $input.val((currentValue + 1) + " L");
        }
    });
    $(".recharge-add").click(function() {
        let $input = $("#electric-charger-amount-input");
        let currentValue = parseInt($input.val()) || 0;
        if (currentValue < Math.floor(currentPumpData.vehicleTankSize - currentPumpData.vehicleFuel)) {
            $input.val((currentValue + 1));
            calculateTimeToRecharge();
        }
    });

    // Handle the sub button
    $(".refuel-sub").click(function() {
        let $input = $("#input-fuel-amount");
        let currentValue = parseInt($input.val()) || 0;
        if (currentValue > 1) {
            $input.val((currentValue - 1) + " L");
        }
    });
    $(".recharge-sub").click(function() {
        let $input = $("#electric-charger-amount-input");
        let currentValue = parseInt($input.val()) || 0;
        if (currentValue > 1) {
            $input.val((currentValue - 1));
            calculateTimeToRecharge();
        }
    });

    // Remove 'L' suffix on focus to allow numeric input, and add it back on blur
    $("#input-fuel-amount").on("focus", function() {
        $(this).val(parseInt($(this).val()) || 1);
    }).on("blur", function() {
        updateFuelAmountDisplay();
    });

    // Recalculate time when change input
    $("#electric-charger-amount-input").on("input", function() {
        calculateTimeToRecharge();
    });
    $("#electric-charger-amount-input").on("blur", function() {
        let $input = $(this);
        let currentValue = parseInt($input.val());

        // If invalid, reset to 0
        if (isNaN(currentValue) || currentValue <= 0) {
            $input.val(0);
        }
    });

    // Handle chart buttons
    $("#start-stop-recording").change(function() {
        if ($(this).is(":checked")) {
            startRecordingGraph();
        } else {
            stopRecordingGraph();
        }
    });

    $("#increase-chart-recording").click(function() {
        if (chartTimestampsIndex < chartTimestamps.length - 1) {
            chartTimestampsIndex++;
            $("#stepper-chart-recording-input").text(Utils.translate("fuelConsumptionChart.footer.recordsLength").format(chartTimestamps[chartTimestampsIndex]));
            changeRecordingIndexGraph();
        }
    });

    $("#decrease-chart-recording").click(function() {
        if (chartTimestampsIndex > 0) {
            chartTimestampsIndex--;
            $("#stepper-chart-recording-input").text(Utils.translate("fuelConsumptionChart.footer.recordsLength").format(chartTimestamps[chartTimestampsIndex]));
            changeRecordingIndexGraph();
        }
    });
});


/*=================
	CALLBACKS
=================*/

function closeUI(){
    Utils.post("close","");
}

function stopRecordingGraph(){
    fuelChart.options.scales.x.realtime.pause = true;
    speedChart.options.scales.x.realtime.pause = true;
    consumptionChart.options.scales.x.realtime.pause = true;
    Utils.post("stopRecordingGraph","");
}

function startRecordingGraph(){
    fuelChart.options.scales.x.realtime.pause = false;
    speedChart.options.scales.x.realtime.pause = false;
    consumptionChart.options.scales.x.realtime.pause = false;
    Utils.post("startRecordingGraph","");
}

function changeRecordingIndexGraph(){
    fuelChart.options.scales.x.realtime.duration = chartTimestamps[chartTimestampsIndex] * 1000;
    speedChart.options.scales.x.realtime.duration = chartTimestamps[chartTimestampsIndex] * 1000;
    consumptionChart.options.scales.x.realtime.duration = chartTimestamps[chartTimestampsIndex] * 1000;
    Utils.post("changeRecordingIndexGraph",chartTimestampsIndex);
}

function closeFuelConsumptionChartUI(){
    Utils.post("closeFuelConsumptionChartUI","");
}

function removeFocusFuelConsumptionChartUI(){
    Utils.post("removeFocusFuelConsumptionChartUI","");
}