@extends('layouts.app')
@section('title', 'Products')
@section('breadcrumb')
<li class="breadcrumb-item active">Products</li>
@endsection
@section('content')

<div class="page-header d-flex justify-content-between align-items-center">
    <div>
        <h1 class="page-title"><i class="bi bi-box-seam me-2" style="color:#1d4ed8;"></i>Products</h1>
        <p class="page-subtitle">Manage all products and their variants</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('variants.index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-diagram-3 me-1"></i> All Variants
        </a>
        @can_permission('products.create')
        <a href="{{ route('products.create') }}" class="btn btn-primary">
            <i class="bi bi-plus-lg me-1"></i> Add Product
        </a>
        @endcan_permission
    </div>
</div>

{{-- Filters --}}
<div class="card mb-3">
    <div class="card-body py-2">
        <form method="GET" class="row g-2 align-items-center">
            <div class="col-12 col-md-4">
                <input type="text" name="search" class="form-control" placeholder="Search by name, SKU, barcode..." value="{{ $search }}">
            </div>
            <div class="col-6 col-md-2">
                <select name="type" class="form-select">
                    <option value="">All Types</option>
                    @foreach(\App\Models\Product::TYPES as $value => $label)
                    <option value="{{ $value }}" {{ $type == $value ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-6 col-md-2">
                <select name="category_id" class="form-select">
                    <option value="">All Categories</option>
                    @foreach($categories as $cat)
                    <option value="{{ $cat->id }}" {{ $category == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-6 col-md-2">
                <select name="brand_id" class="form-select">
                    <option value="">All Brands</option>
                    @foreach($brands as $br)
                    <option value="{{ $br->id }}" {{ $brand == $br->id ? 'selected' : '' }}>{{ $br->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-6 col-md-1">
                <select name="status" class="form-select">
                    <option value="active" {{ $status == 'active' ? 'selected' : '' }}>Active</option>
                    <option value="inactive" {{ $status == 'inactive' ? 'selected' : '' }}>Inactive</option>
                    <option value="all" {{ $status == 'all' ? 'selected' : '' }}>All</option>
                </select>
            </div>
            <div class="col-12 col-md-1 d-flex gap-1">
                <button type="submit" class="btn btn-primary"><i class="bi bi-search"></i></button>
                <a href="{{ route('products.index') }}" class="btn btn-outline-secondary"><i class="bi bi-x"></i></a>
            </div>
        </form>
    </div>
</div>

{{-- Products Table --}}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-box-seam me-2"></i>Products ({{ $products->total() }})</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table mb-0">
                <thead>
                    <tr>
                        <th width="60">Image</th>
                        <th>Product</th>
                        <th>SKU</th>
                        <th>Category</th>
                        <th>Brand</th>
                        <th>Type</th>
                        <th>Variants</th>
                        <th>Status</th>
                        <th width="120">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($products as $product)
                    <tr>
                        <td>
                            @if($product->image)
                            <img src="{{ Storage::url($product->image) }}" alt="{{ $product->name }}" style="width:44px;height:44px;object-fit:cover;border-radius:8px;">
                            @else
                            <div style="width:44px;height:44px;border-radius:8px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:1.2rem;"><i class="bi bi-box-seam"></i></div>
                            @endif
                        </td>
                        <td>
                            <a href="{{ route('products.show', $product) }}" style="color:#1d4ed8;font-weight:600;text-decoration:none;">
                                {{ $product->name }}
                            </a>
                            @if($product->serial_tracked)
                            <span class="badge bg-info ms-1" style="font-size:0.62rem;">Serial</span>
                            @endif
                            @if($product->warranty_months > 0)
                            <span class="badge bg-light text-dark border ms-1" style="font-size:0.62rem;">{{ $product->warranty_months }}m warranty</span>
                            @endif
                        </td>
                        <td><code style="font-size:0.8rem;">{{ $product->sku }}</code></td>
                        <td>
                            <span>{{ $product->category->name }}</span>
                            @if($product->category->parent)
                            <small class="text-muted d-block">under {{ $product->category->parent->name }}</small>
                            @endif
                        </td>
                        <td>{{ $product->brand?->name ?? '—' }}</td>
                        <td>
                            @php
                            $typeColors = ['standard'=>'secondary','serial'=>'primary','non_serial'=>'info','service'=>'success','bundle'=>'warning','configurable'=>'danger'];
                            @endphp
                            <span class="badge bg-{{ $typeColors[$product->type] ?? 'secondary' }}">{{ $product->type_name }}</span>
                        </td>
                        <td>
                            <a href="{{ route('products.show', $product) }}" style="text-decoration:none;">
                                <span class="badge bg-secondary">{{ $product->variants_count }}</span>
                            </a>
                        </td>
                        <td><span class="badge {{ $product->is_active ? 'bg-success' : 'bg-danger' }}">{{ $product->is_active ? 'Active' : 'Inactive' }}</span></td>
                        <td>
                            <div class="d-flex gap-1">
                                <a href="{{ route('products.show', $product) }}" class="btn btn-sm btn-outline-info" title="View"><i class="bi bi-eye"></i></a>
                                @can_permission('products.edit')
                                <a href="{{ route('products.edit', $product) }}" class="btn btn-sm btn-outline-primary" title="Edit"><i class="bi bi-pencil"></i></a>
                                @endcan_permission
                                @can_permission('products.delete')
                                <form method="POST" action="{{ route('products.destroy', $product) }}" onsubmit="return confirm('Delete product \'{{ $product->name }}\'? This will also delete all variants.')">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger" title="Delete"><i class="bi bi-trash"></i></button>
                                </form>
                                @endcan_permission
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="text-center py-5 text-muted">
                            <i class="bi bi-box-seam" style="font-size:2.5rem;display:block;margin-bottom:.5rem;"></i>
                            No products found. <a href="{{ route('products.create') }}">Create your first product</a>.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($products->hasPages())<div class="card-footer">{{ $products->links() }}</div>@endif
</div>

@endsection