@extends('layouts.app')

@section('title', $pageTitle . ' - Saba Remedies')

@section('content')
<!-- Page Header Banner -->
<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">
        <nav class="flex text-xs text-emerald-200 mb-2" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 sm:space-x-2">
                <li class="inline-flex items-center"><a href="{{ route('home') }}" class="hover:text-white">Home</a></li>
                <li><span class="text-emerald-400 mx-1">/</span></li>
                <li class="font-medium text-white">{{ $pageTitle }}</li>
            </ol>
        </nav>
        <h1 class="text-2xl sm:text-3xl font-extrabold">{{ $pageTitle }}</h1>
    </div>
</div>

<section class="py-12 bg-slate-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        @if(isset($sbProducts) && $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-52 overflow-hidden">
                            @if($sb->prod_img1)
                                <img src="{{ asset('admin/product/' . $sb->prod_img1) }}" alt="{{ $sb->prod_name }}" class="max-h-44 object-contain group-hover:scale-105 transition-transform duration-300" onerror="this.src='{{ asset('img/about.png') }}'">
                            @else
                                <div class="w-20 h-20 rounded-full bg-emerald-50 flex items-center justify-center text-emerald-600 text-3xl">
                                    <i class="fa-solid fa-bottle-droplet"></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>
                                @if($sb->details->first())
                                    <div class="text-xs text-slate-500 mt-1">
                                        Pack Size: {{ $sb->details->first()->prod_quantity }} {{ $sb->details->first()->prod_quantity_type }}
                                    </div>
                                @endif
                            </div>
                            <div class="pt-4 mt-3 border-t border-slate-100 flex items-center justify-between">
                                <div>
                                    @if($sb->details->first())
                                        <span class="text-base font-extrabold text-slate-900">₹{{ $sb->details->first()->prod_price }}</span>
                                    @else
                                        <span class="text-xs text-slate-500">Contact for price</span>
                                    @endif
                                </div>
                                <a href="{{ route('products.show', ['id' => $sb->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">
                                    View Details
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="mt-8">
                {{ $sbProducts->links() }}
            </div>

        @elseif(isset($products) && $products->count() > 0)
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                @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">Unani Product</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_desp)
                                    <p class="text-xs text-slate-500 mt-1 line-clamp-2">{{ strip_tags($prod->prod_desp) }}</p>
                                @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-2xl p-12 text-center border border-slate-200">
                <i class="fa-solid fa-box-open text-4xl text-slate-300 mb-3 block"></i>
                <h3 class="font-bold text-slate-700 text-base">No products found in this category</h3>
                <p class="text-xs text-slate-400 mt-1">Check back later or browse other categories.</p>
                <a href="{{ route('home') }}" class="inline-block mt-4 bg-emerald-600 text-white font-bold text-xs px-5 py-2 rounded-xl">Return Home</a>
            </div>
        @endif

    </div>
</section>
@endsection