@{
    ViewBag.Title = "نمایش سبد خرید";
}

@model List<GheyasPlusShop.Models.ShoppingCartModel>
@using GheyasPlusShop.Utils;
@using Utils;

@section styles{

    @if (ViewBag.DesktopSection)
    {
        <style>
            body {
                background-color: #eceff1;
            }



            .quickReview-count button {
                height: 32px;
                width: 32px;
                background-color: #fff;
                border: 1px solid #ccc;
                cursor: pointer;
            }

            .button-accept {
                width: 100%;
                height: 40px;
                background-color: #00838f;
                margin-top: 12px;
            }

                .button-accept img {
                    margin-left: 10px;
                    height: 28px;
                }
        </style>
    }
    else
    {
        <style>

            h1 {
                font-size: 16px;
                font-weight: 700;
                padding: 25px 30px;
            }

            header, footer {
                display: none;
            }


            .all-product-in-basket {
                background-color: #fff;
                border-radius: 16px;
                padding: 16px;
                padding-bottom: 95px;
                margin-bottom: 5px;
                height: calc(100vh - 90px);
            }

                .all-product-in-basket .product .info-product {
                    display: flex;
                    justify-content: space-between;
                    gap: 10px;
                }

                    .all-product-in-basket .product .info-product .avatar {
                        width: 15%;
                    }

                        .all-product-in-basket .product .info-product .avatar img {
                            width: 60px;
                            height: 60px;
                            border-radius: 50px;
                        }

                    .all-product-in-basket .product .info-product .text {
                        width: 80%;
                        padding: 3px 5px;
                    }

                        .all-product-in-basket .product .info-product .text h2 {
                            font-weight: 600;
                            font-size: 14px;
                            line-height: 22px;
                            color: #201A1B;
                            width: 100%;
                            max-height: 45px;
                            overflow: hidden;
                        }

                    .all-product-in-basket .product .info-product .delete {
                        width: 5%;
                        text-align: left;
                    }

                    .all-product-in-basket .product .info-product .text .count-number {
                        font-weight: 500;
                        font-size: 12px;
                        line-height: 16px;
                        color: #4B4548;
                    }


                .all-product-in-basket .product:last-child hr {
                    display: none;
                }




            .price-offer {
                display: flex;
                justify-content: end;
                padding: 15px 0 0 18px;
            }

            .price {
                font-size: 14px;
                font-weight: 700;
                color: #201A1B;
                position: relative;
                display: flex;
                gap: 7px;
                width: max-content;
                padding: 0px 2px;
            }

                .price .currency {
                    color: #655C5E;
                    font-size: 12px;
                    font-weight: 400;
                }

            .offer {
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: absolute;
                top: -17px;
                width: 100%;
            }

                .offer .offer-item {
                    font-size: 12px;
                    font-weight: 500;
                    color: #424242;
                    text-decoration: line-through;
                }

                .offer .percent {
                    border-radius: 50px;
                    background-color: #A022A1;
                    color: #fff;
                    width: 31px;
                    text-align: center;
                    padding: 0px 6px;
                    font-size: 12px;
                    font-weight: 500;
                }

            .addToBasket2 {
                display: flex;
                border: 1px solid #7F747C;
                border-radius: 4px !important;
                align-items: center;
                max-height: 41px;
                padding: 5px 8px;
            }

            #incCountM, .decCountM {
                font-size: 20px;
                padding: 0px 10px;
                text-decoration: none;
            }

            #countProduct {
                border: none;
                box-shadow: unset;
                font-size: 16px;
            }

            .continue {
                position: fixed;
                bottom: 0;
                background-color: #fff7f9;
            }

                .continue .text, .continue .currency {
                    font-weight: 500;
                    font-size: 12px;
                    color: #4B4548;
                }

                .continue .sum-price {
                    font-weight: 700;
                    font-size: 14px;
                    color: #000;
                }

                .continue button {
                    height: 40px;
                }

            footer {
                display: none;
            }
        </style>
    }
}

@if (ViewBag.DesktopSection)
{
    <div class="container-fluid mb-5 py-3">
        <div class="row">
            <div class="col-9">
                <div style="font-size:10px;font-weight:700;color:#00838f;margin-bottom:5px;">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-4">محصول</div>
                            <div class="col-2">قیمت ( ریال )</div>
                            <div class="col-3 text-center">تعداد</div>
                            <div class="col-2">مجموع ( ریال )</div>
                            <div class="col-1"></div>
                        </div>
                    </div>
                </div>
                <div class="no-margin form-card list-items" style="height:400px;overflow:auto;">
                    @foreach (var product in Model)
                    {
                        <div class="row-item" data-id="@product.Id" data-prop="@product.CodePartProperty" style="border-bottom:1px solid #ccc;">

                            <div class="row">
                                <div class="col-4 d-flex align-items-center p-2">
                                    <img src="@product.PicThumb" style="width:54px;height:54px;border-radius:50%;border:1px solid #ccc;" />
                                    <div style="margin-right:8px;">
                                        <div style="font-weight: 700;margin:6px 0;">@product.NameKala</div>
                                        @foreach (var prop in product.Property)
                                        {
                                            <div>
                                                @if (prop.PropertyColor.IsNotEmpty())
                                                {
                                                    <div style="width: 14px;height: 14px;background-color:@(prop.PropertyColor);border-radius:2px;border: 1px solid #e4e4e4;margin-left:5px;float: right;"></div>
                                                }
                                                <span data-id="propName">@(prop.PropertyName + " : " + prop.PropertyValue)</span>
                                            </div>
                                        }
                                    </div>
                                </div>
                                <div class="col-2 d-flex align-items-center">
                                    <span style="text-decoration:line-through;font-size:10px;" @(product.DisplayOldPrice == product.DisplayNewPrice ? "hidden=hidden" : "") class="oldPrice">@product.DisplayOldPrice.ToNumber()</span>
                                    <span class="newPrice">@product.DisplayNewPrice.ToNumber()</span>
                                </div>
                                <div class="col-3 d-flex align-items-center">
                                    <div class="quickReview-count d-flex" style="height:32px;margin:0 auto;width: 96px;">
                                        <button type="button" class="incCount" style="font-size: 16px;border-radius: 0 4px 4px 0;">+</button>
                                        <input type="text" class="text-control text-center countProduct" style="font-size: 14px;height: 32px;width:32px;border-radius:0;border-right:unset;border-left:unset;" value="@product.Count" />
                                        <button type="button" class="decCount" style="font-size:18px;border-radius: 4px 0 0 4px;">-</button>
                                    </div>
                                </div>
                                <div class="col-2 d-flex align-items-center">
                                    <span style="font-weight:700;" class="sumPrice">@((product.DisplayNewPrice * product.Count).ToNumber())</span>
                                </div>
                                <div class="col-1 text-left d-flex align-items-center">
                                    <img src="~/App_Images/index/deleteProduct.svg" class="deleteShoppingCart" style="cursor:pointer;" title="حذف کالا" />
                                </div>
                            </div>
                        </div>
                    }

                    @*درصورت حذف تمام سفارشات، این کادر نمایش داده میشود*@
                    <div id="noShopping" style="width:254px;height:110px;margin:100px auto 0;padding:32px 0;text-align:center;border:1px solid #ccc;border-radius: 5px;display:none;">
                        <div style="font-size: 14px;font-weight: 700;margin-bottom:10px;">هیچ سفارشی جهت خرید وجود ندارد</div>
                        <div>
                            <a href="@Html.GetHref("")">بازگشت به صفحه اول</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="form-card" style="height:300px;margin-top: 20px!important;padding:30px 15px!important;">
                    <div class="d-flex justify-content-between mb-2">
                        <span>مجموع قیمت کالاها</span>
                        <span><span id="sumPriceProduct">@Model.Sum(x => x.DisplayOldPrice * x.Count).ToNumber()</span> ( ریال ) </span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>تخفیف</span>
                        <span><span id="sumDiscount">@((Model.Sum(x => x.DisplayOldPrice * x.Count) - Model.Sum(x => x.DisplayNewPrice * x.Count)).ToNumber())</span> ( ریال ) </span>
                    </div>
                    <div class="d-flex justify-content-between mb-2" style="border-top:1px solid #ccc;padding-top:15px!important;margin:15px 0;">
                        <span>جمع</span>
                        <span style="float:left;"><span id="sumPriceAll">@Model.Sum(x => x.DisplayNewPrice * x.Count).ToNumber()</span> ( ریال ) </span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>هزینه ارسال</span>
                        <span><span id="pricePost">0</span> ( ریال ) </span>
                    </div>
                    <div class="d-flex justify-content-between mb-2" style="border-top:1px solid #ccc;padding-top:15px!important;margin:15px 0;color:@(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsitePriceColor);">
                        <span>مبلغ قابل پرداخت</span>
                        <span><span style="font-weight:700;font-size:14px;" id="sumPricePay">@Model.Sum(x => x.DisplayNewPrice * x.Count).ToNumber()</span> ( ریال ) </span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <button type="button" class="button-accept" id="btnShoppingProcess" onclick="ShoppingProcess()">
                            <img src="~/App_Images/shoping/ShoppingProcess.svg" />تکمیل فرایند خرید
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
}
else
{
    <div id="MobileSection">
        <h1>سبد خرید (<span class="sum-product">5</span> کالا)</h1>
        <div class="all-product-in-basket">
            @foreach (var product in Model)
            {
                <div class="product row-item" data-id="@product.Id" data-prop="@product.CodePartProperty">
                    <div class="info-product">
                        <div class="avatar"><img src="@product.PicThumb" alt="@product.NameKala" /></div>
                        <div class="text">
                            <h2>@product.NameKala</h2>
                            <div class="count-number">@product.Count @product.UnitName</div>
                        </div>
                        <div class="delete deleteShoppingCart"><img src="~/App_Images/index/delete-shoping.svg" /></div>
                    </div>
                    <div class="container-fluid cart-pric">
                        <div class="row  d-flex align-items-center">
                            <div class="add-to-cart col-6">
                                <div class="addToBasket2 w-100 rounded-pill my-2 py-2">
                                    <a id="incCountM" class="incCount">+</a>
                                    <input type="text" class="text-control text-center countProduct" id="countProduct" value="@product.Count" />
                                    <a class="decCountM first deleteShoppingCart"><img src="~/App_Images/index/delete-m.svg" /></a>
                                    <a class="decCountM last decCount" style="display: none">-</a>
                                </div>
                            </div>
                            <div class="price-offer col-6 text-end">

                                <div class="price">
                                    <span class="newPrice">@product.DisplayNewPrice.ToNumber()</span> <span class="currency" style="">ریال</span>
                                    <div class="offer @(product.DisplayOldPrice == product.DisplayNewPrice ? "d-none" : "")">
                                        <div class="percent">5%</div>
                                        <div class="offer-item">@product.DisplayOldPrice.ToNumber()</div>
                                    </div>
                                    <span class="sumPrice d-none">@((product.DisplayNewPrice * product.Count).ToNumber())</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr />
                </div>
            }
            <div id="noShopping" style="height: 100%">
                <div style="min-height: 320px;display: flex; height: 100%; align-items: center; justify-content: center; flex-direction: column; ">
                    <div>هیچ سفارشی جهت خرید وجود ندارد</div>
                    <a href="@Html.GetHref("")" style=" padding: 10px; display: inline-block; color: red; ">بازگشت به صفحه اول</a>
                </div>
            </div>
        </div>
        <div class="continue container-fluid">
            <div class="row align-items-center">
                <div class="col-6">
                    <div class="text">مبلغ قابل پرداخت</div>
                    <div class="sum-price" id="sumPricePay">@Model.Sum(x => x.DisplayNewPrice * x.Count).ToNumber() <span class="currency">ریال</span></div>
                </div>
                <div class="col-6">
                    <button type="button" class="w-100 button-accept rounded-pill my-4 py-2 button-new button-basket" id="continueOrder" onclick="ShoppingProcess()">
                        ادامه خرید
                    </button>
                </div>
            </div>
        </div>
    </div>
}

@section scripts{

    @if (ViewBag.DesktopSection)
    {
        <script>
            $('.deleteShoppingCart').on("click", function () {
                if (!confirm("آیا برای حذف این کالا مطمئن هستید؟"))
                    return;
                var $row = $(this).closest(".row-item");
                var id = $row.attr("data-id");
                var codePartProperty = $row.attr("data-prop");
                ajax({
                    loading: true,
                    url: "Home/DeleteShoppingCart",
                    data: JSON.stringify({ id: id, codePartProperty: codePartProperty }),
                    success: function () {
                        $row.remove();
                        calcFinalOperation();
                        getShoppingCart();
                    }
                });
            });

            $('.incCount').on("click", function () {
                var count = Number($(this).closest(".row").find(".countProduct").val());
                count++;
                $(this).closest(".row").find(".countProduct").val(count);
                setPrice(this, count);
            });

            $('.decCount').on("click", function () {
                var count = Number($(this).closest(".row").find(".countProduct").val());
                if (count > 1) {
                    count--;
                    $(this).closest(".row").find(".countProduct").val(count);
                    setPrice(this, count);
                }
            });

            function calcFinalOperation() {
                var $rows = $(".list-items .row-item");
                var sumPriceAll = 0;
                var sumPriceProduct = 0;
                var discount = 0;
                var sumDiscount = 0;
                for (var i = 0; i < $rows.length; i++) {
                    var sumPrice = numberNonCommas($($rows[i]).find(".sumPrice").text());
                    var oldPrice = numberNonCommas($($rows[i]).find(".oldPrice").text());
                    var count = Number($($rows[i]).find(".countProduct").val());

                    sumPriceProduct += oldPrice * count;
                    sumPriceAll += sumPrice;

                    if ($($rows[i]).find(".oldPrice").length === 1) {
                        discount = numberNonCommas($($rows[i]).find(".oldPrice").text()) - numberNonCommas($($rows[i]).find(".newPrice").text());

                        sumDiscount += (discount * count);
                    }

                }
                sumPriceProduct = numberWithCommas(sumPriceProduct);
                sumDiscount = numberWithCommas(sumDiscount);
                sumPriceAll = numberWithCommas(sumPriceAll);
                $("#sumPriceProduct").text(sumPriceProduct);
                $("#sumDiscount").text(sumDiscount);
                $("#sumPriceAll").text(sumPriceAll);
                $("#sumPricePay").text(sumPriceAll);
            }

            function ShoppingProcess() {
                var arrayList = [];
                var $rows = $(".list-items .row-item");
                for (var i = 0; i < $rows.length; i++) {
                    var id = $($rows[i]).attr("data-id");
                    var prop = $($rows[i]).attr("data-prop");
                    var count = Number($($rows[i]).find(".countProduct").val());

                    arrayList.push({ Id: id, CodePartProperty: prop, Count: count });
                }
                ajax({
                    loading: true,
                    url: "Home/CheckCompletePersonelInfo",
                    data: JSON.stringify(arrayList),
                    success: function (result) {
                        if (result == "1")
                            window.location.href = baseUrl + "Home/Order";
                        else if (result == "0")
                            window.location.href = baseUrl + "Home/PersonalInfo";
                        else if (result == "2")
                            window.location.href = baseUrl + "Home/Login";
                    }
                });
            }
        </script>
    }
    else
    {
        <script>
            $('.deleteShoppingCart').on("click", function () {
                if (!confirm("آیا برای حذف این کالا مطمئن هستید؟"))
                    return;
                var $row = $(this).closest(".row-item");
                var id = $row.attr("data-id");
                var codePartProperty = $row.attr("data-prop");
                ajax({
                    loading: true,
                    url: "Home/DeleteShoppingCart",
                    data: JSON.stringify({ id: id, codePartProperty: codePartProperty }),
                    success: function () {
                        $row.remove();
                        calcFinalOperation();
                        getShoppingCart();
                        sumProduct()
                    }
                });
            });

            //add sumProduct
            const sumProduct = function () {
                let sumCountProcduct = document.querySelectorAll(".all-product-in-basket .row-item").length;
                document.querySelector(".sum-product").innerText = sumCountProcduct;
            }

            $('.incCount').on("click", function () {
                var count = Number($(this).closest(".row").find(".countProduct").val());
                count++;
                if (count == 2) {
                    $(this).closest(".row").find(".first").css("display", "none");
                    $(this).closest(".row").find(".last").css("display", "block");
                }
                $(this).closest(".row").find(".countProduct").val(count);
                setPrice(this, count);
            });

            $('.decCount').on("click", function () {
                var count = Number($(this).closest(".row").find(".countProduct").val());

                if (count > 0) {
                    count--;
                    if (count == 1) {
                        $(this).closest(".row").find(".first").css("display", "block");
                        $(this).css("display", "none");
                    }
                    $(this).closest(".row").find(".countProduct").val(count);
                    setPrice(this, count);
                }
            });

            function calcFinalOperation() {
                var $rows = $(".all-product-in-basket .row-item");
                var sumPriceAll = 0;
                var sumPriceProduct = 0;
                var discount = 0;
                var sumDiscount = 0;
                for (var i = 0; i < $rows.length; i++) {
                    var sumPrice = numberNonCommas($($rows[i]).find(".sumPrice").text());
                    var oldPrice = numberNonCommas($($rows[i]).find(".oldPrice").text());
                    var count = Number($($rows[i]).find(".countProduct").val());

                    sumPriceProduct += oldPrice * count;
                    sumPriceAll += sumPrice;

                    if ($($rows[i]).find(".oldPrice").length === 1) {
                        discount = numberNonCommas($($rows[i]).find(".oldPrice").text()) - numberNonCommas($($rows[i]).find(".newPrice").text());

                        sumDiscount += (discount * count);
                    }

                }
                sumPriceProduct = numberWithCommas(sumPriceProduct);
                sumDiscount = numberWithCommas(sumDiscount);
                sumPriceAll = numberWithCommas(sumPriceAll);
                $("#sumPriceProduct").text(sumPriceProduct);
                $("#sumDiscount").text(sumDiscount);
                $("#sumPriceAll").text(sumPriceAll);
                $("#sumPricePay").text(sumPriceAll);
            }

            function ShoppingProcess() {
                var arrayList = [];
                var $rows = $(".all-product-in-basket .row-item");
                for (var i = 0; i < $rows.length; i++) {
                    var id = $($rows[i]).attr("data-id");
                    var prop = $($rows[i]).attr("data-prop");
                    var count = Number($($rows[i]).find(".countProduct").val());

                    arrayList.push({ Id: id, CodePartProperty: prop, Count: count });
                }
                ajax({
                    loading: true,
                    url: "Home/CheckCompletePersonelInfo",
                    data: JSON.stringify(arrayList),
                    success: function (result) {
                        if (result == "1")
                            window.location.href = baseUrl + "Home/Order";
                        else if (result == "0")
                            window.location.href = baseUrl + "Home/PersonalInfo";
                        else if (result == "2")
                            window.location.href = baseUrl + "Home/Login";
                    }
                });
            }

            $(document).ready(function () {
                sumProduct();
                let countProduct = document.querySelectorAll("#countProduct");
                countProduct.forEach(item => {
                    if (item.value > 1) {
                        item.parentElement.querySelector(".decCountM.first").style.display = "none"
                        item.parentElement.querySelector(".decCountM.last").style.display = "block"
                    } else if (item.value < 2) {
                        item.parentElement.querySelector(".decCountM.first").style.display = "block"
                        item.parentElement.querySelector(".decCountM.last").style.display = "none"
                    }
                })

            })
        </script>
    }
    <script>
        $('.countProduct').on("keyup", function () {
            setPrice(this, $(this).val());
        });
        function setPrice(sender, count) {
            var price = numberNonCommas($(sender).closest(".row").find(".newPrice").text());
            $(sender).closest(".row").find(".countProduct").val(count);
            var sum = numberWithCommas(count * price);
            $(sender).closest(".row").find(".sumPrice").text(sum);
            calcFinalOperation();
        }
    </script>
}