SAe-PHP-S2/application/views/layout/getter.php

<div>
    <div>
        <!-- Champ de recherche -->
        <form method="GET" action="">
            <input type="text" name="query" placeholder="Rechercher..." value="<?= isset($_GET['query']) ? $_GET['query'] : '' ?>">
        </form>

        <!-- Bouton pour afficher/masquer les filtres -->
        <button type="button" onclick="toggleFilters()">Filtrer</button>
    </div>

    <!-- Div contenant les filtres, cachée par défaut -->
    <div id="filters" style="display: none;">
        <form method="GET" action="">

            <!-- Filtre par artiste -->
            <label for="">Artiste : </label>
            <select name="artist" id="artist" onchange="this.form.submit()">
                <option value=''>Tous</option>
                <?php foreach($artistes as $artiste): ?>
                    <option value="<?= $artiste->name ?>" <?= isset($_GET['artist']) && $_GET['artist'] == $artiste->name ? 'selected' : '' ?>><?= $artiste->name ?></option>
                <?php endforeach; ?>
            </select>

            <!-- Filtre par genre -->
            <label for="">Genre : </label>
            <select name="genre" id="genre" onchange="this.form.submit()">
                <option value=''>Tous</option>
                <?php foreach($genres as $genre): ?>
                    <option value="<?= $genre->name ?>" <?= isset($_GET['genre']) && $_GET['genre'] == $genre->name ? 'selected' : '' ?>><?= $genre->name ?></option>
                <?php endforeach; ?>
            </select>

            <!-- Filtre par ordre -->
            <label for="">Ordre : </label>
            <select name="order" id="order" onchange="this.form.submit()">
                <option value="">Ordre :</option>
                <option value="asc" <?= isset($_GET['order']) && $_GET['order'] == 'asc' ? 'selected' : '' ?>>Croissant</option>
                <option value="desc" <?= isset($_GET['order']) && $_GET['order'] == 'desc' ? 'selected' : '' ?>>Décroissant</option>
            </select>

        </form>
    </div>
</div>

<script>
    // Fonction pour afficher/masquer les filtres
    function toggleFilters() {
        var filters = document.getElementById('filters');
        if (filters.style.display === 'none') {
            filters.style.display = 'block';
        } else {
            filters.style.display = 'none';
        }
    }
</script>