@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')
    <div class="header-top-campaign">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-5 col-lg-6 col-md-10">
                    <div class="header-campaign-activation axil-slick-arrow arrow-both-side header-campaign-arrow">
                        @foreach($animation_banners as $animation_banner)
                            @if($animation_banner->is_active == 1)
                                <div class="slick-slide">
                                    <div class="campaign-content">
                                        <p>{{$animation_banner->animation_text}} <a href="{{$animation_banner->btn_link}}">{{$animation_banner->btn_text}}</a></p>
                                    </div>
                                </div>
                            @endif
                        @endforeach

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Start of Main -->
    <main class="main-wrapper">
        <!-- Start Breadcrumb Area  -->
        <div style="background: url('{{ imageExist(env('CATEGORY_IMAGES_UPLOAD_PATH'),$category->header_image) }}') no-repeat;background-size: cover; " class="axil-breadcrumb-area">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6 col-md-8">
                        <div class="inner">
                            <ul class="axil-breadcrumb">
                                <li class="axil-breadcrumb-item titleWhite"><a href="{{route('home.index')}}">خانه</a></li>
                                <li class="separator"></li>
                                <li class="axil-breadcrumb-item active" aria-current="page titleWhite">فروشگاه</li>
                            </ul>
                            <h1 class="title titleWhite">{{ $category->name }}</h1>
                        <!--<p class="text-white">{!! $category->description !!}</p>-->
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-4">
                        <div class="inner">
                            <div class="bradcrumb-thumb">
                                <img style="    height: 184px;
    position: absolute;
    left: 10px;
    top: 17px;" src="{{ imageExist(env('CATEGORY_IMAGES_UPLOAD_PATH'),$category->image) }}" alt="Image">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Breadcrumb Area  -->

        <!-- Start Shop Area  -->
        <div class="axil-shop-area axil-section-gap bg-color-white">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3">
                        <!--                     <div class="compare-conent col">-->
                    <!--                        <button style="font-size: 18px;margin-bottom: 20px" type="button" class="btn compare-dropdown-btn @if(!request()->is('product-compare/index')) compare-dropdown @endif btn-primary">-->
                        <!--                          <span style="-->

                        <!--height: 20px;-->
                        <!--border: 1px solid #fff;-->
                        <!--border-radius: 50%;-->
                        <!--color: #fff;-->
                        <!--width: 20px;-->
                        <!--display: inline-block;-->
                        <!--font-size: 12px;-->
                        <!--text-align: center;-->
                        <!--margin-left: 20px;-->
                    <!--background-color: var(--color-primary);" id="compare_count" class="cart-count">{{ session()->exists('compareProducts') ? count(session()->get('compareProducts')) : '0' }}</span>  لیست مقایسه-->
                        <!--                        </button>-->
                        <!--                    </div>-->
                        <div id="btn-filter" class="btn  btn-primary">
                            <i class="fa fa-filter"></i>
                            <span >فیلتر ها</span>
                        </div>
                        <div >
                            <input  value="1" onchange="filter_products()" name="instock" type="checkbox" class="d-inline-block custom-control-input" id="instock">
                            <label class="custom-control-label" for="instock">فقط کالاهای موجود</label>
                        </div>

                        <div class="axil-shop-sidebar">
                            <div >
                                <button class="sidebar-close filter-close-btn"><i class="fas fa-times"></i></button>
                            </div>
                            <div style="margin-top: 6px" class="custom-control mb-5 d-inline-block custom-switch">

                            </div>
                            <!--<div class="toggle-list product-categories active">-->
                            <!--    <h6 class="title">دسته بندی ها</h6>-->
                            <!--    <div class="shop-submenu">-->
                            <!--        <ul>-->
                            <!--            <li class="current-cat"><a-->
                        <!--                    href="{{ route('home.product_categories',['category'=>$category->alias]) }}">{{ $category->name }}</a>-->
                            <!--            </li>-->
                        <!--            @foreach($related_categories as $related_category)-->
                        <!--                @if($related_category->id!=$category->id)-->
                            <!--                    <li>-->
                        <!--                        <a href="{{ route('home.product_categories',['category'=>$related_category->alias]) }}"><i-->
                        <!--                                class="ion-plus"></i>{{ $related_category->name }}-->
                            <!--                        </a>-->
                            <!--                    </li>-->
                            <!--                @endif-->
                            <!--            @endforeach-->
                            <!--        </ul>-->
                            <!--    </div>-->
                            <!--</div>-->
                            <div style="font-size:18px" class="btn-clear-filter d-block mb-3 btn btn-primary btn-rounded" type="button">
                                پاکسازی فیلتر
                            </div>
                            <form id="filter_products" method="get">
                                <input type="hidden" name="price_range_filter" id="price_range_filter">
                                <input type="hidden" name="orderby" id="orderby" value="{{ $sort }}">

                                @foreach($all_attributes as $attribute)

                                    <div class="toggle-list product-color active open_margin">

                                        <h6 class="title">{{ $attribute->name }}</h6>
                                        <div class="shop-submenu">
                                            <ul style="display: block">
                                                @foreach($attribute->AttributeValues as $attrValue)
                                                    <li >
                                                        <input id="attr_filter_{{ $attrValue->id }}"
                                                               onclick="filter_products()"
                                                               type="checkbox" name="attr_filter_ids[]"
                                                               class="attr_filter_ids"
                                                               value="{{ $attrValue->id }}">
                                                        <label
                                                                for="attr_filter_{{ $attrValue->id }}">{{ $attrValue->name }}</label>
                                                    </li>
                                                @endforeach
                                            </ul>

                                        </div>

                                    </div>

                                @endforeach


                            </form>

                            <!--<div class="toggle-list product-price-range active">-->
                            <!--    <h6 class="title">قیمت</h6>-->
                            <!--    <div class="shop-submenu">-->

                            <!--        <div id="slider-range"></div>-->
                            <!--        <div class="flex-center mt--20">-->
                            <!--            <span class="input-range">قیمت: </span>-->
                            <!--            <input type="text" id="amount" class="amount-range" readonly>-->
                            <!--        </div>-->

                            <!--    </div>-->
                            <!--</div>-->
                            <button type="button" onclick="filter_products()" class="axil-btn btn-bg-primary">فیلتر
                            </button>
                        </div>
                        <!-- End .axil-shop-sidebar -->
                    </div>

                    <div  class="col-lg-12">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="axil-shop-top mb--40">
                                    <div
                                            class="category-select align-items-center justify-content-lg-end justify-content-between">
                                        <!-- Start Single Select  -->
                                    <!--<span class="filter-results">نمایش {{ $products->firstItem() }}-{{ $products->lastItem() }} از {{ $products_count }} محصول</span>-->
                                        <select id="sort_products" onchange="filter_products()" class="single-select">
                                            <option value="0" {{ $sort==0 ? 'selected' : '' }}>پیش فرض</option>
                                            <option value="1" {{ $sort==1 ? 'selected' : '' }}>جدید ترین</option>
                                            <option value="2" {{ $sort==2 ? 'selected' : '' }}>قدیمی ترین</option>
                                            <option value="3" {{ $sort==3 ? 'selected' : '' }}>قیمت ،نزولی</option>
                                            <option value="4" {{ $sort==4 ? 'selected' : '' }}>قیمت ،صعودی</option>
                                            <option value="5" {{ $sort==5 ? 'selected' : '' }}>محبوب ترین ها</option>
                                        </select>
                                        <!-- End Single Select  -->
                                    </div>
                                    <!--<div class="d-lg-none">-->
                                    <!--    <button class="product-filter-mobile filter-toggle"><i-->
                                    <!--            class="fas fa-filter"></i> فیلتر-->
                                    <!--    </button>-->
                                    <!--</div>-->
                                </div>
                            </div>
                        </div>
                        <!-- End .row -->
                        <div id="post-data" class="row row--15">
                            @foreach($products as $product)
                                @include('home.sections.product_box',compact('product'))
                            @endforeach


                        </div>
                        <div class="text-center pt--20">
                            <a id="load-more" style="cursor: pointer" class="axil-btn btn-bg-lighter btn-load-more">نمایش بیشتر</a>
                        </div>
                    </div>
                </div>

            </div>
            <div class="container">
                @if($category->description!=null)
                    <div class="page_description mt-5 mb-5">
                        {!! $category->description !!}
                        <span data-open="no" type="button" class="btn btn-primary open_page_description"
                              style="position: absolute;left: 40px;bottom: 10px;font-size:19px">نمایش بیشتر
                    <i class="fa fa-angle-down ml-3"></i>
                    </span>
                    </div>
                @endif
            </div>
            <!-- End .container -->
        </div>

        <div class="modal fade quick-view-product" id="quick-view-modal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><i
                                    class="far fa-times"></i></button>
                    </div>
                    <div class="modal-body">

                    </div>
                </div>
            </div>
        </div>
    </main>

@endsection