@extends('layouts.admin')

@section('title', 'Footwear Inventory & Products')

@section('content')

<div class="space-y-6">
    
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h2 class="font-display font-bold text-xl text-white">All Footwear Products ({{ $products->total() }})</h2>
            <p class="text-xs text-slate-400">Manage catalog prices, discounts, image galleries, and inventory stock levels.</p>
        </div>

        <div class="flex items-center gap-3">
            <form method="GET" class="flex gap-2">
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search products..." 
                       class="bg-ink-card border border-white/15 rounded-xl px-4 py-2 text-xs text-white placeholder-slate-500 focus:ring-2 focus:ring-brand-light focus:outline-none w-56">
                <button type="submit" class="bg-white/10 hover:bg-white/20 text-white text-xs font-bold px-3 py-2 rounded-xl transition">
                    Search
                </button>
            </form>
            <a href="{{ route('admin.products.create') }}" class="bg-brand hover:bg-brand-hover text-white text-xs font-bold px-4 py-2 rounded-xl shadow-glow transition flex items-center gap-1.5 shrink-0">
                <span>+ Add Product</span>
            </a>
        </div>
    </div>

    <div class="bg-ink-card rounded-3xl border border-white/10 p-6 shadow-xl space-y-4">
        <div class="overflow-x-auto">
            <table class="w-full text-xs text-left border-collapse">
                <thead>
                    <tr class="text-slate-400 border-b border-white/10 pb-2">
                        <th class="py-3 px-2 font-bold">Image</th>
                        <th class="py-3 font-bold">Product Name</th>
                        <th class="py-3 font-bold">Category</th>
                        <th class="py-3 font-bold">MRP</th>
                        <th class="py-3 font-bold">Selling Price</th>
                        <th class="py-3 font-bold">Discount</th>
                        <th class="py-3 font-bold">Stock</th>
                        <th class="py-3 font-bold">Status</th>
                        <th class="py-3 text-right font-bold">Actions</th>
                    </tr>
                </thead>
                <tbody class="text-slate-300">
                    @forelse($products as $product)
                        @php($img = $product->primaryImage())
                        <tr class="border-b border-white/5 hover:bg-white/5 transition">
                            <td class="py-3 px-2">
                                <div class="w-12 h-12 rounded-xl bg-ink overflow-hidden border border-white/10">
                                    @if($img)<img src="{{ $img->url }}" class="w-full h-full object-cover">@else<div class="w-full h-full flex items-center justify-center text-sm">👟</div>@endif
                                </div>
                            </td>
                            <td class="py-3 font-bold text-white">
                                {{ $product->name }}
                                @if($product->brand)
                                    <span class="block text-[10px] text-slate-500 font-normal">{{ $product->brand }}</span>
                                @endif
                            </td>
                            <td class="py-3 font-semibold text-brand-light">{{ $product->category->name ?? '-' }}</td>
                            <td class="py-3 text-slate-400 line-through font-mono">₹{{ number_format($product->original_price, 2) }}</td>
                            <td class="py-3 font-heading font-bold text-white">₹{{ number_format($product->price, 2) }}</td>
                            <td class="py-3">
                                <span class="px-2 py-0.5 rounded-full bg-brand/20 text-brand-light font-bold text-[10px]">
                                    {{ $product->discount_percent }}% OFF
                                </span>
                            </td>
                            <td class="py-3">
                                @if($product->stock <= 10)
                                    <span class="text-rose-400 font-bold">🔥 {{ $product->stock }} left</span>
                                @else
                                    <span class="text-emerald-400 font-semibold">{{ $product->stock }}</span>
                                @endif
                            </td>
                            <td class="py-3">
                                <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase {{ $product->is_active ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'bg-slate-500/10 text-slate-400 border border-slate-500/20' }}">
                                    {{ $product->is_active ? 'Active' : 'Hidden' }}
                                </span>
                            </td>
                            <td class="py-3 text-right space-x-2">
                                <a href="{{ route('admin.products.edit', $product) }}" class="bg-brand/20 hover:bg-brand/30 text-brand-light border border-brand/30 px-3 py-1 rounded-lg text-xs font-bold transition inline-block">
                                    Edit
                                </a>
                                <form action="{{ route('admin.products.destroy', $product) }}" method="POST" class="inline" onsubmit="return confirm('Delete this product permanently?')">
                                    @csrf
                                    @method('DELETE')
                                    <button class="bg-rose-500/10 hover:bg-rose-500/20 text-rose-400 border border-rose-500/20 px-2.5 py-1 rounded-lg text-xs font-bold transition">
                                        Delete
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="py-8 text-center text-slate-500">No products found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="pt-4 border-t border-white/10">
            {{ $products->links() }}
        </div>
    </div>

</div>

@endsection