VIN checkup

<!-- VIN Decoder Form -->
<div style="text-align: center; padding: 20px;">
&nbsp; &nbsp; <input type="text" id="vinInput" placeholder="Enter VIN" style="padding: 10px; width: 300px;">
&nbsp; &nbsp; <button onclick="fetchVinData()" style="padding: 10px 20px; cursor: pointer;">Decode VIN</button>
&nbsp; &nbsp; <div id="vinOutput" style="margin-top: 20px;"></div>
</div>

<script>
// Ensure that Shopify's "window" is loaded before executing the code
document.addEventListener("DOMContentLoaded", function() {
    const apiPrefix = "https://api.vindecoder.eu/3.2";
    const apiKey = "cf037a9f2fad"; 
    const secretKey = "4eebc84ebd"; 
    const id = "decode";

    // Function to calculate SHA-1 hash
    async function sha1(input) {
        const encoder = new TextEncoder();
        const data = encoder.encode(input);
        const hashBuffer = await crypto.subtle.digest("SHA-1", data);
        const hashArray = Array.from(new Uint8Array(hashBuffer));
        return hashArray.map(byte => byte.toString(16).padStart(2, "0")).join("");
    }

    // Function to fetch VIN data
    async function fetchVinData() {
        try {
            const vin = document.getElementById("vinInput").value;
            if (!vin) {
                alert("Please enter a VIN number.");
                return;
            }

            // Convert VIN to uppercase
            const upperVin = vin.toUpperCase();

            // Generate control sum
            const hash = await sha1(⁠ ${upperVin}|${id}|${apiKey}|${secretKey} ⁠);
            const controlSum = hash.substr(0, 10);

            // Construct API URL
            const apiUrl = ⁠ ${apiPrefix}/${apiKey}/${controlSum}/decode/${upperVin}.json ⁠;

            // Fetch API data
            const response = await fetch(apiUrl);
            if (!response.ok) {
                throw new Error(⁠ HTTP error! Status: ${response.status} ⁠);
            }

            const data = await response.json();

            // Display car details
            let output = "<h3>Vehicle Details:</h3>";
            if (data.decode) {
                data.decode.forEach(item => {
                    output += ⁠ <p><strong>${item.label}:</strong> ${item.value}</p> ⁠;
                });
            } else {
                output = "<p>No details found for this VIN.</p>";
            }

            document.getElementById("vinOutput").innerHTML = output;

        } catch (error) {
            console.error("Error fetching VIN data:", error);
            alert("Error fetching vehicle details. Please try again.");
        }
    }

    // Expose the fetchVinData function to be used in the button's onclick
    window.fetchVinData = fetchVinData;
});
</script>