@extends('admin.layouts.app')

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

@section('content')
<div class="page-shell">
    <div class="page-head">
        <div>
            <h1 class="page-title">Products List</h1>
            <div class="page-subtitle">Manage products, stock, barcode, and pricing from one place.</div>
        </div>
        <a href="{{ route('admin.products.create') }}" class="btn primary">Add Product</a>
    </div>

    <div class="filter-card">
        <form method="GET" action="{{ route('admin.products.index') }}">
            <div class="grid-4">
                <div>
                    <label for="q">Search</label>
                    <input type="text" id="q" name="q" placeholder="Search product, code, barcode..." value="{{ request('q') }}">
                </div>

                <div>
                    <label for="category">Category</label>
                    <select id="category" name="category">
                        <option value="">All Categories</option>
                        @foreach($filters['categories'] as $item)
                            <option value="{{ $item->name }}" @selected(request('category') == $item->name)>{{ $item->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label for="brand">Brand</label>
                    <select id="brand" name="brand">
                        <option value="">All Brands</option>
                        @foreach($filters['brands'] as $item)
                            <option value="{{ $item->name }}" @selected(request('brand') == $item->name)>{{ $item->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label for="supplier_name">Supplier</label>
                    <select id="supplier_name" name="supplier_name">
                        <option value="">All Suppliers</option>
                        @foreach($filters['suppliers'] as $item)
                            <option value="{{ $item->name }}" @selected(request('supplier_name') == $item->name)>{{ $item->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="grid-4" style="margin-top:12px;">
                <div>
                    <label for="status">Status</label>
                    <select id="status" name="status">
                        <option value="">All Status</option>
                        <option value="Active" @selected(request('status') == 'Active')>Active</option>
                        <option value="Inactive" @selected(request('status') == 'Inactive')>Inactive</option>
                    </select>
                </div>

                <div class="form-actions" style="align-items:end;">
                    <button class="btn primary" type="submit">Filter</button>
                    <a href="{{ route('admin.products.index') }}" class="btn btn-light">Reset</a>
                </div>
            </div>
        </form>
    </div>

    <div class="card">
        <div class="table-wrap">
            <table class="table">
                <thead>
                    <tr>
                        <th>Image</th>
                        <th>Name</th>
                        <th>Code</th>
                        <th>Category</th>
                        <th>Supplier</th>
                        <th>Stock (pcs)</th>
                        <th>Cost</th>
                        <th>Sell</th>
                        <th>Status</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($products as $product)
                        <tr>
                            <td>
                                @if($product->image)
                                    <img src="{{ asset('storage/'.$product->image) }}" alt="{{ $product->product_name }}" style="width:52px;height:52px;object-fit:cover;border-radius:12px">
                                @else
                                    <span class="badge">No Image</span>
                                @endif
                            </td>

                            <td>
                                <div style="font-weight:700">{{ $product->product_name }}</div>
                                <div class="muted" style="font-size:12px;">Barcode: {{ $product->barcode ?: '—' }}</div>
                            </td>

                            <td>{{ $product->product_code }}</td>
                            <td>{{ $product->category }}</td>
                            <td>{{ $product->supplier_name ?: '—' }}</td>

                            <td>
                                @if($product->stock_quantity <= 3)
                                    <span class="badge" style="background:#fee2e2;color:#991b1b;">{{ $product->stock_display_label }}</span>
                                @elseif($product->stock_quantity <= 10)
                                    <span class="badge" style="background:#fef3c7;color:#92400e;">{{ $product->stock_display_label }}</span>
                                @else
                                    <span class="badge" style="background:#dcfce7;color:#166534;">{{ $product->stock_display_label }}</span>
                                @endif
                            </td>

                            <td>{{ number_format((float) $product->original_price, 2) }}</td>
                            <td>{{ number_format((float) $product->selling_price, 2) }}</td>

                            <td>
                                @if(($product->status ?? 'Active') === 'Inactive')
                                    <span class="badge" style="background:#fef3c7;color:#92400e;">Inactive</span>
                                @else
                                    <span class="badge" style="background:#dcfce7;color:#166534;">Active</span>
                                @endif
                            </td>

                            <td class="text-end" style="white-space:nowrap;">
                                <a href="{{ route('admin.products.edit', $product) }}" class="btn btn-light">Edit</a>

                                <form method="POST" action="{{ route('admin.products.destroy', $product) }}" style="display:inline-block;" onsubmit="return confirm('Delete this product?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger">Delete</button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="10">No products found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div style="margin-top:14px;">
            {{ $products->links() }}
        </div>
    </div>
</div>
@endsection