@extends('home.layouts.index')

@section('title')
    {{$category->name}}
@endsection

@section('keywords')
    {{
   $category->meta_keyword }}
@endsection

@section('description')

    {{
 $category->meta_description}}
@endsection

@section('style')
<style>
      #btn-filter{
        height: 37px;
        width: 128px;
        margin-bottom:20px;

    }
    #btn-filter span{
        height: 37px;
        width: 128px;
        font-size: 16px;
    }
    #btn-filter i{
        font-size: 13px;
        margin-left: 10px;
    }
        .axil-shop-sidebar{
        padding-right: 0;
        position: fixed;
        top: 0;
        bottom: 0;
        right: -420px;
        width: 400px;
        background-color: var(--color-white);
        z-index: 100;
        padding: 100px 20px 50px;
        overflow-y: auto;
        overflow-x: hidden;
        transition: all .4s ease-in-out;
    }
    @media screen and (max-width: 840px){
        .axil-shop-sidebar{
            right: -300px;
            width: 280px;
        }
    }
      @media screen and (max-width: 768px){
        #btn-filter{
         
            width: 100%;
        }
    }
    .open{
        right: 0;
    }
@media screen and (min-width:996px){
    .axil-shop-sidebar{
width: 330px;
}
}
.page_description {
    background: #efefef;
    border-radius:3px;
    padding: 30px;
    height:300px;
color:#000;
    overflow: hidden;
    position: relative;
    transition: all ease 3s;
}
.page_description:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(transparent 150px, white);
}
.page_description2 {
    
    background: #efefef;
    padding: 30px;
       border-radius:3px;
    height: auto;
    overflow: hidden;
    position: relative;
    transition: all ease 3s;
}
</style>
@endsection

@section('script')

    <script>
       $('.btn-clear-filter').click(function (){
            window.location.reload();
        })
    $('.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);
    })
        var total={{ $products->lastPage() }};
        var current_page=1;
        $('#slider-range').slider({
            range: true,
            step: 10000,
            min: {{ $cheapest_product }},
            max: {{ $expensive_product }},
            values: [{{ $min_price }}, {{ $max_price }}],
            slide: function (event, ui) {
                $('#amount').val(ui.values[1] + ' تومان ' + ' - ' + ui.values[0] + '  تومان ');
            }
        });
        $('#amount').val('{{ number_format($max_price) }}' + ' تومان ' + ' - ' +
            '{{ number_format($min_price) }}' + '  تومان ');

        {{--$('#slider-range').slider({--}}
        {{--    range: true,--}}
        {{--    min: {{ $cheapest_product }},--}}
        {{--    max: {{ $expensive_product }},--}}
        {{--    values: [{{ $min_price }}, {{ $max_price }}],--}}
        {{--    slide: function(event, ui) {--}}
        {{--        $('#amount').val('تومان' + number_format(ui.values[0]) + '  تومان' + number_format(ui.values[1]));--}}
        {{--    }--}}
        {{--});--}}
        {{--$('#amount').val('تومان' + $('#slider-range').slider('values', 0) +--}}
        {{--    '  تومان' + $('#slider-range').slider('values', 1));--}}

        function filter_products() {
            let page=1;
            let attribute_values = [];
                      let instock=0;
            let has_quantity = $('input[name="instock"]:checked').val();
            if (has_quantity==1){
                instock=1;
            }
            let sort = $('#sort_products').val();
            // let price_amount = $('#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_categories',['category'=>$category->alias]) }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    attribute_values: attribute_values,
                    sort: sort,
                      instock:instock,
                    // 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;
                        $('#load-more').text('محصولات بیشتر') 
                        $('.axil-shop-sidebar').removeClass('open');
                    }
                }
            })

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

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

        function loadMoreData(current_page) {
            console.log(current_page)
            console.log(total)
           if(current_page>total){
               $('#load-more').text('محصول دیگری وجود ندارد') ;
           }else {
               let attribute_values = [];
                           let instock=0;
            let has_quantity = $('input[name="instock"]:checked').val();
            if (has_quantity==1){
                instock=1;
            }
         
               let sort = $('#sort_products').val();
            //   let price_amount = $('#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_categories',['category'=>$category->alias]) }}",
                       type: "get",
                       data: {
                           attribute_values: attribute_values,
                           sort: sort,
                             instock:instock,
                        //   price_amount: price_amount,
                           page: current_page,
                       },
                   })
                   .done(function (data) {

                       if (data[1] == "") {
                           $('#load-more').text('محصول دیگری وجود ندارد') ;
                           console.log('44444444444')


                       } else {

                           console.log(data)
                           $("#post-data").html(data[1]);
                           if(current_page==total){
                               $('#load-more').text('محصول دیگری وجود ندارد') ;
                           }
                       }


                   })
                   .fail(function (response) {
                       alert(ENDPOINT + '?page=' + page);
                   });
           }
        }

        $('#load-more').click(function () {
            current_page++;
            loadMoreData(current_page);
        })
          $('#btn-filter').click(function (){
            $('.axil-shop-sidebar').addClass('open');

        })
        $('.filter-close-btn').click(function (){
            $('.axil-shop-sidebar').removeClass('open');
        })


    </script>
@endsection

@section('content')
    <main class="main rtl text-right">
        <div class="container section-main">
            <ul class="breadcrumb default-breadcrumb">
                <li><a href="index-2.html"><i class="fa-light fa-home"></i></a></li>
                <li><a href="template-pages.html">صفحات قالب</a></li>
                <li>فروشگاه - گریدی ( تخفیف دار )</li>
            </ul>
        </div>
        <div class="page-content">
            <div class="container section-main">
                <div class="toolbox-wrap">
                    <aside class="sidebar sidebar-fixed shop-sidebar closed">
                        <div class="sidebar-overlay"></div>
                        <a class="sidebar-close" href="#">
                            <i class="fa-solid fa-xmark"></i>
                        </a>
                        <div class="sidebar-content">
                            <div class="mb-0 mb-lg-4">
                                <div class="filter-actions align-items-center">
                                    <a href="#" class="sidebar-toggle-btn toggle-remain btn btn-sm btn-outline btn-rounded btn-primary">فیلتر<i class="fa-solid fa-chevrons-left"></i></a>
                                </div>
                                <div class="row cols-lg-4 widget-filter-wrap">
                                    <div class="widget widget-filter">
                                        <h3 class="widget-title">سایز</h3>
                                        <ul class="widget-body filter-items">
                                            <li><a href="#">خیلی بزرگ</a></li>
                                            <li><a href="#">بزرگ</a></li>
                                            <li><a href="#">متوسط</a></li>
                                            <li><a href="#">کوچک</a></li>
                                        </ul>
                                    </div>
                                    <div class="widget widget-filter">
                                        <h3 class="widget-title">رنگ</h3>
                                        <ul class="widget-body filter-items">
                                            <li><a href="#">سیاه</a></li>
                                            <li><a href="#">آبی</a></li>
                                            <li><a href="#">قهو ه ای</a></li>
                                            <li><a href="#">سبز</a></li>
                                        </ul>
                                    </div>
                                    <div class="widget widget-filter price-with-count">
                                        <h3 class="widget-title">قیمت</h3>
                                        <ul class="widget-body filter-items filter-price">
                                            <li class="active"><a href="#">همه </a><span>(10)</span></li>
                                            <li><a href="#"> 1،800،000 تومان  -  2,800,000 تومان </a><span>(1)</span></li>
                                            <li><a href="#"> 2,800,000 تومان  -  3،800،000 تومان  </a><span>(9)</span></li>
                                            <li><a href="#"> بالای 3,800,000</a><span>(3)</span></li>
                                        </ul>
                                    </div>
                                    <div class="widget widget-filter">
                                        <h3 class="widget-title">برچسب ها</h3>
                                        <div class="widget-body pt-2">
                                            <a href="#" class="tag">کیف</a>
                                            <a href="#" class="tag">کلاسیک</a>
                                            <a href="#" class="tag">مکالمه</a>
                                            <a href="#" class="tag"> تناسب</a>
                                            <a href="#" class="tag">سبز</a>
                                            <a href="#" class="tag">جک و جونز</a>
                                            <a href="#" class="tag">شلوار جین</a>
                                            <a href="#" class="tag"> جامپر</a>
                                            <a href="#" class="tag">چرم</a>
                                            <a href="#" class="tag">دیزل</a>
                                            <a href="#" class="tag">مردانه</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </aside>
                    <div class="toolbox sticky-toolbox sticky-content fix-top rtl">
                        <div class="toolbox-right">
                            <a href="#" class="toolbox-item left-sidebar-toggle btn btn-outline btn-rounded btn-icon-left font-primary"><i class="d-icon-filter-2"></i>فیلتر</a>
                        </div>
                        <div class="toolbox-left">
                            <div class="toolbox-item toolbox-sort select-box text-dark">
                                <label>مرتب شود با  :</label>
                                <select name="orderby" class="form-control">
                                    <option value="default">پیش فرض</option>
                                    <option value="popularity" selected="selected">محبوبترین</option>
                                    <option value="rating">میانگین امتیاز</option>
                                    <option value="date">ترندها</option>
                                    <option value="price-low">کمترین قیمت</option>
                                    <option value="price-high">بیشترین قیمت</option>
                                    <option value="">پاک کردن</option>
                                </select>
                            </div>
                            <div class="toolbox-item toolbox-layout ">
                                <a href="shop-list.html" class="d-icon-mode-list btn-layout"></a>
                                <a href="shop-grid.html" class="d-icon-mode-grid btn-layout active"></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row cols-1 cols-xs-2 cols-sm-2 cols-md-3 cols-lg-4 product-wrapper">
                    <div class="product-wrap">
                        <div class="product">
                            <div class="product-label-group">
                                <label class="product-label label-discount">%30</label>
                            </div>
                            <div class="product-header">
                                <h3 class="product-name">
                                    <a href="product.html">نایک ایر مکس SC</a>
                                </h3>
                                <div class="product-cat">
                                    <a href="shop-grid.html">کفش ورزشی / مخصوص دویدن‌ /  زنانه</a>
                                </div>
                            </div>
                            <figure class="product-media">
                                <a href="product.html">
                                    <img src="images/shop/1.jpg" alt="product" width="300" height="200">
                                </a>
                            </figure>
                            <div class="product-details rtl">
                                <div class="ratings-container">
                                    <div class="ratings-full">
                                        <span class="ratings" style="width:100%"></span>
                                        <span class="tooltiptext tooltip-top"></span>
                                    </div>
                                    <a href="product.html" class="rating-reviews">( از 16نظر )</a>
                                </div>
                                <ul>
                                    <li>رنگ : آبی / قرمز / سیاه / سفیدا </li>
                                    <li>سبک: HM9452-001</li>
                                    <li>کشور سازنده: اندونزی</li>
                                </ul>
                                <div class="product-price">
                                    <div class="header-price">
                                        <del class="old-price"> 1,200,000 تومان </del><ins class="new-price"> 800,000 تومان </ins>
                                    </div>
                                    <div class="product-action-vertical">
                                        <a href="#" class="btn-product-icon btn-cart" data-toggle="modal"
                                           data-target="#addCartModal" title="اضافه به خرید">
                                            <i class="fa-light fa-basket-shopping"></i>
                                        </a>
                                        <a href="#" class="btn-product-icon btn-wishlist" title=" علاقه ها">
                                            <i class="fa-light fa-heart"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="product-action">
                                    <a href="#" class="btn-product btn-gradient btn-quickview" title="نمایش ">
                                        نمایش
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="product-wrap">
                        <div class="product">
                            <div class="product-label-group">
                                <label class="product-label label-discount">%30</label>
                            </div>
                            <div class="product-header">
                                <h3 class="product-name">
                                    <a href="product.html">نایک فری متکون 6</a>
                                </h3>
                                <div class="product-cat">
                                    <a href="shop-grid.html">کفش ورزشی / تمرینی‌ /  تمرینات داینامیک</a>
                                </div>
                            </div>
                            <figure class="product-media">
                                <a href="product.html">
                                    <img src="images/shop/2.jpg" alt="product" width="300" height="200">
                                </a>
                            </figure>
                            <div class="product-details rtl">
                                <div class="ratings-container">
                                    <div class="ratings-full">
                                        <span class="ratings" style="width:100%"></span>
                                        <span class="tooltiptext tooltip-top"></span>
                                    </div>
                                    <a href="product.html" class="rating-reviews">( از 16نظر )</a>
                                </div>
                                <ul>
                                    <li>رنگ : سیل/ سفید / مونارک </li>
                                    <li>سبک: FJ7126-103</li>
                                    <li>کشور سازنده: ویتنام</li>
                                </ul>
                                <div class="product-price">
                                    <div class="header-price">
                                        <del class="old-price"> 1,200,000 تومان </del><ins class="new-price"> 800,000 تومان </ins>
                                    </div>
                                    <div class="product-action-vertical">
                                        <a href="#" class="btn-product-icon btn-cart" data-toggle="modal"
                                           data-target="#addCartModal" title="اضافه به خرید">
                                            <i class="fa-light fa-basket-shopping"></i>
                                        </a>
                                        <a href="#" class="btn-product-icon btn-wishlist" title=" علاقه ها">
                                            <i class="fa-light fa-heart"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="product-action">
                                    <a href="#" class="btn-product btn-gradient btn-quickview" title="نمایش ">
                                        نمایش
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="product-wrap">
                        <div class="product">
                            <div class="product-label-group">
                                <label class="product-label label-discount">%30</label>
                            </div>
                            <div class="product-header">
                                <h3 class="product-name">
                                    <a href="product.html"> هیوستون راکتس</a>
                                </h3>
                                <div class="product-cat">
                                    <a href="shop-grid.html">لباس ورزشی / لباس تیمی ‌ /  لباس بسکتبال</a>
                                </div>
                            </div>
                            <figure class="product-media">
                                <a href="product.html">
                                    <img src="images/shop/9.jpg" alt="product" width="300" height="200">
                                </a>
                            </figure>
                            <div class="product-details rtl">
                                <div class="ratings-container">
                                    <div class="ratings-full">
                                        <span class="ratings" style="width:100%"></span>
                                        <span class="tooltiptext tooltip-top"></span>
                                    </div>
                                    <a href="product.html" class="rating-reviews">( از 16نظر )</a>
                                </div>
                                <ul>
                                    <li>رنگ : یونیورسیتی رد </li>
                                    <li>سبک: DN2006-659</li>
                                    <li>کشور سازنده: هندوراس</li>
                                </ul>
                                <div class="product-price">
                                    <div class="header-price">
                                        <del class="old-price"> 2,500,000 تومان </del><ins class="new-price"> 1,800,000 تومان </ins>
                                    </div>
                                    <div class="product-action-vertical">
                                        <a href="#" class="btn-product-icon btn-cart" data-toggle="modal"
                                           data-target="#addCartModal" title="اضافه به خرید">
                                            <i class="fa-light fa-basket-shopping"></i>
                                        </a>
                                        <a href="#" class="btn-product-icon btn-wishlist" title=" علاقه ها">
                                            <i class="fa-light fa-heart"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="product-action">
                                    <a href="#" class="btn-product btn-gradient btn-quickview" title="نمایش ">
                                        نمایش
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="product-wrap">
                        <div class="product">
                            <div class="product-label-group">
                                <label class="product-label label-discount">%30</label>
                            </div>
                            <div class="product-header">
                                <h3 class="product-name">
                                    <a href="product.html">لباس طرفداری بسکتبال</a>
                                </h3>
                                <div class="product-cat">
                                    <a href="shop-grid.html">لباس تیمی / کژوال‌ / مردانه</a>
                                </div>
                            </div>
                            <figure class="product-media">
                                <a href="product.html">
                                    <img src="images/shop/4.jpg" alt="product" width="300" height="200">
                                </a>
                            </figure>
                            <div class="product-details rtl">
                                <div class="ratings-container">
                                    <div class="ratings-full">
                                        <span class="ratings" style="width:100%"></span>
                                        <span class="tooltiptext tooltip-top"></span>
                                    </div>
                                    <a href="product.html" class="rating-reviews">( از 16نظر )</a>
                                </div>
                                <ul>
                                    <li>رنگ :مشکی </li>
                                    <li>سبک:  HQ0631-010</li>
                                    <li>کشور سازنده: ویتنام</li>
                                </ul>
                                <div class="product-price">
                                    <div class="header-price">
                                        <del class="old-price"> 5,200,000 تومان </del><ins class="new-price"> 3,800,000 تومان </ins>
                                    </div>
                                    <div class="product-action-vertical">
                                        <a href="#" class="btn-product-icon btn-cart" data-toggle="modal"
                                           data-target="#addCartModal" title="اضافه به خرید">
                                            <i class="fa-light fa-basket-shopping"></i>
                                        </a>
                                        <a href="#" class="btn-product-icon btn-wishlist" title=" علاقه ها">
                                            <i class="fa-light fa-heart"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="product-action">
                                    <a href="#" class="btn-product btn-gradient btn-quickview" title="نمایش ">
                                        نمایش
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="product-wrap">
                        <div class="product">
                            <div class="product-label-group">
                                <label class="product-label label-discount">%30</label>
                            </div>
                            <div class="product-header">
                                <h3 class="product-name">
                                    <a href="product.html">کیف باشگاهی نایک</a>
                                </h3>
                                <div class="product-cat">
                                    <a href="shop-grid.html">کیف  / کیف ورزشی‌ /  کیف باشگاهی</a>
                                </div>
                            </div>
                            <figure class="product-media">
                                <a href="product.html">
                                    <img src="images/shop/5.jpg" alt="product" width="300" height="200">
                                </a>
                            </figure>
                            <div class="product-details rtl">
                                <div class="ratings-container">
                                    <div class="ratings-full">
                                        <span class="ratings" style="width:100%"></span>
                                        <span class="tooltiptext tooltip-top"></span>
                                    </div>
                                    <a href="product.html" class="rating-reviews">( از 16نظر )</a>
                                </div>
                                <ul>
                                    <li>رنگ : گلیشر بلو / بلو وید / بلو وید </li>
                                    <li>سبک:  DH6863-474</li>
                                    <li>کشور سازنده:  اندونزی</li>
                                </ul>
                                <div class="product-price">
                                    <div class="header-price">
                                        <del class="old-price"> 8,200,000 تومان </del><ins class="new-price"> 6,800,000 تومان </ins>
                                    </div>
                                    <div class="product-action-vertical">
                                        <a href="#" class="btn-product-icon btn-cart" data-toggle="modal"
                                           data-target="#addCartModal" title="اضافه به خرید">
                                            <i class="fa-light fa-basket-shopping"></i>
                                        </a>
                                        <a href="#" class="btn-product-icon btn-wishlist" title=" علاقه ها">
                                            <i class="fa-light fa-heart"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="product-action">
                                    <a href="#" class="btn-product btn-gradient btn-quickview" title="نمایش ">
                                        نمایش
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="product-wrap">
                        <div class="product">
                            <div class="product-label-group">
                                <label class="product-label label-discount">%30</label>
                            </div>
                            <div class="product-header">
                                <h3 class="product-name">
                                    <a href="product.html">لس‌آنجلس لیکرز </a>
                                </h3>
                                <div class="product-cat">
                                    <a href="shop-grid.html">لباس ورزشی / تمرینی‌ /  کژوال</a>
                                </div>
                            </div>
                            <figure class="product-media">
                                <a href="product.html">
                                    <img src="images/shop/6.jpg" alt="product" width="300" height="200">
                                </a>
                            </figure>
                            <div class="product-details rtl">
                                <div class="ratings-container">
                                    <div class="ratings-full">
                                        <span class="ratings" style="width:100%"></span>
                                        <span class="tooltiptext tooltip-top"></span>
                                    </div>
                                    <a href="product.html" class="rating-reviews">( از 16نظر )</a>
                                </div>
                                <ul>
                                    <li>رنگ :   آماریلو / فیلد پرپل / سفید / فیلد پرپل </li>
                                    <li>سبک:  AJ5617-728</li>
                                    <li>کشور سازنده: هندوراس، تایلند</li>
                                </ul>
                                <div class="product-price">
                                    <div class="header-price">
                                        <del class="old-price"> 1,200,000 تومان </del><ins class="new-price"> 800,000 تومان </ins>
                                    </div>
                                    <div class="product-action-vertical">
                                        <a href="#" class="btn-product-icon btn-cart" data-toggle="modal"
                                           data-target="#addCartModal" title="اضافه به خرید">
                                            <i class="fa-light fa-basket-shopping"></i>
                                        </a>
                                        <a href="#" class="btn-product-icon btn-wishlist" title=" علاقه ها">
                                            <i class="fa-light fa-heart"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="product-action">
                                    <a href="#" class="btn-product btn-gradient btn-quickview" title="نمایش ">
                                        نمایش
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="product-wrap">
                        <div class="product">
                            <div class="product-label-group">
                                <label class="product-label label-discount">%30</label>
                            </div>
                            <div class="product-header">
                                <h3 class="product-name">
                                    <a href="product.html">لس‌آنجلس لیکرز</a>
                                </h3>
                                <div class="product-cat">
                                    <a href="shop-grid.html">لباس ورزشی / لباس تیمی‌ / لباس بسکتبال</a>
                                </div>
                            </div>
                            <figure class="product-media">
                                <a href="product.html">
                                    <img src="images/shop/7.jpg" alt="product" width="300" height="200">
                                </a>
                            </figure>
                            <div class="product-details rtl">
                                <div class="ratings-container">
                                    <div class="ratings-full">
                                        <span class="ratings" style="width:100%"></span>
                                        <span class="tooltiptext tooltip-top"></span>
                                    </div>
                                    <a href="product.html" class="rating-reviews">( از 16نظر )</a>
                                </div>
                                <ul>
                                    <li>رنگ :آماریلو / فیلد پرپل / سفید / فیلد پرپل </li>
                                    <li>سبک: AJ5617-728</li>
                                    <li>کشور سازنده:  هندوراس، تایلند</li>
                                </ul>
                                <div class="product-price">
                                    <div class="header-price">
                                        <del class="old-price"> 4,200,000 تومان </del><ins class="new-price"> 2,800,000 تومان </ins>
                                    </div>
                                    <div class="product-action-vertical">
                                        <a href="#" class="btn-product-icon btn-cart" data-toggle="modal"
                                           data-target="#addCartModal" title="اضافه به خرید">
                                            <i class="fa-light fa-basket-shopping"></i>
                                        </a>
                                        <a href="#" class="btn-product-icon btn-wishlist" title=" علاقه ها">
                                            <i class="fa-light fa-heart"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="product-action">
                                    <a href="#" class="btn-product btn-gradient btn-quickview" title="نمایش ">
                                        نمایش
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="product-wrap">
                        <div class="product">
                            <div class="product-label-group">
                                <label class="product-label label-discount">%30</label>
                            </div>
                            <div class="product-header">
                                <h3 class="product-name">
                                    <a href="product.html"> پوشاک ورزشی برند نایک</a>
                                </h3>
                                <div class="product-cat">
                                    <a href="shop-grid.html">کفش ورزشی / دویدن‌ /  مردانه</a>
                                </div>
                            </div>
                            <figure class="product-media">
                                <a href="product.html">
                                    <img src="images/shop/8.jpg" alt="product" width="300" height="200">
                                </a>
                            </figure>
                            <div class="product-details rtl">
                                <div class="ratings-container">
                                    <div class="ratings-full">
                                        <span class="ratings" style="width:100%"></span>
                                        <span class="tooltiptext tooltip-top"></span>
                                    </div>
                                    <a href="product.html" class="rating-reviews">( از 16نظر )</a>
                                </div>
                                <ul>
                                    <li>رنگ : مشکی </li>
                                    <li>سبک:  FZ1119-010</li>
                                    <li>کشور سازنده: سریلانکا</li>
                                </ul>
                                <div class="product-price">
                                    <div class="header-price">
                                        <del class="old-price"> 4,200,000 تومان </del><ins class="new-price"> 2,300,000 تومان </ins>
                                    </div>
                                    <div class="product-action-vertical">
                                        <a href="#" class="btn-product-icon btn-cart" data-toggle="modal"
                                           data-target="#addCartModal" title="اضافه به خرید">
                                            <i class="fa-light fa-basket-shopping"></i>
                                        </a>
                                        <a href="#" class="btn-product-icon btn-wishlist" title=" علاقه ها">
                                            <i class="fa-light fa-heart"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="product-action">
                                    <a href="#" class="btn-product btn-gradient btn-quickview" title="نمایش ">
                                        نمایش
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <nav class="toolbox toolbox-pagination">
                    <ul class="pagination">
                        <li class="page-item disabled">
                            <a class="page-link page-link-prev" href="#" aria-label="Previous" tabindex="-1"
                               aria-disabled="true">
                                قبلی
                            </a>
                        </li>
                        <li class="page-item active" aria-current="page"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item page-item-dots"><a class="page-link" href="#">6</a></li>
                        <li class="page-item">
                            <a class="page-link page-link-next" href="#" aria-label="Next">
                                بعدی
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </main>

@endsection