Bilar till salu

 <?php
 $current_orderby = isset($_GET['orderby']) ? $_GET['orderby'] : '';
 $sort_order = 'desc';
 $brands = ["BMW", "Ferrari", "Mercedes"]; ?>
 <div class="filter-container">;
     <p>Filtrera på:</p>
 <button class="filter-button" id="sort-name" data-sort="<?= ($current_orderby == 'name-asc') ? 'name-desc' : 'name-asc'; ?>">
     <?= ($current_orderby == 'name-asc') ? 'Z - A' : 'A - Z'; ?>
 </button>
 
 <button class="filter-button" id="sort-year" data-sort="<?= ($current_orderby == 'model-year-asc') ? 'model-year-desc' : 'model-year-asc'; ?>">
     <?= ($current_orderby == 'model-year-asc') ? 'Årsmodell fallande' : 'Årsmodell stigande'; ?>
 </button>
 
 <button class="filter-button" id="sort-date" data-sort="<?= ($current_orderby == 'sale-date-asc') ? 'sale-date-desc' : 'sale-date-asc'; ?>">
     <?= ($current_orderby == 'sale-date-asc') ? 'Datum fallande' : 'Datum stigande'; ?>
 </button>
   <!--<section id="car-list" class="cars-section"> -->

<!-- Lägg till dropdown för märkesfilter med checkboxar -->
<div class="dropdown">
<button class="dropbtn">Välj märken</button>
<div class="dropdown-content">
<?php foreach ($brands as $brand): ?>
    <label><input type="checkbox" class="brand-checkbox" value="<?php echo esc_attr($brand); ?>"><span><?php echo esc_html($brand); ?></span></label>
<?php endforeach; ?>
</div>
</div>			
</div>
   <section id="car-list" class="cars-section"> 

 document.addEventListener("DOMContentLoaded", function () {
    function updateURLAndReload(param, value) {
        const url = new URL(window.location.href);
        url.searchParams.set(param, value);
        window.location.href = url.toString();
    }

    document.querySelectorAll(".filter-button").forEach((button) => {
        button.addEventListener("click", function () {
            let sortType = this.getAttribute("data-sort");
            updateURLAndReload("orderby", sortType);
        });
    });
});

          

    document.querySelectorAll(".brand-checkbox").forEach(checkbox => {
        checkbox.addEventListener("change", function() {
            let selectedBrands = Array.from(document.querySelectorAll(".brand-checkbox:checked")).map(cb => cb.value);
            let carList = document.getElementById("car-list");
            let cars = Array.from(carList.getElementsByClassName("car-holder"));

            cars.forEach(car => {
                if (selectedBrands.length === 0 || selectedBrands.includes(car.getAttribute("data-brand"))) {
                    car.style.display = "flex";
                } else {
                    car.style.display = "none";
                }
            });
        });
    });

    // Hantera klick för dropdown
    document.querySelector(".dropbtn").addEventListener("click", function() {
        document.querySelector(".dropdown-content").classList.toggle("show");
    });

    // Stäng dropdown om användaren klickar någon annanstans
    window.addEventListener("click", function(event) {
        if (!event.target.matches(".dropbtn")) {
            var dropdowns = document.querySelectorAll(".dropdown-content");
            dropdowns.forEach(function(dropdown) {
                if (dropdown.classList.contains("show")) {
                    dropdown.classList.remove("show");
                }
            });
        }
    });