@model List<StockMaster.Models.Product>
@{
    ViewData["Title"] = "Products";
}

<div class="row mb-4">
    <div class="col-md-6">
        <h2><i class="fas fa-box"></i> Product Management</h2>
    </div>
    <div class="col-md-6 text-end">
        <a href="/Product/Create" class="btn btn-primary">
            <i class="fas fa-plus"></i> Add New Product
        </a>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <i class="fas fa-list"></i> Product List
    </div>
    <div class="card-body">
        @Html.AntiForgeryToken()
        <div class="mb-3">
            <input type="text" class="form-control" placeholder="Search products..." id="searchBox">
        </div>

        <div class="table-responsive">
            <table class="table table-hover" id="productsTable">
                <thead>
                    <tr>
                        <th>SKU</th>
                        <th>Product Name</th>
                        <th>Category</th>
                        <th>Supplier</th>
                        <th>Unit Price</th>
                        <th>Reorder Level</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var product in Model)
                    {
                        <tr>
                            <td><code>@product.Sku</code></td>
                            <td><strong>@product.Name</strong></td>
                            <td>@(product.Category?.Name ?? "-")</td>
                            <td>@(product.Supplier?.Name ?? "-")</td>
                            <td><strong>@product.UnitPrice.ToString("N2") MKD</strong></td>
                            <td>
                                <span class="badge bg-info">@product.ReorderLevel</span>
                            </td>
                            <td>
                                @if (product.IsActive)
                                {
                                    <span class="badge bg-success">
                                        <i class="fas fa-check"></i> Active
                                    </span>
                                }
                                else
                                {
                                    <span class="badge bg-secondary">Inactive</span>
                                }
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm">
                                    <a href="/Product/Edit/@product.ProductId" class="btn btn-warning">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <button onclick="deleteProduct(@product.ProductId)" class="btn btn-danger">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>

        @if (!Model.Any())
        {
            <div class="text-center py-5">
                <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                <p class="text-muted">No products found.</p>
                <a href="/Product/Create" class="btn btn-primary">
                    <i class="fas fa-plus"></i> Add First Product
                </a>
            </div>
        }
    </div>
</div>

@section Scripts {
    <script>
        function deleteProduct(id) {
            if (confirm('Are you sure you want to delete this product?')) {
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = '/Product/Delete/' + id;

                
                const token = document.querySelector('input[name="__RequestVerificationToken"]');
                if (token) {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = '__RequestVerificationToken';
                    input.value = token.value;
                    form.appendChild(input);
                }

                document.body.appendChild(form);
                form.submit();
            }
        }

        $(document).ready(function() {
            $('#searchBox').on('keyup', function() {
                const value = $(this).val().toLowerCase();
                $('#productsTable tbody tr').filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
                });
            });
        });
    </script>
}