<div class="sidebar-filters js-sidebar-filters-mobile">
    <!-- filter header -->
    <div class="border-bottom d-flex justify-content-between align-items-center p-3 sidebar-filters-header d-xl-none">
        <div class="align-items-center btn-icon d-flex filter-close justify-content-center rounded-circle">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
                <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" />
            </svg>
        </div>
        <span class="fs-3 fw-semibold">Filters</span>
        <span class="text-primary fw-medium">Clear</span>
    </div>
    <!-- end /. filter header -->
    <div class="sidebar-filters-body p-3 p-xl-4">
        <div class="mb-4 border-bottom pb-4">
            <div class="mb-3">
                <h4 class="fs-5 fw-semibold mb-1"><?php echo $pricefilter; ?></h4>
                <p class="mb-0 small">Select min and max price range</p>
            </div>
            <!-- Start Range Slider -->
            <div class="js-range-slider"></div>
            <!-- End Range Slider -->
        </div>
        <div class="mb-4 border-bottom pb-4">
            <div class="mb-3">
                <h4 class="fs-5 fw-semibold mb-2"><?php echo $categories; ?></h4>
                <p class="mb-0 small"><?php echo $discovercategories; ?></p>
            </div>
            <?php
            // Connessione al database (assumi che $conn sia la tua connessione attiva al database)
            $conn = new mysqli($servername, $username, $password, $database);
            $query = "SELECT idclasscategory, namecategory FROM classcategory ORDER BY namecategory";
            $result = $conn->query($query); // Esegui la query

            // Verifica se ci sono risultati
            if ($result->num_rows > 0) {
                // Cicla attraverso i risultati e crea i checkbox dinamicamente
                while ($row = $result->fetch_assoc()) {
                    $id = $row['idclasscategory'];
                    $name = $row['namecategory'];
                    echo '
        <div class="form-check mb-2">
            <input class="form-check-input" type="checkbox" value="' . $id . '" id="category' . $id . '">
            <label class="form-check-label" for="category' . $id . '">' . $name . '</label>
        </div>';
                }
            } else {
                echo "Nessuna categoria trovata.";
            }
            ?>

            <!-- End Form Check -->
        </div>
        <div class="mb-4 border-bottom pb-4">
            <div class="mb-3">
                <h4 class="fs-5 fw-semibold mb-1">Order by</h4>
                <p class="mb-0 small">Duis a leo sit amet odio volutpat auctor ut a lorem.</p>
            </div>
            <!-- Start Select2 -->
            <select class="form-select">
                <option value="1">Latest</option>
                <option value="2">Nearby</option>
                <option value="3">Top rated</option>
                <option value="4">Random</option>
                <option value="5">A-Z</option>
            </select>
            <!-- /.End Select2 -->
        </div>
        <!-- start apply button -->
        <button type="button" class="btn btn-primary w-100">Apply filters</button>
        <!-- end /. apply button -->
        <!-- start clear filters -->
        <a href="#" class="align-items-center d-flex fw-medium gap-2 justify-content-center mt-2 small text-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
                <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
            </svg>
            Clear filters
        </a>
        <!-- end /. clear filters -->
    </div>
</div>