@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>
                <tr>
                    <th scope="col" width="50">#</th>
                    <th scope="col" class="sortable" data-sort="name">Product</th>
                    <th class="d-none d-lg-table-cell sortable" data-sort="brand_name">Brand</th>
                    <th class="d-none d-lg-table-cell sortable" data-sort="size">Size</th>
                    <th class="d-none d-lg-table-cell sortable" data-sort="load_rating">Load Rating</th>
                    <th class="d-none d-lg-table-cell sortable" data-sort="pattern">Pattern</th>
                    <th scope="col" class="sortable" data-sort="price">Price</th>
                    <th class="d-none d-lg-table-cell sortable" data-sort="wholesale_price" title="Wholesale Price">W. Price</th>
                    <th scope="col" class="sortable" data-sort="current_stock" title="Current Stock">In Stock</th>
                    <th scope="col" title="Coming Stock">Coming Stock</th>
                    <th scope="col">Stock Level</th>
                    <th scope="col" class="sortable" data-sort="status">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" class="fw-normal">{{ $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 class="d-none d-lg-table-cell">{{ $product->brand_name ?? '-' }}</td>
                        <td class="d-none d-lg-table-cell">{{ $product->size ?? '-' }}</td>
                        <td class="d-none d-lg-table-cell">{{ $product->load_rating ?? '-' }}</td>
                        <td class="d-none d-lg-table-cell">{{ $product->pattern ?? '-' }}</td>
                        <td>
                            @if ($product->sale_price && $product->sale_price < $product->price)
                                <span class="text-decoration-line-through text-muted">{{ format_price($product->price) }}</span><br>
                                <span class="fw-bold">{{ format_price($product->sale_price) }}</span>
                            @else
                                {{ format_price($product->price) }}
                            @endif
                        </td>
                        <td class="d-none d-lg-table-cell">
                            {{ $product->wholesale_price ? format_price($product->wholesale_price) : '-' }}
                        </td>
                        <td>
                            @if ($product->with_storehouse_management)
                                <span class="fw-bold {{ $product->current_stock > 0 ? 'text-success' : 'text-danger' }}">
                                     {{ intval($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 status-danger-label">Out of Stock</span>
                            @elseif ($product->stock_level == 'Coming Soon')
                                <span class="badge status-info-label">Coming Soon</span>
                            @else
                                <span class="badge status-success-label">In Stock</span>
                            @endif
                        </td>
                        <td>
                           {!! (new \Botble\Ecommerce\Enums\ProductStatusEnum())
                            ->make($product->status)
                            ->toHtml() !!}
                        </td>
                        <td class="text-right">
                            <div class="table-actions d-flex justify-content-center gap-1">
                                <button type="button" class="btn btn-sm btn-icon btn-outline-primary view-stock-btn"
                                 data-product-id="{{ $product->id }}" 
                                data-product-name="{{ $product->name }}" >
                                <svg class="icon svg-icon-ti-ti-eye" data-bs-toggle="tooltip" data-bs-title="View Details"
                                    xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
                                    <path
                                    d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6">
                                    </path>
                                </svg>
                                <span class="sr-only">View Details</span>
                                </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 status-danger-label">Out of Stock</span>
                            @elseif ($product->stock_level == 'Coming Soon')
                                <span class="badge status-info-label">Coming Soon</span>
                            @else
                                <span class="badge status-success-label">In Stock</span>
                            @endif
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6 mb-2">
                            <small class="text-muted d-block">Brand</small>
                            {{ $product->brand_name ?? '-' }}
                        </div>
                        <div class="col-6 mb-2">
                            <small class="text-muted d-block">Size</small>
                            {{ $product->size ?? '-' }}
                        </div>
                        <div class="col-6 mb-2">
                            <small class="text-muted d-block">Load Rating</small>
                            {{ $product->load_rating ?? '-' }}
                        </div>
                        <div class="col-6 mb-2">
                            <small class="text-muted d-block">Pattern</small>
                            {{ $product->pattern ?? '-' }}
                        </div>
                        <div class="col-6 mb-2">
                            <small class="text-muted d-block">W. Price</small>
                            {{ $product->wholesale_price ? format_price($product->wholesale_price) : '-' }}
                        </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>
                             {!! (new \Botble\Ecommerce\Enums\ProductStatusEnum())
                            ->make($product->status)
                            ->toHtml() !!}
                        </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