@extends('admin.layouts.admin')

@section('title', 'Products')

@section('content')

    <div class="flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-lg font-semibold text-brand-ink lg:text-2xl lg:font-extrabold">Products</h1>
            <p class="mt-1 text-brand-ink/65">All products across every category.</p>
        </div>
        <a href="{{ route('admin.products.create') }}" class="btn-primary w-full sm:w-auto">+ New Product</a>
    </div>

    <div class="mt-8 overflow-x-auto rounded-2xl border border-brand-green-200 bg-white shadow-card">
        <table class="min-w-full divide-y divide-brand-green-200">
            <thead class="border-b border-brand-green-200 bg-brand-green-50">
                <tr>
                    <th class="px-5 py-3 text-left text-xs font-medium uppercase tracking-wide text-brand-ink/65 lg:font-bold">Product</th>
                    <th class="px-5 py-3 text-left text-xs font-medium uppercase tracking-wide text-brand-ink/65 lg:font-bold">Category</th>
                    <th class="px-5 py-3 text-left text-xs font-medium uppercase tracking-wide text-brand-ink/65 lg:font-bold">Price</th>
                    <th class="px-5 py-3 text-left text-xs font-medium uppercase tracking-wide text-brand-ink/65 lg:font-bold">Status</th>
                    <th class="px-5 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-brand-green-200">
                @forelse ($products as $product)
                    <tr>
                        <td class="px-5 py-3">
                            <div class="flex items-center gap-3">
                                <div class="flex h-10 w-10 items-center justify-center overflow-hidden rounded-lg bg-brand-green-50">
                                    @if ($product->coverImageUrl())
                                        <img src="{{ $product->coverImageUrl() }}" alt="" class="h-full w-full object-cover">
                                    @else
                                        <span class="text-lg">🧴</span>
                                    @endif
                                </div>
                                <div>
                                    <p class="text-sm font-semibold text-brand-ink">{{ $product->getTranslation('name', 'kn') }}</p>
                                    @if ($product->is_featured)
                                        <span class="text-xs font-bold text-brand-lime-500">★ Featured</span>
                                    @endif
                                </div>
                            </div>
                        </td>
                        <td class="px-5 py-3 text-sm text-brand-ink/65">{{ $product->category->getTranslation('name', 'kn') }}</td>
                        <td class="px-5 py-3 text-sm text-brand-ink/65">{{ $product->price ? '₹'.number_format((float) $product->price, 2) : '—' }}</td>
                        <td class="px-5 py-3">
                            <span class="rounded-full px-2.5 py-1 text-xs font-bold {{ $product->is_active ? 'bg-brand-green-100 text-brand-green-800' : 'bg-gray-100 text-gray-500' }}">
                                {{ $product->is_active ? 'Active' : 'Hidden' }}
                            </span>
                        </td>
                        <td class="px-5 py-3 text-right text-sm">
                            <a href="{{ route('admin.products.edit', $product) }}" class="font-semibold text-brand-green-800 hover:underline">Edit</a>
                            <form method="POST" action="{{ route('admin.products.destroy', $product) }}" class="ml-3 inline" onsubmit="return confirm('Delete this product?');">
                                @csrf @method('DELETE')
                                <button type="submit" class="font-semibold text-accent-liver hover:underline">Delete</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="px-5 py-6 text-center text-sm text-brand-ink/65">No products yet — add your first one.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-6">{{ $products->links() }}</div>

@endsection