34462-vm/assets/js/corals.js

// assets/js/corals.js

document.addEventListener('DOMContentLoaded', () => {
    const corals = [
        {
            id: 1,
            name: 'WWC OG Voodoo Magic Zoanthid',
            type: 'Zoanthid',
            color: 'Rainbow',
            price: 129.99,
            seller: 'World Wide Corals',
            seller_url: '#',
            image: 'assets/images/corals/wwc-og-voodoo-magic-zoanthid.jpg'
        },
        {
            id: 2,
            name: 'TSA Bill Murray Acropora',
            type: 'SPS',
            color: 'Green',
            price: 249.99,
            seller: 'Top Shelf Aquatics',
            seller_url: '#',
            image: 'assets/images/corals/tsa-bill-murray-acropora.jpg'
        },
        {
            id: 3,
            name: 'JF Jack-O-Lantern Leptoseris',
            type: 'LPS',
            color: 'Yellow',
            price: 89.99,
            seller: 'Jason Fox Signature Corals',
            seller_url: '#',
            image: 'assets/images/corals/jf-jack-o-lantern-leptoseris.jpg'
        },
        {
            id: 4,
            name: 'RR USA Rainbow Splice Trachyphyllia',
            type: 'LPS',
            color: 'Rainbow',
            price: 399.99,
            seller: 'Reef Raft USA',
            seller_url: '#',
            image: 'assets/images/corals/rr-usa-rainbow-splice-trachyphyllia.jpg'
        },
        {
            id: 5,
            name: 'Godspawn Euphyllia',
            type: 'LPS',
            color: 'Green',
            price: 199.99,
            seller: 'World Wide Corals',
            seller_url: '#',
            image: 'assets/images/corals/godspawn-euphyllia.jpg'
        },
        {
            id: 6,
            name: 'TGC Cherry Bomb Acropora',
            type: 'SPS',
            color: 'Red',
            price: 179.99,
            seller: 'The Coral Gorilla',
            seller_url: '#',
            image: 'assets/images/corals/tgc-cherry-bomb-acropora.jpg'
        },
        {
            id: 7,
            name: 'Bounce Mushroom',
            type: 'Mushroom',
            color: 'Pink',
            price: 450.00,
            seller: 'Top Shelf Aquatics',
            seller_url: '#',
            image: 'assets/images/corals/bounce-mushroom.jpg'
        },
        {
            id: 8,
            name: 'Blue Hornets Zoanthid',
            type: 'Zoanthid',
            color: 'Blue',
            price: 49.99,
            seller: 'Jason Fox Signature Corals',
            seller_url: '#',
            image: 'assets/images/corals/blue-hornets-zoanthid.jpg'
        },
        {
            id: 9,
            name: 'Walt Disney Acropora',
            type: 'SPS',
            color: 'Rainbow',
            price: 299.99,
            seller: 'World Wide Corals',
            seller_url: '#',
            image: 'assets/images/corals/walt-disney-acropora.jpg'
        },
        {
            id: 10,
            name: 'Gold Torch Euphyllia',
            type: 'LPS',
            color: 'Yellow',
            price: 349.99,
            seller: 'Reef Raft USA',
            seller_url: '#',
            image: 'assets/images/corals/gold-torch-euphyllia.jpg'
        },
        {
            id: 11,
            name: 'Forest Fire Digitata',
            type: 'SPS',
            color: 'Green',
            price: 59.99,
            seller: 'Top Shelf Aquatics',
            seller_url: '#',
            image: 'assets/images/corals/forest-fire-digitata.jpg'
        },
        {
            id: 12,
            name: 'Grafted Cap Montipora',
            type: 'SPS',
            color: 'Red',
            price: 79.99,
            seller: 'The Coral Gorilla',
            seller_url: '#',
            image: 'assets/images/corals/grafted-cap-montipora.jpg'
        }
    ];

    const coralGrid = document.getElementById('coral-grid');
    const searchInput = document.getElementById('searchInput');
    const filterType = document.getElementById('filterType');
    const filterColor = document.getElementById('filterColor');
    const priceRange = document.getElementById('priceRange');
    const priceValue = document.getElementById('priceValue');
    const noResults = document.getElementById('no-results');

    const renderCorals = (filteredCorals) => {
        coralGrid.innerHTML = '';
        if (filteredCorals.length === 0) {
            noResults.style.display = 'block';
        } else {
            noResults.style.display = 'none';
        }

        filteredCorals.forEach(coral => {
            const coralCard = `
                <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
                    <div class="card h-100 shadow-sm border-light-subtle">
                        <div class="card-img-top-container">
                           <img src="${coral.image}" class="card-img-top" alt="${coral.name}">
                        </div>
                        <div class="card-body d-flex flex-column">
                            <h5 class="card-title fw-bold">${coral.name}</h5>
                            <p class="card-text small text-muted">${coral.seller}</p>
                            <div class="mt-auto">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="fw-bold text-primary fs-5">$${coral.price.toFixed(2)}</span>
                                    <a href="${coral.seller_url}" class="btn btn-sm btn-outline-primary">
                                        <i data-feather="shopping-cart" class="align-text-bottom"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer bg-transparent border-0 pt-0">
                             <span class="badge bg-light text-dark me-1">${coral.type}</span>
                             <span class="badge rounded-pill" style="background-color: ${coral.color.toLowerCase()}; color: ${['Yellow', 'Pink', 'White'].includes(coral.color) ? '#333' : 'white'};">${coral.color}</span>
                        </div>
                    </div>
                </div>
            `;
            coralGrid.innerHTML += coralCard;
        });
        feather.replace();
    };

    const filterAndRender = () => {
        const searchTerm = searchInput.value.toLowerCase();
        const selectedType = filterType.value;
        const selectedColor = filterColor.value;
        const maxPrice = parseFloat(priceRange.value);

        priceValue.textContent = maxPrice;

        const filteredCorals = corals.filter(coral => {
            const nameMatch = coral.name.toLowerCase().includes(searchTerm);
            const typeMatch = selectedType ? coral.type === selectedType : true;
            const colorMatch = selectedColor ? coral.color === selectedColor : true;
            const priceMatch = coral.price <= maxPrice;
            return nameMatch && typeMatch && colorMatch && priceMatch;
        });

        renderCorals(filteredCorals);
    };

    // --- Initial Load ---
    priceValue.textContent = priceRange.value;
    filterAndRender();

    // Event Listeners
    searchInput.addEventListener('keyup', filterAndRender);
    filterType.addEventListener('change', filterAndRender);
    filterColor.addEventListener('change', filterAndRender);
    priceRange.addEventListener('input', () => {
        priceValue.textContent = priceRange.value;
    });
    priceRange.addEventListener('change', filterAndRender);
});