@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;
            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');
                    }
                }
            })
            console.log(attribute_values);

            // $('#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">

            </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>
                                @foreach($attributes_group as $group)
                                    <div class="row cols-lg-4 widget-filter-wrap">
                                        @foreach($all_attributes as $attribute)
                                            @if($attribute->group_id == $group->id)
                                                <div class="widget widget-filter">
                                                    <h3 class="widget-title">{{ $attribute->name }}</h3>
                                                    <ul class="widget-body filter-items">
                                                        @foreach($attribute->AttributeValues as $attrValue)
                                                            <li>
                                                                <a>
                                                                <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>
                                                                </a>  </li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            @endif
                                        @endforeach
                                        {{--                                    <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>   @endforeach
                            </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 id="sort_products" onchange="filter_products()" class="single-select"
                                        name="orderby">
                                    <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>
                            </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">
                    @foreach($products as $product)
                        @include('home.sections.product_box',compact('product'))
                    @endforeach
                </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