From b5ee25db67ad57771d1445f9ee02b24af41cbfda Mon Sep 17 00:00:00 2001
From: Ovidiu U <nonreal@gmail.com>
Date: Sat, 11 Apr 2026 17:23:56 +0100
Subject: [PATCH] feat: add fuel type and radius selects to SearchBar

---
 resources/js/components/SearchBar.vue | 84 ++++++++++++++++++---------
 1 file changed, 56 insertions(+), 28 deletions(-)

diff --git a/resources/js/components/SearchBar.vue b/resources/js/components/SearchBar.vue
index 1e01ec2..5043a6a 100644
--- a/resources/js/components/SearchBar.vue
+++ b/resources/js/components/SearchBar.vue
@@ -1,24 +1,50 @@
 <template>
-    <div class="relative flex flex-col sm:flex-row gap-3 max-w-md w-full">
-        <div class="relative flex-1">
-            <span class="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500">
-                <iconify-icon icon="lucide:map-pin" style="font-size:1.25rem"></iconify-icon>
-            </span>
-            <input
-                v-model="postcode"
-                @input="onInput"
-                type="text"
-                placeholder="Enter postcode, e.g. SW1A 1AA"
-                class="w-full h-14 pl-12 pr-4 bg-white border border-zinc-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent shadow-inner text-base"
-            />
+    <div class="flex flex-col gap-3 max-w-md w-full">
+        <!-- Row 1: postcode + button -->
+        <div class="relative flex flex-col sm:flex-row gap-3">
+            <div class="relative flex-1">
+                <span class="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500">
+                    <iconify-icon icon="lucide:map-pin" style="font-size:1.25rem"></iconify-icon>
+                </span>
+                <input
+                    v-model="postcode"
+                    type="text"
+                    placeholder="Enter postcode, e.g. SW1A 1AA"
+                    class="w-full h-14 pl-12 pr-4 bg-white border border-zinc-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent shadow-inner text-base"
+                />
+            </div>
+            <button
+                @click="onSearch"
+                :disabled="!postcode.trim()"
+                class="h-14 px-8 bg-accent text-white rounded-xl font-bold text-base shadow-xl hover:bg-accent-content transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+                Find Prices
+            </button>
+        </div>
+
+        <!-- Row 2: fuel type + radius -->
+        <div class="flex gap-3">
+            <select
+                v-model="fuelType"
+                class="flex-1 h-10 px-3 bg-white border border-zinc-300 rounded-xl text-sm font-medium text-zinc-700 focus:outline-none focus:ring-2 focus:ring-accent"
+            >
+                <option value="e10">Petrol (E10)</option>
+                <option value="e5">Premium Petrol (E5)</option>
+                <option value="b7_standard">Diesel (B7)</option>
+                <option value="b7_premium">Premium Diesel (B7)</option>
+                <option value="b10">Diesel (B10)</option>
+                <option value="hvo">HVO</option>
+            </select>
+            <select
+                v-model="radius"
+                class="w-32 h-10 px-3 bg-white border border-zinc-300 rounded-xl text-sm font-medium text-zinc-700 focus:outline-none focus:ring-2 focus:ring-accent"
+            >
+                <option :value="2">2 miles</option>
+                <option :value="5">5 miles</option>
+                <option :value="10">10 miles</option>
+                <option :value="20">20 miles</option>
+            </select>
         </div>
-        <button
-            @click="emit('search', postcode)"
-            :disabled="!postcode.trim()"
-            class="h-14 px-8 bg-accent text-white rounded-xl font-bold text-base shadow-xl hover:bg-accent-content transition-all disabled:opacity-50 disabled:cursor-not-allowed"
-        >
-            Find Prices
-        </button>
     </div>
 </template>
 
@@ -26,15 +52,17 @@
 import { ref } from 'vue'
 
 const emit = defineEmits(['search'])
-const postcode = ref('')
-let debounceTimer = null
 
-function onInput() {
-    clearTimeout(debounceTimer)
-    debounceTimer = setTimeout(() => {
-        if (postcode.value.trim().length >= 2) {
-            emit('search', postcode.value.trim())
-        }
-    }, 400)
+const postcode = ref('')
+const fuelType = ref('e10')
+const radius = ref(10)
+
+function onSearch() {
+    if (!postcode.value.trim()) return
+    emit('search', {
+        postcode: postcode.value.trim(),
+        fuelType: fuelType.value,
+        radius: radius.value,
+    })
 }
 </script>