139 lines
7.6 KiB
PHP
139 lines
7.6 KiB
PHP
<div>
|
||
<flux:heading size="xl" class="mb-1">Find Cheap Fuel Near You</flux:heading>
|
||
<flux:subheading class="mb-6">Search by postcode, town or city</flux:subheading>
|
||
|
||
<form wire:submit="findStations">
|
||
<div class="flex flex-col gap-3 sm:flex-row sm:items-end">
|
||
<div class="flex-1">
|
||
<flux:input
|
||
wire:model="search"
|
||
name="search"
|
||
label="Location"
|
||
placeholder="Postcode, town or city"
|
||
/>
|
||
@error('search')
|
||
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
|
||
@enderror
|
||
</div>
|
||
|
||
<div class="w-full sm:w-48">
|
||
<flux:select wire:model.live="fuelType" name="fuelType" label="Fuel type">
|
||
<flux:select.option value="">Select fuel type</flux:select.option>
|
||
<flux:select.option value="petrol">Petrol (E10)</flux:select.option>
|
||
<flux:select.option value="e5">Super Unleaded (E5)</flux:select.option>
|
||
<flux:select.option value="diesel">Diesel</flux:select.option>
|
||
<flux:select.option value="b7_premium">Premium Diesel</flux:select.option>
|
||
<flux:select.option value="b10">B10 Biodiesel</flux:select.option>
|
||
<flux:select.option value="hvo">HVO</flux:select.option>
|
||
</flux:select>
|
||
@error('fuelType')
|
||
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
|
||
@enderror
|
||
</div>
|
||
|
||
<div class="w-full sm:w-36">
|
||
<flux:select wire:model.live="radius" name="radius" label="Radius">
|
||
<flux:select.option value="1">1 mile</flux:select.option>
|
||
<flux:select.option value="2">2 miles</flux:select.option>
|
||
<flux:select.option value="5">5 miles</flux:select.option>
|
||
<flux:select.option value="10">10 miles</flux:select.option>
|
||
<flux:select.option value="20">20 miles</flux:select.option>
|
||
</flux:select>
|
||
</div>
|
||
|
||
<div class="w-full sm:w-40">
|
||
<flux:select wire:model.live="sort" name="sort" label="Sort by">
|
||
<flux:select.option value="reliable">Best price (reliable)</flux:select.option>
|
||
<flux:select.option value="price">Cheapest first</flux:select.option>
|
||
<flux:select.option value="distance">Nearest first</flux:select.option>
|
||
<flux:select.option value="updated">Recently updated</flux:select.option>
|
||
<flux:select.option value="brand">Brand A–Z</flux:select.option>
|
||
</flux:select>
|
||
</div>
|
||
|
||
<div>
|
||
<flux:button type="submit" variant="primary" wire:loading.attr="disabled">
|
||
<span wire:loading.remove wire:target="findStations">Search</span>
|
||
<span wire:loading wire:target="findStations">Searching…</span>
|
||
</flux:button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
@if ($apiError)
|
||
<div class="mt-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-800 dark:bg-red-950 dark:text-red-400">
|
||
{{ $apiError }}
|
||
</div>
|
||
@endif
|
||
|
||
@if (! empty($meta))
|
||
<div class="mt-6">
|
||
@if (! empty($results))
|
||
<p class="mb-3 text-sm text-zinc-500 dark:text-zinc-400">
|
||
{{ $meta['count'] }} {{ str('station')->plural($meta['count']) }} found
|
||
· Cheapest: {{ number_format($meta['lowest_pence'] / 100, 1) }}p
|
||
· Average: {{ number_format($meta['avg_pence'] / 100, 1) }}p
|
||
</p>
|
||
|
||
{{-- Map --}}
|
||
<div
|
||
x-data="stationMap(@entangle('results'))"
|
||
class="mb-4 h-72 overflow-hidden rounded-xl border border-neutral-200 sm:h-96 dark:border-neutral-700"
|
||
></div>
|
||
|
||
{{-- Legend --}}
|
||
<div class="mb-3 flex flex-wrap gap-3 text-xs text-zinc-500 dark:text-zinc-400">
|
||
<span class="flex items-center gap-1"><span class="inline-block size-3 rounded-full bg-green-500"></span> Current (<24h)</span>
|
||
<span class="flex items-center gap-1"><span class="inline-block size-3 rounded-full bg-slate-500"></span> Recent (24–48h)</span>
|
||
<span class="flex items-center gap-1"><span class="inline-block size-3 rounded-full bg-amber-500"></span> Stale (2–5 days)</span>
|
||
<span class="flex items-center gap-1"><span class="inline-block size-3 rounded-full bg-red-500"></span> Outdated (5+ days)</span>
|
||
</div>
|
||
|
||
<div class="space-y-2">
|
||
@foreach ($results as $station)
|
||
<div class="flex items-center justify-between rounded-xl border border-neutral-200 px-4 py-3 dark:border-neutral-700">
|
||
<div class="min-w-0 flex-1">
|
||
<div class="flex items-center gap-2">
|
||
<p class="truncate font-semibold text-zinc-900 dark:text-zinc-100">
|
||
{{ $station['name'] }}
|
||
</p>
|
||
@if ($station['is_supermarket'])
|
||
<flux:badge color="lime" size="sm">Supermarket</flux:badge>
|
||
@endif
|
||
</div>
|
||
<p class="truncate text-sm text-zinc-500 dark:text-zinc-400">
|
||
{{ $station['address'] }}, {{ $station['postcode'] }}
|
||
</p>
|
||
<p class="text-sm text-zinc-400 dark:text-zinc-500">
|
||
{{ number_format($station['distance_km'] * 0.621371, 1) }} miles away
|
||
</p>
|
||
</div>
|
||
|
||
<div class="ml-4 shrink-0 text-right">
|
||
<p class="text-xl font-bold text-zinc-900 dark:text-zinc-100">
|
||
{{ number_format($station['price'], 1) }}p
|
||
</p>
|
||
<p class="text-xs {{ match($station['price_classification']) {
|
||
'current' => 'text-green-500 dark:text-green-400',
|
||
'recent' => 'text-zinc-400 dark:text-zinc-500',
|
||
'stale' => 'text-amber-500 dark:text-amber-400',
|
||
'outdated' => 'text-red-500 dark:text-red-400',
|
||
default => 'text-zinc-400 dark:text-zinc-500',
|
||
} }}">
|
||
{{ $station['price_classification_label'] }}
|
||
·
|
||
{{ $station['price_updated_at'] ? \Carbon\Carbon::parse($station['price_updated_at'])->diffForHumans() : 'Unknown' }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
@else
|
||
<p class="text-sm text-zinc-500 dark:text-zinc-400">
|
||
No stations found within {{ $radius }} {{ str('mile')->plural($radius) }} of "{{ $search }}".
|
||
</p>
|
||
@endif
|
||
</div>
|
||
@endif
|
||
</div>
|