@extends('layouts.admin')

@section('title', 'Products')
@section('page_title', 'Products')

@section('toolbar')
    <a href="{{ route('admin.products.create') }}" class="kt-btn kt-btn-primary">
        <i class="ki-filled ki-plus"></i>
        Add Product
    </a>
@endsection

@section('content')
<div class="kt-card">
    <div class="kt-card-header flex-wrap gap-3">
        <h3 class="kt-card-title">All Products</h3>
        <div class="flex gap-2 flex-wrap">
            <form method="GET" class="mw-admin-filters">
                <input type="search" name="q" value="{{ request('q') }}" class="kt-input" placeholder="Search...">
                <button class="kt-btn kt-btn-outline shrink-0" type="submit">Search</button>
            </form>
        </div>
    </div>
    <div class="kt-card-content p-0">
        <div class="kt-scrollable-x-auto">
            <table class="kt-table table-auto">
                <thead>
                    <tr>
                        <th>Product</th>
                        <th>Price</th>
                        <th>Stock</th>
                        <th>Status</th>
                        <th class="w-[120px]"></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($products as $product)
                        <tr>
                            <td>
                                <div class="flex items-center gap-3">
                                    <img src="{{ $product->image_url }}" alt="" class="size-10 rounded object-cover" onerror="this.src='{{ asset('images/placeholder-product.svg') }}'">
                                    <div>
                                        <div class="font-medium">{{ $product->name }}</div>
                                        <div class="text-xs text-secondary-foreground">{{ $product->categories->pluck('name')->join(', ') }}</div>
                                    </div>
                                </div>
                            </td>
                            <td>₹{{ number_format($product->price, 0) }}</td>
                            <td>{{ $product->stock_qty }} / {{ $product->stock_status }}</td>
                            <td>
                                <span class="kt-badge kt-badge-sm {{ $product->is_active ? 'kt-badge-success' : 'kt-badge-secondary' }}">
                                    {{ $product->is_active ? 'Active' : 'Hidden' }}
                                </span>
                            </td>
                            <td>
                                <div class="flex gap-2">
                                    <a href="{{ route('admin.products.edit', $product) }}" class="kt-btn kt-btn-sm kt-btn-light">Edit</a>
                                    <form action="{{ route('admin.products.destroy', $product) }}" method="POST" onsubmit="return confirm('Delete product?')">
                                        @csrf @method('DELETE')
                                        <button class="kt-btn kt-btn-sm kt-btn-destructive" type="submit">Delete</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    <div class="kt-card-footer">{{ $products->links('pagination::simple-default') }}</div>
</div>
@endsection