@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 flex flex-col sm:flex-row items-center justify-between gap-4">
        <div>
            <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 class="text-xs bg-white/10 backdrop-blur-xs border border-white/20 px-4 py-2 rounded-xl text-emerald-100">
            Showing {{ $products->total() }} Formulations
        </div>
    </div>
</div>

<section class="py-10 bg-slate-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Search within table -->
        <div class="bg-white p-4 rounded-2xl border border-slate-200 mb-6 shadow-xs flex flex-col sm:flex-row items-center justify-between gap-4">
            <form action="{{ url()->current() }}" method="GET" class="w-full sm:w-80 relative">
                <input type="text" name="q" value="{{ request('q') }}" placeholder="Filter medicines by name..." class="w-full bg-slate-50 border border-slate-300 text-xs rounded-lg pl-3 pr-10 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:bg-white">
                <button type="submit" class="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-emerald-700">
                    <i class="fa-solid fa-magnifying-glass text-xs"></i>
                </button>
            </form>
            <div class="text-xs text-slate-500">
                Enter quantity and click <strong>Buy Now</strong> to add directly to your cart.
            </div>
        </div>

        <!-- Product Table -->
        <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse text-xs">
                    <thead>
                        <tr class="bg-slate-900 text-white uppercase tracking-wider text-[11px]">
                            <th class="py-3.5 px-4 font-semibold w-16 text-center">S.No.</th>
                            <th class="py-3.5 px-4 font-semibold">Product Formulation</th>
                            <th class="py-3.5 px-4 font-semibold w-32">Price (₹)</th>
                            <th class="py-3.5 px-4 font-semibold w-36 text-center">Quantity</th>
                            <th class="py-3.5 px-4 font-semibold w-32 text-center">Subtotal</th>
                            <th class="py-3.5 px-4 font-semibold w-36 text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 font-medium text-slate-700">
                        @forelse($products as $index => $prod)
                            @php
                                $sNo = ($products->currentPage() - 1) * $products->perPage() + $index + 1;
                                $inCartQty = $userCartItems[$prod->id] ?? null;
                            @endphp
                            <tr class="hover:bg-slate-50/80 transition-colors">
                                <td class="py-3 px-4 text-center text-slate-400 font-semibold">{{ $sNo }}.</td>
                                <td class="py-3 px-4">
                                    <div class="flex items-center gap-3">
                                        <div class="w-10 h-10 rounded-lg bg-slate-100 border border-slate-200 overflow-hidden flex items-center justify-center p-0.5 shrink-0">
                                            <img src="{{ product_image_url($prod->prod_img1) }}" alt="{{ $prod->prod_name }}" class="w-full h-full object-contain" onerror="this.onerror=null;this.src='{{ asset('img/about.png') }}';">
                                        </div>
                                        <div>
                                            <a href="{{ route('products.show', ['id' => $prod->id]) }}" class="font-bold text-slate-900 hover:text-emerald-700 text-sm transition-colors block">
                                                {{ $prod->prod_name }}
                                            </a>
                                            @if($prod->prod_code)
                                                <span class="text-[10px] font-mono font-semibold text-slate-500 bg-slate-100 px-1.5 py-0.5 rounded border border-slate-200 inline-block mt-0.5">CODE: {{ $prod->prod_code }}</span>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td class="py-3 px-4 text-slate-800 font-bold">
                                    ₹{{ $prod->prod_price }}
                                </td>
                                
                                <form action="{{ route('cart.add') }}" method="POST">
                                    @csrf
                                    <input type="hidden" name="id" value="{{ $prod->id }}">
                                    <input type="hidden" name="prod_id" value="{{ $prod->id }}">
                                    <input type="hidden" name="price" value="{{ $prod->prod_price }}" class="row-price">
                                    <input type="hidden" name="buy_now" value="1">
                                    
                                    <td class="py-3 px-4 text-center">
                                        <input type="number" name="size" min="1" max="100" value="{{ $inCartQty ?? 1 }}" class="row-qty w-20 text-center bg-slate-50 border border-slate-300 rounded-lg py-1.5 px-2 text-xs font-semibold focus:outline-none focus:ring-1 focus:ring-emerald-500 focus:bg-white">
                                    </td>
                                    <td class="py-3 px-4 text-center text-emerald-700 font-bold row-subtotal">
                                        ₹{{ (float)$prod->prod_price * ($inCartQty ?? 1) }}
                                    </td>
                                    <td class="py-3 px-4 text-center">
                                        @if($inCartQty)
                                            <button type="submit" class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold px-4 py-1.5 rounded-lg text-xs transition-colors shadow-xs">
                                                <i class="fa-solid fa-check mr-1"></i> Update
                                            </button>
                                        @else
                                            <button type="submit" class="bg-brand-red hover:bg-brand-darkred text-white font-bold px-4 py-1.5 rounded-lg text-xs transition-colors shadow-xs">
                                                <i class="fa-solid fa-cart-plus mr-1"></i> Buy Now
                                            </button>
                                        @endif
                                    </td>
                                </form>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="py-8 text-center text-slate-500">
                                    <i class="fa-solid fa-box-open text-3xl text-slate-300 mb-2 block"></i>
                                    No medicines found in this category matching your search.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Table Footer Controls & Continue Shopping CTA -->
            <div class="p-4 bg-slate-50 border-t border-slate-200 flex flex-col sm:flex-row items-center justify-between gap-4">
                <a href="{{ route('cart.index') }}" class="inline-flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white font-bold px-5 py-2 rounded-xl text-xs shadow-xs transition-colors">
                    <i class="fa-solid fa-bag-shopping"></i> Go to Cart &amp; Checkout &rarr;
                </a>
                <div>
                    {{ $products->links() }}
                </div>
            </div>
        </div>

    </div>
</section>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        $('.row-qty').on('input change', function() {
            const row = $(this).closest('tr');
            const qty = parseFloat($(this).val()) || 0;
            const price = parseFloat(row.find('.row-price').val()) || 0;
            const subtotal = qty * price;
            row.find('.row-subtotal').text('₹' + subtotal.toFixed(2));
        });
    });
</script>
@endpush