@extends('layouts.app')

@section('title', 'Price Comparison')

@section('content')
<div class="bg-gray-50 min-h-screen py-8">
    <div class="container mx-auto px-4">
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-gray-900">Price Comparison</h1>
            <p class="text-gray-600">Compare prices from different suppliers</p>
        </div>

        <!-- Search -->
        <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
            <form action="{{ route('compare.search') }}" method="GET" class="flex gap-4">
                <div class="flex-1">
                    <input type="text" name="q" value="{{ request('q') }}" 
                        class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                        placeholder="Search for a product to compare prices...">
                </div>
                <button type="submit" class="px-8 py-3 bg-blue-600 text-white rounded-xl font-semibold hover:bg-blue-700 transition">
                    Compare Prices
                </button>
            </form>
        </div>

        @if(isset($searchResults) && $searchResults->count() > 0)
            <!-- Search Results -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <div class="p-6 border-b">
                    <h2 class="font-semibold text-lg">Results for "{{ request('q') }}"</h2>
                    <p class="text-gray-600 text-sm">{{ $searchResults->count() }} products found from {{ $searchResults->pluck('supplier_id')->unique()->count() }} suppliers</p>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Product</th>
                                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Supplier</th>
                                <th class="px-6 py-4 text-right text-sm font-semibold text-gray-900">Price</th>
                                <th class="px-6 py-4 text-center text-sm font-semibold text-gray-900">Stock</th>
                                <th class="px-6 py-4 text-center text-sm font-semibold text-gray-900">Rating</th>
                                <th class="px-6 py-4 text-right text-sm font-semibold text-gray-900">Action</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            @php
                                $lowestPrice = $searchResults->min('price');
                            @endphp
                            @foreach($searchResults->sortBy('price') as $product)
                                <tr class="hover:bg-gray-50 {{ $product->price == $lowestPrice ? 'bg-green-50' : '' }}">
                                    <td class="px-6 py-4">
                                        <div class="flex items-center gap-3">
                                            <div class="w-12 h-12 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
                                                @if($product->image_url)
                                                    <img src="{{ $product->image_url }}" alt="{{ $product->name }}" class="w-full h-full object-cover">
                                                @else
                                                    <div class="w-full h-full flex items-center justify-center text-xl text-gray-300">📦</div>
                                                @endif
                                            </div>
                                            <div>
                                                <a href="{{ route('products.show', $product->id) }}" class="font-medium text-gray-900 hover:text-blue-600">
                                                    {{ Str::limit($product->name, 40) }}
                                                </a>
                                                <p class="text-sm text-gray-500">SKU: {{ $product->sku }}</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 text-gray-600">{{ $product->supplier?->company_name }}</td>
                                    <td class="px-6 py-4 text-right">
                                        <span class="font-bold text-lg {{ $product->price == $lowestPrice ? 'text-green-600' : 'text-gray-900' }}">
                                            R {{ number_format($product->price, 2) }}
                                        </span>
                                        @if($product->price == $lowestPrice)
                                            <span class="block text-xs text-green-600 font-medium">Lowest Price</span>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 text-center">
                                        @if($product->stock_quantity > 10)
                                            <span class="text-green-600">In Stock</span>
                                        @elseif($product->stock_quantity > 0)
                                            <span class="text-yellow-600">Low Stock</span>
                                        @else
                                            <span class="text-red-600">Out of Stock</span>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 text-center">
                                        <div class="flex items-center justify-center gap-1">
                                            <span class="text-yellow-400">★</span>
                                            <span>{{ number_format($product->rating, 1) }}</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 text-right">
                                        <a href="{{ route('products.show', $product->id) }}" class="inline-block px-4 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition">
                                            View
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        @elseif(request('q'))
            <div class="bg-white rounded-xl shadow-sm p-12 text-center">
                <div class="text-6xl mb-4">🔍</div>
                <h2 class="text-2xl font-bold text-gray-900 mb-2">No products found</h2>
                <p class="text-gray-600">Try searching with different keywords</p>
            </div>
        @else
            <!-- Popular Comparisons -->
            <div class="bg-white rounded-xl shadow-sm p-8">
                <h2 class="font-semibold text-lg mb-6">Popular Categories to Compare</h2>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    @foreach(['Safety Equipment', 'Office Supplies', 'Cleaning Products', 'Tools', 'Electronics', 'Furniture', 'Packaging', 'Stationery'] as $category)
                        <a href="{{ route('compare.search', ['q' => $category]) }}" 
                            class="p-4 border rounded-xl text-center hover:border-blue-500 hover:bg-blue-50 transition">
                            <span class="font-medium text-gray-900">{{ $category }}</span>
                        </a>
                    @endforeach
                </div>
            </div>
        @endif
    </div>
</div>
@endsection