explore page working i believe

src/main/resources/templates/explore.html

@@ -40,14 +40,17 @@
     <!-- Main Content -->
     <main class="main-content">
     	<div class="search-bar">
-    		<form action="/explore" method="get">
+    		<form action="/explore" method="get" id="search-form">
   				<label for="site-search">Search:</label>
   				<div class="search-btn">
-  				<input type="search" id="site-search" name="q" th:value="${q}" placeholder="Search for recipes...">
-  				<button type="submit"><i class="fa fa-search"></i></button>
+  				<div id="tag-input-wrapper">
+<!--     			<div id="chips-container"></div> -->
+    				<input type="text" id="site-search" name="q" th:value="${q}" placeholder="Search for recipes...">
   				</div>
+ 		 		<button type="submit"><i class="fa fa-search"></i></button>
+			</div>
 			</form>
-    	</div>
+    	</div>	
         <div class="recipe-card">
 
             <a th:href="@{/recipes/{id}(id=${recipe.id})}" class="card" th:each="recipe : ${recipes}">
@@ -69,6 +72,46 @@
         <div class="sidebar-right">
             <h1> FILTER </h1>
             <form id="filter-form">
+            <h3>Prep Time</h3>
+
+            <label>
+                <input type="checkbox" name="prepTime" value="15"><15 min
+            </label><br>
+            <label>
+                <input type="checkbox" name="prepTime" value="30">15~30 min
+            </label><br>
+
+            <label>
+                <input type="checkbox" name="prepTime" value="60">30~60 min
+            </label><br>
+
+            <label>
+                <input type="checkbox" name="prepTime" value="240">1~4 hours
+            </label><br>
+
+            <label>
+                <input type="checkbox" name="prepTime" value="241">4+ hours
+            </label>
+            <h3>Cook Time</h3>
+
+            <label>
+                <input type="checkbox" name="cookTime" value="15"><15 min
+            </label><br>
+            <label>
+                <input type="checkbox" name="cookTime" value="30">15~30 min
+            </label><br>
+
+            <label>
+                <input type="checkbox" name="cookTime" value="60">30~60 min
+            </label><br>
+
+            <label>
+                <input type="checkbox" name="cookTime" value="120">1~2 hours
+            </label><br>
+
+            <label>
+                <input type="checkbox" name="cookTime" value="121">2+ hours
+            </label>
             <h3>Price</h3>
 
             <label>
@@ -91,6 +134,102 @@
     </div>
 </div>
 <script>
+(function () {
+	  const input = document.getElementById('site-search');
+	  const tags = [];
+
+	  // Restore price checkboxes from URL
+	  const params = new URLSearchParams(window.location.search);
+	  params.getAll('prices').forEach(p => {
+	    const cb = document.querySelector(`input[name="price"][value="${p}"]`);
+	    if (cb) cb.checked = true;
+	  });
+	  
+	  // Restore cookTime checkboxes from URL
+	  params.getAll('cookTime').forEach(p => {
+		    const cb = document.querySelector(`input[name="cookTime"][value="${p}"]`);
+		    if (cb) cb.checked = true;
+		  });
+	  
+	// Restore prepTime checkboxes from URL
+	  params.getAll('prepTime').forEach(p => {
+		    const cb = document.querySelector(`input[name="prepTime"][value="${p}"]`);
+		    if (cb) cb.checked = true;
+		  });
+
+	  // Restore tag chips from URL
+	  params.getAll('tags').forEach(addChip);
+
+	  input.addEventListener('keydown', (e) => {
+	    if ((e.key === ' ' || e.key === 'Enter') && input.value.includes('#')) {
+	      const val = input.value + ' ';
+	      const match = val.match(/(^|\s)(#\w+)(\s)/); // NASTY regex ):
+	      if (match) {
+	        e.preventDefault();
+	        addChip(match[2].substring(1));
+	        input.value = val.replace(match[0], '');
+	        input.value += ' ';
+	        
+	      }
+	    }
+	  });
+
+	  document.querySelectorAll('input[name="price"]').forEach(cb => {
+	    cb.addEventListener('change', submitSearch);
+	  });
+	  
+	  document.querySelectorAll('input[name="cookTime"]').forEach(cb => {
+		    cb.addEventListener('change', submitSearch);
+		  });
+	  
+	  document.querySelectorAll('input[name="prepTime"]').forEach(cb => {
+		    cb.addEventListener('change', submitSearch);
+		  });
+
+	  document.getElementById('search-form').addEventListener('submit', (e) => {
+	    e.preventDefault();
+	    
+	    submitSearch();
+	  });
+	  
+	  function addChip(tag) {
+		    if (tags.includes(tag)) return;
+		    tags.push(tag);
+		    const chip = document.createElement('span');
+		    chip.className = 'tag-chip';
+		    chip.innerHTML = `#${tag} <button type="button" aria-label="Remove ${tag}">×</button>`;
+		    chip.querySelector('button').addEventListener('click', () => {
+		      chip.remove();
+		      tags.splice(tags.indexOf(tag), 1);
+		    });
+		    const lastChip = input.parentElement.querySelector('.tag-chip:last-of-type');
+		    if (lastChip) {
+		      lastChip.insertAdjacentElement('afterend', chip);
+		    } else {
+		      input.insertAdjacentElement('afterend', chip);
+		    }
+		  }
+
+	  function submitSearch() {
+	    // Only use chips for tags, not strings!
+	    const cleanedQuery = input.value.replace(/#\w+/g, '').trim();
+	    
+
+	    const out = new URLSearchParams();
+	    if (cleanedQuery) out.set('q', cleanedQuery);
+	    tags.forEach(t => out.append('tags', t));
+	    document.querySelectorAll('input[name="price"]:checked')
+	      .forEach(cb => out.append('prices', cb.value));
+	    
+	    document.querySelectorAll('input[name="cookTime"]:checked')
+	      .forEach(cb => out.append('cookTime', cb.value));
+	    
+	    document.querySelectorAll('input[name="prepTime"]:checked')
+	      .forEach(cb => out.append('prepTime', cb.value));
+
+	    window.location.href = '/explore?' + out.toString();
+	  }
+	})();
 </script>
 </body>
 </html>