@extends('layouts.app')

@section('title', 'Search Results - Saba Remedies')

@section('content')
<div class="bg-gradient-to-r from-emerald-800 to-teal-900 text-white py-10">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-2xl sm:text-3xl font-extrabold">{{ $pageTitle }}</h1>
        <p class="text-xs text-emerald-200 mt-1">Found {{ $products->total() + $sbProducts->count() }} matching medicines and formulations</p>
    </div>
</div>

<section class="py-12 bg-slate-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Search Bar on page -->
        <div class="bg-white p-4 rounded-2xl border border-slate-200 mb-8 shadow-xs max-w-xl">
            <form action="{{ route('products.search') }}" method="GET" class="flex gap-2">
                <input type="text" name="q" value="{{ $q }}" placeholder="Search by name, ingredients, or symptoms..." class="flex-1 bg-slate-50 border border-slate-300 rounded-xl px-4 py-2.5 text-xs focus:outline-none focus:ring-2 focus:ring-emerald-500">
                <button type="submit" class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold px-6 py-2.5 rounded-xl text-xs transition-colors">Search</button>
            </form>
        </div>

        @if($products->total() > 0 || $sbProducts->count() > 0)
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                
                @foreach($sbProducts as $sb)
                    <div class="bg-white border border-slate-200/90 rounded-2xl overflow-hidden hover:shadow-lg transition-all duration-300 flex flex-col justify-between group">
                        <div class="relative bg-slate-50 p-4 flex items-center justify-center h-48">
                            @if($sb->prod_img1)
                                <img src="{{ asset('admin/product/' . $sb->prod_img1) }}" alt="{{ $sb->prod_name }}" class="max-h-40 object-contain group-hover:scale-105 transition-transform" onerror="this.src='{{ asset('img/about.png') }}'">
                            @else
                                <div class="w-16 h-16 rounded-full bg-emerald-50 text-emerald-600 flex items-center justify-center text-2xl">
                                    <i class="fa-solid fa-leaf"></i>
                                </div>
                            @endif
                        </div>
                        <div class="p-5 flex-1 flex flex-col justify-between">
                            <div>
                                <h3 class="font-bold text-slate-800 text-sm group-hover:text-emerald-700 transition-colors line-clamp-2">
                                    <a href="{{ route('products.show', ['id' => $sb->id]) }}">{{ $sb->prod_name }}</a>
                                </h3>
                            </div>
                            <div class="pt-4 mt-3 border-t border-slate-100 flex items-center justify-between">
                                <a href="{{ route('products.show', ['id' => $sb->id]) }}" class="bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold px-3 py-1.5 rounded-lg transition-colors w-full text-center">
                                    View Formulation
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach

                @foreach($products as $prod)
                    <div class="bg-white border border-slate-200/90 rounded-2xl overflow-hidden hover:shadow-lg transition-all duration-300 flex flex-col justify-between group">
                        <div class="p-5 flex-1 flex flex-col justify-between">
                            <div>
                                <span class="text-[10px] font-bold uppercase tracking-wider text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded">Classic Medicine</span>
                                <h3 class="font-bold text-slate-800 text-sm mt-2 group-hover:text-emerald-700 transition-colors line-clamp-2">
                                    <a href="{{ route('products.show', ['id' => $prod->id]) }}">{{ $prod->prod_name }}</a>
                                </h3>
                                @if($prod->prod_code)
                                    <div class="text-[11px] text-slate-400 mt-1">Code: {{ $prod->prod_code }}</div>
                                @endif
                            </div>
                            <div class="pt-4 mt-3 border-t border-slate-100 flex items-center justify-between">
                                <span class="text-base font-extrabold text-slate-900">₹{{ $prod->prod_price }}</span>
                                <a href="{{ route('products.show', ['id' => $prod->id]) }}" class="bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold px-3.5 py-1.5 rounded-lg transition-colors">
                                    Buy Now
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach

            </div>

            <div class="mt-8">
                {{ $products->links() }}
            </div>
        @else
            <div class="bg-white rounded-3xl p-12 text-center border border-slate-200 max-w-lg mx-auto">
                <i class="fa-solid fa-magnifying-glass text-4xl text-slate-300 mb-3 block"></i>
                <h3 class="font-bold text-slate-800 text-base">No matching products found</h3>
                <p class="text-xs text-slate-500 mt-1">Try checking the spelling or searching with different keywords.</p>
                <div class="mt-6 flex justify-center gap-3">
                    <a href="{{ route('products.classic') }}" class="bg-emerald-600 text-white font-bold text-xs px-5 py-2.5 rounded-xl">View All Medicines</a>
                </div>
            </div>
        @endif

    </div>
</section>
@endsection