<div class="box">
    <div class="field">
        <form method="GET" action="<?= site_url($this->uri->segment(1) . '/index') ?>">
            <div class="control has-icons-left">
                <input class="input is-dark" type="text" name="query" placeholder="Rechercher..." value="<?= isset($_GET['query']) ? $_GET['query'] : '' ?>">
                <span class="icon is-left">
                    <i class="fa fa-search"></i>
                </span>
            </div>
        </form>
        <button class="button is-dark" type="button" onclick="toggleFilters()">Filtrer</button>
    </div>

    <div id="filters" style="display: none;">
        <form method="GET" action="<?= site_url($this->uri->segment(1) . '/index') ?>">
            <input type="hidden" name="query" value="<?= isset($_GET['query']) ? $_GET['query'] : '' ?>">
            <?php if ($this->uri->segment(1) != 'artistes'): ?>
            <div class="field">
                <label class="label" for="artist">Artiste</label>
                <div class="control">
                    <div class="select is-dark">
                        <select name="artist" id="artist" onchange="this.form.submit()">
                            <option value=''>Tous</option>
                            <?php foreach($artists as $artist): ?>
                                <option value="<?= $artist->name ?>" <?= isset($_GET['artist']) && $_GET['artist'] == $artist->name ? 'selected' : '' ?>><?= $artist->name ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>
            </div>
            <?php endif; ?>

            <div class="field">
                <label class="label" for="genre">Genre</label>
                <div class="control">
                    <div class="select is-dark">
                        <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>
                    </div>
                </div>
            </div>

            <div class="field">
                <label class="label" for="order">Ordre</label>
                <div class="control">
                    <div class="select is-dark">
                        <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>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

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