@extends('layouts.app')

@section('title', 'Search Results for ' . $term . ' - RegCompare')

@section('content')
    <div class="bg-base py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h1 class="text-3xl font-bold text-base-dark">
                    Search Results for <span class="text-brand">"{{ $term }}"</span>
                </h1>
                <p class="mt-2 text-base-subtle">
                    Found {{ $results->total() }} matches in our database.
                </p>
            </div>

            <!-- Search Bar (Persistent) -->
            <div class="max-w-3xl mx-auto mb-12">
                <form action="{{ route('search.redirect') }}" method="POST" class="relative flex gap-2">
                    @csrf
                    <div class="flex-grow">
                        <input type="text" name="search" value="{{ $term }}"
                            class="w-full px-5 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand focus:border-brand"
                            placeholder="Search again...">
                    </div>

                    <div class="w-48">
                        <select name="site_id"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand focus:border-brand bg-white">
                            <option value="">All Sites</option>
                            @foreach ($sites as $site)
                                <option value="{{ $site->id }}" {{ request('site_id') == $site->id ? 'selected' : '' }}>
                                    {{ $site->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <button type="submit"
                        class="bg-brand text-white px-6 py-3 rounded-lg hover:bg-brand-dark transition-colors font-medium shadow-md">
                        Search
                    </button>
                </form>
            </div>

            <!-- Results Grid -->
            @if ($results->count() > 0)
                <div class="flex justify-center mb-8">
                    {{ $results->withQueryString()->links('pagination.stacked') }}
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    @foreach ($results as $plate)
                        <div
                            class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 hover:shadow-lg transition-all duration-200 group">
                            <div class="flex justify-between items-start mb-4">
                                <div
                                    class="bg-yellow-400 text-black px-2 py-1 rounded text-3xl font-mono uppercase border-2 border-yellow-500 shadow-sm font-plate">
                                    {{ $plate->name }}
                                </div>
                                <div class="flex items-center gap-2">
                                    @if (isset($plate->site->logo))
                                        <img src="{{ asset('storage/' . $plate->site->logo) }}"
                                            alt="{{ $plate->site->name }}"
                                            class="h-10 w-auto object-contain grayscale group-hover:grayscale-0 transition-all opacity-70 group-hover:opacity-100">
                                    @endif
                                </div>
                            </div>

                            <div class="flex justify-between items-end mt-4">
                                <div>
                                    <p class="text-xs text-base-subtle uppercase tracking-wide font-semibold">Total Price
                                    </p>
                                    <p class="text-2xl font-bold text-gray-900">
                                        @if (isset($plate->price) && is_numeric($plate->price))
                                            £{{ number_format($plate->total_price) }}
                                        @else
                                            {{ $plate->price ?? 'POA' }}
                                        @endif
                                    </p>
                                </div>
                                <a href="{{ route('plate.show', str_replace(' ', '+', $plate->name)) }}"
                                    class="bg-brand text-white px-4 py-2 rounded-lg hover:bg-brand-dark transition-colors font-medium text-sm shadow-sm">
                                    View Details
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="mt-8 flex justify-center">
                    {{ $results->withQueryString()->links('pagination.stacked') }}
                </div>
            @else
                <div class="col-span-full text-center py-12 bg-white rounded-xl shadow-sm border border-gray-100">
                    <p class="text-xl text-base-subtle font-medium">No results found.</p>
                    <p class="text-gray-400 mt-2">Try adjusting your search term.</p>
                </div>
            @endif
        </div>
    </div>
@endsection