@extends('home.layouts.index')

@section('title')
    {{  'محصولات' }}
@endsection



@section('style')
    <link rel="stylesheet" type="text/css" href="{{asset('home/css/slider-price.css')}}">
   <style>
       .product .btn-cart-add{
        border-radius: 0;
        border-color:#6ee9e6;
        background-color:#6ee9e6;
        color:#000 !important;
        padding:5px 10px;
    }
    .product .btn-cart-add:hover{
        background-color:#f5f1a0;
             border-color:#f5f1a0;
    }
   .product{
       margin: 10px 1.5%;
   }
   @media (min-width: 576px) {
    .cols-sm-3 > * {
        max-width: 30.3333% !important;
        flex: 0 0 30.3333% !important;
    }
}
.product-name{
      text-align:center;
      min-height: 60px;
}

.cursor-pointer{
    cursor:pointer;
}
.page-content {
    background:#f8f8f8;
}
#post-data > .product{
    background:#fff !important;
}
.sidebar-content{
      background-color:#f8f8f8 !important;
}
.product-name a {
    font-size: 25px;
 
    color: #000;
}
.card-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.product-brand {
    width: 37% !important;
}
       .filter-items .active > label:before {
           content: "";
           color: #fff;
           background-color: #222;
           border-color: #222;
       }
       .ht-btn{
           font-family: shabnam;
           margin-top: 20px;
       }
           .product_attribute_icon{
        width:17px;
    }
        /* .product{*/
        /*    animation: loadproduct .6s linear 1;*/

        /*}*/
        /*@keyframes loadproduct {*/
        /*from{*/
        /*    transform: scale(0);*/
        /*}*/
        /*    to{*/
        /*        transform: scale(1);*/
        /*    }*/
        /*}*/
        .category-text-mobile {
            display: none;
            margin-bottom: 0 !important;
        }

        @media screen and (max-width: 610px) {
            .category-text-mobile {
                display: inline-block;
            }


        }

        h3 > span {
            margin-right: 18px;
        }

        #load-more {
            display: none;
            width: 80px;
            height: 80px;
            margin: 8px;
            border-radius: 50%;
            border: 6px solid orange;
            border-right: 6px solid transparent;
            animation: load-more 1.5s linear infinite;
        }

        .load-more-parent {
            width: 100%;
            display: none;

            text-align: center;;
        }

        @keyframes load-more {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .bg-header-filter {
            background-color: #cbe5f1;
            margin-top: 10px !important;
            border-radius: 5px;
        }

        @media screen and (max-width: 992px) {
            .banner-title {
                font-size: 1.5rem !important;
            }

            .map-link-back {
                margin-top: 15px;
                margin-bottom: 15px;
            }

        }

        .btn-clear-filter {
            width: 100%;
            margin-top: 35px;
            color: white;
            border: none;
            border-radius: 11px;
            padding: 10px;
            background: #4e4e4e;
            text-align: center;
            cursor: pointer;
        }

        .active-arrow {
            transform: rotate(-90deg);
        }

        .map-link {
            font-size: 12px;
            font-weight: bold;
            color: #4e4e4e;
        }

        .map-link:hover {
            font-size: 12px;
            font-weight: bold;
            color: #a52ab8;
        }

        .map-link-img {
            width: 7px;
            height: 7px;
        }

        .widget-title-arrow i {
            left: 10px;
            position: absolute;
            transition: all .3s ease;

        }

        .btn-filter {
            margin-left: 10px;
            border-radius: 10px;
            padding: 5px 12px;
            font-size: 13px;
            border: 1px solid #a52ab8;
            color: #000;
            cursor: pointer;
        }

        .btn-filter:hover {
            color: #fff;
            background-color: #4e4e4e;
        }

        .btn-filter-selected {
            color: #fff;
            background-color: #a52ab8;
        }

        @media screen and (max-width: 800px) {
            .display-none-mobile {
                display: none !important;
            }
        }

        .modal-filter {
            background-color: rgba(0, 0, 0, .6);
            z-index: 999;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            display: none;
            right: 0;
            width: 100%;
            height: 100vh;

        }
        .list-unstyled {
    padding-left: 0;
    list-style: none;
}
.product__image img {
    height: auto;
}
.product__image {
    text-align: center;
    position: relative;
}
.product__image {
    display: flex;
    justify-content: center;
}
        #products > ul > li> .product {
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    overflow: hidden;
    padding-top: 20px;
    height: 100%;
}

        .modal-filter-box {
            background-color: #fff;
            position: absolute;

            top: 0;
            transition: all ease .6s;
            width: 280px;
            margin-right: 50px;
            border-radius: 4px;
            padding: 10px;
            left: 0;
            transform: translate(25%, 50%);
        }

        .box-radio {
            display: flex;

        }

        .box-radio label {
            font-size: 18px !important;
            order: 2;
            margin-right: 10px;
        }

        @media only screen and (max-width: 996px)
        .header-middle {
            position: sticky;
            top: 40px;
            z-index: 999 !important;
        }

        .sidebar-close {
            border: 2px solid #fff;
            border-radius: 50%;
            padding: 5px;
        }
        .filter-items label{
            display: block;
            position: relative;
        }
        .header-transparent{
            position: static !important;
            background-color: #222;
        }

        .filter-items label:before {
            content: "";
            position: absolute;
            border: 1px solid #999;
            width: 18px;
            height: 18px;
            border-radius: 2px;
            top: 50%;
            transform: translateY(-50%);
            left: -2.7rem;
            font-size: 0.7em;
            font-weight: 900;
            font-family: "Font Awesome 5 Free";
            text-align: center;
            text-indent: 1px;
            line-height: 1.7em;
        }
        
         @media screen and (min-width: 1360px) {
            #products>ul>li {
                padding-left: 10px;
                padding-right: 10px;
                -webkit-box-flex: 0;
                -ms-flex: 0 0 20%;
                flex: 0 0 20%;
                max-width: 20%;
                margin-bottom: 20px;
            }
        }

        #products>ul>li .product, #category_page .category_page--content, #category_page .category_page--sidebar .sidebar {
            border-radius: 10px;
        }
        #products>ul>li {
            padding-left: 10px;
            padding-right: 10px;
            -webkit-box-flex: 0;
            -ms-flex: 0 0 33.33%;
            flex: 0 0 33.33%;
            max-width: 33.33%;
            margin-bottom: 20px;
        }
        @media screen and (min-width: 1200px) {
            #products>ul>li {
                padding-left: 10px;
                padding-right: 10px;
                -webkit-box-flex: 0;
                -ms-flex: 0 0 20%;
                flex: 0 0 20%;
                max-width: 20%;
                margin-bottom: 20px;
            }
        }
        #products>ul>li .product {
            overflow: hidden;
            padding-left: 0;
            padding-right: 0;
            padding-top: 20px;
        }

        #products>ul {
            display: -webkit-box;
            display: -moz-flex;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            margin-left: -10px;
            margin-right: -10px;
        }
        #products>ul>li .product, #category_page .category_page--content, #category_page .category_page--sidebar .sidebar {
            border-radius: 10px;
        }
        @media screen and (max-width: 480px) {
            #products > ul > li {
                -webkit-box-flex: 0;
                -ms-flex: 0 0 100%;
                flex: 0 0 100%;
                max-width: 100%;
            }
        }
            @media only screen and (max-width: 767px) {
                #products>ul>li .product {
                    flex-direction: row;
                    border-top: none;
                    border-right: none;
                    border-left: none;
                    border-radius: 0;
                    padding-top: 0;
                }
            }

            @media only screen and (max-width: 767px) {
                #products>ul>li .product .compareColor {
                    top: auto;
                    bottom: 10px;
                    right: 0;
                    left: auto;
                }
            }
            @media only screen and (max-width: 767px) {
                #products>ul>li .product .product__image {
                    flex: 1 0 129px;
                    padding-bottom: 30px;
                }
            }

            @media only screen and (max-width: 767px) {
                #products>ul>li .product .product__wrapper {
                    padding-right: 4px;
                    /*flex: unset;*/
                }
            }

            @media only screen and (max-width: 767px) {
                #products>ul>li .product .product__name {
                    padding: 0;
                    font-size: 18px;
                    line-height: 20px;
                    margin-top: 0px;
                    height: 40px;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-align: center;
                }
            }

            @media only screen and (max-width: 767px) {
                #products>ul>li .product .product__offer {
                    text-align: right;
                    display: flex;
                    flex-direction: row;
                    align-items: flex-start;
                    flex-wrap: wrap;
                }
            }

            @media only screen and (max-width: 767px) {
                #products>ul>li .product .superSale.superSale2 {
                    display: none !important;
                }
            }

            @media screen and (max-width: 991px) {
                .superSale>span {
                    color: #fff;
                    font-size: 11px;
                }
            }
            @media screen and (max-width: 991px) {
                .superSale>span {
                    padding: 5px;
                }
            }

            @media only screen and (max-width: 767px) {
                #products>ul>li .product .product__offer--new {
                    text-align: center;
                    width: 100%;
                    color:#000;
                    line-height: 20px;
                    order: 1;
                    margin-top: 5px;
                }
            }

            @media only screen and (max-width: 767px) {
                #products>ul>li .product .compareColor ul {
                    width: 100px;
                    display: flex;
                    line-height: 0;
                    justify-content: center;
                }
            }
            @media only screen and (max-width: 767px) {
                #products>ul>li .product .compareColor ul li {
                    padding-left: 2px;
                    padding-right: 2px;
                }
            }

            @media screen and (max-width: 991px) {
                .superSale {
                    min-height: 30px;
                }
                .superSale>ul{
                    padding-top:5px;
                    padding-bottom:5px;
                }
            }

            @media only screen and (max-width: 767px) {
                #products>ul>li .product .product__image {
                    flex: 1 0 100px;
                    padding-bottom: 30px;
                }
            }

            @media only screen and (max-width: 767px) {
                #products>ul>li .product .compareColor ul {
                    width: 100px;
                    display: flex;
                    line-height: 0;
                    justify-content: center;
                }
            }
            @media only screen and (max-width: 767px) {
                #products>ul>li .product .product__name {
                    padding: 0 !important;
                    font-size: 14px !important;
                    color:#000;
                    line-height: 20px !important;
                    margin-top: 0px !important;
                    height: 40px !important;
                    display: -webkit-box !important;
                    -webkit-line-clamp: 2 !important;
                    -webkit-box-orient: vertical !important;
                    overflow: hidden !important;
                    text-align: right !important;
                }
            }
@media only screen and (max-width: 767px) {
    .product__image:before{
        display:none !important;
    }
    #products>ul>li .product .product__offer--offer {
        border-radius: 5px !important;
        position: absolute !important;
        top: 5px !important;
        right: 5px !important;
        margin: 0 !important;
        font-size: 11px !important;
        width: 30px !important;
        height: 15px !important;
        line-height: 15px !important;
    }
}


@media only screen and (max-width: 767px) {
    #products>ul>li .product .product__wrapper {
        padding-right: 4px !important;
        /*flex: unset !important;*/
    }
    #products>ul>li .product{
        padding-bottom:7px !important;
    }
}
@media only screen and (max-width: 767px) {
    #products>ul>li .product .product__image {
        flex: 1 0 129px !important;
        padding-bottom: 30px !important;
    }
}

@media screen and (max-width: 991px) {
    .superSale {
        min-height: 30px !important;
    }
}
@media screen and (max-width: 480px) {
    #products > ul > li {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}
#products > ul > li> .product{
    display:flex;
}
.product__wrapper{
        display: flex;
    flex-direction: column;
    justify-content: space-around;
}
     @media (min-width: 768px) {
            .d-md-none {
                display: none !important;
            }
        }
        @media (min-width: 768px) {
            .d-md-block {
                display: block !important;
            }
        }
         @media (min-width: 768px) {
            .d-md-flex {
                display: flex !important;
            }
        }
    </style>
@endsection

@section('script')
    <script src="{{asset('home/js/slider-price.js')}}"></script>

    <script>
        function number_format (number, decimals, dec_point, thousands_sep) {
            // Strip all characters but numerical ones.
            number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
            var n = !isFinite(+number) ? 0 : +number,
                prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
                sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
                dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
                s = '',
                toFixedFix = function (n, prec) {
                    var k = Math.pow(10, prec);
                    return '' + Math.round(n * k) / k;
                };
            // Fix for IE parseFloat(0.55).toFixed(0) = 0;
            s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
            if (s[0].length > 3) {
                s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
            }
            if ((s[1] || '').length < prec) {
                s[1] = s[1] || '';
                s[1] += new Array(prec - s[1].length + 1).join('0');
            }
            return s.join(dec);
        }

        $('#btn-modal-filter').click(function () {
            $('.modal-filter').fadeToggle();
        })
        $('#btn-close-modal').click(function () {
            $('.modal-filter').fadeOut();
        })
        var total = {{ $products->lastPage() }};
        var current_page = 1;
        $('.btn-clear-filter').click(function () {
            window.location.reload();
        })


        // Price slider Active
        // ----------------------------------*/
        $('#price-range').slider({
            range: true,
            step: 10000,
            min: {{ $cheapest_product }},
            max: {{ $expensive_product }},
            values: [{{ $min_price }}, {{ $max_price }}],
            slide: function (event, ui) {

                $('#price-amount').val(number_format(ui.values[1]) + ' تومان ' + ' - ' + number_format(ui.values[0]) + '  تومان ');
            }
        });

        $('#price-amount').val('{{ number_format($max_price) }}' + ' تومان ' + ' - ' +
            '{{ number_format($min_price) }}' + '  تومان ');


        function change_sort(sort_id) {
            $('#sort_input').val(sort_id)
            filter_products();
        }
 function filter_products(sort_id = null, tag = null,input=null) {

            let attribute_values = [];
            let page = 1;
            if (sort_id!=null){
                $('#sort_input').val(sort_id)
            }

            if (input!=null){
                console.log($(input));
                console.log($(input).parent().parent());
                $(input).parent().parent().toggleClass('active');
            }

            let sort = $('#sort_input').val();
            if (tag != null) {



                $('.btn-filter').removeClass('btn-filter-selected');
                $(tag).addClass('btn-filter-selected');
            }
            let price_amount = $('#price-amount').val();
            price_amount = price_amount.replaceAll(',', '');
            price_amount = price_amount.replaceAll('تومان', '');
            price_amount = price_amount.replaceAll(' ', '');
            $('#price_range_filter').val(price_amount);
            $.each($('.attr_filter_ids:checked'), function () {
                attribute_values.push($(this).val());
            });

            $.ajax({
                url: "{{ route('home.product_attributes',['value'=>$value->id]) }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    attribute_values: attribute_values,
                    sort: sort,
                    price_amount: price_amount,
                    page: page,
                },
                dataType: "json",
                type: 'get',
                beforeSend: function () {

                },
                success: function (msg) {
                    if (msg[0] === 1) {
                        $('#post-data').html(msg[1]);
                        total = msg[2];
                        current_page = 1;
                        $('.modal-filter').fadeOut();
                    }
                }
            })

            // $('#orderby').val(sort);

            // $('#filter_products').submit();
        }

      

        // $('.open_page_description').click(function () {
        //     let is_open = $(this).attr('data-open');
        //     let button_html = '';
        //     if (is_open === 'no') {
        //         button_html = `نمایش کمتر
        //             <i class="fa fa-angle-up ml-3"></i>`;
        //         $(this).parent().removeClass('page_description');
        //         $(this).parent().addClass('page_description2');
        //         $(this).attr('data-open', 'yes');
        //     } else {
        //         button_html = `نمایش بیشتر
        //             <i class="fa fa-angle-down ml-3"></i>`;
        //         $(this).parent().removeClass('page_description2');
        //         $(this).parent().addClass('page_description');
        //         $(this).attr('data-open', 'no');
        //     }
        //     $(this).html(button_html);
        // })

        function slideToggleChildren(attr_id, tag) {
            $('#children_attr_' + attr_id).slideToggle();
            $(tag).find('i').toggleClass('active-arrow');
        }



    </script>
@endsection

@section('content')
    <main class="main">
      

        <div class="page-content mb-10 pb-6">
            <div class="container">
                <div class="row gutter-lg main-content-wrap">
                    <aside class="col-lg-3 sidebar sidebar-fixed sidebar-toggle-remain shop-sidebar sticky-sidebar-wrapper">
                        <div class="sidebar-overlay"></div>
                        <a class="sidebar-close" href="#"><i class="d-icon-times"></i></a>
                        <a href="#" class="sidebar-toggle">
                            <i class="fas fa-chevron-right"></i>
                        </a>
                        <div class="sidebar-content">
                            <div class="sticky-sidebar" data-sticky-options="{'top': 10}">
                               
                                <div class="widget widget-collapsible">
                                    <h3 class="widget-title">محدوده قیمت</h3>
                                    <div class="widget-body mt-3">
                                        <div class="sidebar-price">
                                            <div id="price-range" class="mb-20"></div>

                                            <input type="text" id="price-amount" class="price-amount w-100 mt-3 text-center" readonly="">
                                            <input type="hidden" id="min-price">
                                            <input type="hidden" id="max-price">


                                            <button onclick="filter_products()" type="button"
                                                    class="mt-5 btn-gold d-block w-100 btn small-btn">
                                                فیلتر
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                @foreach($attributes as $attribute)
                                <div class="widget widget-collapsible">
                                    <h3 class="widget-title  collapsed">{{ $attribute->name }}</h3>
                                    <ul style="display: none" id="children_attr_{{ $attribute->id }}" class="widget-body filter-items">
                                        @foreach($attribute->AttributeValues()->orderby('priority_show','asc')->whereIn('id',$all_attribute_value_exists_ids)->get() as $attrValue)
                                        <li>

                                   <label  for="attr_filter_{{ $attrValue->id }}">
                                       <input autocomplete="off" id="attr_filter_{{ $attrValue->id }}"
                                              onclick="filter_products(null,null,this)"
                                              type="checkbox" name="attr_filter_ids[]"
                                              class="attr_filter_ids"
                                              value="{{ $attrValue->id }}">
                                       {{ $attrValue->name }}
                                   </label>
                                        </li>
                                        @endforeach
                                    </ul>
                                </div>
                                @endforeach

                            </div>
                        </div>
                    </aside>
                    <div class="col-lg-9 main-content">
                        <nav class="toolbox  sticky-toolbox sticky-content fix-top">
                            <div class="toolbox-left">
                                <div class="toolbox-item toolbox-sort select-box text-dark">
                                    <label>  ترتیب نمایش:



                                    </label>
                                    <select  class="form-control">
                                        <option {{ $sort == 0 ? 'selected' : '' }} data-sort="0" onclick="filter_products(0,this)" value="default">پیش فرض</option>
                                        <option data-sort="5" onclick="filter_products(5,this)">پر فروش ترین</option>
                                        <option data-sort="4" onclick="filter_products(4,this)">ارزان ترین</option>
                                        <option data-sort="3" onclick="filter_products(3,this)">گران ترین</option>
                                        <option data-sort="1" onclick="filter_products(1,this)">جدید ترین</option>
                                        <option data-sort="2" onclick="filter_products(2,this)">قدیمی ترین</option>
                                    </select>
                                </div>
                            </div>

                        </nav>
                        <div id="post-data" class="row cols-2 cols-sm-3 product-wrapper d-md-flex d-none">
                            @include('home.sections.product_box')
                        </div>
                                            <div class="d-md-none d-block" id="products">
                                                <ul  class="list-unstyled">


                                                    @foreach($products as $product)
                                                        <li class="product-scroll">
                                                            <div class="product row  ">

 
<div class="col-12 row">
        @if(count($product->ProductAttributeVariation($product->id))>0)
    <div class="compareColor">
        <ul class="list-unstyled">
            @foreach($product->ProductAttributeVariation($product->id) as $variation)
                @if($variation->quantity > 0)
            <li>
                <img  class="img-variations"
                      src="{{ imageExist(env('ATTR_UPLOAD_PATH'),$variation->Color->image) }}">
            </li>
            
                @endif
            @endforeach
        </ul>
    </div>
    @endif
    <a href="{{ route('home.product',['alias'=>$product->alias]) }}" class="product__image col-5">
        <img class="lazyLoad fadeLazy" data-lazy="{{ imageExist(env('PRODUCT_IMAGES_THUMBNAIL_UPLOAD_PATH'),$product->primary_image) }}" alt="{{$product->name}}" title="{{$product->name}}" src="{{ imageExist(env('PRODUCT_IMAGES_THUMBNAIL_UPLOAD_PATH'),$product->primary_image) }}">

    </a>
    <div class="product__wrapper col-7">
        <a href="{{ route('home.product',['alias'=>$product->alias]) }}" class="product__name">

            {{$product->name}}
           </a>
           
           <div>
               {!! $product->shortDescription!!}
           </div>

        <!--price code-->
    
         
        
   
            <!--<a href="{{ route('home.product',['alias'=>$product->alias]) }}" class="superSale superSale2">-->
            <!--    <span>مشاهده بیشتر</span>-->
            <!--</a>-->
      
    </div>
</div>
    
    <div class="col-12 row">
                <div class="col-5">
    <a style="padding: 5px 10px !important;font-size:1.1rem" onclick="AddToCart({{ $product->id }},1,0)" class="btn d-inline p-0 btn-primary">
        افزودن به سبد خرید
    </a>
</div>
           <div class="product__price product__offer col-7">
                <div class="product__offer--new">
                    {{ number_format(round(product_price($product->id)[2],-1)) }}           <span>تومان</span>
                </div>
                @if(product_price($product->id)[1]!=0)
                    <s class="product__offer--old">
                        {{ number_format(product_price($product->id)[0]) }}

                    </s>
                @endif



                @if(product_price($product->id)[1]!=0)
                <span class="product__offer--offer">
                <span>{{ number_format(product_price_for_user_normal($product->id)[1]).'%' }}</span>

            </span>
                    @endif

            </div>

    </div>
</div>
                                                        </li>
                                                    @endforeach






                                                </ul>
                                            </div>
                        <div class="text-center d-flex justify-content-center mt-3 mb-3  pt--20">
                            <div id="load-more" style="cursor: pointer"
                                 class="axil-btn btn-bg-lighter btn-load-more"></div>
                        </div>
                        <div class="text-center  pt--20 mt-3 mb-3 load-more-parent">
                            محصول دیگری وجود ندارد
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </main>
    <input type="hidden" id="sort_input" value="0">
    <!-- End of Main -->
@endsection