@extends('layouts.app')
@section('title', 'Products')
@section('content')
<div class="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
    <div>
        <h2 class="page-title">Products</h2>
        <p class="page-subtitle">Manage your product inventory</p>
    </div>
    <x-button type="link" href="{{ route('products.create') }}">
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
        Add Product
    </x-button>
</div>

<form method="GET" action="{{ route('products.index') }}" class="search-card dark:bg-dark-card dark:border-dark-border">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div>
            <label for="search" class="form-label dark:text-dark-muted">Search</label>
            <input type="text" name="search" id="search" value="{{ request('search') }}" placeholder="Search by ID, name, HSN code..." class="form-input dark:bg-dark-surface dark:border-dark-border dark:text-dark-text">
        </div>
        <div>
            <label for="status" class="form-label dark:text-dark-muted">Status</label>
            <select name="status" id="status" class="form-select dark:bg-dark-surface dark:border-dark-border dark:text-dark-text">
                <option value="">All Statuses</option>
                <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
            </select>
        </div>
        <div class="flex items-end gap-2">
            <button type="submit" class="btn-primary">
                <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                Filter
            </button>
            @if(request('search') || request('status'))
                <a href="{{ route('products.index') }}" class="btn-secondary">Clear</a>
            @endif
        </div>
    </div>
</form>

<div class="table-container dark:bg-dark-card dark:border-dark-border">
    <div class="overflow-x-auto scrollbar-thin">
        <table class="min-w-full divide-y divide-gray-100 dark:divide-dark-border text-sm">
            <thead>
                <tr>
                    <th class="table-th dark:text-dark-muted">Product ID</th>
                    <th class="table-th dark:text-dark-muted">Name</th>
                    <th class="table-th dark:text-dark-muted">HSN Code</th>
                    <th class="table-th dark:text-dark-muted">MRP</th>
                    <th class="table-th dark:text-dark-muted hidden lg:table-cell">Distributor Price</th>
                    <th class="table-th dark:text-dark-muted hidden lg:table-cell">Shop Price</th>
                    <th class="table-th dark:text-dark-muted hidden lg:table-cell">Ecom Price</th>
                    <th class="table-th dark:text-dark-muted">Stock</th>
                    <th class="table-th dark:text-dark-muted">Status</th>
                    <th class="table-th text-right dark:text-dark-muted">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50 dark:divide-dark-border">
                @forelse($products as $product)
                <tr class="table-row dark:hover:bg-dark-surface">
                    <td class="table-td font-mono text-xs text-primary-600 font-medium"><a href="{{ route('products.show', $product) }}" class="hover:underline">{{ $product->product_id }}</a></td>
                    <td class="table-td font-medium text-gray-900 dark:text-dark-text"><a href="{{ route('products.show', $product) }}" class="hover:underline text-gray-900 dark:text-dark-text">{{ $product->name }}</a></td>
                    <td class="table-td text-gray-500 dark:text-dark-muted font-mono text-xs">{{ $product->hsn_code ?? '—' }}</td>
                    <td class="table-td dark:text-dark-text">₹{{ number_format($product->mrp, 2) }}</td>
                    <td class="table-td dark:text-dark-text hidden lg:table-cell">₹{{ number_format($product->dealer_price, 2) }}</td>
                    <td class="table-td dark:text-dark-text hidden lg:table-cell">₹{{ number_format($product->shop_price, 2) }}</td>
                    <td class="table-td dark:text-dark-text hidden lg:table-cell">₹{{ number_format($product->ecom_price, 2) }}</td>
                    <td class="table-td">
                        <span class="{{ $product->stock_quantity <= $product->stock_alert_limit ? 'text-red-600 font-semibold' : 'text-gray-900 dark:text-dark-text' }}">
                            {{ $product->stock_quantity }}
                        </span>
                    </td>
                    <td class="table-td">
                        @if($product->status)
                            <span class="badge badge-success">Active</span>
                        @else
                            <span class="badge badge-danger">Inactive</span>
                        @endif
                    </td>
                    <td class="table-td text-right">
                        <x-row-actions
                            :edit-url="route('products.edit', $product)"
                            :delete-url="route('products.destroy', $product)"
                            :view-url="route('products.show', $product)"
                            item-name="product"
                        />
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="10" class="px-6 py-12 text-center">
                        <div class="w-16 h-16 rounded-2xl bg-gray-50 dark:bg-dark-surface flex items-center justify-center mx-auto mb-3">
                            <svg class="w-8 h-8 text-gray-300 dark:text-dark-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
                        </div>
                        <p class="text-sm font-medium text-gray-900 dark:text-dark-text">No products found</p>
                        <p class="text-xs text-gray-500 dark:text-dark-muted mt-1">Get started by creating a new product.</p>
                        <a href="{{ route('products.create') }}" class="btn-primary mt-4 inline-flex">Add Product</a>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<x-pagination :paginator="$products" />
@endsection