@model Bookstore.Web.ViewModel.ShoppingCart.ShoppingCartIndexViewModel

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

<div class="panel-body">

    <partial name="_Notification" />

    <p style="text-align: center">
        <h1>Cart</h1>
    </p>

    <div class="container">
        <ul class="time-horizontal">
            <li style="color:red"><b></b>Cart</li>
            <li>
                <p></p>Choose Address
            </li>
            <li>
                <p></p>Finish
            </li>
        </ul>
    </div>

    <div>
        <br />
        <br />
        <br />

        <h4>Total price：@Model.TotalPrice.ToString("C")</h4>
        <br />

        <form method="post">
            @if (!User.Identity.IsAuthenticated)
            {
                <p>Please log in to complete your order.</p>
                <a class="btn" asp-action="Login" asp-controller="Authentication">Log In</a>
            }
            else
            {
                <a class="btn" asp-action="Index" asp-controller="Checkout">Check Out</a>
            }

            <table class="table">
                <tbody>
                    @foreach (var item in Model.ShoppingCartItems)
                    {
                        <tr>
                            <td>
                                <img src="@Html.DisplayFor(modelitem => item.ImageUrl)" onerror="this.onerror=null;this.src='/images/default_c.jpg';" style="max-width: 75px;max-height: 75px;" />
                            </td>
                            <td>
                                <span class="@(item.StockLevel <= 0 ? "text-danger" : "")">@item.BookName</span>

                                @if (item.StockLevel <= 5)
                                {
                                    <p class="text-danger"><small>@(item.StockLevel <= 0 ? "Out of stock" : $"Hurry, only {item.StockLevel} left!")</small></p>
                                }
                            </td>
                            <td>
                                @item.Price.ToString("C")
                            </td>
                            <td>
                                <button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal" data-shoppingCartItemId="@item.ShoppingCartItemId">Remove</button>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </form>
    </div>
    <br />

    <div id="confirmDeleteModal" class="modal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Remove Item?</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to remove this item from your shopping cart?</p>
                </div>
                <div class="modal-footer">
                    <form method="post">
                        <button id="confirmDeleteButton" type="submit" class="btn btn-primary" asp-action="Delete">Yes, Remove</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No, Don't Remove</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script type="text/javascript">
        $(function () {

            $('#confirmDeleteModal').on('show.bs.modal', function (event) {
                var modal = $(this);
                var formAction = modal.find('#confirmDeleteButton').attr("formaction");
                var shoppingCartItemId = $(event.relatedTarget).data('shoppingcartitemid');

                modal.find('#confirmDeleteButton').attr("formaction", formAction + "?shoppingCartItemId=" + shoppingCartItemId);
            });

        });
    </script>
}