
@{
    ViewBag.Title = "صفحه اصلی سایت";
}
@model GheyasPlusShop.Models.Home.HomeViewModel
@using GheyasPlusShop.Utils;
@using Utils;

@section styles
{

    <link href="~/App_Css/app/swiper.min.css" rel="stylesheet" />
    <style>

        .banner-top:hover #slide-box {
            display: block !important;
        }

        .slide-btn-arrow {
            width: 15px;
            height: 15px;
            cursor: pointer;
        }

        .slide-btn-circle {
            width: 10px;
            height: 10px;
            border-radius: 100%;
            background-color: #808080;
            border: 1px solid #424242;
            margin: 8px 0 0 16px;
            cursor: pointer;
        }

        .close {
            float: left;
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1;
            color: #000;
            text-shadow: 0 1px 0 #fff;
            opacity: .5;
            border: none;
            background-color: unset;
        }

        .section-title {
            font-size: 18px;
            font-weight: 700;
            color: #6b6b6b;
        }

        .section-view-all {
            font-weight: 700;
            color: #379da7;
            cursor: pointer;
            border-bottom: 1px solid #379da7;
            margin-top: 8px;
        }

        .section-box {
            margin: 4px 0 20px;
            padding: 15px 15px 0;
            background-color: #eceff1;
        }

        .product-card {
            margin-bottom: 15px;
            box-shadow: 0 0 0 0 rgba(0,0,0,.12), 0 2px 2px 0 rgba(0,0,0,.24);
            background-color: #fff;
            border-radius: 4px;
        }

            .product-card:hover .product-pic-details {
                display: block !important;
            }

        .product-pic-details {
            display: none;
            position: absolute;
            margin: 0 auto;
            left: 0;
            right: 0;
            /*left: 32%;*/
            top: 36%;
            width: 140px;
            height: 118px;
            padding: 10px 8px;
            background-color: rgba(0,0,0,0.3);
            z-index: 555;
        }

            .product-pic-details .button-accept {
                height: 36px;
                width: 90px;
                cursor: pointer;
            }

        .product-pic {
            border-radius: 4px 4px 0 0;
            height: 235px;
            position: relative;
            text-align: center;
            padding: 8px;
        }

            .product-pic img {
                height: 94%;
            }

        .product-card.product-pic {
            height: 310px;
        }

        .triangle {
            position: absolute;
            left: 24px;
            bottom: 24px;
            width: 150px;
            height: 140px;
            background-image: url('../../App_Images/index/BGdis.svg');
            background-size: cover;
        }

        .triangle-name {
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 10px;
            position: absolute;
            bottom: 44px;
            left: 40px;
        }

        .triangle-button {
            width: 46px;
            height: 16px;
            border-radius: 8px;
            background-color: #00838f;
            color: #fff;
            font-size: 10px;
            cursor: pointer;
            position: absolute;
            bottom: 30px;
            left: 32px;
            text-align: center;
        }

        .product-discount {
            position: absolute;
            top: 0;
            left: 15px;
            width: 54px;
            height: 58px;
            padding-top: 22px;
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
            text-align: center;
            font-size: 14px;
            font-weight: 700;
        }

        .product-text {
            padding: 8px 0;
            height: 75px;
        }

            .product-text .product-name {
                font-size: 14px;
                font-weight: 700;
                margin-bottom: 10px;
            }

            .product-text .product-price-new {
                font-size: 14px;
                font-weight: 700;
                display: inline-block;
            }

            .product-text .product-price-old {
                display: inline-block;
                margin-right: 6px;
            }

                .product-text .product-price-old span {
                    text-decoration: line-through;
                }

        .radial-gradient {
            position: absolute;
            top: 0;
            width: 10px;
            height: 100%;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
    </style>
}

@if (ViewBag.DesktopSection)
{

    <div id="DesktopSection">

        @*بنر ابتدای صفحه برای اسلایدشو *@
        @if (Model.SlideShowList.Count > 0)
        {
            <div class="row">
                <div class="slides" style="width:100%;position:relative;height:440px;margin-bottom:20px;">
                    <div class="swiper-container col-12" style="padding: 0; height: 100%; background-color: white; width: 100%;">
                        <div class="swiper-wrapper">
                            <!-- slide -->
                            @foreach (var banner in Model.SlideShowList)
                            {
                                <div class="swiper-slide" style="width: 100%; height: 100%;">
                                    <a href="@banner.Url" title="@banner.Alt" target="_blank">
                                        <div style="background-image:url(@(banner.BannerImage.ToBase64File()));width:100%;height:100%;background-size: cover;background-repeat:no-repeat;background-position:center;">
                                        </div>
                                        @*<img src="@(banner.BanerImage.ToBase64File())" style="width:100%;height:100%;" />*@
                                    </a>
                                </div>
                            }
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                @*<a class="container body-content no-padding banner-top" href="@banner.Url" title="@banner.Alt" style="position:relative;height:460px;margin-bottom:20px;">
                    <div id="slide-box" style="position:absolute;bottom:20px;right:30px;display:none;">
                        <div class="float-left" style="width:58px;height:26px;background-color:#000;border-radius:8px;padding:5px;">
                            <img src="~/App_Images/index/prev.svg" class="slide-btn-arrow svg float-left" />
                            <img src="~/App_Images/index/next.svg" class="slide-btn-arrow svg float-right" />
                        </div>
                        <div class="float-left slide-btn-circle"></div>
                        <div class="float-left slide-btn-circle"></div>
                    </div>
                    </a>*@
            </div>
        }

        @*ویترین و یا بنر وسط صفحه*@
        @if (Model.VitrinList.Count > 0)
        {
            <div class="row">
                @foreach (var vitrin in Model.VitrinList)
                {
                    if (vitrin.BannerCode > 0)
                    {
                        <a class="body-content" href="@vitrin.VitrinUrl" target="_blank">
                            <img src="@vitrin.BannerImage.ToBase64File()" style="width:100%;margin-bottom:20px;" title="@vitrin.VitrinName" />
                        </a>
                    }
                    else
                    {
                        var detailList = Model.VitrinDetailList.Where(x => x.CodeVitrin == vitrin.VitrinCode).Take(vitrin.ShowCount).ToList();
                        <div class="body-content">
                            <div class="d-flex align-items-center justify-content-between">
                                <span class="section-title">@vitrin.VitrinName</span>
                                <a href="@vitrin.VitrinUrl" style="display:none;">
                                    <span class="section-view-all">مشاهده همه</span>
                                </a>
                            </div>
                            <div class="section-box">
                                <div class="row">
                                    @for (var i = 0; i < detailList.Count; i++)
                                    {
                                        if (i < vitrin.Template.Split(',').Length && i < vitrin.ShowCount)
                                        {
                                            if (detailList[i].CodeKala > 0)
                                            {
                                                <div class="col-@(vitrin.Template.Split(',')[i])">
                                                    <div class="product-card" data-id="@detailList[i].CodeKala">
                                                        <div class="product-pic">
                                                            <img src="@detailList[i].PicThumb.ToBase64File()" />
                                                            @*بررسی سریع & دیدن جزئیات*@
                                                            <div class="product-pic-details text-center">
                                                                <button type="button" class="button-accept quick-review" data-id="@detailList[i].CodePartProperty"> بررسی سریع</button>
                                                                <div class="" style="width:100%;border-bottom:1px dashed #666666;margin:12px 0;"></div>
                                                                <a href="@Html.GetHref("Home/ShowDetails?id=" + detailList[i].CodeKala + "&part=" + detailList[i].CodePartProperty)"><input type="button" class="button-accept show-details" value="دیدن جزئیات" /></a>
                                                                <div class="radial-gradient" style="left: -10px;border-radius: 8px 0 0 8px;background-image: radial-gradient(circle at -2% 50%, rgba(0,0,0,0) 8px, rgba(0, 0, 0, 0.3) 10px);">
                                                                </div>
                                                                <div class="radial-gradient" style="right: -10px;border-radius: 0 8px 8px 0;background-image: radial-gradient(circle at 102% 50%, rgba(0,0,0,0) 8px, rgba(0, 0, 0, 0.3) 10px);">
                                                                </div>
                                                            </div>
                                                            @*تخفیف*@
                                                            @if ((detailList[i].PercentA > 0) && (detailList[i].Mojodi > 0) && (detailList[i].DisplayKalaPrice(Model.Avarez, Model.Maliyat) > 0))
                                                            {
                                                                <div class="product-discount">@(detailList[i].PercentA)%</div>
                                                            }
                                                        </div>
                                                        <div class="text-center product-text">
                                                            <div class="product-name">@detailList[i].NameKala</div>
                                                            @if (detailList[i].Mojodi > 0)
                                                            {
                                                                if (detailList[i].DisplayKalaPrice(Model.Avarez, Model.Maliyat) == 0)
                                                                {
                                                                    <div class="product-price-new">
                                                                        <span style="color:#546E7A!important;">تماس بگیرید</span>
                                                                    </div>
                                                                }
                                                                else
                                                                {
                                                                    <div class="product-price-new">
                                                                        <span>@((detailList[i].PercentA > 0 ? detailList[i].DisplayNewPrice(Model.Avarez, Model.Maliyat) : detailList[i].DisplayKalaPrice(Model.Avarez, Model.Maliyat)).ToNumber())</span><span style="margin-right:6px;">ریال</span>
                                                                    </div>
                                                                    if (detailList[i].PercentA > 0)
                                                                    {
                                                                        <div class="product-price-old">
                                                                            <span>@(detailList[i].DisplayKalaPrice(Model.Avarez, Model.Maliyat).ToNumber())</span><span style="margin-right:6px;">ریال</span>
                                                                        </div>
                                                                    }
                                                                }
                                                            }
                                                            else
                                                            {
                                                                <div class="product-price-new">
                                                                    <span style="color:#546E7A!important;">ناموجود</span>
                                                                </div>
                                                            }
                                                        </div>
                                                    </div>
                                                </div>
                                            }
                                            else
                                            {
                                                <div class="col-@(vitrin.Template.Split(',')[i])">
                                                    <div class="product-card product-pic">
                                                        <img src="~/App_Images/index/spec-3.png" />
                                                        @*مثلث سفید*@
                                                        <div class="triangle">
                                                            <div class="triangle-name">@detailList[i].NameGroupkala</div>
                                                            <div class="triangle-button">خرید</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            }
                                        }
                                    }
                                </div>
                            </div>
                        </div>
                    }
                }
            </div>
        }


        @*فرم بررسی سریع محصول*@
        <div class="modal fade" id="quickReview" role="dialog">
            <div class="modal-dialog" style="max-width:800px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <label class="modal-title" style="font-size: 14px; font-weight: bold;">بررسی سریع محصول</label>
                        <button type="button" class="close" data-dismiss="modal">
                            <img src="~/App_Images/index/Close.svg" class="close-svg" />
                        </button>
                    </div>
                    <div class="modal-body no-padding" style="padding-top:25px!important;">
                        <iframe src="" style="border: 0;width: 100%;height:440px;"></iframe>
                    </div>
                </div>
            </div>
        </div>


        @*فرم مشاهده تمام تصاویر*@
        @*این فرم از داخل فرم بررسی سریع محصولات باز میشود*@
        <div class="modal fade" id="showAllPicture" role="dialog">
            <div class="modal-dialog" style="max-width:800px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <label class="modal-title" style="font-size: 14px; font-weight: bold;"></label>
                        <button type="button" class="close btn-close" data-bs-dismiss="modal" data-dismiss="modal">
                            <img src="~/App_Images/index/Close.svg" class="close-svg" />
                        </button>
                    </div>
                    <div class="modal-body" style="padding:25px 0;">
                        <iframe src="" style="border: 0;width: 100%;height: 415px;"></iframe>
                    </div>
                </div>
            </div>
        </div>

    </div>


}
else
{
    <style>
        :root {
            --color1: #FFF7F9;
        }

        .search-slider-wrapper {
            background-color: #FFF7F9;
        }

        .search img {
            position: absolute;
            left: 13px;
            top: calc(50% - 10px);
            z-index: 3;
        }

        .search input {
            border: 1px solid #4b4548;
            background-color: var(--color1);
            position: relative;
            z-index: 3;
        }

            .search input::placeholder {
                font-size: 16px;
                font-weight: 500;
                color: #000;
            }

        #divSearch {
            position: absolute;
            top: 50px;
            box-sizing: content-box;
            right: 2px;
            width: calc(100% - 29px);
            max-height: 380px;
            min-height: 96px;
            overflow: auto;
            border: 1px solid rgb(204, 204, 204);
            background-color: rgb(255, 255, 255);
            z-index: 2;
            padding: 16px 12px;
            box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 0px 0px, rgba(0, 0, 0, 0.24) 0px 2px 2px 0px;
            display: none;
        }

        .slider .swiper-container {
            padding-bottom: 35px;
        }

        .slider .swiper-slide a {
            display: flex;
            justify-content: center;
        }

        .slider .swiper-slide img {
            border-radius: 15px;
            width: 100%;
        }

        .slider .swiper-pagination-bullet-active {
            opacity: 1;
            background: #A022A1;
        }

        .slider .swiper-container-horizontal > .swiper-pagination-bullets,
        .slider .swiper-pagination-custom,
        .slider .swiper-pagination-fraction {
            bottom: 12px !important;
        }


        /* vitrin */
        .vitrin .banner {
            padding: 0 15px;
        }

        .vitrin a {
            text-decoration: none !important;
        }

        .vitrin .banner img {
            width: 100%;
            border-radius: 16px;
        }

        .wrapper-vitrin {
            border-radius: 20px;
            background-color: #fff;
            padding: 18px 18px 18px 0;
        }

        .vitrin h2.title {
            font-size: 16px;
            font-weight: 700;
        }

        .product-list-item {
            display: flex;
            gap: 10px;
            overflow: auto;
        }

            .product-list-item .item {
                min-width: 80vw;
                max-width: 80vw;
                border: 1px solid #CDC4C8;
                border-radius: 16px;
            }

                .product-list-item .item .item-title {
                    font-size: 14px;
                    font-weight: 700;
                    padding: 12px 16px;
                    height: 58px;
                    overflow: hidden;
                    line-height: 22px;
                    padding: 5px 15px;
                }

                .product-list-item .item .item-image {
                    height: 206px;
                    display: flex;
                }

                    .product-list-item .item .item-image img {
                        border-radius: 15px 15px 0 0;
                        width: 100%;
                    }

                .product-list-item .item .item-price-offer {
                    padding: 12px 16px;
                }

                    .product-list-item .item .item-price-offer .price-offer .offer {
                        font-size: 12px;
                        color: #424242;
                        text-decoration: line-through;
                    }

                    .product-list-item .item .item-price-offer .price-offer .price {
                        font-size: 14px;
                        color: #201A1B;
                        font-weight: 700;
                    }

                        .product-list-item .item .item-price-offer .price-offer .price .currency {
                            font-size: 12px;
                            color: #655C5E
                        }

                    .product-list-item .item .item-price-offer .percent {
                        background-color: #A022A1;
                        color: #fff;
                        width: 40px;
                        height: 40px;
                        border-radius: 8px;
                        font-size: 14px;
                    }
    </style>
    <div>
        <div class="container-fluid search-slider-wrapper">
            <div class="search position-relative">
                <input type="text" id="txtSearch" class="w-100 my-3 p-3 rounded-2" placeholder="جستجو" autocomplete="off" />
                <img id="btnSearch" src="~/App_Images/index/search.svg" alt="search" />
                <div id="divSearch">
                    <img id="imgLoad" src="~/App_Images/loading.gif" style="position: absolute;top: 44%;left: 48%;" />
                </div>
            </div>

            @*بنر ابتدای صفحه برای اسلایدشو *@
            @if (Model.SlideShowList.Count > 0)
            {

                <div class="slider">


                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <!-- slide -->

                            @foreach (var banner in Model.SlideShowList)
                            {

                                <div class="swiper-slide" style="width: 100%; height: 100%;">
                                    <a href="@banner.Url" title="@banner.Alt">
                                        <img src="@(banner.BannerImage.ToBase64File())" alt="@banner.Alt" />
                                    </a>
                                </div>

                            }

                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination"></div>
                    </div>




                </div>

            }
        </div>


        @*ویترین و یا بنر وسط صفحه*@
        @if (Model.VitrinList.Count > 0)
        {
            <div class="vitrin">
                @foreach (var vitrin in Model.VitrinList)
                {
                    if (vitrin.BannerCode > 0)
                    {
                        <div class="banner">
                            <a href="@vitrin.VitrinUrl">
                                <img class="img-fluid" src="@vitrin.BannerImage.ToBase64File()" alt="@vitrin.VitrinName" />
                            </a>
                        </div>
                    }
                    else
                    {


                        var detailList = Model.VitrinDetailList.Where(x => x.CodeVitrin == vitrin.VitrinCode).Take(vitrin.ShowCount).ToList();

                        <div class="wrapper-vitrin">
                            <h2 class="title">@vitrin.VitrinName</h2>
                            <div class="product-list-item">

                                @for (var i = 0; i < detailList.Count; i++)
                                {
                                    if (i < vitrin.Template.Split(',').Length && i < vitrin.ShowCount)
                                    {
                                        if (detailList[i].CodeKala > 0)
                                        {

                                            <div class="item" data-id="@detailList[i].CodeKala">
                                                <a href="@Html.GetHref("Home/ShowDetails?id=" + detailList[i].CodeKala + "&part=" + detailList[i].CodePartProperty)">
                                                    <div class="item-image">
                                                        <img src="@detailList[i].PicThumb.ToBase64File()" alt="@detailList[i].NameKala" />
                                                    </div>
                                                    <h2 class="item-title">@detailList[i].NameKala</h2>
                                                    <div class="item-price-offer d-flex justify-content-between align-items-center">
                                                        @if (detailList[i].Mojodi > 0)
                                                        {
                                                            if (detailList[i].DisplayKalaPrice(Model.Avarez, Model.Maliyat) == 0)
                                                            {
                                                                <div class="price-offer">
                                                                    <div class="price">تماس بگیرید</div>
                                                                </div>
                                                            }
                                                            else
                                                            {
                                                                <div class="price-offer">
                                                                    @if (detailList[i].PercentA > 0)
                                                                    {
                                                                        <div class="offer">@(detailList[i].DisplayKalaPrice(Model.Avarez, Model.Maliyat).ToNumber())</div>
                                                                    }
                                                                    <div class="price">@((detailList[i].PercentA > 0 ? detailList[i].DisplayNewPrice(Model.Avarez, Model.Maliyat) : detailList[i].DisplayKalaPrice(Model.Avarez, Model.Maliyat)).ToNumber()) <span class="currency">ریال</span></div>
                                                                </div>

                                                            }

                                                        }
                                                        else
                                                        {
                                                            <div class="price-offer">
                                                                <div class="price">ناموجود</div>
                                                            </div>
                                                        }

                                                        @*تخفیف*@
                                                        @if ((detailList[i].PercentA > 0) && (detailList[i].Mojodi > 0) && (detailList[i].DisplayKalaPrice(Model.Avarez, Model.Maliyat) > 0))
                                                        {
                                                            <div class="percent d-flex align-items-center justify-content-center">@(detailList[i].PercentA)%</div>
                                                        }


                                                    </div>
                                                </a>
                                            </div>
                                        }
                                    }

                                }


                                @*<div class="item">
                                    <div class="item-image">
                                        <img src="~/App_Images/index/image2.jpg" alt="image" />
                                    </div>
                                    <h2 class="item-title">نام محصول که ممکن است تا دو خط هم بشود که مشکلی نیست</h2>
                                    <div class="item-price-offer d-flex justify-content-between align-items-center">
                                        <div class="price-offer">
                                            <div class="offer">2525555</div>
                                            <div class="price">2525555</div>
                                        </div>
                                        <div class="percent d-flex align-items-center justify-content-center">25%</div>
                                    </div>
                                </div>*@





                            </div>
                        </div>
                    }
                }
            </div>
        }
    </div>

}
@section scripts{
    <script src="~/App_Scripts/app/swiper.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            autoplay: '3000'
        });

        $(".product-pic-details .quick-review").on("click", function () {
            const url = baseUrl + "Home/QuickReview?id=" + $(this).closest(".product-card").attr("data-id") + "&part=" + $(this).attr("data-id");
            $('#quickReview iframe').attr("src", url);
            $('#quickReview').modal('show');
        });

        $("#quickReview").on("hidden.bs.modal", function () {
            $('#quickReview iframe').attr("src", "");
        });
    </script>
}
