@extends('layouts.app')
@section('title','Products')@section('page-title','Products')
@section('content')
<div class="page-header d-flex align-items-start justify-content-between">
    <div><h1>Products</h1><p>Manage inventory across all branches</p></div>
    <a href="{{ route('products.create') }}" class="btn btn-brand"><i class="bi bi-plus-lg me-1"></i> New Product</a>
</div>
<div class="card mb-4"><div class="card-body p-3">
    <form method="GET" class="row g-2 align-items-end">
        <div class="col-12 col-md-4"><div class="search-bar"><i class="bi bi-search"></i><input type="text" name="search" class="form-control" placeholder="Search name or SKU..." value="{{ request('search') }}"></div></div>
        <div class="col-6 col-md-2"><select name="category" class="form-select"><option value="">All Categories</option>@foreach($categories as $c)<option value="{{ $c->id }}" {{ request('category')==$c->id?'selected':'' }}>{{ $c->name }}</option>@endforeach</select></div>
        @if(auth()->user()->isAdmin())<div class="col-6 col-md-2"><select name="branch" class="form-select"><option value="">All Branches</option>@foreach($branches as $b)<option value="{{ $b->id }}" {{ request('branch')==$b->id?'selected':'' }}>{{ $b->code }} — {{ $b->name }}</option>@endforeach</select></div>@endif
        <div class="col-6 col-md-2"><select name="status" class="form-select"><option value="">All Stock</option><option value="low" {{ request('status')=='low'?'selected':'' }}>Low Stock</option><option value="out" {{ request('status')=='out'?'selected':'' }}>Out of Stock</option></select></div>
        <div class="col-6 col-md-2 d-flex gap-2"><button type="submit" class="btn btn-brand flex-fill">Filter</button><a href="{{ route('products.index') }}" class="btn btn-outline-secondary">Reset</a></div>
    </form>
</div></div>
<div class="card"><div class="card-body p-0">
    <div class="table-responsive">
    <table class="table table-hover mb-0">
        <thead><tr>
            <th class="ps-4">SKU</th><th>Product</th>
            @if(auth()->user()->isAdmin())<th>Branch</th>@endif
            <th>Category</th><th class="text-end">Stock</th><th class="text-end">Price (USD)</th><th class="text-end pe-4">Actions</th>
        </tr></thead>
        <tbody>
        @forelse($products as $product)
        <tr>
            <td class="ps-4"><span style="font-size:12px;font-family:monospace;color:var(--text-muted-c)">{{ $product->sku }}</span></td>
            <td><div class="fw-600" style="font-size:14px;">{{ $product->name }}</div>
                @if($product->isOutOfStock())<span class="badge-status badge-cancelled">Out of Stock</span>
                @elseif($product->isLowStock())<span class="badge-status badge-pending">Low Stock</span>@endif
            </td>
            @if(auth()->user()->isAdmin())<td><span style="font-size:11px;font-family:monospace;background:rgba(46,196,182,.1);color:var(--accent);padding:2px 8px;border-radius:6px;">{{ $product->branch?->code ?? '—' }}</span></td>@endif
            <td><span class="d-flex align-items-center gap-1" style="font-size:13px;"><span class="cat-dot" style="background:{{ $product->category?->color ?? '#999' }}"></span>{{ $product->category?->name ?? '—' }}</span></td>
            <td class="text-end fw-600">{{ number_format($product->quantity_in_stock) }}</td>
            <td class="text-end">${{ number_format($product->selling_price_usd, 4) }}</td>
            <td class="text-end pe-4">
                <a href="{{ route('products.show', $product) }}" class="btn btn-sm btn-icon btn-outline-brand" title="View"><i class="bi bi-eye"></i></a>
                <a href="{{ route('products.edit', $product) }}" class="btn btn-sm btn-icon btn-outline-secondary" title="Edit"><i class="bi bi-pencil"></i></a>
            </td>
        </tr>
        @empty
        <tr><td colspan="{{ auth()->user()->isAdmin() ? 7 : 6 }}" class="text-center py-5 text-muted"><i class="bi bi-box-seam" style="font-size:40px"></i><p class="mt-2 mb-0">No products found.</p></td></tr>
        @endforelse
        </tbody>
    </table>
    </div>
</div>
@if($products->hasPages())
<div class="card-footer d-flex justify-content-between align-items-center p-3" style="border-top:1px solid var(--border-c)">
    <small class="text-muted">{{ $products->firstItem() }}–{{ $products->lastItem() }} of {{ $products->total() }}</small>
    {{ $products->links() }}
</div>
@endif
</div>
@endsection