@if ($orderProducts->isEmpty())
    <div class="text-center py-5">
        <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
        <h5 class="text-muted">No records 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">Item Name</th>
                    <th scope="col">BRAND</th>
                    <th scope="col">SIZE</th>
                    <th scope="col">LOAD RATING</th>
                    <th scope="col">PATTERN</th>
                    <th scope="col">Quantity</th>
                    <th scope="col">Total Amount</th>
                    <th scope="col">Date</th>
                </tr>
            </thead>
            <tbody>
                @foreach($orderProducts as $item)
                    <tr>
                        <td>
                            <div>
                                <h4 class="mb-0">{{ $item->product_name }}</h4>
                            </div>
                        </td>
                        <td>{{ $item->brand_name }}</td>
                        <td>{{ isset($attributes[$item->product_id]['size']) ? $attributes[$item->product_id]['size'] : '-' }}</td>
                        <td>{{ isset($attributes[$item->product_id]['load-rating']) ? $attributes[$item->product_id]['load-rating'] : '-' }}</td>
                        <td>{{ isset($attributes[$item->product_id]['pattern']) ? $attributes[$item->product_id]['pattern'] : '-' }}</td>
                        <td>{{ $item->total_qty }}</td>
                        <td>${{ number_format($item->total_amount, 2) }}</td>
                        <td>{{ $item->order_date }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Mobile/Tablet view -->
    <div class="d-lg-none">
        @foreach($orderProducts as $item)
            <div class="card mb-3">
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-2">
                        <div>
                            <h6 class="mb-0">{{ $item->product_name }}</h6>
                        </div>
                    </div>
                    <p class="card-text">
                        <strong>SKU:</strong> {{ $item->product_sku }}<br>
                        <strong>Brand:</strong> {{ $item->brand_name }}<br>
                        <strong>Size:</strong> {{ isset($attributes[$item->product_id]['size']) ? $attributes[$item->product_id]['size'] : '-' }}<br>
                        <strong>Load Rating:</strong> {{ isset($attributes[$item->product_id]['load-rating']) ? $attributes[$item->product_id]['load-rating'] : '-' }}<br>
                        <strong>Pattern:</strong> {{ isset($attributes[$item->product_id]['pattern']) ? $attributes[$item->product_id]['pattern'] : '-' }}<br>
                        <strong>Quantity:</strong> {{ $item->total_qty }}<br>
                        <strong>Total Amount:</strong> ${{ number_format($item->total_amount, 2) }}<br>
                        <strong>Date:</strong> {{ $item->order_date }}<br>
                    </p>
                </div>
            </div>
        @endforeach
    </div>
@endif