@model IEnumerable<SuperShop.Web.Data.Entities.Product>

@{
    ViewData["Title"] = "Index";
}


<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css" />


<br />


<p>
    <a asp-action="Create" class="btn btn-primary"><i class="fa fa-save"></i> Create New</a>
</p>

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Products</h3>
            </div>
            <div class="panel-body">
                <table class="table table-hover table-responsive table-striped" id="MyTable">
                    <thead>
                        <tr>
                            <th>
                                @Html.DisplayNameFor(model => model.Name)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => model.Price)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => model.ImageId)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => model.LastPurchase)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => model.LastSale)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => model.IsAvailable)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => model.Stock)
                            </th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model)
                        {
                            <tr>
                                <td>
                                    @Html.DisplayFor(modelItem => item.Name)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.Price)
                                </td>
                                <td>
                                    @if (!string.IsNullOrEmpty(item.ImageFullPath))
                                    {
                                        <img src="@Url.Content(item.ImageFullPath)" alt="Image" style="width:100px;height:150px;max-width:100%;height:auto;" />
                                    }
                                <td>
                                        @Html.DisplayFor(modelItem => item.LastPurchase)
                                </td>
                                <td>
                                        @Html.DisplayFor(modelItem => item.LastSale)
                                </td>
                                <td>
                                        @Html.DisplayFor(modelItem => item.IsAvailable)
                                </td>
                                <td>
                                        @Html.DisplayFor(modelItem => item.Stock)
                                </td>
                                <td>
                                    <a asp-action="Edit" asp-route-id="@item.Id" class="btn btn-warning"><i class="far fa-edit"></i></a>
                                    <a asp-action="Details" asp-route-id="@item.Id" class="btn btn-info"><i class="fas fa-list"></i></a>
                                    <a asp-action="Delete" asp-route-id="@item.Id" class="btn btn-danger"><i class="fas fa-trash"></i></a>
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>



@section Scripts{
    <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#MyTable').DataTable();
        });
    </script>
}
