@extends('layouts.admin')

@section('title', 'Product Catalog - Orange Groceries Admin')
@section('header_title', 'Products & Variants Catalog')

@section('content')
<div class="space-y-6">
    
    @if(session('success'))
        <div class="bg-emerald-50 border border-emerald-200 text-emerald-800 p-4 rounded-2xl flex items-center gap-3 shadow-xs">
            <i class="fa-solid fa-circle-check text-emerald-600 text-lg"></i>
            <span class="font-extrabold text-xs">{{ session('success') }}</span>
        </div>
    @endif
    
    <!-- Top Action Bar -->
    <div class="flex flex-col sm:flex-row items-center justify-between gap-4 bg-white p-4 sm:p-6 rounded-3xl border border-slate-200/80 shadow-sm">
        <form action="{{ route('admin.products.index') }}" method="GET" class="w-full sm:w-auto flex items-center gap-2">
            <div class="relative w-full sm:w-80">
                <input type="text" name="q" value="{{ request('q') }}" placeholder="Search products by name or SKU..." class="w-full pl-9 pr-4 py-2.5 rounded-xl border border-slate-200 text-xs font-medium focus:outline-none focus:ring-2 focus:ring-brand-500">
                <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
            </div>
            <button type="submit" class="bg-slate-900 hover:bg-slate-800 text-white text-xs font-bold px-4 py-2.5 rounded-xl transition">
                Search
            </button>
            @if(request('q'))
                <a href="{{ route('admin.products.index') }}" class="text-xs text-slate-500 hover:text-slate-700 font-semibold px-2">Clear</a>
            @endif
        </form>

        <a href="{{ route('admin.products.create') }}" class="w-full sm:w-auto bg-brand-600 hover:bg-brand-700 text-white font-extrabold text-xs px-5 py-3 rounded-2xl shadow transition flex items-center justify-center gap-2">
            <i class="fa-solid fa-plus text-xs"></i>
            <span>Add New Product</span>
        </a>
    </div>

    <!-- Product List Table -->
    <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-sm space-y-4">
        <div class="flex items-center justify-between pb-2 border-b border-slate-100">
            <h3 class="font-extrabold text-slate-900 text-base">Product List ({{ $products->total() }})</h3>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs">
                <thead>
                    <tr class="text-slate-400 uppercase font-extrabold border-b border-slate-100">
                        <th class="pb-3 px-2">Image</th>
                        <th class="pb-3 px-2">Product Name & SKU</th>
                        <th class="pb-3 px-2">Category</th>
                        <th class="pb-3 px-2">Price</th>
                        <th class="pb-3 px-2">Stock</th>
                        <th class="pb-3 px-2">Badges</th>
                        <th class="pb-3 px-2 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 font-medium text-slate-800">
                    @forelse($products as $product)
                        <tr class="hover:bg-slate-50 transition">
                            <td class="py-3 px-2">
                                <img src="{{ $product->image }}" alt="{{ $product->name }}" class="w-12 h-12 object-contain rounded-xl bg-slate-50 border p-1">
                            </td>
                            <td class="py-3 px-2">
                                <div class="font-bold text-slate-900 text-sm max-w-xs truncate">{{ $product->name }}</div>
                                <div class="text-[10px] text-slate-400 font-mono">SKU: {{ $product->sku ?? 'N/A' }} | {{ $product->weight }}</div>
                            </td>
                            <td class="py-3 px-2">
                                <span class="bg-slate-100 text-slate-700 px-2.5 py-1 rounded-lg font-bold text-[10px]">
                                    {{ $product->category->name ?? 'Uncategorized' }}
                                </span>
                            </td>
                            <td class="py-3 px-2 font-mono">
                                <div class="font-bold text-slate-900">₹{{ number_format($product->effective_price, 2) }}</div>
                                @if($product->discount_price && $product->discount_price < $product->selling_price)
                                    <div class="text-[10px] text-slate-400 line-through">₹{{ number_format($product->selling_price, 2) }}</div>
                                @endif
                            </td>
                            <td class="py-3 px-2">
                                <span class="px-2.5 py-1 rounded-lg font-mono font-bold text-[10px] {{ $product->stock_quantity <= $product->min_stock_alert ? 'bg-rose-100 text-rose-800' : 'bg-emerald-100 text-emerald-800' }}">
                                    {{ $product->stock_quantity }} Units @if($product->weight) ({{ $product->weight }}) @endif
                                </span>
                            </td>
                            <td class="py-3 px-2 space-x-1">
                                @if($product->is_featured)
                                    <span class="bg-amber-100 text-amber-800 px-2 py-0.5 rounded text-[9px] font-bold">Featured</span>
                                @endif
                                @if($product->is_bestseller)
                                    <span class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded text-[9px] font-bold">Bestseller</span>
                                @endif
                                @if($product->is_trending)
                                    <span class="bg-purple-100 text-purple-800 px-2 py-0.5 rounded text-[9px] font-bold">Trending</span>
                                @endif
                            </td>
                            <td class="py-3 px-2 text-right space-x-2">
                                <a href="{{ route('admin.products.edit', $product->id) }}" class="text-brand-600 font-bold hover:underline">Edit</a>
                                <form action="{{ route('admin.products.delete', $product->id) }}" method="POST" class="inline">
                                    @csrf
                                    <button type="submit" onclick="return confirm('Delete this product?')" class="text-rose-600 font-bold hover:underline">Delete</button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="py-8 text-center text-slate-400 font-medium">No products found in catalog</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <div class="pt-2">
            {{ $products->links() }}
        </div>
    </div>
</div>
@endsection