better filter?

resources/views/tvshows/index.twig

@@ -20,19 +20,13 @@
                         {% if available_filters.genres %}
                         <div class="mb-4">
                             <h6 class="fw-bold text-dark mb-2">Genres</h6>
-                            {% for genre in available_filters.genres %}
-                            <div class="form-check">
-                                <input class="form-check-input"
-                                       type="checkbox"
-                                       name="genres[]"
-                                       value="{{ genre }}"
-                                       id="genre_{{ genre|lower|replace({' ': '_'}) }}"
-                                       {{ genre in filters.genres ? 'checked' : '' }}>
-                                <label class="form-check-label small" for="genre_{{ genre|lower|replace({' ': '_'}) }}">
+                            <select class="form-select select2" name="genres[]" multiple data-placeholder="Select genres...">
+                                {% for genre in available_filters.genres %}
+                                <option value="{{ genre }}" {{ genre in filters.genres ? 'selected' : '' }}>
                                     {{ genre }}
-                                </label>
-                            </div>
-                            {% endfor %}
+                                </option>
+                                {% endfor %}
+                            </select>
                         </div>
                         {% endif %}
 
@@ -40,19 +34,13 @@
                         {% if available_filters.years %}
                         <div class="mb-4">
                             <h6 class="fw-bold text-dark mb-2">Years</h6>
-                            {% for year in available_filters.years %}
-                            <div class="form-check">
-                                <input class="form-check-input"
-                                       type="checkbox"
-                                       name="years[]"
-                                       value="{{ year }}"
-                                       id="year_{{ year }}"
-                                       {{ year in filters.years ? 'checked' : '' }}>
-                                <label class="form-check-label small" for="year_{{ year }}">
+                            <select class="form-select select2" name="years[]" multiple data-placeholder="Select years...">
+                                {% for year in available_filters.years %}
+                                <option value="{{ year }}" {{ year in filters.years ? 'selected' : '' }}>
                                     {{ year }}
-                                </label>
-                            </div>
-                            {% endfor %}
+                                </option>
+                                {% endfor %}
+                            </select>
                         </div>
                         {% endif %}
 
@@ -371,19 +359,55 @@
     </div>
 </div>
 
+<style>
+/* Custom styles for Select2 integration */
+.select2-container {
+    z-index: 1050; /* Ensure Select2 dropdown appears above other elements */
+}
+
+.select2-selection {
+    min-height: 38px;
+}
+
+.select2-selection__choice {
+    background-color: #0d6efd !important;
+    border: none !important;
+    color: white !important;
+}
+
+.select2-selection__choice__remove {
+    color: white !important;
+    margin-right: 5px;
+}
+
+.select2-selection__choice__remove:hover {
+    color: #f8f9fa !important;
+}
+</style>
+
 <script>
+$(document).ready(function() {
+    // Initialize Select2 for all select2 elements
+    $('.select2').select2({
+        width: '100%',
+        allowClear: true,
+        placeholder: function() {
+            return $(this).data('placeholder');
+        }
+    });
+
+    // Auto-submit filter form when Select2 selection changes
+    $('.select2').on('change', function() {
+        document.getElementById('filterForm').submit();
+    });
+});
+
 document.getElementById('per_page')?.addEventListener('change', function() {
     const url = new URL(window.location);
     url.searchParams.set('per_page', this.value);
     url.searchParams.set('page', '1'); // Reset to first page
     window.location = url.toString();
 });
-
-// Auto-submit filter form when checkboxes change
-document.querySelectorAll('#filterForm input[type="checkbox"]').forEach(function(checkbox) {
-    checkbox.addEventListener('change', function() {
-        document.getElementById('filterForm').submit();
-    });
-});
 </script>
+
 {% endblock %}