@page
@model WebApp.Pages.CartModel
@{
    ViewData["Title"] = "Cart";
}
<div class="container my-5">
    <h1>Корзина</h1>

    @if (Model.cartItemsView == null! || Model.cartItemsView.Count == 0)
    {
        <p>Ваша корзина пуста.</p>
    }
    else
    {
        <table class="table">
            <thead>
                <tr>
                    <th>Товар</th>
                    <th>Цена</th>
                    <th>Количество</th>
                    <th>Итого</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                
                @foreach (var item in Model.cartItemsView)
                {
                    
                    <tr>
                        <td>
                            <div class="d-flex align-items-center">
                                <a asp-page="ProductPage" asp-route-id="@item.ProductId">@Model.GetProduct(item.Id).Name</a>
                            </div>
                        </td>
                        <td>@Model.GetProduct(item.Id).ActualPrice</td>

                        <td>
                            <span>@item.Count</span>
                        </td>


                        <td>@(item.Count * @Model.GetProduct(item.Id).ActualPrice)</td>
                        
                        
                        <td>
                            <form asp-page-handler="DeleteCartItem" method="post">
                                <input type="hidden" name="Id" value="@item.Id">
                                <button type="submit" class="btn btn-danger">Удалить</button>
                            </form>
                        </td>
                        
                        
                    </tr>
                }
            </tbody>
        </table>

        <div class="d-flex justify-content-end">
            <h3>Сумма заказа: <span id="totalCost"></span> руб.</h3>
        </div>

        <div class="d-flex justify-content-end">
            <form asp-page-handler="GoToPayment">
                <input type="hidden" id="ProductCount" name="ProductCount" value="0" />
                <input type="hidden" id="Cost" name="Cost" value="0.00" />
                <input type="hidden" id="UserId" name="UserId" value="@Model.GetUserId()" />
                <button type="submit" class="btn btn-primary">Перейти к оформлению</button>
            </form>
        </div>
    }
</div>


<script>
    window.onload = function () {
        calculateTotalCost();
        calculateCount();
    };

    function calculateTotalCost() {
        var totalCost = 0;
        var totalCells = document.querySelectorAll('tbody td:nth-child(4)');

        totalCells.forEach(function (cell) {
            var costText = cell.innerText.trim(); // Убираем пробелы вокруг текста
            var cost = parseFloat(costText);

            // Проверяем, является ли cost числом
            if (!isNaN(cost)) {
                totalCost += cost;
            } else {
                console.warn(`Не удалось преобразовать значение "${costText}" в число.`);
            }
        });

        // Обновляем элемент totalCost
        var totalCostElement = document.getElementById('totalCost');
        var Cost = document.getElementById('Cost');
        totalCostElement.textContent = Number(totalCost.toFixed(2)); // Преобразуем обратно в число перед отображением
        Cost.value = Number(totalCost.toFixed(2));
    }


    function calculateCount() {
        var totalCount = 0;
        var totalCells = document.querySelectorAll('tbody td:nth-child(3)');

        totalCells.forEach(function (cell) {
            var countText = cell.innerText.trim(); // Убираем пробелы вокруг текста
            var count = parseInt(countText);

            // Проверяем, является ли count числом
            if (!isNaN(count)) {
                totalCount += count;
            } else {
                console.warn(`Не удалось преобразовать значение "${countText}" в число.`);
            }
        });
        // Обновляем элемент totalCount
        var ProductCount = document.getElementById('ProductCount');
        ProductCount.value = Number(totalCount); // Преобразуем обратно в число перед отображением
    }
</script>