@if ($products->isEmpty())
    <div class="text-center py-5">
        <i class="fas fa-box-open fa-3x text-muted mb-3"></i>
        <h5 class="text-muted">No products found</h5>
        <p class="text-muted">Try adjusting your search or filters</p>
    </div>
@else
    <!-- Desktop view -->
    <div class="table-responsive d-none d-lg-block">
        <table class="table table-hover mb-0">
            <thead class="table-light">
                <tr>
                    <th scope="col" width="50">#</th>
                    <th scope="col">Product</th>
                    <th scope="col">SKU</th>
                    <th scope="col">Price</th>
                    <th scope="col">Current Stock</th>
                    <th scope="col">Pending Stock</th>
                    <th scope="col">Stock Level</th>
                    <th scope="col">Status</th>
                    <th scope="col" width="120">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($products->items() as $key => $product)
                    @php
                        // Extract the first image from the JSON array
                        $images = json_decode($product->images);
                        $firstImage = null;
                        if ($images && is_array($images) && count($images) > 0) {
                            $firstImage = $images[0];
                        }
                    @endphp
                    <tr>
                        <th scope="row">{{ $products->firstItem() + $key }}</th>
                        <td>
                            <div class="d-flex align-items-center">
                                <div class="rounded-3 d-flex align-items-center justify-content-center me-3 overflow-hidden"
                                    style="width:48px;height:48px;background-color:#f5f5f5;">
                                    @if ($firstImage)
                                        <img src="{{ asset('storage/' . $firstImage) }}" class="img-fluid rounded"
                                            alt="{{ $product->name }}" style="width:100%;height:100%;object-fit:cover;">
                                    @else
                                        <i class="fas fa-box fa-2x text-muted"></i>
                                    @endif
                                </div>
                                <div>
                                    <h6 class="mb-0">{{ $product->name }}</h6>
                                    <small class="text-muted">ID: {{ $product->id }}</small>
                                </div>
                            </div>
                        </td>
                        <td>{{ $product->sku ?? '-' }}</td>
                        <td>
                            @if ($product->sale_price && $product->sale_price < $product->price)
                                <span class="text-decoration-line-through text-muted">{{ format_price($product->price) }}</span>
                                <span class="ms-1 fw-bold">{{ format_price($product->sale_price) }}</span>
                            @else
                                {{ format_price($product->price) }}
                            @endif
                        </td>
                        <td>
                            @if ($product->with_storehouse_management)
                                <span class="fw-bold {{ $product->current_stock > 0 ? 'text-success' : 'text-danger' }}">
                                    {{ $product->current_stock }}
                                </span>
                            @else
                                <span class="text-muted">Not Managed</span>
                            @endif
                        </td>
                        <td>
                            @if ($product->with_storehouse_management)
                                <span class="fw-bold text-info">
                                    {{ $product->pending_qty ?? 0 }}
                                </span>
                            @else
                                <span class="text-muted">Not Managed</span>
                            @endif
                        </td>
                        <td>
                            @if ($product->stock_level == 'Out of Stock')
                                <span class="badge bg-danger text-white">Out of Stock</span>
                            @elseif ($product->stock_level == 'Coming Soon')
                                <span class="badge bg-info text-white">Coming Soon</span>
                            @else
                                <span class="badge bg-success text-white">In Stock</span>
                            @endif
                        </td>
                        <td>
                            @if ($product->status == 'published')
                                <span class="badge bg-success text-white">Published</span>
                            @else
                                <span class="badge bg-secondary text-white">{{ ucfirst($product->status) }}</span>
                            @endif
                        </td>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-sm btn-outline-primary view-stock-btn" 
                                    data-product-id="{{ $product->id }}" 
                                    data-product-name="{{ $product->name }}">
                                    <i class="fas fa-eye"></i> View
                                </button>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Mobile/Tablet view -->
    <div class="d-lg-none">
        @foreach ($products->items() as $key => $product)
            @php
                // Extract the first image from the JSON array
                $images = json_decode($product->images);
                $firstImage = null;
                if ($images && is_array($images) && count($images) > 0) {
                    $firstImage = $images[0];
                }
            @endphp
            <div class="card mb-3 shadow-sm">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <div class="d-flex align-items-center">
                            <div class="rounded-3 d-flex align-items-center justify-content-center me-3 overflow-hidden"
                                style="width:48px;height:48px;background-color:#f5f5f5;">
                                @if ($firstImage)
                                    <img src="{{ asset('storage/' . $firstImage) }}" class="img-fluid rounded"
                                        alt="{{ $product->name }}" style="width:100%;height:100%;object-fit:cover;">
                                @else
                                    <i class="fas fa-box fa-2x text-muted"></i>
                                @endif
                            </div>
                            <div>
                                <h6 class="mb-0">{{ $product->name }}</h6>
                                <small class="text-muted">ID: {{ $product->id }}</small>
                            </div>
                        </div>
                        <div>
                            @if ($product->stock_level == 'Out of Stock')
                                <span class="badge bg-danger">Out of Stock</span>
                            @elseif ($product->stock_level == 'Coming Soon')
                                <span class="badge bg-info">Coming Soon</span>
                            @else
                                <span class="badge bg-success">In Stock</span>
                            @endif
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6 mb-2">
                            <small class="text-muted d-block">SKU</small>
                            {{ $product->sku ?? '-' }}
                        </div>
                        <div class="col-6 mb-2">
                            <small class="text-muted d-block">Price</small>
                            @if ($product->sale_price && $product->sale_price < $product->price)
                                <span class="text-decoration-line-through text-muted">{{ format_price($product->price) }}</span>
                                <span class="ms-1 fw-bold">{{ format_price($product->sale_price) }}</span>
                            @else
                                {{ format_price($product->price) }}
                            @endif
                        </div>
                        <div class="col-6 mb-2">
                            <small class="text-muted d-block">Current Stock</small>
                            @if ($product->with_storehouse_management)
                                <span class="fw-bold {{ $product->current_stock > 0 ? 'text-success' : 'text-danger' }}">
                                    {{ $product->current_stock }}
                                </span>
                            @else
                                <span class="text-muted">Not Managed</span>
                            @endif
                        </div>
                        <div class="col-6 mb-2">
                            <small class="text-muted d-block">Pending Stock</small>
                            @if ($product->with_storehouse_management)
                                <span class="fw-bold text-info">
                                    {{ $product->pending_qty ?? 0 }}
                                </span>
                            @else
                                <span class="text-muted">Not Managed</span>
                            @endif
                        </div>
                        <div class="col-6 mb-2">
                            <small class="text-muted d-block">Status</small>
                            @if ($product->status == 'published')
                                <span class="badge bg-success">Published</span>
                            @else
                                <span class="badge bg-secondary">{{ ucfirst($product->status) }}</span>
                            @endif
                        </div>
                        <div class="col-12">
                            <div class="btn-group">
                                <button type="button" class="btn btn-sm btn-outline-primary view-stock-btn" 
                                    data-product-id="{{ $product->id }}" 
                                    data-product-name="{{ $product->name }}">
                                    <i class="fas fa-eye"></i> View Stock Details
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
@endif