{{-- <div class="table-responsive">
 
</div>
 --}}

<table class="table table-hover mb-0" id="productsTable">
    <thead>
        <tr>
            <th width="40">
                <input type="checkbox" class="form-check-input" id="selectAll">
            </th>
            <th>Product</th>
            <th>Category</th>
            <th>Type</th>
            <th>Pricing</th>
            <th>Status</th>
            <th>Orders</th>
            <th>Addons</th>
            <th width="120">Actions</th>
        </tr>
    </thead>
    <tbody id="productsTableBody">
        @forelse ($items as $product)
            <tr>
                <td>
                    <input type="checkbox" class="form-check-input" value="{{ $product->id }}">
                </td>
                <td>
                    <div class="fw-bold">{{ $product->name }}</div>
                    <small class="text-muted">SKU: {{ $product->sku }}</small>
                    <div class="small text-muted mt-1">{{ $product->description }}</div>
                </td>
                <td><span class="badge bg-info">{{ ucfirst($product->category) }}</span></td>
                <td><span class="badge bg-primary">{{ ucfirst($product->type) }}</span></td>
                <td>
                    @if ($product->pricing)
                        <span class="text-success fw-bold">
                            @if ($product->pricing->monthly)
                                ${{ number_format($product->pricing->monthly, 2) }}/mo
                            @endif
                            @if ($product->pricing->monthly && $product->pricing->annually)
                                &bull;
                            @endif
                            @if ($product->pricing->annually)
                                ${{ number_format($product->pricing->annually, 2) }}/yr
                            @endif
                            @if ($product->pricing->one_time_price)
                                ${{ number_format($product->pricing->one_time_price, 2) }}
                            @endif
                        </span>
                    @endif
                </td>
                <td>
                    <span class="badge bg-{{ $product->status === 'active' ? 'success' : 'warning' }}">
                        {{ ucfirst($product->status) }}
                    </span>
                </td>
                <td>{{ $product->orders->count() ?? 0 }}</td>
                <td>{{ $product->addons->count() ?? 0 }}</td>
                <td>
                    <div class="dropdown">
                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{{ route('product.show', $product->id) }}"><i
                                        class="fas fa-eye me-2"></i>View Details</a></li>
                            <li><a class="dropdown-item" href="{{ route('product.edit', $product->id) }}"><i
                                        class="fas fa-edit me-2"></i>Edit Product</a></li>
                            <li><a class="dropdown-item btn_modal" type="button"
                                    href="{{ route('product.addons', $product->id) }}"><i
                                        class="fas fa-puzzle-piece me-2"></i>Manage Addons</a></li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li>
                                <form method="POST" action="{{ route('products.toggleStatus', $product->id) }}"
                                    onsubmit="return confirm('Are you sure?');">
                                    @csrf
                                    <button type="submit"
                                        class="dropdown-item text-{{ $product->status === 'active' ? 'warning' : 'success' }}">
                                        <i
                                            class="fas fa-{{ $product->status === 'active' ? 'pause' : 'play' }} me-2"></i>
                                        {{ $product->status === 'active' ? 'Deactivate' : 'Activate' }}
                                    </button>
                                </form>
                            </li>

                            <hr class="dropdown-divider">
                            </li>
                            <li>
                                <form method="POST" action="{{ route('product.delete', $product->id) }}"
                                    onsubmit="return confirm('Are you sure?');">
                                    @csrf
                                    @method('DELETE')
                                    <button class="dropdown-item text-danger"><i
                                            class="fas fa-trash me-2"></i>Delete</button>
                                </form>
                            </li>
                        </ul>
                    </div>
                </td>
            </tr>
        @empty
            <tr>
                <td colspan="9" class="text-center">No product found.</td>
            </tr>
        @endforelse
    </tbody>
</table>