document.addEventListener("DOMContentLoaded", function() {
    // Fetch the Boats Data
    const apiKey = "7aacc555dc321f5095c4833cc5e06727";
    const endpoints = {
        allBoats: `http://api.boats.com/inventory/search?key=${apiKey}`,
        active: `http://api.boats.com/inventory/search?key=${apiKey}&salesstatus=active`,
        pending: `http://api.boats.com/inventory/search?key=${apiKey}&salesstatus=sale%20pending`,
        onOrder: `http://api.boats.com/inventory/search?key=${apiKey}&salesstatus=on-order`
    };

    // Function to fetch and display boat listings
    function fetchBoats(endpoint) {
        fetch(endpoint)
            .then(response => response.json())
            .then(data => {
                const container = document.getElementById('boats-listings');
                container.innerHTML = "";  // Clear previous listings
                
                if (data.inventory && data.inventory.length > 0) {
                    data.inventory.forEach(boat => {
                        const boatElement = document.createElement('div');
                        boatElement.className = 'boat-card';
                        boatElement.innerHTML = `
                            <h2>${boat.name}</h2>
                            <p>Status: ${boat.salesstatus}</p>
                            <p>Price: ${boat.price ? `$${boat.price}` : "Price on Request"}</p>
                        `;
                        container.appendChild(boatElement);
                    });
                } else {
                    container.innerHTML = `<p>No boats available for the selected status.</p>`;
                }
            })
            .catch(error => console.error("Error fetching boats data:", error));
    }

    // Display all boats initially
    fetchBoats(endpoints.allBoats);

    // Optionally, add event listeners for different statuses
    document.getElementById("filter-active").addEventListener("click", function() {
        fetchBoats(endpoints.active);
    });

    document.getElementById("filter-pending").addEventListener("click", function() {
        fetchBoats(endpoints.pending);
    });

    document.getElementById("filter-on-order").addEventListener("click", function() {
        fetchBoats(endpoints.onOrder);
    });
});