@extends('layouts.app')
@section('title', 'Products')

@section('styles')
<style>
.stock-badge-in_stock    { background:#d1fae5; color:#065f46; }
.stock-badge-low         { background:#fef3c7; color:#92400e; }
.stock-badge-out_of_stock{ background:#fee2e2; color:#991b1b; }
.stock-badge-negative    { background:#ede9fe; color:#5b21b6; }
.product-img { width:40px; height:40px; object-fit:cover; border-radius:6px; background:#f1f5f9; display:flex;align-items:center;justify-content:center;font-size:1.2rem; }
.filter-bar  { background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:14px 18px; margin-bottom:1rem; }
</style>
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <div>
        <h4 class="mb-0 fw-bold"><i class="bi bi-box-seam text-primary me-2"></i>Products</h4>
        <p class="text-muted mb-0 small">{{ $products->total() }} total products</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('products.import') }}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-upload me-1"></i>Import</a>
        <a href="{{ route('products.export') }}" class="btn btn-outline-success btn-sm"><i class="bi bi-download me-1"></i>Export</a>
        <a href="{{ route('products.barcodes.print') }}" class="btn btn-outline-warning btn-sm"><i class="bi bi-upc-scan me-1"></i>Barcodes</a>
        <a href="{{ route('products.create') }}" class="btn btn-primary btn-sm"><i class="bi bi-plus-lg me-1"></i>New Product</a>
    </div>
</div>

{{-- Filter Bar --}}
<div class="filter-bar">
    <form method="GET" action="{{ route('products.index') }}" class="row g-2 align-items-end">
        <div class="col-md-3">
            <input type="text" name="search" class="form-control form-control-sm" placeholder="Search name, code, barcode..." value="{{ request('search') }}">
        </div>
        <div class="col-md-2">
            <select name="category_id" class="form-select form-select-sm">
                <option value="">All Categories</option>
                @foreach($categories as $cat)
                    <option value="{{ $cat->id }}" {{ request('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name_en }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-2">
            <select name="brand_id" class="form-select form-select-sm">
                <option value="">All Brands</option>
                @foreach($brands as $brand)
                    <option value="{{ $brand->id }}" {{ request('brand_id') == $brand->id ? 'selected' : '' }}>{{ $brand->name_en }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-2">
            <select name="stock_status" class="form-select form-select-sm">
                <option value="">All Stock Status</option>
                <option value="in_stock"     {{ request('stock_status') == 'in_stock' ? 'selected' : '' }}>In Stock</option>
                <option value="low"          {{ request('stock_status') == 'low' ? 'selected' : '' }}>Low Stock</option>
                <option value="out_of_stock" {{ request('stock_status') == 'out_of_stock' ? 'selected' : '' }}>Out of Stock</option>
            </select>
        </div>
        <div class="col-md-2">
            <select name="status" class="form-select form-select-sm">
                <option value="">All Status</option>
                <option value="active"   {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
            </select>
        </div>
        <div class="col-md-1">
            <button class="btn btn-primary btn-sm w-100" type="submit"><i class="bi bi-search"></i></button>
        </div>
    </form>
</div>

{{-- Products Table --}}
<div class="card shadow-sm border-0">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover table-dense mb-0">
                <thead>
                    <tr>
                        <th>Product</th>
                        <th>Code / Barcode</th>
                        <th>Category</th>
                        <th>Brand</th>
                        <th>Unit</th>
                        <th class="text-end">Cost Price</th>
                        <th class="text-end">Sale Price</th>
                        <th class="text-end">Stock</th>
                        <th class="text-center">VAT</th>
                        <th class="text-center">Status</th>
                        <th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($products as $product)
                    <tr>
                        <td>
                            <div class="fw-semibold">{{ $product->name_en }}</div>
                            <div class="text-muted small" dir="rtl">{{ $product->name_ar }}</div>
                        </td>
                        <td>
                            <div class="text-monospace small fw-semibold">{{ $product->product_code }}</div>
                            @if($product->barcode)
                                <div class="text-muted small">{{ $product->barcode }}</div>
                            @endif
                        </td>
                        <td class="small">{{ $product->category?->name_en ?? '—' }}</td>
                        <td class="small">{{ $product->brand?->name_en ?? '—' }}</td>
                        <td class="small">{{ $product->baseUnit?->code ?? '—' }}</td>
                        <td class="text-end small">{{ number_format($product->cost_price, 2) }}</td>
                        <td class="text-end small fw-semibold">{{ number_format($product->sale_price, 2) }}</td>
                        <td class="text-end">
                            @php
                                $stockQty  = $product->total_stock ?? 0;
                                $status    = $stockQty < 0 ? 'negative' : ($stockQty == 0 ? 'out_of_stock' : ($product->reorder_level > 0 && $stockQty <= $product->reorder_level ? 'low' : 'in_stock'));
                                $statusLabel = match($status) {
                                    'negative'     => 'Negative',
                                    'out_of_stock' => 'Out',
                                    'low'          => 'Low',
                                    default        => 'In Stock'
                                };
                            @endphp
                            <span class="badge rounded-pill stock-badge-{{ $status }}">
                                {{ number_format($stockQty, 0) }}
                            </span>
                        </td>
                        <td class="text-center">
                            @if($product->vat_applicable)
                                <span class="badge bg-success-subtle text-success">{{ number_format($product->vat_rate, 0) }}%</span>
                            @else
                                <span class="badge bg-secondary-subtle text-secondary">Exempt</span>
                            @endif
                        </td>
                        <td class="text-center">
                            <span class="badge {{ $product->status == 'active' ? 'bg-success-subtle text-success' : 'bg-danger-subtle text-danger' }}">
                                {{ ucfirst($product->status) }}
                            </span>
                        </td>
                        <td class="text-center">
                            <div class="d-flex justify-content-center gap-1">
                                <a href="{{ route('products.show', $product) }}" class="btn btn-xs btn-outline-info" title="View"><i class="bi bi-eye"></i></a>
                                <a href="{{ route('products.edit', $product) }}" class="btn btn-xs btn-outline-primary" title="Edit"><i class="bi bi-pencil"></i></a>
                                <a href="{{ route('stock-ledger.by-warehouse', $product) }}" class="btn btn-xs btn-outline-secondary" title="Stock by Warehouse"><i class="bi bi-boxes"></i></a>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="11" class="text-center py-5 text-muted">
                            <i class="bi bi-box-seam display-6 d-block mb-2"></i>
                            No products found.
                            <a href="{{ route('products.create') }}" class="d-block mt-2">Create your first product</a>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($products->hasPages())
    <div class="card-footer bg-transparent d-flex justify-content-between align-items-center">
        <small class="text-muted">Showing {{ $products->firstItem() }}–{{ $products->lastItem() }} of {{ $products->total() }}</small>
        {{ $products->links() }}
    </div>
    @endif
</div>

<style>
.btn-xs { padding: 0.15rem 0.45rem; font-size: 0.75rem; }
</style>
@endsection
