@model List<Product>
@{
    ViewData["Title"] = "Manage Products";
    Layout = "_AdminLayout";
}

<div class="d-flex justify-content-between align-items-center mb-3">
    <h5 class="mb-0">All Products (@Model.Count)</h5>
    <a href="/admin/products/create" class="btn btn-primary">
        <i class="bi bi-plus-circle"></i> Add New Product
    </a>
</div>

<div class="card">
    <div class="card-body">
        @if (Model.Any())
        {
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Image</th>
                            <th>Name</th>
                            <th>Category</th>
                            <th>Price</th>
                            <th>Stock</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var product in Model.OrderByDescending(p => p.CreatedAt))
                        {
                            <tr>
                                <td>
                                    @if (!string.IsNullOrEmpty(product.ImageUrl))
                                    {
                                        <img src="@product.ImageUrl" alt="@product.Name" style="width: 50px; height: 50px; object-fit: cover; border-radius: 4px;">
                                    }
                                    else
                                    {
                                        <div style="width: 50px; height: 50px; background: #e0e0e0; border-radius: 4px;"></div>
                                    }
                                </td>
                                <td>
                                    <strong>@product.Name</strong>
                                    @if (product.IsFeatured)
                                    {
                                        <span class="badge bg-warning text-dark ms-1">Featured</span>
                                    }
                                    @if (product.IsTopSeller)
                                    {
                                        <span class="badge bg-success ms-1">Top Seller</span>
                                    }
                                </td>
                                <td>@product.Category</td>
                                <td>$@product.Price.ToString("F2")</td>
                                <td>@product.StockQuantity</td>
                                <td>
                                    @if (product.IsActive)
                                    {
                                        <span class="badge bg-success"><i class="bi bi-check-circle-fill"></i> Active</span>
                                    }
                                    else
                                    {
                                        <span class="badge bg-danger"><i class="bi bi-x-circle-fill"></i> Inactive</span>
                                    }
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <a href="/admin/products/edit/@product.Id" class="btn btn-outline-primary">
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                        <button onclick="deleteProduct('@product.Id', '@product.Name')" class="btn btn-outline-danger">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        }
        else
        {
            <p class="text-center text-muted my-5">No products found. Create your first product!</p>
        }
    </div>
</div>

@section Scripts {
    <script>
        function deleteProduct(id, name) {
            if (confirm(`Are you sure you want to delete "${name}"?`)) {
                fetch(`/admin/products/delete/${id}`, {
                    method: 'POST'
                })
                .then(response => {
                    if (response.ok) {
                        location.reload();
                    } else {
                        alert('Error deleting product');
                    }
                });
            }
        }
    </script>
}